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