2021-7-1 前端達(dá)人
1.隨著互聯(lián)網(wǎng)的發(fā)展，頁(yè)面?zhèn)鬟f給后臺(tái)有太多需要驗(yàn)證的東西，盡管后端的代碼是能夠?qū)崿F(xiàn)對(duì)傳遞過(guò)來(lái)的數(shù)據(jù)進(jìn)行校驗(yàn)和判斷的，但是這樣的話(huà)無(wú)疑是加重了后臺(tái)程序的工作任務(wù)量，于是廣大互聯(lián)網(wǎng)工作人員迫切需要有一種新的辦法/語(yǔ)言能夠?qū)崿F(xiàn)這樣的效果，于是js也就是在這樣的一個(gè)大的時(shí)代背景下誕生的
2.js最開(kāi)始的時(shí)候是不叫js而是叫scrpit語(yǔ)言，他們也想將這個(gè)前景光明的明日之星賣(mài)給微軟，但是微軟沒(méi)有買(mǎi)下，在種種機(jī)緣巧合之后被Sun公司收購(gòu)了，為了讓其與java語(yǔ)言走的近點(diǎn) ，更是改名為JavaScript簡(jiǎn)稱(chēng)為js
在1995年時(shí)，由Netscape公司的Brendan Eich，在網(wǎng)景導(dǎo)航者瀏覽器上首次設(shè)計(jì)實(shí)現(xiàn)而成
1997年，在ECMA（歐洲計(jì)算機(jī)制造商協(xié)會(huì)）的協(xié)調(diào)下，由Netscape、Sun、微軟、Borland組成的工作組確定統(tǒng)一標(biāo)準(zhǔn)：ECMA-262。
1.弱類(lèi)型語(yǔ)言：在書(shū)寫(xiě)的時(shí)候不去做明確的數(shù)據(jù)類(lèi)型的限定 例如 var a=3.14 var b=“998”
2.運(yùn)行在瀏覽器端的解釋執(zhí)行性語(yǔ)言(js—>node.js可以運(yùn)行在服務(wù)器上)
3.基于對(duì)象的編程語(yǔ)言
4.跨平臺(tái)性：JavaScript是依賴(lài)于瀏覽器本身，與操作環(huán)境無(wú)關(guān)，只要能運(yùn)行瀏覽器的計(jì)算機(jī)，并支持JavaScript的瀏覽器就可正確執(zhí)行。從而實(shí)現(xiàn)了“編寫(xiě)一次,走遍天下”的夢(mèng)想。
5.動(dòng)態(tài)性：JavaScript是動(dòng)態(tài)的，它可以直接對(duì)用戶(hù)或客戶(hù)輸入做出響應(yīng)，無(wú)須經(jīng)過(guò)Web服務(wù)程序。它對(duì)用戶(hù)的反映響應(yīng)，是采用以事件驅(qū)動(dòng)的方式進(jìn)行的。所謂事件驅(qū)動(dòng)，就是指在主頁(yè)（Home Page）中執(zhí)行了某種操作所產(chǎn)生的動(dòng)作，就稱(chēng)為“事件”（Event）。比如按下鼠標(biāo)、移動(dòng)窗口、選擇菜單等都可以視為事件。當(dāng)事件發(fā)生后，可能會(huì)引起相應(yīng)的事件響應(yīng)。
可以簡(jiǎn)單的理解為：只要用戶(hù)發(fā)出動(dòng)作，js就會(huì)產(chǎn)生響應(yīng)
6.安全性：JavaScript是一種安全性語(yǔ)言，它不直接允許訪(fǎng)問(wèn)本地的硬盤(pán)，并不能直接將數(shù)據(jù)存入到服務(wù)器上，不允許對(duì)網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，只能通過(guò)瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互。從而有效地防止數(shù)據(jù)的丟失。
小結(jié)：js現(xiàn)在的用途
1）作用于瀏覽器端幫助提升用戶(hù)的體驗(yàn)度
2 ) 可以用來(lái)編寫(xiě)游戲腳本
3）可以被構(gòu)建成各種組件(node.js,React.js，vue.js, Jquery)
<html> <head> <meta charset="UTF-8"> <title>JS</title> </head> <body> <script type="text/javascript"> alert("Hello World"); /*彈出對(duì)話(huà)框*/ </script> </body> </html>
小結(jié)：1.js在頁(yè)面內(nèi)使用的時(shí)候必須要寫(xiě)在<script>標(biāo)簽內(nèi)
2.js代碼書(shū)寫(xiě)的時(shí)候不用分號(hào)標(biāo)識(shí)一行編程語(yǔ)句的結(jié)束
3.在js代碼中xxx():此時(shí)表明這是一個(gè)函數(shù)
4.alert():以彈窗的形式將括號(hào)內(nèi)的內(nèi)容展示出來(lái)
JavaScript： 是一個(gè)腳本語(yǔ)言。它是一個(gè)輕量級(jí)，但功能強(qiáng)大的編程語(yǔ)言
1.數(shù)據(jù)類(lèi)型：雖然JavaScript在書(shū)寫(xiě)校驗(yàn)上不去區(qū)分?jǐn)?shù)據(jù)的類(lèi)型，但是并不意味著是不區(qū)分?jǐn)?shù)據(jù)類(lèi)型，而是通過(guò)在瀏覽器中內(nèi)置的JS解析器/引擎自動(dòng)的去判斷的
---------------------------------------------------------------------------------------------------------
1.1數(shù)字：
var a=12 //整數(shù)
var b=2.3 //浮點(diǎn)數(shù)或者說(shuō)是小數(shù)型
var c=-0.5
友情提示：1）在js中變量名必須以字母或下劃線(xiàn)（"_"）開(kāi)頭
2）變量可以包含數(shù)字、從 A 至 Z 的大小寫(xiě)字母
3）JavaScript 區(qū)分大小寫(xiě)，即變量 myVar、 myVAR 和 myvar 是不同的變量
---------------------------------------------------------------------------------------------------------
1.2邏輯型或布爾型：
var a= true
var b=false
alert(a)
alert(b)
---------------------------------------------------------------------------------------------------------
1.3Undefined 和 null
Undefined： 用于存放 JavaScript 的 undefined 值，表示一個(gè)未聲明的變量，或已聲明但沒(méi)有賦值的變量，或一個(gè)并不存在的對(duì)象屬性
null:可以通過(guò)將變量的值設(shè)置為 null 來(lái)清空變量，其意思為空值
var a=""
var a=null
var a
alert(typeof(a))
---------------------------------------------------------------------------------------------------------
1.4字符串： 可以使用單引號(hào)或雙引號(hào)
var firstName=“biil”
var familyName=‘Gates’
alert(firstName+familyName)
---------------------------------------------------------------------------------------------------------
1.5日期：
var myDate=new Date()
alert(myDate)/默認(rèn)是格里尼形式的日期格式/
提示：Date是js中的一個(gè)內(nèi)置的類(lèi)
new：為類(lèi)Date在內(nèi)存中創(chuàng)建一個(gè)內(nèi)存空間，進(jìn)而實(shí)現(xiàn)實(shí)例化
補(bǔ)充：關(guān)鍵字：就是具有特殊含義的詞
---------------------------------------------------------------------------------------------------------
1.6數(shù)組：是一種存放數(shù)據(jù)的容器，其一般可以存放多個(gè)，且需要知道其長(zhǎng)度
var array=[40, 100, 1, 5, 25, 10]
alert(array[0])
---------------------------------------------------------------------------------------------------------
注釋?zhuān)?
單行注釋?zhuān)?code style="box-sizing:border-box;outline:0px;user-select:text !important;font-family:"font-size:14px;line-height:22px;color:#C7254E;background-color:#F9F2F4;border-radius:2px;padding:2px 4px;overflow-wrap:break-word;">//
多行注釋?zhuān)?code style="box-sizing:border-box;outline:0px;user-select:text !important;font-family:"font-size:14px;line-height:22px;color:#C7254E;background-color:#F9F2F4;border-radius:2px;padding:2px 4px;overflow-wrap:break-word;">/**/
擴(kuò)展：注釋的作用：
1）統(tǒng)一規(guī)范
2）注解，幫助理解/閱讀代碼
3）扯淡
---------------------------------------------------------------------------------------------------------
連接字符和轉(zhuǎn)義字符：
連接字符：在js中場(chǎng)用+表示為連接字符
例如： var a=123
alert(‘變量a的值為：’+a)
轉(zhuǎn)義字符：具有特殊含義的字符
\n 換行符 alert(“這是第一局 \n 這是第二句”)
\t 制表符 alert(“這是第一局 \t 這是第二句”)
---------------------------------------------------------------------------------------------------------
2.運(yùn)算符：
2.1算術(shù)運(yùn)算符： +， -， *， /， %，++，--
++：自動(dòng)加1 例如 var a=12
alert(a++)
++在前：先計(jì)算再輸出； ++在后：先輸出再計(jì)算
–：自動(dòng)減1，例如 var h=6
alert(a–)
---------------------------------------------------------------------------------------------------------
2.2關(guān)系運(yùn)算符： > ，>=， <，<=, !=, ==,===
---------------------------------------------------------------------------------------------------------
2.3邏輯運(yùn)算符：
與 ：&& ：全真為真，只要有一個(gè)假則為假
或 ：|| ：全假為假，只要有一個(gè)為真則為真
非 ：！ ：取相反的
JavaScript 可以通過(guò)不同的方式來(lái)輸出數(shù)據(jù)：
1）使用 window.alert() 彈出警告框。
<html> <body> <h1>使用 window.alert() 彈出警告框</h1> <script> window.alert(5 + 6); </script> </body> </html>
2）使用 document.write() 方法將內(nèi)容寫(xiě)到 HTML 文檔中。
<html> <body> <h1>我的第一個(gè) Web 頁(yè)面</h1> <script> document.write(123); </script> </body> </html>
3）使用 innerHTML 寫(xiě)入到 HTML 元素。
<html> <body> <h1>使用 innerHTML 寫(xiě)入到 HTML 元素</h1> <p id="demo">我的第一個(gè)段落</p> <script type="text/javascript"> document.getElementById("demo").innerHTML = "段落已修改。"; </script> </body> </html>
使用innerHTML方法，將前面定位到的選擇器中的標(biāo)簽內(nèi)容進(jìn)行更改
4）使用 console.log() 寫(xiě)入到瀏覽器的控制臺(tái)。
<!DOCTYPE html> <html> <body> <h1>使用 console.log() 寫(xiě)入到瀏覽器的控制臺(tái)</h1> <script> a = 5; b = 6; c = a + b; console.log(c); </script> </body> </html>
console.log()會(huì)將想要輸出的數(shù)據(jù)寫(xiě)到網(wǎng)頁(yè)的控制臺(tái)中顯示
1）順序語(yǔ)句：js默認(rèn)是從上向下自動(dòng)執(zhí)行的
2）選擇語(yǔ)句：
2.1）二路分支：
if(條件)
{
//JavaScript代碼;
}
else
{
//JavaScript代碼;
}
2.2）多路決策：
switch (表達(dá)式)
{
case 常量1 :
JavaScript語(yǔ)句;
break;
case 常量2 :
JavaScript語(yǔ)句;
break;
…
default :
JavaScript語(yǔ)句;
}
小結(jié)：switch…case…default不僅有多路決策的特性，還有穿透性
或者：
if (time<10) { alert("早上好"); } else if (time>=10 && time<16) { alert("中午好"); } else { alert("晚上好!"); }
3）循環(huán)語(yǔ)句：
for循環(huán)語(yǔ)句：
for (var i=0;i<10;i++) { alert("當(dāng)前i的值為:"+i) }
while循環(huán)語(yǔ)句：
var i =1 while (i>5) { alert("當(dāng)前i的值為："+i) i++; }
do…while循環(huán)：
var i=5 do { alert("執(zhí)行了") i++; } while (i<5);
備注：for：知道次數(shù)的循環(huán)
while：>=0次的循環(huán)
do…while：>=1次的循環(huán)
break：語(yǔ)句用于跳出循環(huán)。
continue：用于跳過(guò)循環(huán)中的一個(gè)迭代。
1.typeof 操作符：可以使用 typeof 操作符來(lái)查看 JavaScript 變量的數(shù)據(jù)類(lèi)型。
2.將數(shù)字轉(zhuǎn)換為字符串
var a=123 //第一種方法，用String //var castResult=String(a) //第二種方法，用toString方法 var castResult2=a.toString() alert(typeof(castResult2))
3.將字符串轉(zhuǎn)換為數(shù)字
var a="123" //用Number轉(zhuǎn)換 var b=Number(a) //用parseInt方法將字符串強(qiáng)行轉(zhuǎn)換為數(shù)字 //var b=parseInt(a) alert(typeof(b)) alert(b+998)
1.match():匹配字符串可用正則表達(dá)式
2.search() 方法 用于檢索字符串中指定的子字符串，或檢索與正則表達(dá)式相匹配的子字符串，并返回子串的起始位置
var str = "abcderfha"; //返回查找到的下標(biāo)位置 alert(str.search("er")) //返回 4 //查查找不到的時(shí)候返回-1 alert(str.search("zy"))//返回-1
3.replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個(gè)與正則表達(dá)式匹配的子串。
var str = "Hello World"; alert(str.replace("World","javascript"))//顯示結(jié)果為Hello javascript
語(yǔ)法： function 函數(shù)名( ){
}
實(shí)例一
<html> <head> <meta charset="UTF-8"> <title>JS函數(shù)</title> </head> <script type="text/javascript"> function sum(a,b){ alert(a+b) } </script> <body> <input type="button" value="求和" onclick="sum(3,4)" /> </body> </html>
定義一個(gè)求和函數(shù)，當(dāng)點(diǎn)擊求和按鈕的時(shí)候?qū)⒂?jì)算出傳入的兩個(gè)參數(shù)的和
ps：onclick單擊事件
var xx =function(x,y){
alert(x+y)
}(23,34);
或
(function( o ){
alert(o)
})(“你好”)
實(shí)例二：
<script type="text/javascript"> var fun=function(a,b){ alert(a+"\n"+b) } fun(12,45); </script> ------------------------- <script type="text/javascript"> (function( o ){ alert(o) })("你好") </script>
創(chuàng)建一個(gè)數(shù)組：三種方式
1：常規(guī)方式
<script type="text/javascript"> var myCars=new Array(); myCars[0]="nike" myCars[1]="李寧" myCars[2]="安踏" alert(myCars[1]) </script>
2：簡(jiǎn)潔方式
<script type="text/javascript"> var myCars=new Array("nike","李寧","安踏"); alert(myCars[1]) </script>
3：字面方式
<script type="text/javascript"> var myCars=["nike","李寧","安踏"]; alert(myCars[1]) </script>
2：訪(fǎng)問(wèn)數(shù)組：通過(guò)指定數(shù)組名以及索引號(hào)碼，你可以訪(fǎng)問(wèn)某個(gè)特定的元素
例如：var name=myCars[0];
3:數(shù)組的方法和屬性
數(shù)組名.length ： 數(shù)組 中元素的數(shù)量
數(shù)組名.indexOf(“abc”)：“abc” 值在數(shù)組中的索引值
4：數(shù)組的排序
數(shù)組名.sort(); ：將數(shù)組按正序排序，但是是按照字符串的排序方式來(lái)排序，不管里面是數(shù)字還是什么都是按字符串的排序方式來(lái)排序
reverse（）：將一個(gè)數(shù)組中的元素的順序反轉(zhuǎn)，（即是將數(shù)組中的元素的頭變成尾，尾變成了頭，不是其他的）
擴(kuò)展：將數(shù)組先用sort（）方法進(jìn)行正序排序，在利用reverse（）方法反轉(zhuǎn)，即可達(dá)成降序的目的
字符串中常用的屬性和方法
str.length:獲取字符串的長(zhǎng)度
str.match("")：內(nèi)容匹配
str.replace（）：替換內(nèi)容
var str="adsfadsf"; var n=str.replace("adsf","abcx"); var s=str.length;
1.對(duì)象：是屬性和/方法的組合
屬性：是對(duì)象所擁有的一組外觀特征，一般為名詞
方法：是對(duì)象可以執(zhí)行的功能，一般為動(dòng)詞
例如：對(duì)象：汽車(chē)
屬性：型號(hào)：法拉利 顏色：綠色
方法：前進(jìn)、剎車(chē)、倒車(chē)
PS:三類(lèi)已經(jīng)存在的對(duì)象：
瀏覽器對(duì)象：BOM(已經(jīng)存在于瀏覽器中的，到時(shí)候我們直接調(diào)用即可，例如Screen,History,Location,Navigator)
js腳本對(duì)象:數(shù)組，字符串，日期，Math等(JS語(yǔ)言中已經(jīng)寫(xiě)好的具有某一些功能的對(duì)象，例如Array,Number,Math…)
HTML文檔對(duì)象：DOM（已經(jīng)存在于HTML中的，且已經(jīng)寫(xiě)好了，用的時(shí)候可以直接調(diào)用即可，例如Document）
例如：
<script type="text/javascript"> function Car(name,color) { this.name=name; this.color=color; this.type="轎車(chē)"; this.fun=function(){alert("100km/h");} } var car1=new Car("奧迪","藍(lán)色"); var car2=new Car("奔馳","綠色"); alert(car1.type); //轎車(chē) car1.fun();//100km/h </script>
1.id選擇器：通過(guò) id 查找 HTML 元素，如果找到該元素，則該方法將以對(duì)象的形式返回該元素。
document.getElementById("id1").value //獲取id為id1的標(biāo)簽中的value值
2.name選擇器：通過(guò)name查找到HTML的元素，如果找到元素了，則會(huì)返回一個(gè)數(shù)組
var arr=document.getElementsByName("like") //將name為like的標(biāo)簽全部存入arr數(shù)組中
3.通過(guò)標(biāo)簽名找到 HTML 元素：
getElementsByTagName("p"); var habbies=document.getElementsByTagName("input")//其他的都與步驟2一樣
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>確認(rèn)框</title> </head> <body> <p>點(diǎn)擊按鈕，顯示確認(rèn)框。</p> <button onclick="myFun()">點(diǎn)擊</button> <p id="demo"></p> <script type="text/javascript"> function myFun() { var x; var r=confirm("是否提交商品訂單");//彈出一個(gè)確定框，確定，返回true，取消返回false if(r==true){ x="提交成功，已確定" } else{ x="提交失敗，已取消" }、 //抓取掉id為demo的標(biāo)簽，在屏幕顯示x內(nèi)容 document.getElementById("demo").innerHTML=x; } </script> </body> </html>
點(diǎn)擊確定，會(huì)在屏幕顯示”提交成功，已確定“，點(diǎn)擊取消，會(huì)在屏幕顯示"提交失敗，已取消"
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>確認(rèn)框</title> </head> <body> <p>點(diǎn)擊按鈕，顯示輸入框。</p> <button onclick="myFun()">點(diǎn)擊</button> <p id="demo"></p> <script type="text/javascript"> function myFun() { var x; var r=prompt("請(qǐng)輸入你的名字","Hello"); //彈出對(duì)話(huà)框，可輸入名字 //判斷如果輸入的不為空或者不是空字符串，則x被賦值 if(r!=null && r!=""){ x="早上好"+r+"今天又是新的開(kāi)始，加油" } //抓取掉id為demo的標(biāo)簽，在屏幕顯示x內(nèi)容 document.getElementById("demo").innerHTML=x; } </script> </body> </html>
點(diǎn)擊確定以后則會(huì)將被賦值的x顯示在屏幕中
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
轉(zhuǎn)自：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.yvirxh.cn