javascript
Day03-JavaScript01
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代碼；
- 內部腳本，也叫內嵌腳本；
語法：寫一個script標簽，然后在其中寫js代碼
- 外部腳本
在html文件之外，創建一個 .js結尾的文件，在該文件中js代碼，然后通過<script>標簽的src屬性引入到了html文件中。（和css不同，css的外部引入方式是通過<link>標簽（的href屬性）引入到html中的，而js是通過<script>標簽引入到html中的。）
注意：負責引用外部腳本的script標簽中不能夠寫js代碼。如果要寫js代碼，應該另外單獨寫一個<script>標簽
js的數據類型
js中的注釋
<script>標簽中的注釋和java類似，// 或/* */基本數據類型 （五種）
- 數字類型：number
- 布爾類型：boolean
- 字符串類型：string
- 未定義：undefined ，就是沒有聲明的變量
- 空類型：null （object） ，就是根本不存在的變量
查看類型的方式：typeof
alert（ typeof i ）；變量的聲明：
使用關鍵字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（）方法
- string轉number（重要）: parseInt()方法和parseFloat() 方法，其實這兩種方法在調用前省略的是window對象
- number、string轉boolean。（重要）new Boolean()方法
number轉化為boolean：0為false，非0為true；
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中可以用語句,可以將語句體寫在三元運算符中。
例：
js中比較特殊的語句
1）js定義的數組
在數組中可以寫上任何數據類型的變量；
注意，**與java中不同的是，js中定義數組用的是方 var arr = [ 1, 2, “哈哈哈” ， true]；定義數組和java中用的符號不一樣
java中：
而js中用的是方括號：
var a = [ test, 1, 2, 3];2）for in循環
其實本質上就是java中的增強for循環，區別是for in循環遍歷出來的是所有的下標。
js中的函數
作用：封裝一些功能實現
js中定義函數的三種方式（前兩種是重點）
- 一般方式:參數不能夠寫var,否則會報錯
- 匿名函數
（匿名函數的創建是不用new的，只有對象方式創建函數的時候才new）
綁定事件的第二種方式的時候使用到。匿名函數只能夠寫在<script>中，不能夠寫在行嵌套的script中。
* 對象方式
對象方式，用的時候很少
js中的函數還是會有局部函數和全局函數的區別的，如下例：
下面這個例子中也有匿名函數
如上述所示，函數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這樣的屬性進行綁定。
第二種：
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
（下例就是一個匿名函數例子）
匿名函數只能夠寫在<script>中，不能夠寫在行嵌套的script中。
Window對象
一、彈框（重點）
提示框 alert(提示信息) 只有一個確定按鈕
alert(“haha”);確認框 confirm(提示信息)，有確認和取消按鈕，其中有一個boolean類型的返回值，記錄用戶點擊的是確認還是取消；有一個返回值類型。
可以按照以下方式執行不同的確認和取消操作
- 輸入框 prompt(提示信息)也有一個返回值，返回值就是我們輸入的內容，如果點擊取消，返回的就是null，不輸入的話返回的是空字符串“”；
定時器（重點）
執行一次的定時器：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 />密 碼 <input type="password" name="password1" id="password1" placeholder="請輸入密碼" /><br />確 認 <input type="password" name="password2" id="password2" placeholder="請再次輸入密碼" /><br /><input type="submit" name="submit" id="submit" value="點擊提交" /></form></div></body> </html>總結
以上是生活随笔為你收集整理的Day03-JavaScript01的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： UE4.26源码版学习广域网独立服务器时
- 下一篇： SpringBoot SSO整合