04 JavaScript
阿新 • • 發佈：2021-07-21
JavaScript 介紹
特點：
- 互動性（它可以做的就是資訊的動態互動）
- 安全性（不允許直接訪問本地硬碟）
- 跨平臺性（只要是可以解釋 JS 的瀏覽器都可以執行，和平臺無
一、 JavaScript 和 html 程式碼的結合方式
1.1 第一種方式
只需要在 head 標籤中，或者在 body 標籤中， 使用 script 標籤 來書寫js程式碼
html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //alert是JavaScript語言提供的一個警告函式 //它可以接收任意型別的引數，這個引數就是警告框的提示資訊 alert("hello js") </script> </head> <body> </body> </html>
1.1 第二種方式
使用 script 標籤引入 單獨的 JavaScript 程式碼檔案
js內容
alert("起飛")
html程式碼
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 現在需要使用script引入外部的js檔案來執行 src屬性專門用來引入js檔案路徑(可以是相對路徑，也可以是決定路徑) script標籤可以用來定義js程式碼，也可以用來引入js檔案 但是，兩個功能二選一使用，不能同時使用兩個功能 --> <script type="text/javascript" src="01.js"></script> </head> <body> </body> </html>
二、變數
例項程式碼：
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> var i; i=12; //typeof()是js語言提供的一個函式 //可以返回變數的資料型別 //alert(typeof (i));number i = "abc"; //alert(typeof (i));String var a = 12; var b = "abc"; alert(a * b);//MaN是非數字、非數值 </script> </head> <body> </body> </html>
三、關係(比較)運算
等於： == 等於是簡單的做字面值的比較
全等於： === 除了做字面值的比較之外，還會比較兩個變數的資料型別
示例程式碼：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var a = "12";
var b =12;
alert(a == b);//true
alert(a === b);//false
</script>
</head>
<body>
</body>
</html>
三、邏輯運算
且運算： &&
或運算： ||
取反運算： !
在 JavaScript 語言中，所有的變數，都可以做為一個 boolean 型別的變數去使用。0 、null、 undefined、””(空串) 都認為是 false
示例程式碼：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*在 JavaScript 語言中，所有的變數，都可以做為一個 boolean 型別的變數去使用。
0 、null、 undefined、””(空串) 都認為是 false */
// var a = 0;
// if (a) {
// alert("零為真");
// } else{
// alert("零為假");
// }
/*
&& 且運算。
有兩種情況：
第一種：當表示式全為真的時候。返回最後一個表示式的值。
第二種：當表示式中，有一個為假的時候。返回第一個為假的表示式的值*/
var a = "abc";
var b = true;
var c = null;
var d = false;
//alert(a && b); true
//alert(b && a); abc
//alert(a && d);false
//alert( a && c); null
//alert(a && d && c);false
/*|| 或運算
第一種情況：當表示式全為假時，返回最後一個表示式的值
第二種情況：只要有一個表示式為真。就會把回第一個為真的表示式的值*/
//alert(d || c);null
//alert(c || d);false;
//alert(a || c);//abc
//alert(b||c); //true
</script>
</head>
<body>
</body>
</html>
四、陣列(重點)
JS 中 陣列的定義：
格式：
var 陣列名 = []; // 空陣列
var 陣列名 = [1 , ’abc’ , true]; // 定義陣列同時賦值元素
示例程式碼：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var arr =[];//定義一個空陣列
//alert(arr.length);//0
arr[0] = 12;
//alert(arr[0]);//12
//alert(arr.length);//1
//JavaScript語言中的屬豬，只要我們通過陣列下標賦值，那麼最大的下標值，就會自動的給陣列做擴容操作
arr[2] = "abc";
//alert(arr.length);//3
// alert(a[1]);//undefined
//陣列的定義
for (var i=0;i < arr.length;i++){
alert(arr[i]);
}
</script>
</head>
<body>
</body>
</html>
五、函式(重點)
5.1 函式的二種方式
使用的格式如下:
function 函式名(形參列表){
函式體
}
在 JavaScript 語言中，如何定義帶有返回值的函式？
只需要在函式體內直接使用 return 語句返回值即可！
示例程式碼：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//定義一個無參函式
function fun(){
alert("無參函式");
}
//函式呼叫才會被執行
//fun();
function fun2(a,b){
alert("有參函式 a-->" + a + "b--->"+b);
}
//fun2(1,2);
function fun3(num1,num2){
var result = num1 + num2;
return result;
}
alert(fun3(100,200))
</script>
</head>
<body>
</body>
</html>
5.2 函式的第二種定義方式
使用格式如下：
var 函式名 = function(形參列表) { 函式體}
示例程式碼：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var fun = function (){
alert("無參函式");
}
//fun();
var fun2 = function (a,b) {
alert("有參函式a-->"+ a +"b-->"+b);
}
//fun2(1,2)
var fun3 = function (num1,num2){
var result = num1 + num2;
return result;
}
alert(fun3(50,41));
</script>
</head>
<body>
</body>
</html>