JavaScript介紹
1.JavaScript是互聯網上最流行的腳本語言,這門語言可用於web和html,更可廣泛用於服務器,PC端,移動端。
2.JavaScript腳本語言
JavaScript是一種輕量級的編程語言。
JavaScript是可插入HTML頁面的編程代碼
JavaScript插入HTML頁面後,可由所有的瀏覽器執行
JavaScript實現
1.JavaScript用法
HTML中的腳本必須位於之間寫代碼
3.JavaScript使用限制
在HTML中,不限制腳本數量。
通常會把腳本放置於標籤中,以不干擾頁面內容。
JavaScript使用限制
1.JavaScript通常用來操作HTML
2.文檔輸出:
Document.write(“
this is my first JavaScript.
”);JavaScript語法
1.js語句
JavaScript 語句向瀏覽器發出的命令。語句的作用是告訴瀏覽器該做什麼。
2.分號:
語句之間的分割是分號(;)
注意:分號是可選項,有時候看不到不以分號隔開。
3.JavaScript代碼
按照編寫順序依次執行
4.標識符
JavaScript表示符必須以字母、下劃線或**美元符號 $**開始
JavaScript關鍵字
5.JavaScript對大小寫敏感
6.空格
JavaScript會忽略多餘的空格
7.代碼換行
8.保留字
JavaScript註釋
1.單行註釋 //
2.多行註釋 /**/
JavaScript變量
變量是用來存儲信息的“容器”
例如: var x = 10;
var y = 10;
var z = "Hello";
JavaScript數據類型
1.字符串 string
2.數字 number
3.布爾 boolean
4.數組 array
5.對象 object
6.空 null
7. undefined
8. 可以通過賦值爲null的方式清除變量
JavaScript語法
JavaScript運算符
1.算法運算符
+、-、*、/、++、–
2.賦值運算符
=、+=、-=、=、/=、%=
var j=i++; ++在後,先賦值,再運算。
var j=++i;++在前,先運算,再賦值。
3.字符串操作
任何數據類型和字符串相加都會變成字符串類型
+符號的2種含義
①運算相加
②連接
4.比較運算符
==、===、!=、!==、>、<、>=、<=
5.邏輯運算符
&&與 ||或 !非
6.條件運算符:
eg:x<10?“x比10小”:“x比10大”
JavaScript條件語句
1.if…else
2.switch
<script>
var i=5;
switch(i){
case 1:
document.write("i=1");
break;
case 2:
document.write("i=2");
break;
default:
document.write("條件不滿足case");
break;
}
</script>
JavaScript循環語句
1.for循環、for/in
<script>
var i=[1,2,3,4,5,6];
for(var j=0;j<6;j++){
document.write(i[j]);
}
</script>
<script>
var i=[1,2,3,4,5,6];
var j;
for(j in i){
document.write(i[j]+"<br/>");
}
</script>
2.while循環 先判斷再執行
3.do…while 先執行後判斷 至少執行一次
JavaScript跳轉語句
1.break
2.continue
break:從當前跳出
<script>
for(var i=0;i<10;i++){
if(i==5){
break;
}
document.write("i="+i+"<br/>");//0 1 2 3 4
}
</script>
continue:跳過當前
<script>
for(var i=0;i<10;i++){
if(i==5){
continue;
}
document.write("i="+i+"<br/>");//0,1,2,3,4,6,7,8,9
}
</script>
瞭解函數的用途概要:
1.瞭解函數
2.定義函數
3.函數調用
4.帶參數的函數
5.帶返回值的函數
1.函數
函數是由事件驅動的或者當它被調用時執行的可重複使用的代碼塊。
2.定義函數
(1)定義函數
function 函數名(){
函數體;(代碼塊)
}
<script>
var a1 = 10;
var a2 = 20;
var sum = a1+a2;
alert(sum);
</script>
(2)注意
JavaScript對大小寫敏感,所以這裏的function必須小寫。在函數調用時,也必須按照函數的相同名稱來調用函數。
3.函數調用
(1)函數在定義好之後,不能自動執行,需要進行調用。
<script>
function demo(){
var a=10;
var b=10;
var sum=a+b;
alert(sum);
}
function tell(){
var n=10;
var m=10;
var vl = n*m;
alert(vl);
}
tell();
</script>
(2).調用方式
(1)在<script>標籤內調用。
(2)在html文件中調用。
<script>
function demo(){
var a = 10;
var b = 20;
var sum = a+b;
alert(sum);
}
// demo(); 第一種
</script>
<!-- 第二種 -->
<!-- <form>
<input type="button" value="按鈕" onclick="demo()">
</form> -->
<!-- 第三種 -->
<button onclick="demo()">按鈕</button>
4.JavaScript帶參數的函數
(1).函數參數
在函數的調用中,也可以傳遞值,這些值被稱爲參數。
eg:demo(arg1,arg2);
(2).參數的個數可以任意多,每個參數通過","隔開。
(3).注意:
參數在傳遞時,其順序必須一致。
(4).參數意義:
通過傳遞參數的個數以及參數的類型不同完成不同的功能。
<script>
function demo(name,age){
alert("Hello:"+name+",我的年齡是:"+age);
}
</script>
<button onclick="demo('iwem',21)">按鈕</button>
<button onclick="demo('nam',19)">按鈕2</button>
5.帶返回值的函數
返回值
有時,我們需要將函數的值返回給調用它的地方。
通過return語句就可以實現
注意:在使用return語句時,函數會停止執行,同時返回值。
<p id="pid"></p>
<script>
function demo(a,b){
if(a>b){
return "a比較大";
}else{
return "b比較大";
}
}
document.getElementById("pid").innerHTML =demo(12,100900);
</script>
全局變量和局部變量
<script>
var n=10;m=10;//全局變量 任何地方+都可以使用
function demo(){
var i=10;//局部變量 只能在當前函數中使用
x=10;// 只有在調用demo後 x是 全局變量
}
demo();
alert(x);
</script>
異常捕獲
1.異常
當javascript引擎執行javascript代碼時,發生了錯誤,導致程序停止執行。
2.異常拋出:
當異常產生,並將這個異常生成一個錯誤信息。
3.異常捕獲
try{
發生異常的代碼塊;
}catch(err){
錯誤信息處理;
}
4.throw語句:
通過throw語句創建一個自定義錯誤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>異常捕獲</title>
</head>
<body>
<form>
<input id="txt" type="text">
<input id="btn" type="button" onclick="demo()" value="按鈕">
</form>
<script>
function demo(){
try{
var e = document.getElementById("txt").value;
if(e==""){
throw "第一個用戶輸入異常==空";
}
}catch(err){
alert(err);
}
}
</script>
</body>
</html>