JS 基礎知識
阿新 • • 發佈：2020-12-11
技術標籤：javascript
JS簡介
JavaScript是一種基於物件和事件驅動並具有安全效能的解釋型指令碼，在Web應用中得到了非常廣泛的應用。它不需要編譯，而是直接嵌入在HTTP頁面中，把靜態頁面轉變成支援使用者互動並響應應用的動態頁面。在JavaWeb程式中，經常應用JavaScript進行資料驗證，控制瀏覽器以及生成時鐘、日曆和時間戳文件等。
JS語言基礎
使用方式：通過使用<script>標籤
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8" 效果顯示：
定義變數，JavaScript語言是一種弱語言，即不需要明確指定資料型別就可以定義：
<!DOCTYPE html>
<html>
<head>
<meta charset = 
匯入外部JS檔案：
首先新建一個字尾為.js的檔案，然後在需要使用的html頁面中引入即可，這樣做可提高程式碼的重用性。
//js基礎.js
alert("你好 世界");
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>js基礎</title>
<!--
使用script引入js檔案
SRC屬性 引用js檔案的地址
-->
<!-- 需要主要的是一旦使用了外部js檔案時，不能再在script標籤內使用js語句 -->
<script type = "text/javascript" src = "js基礎.js"></script>
<script type = "text/javascript">
alert('世界 你好');
</script>
</head>
<body>
</body>
</html>
結果會出現兩個提示框
邏輯運算：
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>js基礎</title>
<script type = "text/javascript">
// 等於 == 字面值比較
// 全等於 === 除了字面值比較，還比較資料型別
var a = "13";
var b = 13;
alert(a == b); // 返回true
alert(a === b); // 返回false
// 且運算 &&
// 或運算 ||
// 取反運算 !
// js中所有變數均可以作為boolean
var a = 0;
if(a){
alert("零為真");
}else{
alert("零為假");
}
a = "0";
if(a){
alert("零為真");
}else {
alert("零為假");
}
a = null;
var b = undefined;
var c = "";
if(a || b || c){
alert("null以及undefined以及空字串為真");
}else{
alert("全為假");
}
// &&運算
// 第一種 當表示式全為真時，返回最後一個表示式的值
// 第二種 當表示式有一個為假時，返回第一個為假的表示式值
var a = "abd";
var b = true;
var c = false;
var d = null;
alert("&& 的用法");
alert(a && b);//true
alert(b && a); //true 返回abd
alert(d && c); // false 返回null
alert(c && d); // false 返回false
// ||運算
// 第一種 當表示式全為假時，返回最後一個表示式的值
// 第二種 只要有一個表示式為真時 就會返回第一個為真的表示式的值
alert("|| 的用法");
alert(c || d); //false 返回null
alert(c || a || b); //true 返回abd
</script>
</head>
<body>
</body>
</html>
陣列型別：
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>js基礎</title>
<script type = "text/javascript">
// javascript 語言中的陣列，型別可以不統一，和python的list類似
// javascript 語言中的陣列，陣列為可變長度
var a = ["2000",null,false,2000]; //定義陣列
alert(a.length); // 結果為4
a[10] = "abcd";
alert(a.length); // 結果為11
for(var i = 0;i<a.length;i++){
// 這裡面除了第一二三四個和最後一個有值外，其餘的顯示均是undefined
alert(a[i]);
}
</script>
</head>
<body>
</body>
</html>
js函式用法：
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>js基礎</title>
<script type = "text/javascript">
// 函式
// function 關鍵字
// function 函式名(形參列表){}
// 在js中是不允許函式過載的：因為過載是會覆蓋上一個函式定義
// 定義一個無參函式
function fun1(){
alert("無參函式");
}
fun1(); //呼叫
// 定義一個有參函式
function fun2(a,b){
alert("有參函式 a="+a+"，b = "+b);
}
var a = 10;
var b = 12;
fun2(a,b);
// 定義一個帶有返回值的函式
function fun3(a,b){
return a+b;
}
alert("有參函式返回值："+fun3(a,b));
// 函式的第二種定義方式
// var 函式名 = function(引數列表){函式體}
var fun4 = function(){
alert("第二種函式定義方式");
}
fun4();
// 函式引數列表提供了隱形引數arguments，類似於python的可變引數*args，java的Object...args
// 一般將它看作一個數組即可
function fun5(){
alert(typeof(arguments)); // 型別為object
alert(arguments.length); // 結果為arguments的長度
alert("無參函式");
}
fun5(1,"函式");
</script>
</head>
<body>
</body>
</html>
函式的簡單使用：
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>js基礎</title>
<script type = "text/javascript">
// 利用for求各元素之和
var sum = function(num1,num2){
var result = 0;
for(var i = 0; i<arguments.length;i++){
if(typeof(arguments[i]) == 'number'){ // 過濾數值型資料
result += arguments[i];
}
}
return result;
}
alert(sum(1,2,3,4,5,6,7,8,9)); //45
alert(sum(1,2,3,4,5,"abc",6,7,8,9)); //45
</script>
</head>
<body>
</body>
</html>
物件的定義和使用：
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>js基礎</title>
<script type = "text/javascript">
// 物件的定義
// var 變數名 = new object()
// 物件的屬性訪問 變數名.屬性
// 物件的函式訪問 變數名.函式名()
var obj = new Object(); // 定義一個空物件
obj.name = "無名氏"; // 給obj物件屬性賦值
obj.age = 10;
obj.fun = function(){ // 給obj物件函式賦值 第二種函式定義方式
alert("姓名："+this.name+" 年齡："+this.age);
}
alert(typeof(obj)); // 型別為object
obj.fun(); // 訪問物件函式
// 花括號定義 自定義物件
var obj1 = {}; // 定義一個空物件
alert(typeof(obj1)); // 型別為object
// 物件內之間用','相隔,其中元素的鍵值對為':'，而不是用'='
var obj2 = {
// 屬性名 ： 值 定義一個屬性
// 函式名 ： function 定義一個函式
name : "張三",
age : 20,
fun : function(){
alert("姓名："+this.name+" 年齡："+this.age);
}
};
alert(obj2.name); //訪問自定義物件的屬性
obj2.fun(); // 訪問自定義物件的函式
</script>
</head>
<body>
</body>
</html>
常用滑鼠事件：
onload：載入完成事件 頁面載入完成之後，常用於頁面js程式碼初始化操作
onclick：單擊事件 常用於按鈕的點選響應操作
onblur：失去焦點事件 常用於輸入框失去焦點後驗證其輸入內容是否合法
onchange：內容發生改變事件 常用於下拉列表個輸入框內容改變後操作
onsubmit: 常用於表單提交 常用於表單提交，驗證所有表單項是否合法
事件的註冊：
靜態註冊 ： 通過html標籤的事件屬性直接賦予事件響應後的程式碼
動態註冊： 是指先通過js程式碼得到標籤的document物件，然後再通過 元素物件.事件名 = function()響應
onload靜態註冊：
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>js基礎</title>
<script type = "text/javascript">
// 靜態註冊
function onloadFun(){
alert("靜態註冊onload事件");
}
</script>
</head>
<!-- 以下為靜態註冊 -->
<body onload = "onloadFun();">
</body>
</html>
onload動態註冊：
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>js基礎</title>
<script type = "text/javascript">
// 動態事件
// 通過window物件實現
window.onload = function(){
alert("動態註冊的onload事件");
}
</script>
</head>
<!-- 以下為動態註冊 -->
<body>
</body>
</html>
oclick事件註冊方式：
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>js基礎</title>
<script type = "text/javascript">
// 靜態註冊onclick事件
function onClickFun(){
alert("靜態註冊onclick事件");
}
// 動態註冊onclick事件
window.onload = function(){
// 1.獲取標籤物件
// get 獲取
// Element 元素
// By 通過
// Id id屬性
var btnObj = document.getElementById("btn1"); // 這個很重要
alert(typeof(btnObj)); // 物件型別為object
// 2. 通過元素物件定義函式
btnObj.onclick = function(){
alert("動態註冊onclick事件");
}
}
</script>
</head>
<body>
<!-- 靜態註冊onclick事件 -->
<button onclick = "onClickFun();">按鈕1</button>
<!-- 動態註冊onclick事件 -->
<button id = "btn1" >按鈕2</button>
</body>
</html>
參考：javaweb從入門到精通