Day03-JavaScript01

---

JS的簡介

---

什么是js

• javascript簡稱js，是目前web開發中不可缺少的腳本語言，js不需要編譯即可運行，“寄生”在html體內隨網絡傳輸到客戶端的瀏覽器的內存中解析。（html的加載也是從上往下加載的）

  • 腳本語言
  • 腳本：電影或電視劇的拍攝時候的劇本底稿。/計算機中的腳本，給計算機看。腳本中包含一些給計算機的指令。
  • Java和C語言，都需要編譯成二進制的可執行文件。腳本文件是不需要編譯，直接可以使用解釋器進行解釋執行！
  • 百度的解釋：腳本語言又被稱為擴建的語言，或者動態語言，是一種編程語言，用來控制軟件應用程序，腳本通常以文本（如ASCII)保存，只在被調用時進行解釋或編譯。

• js是 基于對象 和 事件驅動 的腳本語言。

  • 基于對象：不支持繼承！ 并且其中內置了許許多多的對象
  • 事件驅動：無事件，不js，沒有事件就無法執行js代碼。點擊事件，前進后退、滑動、提交等等事件。

---

js的作用（常見）

• js可以動態的修改html及css的代碼（修改的是瀏覽器內存中的那一份代碼，服務器端的文件是沒有變化的）
• js可以對表單進行校驗 （最初開發出來js就是拿來校驗表單的）

---

js的組成部分（理解）

• 1.ECMAScript：這一部分主要是js的基本語法

• 2.BOM：Browser Object Model 瀏覽器對象模型，主要是獲取瀏覽器信息或操作，例如：瀏覽器的前進與后退、瀏覽器彈出提示框、瀏覽器地址欄輸入網址跳轉等操作等（window最常用，然后還有Navigator，Screen，History，Location）

• 3.DOM：Document Object Model 文檔對象模型，此處的文檔暫且理解為html，html加載到瀏覽器的內存中，可以使用js的DOM技術對內存中的html節點進行修改，用戶從瀏覽器看到的是js動態修改后頁面

---

js的引入方式（重點）

• 行內腳本:
  在html標簽中寫類似onclick點擊事件，然后再在后方的引號中引入函數，也就是寫入了js代碼；

<div><input type="button" name="name" value="點我" onclick="alert('成功輸出了')"</div>

• 內部腳本，也叫內嵌腳本；
  語法：寫一個script標簽，然后在其中寫js代碼

<script></script>

• 外部腳本
  在html文件之外，創建一個 .js結尾的文件，在該文件中js代碼，然后通過<script>標簽的src屬性引入到了html文件中。（和css不同，css的外部引入方式是通過<link>標簽（的href屬性）引入到html中的，而js是通過<script>標簽引入到html中的。）

<script src="../img/js/test.js" type="text/javascript" >//這里面不能夠有js代碼</script>

注意：負責引用外部腳本的script標簽中不能夠寫js代碼。如果要寫js代碼，應該另外單獨寫一個<script>標簽

---

js的數據類型

---

js中的注釋

<script>標簽中的注釋和java類似，// 或/* */

基本數據類型 （五種）

• 數字類型：number
• 布爾類型：boolean
• 字符串類型：string
• 未定義：undefined ，就是沒有聲明的變量
• 空類型：null （object） ，就是根本不存在的變量

查看類型的方式：typeof

alert（ typeof i ）；

變量的聲明：
使用關鍵字var進行聲明：

var 變量名 = 變量值；

實際上，有些情況中不使用var進行變量聲明也是可以的，因為js中會默認把這個變量進行聲明；
沒有用var聲明的，而直接使用的變量是全局變量；
用var聲明的，在局部代碼塊中的，就是局部變量。如果用var聲明的變量，但是不在任何一個函數中，那么這個變量也是全局變量

---

引用數據類型

跟Java中一樣，js中的對象類型都是引用數據類型

• var obj = new Object();
• var str = new String();
• var date = new Date();

引用數據類型全為object類型

---

類型之間的轉換

• number和boolean轉換成string，用的是toString（）方法

var i = 3.14; var str = i.toString();

• string轉number（重要）: parseInt()方法和parseFloat() 方法，其實這兩種方法在調用前省略的是window對象

parseInt（str）var str = "3.14";var num = parseInt(str);var num = window.parseInt(str);

• number、string轉boolean。（重要）new Boolean()方法
  number轉化為boolean：0為false，非0為true；

var num = 3.14;var res = new Boolean(num);

string 轉化為boolean: 空串為false ，非空為true；

var str = "false"var res = new Boolean(str);

