JavaScrip腳本語言:
特性:松散(對于開發(fā)者的要求低)
? 如:定義變量嚴禁語言: int a=30氓栈;
松散語言:var a= 30撑柔;
永遠不會認為開發(fā)者寫代碼有問題
分類:ECMAScript:計算機協(xié)會統(tǒng)一標準 只包含了基礎(chǔ)語法部分版本區(qū)別{ECMASrcipt5(包含5)之前ECMASrcipt6(ECMASrcipt2015 簡稱 ES6)包含了所有語言}TypeScript(簡稱TS)微軟出的js語言>js的超級ECMASrcipt(語言基礎(chǔ))
DOM、BOM操作:DOM:操作頁面中的元素對象(標簽){批量創(chuàng)建邏輯交互}
BOM:瀏覽器的操作{上一頁下一頁歷史記錄刷新}webapl{webSocket(及時通訊)音頻播放器游戲(canvas)webVR}
游戲引擎:coco? ? 白鷺? 微信小游戲? ? ? ? ? ?
? ECMASrcipt語言基礎(chǔ)
1.基礎(chǔ)語法:預備知識:(1)語句:通常一行代碼如添加一分號為一條語句使用英文分號分隔
? (2)變量:目的通過一個名字來表示一個可以改變的值定義方式:var空格 變量名=值? 不賦值? var空格 變量名 war:為關(guān)鍵字
變量名:開發(fā)這起的一個名字變量名的命名規(guī)則:不能使用關(guān)鍵字定義變量名不能以數(shù)字開頭不能以特殊符號開頭定義變量名要有意義:駝峰命名法:第一個首字母小寫其他首字母大寫下劃線命名法關(guān)鍵字(是由語言本事提供的名字,有固定意義的。如var就是定義變量的):var? for while if static let等意義:
變量名:開發(fā)者起的名字 外號? 標記值(具體內(nèi)容):數(shù)字 文字(字符串)數(shù)組 對象
(3)2.opp(面向?qū)ο螅㎎S的引入方式1.<script>var a=30;<script>2.<script src="js文件位置"> <script>注釋:單行:Ctrl+/多行:ctrl+shift+/運算符:算數(shù)運算:+ - * / %(取余)
必須數(shù)字與數(shù)字之間運算數(shù)據(jù)類型:
Number:數(shù)字類型包含浮點和整數(shù)
String:字符串類型只要是使用雙引號或單引號包裹的
boolean:波爾類型;true(對)false(錯)
Array :數(shù)組
Object:對象
Function:函數(shù)數(shù)據(jù)類型的轉(zhuǎn)換:字符串轉(zhuǎn)數(shù)字:轉(zhuǎn)數(shù)字:parseLnt()轉(zhuǎn)浮點:parseFloat如果使用小數(shù)精度丟失
war:為關(guān)鍵字變量名:開發(fā)這起的一個名字變量名的命名規(guī)則:不能使用關(guān)鍵字定義變量名不能以數(shù)字開頭不能以特殊符號開頭定義變量名要有意義:
駝峰命名法:第一個首字母小寫其他首字母大寫下劃線命名法關(guān)鍵字(是由語言本事提供的名字,有固定意義的辽装。如var就是定義變量的):var for while if static let等意義:
變量名:開發(fā)者起的名字 外號 標記值(具體內(nèi)容):數(shù)字 文字(字符串)數(shù)組 對象(3)2.opp(面向?qū)ο螅?/p>
JS的引入方式
1.<script>var a=30;<script>
2.<script src="js文件位置"> <script>注釋:單行:Ctrl+/多行:ctrl+shift+/運算符:算數(shù)運算:+ - * / %(取余)必須數(shù)字與數(shù)字之間運算數(shù)據(jù)類型:Number:數(shù)字類型包含浮點和整數(shù) String:字符串類型只要是使用雙引號或單引號包裹的boolean:波爾類型;true(對)false(錯)Array :數(shù)組Object:對象Function:函數(shù)數(shù)據(jù)類型的轉(zhuǎn)換:字符串轉(zhuǎn)數(shù)字:轉(zhuǎn)數(shù)字:parseLnt()轉(zhuǎn)浮點:parseFloat如果使用小數(shù)精度丟失{不要直接使用小數(shù)一定要使用:
1.乘以100倍精準的級別}prompr()輸入內(nèi)容:使用代碼輸出變量沒實際意義知識在控制臺輸出一下變量console.log(a)日志console.warn(a)警告console.info(a)詳細詳細信息調(diào)試方法:
1.console.log(a);日志
2.斷點調(diào)試:在程序中打點組織繼續(xù)執(zhí)行首先根據(jù)經(jīng)驗定位到大概錯誤位置然后打開瀏覽器中的Sources點擊要調(diào)試的js文件在懷疑有錯誤的地方點個點(打斷點)程序重新運行會在斷點位置停止->鼠標移動到斷點上面的變量->就會顯示變量的值如果繼續(xù)拍錯可以打多個斷點通過播放鍵跳到下一個斷點通過下一步執(zhí)行下一步代碼復合運算符:+= :var a=10;? var b=20;? a = a+=b;-=:var a=10;? var b=20;? a = a-=b;*=:var a=10;? var b=20;? a = a*=b;/= :var a=10;? var b=20;? a = a/=b;%=:var a=10;? var b=20;? a = a%=b;++:自己給自己增加一個1加加減減在前先做自增減在做其他運算加加減減在后先做其他運算(或別的操作)在做自增減 --:自己給自己減少一個1對比運算符:
結(jié)果為Boolean類型的值分別為true和false。(> < >= <= ==(忽略數(shù)據(jù)的類型如:1=“1”) === (嚴格查看數(shù)據(jù)類型的必須類型與值都相同的如:1與“1”為不相同)!=(不等于不區(qū)分數(shù)據(jù)類型如:1與“1為相同”)!==(區(qū)分數(shù)劇類型如1與1“1”為不相同))案例:d分支結(jié)構(gòu):if(條件){當條件滿足執(zhí)行此內(nèi)容}if(條件){}else{}if(條件){}else if(條件){}else{}三元運算(三目運算):經(jīng)常會代替if else語句常用代碼:if(睡覺){? ? ? ? ? ? ? 做夢? ? ? ? ? ? }else{掌握三元運算? }三元運算:條件相味?滿足執(zhí)行拾积,不滿足不執(zhí)行//隨機數(shù)//Math 數(shù)學函數(shù)//random 隨機函數(shù)var num3=Math.random();console.log(num3); 邏輯運算:與(&&):所欲條件都必須滿足才算真的;或(||):兩個條件中只要有一個條件滿足就為真丰涉;非(M厍伞):黑白顛倒,對的就是錯的一死,錯的就是對的肛度。表示為真* true* 1* 由內(nèi)容的字符串“xx”* 有值的對象* 表示為假的* 0* false* null* nudefineded* NAN* 空字符串“”switch:選擇其中的某一個點子(case)switch(變量){case值1:break;case值2:break投慈;default:}break:不是強制添加如果不添加break程序會繼續(xù)執(zhí)行下面的條件承耿。循環(huán)結(jié)構(gòu):1、知道循環(huán)次數(shù)(for)for(var i=0; i<5; 1++){}var i=0;初始化變量伪煤;i<5;循環(huán)的條件加袋;i++;更改變量的值for循環(huán)的執(zhí)行流程continue:從continue的開始部分跳出循環(huán)continue前的不會跳過道循環(huán)次數(shù)(while)while:while(條件){循環(huán)體}抱既;do while:不管條件漫步滿足先執(zhí)行一次循環(huán)(計入總循環(huán)次數(shù))公式:do { }while ()例: var index=0; do {document.write("1212");document.write("<br>");index++;if (index>10)break; }while (1)函數(shù)具備某些工能的工具四種類型:有返回值:帶參數(shù)不帶參數(shù)無返回值:帶參數(shù)不帶參數(shù)function hanShuMing(函數(shù)名)(? ) {? alert("函數(shù)")}調(diào)用函數(shù)hanShuMing():2.var xx=function (? ) {? 函數(shù)體 console.log("xxxxxx") }調(diào)用函數(shù)體—>函數(shù)體的代碼才會執(zhí)行 xx(? );內(nèi)置函數(shù){console.log()alert()Math.radom()prompt()}參數(shù):形式參數(shù):形參沒有實際意義代表著即將傳進來的實參职烧。實際參數(shù):實參是個實實在在的一個值作用域:概念 ——》變量起作用的范圍局部變量:作用域只在定義的函數(shù)體里面,在函數(shù)外面是不可以使用的防泵。全局變量:自執(zhí)行函數(shù):自執(zhí)行函數(shù) 解決作用域的問題(防止多個js文件間變量的互相影響)(function () {var num=20;})()返回值:帶返回值的函數(shù)是是什么蚀之?返回值是什么函數(shù)就表示的是什么function x(){return}return(值):放到函數(shù)中:return有值時:有返回值的函數(shù)return沒值時:跳出函數(shù)? ? ? 數(shù)組概念:有序排列的集合標識數(shù)組中元素位置的叫做下標或索引;下標;可以通過下標找到數(shù)組中的元素捷泞,可以通過下標改變這個位置的值恬总;數(shù)組中下標是從0開始的;創(chuàng)建數(shù)組:字面量的方式var a=[? ]肚邢;? ? ? ? ? ? ? ? var b=[ "悟空 ",“八戒”拭卿,“和尚” ]通過類名創(chuàng)建數(shù)組:var arr= new Array(? )獲取數(shù)字中的元素:數(shù)組名[ 下標 ]骡湖;var a=["王八","烏龜","甲魚","鱉"];var b=a[1];a[0]="健權(quán)";替換(修改)數(shù)組中的元素:數(shù)組名[下標]=新值;遍歷數(shù)組(把數(shù)組中的元素逐個讀取出來):for循環(huán)峻厚,forEach响蕴;數(shù)組1.屬性:長度:(數(shù)組名:length):數(shù)組中有多少個元素->數(shù)字是多少2.方法在數(shù)組中最后一個位置插入(刪除)數(shù)據(jù):1.插入數(shù)據(jù):數(shù)組名+點+push2.刪除數(shù)組中最后一個;數(shù)組名+點+pop惠桃;在數(shù)組中第一個位置插入(刪除)數(shù)據(jù):1.插入輸入unshift2.刪除數(shù)據(jù)shift翻轉(zhuǎn)數(shù)組(把數(shù)組中的元素順序顛倒):reverse:會返回一個新的數(shù)組如:var ss=[22,33,77] var ww=ss.reverse( );document.write(ww)document.write("<br>")浦夷;合并數(shù)字;(concat)把兩個或多個數(shù)組合并成一個新的數(shù)組數(shù)組排序:(sort)數(shù)組+點+函數(shù)(a,b,){return a>b;}數(shù)組轉(zhuǎn)字符串:1.toString(萬能法)2.join(“”)在數(shù)組中插入一個元素:splice:公式:數(shù)組名+點splice(插入位置(下標)辖试,刪除元素數(shù)量,插入的元素(數(shù)據(jù)是什么))刪除元素:splice公式:數(shù)組名+點 splice(刪除元素位置劈狐,刪除元素數(shù)量)->返回的數(shù)組為刪除的那些元素截取數(shù)組:slice:公式:數(shù)組名+點+slice(開始下標罐孝,結(jié)束的下標)? ? ? ? 字符串屬性:長度(lenght)方法:1.字符串轉(zhuǎn)數(shù)組:split:2.替換字符串:replace(查詢的字符串,替換的字符串)->會得到一個新的變量3.查詢字符串:search:(查詢的內(nèi)容)正數(shù)和0為查詢到第一個數(shù)的位置-1為沒有查詢到4.toLowerCase(轉(zhuǎn)小寫):5.toUpperCase(轉(zhuǎn)大寫):6.查詢某個字符在源字符串的位置(indexOf)7.查詢某個位置的字符(charAt)8.截确实蕖(slice)9.查詢字符串:(match)可用正則正則表達式:input:value:輸入框的輸入值DOM:獲取DOM(html)元素:document.querySelector(點+選擇器的名字)DOM獲取DOM元素1.document.querySelector("選擇器的名字")2.3.4.創(chuàng)建DOM元素刪除DOM清空DOM插入文本插入HTML添加事件:鼠標事件.鍵盤事件.拖拽事件? ? ? ?
? ? 日期日期對象Date:創(chuàng)建日期對象:獲取當前日期莲兢;var data=new Date( )new:是通過類名創(chuàng)建的對象Date:是個日期類通過日期類創(chuàng)建一個當前的日期筆記截圖獲取周日:周日為0;周一為1续膳。改艇。。坟岔。谒兄。? ? 定時器(單位毫秒)不可以重復使用多個定時器否則定時器的時間會疊加用完要刪除定時器刪除延遲定時器clearTimeOut(標記)1.延遲執(zhí)行:var 標記 = setTimeout(執(zhí)行函數(shù),延遲時間)var bg=document.querySelector(".bg") var setu=setTimeout(function () { bg.style.background="yellow"? 清除定時器? clearTimeout(setu);},1000*2);2.重復執(zhí)行js的引入方式社付;1.在head中引入(還未在HTML標簽就在js中查-》查不到)2.在body結(jié)束標簽上面引入(可以避免查找不到HTML)? ? ? ? ? ? DOM1.查詢DOM元素:(1)document.querySelector(“選擇器的名字”)特點:查找的是第一個元素(2)document.querySelectorAll(“選擇器”)特點:查找偽數(shù)組(3)ID選擇器不需要加#document.getElementById特點:查找ID類選擇器(4)通過類選擇器 getElementsByClassName("")(5)document.getElementsByTagName("div")特點-偽類數(shù)組2.創(chuàng)件DOM的方法(1)document.createElement( "標簽的名字")3.DOM的操作(1)把DOM放到父元素里面承疲,公式:父元素+點+appendChild( 2 )刪除元素( 3 )替換元素 ( 4 )? 復制元素:cloneNode( )4設置DOM的樣式:1.獲取編譯完成的樣式(css里面的樣式)getComputedStyle(dom)公式DOM.style5.設置元素的屬性(1)dom元素點屬性名=屬性值查詢:dom元素點屬性名(2)dom元素點setAttribute(屬性名)查詢DOM元素點getAttribute(" ")設置屬性:setAttribute·讀取屬性:getAttribute//設置類選擇器的名字.className="ttt"? ? ? ? ? 事件1.鼠標事件(1)點擊事假:onClickdom.onClick=function(事件對象){}(2)移動事件:onmousemove:鼠標的時間對象pageX:光標在頁面X軸的位置pageY: 光標在頁面y軸的位置(3)鼠標移入事件onmouseover:先調(diào)用onmouseenter:后調(diào)用(4)移除的事件onmouseseleave:先調(diào)用onmouseout:后調(diào)用2.鍵盤事件(1)onkeydown:(按下鍵盤觸發(fā)的事件)dom.onkeydown=function(){}(2)onkeyup:鍵盤按下抬起時觸發(fā)(3)onkeypress:按鍵盤就觸發(fā)當鍵盤事件觸發(fā)的時候會獲得一個事件對象(Event)code:區(qū)分按下的是哪個鍵keycode:區(qū)分按下的是哪個鍵3.狀態(tài)事件input的狀態(tài):光標閃爍的狀態(tài)(onfocus),失去光標的時候(onblue),里面文字發(fā)生改變的時候(onchange,)只要用戶輸入就會改變(oninput)JSON對象:(json是一種數(shù)據(jù)格式瘦穆,沒有語言限制)數(shù)據(jù)格式:{"鍵":值纪隙,(由逗號分隔開)"鍵":[1,2,3,4,],}js里面的JSON對象{由? 鍵:值扛或,? ? ? 鍵:值 }XML:(數(shù)據(jù)格式?jīng)]有語言限制)很類似與HTML格式? ? ? ? ? ? 事件監(jiān)聽1.添加監(jiān)聽事件:dom點addEventListener(“事件名”绵咱,函數(shù))2.移除監(jiān)聽事件:dom點remoerEventListener("事件名",函數(shù))事件技巧:1.阻止元素的默認行為event.preventDefault()例:去掉a標簽刷新頁面(跳轉(zhuǎn))頁面的功能表單標簽里面的<input type="submit"><input type="rest">2.事件冒泡或捕獲事件冒泡:是從內(nèi)向外觸發(fā)(默認行為為事件冒泡)事件捕獲:從外向內(nèi)觸發(fā)Event所有事件的先祖MouseEventkeyboardEventfunction f1(a,b) {? ? //arguments是傳入進去的全部參數(shù)(參數(shù)列表)->數(shù)組? ? console.log(arguments[0])? ? console.log(a)? }? f1(3,6,9,10)? f1(83,6,9,10,77)? f1(13,6,9,10,77,3,77,98)