菜鳥教程:https://www.runoob.com/js/js-tutorial.html
1.js的用法.
????HTML 中的腳本必須位于 <script> 與 </script> 標簽之間。腳本可被放置在 HTML 頁面的 <body> 和 <head> 部分中。 如果要在在 HTML 頁面中插入 JavaScript,要使用 <script> 標簽。<script>開始js,</script>結束js,js代碼寫在<script>標簽中。
????也可以把腳本保存到外部文件中,如果要使用外部文件,要在 <script> 標簽的 "src" 屬性中設置該 .js 文件:
? ??????<script src="myScript.js"></script>
2.js輸出.
????JavaScript 可以通過不同的方式來輸出數據:
????(1)使用?window.alert()?彈出警告框。
????(2)使用?document.write()?方法將內容寫到 HTML 文檔中。注意:?document.write() 僅僅向文檔輸出寫內容。如果在文檔? 已完成加載后執行 document.write,整個HTML 頁面將被覆蓋??梢允褂?document.getElementById(id) 方法操作HTML元素。使用方法為:
? ? ? ? ? ?document.getElementById("demo").innerHTML = "段落已修改。";//修改元素的 HTML 內容
????(3)使用?innerHTML?寫入到 HTML 元素。
????(4)使用?console.log()?寫入到瀏覽器的控制臺。
3.js語法
????1.JavaScript 字面量:
????(1)數字(Number)字面量?可以是整數或者是小數,或者是科學計數(e)。:
3.1415
9999
123e5
????(2)字符串(String)字面量可以使用單引號或雙引號:
"hello word"
'hello word'
????(3)表達式字面量?用于計算:
5*6
document.getElementById("demo").innerHTML = 5 * 6;? //? ? 向html頁面輸出30
????(4)數組(Array)字面量?定義一個數組:
[10,20,30,40,50,]
????(5)對象(Object)字面量?定義一個對象:
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
????(6)函數(Function)字面量?定義一個函數:
function myFunction(a, b) { return a * b;}
2.JavaScript 變量:
????js 使用關鍵字?var?來定義變量, 使用等號來為變量賦值:
var x = 10;? //聲明變量x,將10這個值賦給它
3.js語句
????JavaScript 語句是發給瀏覽器的命令,這些命令的作用是告訴瀏覽器要做的事情。如:
document.getElementById("demo").innerHTML = "你好 Dolly"; //向html頁面輸出? 你好 Dolly
4.js注釋
????單行注釋以?//?開頭。如:
var x = 1 //聲明變量x,將1這個值賦給它
????多行注釋以?/*?開始,以?*/?結尾。如
/*?
? ? 這里面的代碼都不會執行。
*/
5.js變量
????變量是用于存儲信息的"容器"。如:
var x = 1;
var user = 2;
????變量必須以字母開頭,變量也能以 $ 和 _ 符號開頭,變量名稱對大小寫敏感(y 和 Y 是不同的變量)
????您可以在一條語句中聲明很多變量。該語句以 var 開頭,并使用逗號分隔變量即可:
????????var lastname="Doe", age=30, job="carpenter";
????聲明也可橫跨多行:
????????var lastname="Doe",
? ? ????? ?????age=30,
? ? ????????? ?job="carpenter";
????一條語句中聲明的多個不可以賦同一個值:
? ? ? ? ? ? ?var x,y,z=1;? //x,y 為 undefined, z 為 1。
6.js的數據類型
? ??值類型(基本類型):字符串(String)、數字(Number)、布爾(Boolean)、對空(Null)、未定義(Undefined)、Symbol。? ? ??注:Symbol 是 ES6 引入了一種新的原始數據類型,表示獨一無二的值。
? ??引用數據類型:對象(Object)、數組(Array)、函數(Function)。
7.js的對象
????在 JavaScript中,幾乎所有的事物都是對象。
????1.對象定義
????可以使用字符來定義和創建 JavaScript 對象:
var?person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
????定義 JavaScript 對象可以跨越多行,空格跟換行不是必須的:
var?person = {??? firstName:"John",???
? ? ? ? ? ? ? ? ? ? ? ? ? ?lastName:"Doe",???
? ? ? ? ? ? ? ? ? ? ? ? ? ?age:50,
? ? ? ? ? ? ? ? ? ? ? ? ? ?eyeColor:"blue"};
????2.對象屬性
????JavaScript 對象是屬性變量的容器。鍵值對通常寫法為?name : value?(鍵與值以冒號分割)。鍵值對在 JavaScript 對象通常稱為?對象屬性。
8.js函數
????函數語法:
function?functionname()
{
// 執行代碼? ? //? ? ? ? ? ? 函數就是包裹在花括號中的代碼塊,前面使用了關鍵詞 function:
}
????當調用該函數時,會執行函數內的代碼。可以在某事件發生時直接調用函數(比如當用戶點擊按鈕時),并且可由 JavaScript 在任何位置進行調用。
????調用帶參數的函數:
????在調用函數時,您可以向其傳遞值,這些值被稱為參數。這些參數可以在函數中使用。
您可以發送任意多的參數,由逗號 (,) 分隔:
myFunction(argument1,argument2)
當您聲明函數時,請把參數作為變量來聲明:
function myFunction(var1,var2){
代碼
}
????帶有返回值的函數:
????函數將值返回調用它的地方。通過使用 return 語句就可以實現。在使用 return 語句時,函數會停止執行,并返回指定的值。
????語法:
function myFunction(){???
?var x=5;
?return x;
}? //函數會返回值 5。整個 JavaScript 并不會停止執行,僅僅是函數。JavaScript 將繼續執行代碼,從調用函數的地方。
9.js作用域
????作用域是可訪問變量的集合。在 JavaScript 中, 對象和函數同樣也是變量,作用域為可訪問變量,對象,函數的集合。
????1.JavaScript 局部作用域
????變量在函數內聲明,變量為局部作用域。
// 此處不能調用 carName 變量,局部變量:只能在函數內部訪問。
function myFunction() {
????var carName = "Volvo";
????// 函數內可調用 carName 變量
}
????因為局部變量只作用于函數內,所以不同的函數可以使用相同名稱的變量。局部變量在函數開始執行時創建,函數執行完后局部變量會自動銷毀。
????2.JavaScript 全局變量
????變量在函數外定義,即為全局變量。
var carName = " Volvo";? ? ?全局變量有s全局作用域: 網頁中所有腳本和函數均可使用。
// 此處可調用 carName 變量
function myFunction() {
? ? // 函數內可調用 carName 變量
}
????如果變量在函數內沒有聲明(沒有使用 var 關鍵字),該變量為全局變量。如:
// 此處可調用 carName 變量
function myFunction() {
????carName = "Volvo";
????// 此處可調用 carName 變量
}
????3.JavaScript 變量生命周期
????JavaScript 變量生命周期在它聲明時初始化。局部變量在函數執行完畢后銷毀。全局變量在頁面關閉后銷毀。
10.js比較
? ??比較運算符:
????????????邏輯運算符:
11.js條件語句
? ??1.? if 語句:只有當指定條件為 true 時,該語句才會執行代碼。?
????語法:? ??
if (condition){?
???當條件為 true 時執行的代碼
}? ?//?請使用小寫的?if。使用大寫字母(IF)會生成 JavaScript 錯誤!
? ??2.? if...else 語句:請使用 if....else 語句在條件為 true 時執行代碼,在條件為 false 時執行其他代碼。
????語法:
if (condition){?
???當條件為 true 時執行的代碼
}else{?
???當條件不為 true 時執行的代碼
}
? ??3.? if...else if...else 語句:使用 if....else if...else 語句來選擇多個代碼塊之一來執行。
????語句:
if (condition1){
????當條件 1 為 true 時執行的代碼
}else if (condition2){
????當條件 2 為 true 時執行的代碼
}else{
? 當條件 1 和 條件 2 都不為 true 時執行的代碼
}
? ??4.??switch 語句:使用 switch 語句來選擇要執行的多個代碼塊之一。
????語句:
switch(n){
case 1: 執行代碼塊 1
break;
case 2: 執行代碼塊 2
break;
default: 與 case 1 和 case 2 不同時執行的代碼
}
????工作原理:首先設置表達式?n(通常是一個變量)。隨后表達式的值會與結構中的每個 case 的值做比較。如果存在匹配,則與該 case 關聯的代碼塊會被執行。請使用?break?來阻止代碼自動地向下一個 case 運行。
? ??default 關鍵詞:規定匹配不存在時做的事情。
12.js 循環語句
? ??for循環語句:
for (語句 1;?語句 2;?語句 3)
{? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//語句 1?(代碼塊)開始前執行
???被執行的代碼塊? ? ? ? ? ? ? ? ?//語句 2?定義運行循環(代碼塊)的條件
}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //語句 3?在循環(代碼塊)已被執行之后執行
? ??while循環語句:
? ? //? ?while 循環會在指定條件為真時循環執行代碼塊。
while (條件)
{
????需要執行的代碼
}
? ??do/while 循環:
?//? ?do/while 循環是 while 循環的變體。該循環會在檢查條件是否為真之前執行一次代碼塊,然后如果條件為真的話,就會重復這個循環。
do {? ??
需要執行的代碼?
}
while (條件);?