# JS 實現
script標簽
```
<script>
alert("My First JavaScript");
</script>
```
# JS 輸出
```
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
```
# JS 語句
```
var name="Hello";
var name = "Hello";
```
# JS 注釋
```
/*
多行注釋
*/
//單行注釋
```
# JS 變量
```
var pi=3.14;
var name="Bill Gates";
var answer='Yes I am!'
var carname;
carname="Volvo";
```
變量必須以字母開頭
變量也能以 $ 和 \_ 符號開頭（不過我們不推薦這么做）
變量名稱對大小寫敏感（y 和 Y 是不同的變量）
\> 提示：JavaScript 語句和 JavaScript 變量都對大小寫敏感
# JS 數據類型
字符串、數字、布爾、數組、對象、Null、Undefined
javaScript 擁有動態類型。這意味著相同的變量可用作不同的類型：
實例
```
var x // x 為 undefined
var x = 6; // x 為數字
var x = "Bill"; // x 為字符串
```
# 字符串
字符串可以是引號中的任意文本。可以使用單引號或雙引號：
```
var carname="Bill Gates";
var carname='Bill Gates';
```
可以在字符串中使用引號，只要不匹配包圍字符串的引號即可：
```
var answer="Nice to meet you!";
var answer="He is called 'Bill'";
var answer='He is called "Bill"';
```
# 數字類型
JavaScript 只有一種數字類型。數字可以帶小數點，也可以不帶：
```
var x1=34.00; //使用小數點來寫
var x2=34; //不使用小數點來寫
```
極大或極小的數字可以通過科學（指數）計數法來書寫：
```
var y=123e5; // 12300000
var z=123e-5; // 0.00123
```
# 布爾
布爾（邏輯）只能有兩個值：true 或 false。
```
var x=true
var y=false
```
# 數組
```
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
或者 (condensed array):
var cars=new Array("Audi","BMW","Volvo");
或者 (literal array):
實例
var cars=["Audi","BMW","Volvo"];
```
數組下標是基于零的，所以第一個項目是 \[0\]，第二個是 \[1\]，以此類推
# 對象
對象由花括號分隔。在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔：
```
var person={firstname:"Bill", lastname:"Gates", id:5566};
```
對象 (person) 有三個屬性：firstname、lastname 以及 id。
空格和折行無關緊要。聲明可橫跨多行：
```
var person={
firstname : "Bill",
lastname : "Gates",
id : 5566
};
```
對象屬性有兩種尋址方式：
```
name=person.lastname;
name=person["lastname"];
```
Undefined 和 Null
Undefined 這個值表示變量不含有值。
可以通過將變量的值設置為 null 來清空變量。
```
cars=null;
person=null;
```
當聲明新變量時，可以使用關鍵詞 "new" 來聲明其類型：
```
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
```
JavaScript 變量均為對象。當聲明一個變量時，就創建了一個新的對象。
# JS 函數
函數就是包裹在花括號中的代碼塊，前面使用了關鍵詞 function：
```
function functionname()
{
//這里是要執行的代碼
}
```
可以發送任意多的參數，由逗號 (,) 分隔：
```
myFunction(argument1,argument2)
```
用于字符串的 `+`運算符
`+` 運算符用于把文本值或字符串變量加起來（連接起來）。
`str="abc"+"cbd" str="abccbd"`
# JS 比較
運算符
== 等于
`x==8 為 false`
=== 全等（值和類型）
```
x===5 為 true；
x==="5" 為 false
!= 不等于 x!=8 為 true
> 大于 x>8 為 false
< 小于 x<8 為 true
>= 大于或等于 x>=8 為 false
<= 小于或等于 x<=8 為 true
```
可以在條件語句中使用比較運算符對值進行比較，然后根據結果來采取行動：
```
if (age<18) {
document.write("Too young");
}
```
邏輯運算符用于測定變量或值之間的邏輯。
給定 x=6 以及 y=3，下表解釋了邏輯運算符：
運算符
```
&& and (x < 10 && y > 1) 為 true
|| or (x==5 || y==5) 為 false
! not !(x==y) 為 true
```
# If...Else
if 語句 - 只有當指定條件為 true 時，使用該語句來執行代碼
```
if(true){
// do
}
```
if...else 語句 - 當條件為 true 時執行代碼，當條件為 false 時執行其他代碼
```
if(true){
// do
}else{
// do
}
```
if...else if....else 語句 - 使用該語句來選擇多個代碼塊之一來執行
switch 語句 - 使用該語句來選擇多個代碼塊之一來執行
# JS Switch
請使用 switch 語句來選擇要執行的多個代碼塊之一。
語法
```
switch(n)
{
case 1:
//執行代碼塊 1
break;
case 2:
//執行代碼塊 2
break;
default:
//n 與 case 1 和 case 2 不同時執行的代碼
}
```
# JS For
```
for (語句 1; 語句 2; 語句 3)
{
//被執行的代碼塊
}
```
JavaScript 支持不同類型的循環：
for - 循環代碼塊一定的次數
for/in - 循環遍歷對象的屬性
while - 當指定的條件為 true 時循環指定的代碼塊
do/while - 同樣當指定的條件為 true 時循環指定的代碼塊
# JS While
while 循環
While 循環會在指定條件為真時循環執行代碼塊。
語法
```
while (條件)
{
//需要執行的代碼
}
```
do/while 循環
do/while 循環是 while 循環的變體。該循環會執行一次代碼塊，在檢查條件是否為真之前，然后如果條件為真的話，就會重復這個循環。
語法
```
do
{
//需要執行的代碼
}
while (條件);
```
JS Break
break 語句可用于跳出循環。
break 語句跳出循環后，會繼續執行該循環之后的代碼（如果有的話）：
Continue 語句
continue 語句中斷循環中的迭代，如果出現了指定的條件，然后繼續循環中的下一個迭代。
# JS 錯誤
try 語句允許我們定義在執行時進行錯誤測試的代碼塊。
catch 語句允許我們定義當 try 代碼塊發生錯誤時，所執行的代碼塊。
JavaScript 語句 try 和 catch 是成對出現的。
```
try
{
//在這里運行代碼
}
catch(err)
{
//在這里處理錯誤
}
```
# JS 驗證
用戶是否已填寫表單中的必填項目？
用戶是否在數據域 (numeric field) 中輸入了文本？
# 常用對象
JavaScript 中的所有事物都是對象：字符串、數值、數組、函數...
此外，JavaScript 允許自定義對象。
## JS 數字
數字屬性和方法
屬性：
\> MAX VALUE
\> MIN VALUE
\> NaN
方法：
\> toString()
## JS 字符串
計算字符串的長度
indexOf() 來定位字符串中某一個指定的字符首次出現的位置。
match() 來查找字符串中特定的字符，并且如果找到的話，則返回這個字符。
replace() 方法在字符串中用某些字符替換另一些字符。
## JS 日期
```
Date() 返回當日的日期和時間。
getDate() 從 Date 對象返回一個月中的某一天 (1 ~ 31)。
getDay() 從 Date 對象返回一周中的某一天 (0 ~ 6)。
getMonth() 從 Date 對象返回月份 (0 ~ 11)。
getFullYear() 從 Date 對象以四位數字返回年份。
getYear() 請使用 getFullYear() 方法代替。
getHours() 返回 Date 對象的小時 (0 ~ 23)。
getMinutes() 返回 Date 對象的分鐘 (0 ~ 59)。
getSeconds() 返回 Date 對象的秒數 (0 ~ 59)。
getMilliseconds() 返回 Date 對象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒數。
```
月的特殊性
## JS 數組
創建數組
for...in 聲明來循環輸出數組中的元素。
concat() 方法來合并兩個數組。
join() 方法將數組的所有元素組成一個字符串。
sort() 方法從字面上對數組進行排序。
```
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
document.write(arr.sort())
</script>
```
sort() 方法從數值上對數組進行排序。
```
<script type="text/javascript">
function sortNumber(a, b)
{
return a - b
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr + "<br />")
document.write(arr.sort(sortNumber))
</script>
```
## Window
有瀏覽器都支持 window 對象。它表示瀏覽器窗口。
所有 JavaScript 全局對象、函數以及變量均自動成為 window 對象的成員。
全局變量是 window 對象的屬性。
全局函數是 window 對象的方法。
甚至 HTML DOM 的 document 也是 window 對象的屬性之一：
對于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 瀏覽器窗口的內部高度
window.innerWidth - 瀏覽器窗口的內部寬度
對于 Internet Explorer 8、7、6、5：
```
document.documentElement.clientHeight
document.documentElement.clientWidth
```
或者
```
document.body.clientHeight
document.body.clientWidth
```
實用的 JavaScript 方案（涵蓋所有瀏覽器）：
實例
```
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
window.open() - 打開新窗口
window.close() - 關閉當前窗口
window.moveTo() - 移動當前窗口
window.resizeTo() - 調整當前窗口的尺寸
```
## JS Location
一些例子：
```
location.hostname 返回 web 主機的域名
location.pathname 返回當前頁面的路徑和文件名
location.port 返回 web 主機的端口
location.href 屬性返回當前頁面的 URL。
```
JS History
`history.go(-1)`
# JS 正則表達式
學習的工具 notepad + +
## 量詞
```
量詞 描述
n+ 匹配任何包含至少一個 n 的字符串。
n* 匹配任何包含零個或多個 n 的字符串。
n? 匹配任何包含零個或一個 n 的字符串。
n{X} 匹配包含 X 個 n 的序列的字符串。
n{X,Y} 匹配包含 X 或 Y 個 n 的序列的字符串。
n{X,} 匹配包含至少 X 個 n 的序列的字符串。
n$ 匹配任何結尾為 n 的字符串。
^n 匹配任何開頭為 n 的字符串。
?=n 匹配任何其后緊接指定字符串 n 的字符串。
?!n 匹配任何其后沒有緊接指定字符串 n 的字符串。
```
## 方括號
```
方括號用于查找某個范圍內的字符：
表達式 描述
[abc] 查找方括號之間的任何字符。
[^abc] 查找任何不在方括號之間的字符。
[0-9] 查找任何從 0 至 9 的數字。
[a-z] 查找任何從小寫 a 到小寫 z 的字符。
[A-Z] 查找任何從大寫 A 到大寫 Z 的字符。
[A-z] 查找任何從大寫 A 到小寫 z 的字符。
[adgk] 查找給定集合內的任何字符。
[^adgk] 查找給定集合外的任何字符。
(red|blue|green) 查找任何指定的選項。
```
## 元字符
```
元字符（Metacharacter）是擁有特殊含義的字符：
元字符 描述
. 查找單個字符，除了換行和行結束符。
\w 查找單詞字符。
\W 查找非單詞字符。
\d 查找數字。
\D 查找非數字字符。
\s 查找空白字符。
\S 查找非空白字符。
\b 匹配單詞邊界。
\B 匹配非單詞邊界。
\0 查找 NUL 字符。
\n 查找換行符。
\f 查找換頁符。
\r 查找回車符。
\t 查找制表符。
\v 查找垂直制表符。
\xxx 查找以八進制數 xxx 規定的字符。
\xdd 查找以十六進制數 dd 規定的字符。
\uxxxx 查找以十六進制數 xxxx 規定的 Unicode 字符。
```
## 示例
```
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>es6</title>
<script type="text/javascript">
// RegExp
var re = new RegExp('cat');
var re1 = /cat/;
var data = '123123123';
var re2 = /123/gi;
// g 繼續, i 不區分大小寫;
//檢測是否存在
var data4 = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
var reCat4 = /cat/gi;
console.log(reCat4.exec(data4)); //Cat
//String
console.log(re2.test(data));
var data3 = "123123,cat,213,12312,312,3,Cat,cat,dsfsdfs,";
var re3 = /cats/gi;
var rs3 = data3.match(re3);
console.log(rs3)
var data5 = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
var reCat5 = /cat/g;
console.log(data5.search(reCat5)); //23
var data6 = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
var reCat6 = /cat/gi;
console.log(data6.replace(reCat6, "libinqq"));
var data7 = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
var reCat7 = /,/;
console.log(data7.split(reCat7));
var data8 = '`[會計從業資格管理]``[會計專業技術職務資格管理]``[追究違法會計人員的刑事責任]``[會計人員繼續教育管理]`';
var reg8 = /[^\`\[]{1,}(?=\]\`)/g;
console.log(data8.match(reg8))
console.log(''.substr(0, 50))
</script>
</head>
<body>
<div id="msg"> </div>
</body>
</html>
```
# 示例
```
<html>
<head>
<title></title>
<script>
//js hello
//console.log('hello world 1');
//alert("hello world 2");
//var i = 10;
//console.log(typeof i);
//i = '1';
//console.log(typeof i);
//i = "我2345";
//console.log(i.charAt(0));
//i = 3.14159265;
//console.log(typeof i);
/*
注釋
*/
//document.write('hello');
//window.onload = function () {
// document.write('hello');
//};
//var str = "100";
//var num = Number(str);
// time number string
//undefined
//null
//NaN not a number
if (NaN) {
console.log('true');
} else {
console.log('flase');
}
//for (var i = 0; i < 100; i++) {
// // console.log('flase');
//}
//window.document
//document
//console.log(window.i);
//while (i<150){
// console.log(i);
// i++;
//}
//do {
// console.log(i);
// i++;
//} while (i<150);
//console.log("end");
// Array(/*1 ，2 length 3 args*/)
//var arrT = [];
//console.log(arrT);
//arrT.push('曾');
//arrT[7] = '祥';
//console.log(arrT[5]);
//for (var item in arrT) {
// console.log(arrT[item]);
//}
try {
document.getElementByI('sb');
//嘗試
} catch (e) {
//捕獲
console.log(e, '333');
}
var t = 1 / 0
console.log(t);
(function func_demo() {
for (var i = 0; i < 10; i++) {
console.log('flase');
}
})(window);
//console.log(i);
var func_1 = function () {
console.log('s');
}
func_1();
var obj = {};
obj.name = '_name';
obj.sex = '男';
obj.age = 100;
obj.sayHello = function () {
console.log('p:hello');
}
obj.sayHello();
for (var item in obj) {
console.log(typeof item);
// console.log(obj[item])
}
var sex = 'sex';
console.log(obj[sex]);
// key - value;
var objs = [];
objs.push(obj);
console.log(objs);
//dom
//document.getElementById('')
window.onload = function () {
console.log(document.getElementsByTagName('div'));
}
</script>
</head>
<body>
<div>hahaah</div>
</body>
</html>
```
