web基礎-JavaScript
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、錯誤查看方式：
註意：單行註釋//多行註釋/* */;語句由表達式、關鍵字、運算符組成；大小寫敏感；分號結束
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:純文本的表達式，表示某種匹配模式 在不同的語言環境下，執行後者使用正則表達式，實現文本的各種處理
eplace(原字符，新字符);
match()--得到匹配的結果 用數組存
search()--得到匹配的下標 可以判斷是否有敏感字符
匹配模式：g--global 全局
m--multilin 多行
i--ignorance 忽略大小寫
實際應用：str1=str1.replace(/js/gi,"*") //全局替換 忽略大小寫
str1=str1.replace(/\d/g,"*") //\d表示一個數字如果表示1個或多個數字則用/\d+/
正則表達式的應用分為兩類：
一類：和String對象的三個方法結合使用，實現對String的操作
二類：正則表達式對象
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