是什么：What
是一種腳本語言，用于執(zhí)行網(wǎng)頁上的動(dòng)作
（內(nèi)容由 HTML 語言書寫，格式由 CSS 規(guī)范，動(dòng)作由 JS 來執(zhí)行）
JS 是一種解釋性的語言，與 Java 這種強(qiáng)類型的語言無關(guān)
特點(diǎn)是什么
- 解釋性語言
適用/不適用場合
抵卫。狮荔。。
如何編寫
Hello World
在 <body></body> 中放入如下代碼
<!--first JS-->
<script>
document.write("Hello World");
</script>
字符串輸出
在 document.write("Here is the string for output.") 中的字符串是 HTML 流介粘，即可包括 <br/> 等 HTML 標(biāo)簽
注意：
- 在
document.write()中殖氏，換行應(yīng)該通過在字符串中用<br/>輸出；輸出轉(zhuǎn)義字符\n在這里無法起到換行的效果姻采；在- 在
alert()中雅采，換行字符則使用\n
變量定義
- JS 中使用
var VariableName = Value來把值 Value 賦予變量 VariableName - 值有類型，變量則不需要事先規(guī)定類型
- JS 中慨亲，變量作用域只有 2 個(gè)空間：函數(shù)內(nèi)部空間婚瓜，全局空間
<!--variable setting-->
<script>
var HW;
HW = "Hello World";
document.write(HW);
//same effect as 'first JS'
</script>
判斷
if-else statement
類似 C/C++
if (expr1){
//do something
}
else if (expr2){
//do something
}
else{
//do something
}
示例如下
<script>
var age = 20;
var ADULT = 18;
var teenage = 12;
document.write("Your age is " + age + ".");
if (age >= ADULT){
alert("Adult.");
}
else if (age >= teenage){
alert("Teenage.");
}
else{
alert("Children.")
}
//page message: "Your age is 20."
//alert message: "Adult."
</script>
關(guān)系運(yùn)算符（三元運(yùn)算符）
<expr>?<v1>:<v2>
//the same effect as:
//if (<expr>)
//{v1}
//else
//{v2}
例如，這這段代碼
max = (a > b)?a:b;
與這段代碼效果一致
if (a > b)
{
max = a;
}
else
{
max = b;
}
case-switch statment
類似 C/C++
switch(VariableName){
case value1:
//code block 1
break; //otherwise the code below will run.
case value2:
//code block 2
break; //otherwise the code below will run.
default:
//code block 3
}
邏輯運(yùn)算符
- and:
&& - or:
|| - not:
!
循環(huán)
while loop
類似 C/C++
while(expr1){
//while expr1 == true, do something
}
do-while loop
類似 C/C++
do{
//do something
//if expr1 == true, loop; else, break
}while(expr1)
for loop
類似 C/C++
for (init; condition; step){
//do something
}
例如
for (i = 0; i < 5; i++){
document.write(i);
}
//print 01234
break
控制效果與 C/C++ 一致
contuine
控制效果與 C/C++ 一致
函數(shù)
定義方式
function fun_para_0(){
document.write('function without any parameters.');
}
function fun_para_1(a){
return (a + 10);
}
function fun_para_2(n1, n2){
document.write(n1 + n2);
}
fun_para_0();//function without any parameters.
document.write(fun_para_1(15));//25
fun_para_2(1, 2);//3
函數(shù)變量
var f = Function("x", "y", "return x*y");
//seems same effect as
//
//function f(x, y){return x*y;}
//
//may be useful in advanced applications one day, use function as variable
重復(fù)定義與調(diào)用
后面的函數(shù)定義將覆蓋之前的函數(shù)定義：意思是無論你定義+調(diào)用多少次函數(shù) myf1刑棵，總之所有對(duì) myf1 的調(diào)用都將以最后一次對(duì)該函數(shù)的定義為準(zhǔn)巴刻。例如如下的 HTML 代碼配合如下的 JS 代碼，輸出的效果如圖所示：
HTML 代碼：
<html>
<head>
<title>js03</title>
</head>
<body>
<p> hello js03 </p>
<script src="run.js"></script>
<script>
function my_func(){
document.write(1);
}
my_func()
document.write("<br>");
function my_func(){
document.write(2);
}
my_func()
</script>
</body>
</html>
JS 代碼：
function myf1()
{
var i = 7;
while (i >= 0)
{
document.write("This is number " + i + ".<br/>");
i--;
}
}
myf1();
document.write("------when overridden------<br/>");
function myf1()
{
document.write("Hello world! This is js03.");
}
myf1();
document.write("<br/><br/>THE END.");
效果圖：
JS 中重復(fù)定義函數(shù)
數(shù)組
定義方式
var a = new Array();// way 1
var b = new Array(size);// way 2
var c = new Array(digit_1, digit_2, ..., digit_n);// way 3; if only one parameter, the sentence will be treated as way 2
var d = [digit_1, digit_2, ..., digit_n]; // way 4
數(shù)組長度
var ar = new Array(100);
document.write(ar.length); // print 100
尾部添加元素
var ar = new Array(size);
ar[ar.length] = Elem0;
``
> 以字符串形式輸出數(shù)組的 4 種方式
```JS
var ar = ['W', 'H', 'O'];
alert(ar); //way 0
alert(ar.toString());//way 1. same effect as way 0
alert(ar.valueOf());//way 2. same effect as way 0
alert(ar.join(char));//use char to connect each element of the array
堆棧操作
var ar = new Array();
var count = ar.push(item0, item1, item2); //item0 is on the bottom; count == 3
var topItem = ar.pop(); //topItem == item2
隊(duì)列操作
var ar = new Array();
var count = ar.push(item0, item1, item2); //item0 is on the bottom; count == 3
var topItem = ar.shift(); //topItem == item0
排序
按字符串順序蛉签，從小到大排序
var values = ['hello', 'gello', 'hellp'];
values.sort();
alert(values); // gello, hello ,hellp; if values == [0,1, 5, 10, 15], here is: 0, 1, 10, 15, 5
按輸入順序反向輸出
var values = ['hello', 'gello', 'hellp'];
values.reverse();
alert(values); // hellp, gello ,hello
連接數(shù)組
var values = ['k','i','s','s'];
var obj = ['y', 'o', 'u'];
var hello = values.concat(obj);
alert(hello);//k,i,s,s,y,o,u
數(shù)組切片
左閉右開
var values = ['k','i','s','s'];
var hello = values.slice(1, 4);
alert(hello);//i, s, s
splice(開始位置, 刪除個(gè)數(shù), 插入元素0, 插入元素1, ...)
刪除
var values = ['k','i','s','s'];
values.splice(0, 2);
alert(values);//s, s
插入
var values = ['k','i','s','s'];
values.splice(values.length, 'you');
alert(values);//k,i,s,s,you
替換
var values = ['k','i','s','s'];
values.splice(1, 2, 'a', 'i');
alert(values);//k,a,i,s
對(duì)象
定義對(duì)象
var obj1 = new Object();//way1
var obj2 = {x:1, y:2, z:3}//way2
刪除對(duì)象屬性
delete obj2.x;
document.write(obj2.x)//undefined
或者
obj2.x = null;
document.write(obj2.x)//null
遍歷對(duì)象屬性
obj = {name:"Potter", age: 14, gender: "male"};
for (var x in obj){
document(obj[x] + "<br>")胡陪；//random access in object
}
//print:
//Potter
//14
//male
構(gòu)造函數(shù)
- 不直接制造對(duì)象
- 用 this 來指代構(gòu)造出的對(duì)象，用于定義成員
- 沒有 return
function ClassName(para_1, para_2, ...){
this.attrib_1 = para_1;
this.attrib_2 = para_2;
//...
this.attrib_n = function(){
//use this.attrib_1, ..., this.attrib_i, otherwise this.atrrib_n returns a value which doesn't change when this.attrib_1, ..., this.attrib_i change.
//For example, it will keep the value counted using para_1, ..., para_i.
};
//etc.
}
var obj = new ClassName(p1, p2, ...);
注意構(gòu)造函數(shù)內(nèi)部的方法應(yīng)使用函數(shù)屬性碍舍，而非參數(shù)柠座。否則內(nèi)部方法導(dǎo)出的值不隨著屬性的改變而改變∑穑考慮如下兩段代碼的輸出差異：
如下代碼輸出 50, 100：
function Rect(w, h){
this.width = w;
this.height = h;
this.area = function(){
return this.width * this.height;
};
}
var r0 = new Rect(5, 10);
alert(r0.area());
r0.width = 10;
alert(r0.area());
如下代碼輸出 50, 50：
function Rect(w, h){
this.width = w;
this.height = h;
this.area = function(){
return w * h;
};
}
var r0 = new Rect(5, 10);
alert(r0.area());
r0.width = 10;
alert(r0.area());
原型對(duì)象
使用 prototype 可為對(duì)象原型（而非實(shí)例 instance）增加屬性妈经，例如
function Person(){} //構(gòu)造了一個(gè)空對(duì)象
Person.prototype.name = "Default Name" //此后，所有 Person 對(duì)象均有 1 個(gè)新屬性捧书，屬性名 name吹泡，初始值 "Default Name"
Person.prototype.gender = "Female" //此后，所有 Person 對(duì)象均有 1 個(gè)新屬性经瓷，屬性名 gender荞胡，初始值 "Female"
var person1 = new Person();//person1.name == "Default Name", person1.gender = "Female"
var person2 = new Person();//person2.name == "Default Name", person2.gender = "Female"
person1.name = "Harry Potter"; // person1.name == "Harry Potter"; 不影響 person2
Person.prototype.gender = "Male";//此后，person1.gender == "Male"了嚎，person2.gender == "Male"
Person.prototype.age = 14; //此后，person1 增加了 1 個(gè)屬性 age廊营，值為 14歪泳；person2 也有同樣的效果
注意一個(gè)問題：使用原型后，在實(shí)例為原型設(shè)定的屬性賦值之前露筒，所有實(shí)例的屬性是指向同一原型的呐伞。例如
function Person(){}
Person.prototype = {
name = "Default Name";
fruit = ["apple", "pear", "peach"];
}
var p1 = new Person();//p1.fruit == ["apple", "pear", "peach"]; p1.fruit 指向 Person.prototype.fruit
var p2 = new Person();//p2.fruit == ["apple", "pear", "peach"]; p2.fruit 指向 Person.prototype.fruit
p1.fruit.push("banana"); //此后, p1.fruit 與 p2.fruit 內(nèi)容一致，均為 ["apple", "pear", "peach", "banana"];
結(jié)合原型與構(gòu)造函數(shù)慎式，我們可以既有共享部分（使用 prototype）伶氢，又有單獨(dú)部分（使用關(guān)鍵字 this）：
function Person(){
this.name = "Default Name";
this.fruit = ["apple", "pear", "peach"];
}
Person.prototype = {
gender = "Male";
age = 14;
sayName = function(){
alert(this.name);
}
}
所有對(duì)象都是全局對(duì)象 window 的成員
- 瀏覽器的全局對(duì)象是 window趟径，所有的「全局變量」都是 window 的成員
-
document是全局對(duì)象 window 的成員，表示瀏覽器窗口的 HTML 頁面癣防，頁面上的元素都是document的成員
JS 加載方式
- 在
<script></script>中嵌入代碼 - 在
<script>標(biāo)簽的src屬性中指明 JS 對(duì)應(yīng) URL - 某個(gè) HTML 標(biāo)簽的事件處理器中指明
- 一些特殊的事件處理器如
- 普通標(biāo)簽：onMouseOver, onMouseOut, onMouseClick, onMouseDoubleClick
- body：onLoad, onUnload
- 對(duì)話框：alert(), prompt(), confirm()
-
alert()：單一提示對(duì)話框 -
prompt()：對(duì)話框提示輸入 1 個(gè)值- 例如：
var name = prompt("Input your name: ");
- 例如：
-
confirm()：對(duì)話框提示「是/否」蜗巧，返回 1 或 0- 例如：
if (confirm("Are you kidding?")) { alert("Ouch!");} else {alert("Thank you.");}
- 例如：
-
- 一些特殊的事件處理器如
