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