web基礎-JavaScript

標籤：xxx   先行編譯   遍曆   流程   ber   表達   rip   進階   c語言   

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　JavaScript
　　JS為網頁添加功能：
　　　　1、頁面的動態效果：輸入的驗證、頁面元素的動態顯示等
　　　　　JavaScript寫在html頁面上，由瀏覽器來運行
　　　　2、伺服器的互動：資料的交換--jsp、ajax
　　　　　jquery--封裝好js方法
一、概述
　　1、什麼是Javascript?
　　　　　　網頁編程技術，用來向HTML頁面添加互動行為
　　　　　　JS是一種基於對象和事件驅動的解釋性指令碼語言，具有與java和C語言相類似的文法
　　　　　　特點：直接嵌入HTML頁面；由瀏覽器解釋執行代碼，不進行先行編譯
　　　　　　功能：用於用戶端資料的計算
　　　　　　　　　用戶端表單的合法驗證
　　　　　　　　　瀏覽器事件的觸發
　　　　　　　　　網頁特殊顯示效果製作
　　2、發展史
　　　　　　JavaScript正是名稱是ECMAScript,此標準由ECMA組織發展和維護
　　　　　　ECMA-262是正式的JavaScript
　　　　　　此標準基於JavaScript(Netscape)和JScript(Microsoft)
　　　　　　-網景公司在Netscape2.0首先推出了JavaScript
　　　　　　-微軟公司在IE3.0開始提供對用戶端JavaScript的支援，並取名為JScript
二、基礎文法
　　1、寫法：
　　　　<1>在元素內部和事件綁定在一起<input type="button" value="按鈕" onclick="alert(‘hello java‘)">
　　　　<2>在head標籤中封裝在<script language="javascript"><script>中，加語言是告知瀏覽器 如果不寫則使用瀏覽器預設設定的方式
　　　　<3>封裝在JS檔案中 調用時<script language="javascript" src="MyScript.js"><script> 註：W3C推薦使用type=text/javascrpt
　　2、錯誤查看方式：FireFox錯誤控制台
　　　　注意：單行注釋//多行注釋/* */;語句由運算式、關鍵字、運算子組成；大小寫敏感；分號結束
　　3、變數
　　　　<1>變數的聲明：var x=0;var y="hello";var z="true" 變數在聲明時不確定資料類型，賦值時確定資料類型 js是一種弱類型的程式設計語言
　　4、資料類型
　　　　<1>基本類型:number/String/Boolean
　　　　　　　　　　String:由Unnicode字元、數字、標點組成的序列
　　　　　　　　　　由單引號或雙引號括起--兩種都可以使用，但如果外層是雙引號，內層就用單引號因為便於區分
　　　　　　　　　　特殊字元需要轉義符\，如\n,\\,\‘,\"
　　　　　　　　　　怎麼表示漢字的範圍只能是中文則必須用Unicode：[\u4e00-\u9fa5]
　　　　　　　　　　Number:不區分整型和浮點型數值
　　　　　　　　　　所有的數字都採用64位浮點格式儲存，類似於double格式
　　　　　　　　a、整型
　　　　　　　　　　　　10進位的整數由數位序列組成
　　　　　　　　　　　　16進位資料前面加上0X，八進位前面加0
　　　　　　　　b、浮點型
　　　　　　　　　　　　使用小數點記錄資料:3.4
　　　　　　　　　　　　使用科學計數法記錄資料：4.3e23
　　　　　　　　C、boolean：多用於控制語句
　　　　　　資料類型的轉換：
　　　　　　　　　　隱式轉換：直接轉--預設規則
　　　　　　　　　　規則：Number+String=String
　　　　　　　　　　　　　Number+Boolan=String true變1 false變2 運算
　　　　　　　　　　　　　Boolean+String=String true/false轉變為字串類型的true/false
　　　　　　　　　　　　　Boolean+Boolean=Number 值為數字0/1
　　　　　　　　　　顯式轉換：利用轉換的函數方法--當有確定的計算要求
　　　　　　　　　　規則：a、toString
　　　　　　　　　　　　　b、parseInt()
　　　　　　　　　　　　　c、parseFloat()
　　　　　　　　　　　　　　 預設從控制台輸入的資料類型為字串類型
　　　　　　　　　　　　　d、isNaN()--判斷是不是一個數字 很常用
　　　　　　　　　　typeof:判斷資料的類型
　　　　<2>特殊類型:Null--空/Undefine--未定義
　　　　<3>複雜類型
　　5、運算子:算術、邏輯、關係...
　　　　<1>關係運算子 注意===嚴格相等和==的區別
　　　　　　　　　　　　===是指值和類型都相等
　　6、流程式控制制：
三、常用內建對象
　　　什麼是js對象？
　　　　　　　　js是一種基於對象的語言
　　　　　　　　對象是js中最重要的元素
　　　　　　　　js中包含多種對象：內建對象、自訂對象、瀏覽器對象、HTML DOM對象、Active對象
　　1、簡單資料對象
　　　　　　String：
　　　　　　　　<1>建立字串對象：var str1="hello world";var str2=new String("hello world");
　　　　　　　　<2>String對象的屬性：length alert(str1.length);
　　　　　　　　<3>String對象的方法：
　　　　　　　　　　　　toLowerCase()/toUpperCase() 大小寫轉換
　　　　　　　　　　　　indexOf()/lastIndexOf() 找某個子字元的位置--從前往後找/找某個字元的位置--從後往前找
　　　　　　　　　　　　subString(star,end) 截取字串,不含end本身位置
　　　　　　　　　　　　charAt(index) 返回指定下標的字串
　　　　　　　　　　　　charCodeAt(index) 返回字串unicode編碼
　　　　　　　　　　　　replace(原字元，新字元) 只能替換一次
　　　　　　　　　　　　split() 拆分字串 返回一個數組
　　　　　　　　　　　　　操作：類比過濾敏感字元

