1、介紹

JavaScript

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

組成部分：

• ECMAScript： JS 基礎語法(規定 關鍵字 運算符 語句 函數等等…)
• BOM： 瀏覽器對象模型
• DOM： 文檔對象模型

作用：修改html頁面的內容；修改html的樣式；完成表單的驗證。

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

JS 和 HTML 的整合：

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

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

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

2、JavaScript 基礎

JS 中的變量聲明：

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

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

JS 的數據類型：

1、原始類型（5種）

• Null
• String
• Number
• Boolean
• Undefined

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

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

使用 typeof 的返回值：

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

2、引用類型

運算符：

• 關系運算符：

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

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

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

JS 的語句：

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

JS 操作：

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

定義函數：

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

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

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

事件：

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

事件和函數綁定：

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

• 方式2：給元素派發事件（相當于給元素綁定事件）

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

  注意：內存中應該存在該元素才可以派發事件，怎么理解？因為網頁是從前往后解析，如果把派發事件寫在頁面元素的前面，而HTML頁面其實還沒加載完畢，在這之前獲取元素是獲取不到，即不能派發事件。

  做法：

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

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

所有的瀏覽器都有 5 個對象。

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

? Windows 對象詳解

如果文檔包含框架（frame 或 iframe 標簽），瀏覽器會為 HTML 文檔創建一個 window 對象，并為每個框架創建一個額外的 window 對象。

PS：若是 window 對象的屬性和方法,調用的時候可以省略 window

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

  • window.location 等價于 location
  • window.history 等價于 history
  • …

• 常用的方法：

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

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

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

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

常用屬性：

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

? history 對象：操作歷史*

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

• go(int)

  • go(-1) 相當于 back()
  • go(1) 相當于 forward()

4、DOM（文檔對象模型）

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

節點：

• 文檔節點 document
• 元素節點 element
• 屬性節點 attribute
• 文本節點 text

獲取一個元素節點：通過 document 獲取
操作元素的屬性：dom對象.屬性
操作元素的標簽體：dom對象.innerHTML

5、其他及注意

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

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

2、事件總結：

常見事件：

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

3、阻止默認事件的發生；阻止事件傳播

4、引用型類似總結：

• 原始類型中的 String Number Boolean 都是偽對象，可以調用相應的方法
• Array：數組

• String：

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

• Boolean：

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

• Number：語法

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

• Date：

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

• RegExp:正則表達式

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

• Math：

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

• 全局：

  decodeURI() 解碼某個編碼的 URI。 encodeURI() 把字符串編碼為 URI。Number():強制轉換成數字 String():轉成字符串parseInt():嘗試轉換成整數 parseFloat():嘗試轉換成小數eval() 計算 JavaScript 字符串，并把它作為腳本代碼來執行。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。