Web前端之Javascript詳解20180330
一、javascript概述
javascript是基於對象和事件的腳本語言。
特點：
1.安全性(不允許直接訪問本地硬盤(因為是被遠程的瀏覽器解釋))，它可以做的就是信息的動態交互
2.跨平臺性(只要可以解釋JS的瀏覽器都可以執行，和平臺(系統)無關),java被虛擬機解析所以也不需要依賴平臺。
二、javascript與Java不同
1.JS是Netscape公司的產品，Java早期是SUN公司的產品
2.JS是基於對象(也就說對象都已經封裝好了)和事件驅動的，Java是面向對象
3.JS只需解釋就可以執行(js在客戶端,只要可以解釋JS的瀏覽器都可以執行)，Java需要先編譯成字節碼文件，再執行
4.JS是弱類型(非嚴謹的,甚至不寫分號都可以,規範來說還是要寫)，Java是強類型(嚴謹的)。
比如JAVA定義了8種數據類型(5種基本,3種引用)，而js根本就沒有數據類型
對於註釋，js也是使用/**/和//
三、javascript與html的結合方式
想要將其他代碼融入到html中，都是以標簽的形式。script標簽可以存放在頁面的任意位置，無論是在head裏，body裏，還是在head body之間，或者在head body之外都是可以的。
1.js代碼存放在標簽對<script type="text/javascript>..</script>中
2.使用script標簽的src屬性引入一個js文件。(方便後期維護，擴展，獨立出來提高了復用與封裝性，方便多個頁面引用)
例：<script src="test.js" type="text/javascript"></script>
註：規範中script標簽中必須加入type屬性。
四、語法
alert("123");//這個是win系統提供的，可以直接放在js中，效果是彈出一個對話框。
一門程序設計語言的基本要素有：變量，語句，函數，數據結構(數組等)，類似高級語言還有，操作數據對象(io)，操作網絡對象(socket)等等
1.變量
定義變量使用關鍵字var，弱類型即是不用指定具體的數據類型
例：
var x=3;
x="abc";//或者x=‘abc‘也可以，表示js裏面都是字符串，沒有字符的概念，所以單雙引號都可以
alert(x);//結果顯示abc
var y;
alert(y);//結果顯示undefined
註意，js中特殊的常量值：undefined，當變量沒有初始化就被使用，該變量值就是undefined，類似Java中null。
註意，由於js裏面沒有類型的概念，所以在運算的時候不涉及到類型轉換，比如:3250/1000*1000，js的結果就是3250，而不是3000。
2.語句(與Java語句格式相同)
1).判斷結果(if語句)
註意：var x=3;
if(x==4)//可以進行比較運算
if(x=4)//可以進行賦值運算，而且可以同樣進行判斷，不報錯
因為在js中0就是false，非0就是true(通常用1表示)。也就是空就是假,非空就是真
所以if(x==4)結果是true;
2).選擇結果(switch語句)
註意，js的case後面，可以是字符串
3).循環結構(while語句，do..while語句，for語句)。
例：
for(var x=0;x<3;x++)
{
alert("x="+x);
}
var sum="";
for(var x=1;x<=4;x++)
{
if(x==4)
sum=sum+"x="+x;//連接字符串
else
sum=sum+"x="+x+",";
}
alert(sum);
//寫到頁面中去的方法：
document.write("<font color=‘red‘>"+sum+"</font>");//html中的部分要用引號包括，js中的不用
註意，不同的是，沒有了具體數據類型的限制，使用時要註意。
註意，js出錯時，會在網頁的狀態欄裏面出現一個黃色的感嘆號，點擊後會有提示在哪裏出錯了。
註意，js在表達式中，邏輯與使用&&
用表格形式顯示一個99乘法表：
table,table td{
border: #0000ff double 1px;
width:600px;
}
document.write("<table>");
for(var x=1; x<=9; x++){
document.write("<tr>");
for(var y=1; y<=x; y++){
document.write("<td>"+y+"*"+x+"="+y*x+"</td>");
}
document.write("</tr>");
}
document.write("</table>");
3.數組
方便操作多元素的容器，可以對其中的元素進行編號。
特點：可以存任意元素，長度是可變的
格式：
var arr =new Array();//new完就可以隨時往這個數組裏面填充元素。
arr[0] = "hello";
arr[1] = 123;
var arr =[4,1,6,8];
arr[6]=100;//這樣會改變數組的長度，長度變為7，中間沒有定義的部分為undefined
var arr = {‘hello‘,123,true,"abc"};
可以存放任意類型的數據，但是規範上最好還是同類型的，方便操作。
通過遍歷即可對數組進行基本操作
for(var x=0;x<arr.length;x++)
{
alert(arr[x]);
}
4.函數
由於沒有數據類型，所以不涉及到返回類型，以及參數類型。
1).一般函數
格式(一般函數定義方式)：
function 函數名(形式參數...)
{
執行語句;
(return 返回值;)
}
代碼：
function add(x,y){
return x+y;
}
var sum = add(4,5);
註意，js也有全局變量和局部變量，這方面的使用也和java的一樣。
註意，js沒有重載形式，定義兩個參數，傳一個也不會有錯，如下：
fuction show(x,y)
{
alert(x+‘,‘+y);
}
show(3);//結果顯示3,undefined
同時，正因為如此，當定義的傳參少了，但是傳入的更多時，也不會有錯，還會接收到，接收到一個名為arguments的數組中，(這個數組每個函數都有，不需要手動去定義)
例：
fuction show()
{
for(var x=0;x<arguments.length;x++)
alert(arguments[x]);
}
show(3,4,5,7);//結果顯示3,4,5,7
雖然可以這麽做，但是從規範上來說，需要哪些都定義在參數上，這樣閱讀性才好。
註意，函數本身在js中就是一個對象，函數名就是這個對象的名字，函數名就指向了這個函數對象，所以：
var x=show;//這個不會調用show方法，而是表示x指向show所指向的一個函數對象
alert(x);//這樣就會把整個函數內容打印出來
2).動態函數
js中內置了一個函數對象Function
所以定義函數，可以類似定義對象的形式：
var 函數名 = new Function("形參","形參",...,"函數內部代碼");
例：
var show = new Function("x","y","var sum=x+y;return sum;");
var sum = show(5,2);
特點：
定義的時候，參數和函數體都可以作為變量向內傳遞。
即，動態函數，參數以及函數體都可以通過參數進行傳遞，可以動態指定。
動態函數，相對少見一些。
3).匿名函數
定義與使用格式：
var 變量名 = function()
{
}
變量名();
js還是基於事件驅動的，所以匿名函數往往可以作為一個事件的處理方式而存在。所以說在定義事件屬性的行為時較為常用。
例：
窗口的數據一加載完畢會有一個onload事件，它可以直接等於一個匿名函數，這樣就可以通過匿名函數來處理這個事件。
即，
window.onload = function()
{//匿名函數就類似匿名對象一樣，所以可以賦值
alert("onload over");
}
這是一種簡化的寫法，也可以這麽寫：
fuction method()
{
alert("onload over");
}
window.onload = method;//不是返回值所有不能有括號，用對象賦值
5.對象
js中沒有class這類關鍵字，js是通過函數的形式創建對象出來。也就是說JS除了已經提供的內置對象(如document對象)外，也可以自定義對象
例：
function Person()
{//類似構造函數
alert("Person inti");
}
var p = new Person();//定義一個Person對象，此時構造函數Person()會被調用
p.name ="133";//定義(增加)Person對象的屬性
p.age =22;//定義成員變量
p.eat= function()
{//定義(增加)Person對象的行為，定義成員函數
alert("eat");
}
p.eat();//對象中函數被調用。
註意，構造函數裏也可以增加並初始化屬性：
function Person(name,age)
{//類似構造函數
this.name=name;
this.age=age;
}
var p= new Person("lisi",90);//實例化對象時傳入初始化值
alert(p.name);
alert(p["name"]);//這樣也可以，效果和前面一樣，這種方式的好處在於可以往p裏面傳遞參數
註意，對象即上面的p可以單獨出來封裝到一個js文件，其他頁面可以通過引用這個文件，就可以訪問該對象即p對象。這樣就可以實現一個js文件被多個頁面使用，消滅了重復性代碼。
註意，如果在引用js文件的頁面中，new了一個與js文件中對象所屬類一樣的對象，那麽這個對象只可以訪問到類中的屬性，而無法訪問到js中的對象，即便兩個對象名字一樣(就近原則)。
JS用於操作對象的語句：
1).with語句
格式：
with(對象)
{//這個區域內可以直接使用該對象的任意屬性和方法
}
應用：當調用一個對象中多個成員時，為了簡化調用，編碼"對象."這種格式的重復書寫。
或者說，用來確認某一對象所作用的範圍。
例：
function Person(name,age)
{//類似構造函數
this.name=name;
this.age=age;
}
var p= new Person("lisi",90);//實例化對象時傳入初始化值
with(p)
{
alert(name,age);
}
2).for(...in...)語句
用於遍歷對象或者數組
例：
遍歷對象：
function Person(name,age)
{//類似構造函數
this.name=name;
this.age=age;
}
var p= new Person("lisi",90);//實例化對象時傳入初始化值
for(s in p)
{
alert(s+":"+p[s]);//s是屬性名，p[s]就是對應的屬性值，由於p裏面沒有s屬性，所以不能使用stu.s
}
遍歷數組：
var arr={5,1,2,3};
for(x in arr)
{
alert(arr[x]);//x是數組的下標。
}
6.js內置對象(已有對象)
查看內置對象，可以查看js手冊。
比如object對象，new的時候傳入值也可以定義對象，只不過這種方式用的很少
1).String對象
String對象一般不用new來創建，直接var str=""這種形式創建即可，也就是說String對象可用字符串文字顯示創建。
至於該對象的屬性和方法可以查看手冊。
其中bold方法會給字符串加上b標簽,
fontcolor則給字符串在html中加上顏色，
link方法會把當前字符串變成一個超鏈接
substring方法取開始位和結束位，不包含結束位
substr方法，從開始位開始指定長度，長度比字符串長度長，則長度使用字符串長度
match方法，正則表達式中會用到
代碼：
var str ="abcde";
var y=str.bold();
document.write(y);
var z=str.fontcolor("red");
document.write(z);
alert(z);
var a=str.link("http://www.baidu.com");
document.write(a);
var i=str.substring(2,4);//結果cd，不包含第四個
var j=str.substr(2,4);//結果cde，只有三個那麽長，所以長度變為3，如果夠的話那就cdef
註意獲取字符串長度時，沒有方法，只有屬性
2).Math對象
是一個固有對象，提供基本數學函數和常數。
也就是說可以直接使用，可以使用.的形式來使用屬性和方法，
格式：
Math.[{屬性|方法}]
比如，
其中的random方法，用於獲取隨機數.
代碼：
var d =Math.random()*10+1;
3).Global對象
一些常用的方法會封裝在這個對象中，這個對象是一個固有對象，也就是可以直接使用，但是這種直接使用是不需要寫Global的，直接寫其內部的屬性和方法就行了。
比如，
其中的parseInt方法，當其參數裏的字符串沒有字符串時，會返回NaN,至於判斷這個返回值可以用其中的isNaN方法，
例：
parseInt("abc") //返回NaN
parseInt("12abc") //返回12
如上個的隨機數中就可以用這個方法取整
註意，parseInt還可以傳入基數參數，表示按照哪種進制進行解析，
例：
var num=parseInt("110",2);//結果num等於6
類似於parseInt還有把數字轉換為字符串的方法toString，不過該方法是固定方法(全局方法)不在global對象中，可以直接使用(每一個變量都有的方法)，
例：
var x=6;
var num =x.toString(2);//結果num=“110”，2是基數，註意不能直接寫成6.toString
//
4).Date對象
對象內的方法可以單獨獲取年月日，也可以直接使用對象，new返回的對象也是一串字符串。
例：
var d = new Date();
alert(d);//直接顯示日期信息
with(d)
{
var month=(getMouth()+1);
month = (mouth>9)?month;"0"+mount;//月份小於9的拼湊成兩位顯示
alert(getYear()+"年"+mouth+"月"+getDate()+"日 星期" +getDay());
}
5).所有內置對象都有的prototype屬性
返回對象類型原型的引用，也就是說返回對象的引用，這個屬性的用途在於，可以通過返回對象引用的形式，給該對象添加新的屬性和方法。
代碼：
function getMax()
{
var max = this[0];
for(var i=0;x<this.length;x++)
{
if(this[x]>max)
max=this[x];
}
return max;
}
Array.prototype.getZuiDa =getMax;//getMax為定義好的方法，這樣就給Array對象增加了新的方法，方法名為getZuiDa
var arr={1,23,8,9};
var x=arr.getZuiDa();//由於前面增加了新的方法，所以定義的數組對象都可以使用新增加的方法
alert(x);
arr.sort();//排序
for(y in arr)
{
alert(arr[y]);
}
Web前端之Javascript詳解20180330