javascript
【CyberSecurityLearning 50】JS 基础+函数+对象+事件
目錄
JavaScript簡介：
JS
簡單的語句
如何在HTML中引入JS代碼
變量
聲明變量
變量類型
null和undefined
數組
對象
流程控制
if語句判斷
for循環
for ... in
while循環
do while
函數
對象
瀏覽器內置對象：
window 全局 代表瀏覽器
screen
location
document? ?非常重要
操縱DOM
DOM 節點
拿到DOM節點最常用的方法
事件
1、判斷兩次輸入的密碼是否一致JS實現
實現：
測試：
2、拓展：注冊的時候利用JS AJAX技術判斷用戶名是否唯一
AJAX
實現：
測試
?
JavaScript簡介：
JavaScript（簡稱“JS”） 是一種具有函數優先的輕量級，解釋型或即時編譯型的編程語言。雖然它是作為開發Web頁面的腳本語言而出名的，但是它也被用到了很多非瀏覽器環境中，JavaScript 基于原型編程、多范式的動態腳本語言，并且支持面向對象、命令式和聲明式（如函數式編程）風格。
JavaScript在1995年由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實現而成。因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript。但實際上它的語法風格與Self及Scheme較為接近。
JavaScript的標準是ECMAScript 。截至 2012 年，所有瀏覽器都完整的支持ECMAScript 5.1，舊版本的瀏覽器至少支持ECMAScript 3 標準。2015年6月17日，ECMA國際組織發布了ECMAScript 的第六版，該版本正式名稱為 ECMAScript 2015，但通常被稱為ECMAScript 6 或者ES6。
JS
JS的運行環境是瀏覽器
JS能做的事情，只有你想不到，沒有它做不到的
（chrome瀏覽器 行業標準）
前端安全
解釋型的語言
每次刷新頁面，JS代碼都會執行
從上到下依次執行
當我們直接訪問JS腳本的時候，返回純文本內容
JS 對大小寫敏感
快速入門
JS可以與HTML混編
可以出現在HTML的任何位置
簡單的語句
輸出語句
alert();? //彈窗
console.log();? ?//在控制臺輸出
如何在HTML中引入JS代碼
內部JS：<script></script>
<script src=“./js/test1.js”></script>
<script src=“http://localhost/JS/js/test1.js”></script>
<script src=“http://172.168.23.63/JS/js/test1.js”></script>?
外部JS：type="text/javascript"
變量
聲明變量
var? ? ?強烈建議聲明
注意 只能用var聲明一次（同一個變量可以反復賦值）
var name = "Waffle";
var a = 1;
變量類型
Number
可以做四則運算
字符串和布爾值
null和undefined
null表示一個“空”的值，它和0以及空字符串‘’不同，0是一個數值，‘’表示 長度為0的字符串，而null表示“空”
在其他語言中，也有類似Javascript的null的表示，例如Java也用null，Swift用nil，Python用None表示。
但是，在Javascript中，還有一個和null類似的undefined，他表示“未定義”
Javascript的設計者希望用null表示一個空的值，而underfined表示值未定義。事實證明，這樣并沒有什么用，區分兩者意義不大。大多數情況下，我們都應該用null。undefined僅僅在判斷函數參數是否有傳遞情況下有用。
數組
數組可以包含任意數據類型
var arr = [1,2,3.14,"GGG"]
調用數組
arr[0]
對象
JavaScript的對象是一組由鍵-值組成的無序的集合
定義數組的時候用中括號，定義對象的時候要用大括號
var person = {
??? name : 'Bob',
??? age: 20,
??? tags:['js','web'],
??? city:'beijing',
??? hasCar:true
}
調用對象
person.name
流程控制
if語句判斷
var age = 15; if (age >= 18){alert('adult'); }else{alert('teenager'); }for循環
var x = 0; var i; for(i=1; i<=10000; i++){x = x + i; } x;//50005000for ... in
var o = {name: 'Jack',age: 20,city: 'Beijing' }; for (var key in o) {console.log(key); } //'name', 'age', 'city'?
while循環
var x = 0; var n = 99; while (n > 0) {x = x + n;n = n - 2; } x;//2500do while
var n = 0; do {n = n + 1; }while (n < 100); n;//100函數
定義函數的好處? ?方便調用
定義函數? ? function abs(){ }????????? abs是計算一個數的絕對值
調用函數? ? abs(-1);
?
對象
通過對象來操縱瀏覽器
瀏覽器內置對象
瀏覽器內置對象：
window 全局 代表瀏覽器
一般會省略window直接寫，window相當于域名下的根，默認情況下可以省略
訪問對象中的屬性要用點.
navigator
瀏覽器的相關信息
火狐是網警公司的（Netscape）
screen
屏幕的信息
location
獲取當前頁面的url信息
document? ?非常重要
代表當前界面
document.cookie（重要）
可以完成對cookie信息的讀寫
alert(document.cookie);
document.cookie="name=hello";
測試：
刷新之后
用戶名直接被修改
文檔對象模型（DOM）
操縱DOM
DOM 節點
由于HTML文檔被瀏覽器解析后就是一顆DOM樹，要改變HTML的結構，就需要通過Javascript來操縱DOM
操作：
??? 更新：更新DOM節點的內容，相當于更新了該DOM節點表示的HTML內容
??? 遍歷：遍歷DOM節點下新增的子節點，以便進行進一步操作
??? 添加：在該DOM節點下新增一個子節點，相當于動態增加一個HTML節點
??? 刪除：將該節點從HTML中刪除，相當于刪除了該DOM節點的內容以及它包含的所有子節
?在操作一個DOM節點前，我們需要通過各種方式先拿到這個DOM節點
?
拿到DOM節點最常用的方法
document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName() //CSS選擇器
由于ID在HTML文檔中是唯一的，所以document.getElementById()可以直接定位唯一一個DOM節點document.getElementsByTagName()和document.getElementsByClassName()返回一組的DOM節點，要精確的選擇DOM，可以先定位父節點，再從父節點開始選擇，以縮小范圍。
//返回ID為‘test’的節點：
var teest = document.getElementById(‘test’)；
//先定位ID為'test-table'的節點，再返回其內部所有tr節點：
var trs = document.getElementById('test-table').document.getElementsByTagName('tr');
//先定位ID為‘test-div’的節點，再返回其內部所有class包含的red的節點：
var reds = document.getElementById('test-div').document.getElementsByClassName('red');
//獲取節點'test'下的所有直屬子節點：
var cs = test.children;
//獲取節點test下第一個、第二個子節點：
var first = test.firstElementChild;
var last = test.lastElementChile;
第二種方法
使用querySelector()和querySelectAll()，需要了解select語法，然后使用條件來獲取節點，更加方便
??? //通過querySelector獲取ID為q1的節點：
??? var q1 = document.querySelector('#q1');
??? //通過querySelectorAll獲取q1節點內的符合條件的所有節點：
??? var ps = q1.querySelectorAll('div.highlighted > p');
??? 注：低版本IE<8不支持querySelector和querySelectorAll.IE8僅有限支持
嚴格的來講，我們這里的DOM節點是指Element，但是DOM節點實際上是Node，在HTML中，Node包括Element、Comment、CDATA_SECTION等多種，以及根節點Document類型，但是絕大多數時候我們只關心Element，也就是實際控制頁面結構的Node，其他類型的Node忽略即可。根節點Document已經自動綁定為全局變量document。
?
事件
用戶觸發事件
鼠標事件
? ?? 比如 onclick（鼠標單擊），dbclick（鼠標雙擊double）等
鍵盤事件
form事件
事件響應
1、判斷兩次輸入的密碼是否一致JS實現
實現：
<script>
function fm(){
??? var ps1=document.getElementById('pas1');
??? var ps2=document.getElementById('pas2');
??? if(ps1.value != ps2.value){
??????? alert("兩次密碼輸入不一致，請重新輸入");
??????? ps1.value="";
??????? ps2.value="";
??? }
}
</script>
?
再創建一個響應事件
<input type="submit" οnmοuseοver="fm()" name="userSubmit" value="注冊">
<html> <head><meta charset="utf-8"><title>注冊--剎那芳華</title> </head> <body><h1>剎那芳華BBS 論壇</h1> <formaction="./addUser.php"method="POST" > 用戶名：<input id="user" type="text" name="userName"><br /> 密碼：<input id="pas1" type="password" name="userPass1"><br /> 確認密碼：<input id="pas2" type="password" name="userPass2"><br /> <script> function fm(){var ps1=document.getElementById('pas1');var ps2=document.getElementById('pas2');if(ps1.value != ps2.value){alert("兩次密碼輸入不一致，請重新輸入");ps1.value="";ps2.value="";} } </script> <input type="submit" onmouseover="fm()" name="userSubmit" value="注冊"></form><hr /> </body> </html>輸入密碼之后，當我們的鼠標光標移動至注冊按鈕的時候，
就會發生鼠標響應事件，JS就會執行，來判斷兩次輸入的密碼是否一致
若不一致，彈出框，提醒用戶兩次密碼輸入不正確，并清空
測試：
2、拓展：注冊的時候利用JS AJAX技術判斷用戶名是否唯一
AJAX
xmlhttp=new XMLHttpRequest();? ? 創建 XMLHttpRequest 對象?
向服務器發送請求：
xmlhttp.open("GET","./getUserName.php?q="+str,true);?
xmlhttp.send();
responseText? 獲得字符串形式的響應數據
實現：
服務器端響應文件：
getUserName.php
<?php include "../inc/dblink.inc.php"; ?> <?php $sql = "SELECT * FROM `users`"; if($results = mysqli_query($link,$sql)){while($result=mysqli_fetch_assoc($results)){$a[]=$result['name'];} }else{mysqli_error($link); }$q=$_GET["q"]; if (strlen($q) > 0) {$hint="";for($i=0; $i<count($a); $i++){if($q === $a[$i]){$hint=$a[$i];break;}} }echo $hint; ?> <?php mysqli_close($link); ?>創建響應事件onmouseout,當用戶的鼠標離開輸入框時，觸發響應事件，調用下面的JS,向服務器的./getUserName.php發送get請求并傳入用戶輸入的字符串
服務器（getUserName.php）從數據庫中提取所有用戶名，與傳入的字符串比較，返回一個比較結果，下面的JS對服務器返回的信息進行處理，再用戶的界面上得到響應。
?
<script>
function showHint(str)
{
? var xmlhttp;
? if (str.length==0)
? {
??? document.getElementById("user").innerHTML="";
??? return;
? }
??? xmlhttp=new XMLHttpRequest();
? xmlhttp.onreadystatechange=function()
? {
??? if (xmlhttp.readyState==4 && xmlhttp.status==200)
??? {
???????? if(xmlhttp.responseText){
??????????? alert("用戶名已存在，請重新輸入！");
?????????? ?
??????? }
????? //document.getElementById("user").innerHTML=xmlhttp.responseText;
??? }
? }
? xmlhttp.open("GET","./getUserName.php?q="+str,true);
? xmlhttp.send();
}
</script>
?
register.php
<html> <head><meta charset="utf-8"><title>注冊--剎那芳華</title> </head> <body><h1>剎那芳華BBS 論壇</h1> <formaction="./addUser.php"method="POST" > <script> function showHint(str) {var xmlhttp;if (str.length==0){ document.getElementById("user").innerHTML="";return;}xmlhttp=new XMLHttpRequest();xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){if(xmlhttp.responseText){alert("用戶名已存在，請重新輸入！");}//document.getElementById("user").innerHTML=xmlhttp.responseText;}}xmlhttp.open("GET","./getUserName.php?q="+str,true);xmlhttp.send(); } </script> 用戶名：<input id="user" type="text" name="userName" onkeyup="showHint(this.value)"><br /> 密碼：<input id="pas1" type="password" name="userPass1"><br /> 確認密碼：<input id="pas2" type="password" name="userPass2"><br /> <script> function fm(){ps1=document.getElementById('pas1');ps2=document.getElementById('pas2');if(ps1.value != ps2.value){alert("兩次密碼輸入不一致，請重新輸入");ps1.value="";ps2.value="";} } </script> <input type="submit" onmouseover="fm()" name="userSubmit" value="注冊"></form><hr /> </body> </html>測試
首先，我們進入數據庫查看users表，可以看到有兩個用戶存在【GGG，test】
?
輸入GGG數據庫中已存在的用戶名，會報錯
?
輸入數據庫不存在的用戶名，正常
兩次響應事件都能正常工作
注冊成功
測試成功
具體請看：https://blog.csdn.net/weixin_43252204/article/details/105717411
總結
以上是生活随笔為你收集整理的【CyberSecurityLearning 50】JS 基础+函数+对象+事件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【2017年第3期】专题：面向社会治理和
- 下一篇： 作者：刘峰（1974-），男，中国科学院