　　　　　　　　　　　　function replaceString(){　　　　　　　　　　　　　　　　　　//先擷取字串　　　　　　　　　　　　var str1=document.getElementById("txtString").value    　　　　　　　　　　　　var index=str1.indexOf("js");//設定初始值　　　　　　　　　　　　while(index>-1){//如果有敏感字元　　　　　　　　　　　　　　　　str1=str1.replace("js","*");//找到了將敏感字元替換掉　　　　　　　　　　　　　　　　index=str1.indexOf("js");//在新的字串中繼續找是否存在有敏感字元js,相當於迭代操作    　　　　　　　　　　　　　　}　　　　　　　　　　　　document.getElementById("txtString").value=str1    　　　　　　　　　　　　}

 

　　　　　　　　　　　　過濾敏感字元的方法：<input type="text" onblur="replaceString()" id="txtString" />
　　　　　　　Number：基本類型資料的封裝對象
　　　　　　　　　　　　方法：toString():數值轉換為字串
　　　　　　　　　　　　tofixed():數值轉換為字串，參數為指定保留的小數位元,四捨五入,不滿足保留位元，補0
　　　　　　　　　　　　如var data=53.2-->data.toFixed(2)-->53.20 常用於小數的格式化
　　　　　　　Boolean：
　　2、組合對象
　　　　　　Array：1列多個資料 js中沒有集合只有數組 不需要聲明初始長度直接用
　　　　　　　　<1>寫法：
　　　　　　　　　　方式一 ar arr=new Array();//先聲明 未初始化
　　　　　　　　　　arr[0]="marry" arr[1]=true
　　　　　　　　　　方式二 var arr=new Array("mary",10,true)聲明+初始化
　　　　　　　　　　方式三 var arr=["mary",10,true] 簡寫 省略new Array
　　　　　　　　　　<2>屬性:length擷取元素個數/數組長度
　　　　　　　　<3>數組方法：
　　　　　　　　　　arr.toString()---用於遍曆數組，輸出數組 如10,20,21..預設是用逗號隔開的 注意是無參的
　　　　　　　　　　arr.join("*") ---指定分割符*輸出數組10*20*30
　　　　　　　　　　arr.concat(value1,value2,...) 拼接數組 在原數組後面串連 得到新數組 原數組值不發生改變
　　　　　　　　　　arr.slice(start,end)--擷取子數組/截取數組 不含end位置的數組
　　　　　　　　　　arr.reverse()--數組的反轉
　　　　　　　　　　arr.sort()--排序 預設是按字元順序排序
　　　　　　　　　　　　如果要實現按數值排序則要自訂個方法：
　　　　　　　　　　　　　　function arrayFunc(a,b){
　　　　　　　　　　　　　　　　return a-b;
　　　　　　　　　　　　　　　}
　　　　　　　　　　array.sort(arrayFunc)將方法對象當做參數傳入
　　　　　　Math:數學計算相關的--不用建立對象 直接使用 類似於靜態對象
　　　　　　　　<1>常用屬性：都是數學常數
　　　　　　　　　　　　　　Math.E--自然數
　　　　　　　　　　　　　　Math.PI--圓周率
　　　　　　　　　　　　　　Math.LN2(in2)
　　　　　　　　　　　　　　Math.LN10(in10)...
　　　　　　　　<2>方法（瞭解）
　　　　　　　　　　　　　　三角函數 Math.sin(x) Math.cos(x)...
　　　　　　　　　　　　　　反三角函數 Math.asin(x) Math.acos(x)..
　　　　　　　　　　　　　　計算函數 Math.sqrt(x) Math.log(x)..
　　　　　　　　　　　　　　數值比較函數 Math.abs(x) Math.max(x,yxz..)...
　　　　　　　　　　　　　　注意其中的：Math.random()--0<=Math.random()<1 小數
　　　　　　　　　　　　　　Math.floor()--返回一個小於或等於指定數位整數，也就是說往下取
　　　　　　　　　　　　　　Math.ceil()--正好相反 往上取整
　　　　　　　　　　　　　　案列：求3-9之間的隨機整數 var s=(Math.random())*6+3--> Math.floor(s)
　　　　　　　　　　　　　　可以應用在網頁上某也圖片的隨機出現的位置，座標產生隨機數
　　　　　　Date:對象
　　　　　　　　<1>建立對象：
　　　　　　　　　　　　　　var d=new Date();//當前日期和時間
　　　　　　　　　　　　　　var d=new Date(2013/01/01 12:12:12);//固定日期和時間
　　　　　　　　<2>方 法：
　　　　　　　　　　　　分類：getxxx
　　　　　　　　　　　　　　　　　getDay/getDate/getMonth/getFullYear...
　　　　　　　　　　　　　　　setxxx
　　　　　　　　　　　　　　　　　setDay/setDate...
　　　　　　　　　　　　　　　toxxx--得到字串格式的表示方法 常用於頁面顯示
　　　　　　　　　　　　　　　　　　toString
　　3、進階對象：
　　　　　　Function:函數（方法）是一組可以隨時隨地的啟動並執行語句 function對象可以表示開發人員的任何函數 函數實際上是功能完整的對象
　　　　　　定義：略
　　　　　　調用：
　　　　　　Arguments對象：
　　　　　　　　a、js中沒有傳統意義上的重載（方法名相同，參數列表不同），如果方法名稱相同，則以最後一次定義為標準
　　　　　　　　b、js如果要實作類別似重載的效果使用關鍵字arguments 代表當前被傳入的參數，組成了一個數組
　　　　　　　　　　　　function m(){alert(arguments[0])}
　　

　　　　//方法的重載：　　　　　　　　function testMethod(){　　　　　　　　if(arguments.length==1){　　　　　　　　var data=arguments[0];　　　　　　　　　　alert(data*data);　　　　　　　　　　}　　　　　　　　else if(arguments.length==2){　　　　　　　　　　alert(arguments[0]+arguments[1]);　　　　　　　　}　　　　　　}

 

　　　　　　　　建立方法:
　　　　　　　　　　方式一：function關鍵字function s(參數){方法體}--推薦
　　　　　　　　　　　　用於跟功能相關的方法
　　　　　　　　　　方式二: var f =new Function("a","b","alert(a+b);");--不推薦使用
　　　　　　　　　　　　最後一個參數是方法體，前面的其他參數是是方法的參數
　　　　　　　　　　存在的需求：有些方法不需要顯式存在，只是為其他方法單獨使用
　

　　　　　　　function arraySort(){　　　　　　　　　　var array=[12,34,56,11,7];　　　　　　　　　　var f=new Function("a","b","return a-b;")//專門用於按數值排序所用　　　　　　　　　　　　　　array.sort(f);　　　　　　　　　　　　　　alert(array.toString());　　　　　　　　}

 

　　　　　　　　　

　　　　　　　　//方式三：

　　　　　　　　var f =new Function(a,b){　　　　　　　　return a-b;//使用匿名函數　　　　　　　　　　}

 

　　　　　　　　全域函數：所有的JS對象都可以使用
　　　　　　　　　　　parseInt/parseFloat/isNaN...
　　　　　　　　　　　encodeURI():把字串作為URI進行編碼
　　　　　　　　　　　decodeURI():對encodeURI()函數編碼過的URI進行解碼
　　　　　　　　　　　eval:計算 var s1="1+3*5";var r =eval(s1);alert(r);//16
　　　　　　　　　　　　　　計算某個字串，以得到結果;或者執行其中的js代碼

 

　　　　　　RegExp:純文字的運算式，表示某種匹配模式 在不同的語言環境下，執行後者使用Regex，實現文本的各種處理
　　　　　　　　　　　　eplace(原字元，新字元);
　　　　　　　　　　　　match()--得到匹配的結果 用數組存
　　　　　　　　　　　　search()--得到匹配的下標 可以判斷是否有敏感字元
　　　　　　　　　　　　匹配模式：g--global 全域
　　　　　　　　　　　　m--multilin 多行
　　　　　　　　　　　　i--ignorance 忽略大小寫
　　　　　　　　　　實際應用：str1=str1.replace(/js/gi,"*") //全域替換 忽略大小寫
　　　　　　　　　　　　　str1=str1.replace(/\d/g,"*") //\d表示一個數字如果表示1個或多個數字則用/\d+/
　　　　　　　　　　Regex的應用分為兩類：
　　　　　　　　　　　　一類：和String對象的三個方法結合使用，實現對String的操作

　　　　　　　　　　　　二類：Regex對象
　　　　　　　　　　　　　　　　var r =/\d{6}/ --6位小數
　　　　　　　　　　　　　　　　var s=/^[a-z]{3,5}$/ 意思是a-z 3-5位 從開始到結束進行匹配
　　　　　　　　　　　　　　　　　　r.test(String)--true/false 意思是指定範圍是否與錄入的資料匹配 --特別適合輸入驗證
　　　　　　　　　　　　　　　　　　驗證漢字：/^[\u4e00-\u9fa5]{3}$/ 3個漢字

四、應用(重要)
　　　DHML--動態效果 比如瀏覽器瀏覽資訊、螢幕資訊等
　　　將整個視窗均實現對象化，結構如下:　　
　　　　　　　　　　　　　　window 父物件
　　　　　　　　　　　　　　document---html
　　　　　　　　　　　　　　screen
　　　　　　　　　　　　　　history
　　　　　　　　　　　　　　location
　　　　　　　　　　　　　　event
　　　　　　　　　　　　　　navigator
　　1、window對象：
　　　　　　<1>開啟對話方塊視窗：alert();是一種阻塞線程的方法 window.alert("你好");
　　　　　　　　　　window.confirm("請確認")--確認詢問視窗 資訊氣球--返回boolean
　　　　　　　　　　瞭解window.prompt("請輸入：")--彈出一個輸入的文字框 很少使用 無法對文字框的樣式修改、控制
　　　　　　<2>開啟新視窗：一個參數 window.open(url);--window.open("http://www.baidu.com");重複開啟
　　　　　　　　　　兩個參數 window.open(url,"windowName")給視窗取了名字 再次點擊就不會重複開啟了
　　　　　　　　　　三個參數 window.open(url,"windowName",conf)最後一個參數為瀏覽器外觀設定 如寬高等...

 

web基礎-JavaScript