js中的對象數據object類型：
js中只要是用new創建的，都是object類型
var date = new Date();
alert( typeof date);

---

js中的運算符

• 賦值運算符 var num = 5;
• 比較運算符

>? 大于< 小于

• == 比較數據大小

• = 賦值

• !=

• === 比較數據大小和內容

邏輯運算符，在js中沒有單與和單或
* &&
* ||
* !
* 算數運算符
* +
* -
* *
* /
* %
* 三元運算符
* 條件?a:b

---

js中比較特殊的運算符

1）運算符 == 和運算符 ===
==比較的數據的大小，默認情況下，==運算符會將左右兩端的變量嘗試著進行轉型，看是否能夠相等。

===比較的數據的大小和類型。必須要值和類型都相同的時候才能夠相等。

2）js中只有&& 和| | 運算符，沒有單與和單或運算符；

3）三元運算符：
java中的三元運算符只能夠進行賦值操作，但是js中可以用語句,可以將語句體寫在三元運算符中。
例：

（3>5）? alert("正確") : alert("錯誤") ;

---

js中比較特殊的語句

1）js定義的數組
在數組中可以寫上任何數據類型的變量；
注意，**與java中不同的是，js中定義數組用的是方 var arr = [ 1, 2, “哈哈哈” ， true]；定義數組和java中用的符號不一樣
java中：

int[ ] a = { 1, 2, 3, 4};

而js中用的是方括號：

var a = [ test, 1, 2, 3];

2）for in循環
其實本質上就是java中的增強for循環，區別是for in循環遍歷出來的是所有的下標。

for （index in arr）{alert（ arr[ index]）；}

---

js中的函數

---

作用：封裝一些功能實現

js中定義函數的三種方式（前兩種是重點）

• 一般方式:參數不能夠寫var,否則會報錯

function fn(a,b){alert（a+b）;} //調用函數onclick="fn(4,6)";

• 匿名函數
  （匿名函數的創建是不用new的，只有對象方式創建函數的時候才new）

function(a,b){alert(a-b);}var fn1 = function(a,b){alert(a-b);}fn1(8,3);

綁定事件的第二種方式的時候使用到。匿名函數只能夠寫在<script>中，不能夠寫在行嵌套的script中。

* 對象方式
對象方式，用的時候很少

var fn = new function( 'a', 'b', 'alert(a+b)' ) 可以有多個參數，最后一個參數是函數體；

js中的函數還是會有局部函數和全局函數的區別的，如下例：
下面這個例子中也有匿名函數

<script>window.onload = function(){function changePic(){}} </script>

如上述所示，函數changePic（）就會被認為是一個局部函數，只能夠被它的上層函數訪問到。
寫函數的時候最好不要函數嵌套函數。

---

js中的常用事件（重點）

---

事件概述

js的事件是js不可或缺的組成部分，要學習js的事件，必須要理解如下幾個概念：

• 1）事件源：被監聽的html元素
• 2）事件：某類動作，例如點擊事件，移入移除事件，敲擊鍵盤事件等
• 3）事件與事件源的綁定：在事件源上注冊上某事件
• 4）事件觸發后的響應行為：事件觸發后需要執行的代碼，一般使用函數進行封裝

常用事件

• onload 當加載完成時觸發（重要）
• onsubmit 當表單提交的時候觸發，這個事件有返回值。
• onclick 當鼠標點擊某個對象的時候觸發
• ondbclick 當鼠標雙擊某個對象的時候觸發
• onfocus 當獲取焦點的時候觸發
• onblur 當失去焦點的時候觸發
• onchange 當用戶改變域的內容時觸發（獲取焦點，改變內容，然后再失去焦點 ）
• onkeydown 當鍵盤按鍵被按下時觸發
• onkeypress 當鍵盤按鍵被按住時觸發
• onkeyup 鍵盤按鍵松開時觸發
• onmousedown 當鼠標左鍵按下時觸發
• onmouseup 當鼠標左鍵松開時觸發
• onmouseover 當鼠標移到某個元素之上時觸發
• onmouseout 當鼠標移開某個元素時觸發
• onmousemove 當鼠標移動時觸發

---

事件的兩種綁定方式：
第一種：使用類似onclick這樣的屬性進行綁定。

<input type="button" onclick="test()" />

第二種：
1先找到按鈕2；
2給其綁定點擊事件

給bt2的onclick中賦值的時候，只能夠賦值為匿名函數，不然會認為是調用fn函數；

