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