Web前端-JS
- JS的歷史和特點簡介
- JS誕生的背景
- JS的歷史
- JS的特點
- JS的語法基礎
- 第一個JS例子
- JavaScript 語法
- JavaScript 輸出
- 基本陳述句
- JavaScript 資料型別的轉換
- javaScript方法
- javaScript函式
- js中的函式定義
- 匿名函式定義
- JS物件
- 陣列物件
- 字串物件
- JS面向物件編程
- javaScript選擇器
- javaScript彈框
- 確認框
- 對話框
JS的歷史和特點簡介
JS誕生的背景
1.隨著互聯網的發展，頁面傳遞給后臺有太多需要驗證的東西，盡管后端的代碼是能夠實作對傳遞過來的資料進行校驗和判斷的，但是這樣的話無疑是加重了后臺程式的作業任務量，于是廣大互聯網作業人員迫切需要有一種新的辦法/語言能夠實作這樣的效果，于是js也就是在這樣的一個大的時代背景下誕生的
2.js最開始的時候是不叫js而是叫scrpit語言，他們也想將這個前景光明的明日之星賣給微軟，但是微軟沒有買下，在種種機緣巧合之后被Sun公司收購了，為了讓其與java語言走的近點 ，更是改名為JavaScript簡稱為js
JS的歷史
在1995年時，由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實作而成
1997年，在ECMA（歐洲計算機制造商協會）的協調下，由Netscape、Sun、微軟、Borland組成的作業組確定統一標準：ECMA-262，
JS的特點
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)
JS的語法基礎
第一個JS例子
<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 語法
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 輸出
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：用于跳過回圈中的一個迭代，
JavaScript 資料型別的轉換
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)
javaScript方法
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
javaScript函式
js中的函式定義
語法： 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>
JS物件
陣列物件
創建一個陣列：三種方式
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;
JS面向物件編程
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>
javaScript選擇器
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一樣
javaScript彈框
確認框
<!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顯示在螢屏中
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/287751.html
標籤：其他