EcmaScript
es介紹
擁有內核的瀏覽器:ie 火狐 chrome 蘋果 歐鵬
世界上第一個商業化瀏覽器是 網景（netscape）navigater （導航者）
ie 探索者 ，微軟將ie深度集成到windows操作系統中。
微軟和網景之間的官司
網景最早在navigater加入了程序，liveScript。
微軟仿照網景，也在ie中加入了程序，JScript。
網景找到java，java授權網景可以在自己的產品中使用java的商標。
於是網景 liveScript --> JavaScript。
網景在倒閉之前 將JavaScript代碼公開，提交到 ecma(歐洲計算機製造商協會)類似w3c，ecma262標準。
es 1 2 3 5 6 7 8
es5普遍受支持，es6 ie678不支持。
2.數據類型
從核心結構上劃分，es5的數據分爲6大類型
值類型：字符串、數字、布爾、空、未定義、（es6新增 不確定（獨一無二）類型）
引用類型：對象
es內置的對象類型：
object、日期時間、數組、算數對象、正則表達式
es沒有任何輸入輸出語句，es是一個寄生蟲語言，es程序要執行必須依靠宿主。
宿主（瀏覽器、nodejs）
宿主也會帶給es一些對象類型
元素、文本
3.引入方式
外部、內部、行內
優先外部，其次內部，不推薦行內
<div onclick='alert(222)'>123123123</div>
<script src='js/demo1.js'></script>
<script>
alert(456);
</script>
"use strict";//使用es5的嚴格模式
變量或常量的命名規則：
1、不能和系統關鍵字或保留字一致。
2、可以使用大小寫的字母、數字、下劃線、$。
3、數字不能放在首位。
// es5沒有常量，只有變量
var abc = '123';
var a,b = 1,c;
abc = true;
var bbb;
bbb = 123;
// es6標準
// let用來定義變量
let abc = 123;
// const用來定義常量
const d = [1,2,3];
d[0] = 123;
4.字符串
字符串類型是es的核心類型，es是弱類型，es把所有非字符串類型
都當作字符串來存儲（任何類型都能轉化爲字符串）。
字符串類型的屬性：
length 返回數字類型，表示字符串的長度，只讀。
var str = new String(123);
var str = String(123);
var str = '123';
console.log(str.length)
charAt(index) 通過索引值返回字符串中的一個字符
charCodeAt(index) 通過索引值返回字符串中一個字符的uni編碼值
String.fromCharCode(unicode) 通過uni編碼還原一個字符串
indexOf(searchStr,posIndex)
lastIndexOf(searchStr,posIndex)
查找searchStr在字符串中首次出現的位置，找不到返回-1
字符串的截取：
substr(num,length)
substring(startIndex,endIndex)
slice(startNum,endNum)
5.數字類型，布爾，空，未定義
// NaN 是數字，但表示的含義是非數字
任何類型都可以轉化爲布爾值，
空字符串爲假，非空字符串爲真
0和NaN是假，其他數字爲真。
null、undefined 爲假
所有的對象類型都爲真
null 有值，值爲空
undefined 值未定義
6.運算符
1、算數運算符
+ - * / % ++ –
2、賦值運算符
= += -= *= /= %=
3、邏輯運算符
&& || !
4、比較運算符
< >= <= == === != !==
7.日期和時間
時間的方法在get/set 後面跟UTC表示設置或獲取的時間是世界標準時間
var date = new Date();
var txt = '';
txt += date.getFullYear() + '年';
txt += (date.getMonth()+1) + '月';
txt += date.getDate() + '日';
txt += '星期' + date.getDay();
txt += ' ' + date.getHours();
txt += ':' + date.getMinutes();
txt += ':' + date.getSeconds();
txt += ' ' + date.getMilliseconds();
txt += ' 時間戳' + date.getTime();
8.數組
var arr = new Array(1,2,3);
var arr = [1,2,3];
當參數只有一個且是數字的時候，
標準寫法代表開5個房間，房間爲空
簡寫代表開一個房間，裏面住着數字5
var arr = new Array(5);
var arr = [5];
console.log(arr)
length 返回數組的長度（可讀可寫）
方法：
concat(item1,....itemN)
連接多個數組或內容，返回新的數組。
字符串和數組的相互轉化
數組.join(分隔符) 將數組轉化爲字符串
字符串.split(分隔符) 將字符串轉化爲數組
數組的操作：
unshift push()
數組（splice）
shift pop()
凡是新增的方法，都返回新增後數組新的長度
凡是刪除的，都返回被刪除的元素
splice返回被刪除的元素
數組的截取
slice(startNum,endNum)
reverse()反轉
sort()排序
9.實例
1.電子時鐘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>電子時鐘</title>
</head>
<body>
<h1 id='clock'></h1>
<script>
var h1 = document.getElementById('clock');
setInterval(doit,13);
function doit() {
var txt = '';
var date = new Date();
txt += date.getFullYear() + '年';
txt += (date.getMonth()+1) + '月';
txt += date.getDate() + '日';
txt += '星期' + date.getDay();
txt += ' ' + date.getHours();
txt += ':' + date.getMinutes();
txt += ':' + date.getSeconds();
txt += ' ' + date.getMilliseconds();
h1.innerHTML = txt;
}
</script>
</body>
</html>
效果圖
2.隨機選餐系統
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隨機選餐系統</title>
<style>
h1,div,h2{
text-align: center;
}
</style>
</head>
<body>
<h1>隨機選餐系統1.0</h1>
<div>
<button id='btn'>開始</button>
</div>
<h2 id='txt'></h2>
<script>
// 備菜
var btn = document.getElementById('btn');
var txt = document.getElementById('txt');
var lunbo;
var foods = [];
foods.push('涼皮');
foods.push('貓耳朵');
foods.push('米飯炒菜');
foods.push('面');
btn.onclick = doit;
function doit() {
if(btn.innerHTML == '開始'){
btn.innerHTML = '停止';
lunbo = setInterval(change,20)
}else{
btn.innerHTML = '開始';
clearInterval(lunbo);
}
}
function change() {
var n = Math.floor(Math.random()*foods.length);
txt.innerHTML = foods[n]
}
</script>
</body>
</html>
截圖效果
