初識javaScript(慕課網學習筆記)
阿新 • • 發佈：2018-12-19
js輸出
- window.alert() 警告框
- document.write() 寫到HTML文件中
- innerHTML 寫到HTML元素
- console.log() 寫到瀏覽器的控制檯
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js輸出</title> </head> <body> <p id="one"></p> <script type="text/javascript"> /** 1. window.alert() 警告框 2. document.write() 寫到HTML文件中 3. innerHTML 寫到HTML元素 4. console.log() 寫到瀏覽器的控制檯 **/ // 彈出一個警告框 window可以省略 window.alert("helloword"); // 寫到網頁中 document.write('helloword'); // 寫到元素之中，這裡例子是寫到p中 document.getElementById('one').innerHTML = 'iiiiii'; // 輸出到f12->console console.log('123'); </script> </body> </html>
js語句與註釋
- 分號
- javaScript 程式碼
- javaScript 語句識別符號
- 程式碼塊
- 單行和多行註釋
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js語句與註釋</title> </head> <body> <script type="text/javascript"> /** - 分號 - javaScript 程式碼 - javaScript 語句識別符號 var if for - 程式碼塊 - 單行和多行註釋 **/ var a=1 // 程式碼塊 function b(){ var c=1; var d=2; } //單行註釋 /* 多行註釋 */ </script> </body> </html>
js資料型別
- 字串（String）
- 數字（Number）
- 布林（Boolean）
- 陣列（Array）
- 物件（Object）
- 空（Null）
- 未定義（Undefined）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js資料型別</title> </head> <body> <script type="text/javascript"> /** * 字串 (String) * 數字 (Number) * 布林 (Boolean) * 陣列 (Array) * 物件 (Object) * 空 (Null) * 未定義 (Undefined) */ // var可以宣告各種型別 var x; // x 為 undefined var y = 5; // y 為數字 var z = "John"; // z 為字串 // 字串 var carname="Volvo XC60"; var carname='Volvo XC60'; // 數字 var x1=34.00; //使用小數點來寫 var x2=34; //不使用小數點來寫 // 布林 var x=true; var y=false; // 陣列 var cars=new Array(); cars[0]="hello"; cars[1]="word"; var cars=new Array("Saab","Volvo","BMW"); var cars=["Saab","Volvo","BMW"]; // JavaScript 物件 鍵值對 var person={ firstname:"hello", lastname:"word", id:5566 }; // 相應的取值方式 console.log(person.firstname) console.log(person["firstname"]) // Undefined 和 Null // Undefined 這個值表示變數不含有值。 // 可以通過將變數的值設定為 null 來清空變數 var persons; var car="Volvo"; car=null </script> </body> </html>
js變數
- 變數必須以字母開頭
- 變數也能以 $ 和 _ 符號開頭（不過我們不推薦這麼做）
- 變數名稱對大小寫敏感（y 和 Y 是不同的變數）
js函式
- 函式是由事件驅動的或者當它被呼叫時執行的可重複使用的程式碼塊
- function a( 引數 ){} 宣告會前置
- var a = function( 引數 ){} 匿名函式
- 函式中的 return
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js函式</title>
</head>
<body>
<script type="text/javascript">
/**
* 函式是由事件驅動的或者當它被呼叫時執行的可重複使用的程式碼塊
function a( 引數 ){} 宣告會前置
var a = function( 引數 ){} 匿名函式
函式中的 return
*/
function a(){
//輸出到控制檯
console.log(1111);
console.log(2222);
console.log(3333);
console.log(4444);
console.log(5555);
console.log(6666);
}
//重複使用
a();
a();
a();
a();
b('hello', 'world');
//函式宣告會被自動前置，即上面呼叫b函式是可以的
function b(cs1, cs2){
console.log(cs1, cs2);
}
//匿名函式
var c = function(cs1, cs2, cs3){
console.log(cs1, cs2, cs3);
}
c(1,2,3);
//return 返回相應的值
function d(){
return "this is return function";
}
var d1 = d();
console.log('this is a d1: ', d1);
</script>
</body>
</html>
運算子
- 賦值運算子 = += -= 等
- 算術運算子 + - * / 等
- 字串的 + 運算子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js運算子</title>
</head>
<body>
<script type="text/javascript">
/**
* 賦值運算子 = += -= 等
算術運算子 + - * / 等
字串的 + 運算子
*
*
*
*/
var a = 1; //賦值
a += 3; // a = a + 3;
console.log(a); //4
var b = 2;
b = b * 3;
console.log(b); //6
var c = 'hello';
var d = 'world';
var e = c + d;
console.log(e); //helloword
</script>
</body>
</html>
js比較與邏輯運算子
- < 小於
- > 大於
- **== 等於 1 == ‘1’ **
- === 絕對等於（值和型別均相等）
- != 不等於
- && and
- || or
注意5=='5’返回值為True,5==='5’返回值為false
條件語句及switch語句(和java一樣不講)
if、else、switch、case、break、default
js中for迴圈與while迴圈
- for 迴圈程式碼塊一定的次數
- for/in迴圈遍歷物件
- while指定條件為true時迴圈指定的程式碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js中for迴圈與while迴圈</title>
</head>
<body>
<script type="text/javascript">
/**
*
* for - 迴圈程式碼塊一定的次數
for/in - 迴圈遍歷物件
while - 當指定的條件為 true 時迴圈指定的程式碼塊
*/
for( var i = 0; i < 10 ; i++ ){
console.log('i:'+ i);
}
var person = {
name : 'json',
age : 25,
sg: 170
}
for( key in person ){
console.log(person[key])
}
var count = 1;
while( count < 10 ){
count++ ;
console.log('執行while迴圈');
}
</script>
</body>
</html>
js中break和continue語句
- break語句可以跳出迴圈
- continue語句跳出本次迴圈，繼續執行