1、介紹

JavaScript

JavaScript：一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，
內(nèi)置支持類型。它的解釋器被稱為 JavaScript 引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言。

組成部分：

• ECMAScript： JS 基礎(chǔ)語法(規(guī)定 關(guān)鍵字 運(yùn)算符 語句 函數(shù)等等…)
• BOM： 瀏覽器對象模型
• DOM： 文檔對象模型

作用：修改html頁面的內(nèi)容；修改html的樣式；完成表單的驗(yàn)證。

注意：JS 可以在頁面上直接寫，也可以單獨(dú)出去；JS 的文件的后綴名 .js

JS 和 HTML 的整合：

• 方式1：在頁面上直接寫，將 js 代碼放在 <script></script> 標(biāo)簽中,一般放在head 標(biāo)簽中

<script type="text/javascript">funtion fuc1(){alert(111);} </script>

• 方式2：獨(dú)立的 js 文件，通過 script 標(biāo)簽的src屬性導(dǎo)入。eg：<script type="text/javascript" src="test.js" ></script>

2、JavaScript 基礎(chǔ)

JS 中的變量聲明：

• var 變量名=初始化值;
• var 變量名; 變量名=初始化值;

注：var可以省略，建議不要省略；一行要以分號結(jié)尾，最后一個(gè)分號可以省略,建議不要省略。

JS 的數(shù)據(jù)類型：

1、原始類型（5種）

• Null
• String
• Number
• Boolean
• Undefined

通過 typeof 運(yùn)算符可以判斷一個(gè)值或者變量是否屬于原始類型，若屬于原始類型，還可以判斷出屬于那種原始類型。typeof 變量|值;

若變量為 null，使用 typeof 彈出的值 object

使用 typeof 的返回值：

• undefined - 如果變量是 Undefined 類型的
• boolean - 如果變量是 Boolean 類型的
• number - 如果變量是 Number 類型的
• string - 如果變量是 String 類型的
• object - 如果變量是一種引用類型或 Null 類型的

2、引用類型

運(yùn)算符：

• 關(guān)系運(yùn)算符：

  • 兩邊值都是字符，比較 ascii 碼
  • 兩邊都是數(shù)字，和 java 一樣
  • 一邊是數(shù)字，一遍是字符串形式的數(shù)字 eg：3>"2" 可以比較，將字符串形式的數(shù)字轉(zhuǎn)換成數(shù)字在進(jìn)行比較。
  • 一邊是數(shù)字，一遍是普通字符串 eg：3>"hello" 可以比較，值永遠(yuǎn)是 false

• 等性運(yùn)算符：== 只判斷值是否相同；=== 不僅判斷是否相同,還要判斷類型是否相同

  "66"==66 true "666"===666 false

JS 的語句：

if、while、for 等和 java 一樣，switch 和 java 一樣(區(qū)別：switch 后面跟字符串，還可以跟變量)

JS 操作：

獲取元素：var obj=document.getElementById("id值");
獲取元素的value屬性：var val=document.getElementById("id值").value;
設(shè)置元素的value屬性：document.getElementById("id值").value="sdfsdf";
獲取元素的標(biāo)簽體：var ht=document.getElementById("id值").innerHTML;
設(shè)置元素的標(biāo)簽體：document.getElementById("id值").innerHTML="ssss";

定義函數(shù)：

• 方式1：function 函數(shù)名(參數(shù)列表){函數(shù)體}

• 方式2：var 函數(shù)名=function(參數(shù)列表){函數(shù)體}

  注意：函數(shù)聲明的時(shí)候不用聲明返回值類型；參數(shù)列表上不要寫參數(shù)類型；通過return 結(jié)束方法和將值返回；函數(shù)調(diào)用的時(shí)候：函數(shù)名(參數(shù))

事件：

• onclick 單擊
• onsubmit 表單提交，加在 form 表單上的 onsubmit="return 函數(shù)名()" ，函數(shù)返回值為boolean類型
• onload 頁面加載成功或者元素加載成功

事件和函數(shù)綁定：

• 方式1：通過元素的事件屬性，<xxx onxxx="函數(shù)名(參數(shù)列表)">，若參數(shù)為 this 是將當(dāng)前的 dom 對象傳遞給了函數(shù)

• 方式2：給元素派發(fā)事件（相當(dāng)于給元素綁定事件）

  document.getElementById("id值").onxxx=function(){...}; document.getElementById("id值").onxxx=函數(shù)名;

  注意：內(nèi)存中應(yīng)該存在該元素才可以派發(fā)事件，怎么理解？因?yàn)榫W(wǎng)頁是從前往后解析，如果把派發(fā)事件寫在頁面元素的前面，而HTML頁面其實(shí)還沒加載完畢，在這之前獲取元素是獲取不到，即不能派發(fā)事件。

  做法：

• 將 js 代碼放在html頁面的最下面
• 在頁面加載成功之后在運(yùn)行 js 代碼 onload 事件.
  ?

3、BOM（瀏覽器對象模型）

所有的瀏覽器都有 5 個(gè)對象。

