JavaScript學習筆記（基礎部分）
阿新 • • 發佈：2018-07-17
lower 對數 mys row 字符串分割 push 循環 jee document
一、JavaScript簡介：
概念：JavaScript是一種解釋性的、跨平臺的、基於對象的腳本語言，一般用於客戶端來給HTML頁面增加動態的功能。
組成：
1.ECMAScript，描述了該語言的語法和基本對象
2.DOM 文檔對象模型，描述處理網頁內容的方法和接口
3.BOM 瀏覽器對象模型，描述與瀏覽器進行交互的方法和接口。
二、JavaScript
1.js的引入方式
1.1 放在HTML的<head>部分
1.2 放在HTML的<body>部分
1.3 從外部文件引入：
<script src="myScript.js"></script>
2.變量
2.1變量的聲明：
使用“var”關鍵字來聲明變量
聲明時賦值var x=1
或先聲明後賦值：var x; x=1
對於沒有賦值的變量，其值為：undefined
2.2變量的命名規則：
英文字母、數字、下劃線
2.3變量名格式：
匈牙利命名法：變量名=類型+對象描述 例：var sname="hello"; var nage=18
駝峰命名法：
全部小寫，單詞用下劃線分割
每個單詞首字母大寫
首字母小寫，其他單詞首字母大寫
2.4作用域：
局部作用域：函數內部定義
全局作用域： 函數外定義
優先級：局部變量>全局變量
3.運算符
3.1算數運算符 + - * 、 % ++ --
/* var a=1 b = a++ //先賦值後加減 alert(b) //b=1 alert(a) //a=2 */ /* var a=1 b=++a //先加減後賦值 alert(b) //b=2 alert(a) //a=2*/ /* var x=1 alert(x++) x=x+1 先賦值，x=1 alert結果為1 ，執行完成後x=2 alert(++x) 此時x=2，先加減後賦值，alert結果為3 x=3 alert(--x) 先加減，後賦值，此時alert結果為2 alert(x--) */
3.2賦值運算符 += -= *= /= %=
3.3關系運算符 == != ===
alert(2=="2") --> true alert(2==="2") -->flase ===不進行數據轉換，直接進行比較
var s="hello" alert(typeof(s)) // typeof:只能判斷基礎數據類型,對於對象無法準確判斷具體是什麽對象 var s2=new String("hello") alert(typeof(s2)) alert(s2 instanceof String);
3.4邏輯運算符 ！ && ||
3.5位運算符 ~ & | ^ << >>
3.5一元加減法：
<!--一元加減法-->
var a=3
b=+a
alert(b)
alert(typeof(b))
<!--可以對數據類型進行轉換-->
var a="3"
b=+a
alert(b)
alert(typeof(b))
<!--有非數字類型，轉換失敗-->
var a="3a"
b=+a
alert(b)
alert(typeof(b))
4.基本數據類型
number
string
Boolean
null
undefined
5.流程語句
5.1 while
<script type="text/javascript"> i=0 while (i<5) { // statement console.log(i) i++ } </script>
5.2 do while
<script type="text/javascript"> i=0 do{ //至少執行一次循環 console.log(i) i++ } while (i<5); </script>
5.3 for
<script type="text/javascript">
for (var i=0; i<5; i++) {
console.log(i)
}
</script>
5.4 for in
<script type="text/javascript">
for (i in [1,2,3,4]) {
console.log(i)
}
</script>
5.5 if else
1 <head> 2 <meta charset="utf-8"> 3 <title>JavaScript</title> 4 </head> 5 <body> 6 7 <script type="text/javascript"> 8 var d = new Date(); 9 var time = d.getHours(); 10 if (time<10) 11 { 12 document.write("<b>早上好</b>"); 13 } 14 else if (time>=10 && time<14) 15 { 16 document.write("<b>中午好</b>"); 17 } 18 else 19 { 20 document.write("<b>下午好!</b>"); 21 } 22 </script> 23 </body> 24 </html>
5.6 switch
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript</title> </head> <body> <button onclick="myFunction()">今天是周幾？</button> <p id="demo"></p> <script> function myFunction(){ var x; var d=new Date().getDay(); switch (d){ case 0:x="今天是星期日"; break; case 1:x="今天是星期一"; break; case 2:x="今天是星期二"; break; case 3:x="今天是星期三"; break; case 4:x="今天是星期四"; break; case 5:x="今天是星期五"; break; case 6:x="今天是星期六"; break; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>
5.7 異常處理
function func (argument) { try { console.log(‘hello‘) if(true){ throw "主動拋出錯誤" } } catch(e) { alert(e); } finally { console.log("執行完畢") } } func()
5.8 continue break default
6.對象
6.1 Number
var num=new Number(15) console.log(num) console.log(num.toString()) //數字轉字符串 console.log(num.toString(2)) //數字轉2進制 console.log(num.toString(8)) //數字轉8進制 console.log(num.toString(16)) //數字轉16進制
6.2 String
var str1=new String("hello"); var str2=" world"; //屬性 console.log(str1.length); //字符串的長度 // 方法 //獲取指定字符串 console.log(str1.charAt(‘1‘)); //返回在指定位置的字符。 //查找 console.log(str1.indexOf(‘l‘)); //返回某個指定的字符串值在字符串中首次出現的位置。 console.log(str1.lastIndexOf(‘l‘)); //從後向前搜索字符串，並從起始位置（0）開始計算返回字符串最後出現的位置。 console.log(str1.replace(‘e‘,‘a‘)); //替換 console.log(str1.slice(1,3)); //切片[start,end) console.log(str1.substring(1,3)) //和slice相同 console.log(str.split(" ")); //把字符串分割為字符串數組。 console.log(str1.substr(1,3)) //從起始索引號提取字符串中指定數目的字符 (index,num) //大小寫轉換 console.log("HELLO".toLowerCase(str1)) //轉小寫 console.log("hello".toUpperCase(str1)) //轉大寫 //編排方法 document.write(s.italics()); document.write(s.bold()); document.write(s.anchor()); console.log(" hello ".trim()) //去除字符串兩邊的空白 var str=str1.concat(str2);//字符串拼接 console.log(str);
6.3 Array
//聲明 var cars = ["Volvo","Saab","BMW"]; //方法一 var arr1=[1,2,3,4]; //方法二 var arr3=new Array(); //方法三 var arr4=new Array(3,); //初始化一個長度為3的數組，該數組可變長 //屬性 console.log(cars.length) //方法： //插入和刪除 console.log([1,2,3].concat([4,5,6])) //數字合並 console.log(cars.join("#")) console.log(cars.pop()) //刪除最後一個元素 console.log(cars.push(‘jeep‘)) //數組的末尾添加一個或更多元素，並返回新的長度 console.log(cars.shift()) //刪除並返回數組的第一個元素 console.log(cars.unshift(‘abc‘)) //向數組的開頭添加一個或更多元素，並返回新的長度。 console.log(cars) //排序 console.log(cars.reverse()) //反轉數組順序 console.log(cars.sort()) //數組排序 console.log(cars.toString()) //數組轉字符串
6.4 Boolean
//方法 var bool = new Boolean(1); console.log(bool.toString()) console.log(bool.valueOf())
6.5 Date
//時間創建 var today = new Date() var d1 = new Date("October 13, 1975 11:13:00") var d2 = new Date(79,5,24) var d3 = new Date(79,5,24,11,33,0) console.log(today) console.log(d1) console.log(d2) console.log(d3) //方法 y=today.getFullYear() m=today.getMonth() d=today.getDate() H=today.getHours() M=today.getMinutes() S=today.getSeconds() console.log(y+‘年‘+m+‘月‘ +d+‘日‘+" "+H+":"+M+":"+S) console.log(today.getTime())
6.6 Mtch
console.log(Math.abs(-2)) console.log(Math.max(1,3,5)) console.log(Math.min(1,3,5)) console.log(Math.random()) //[0.0,1.0)隨機數 console.log(Math.round(2.5)); //四舍五入
6.7 RedExp
//語法 // var patt=new RegExp(pattern,modifiers); // 或者更簡單的方式: // var patt=/pattern/modifiers; /* 修飾符 i 執行對大小寫不敏感的匹配。 g 執行全局匹配（查找所有匹配而非在找到第一個匹配後停止）。 m 執行多行匹配。 */ var str="hello world" console.log(str.search("o")) //返回第一個匹配的索引值 console.log(str.search("a")) //沒找到返回-1 console.log(str.match(/o/g)); console.log(/hello/g.test(str))
7.函數
7.1函數創建的三種方法
// 方法一 function func (argument) { return "hello" } console.log(func()) // 方法二：構造函數 var func = new Function("參數1", "參數2", "函數體") var func = new Function("a","b","return a+b") console.log(func(1,2)) // 方法三 匿名函數(函數表達式) console.log(function(x,y){return x+y}(3,5))
7.2函數調用
this 關鍵字:一般而言，在Javascript中，this指向函數執行時的當前對象。 void() // void的作用:阻攔方法的返回值 function f() { return 8 } alert(void(f()))
7.3參數
arguments對象 //遍歷傳入的參數 function func() { for (var i = 0; i<arguments.length; i++) { console.log(arguments[i]) } } func(1,2,3,4,5)
JavaScript學習筆記（基礎部分）