day15--JavaScript語言，
JavaScript
JavaScript是一門單獨的程式設計語言。瀏覽器內建JavaScript的解譯器。
獨立的語言，瀏覽器具有js解譯器。
存在與HTML中，在HTML中寫JavaScript，存在形式是<script></script>
JavaScript的存在形式
<script type="text/javascript></script>表示JS代碼，或者不寫直接<script></script>，不能寫錯
- Head中(第一種存在形式，HTML代碼的head中）
<script> (1)種表示方式
//javascript代碼
alert(123);
</script>
<script type="text/javascript> (2)種表示方式
//javascript代碼
alert(123);
</script>
- 儲存在檔案中，<script src="js檔案路徑"></script> （第二種存在形式，js檔案裡面，使用src引用到HTML中)
<script>中屬性scr的地址可以是網路路徑，JS是讓網頁動起來的。
由於我們總是先讓使用者看到內容，才讓網頁動起來，所以JavaScript的代碼，放在</body>標籤最後面
下面來看兩段HTML代碼，如下：
（1）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js.js"></script></head><body> <h1>限制性JavaScript的檔案，然後才會執行HTML代碼JS是讓頁面動起來</h1></body></html>
此段代碼，開啟之後，先載入的是<script>中的代碼，載入完畢之後，才會載入<HTML>代碼，這樣肯定是不好的，因為使用者經常是先看到內容，然後網頁自動載入，這樣才有更好的體驗，因此<script>的代碼要放在<body>標籤的後面，如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <h3>限制性JavaScript的檔案，然後才會執行HTML代碼JS是讓頁面動起來</h3> <h3>先載入HTML內容</h3> <h3>JS代碼寫在<body>內部的最下面</h3> <script src="http://wwww"></script></body></html>
PS：JavaScript檔案防止在<body>標籤內部的最下方。
注釋：單行注釋 // 多行注釋：/* */
變數：
python:
name="alex"
JavaScript
name = "alex" #聲明全域變數
var name = "eric" #局部變數，寫JavaScript盡量都先聲明局部變數
基礎資料型別 (Elementary Data Type)：(https://www.cnblogs.com/wupeiqi/articles/5602773.html)
數字
1、數字（Number）
JavaScript中不區分整數值和浮點數值，JavaScript中所有數字均用浮點數值表示。
轉換：
parseint() 將某值轉換為Int，數字，不成功則NaN
parseFloat() 將某值轉換為float類型，不成功則NaN
特殊值：
NaN：非數字。可使用 isNaN(num) 來判斷。
Infinity：無窮大。可使用 isFinite(num) 來判斷。
寫JS代碼：
- HTML檔案中編寫
- 臨時，瀏覽器的終端，console
字串
a = "alex"
a.charAt(索引位置)
a.substring(起始位置,結束位置)
a.length 擷取當前字串的長度
a.concat() 字串拼接 >:a = "alex"; >:a.concat("sb") >:"alexsb"
obj.indexof(substring,start) 擷取自序列的位置索引
obj.lastIndexof(substring,start) 從後面擷取子序列位置
obj.slice(start,end) 切片
列表（數組）
obj = [11,22,33,44]
obj.length
obl.push() 尾部追加元素
obj.pop() 尾部擷取一個元素
obj.unshift(ele) 頭部插入元素
obj.shift() 頭部移除元素
obj.splice(start,deleteCount,value)插入，刪除或替換數組的元素
obj.splice(n,0,val) 指定位置插入元素
obj.splice(n,1,val) 指定位置替換元素
obj.splice(n,1) 指定位置刪除元素
obj.join(sep) 將數組元素連結起來構建一個字串 >:obj=[11, 666, 999, 44], >:obj.join("-") >:"11-666-999-44"
obj.concat(va1,va2....) 串連數組
obj.sort() 排序
字典
obj = {"k1":"v1","k2":"v2"}
obj["k1"] 擷取字典裡面元素的值
dic = {"k1":"v1","k2":"v2"}{k1: "v1", k2: "v2"}dic{k1: "v1", k2: "v2"}typeof(dic)"object"for(var item in dic){console.log(item);} #迴圈的只是鍵（即索引）VM4738:1 k1VM4738:1 k2
布爾類型
true
false
條件陳述式
if(條件) {
}else if(條件) else {}
| 比較符號 | 含義 |
| == | 比較值相等 |
| ！= | 不想等（值不想等） |
| === | 比較值和類型都相等 |
| ！=== | 不等於 |
| || | 或 |
| && | 且 |
for迴圈
1、迴圈時，迴圈的元素是索引
a = [11,22,33,44]
for(var item in a){
console.log(item);
}
a = [11,22,33,44]
for(var item in a){
console.log(a[item]);
}
for(var i=0;i<10;i++){}
迴圈列表
for(var i=0;i<a.length;i=i+1){} 迴圈列表的方法
定時器：
setInterval("要執行的代碼",時間間隔) -- 一直間隔執行
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script> //建立一個定時器 //setInterval("alert(123);",5000); //上面setInterval是設定一個定時器，沒5秒出現一個彈框 function f1(){ console.log("百度招人好牛逼，都把廣告弄到瀏覽器上面了，只有程式員才會開啟console這個瀏覽器的地方") } setInterval("f1();",2000) </script></body></html>
setInterval("string/function",時間),setInterval是設定間隔時間，執行前面的程式，string/函數,Interval是間隔
alert() 在瀏覽器列印訊息
console.log()：在console處列印。
>:tag = document.getElementById("i1"); #從網頁中所有HTML中尋找Id等於("i1")的標籤
>:content = tag.innerText #擷取標籤內部的內容
函數
function 函數名(參數1,參數2) {
}
Dom操作 （https://www.cnblogs.com/wupeiqi/articles/5643298.html）
1、找到標籤
document.getElementById("id值") id是唯一的，在HTML中
document.getElementsByTagName("div") 擷取多個元素，數組形式（列表）
document.getElementsByClassName("c1") 擷取多個元素，通過class屬性的值（列表）
a、直接尋找
| 方法 | 作用 |
| document.getElementById | 根據ID擷取一個標籤 |
| document.getElementsByName | 根據name屬性擷取標籤集合 |
| document.getElementsByClassName | 根據class屬性擷取標籤集合 |
| document.getElementsByTagName | 根據標籤名擷取標籤集合 |
b、間接尋找
| 擷取標籤 | 作用 |
| parentElement | //父親點標籤元素 |
| children | //所有子標籤 |
| firstElementChild | //第一個子標籤元素 |
| lastElementChild | //最後一個子標籤元素 |
| nextElementSibling | //下一個兄弟標籤元素 |
| previousElementSibling | //上一個兄弟標籤元素 |
| 擷取節點 | 作用 |
| parentNode | //父節點 |
| childNodes | //所有子節點 |
| firstNode | //第一個子節點 |
| lastChild | //最後一個子節點 |
| nextSibling | // 下一個兄弟節點 |
| previousSibling | //上一個兄弟節點 |
2、操作標籤
a.InnerText
擷取標籤中的常值內容
標籤.innerText
對標籤內部的文本進行重新賦值
標籤.innerText = ""
b.className
tag.className=》 直接整體做操作
tag.classList 擷取class標籤集合
tag.classList.add("樣式名") 添加指定樣式
tag.classList.remove("樣式名") 刪除指定樣式
ps:
<div onclick="func();">點我</div>
<script>
function func(){
}
</script>
下面HTML代碼是一個彈框點擊出現和消失的實現，如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display:none; } .c1{ position:fixed; left:0; top:0; right:0; bottom:0; background-color:black; opacity:0.6; z-index:9; } .c2{ width:500px; height:400px; background-color:white; position:fixed; left:50%; top:50%; margin-left:-250px; margin-top:-200px; z-index:10; } </style></head><body style="margin:0;"> <div> <input type="button" value="添加" onclick="showModel();"/> <table> <thead> <tr> <th> 主機名稱 </th> <th> 連接埠 </th> </tr> </thead> <tbody> <tr> <td>1.1.1.1</td> <td>190</td> </tr> <tr> <td>1.1.1.2</td> <td>192</td> </tr> <tr> <td>1.1.1.3</td> <td>194</td> </tr> </tbody> </table> </div> <!--遮罩曾開始--> <div id="i1" class="c1 hide"></div> <!-- 遮罩層結束 --> <!-- 彈出框開始 --> <div id="i2" class="c2 hide"> <p><input type="text" /></p> <p><input type="text"/></p> <p> <input type="button" value="取消" onclick="hideModel();"/> <input type="button" value="確定" /> </p> </div> <!-- 彈出框結束 --> <script> function showModel(){ document.getElementById("i1").classList.remove("hide") document.getElementById("i2").classList.remove("hide") } function hideModel(){ document.getElementById("i1").classList.add('hide') document.getElementById("i2").classList.add('hide') } </script></body></html>
checkbox多選框裡面，checked選擇是true,未選擇是false，可以進行賦值，checked=true或者checked=false
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