<input type="button" id="test" /><script>var dest = document.getElementById("test");dest.onclick = function(){//函數體}

---

BOM（對象集合）

---

BOM的概述（了解）

BOM（Browser Object Mode），瀏覽器對象模型，是將我們使用的瀏覽器抽象成對象模型，例如我們打開一個瀏覽器，會呈現出以下頁面，通過js提供瀏覽器對象模型對象我們可以模擬瀏覽器功能。

BOM的對象

• 1.Screen對象，Screen 對象中存放著有關顯示瀏覽器屏幕的信息。
• 2.Window對象（BOM里面最頂級的對象），Window 對象表示一個瀏覽器窗口或一個框架。（重點）
• 3.Navigator對象，包含的屬性描述了正在使用的瀏覽器
• 4.History對象，其實就是來保存瀏覽器歷史記錄信息。
• 5.Location對象，Location 對象是 Window 對象的一個部分，可通過window.location 屬性來訪問。（重點）用來跳轉頁面使用
  定時跳轉到廣告網頁的案例，要用到location的href屬性。
  
  為了在頁面加載完成之后執行，防止出現未加載時候的null
  （下例就是一個匿名函數例子）

window.onload = function(){ }

匿名函數只能夠寫在<script>中，不能夠寫在行嵌套的script中。

---

Window對象

---

一、彈框（重點）

• 提示框 alert(提示信息) 只有一個確定按鈕
  alert(“haha”);

• 確認框 confirm(提示信息)，有確認和取消按鈕，其中有一個boolean類型的返回值，記錄用戶點擊的是確認還是取消；有一個返回值類型。
  可以按照以下方式執行不同的確認和取消操作
  

• 輸入框 prompt(提示信息)也有一個返回值，返回值就是我們輸入的內容，如果點擊取消，返回的就是null，不輸入的話返回的是空字符串“”；

prompt（“請輸入查詢密碼”）;

---

定時器（重點）

---

• 執行一次的定時器：setTimeout（“函數”，毫秒值）
  就相當于一個延時器，這種的應用場景一般是做延時操作，過多久后執行某個函數；
  其實前面就是省略的window.，對象window.是可以省略的

  • 第一個參數：函數對象，用引號括起來表示
  • 第二個參數：毫秒值

• 執行循環的定時器：setInterval

• 清除定時器clearInterval(定時器對象)

---

輪播圖的案例

多張圖可以通過命名方式進行控制。使得命名方式具有一定的規律性，方便循環多張圖片也可以放在一個數組里面中。 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>0605輪播圖案例 自動切換</title><script>window.onload = function(){arr = ["../img/js/1.jpg", "../img/js/2.jpg", "../img/js/3.jpg"];index = 1;window.setInterval(function(){if( index >= arr.length){index=0;}var image = document.getElementById("test");image.src = arr[index];index++;},2000);}</script></head><body><div align="center"><img src="../img/js/1.jpg" id="test" width="600px" height="400px" /></div></body> </html>

---

定時彈廣告的案例

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>定時彈出廣告</title><script>window.onload = function(){setTimeout(function(){var ad = document.getElementById("topAd");ad.style.display = "block";},3000);}</script></head><body><div align="center"><img src="../img/js/ad2.jpg" name="topAd" id="topAd" width="90%" style="display: none;" /></div><div align="center"><img src="../img/js/3.jpg" width="600px" height="400px"/></div></body> </html>

---

跳轉到廣告頁面

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>定時跳轉頁面</title><script>window.onload = function(){setTimeout(function(){window.location.href = "Day0605_03定時彈廣告案例.html";}, 3000);}</script></head><body><div align="center"><img src="../img/js/1.jpg" width="90%" /></div></body> </html>

---

表單校驗的案例

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>表單校驗</title><script>function checkInfo(){ // var uName = document.getElementById("userName").value; // if(uName == ""){ // alert("請輸入用戶名"); // return false; // }var inputInfo = document.getElementsByTagName("input");for( var i = 0; i < inputInfo.length; i++){if(inputInfo[i].value == ""){alert("請檢查是否輸入完了所有信息");break;}}var pass1 = document.getElementById("password1").value;var pass2 = document.getElementById("password2").value;if( pass1 != pass2 ){alert("你是傻逼嗎？");}}</script></head><body><div><form name="userInfo" action="#" method="get" onsubmit="return checkInfo()" >用戶名 <input type="text" name="userName" id="userName" placeholder="請輸入用戶名" /><br />密 &nbsp;&nbsp;碼 <input type="password" name="password1" id="password1" placeholder="請輸入密碼" /><br />確 &nbsp;&nbsp;認 <input type="password" name="password2" id="password2" placeholder="請再次輸入密碼" /><br /><input type="submit" name="submit" id="submit" value="點擊提交" /></form></div></body> </html>

總結

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

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