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