• window:窗口
• location:定位信息 (地址欄)
• history:歷史

? Windows 對象詳解

如果文檔包含框架（frame 或 iframe 標(biāo)簽），瀏覽器會為 HTML 文檔創(chuàng)建一個(gè) window 對象，并為每個(gè)框架創(chuàng)建一個(gè)額外的 window 對象。

PS：若是 window 對象的屬性和方法,調(diào)用的時(shí)候可以省略 window

• 常用的屬性：通過 window 可以獲取其他的四個(gè)對象

  • window.location 等價(jià)于 location
  • window.history 等價(jià)于 history
  • …

• 常用的方法：

  • 消息框：
    alert("....") 警告框
    confirm("你確定要刪除嗎?")確定框，返回值：boolean
    prompt("請輸入您的姓名") 輸入框，返回值：你輸入的內(nèi)容

  • 定時(shí)器：
    設(shè)置定時(shí)器：setInterval(code,毫秒數(shù)):周期執(zhí)行；setTimeout(code,毫秒數(shù)):延遲 多長事件后 只執(zhí)行一次，例如：setInterval(showAd,4000);，serInterval("showAd()",4000);
    清除定時(shí)器：clearInterval(id):，clearTimeout(id):

  • 打開和關(guān)閉：open(url) 打開；close() 關(guān)閉

? location 對象：定位信息，地址欄

常用屬性：

• href 獲取或者設(shè)置當(dāng)前頁面的 url(定位信息)
• location.href; 獲取 url
• location.href=”…”;設(shè)置 url，相當(dāng)于 a 標(biāo)簽，超鏈接

? history 對象：操作歷史*

• back(); 后退
• forward(): 向前

• go(int)

  • go(-1) 相當(dāng)于 back()
  • go(1) 相當(dāng)于 forward()

4、DOM（文檔對象模型）

就是我們的 HTML 代碼加載到內(nèi)存中會形成一顆 document 樹。

節(jié)點(diǎn)：

• 文檔節(jié)點(diǎn) document
• 元素節(jié)點(diǎn) element
• 屬性節(jié)點(diǎn) attribute
• 文本節(jié)點(diǎn) text

獲取一個(gè)元素節(jié)點(diǎn)：通過 document 獲取
操作元素的屬性：dom對象.屬性
操作元素的標(biāo)簽體：dom對象.innerHTML

5、其他及注意

1、在方法中 (function()) this 指代的是當(dāng)前的元素（當(dāng)前的 dom 對象）
例如：

<input type="text" name="username" id="username" onblur="loseFocus(this.value)"> 方法:function loseFocus(obj){alert(obj);}

2、事件總結(jié)：

常見事件：

• 焦點(diǎn)事件★：onfocus、onblur
• 表單事件：onsubmit、onchange 改變
• 頁面加載事件★：onload
• 鼠標(biāo)事件（掌握）：onclick
• 鼠標(biāo)事件（了解）：ondblclick 雙擊、onmousedown 按下、onmouserup 彈起、onmousemove 移動、onmouserover 懸停、onmouserout 移出
• 鼠標(biāo)事件（理解）：onkeydown 按下、onkeyup 彈起、onkeypress 按住

3、阻止默認(rèn)事件的發(fā)生；阻止事件傳播

4、引用型類似總結(jié)：

• 原始類型中的 String Number Boolean 都是偽對象，可以調(diào)用相應(yīng)的方法
• Array：數(shù)組

• String：

  語法:new String(值|變量);//返回一個(gè)對象String(值|變量);//返回原始類型 常用方法:substring(start,end):[start,end)substr(start,size):從索引為指定的值開始向后截取幾個(gè)charAt(index):返回在指定位置的字符。indexOf(""):返回字符串所在索引replace():替換split():切割常用屬性:length

• Boolean：

  語法：new Boolean(值|變量);Boolean(值|變量);非0數(shù)字 非空字符串 非空對象 轉(zhuǎn)成true

• Number：語法

  語法:new Number(值|變量);Number(值|變量); 注意:null====>0 fale====>0 true====>1字符串的數(shù)字=====>對應(yīng)的數(shù)字其他的NaN

• Date：

  new Date(); 常用方法:toLocalString()

• RegExp:正則表達(dá)式

  語法:直接量語法 /正則表達(dá)式/參數(shù)直接量語法 /正則表達(dá)式/new RegExp("正則表達(dá)式")new RegExp("正則表達(dá)式","參數(shù)") 參數(shù):i:忽略大小寫g:全局常用方法:test() :返回值為boolean

• Math：

  Math.常量|方法 Math.PI Math.random() [0,1)

• 全局：

  decodeURI() 解碼某個(gè)編碼的 URI。 encodeURI() 把字符串編碼為 URI。Number():強(qiáng)制轉(zhuǎn)換成數(shù)字 String():轉(zhuǎn)成字符串parseInt():嘗試轉(zhuǎn)換成整數(shù) parseFloat():嘗試轉(zhuǎn)換成小數(shù)eval() 計(jì)算 JavaScript 字符串，并把它作為腳本代碼來執(zhí)行。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的03-JavaScript的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。