javascript入門

javascript入門
JavaScript一、JavaScript概述1、JavaScript是什麼，有什麼作用？（瞭解）

*JavaScript是網際網路上最流行的指令碼語言。

*指令碼語言不能單獨使用，必須嵌入到其他語言中組合使用

*JavaScript不能單獨使用，必須和其他語言（HTML）結合使用

*瀏覽器解釋執行

*作用是：可以控制前端頁面的邏輯操作

例如：JS可以控制CSS的樣式；（一般）

JS可以對錶單項進行校正（重點）

JS可以對HTML元素進行動態控制（使用較多）

*特點：

安全性（沒有訪問系統檔案許可權，無法用來做木馬病毒）

跨平台性（瀏覽器有JS的解析器，只要有瀏覽器就能運行JS代碼，和平台無關）

      demo1.html                    <script type="text/javascript">var sum=0;// int sum=0;for(var i=1;i<=9;i++){// int i=1;sum+=i;alert(sum); //System.out.print(sum);}</script>                

2、 JavaScript和Java的關係（瞭解）

ECMAScript

*JavaScript和Java一點關係都沒有（雷鋒和雷峰塔）

*JavaScript和Java的區別：

>JavaScript代碼可以直接在瀏覽器執行，而Java必須先經過編譯才能執行

>JavaScript是弱類型語言，Java是強型別語言

強型別語言：要求變數的使用嚴格符合定義。（例如：變數聲明後都有一個固定的地區，int地區大小是32位）。編程時痛苦，調BUG時舒服

弱類型語言：不要求變數的使用嚴格符合定義。（例如：變數聲明後沒有一個固定的地區，任何類型的值都能放在該地區）。編程時舒服，調BUG時痛苦

<script> var sum = 0; for(var i = 1; i <= 100; i++) { sum += i; } alert(sum); </script>

二、JavaScript文法及使用(重點) 注釋

*單行注釋

//

Myeclipse快速鍵ctrl+shift+c

*多行注釋

/* */

Myeclipse快速鍵ctrl+shift+/

變數

*標示記憶體中的一塊空間，用於儲存資料，資料是可變的

*格式：

var 變數名= 變數值;

JavaScript中的變數聲明都用var關鍵字

變數值的資料類型（未經處理資料類型和引用資料類型）

>未經處理資料類型:

string 字串類型

“”和’’都表示字串

boolean 布爾類型

true,false

number 數字類型

整數和小數

null 空，表示參考型別的對象不存在

undefined 未定義

變數聲明未賦值時使用/對象的屬性未賦值時使用

註：變數就像一個盤子，什麼都能盛裝。

變數的類型可以用typeof()來判斷。例如:var str=”aa”;alert(typeof(str));//string

變數的大小寫是敏感的，yy和YY不是一個變數。

為什麼 typeof 運算子對於 null值會返回 "Object"。這實際上是JavaScript 最初實現中的一個錯誤，然後被ECMAScript 沿用了。現在，null被認為是對象的預留位置，從而解釋了這一矛盾，但從技術上來說，它仍然是原始值。

      demo1.html                    <script type="text/javascript">/* var 變數名=變數值;未經處理資料類型：string字串""  ''都表示字串boolean布爾類型true , falsenumber數字整數和小數null空，對象為空白（引用為空白）undefined未定義  變數沒有賦值就使用/使用 對象.屬性 的時候，屬性沒有賦值就使用//變數就是一個盤子，裝什麼東西都可以引用資料類型：typeof()  幫咱們判斷變數是什麼類型的變數名命名是大小寫敏感的（區分大小寫）*//* var str = "aa";var str2 = 'aa';var str3 = true;//falsevar str4 = 15;var str5 = 15.55;var date = null;var aa;str =15;str = true;str = "aa";alert(str);//aa 15 *//* var str = "aa";str =15;//number//str = true;//booleanvar ss;var obj= null;alert(typeof(obj)); *//* var sf="aa";alert(Sf); *//* 引用資料類型常用對象：String,Array,Date,Math,RegExpObject 所有對象的父物件*/var date = new Date();alert(date instanceof Object);</script>                

>引用資料類型（瞭解）

即對象

例如：var obj = new Object();

常用對象：

String,Array,Date,Math,RegExp

註：instanceof可以用來判斷對象是否屬於某類型。返回true和false .例如：

Var str = new String();

Alert(str instanceof String);//true

*兩種變數：

>全域變數

就是在<script>標籤中定義的變數，在整個頁面都有效

>局部變數

就是在函數體內定義的變數

      demo1.html                    <script type="text/javascript">/* 全域變數就是在script標籤中的變數，對整個頁面都有效局部變數就是在函數體中定義的變數*//* var str =10;for(var i=1;i<=3;i++){}alert(i);//4 *//* function aa(){var a=5;alert(a);} */var x = 4;function show(x){x = 8;}show(x);alert("x = "+x);/* A.8   B.4   C.undefined */</script>                

練習：如下代碼顯示X值是多少？ var x = 4; function show(x){ x = 8; } show(x); alert("x = "+x);

A.8 B.4 C.undefined

函數（方法）

*用於代碼封裝，提高複用性

*格式function 函數名(參數列表){

函數體;

return ;

}

*函數定義，關鍵字function

*定義參數列表時，不必使用var關鍵字，否則報錯

*如果沒有需要返回的參數，return可以不寫

*函數需要調用才能執行，和Java一樣。

*JavaScript不存在重載形式：

>每個JavaScript中，都存在一個數組arguments，用於儲存參數列表

思考：如下調用方法會列印輸出什麼效果？ function getSum(){ return 100; } var sum = getSum; alert(sum);

A.100 B.undefined C.function getSum(){return 100;}

*如果調用方法時忘記加()，那麼會把函數對象的引用傳給變數

      函數.html                    <script type="text/javascript">//用來做加法的方法  a b  a+b/* public int sum(int a,int b){return a+b;} *///JavaScript不定義傳回值的類型//javascript 方法不存在重載//因為在JavaScript方法中存在arguments隱藏對象（數組），就是用來擷取傳進來的參數列表的//JavaScript中如果調用方法不加括弧，那麼會把方法（對象）的引用傳出來/* function sum(a,b){alert(arguments.length);alert(arguments[0]);alert(arguments[1]);alert(arguments[2]);// alert(a);// alert(b);}sum(5,6,7); */function getSum(){return 100;}var sum = getSum;alert(sum);</script>            

*兩種擴充函數：

>動態函數（瞭解會用）

通過JS的內建對象Function來動態建立

格式： new Function(參數一,參數二);

參數一是函數形參列表

參數二是函數體

>匿名函數（較常用）

沒有名稱的函數，函數的簡化形式

格式：var str = function(參數列表){

函數體;

return;

};

      demo1.html                    <script type="text/javascript">/* 動態函數(使用比較少)Function 對象匿名函數*//* var par = "a,b,c";var par2 = "return a+b+c";var str =new Function(par,par2);alert(str(1,2,3)); */var str=function(a,b){return a+b;};alert(str(1,2));</script>                

運算子

算術運算子（常用）

+號除了運算外，可以作為串連符

-號除了運算外，可以作為轉換符

alert(true + 1); // 2

比較子（常用）

== 比較值

=== 又比較值和類型語句（流程式控制制語句）

      demo1.html                    <script type="text/javascript">/* 算術運算子+串連符-轉換符NaN意思是不是數字比較子==只是比較值，即使類型不同也沒關係===不僅比較值，也同時比較類型*//* var str=15;var str2="1";alert(str+str2);//151 *//* var str =15;var str2 = "1";alert(str-str2);//14 151 */ /* var str= 15;var str2="a";alert(str-str2);//NaN *//* var str=8;//alert(str==8);//true//alert(str=="8");//truealert(str===8);//truealert(str==="8");//false *//* var str = (8==8)?8:0;alert(str); */</script>                

流程式控制制語句

對程式運行流程式控制制的運算式

n判斷語句

IF

if(8 == num){

賦值的問題，需要注意。

}else{

}

0、-0、null、""、false、undefined或 NaN，為false

否則為true

和Java中一樣。

switch(n)

{

case 1:

執行代碼塊 1

break

case 2:

執行代碼塊 2

break

default:

如果n即不是1也不是2，則執行此代碼

}

練習：以下代碼輸出結果為： var a=15; if(a=15){ alert(15); }else{ alert(“else”); }

A.15 B.Else

n迴圈語句

For迴圈（較常用）

for(var i=0;i<=8;i++){

// 迴圈體

}

增強FOR迴圈（不靈活，使用少，但開發中會有使用）（瞭解會用，工作中自己進行嘗試即可）

for(變數in 對象){

// 迴圈體

}

*裡面的變數代表下標

*使用in關鍵字

*遍曆數組（或對象），裡面要用數組[下標]

* 例如：

Var s= new Array();

s[0]=1;

s[1]=2;

for(x in s){

alert(s[x]);

}

while(運算式){

// 迴圈體

}

      demo1.html                    <script type="text/javascript">/* 判斷語句IF0、-0、null、""、false、undefined 或 NaN，為false否則為true FOR迴圈var 99乘法表while do while增強for*//* function str(){return null;}var x=8;var aaaa=str();if(aaaa){alert(1);//1}else{alert("else");} *//* for(var i=0;i<3;i++){} *//* if(-0){alert(1);}else{alert("eeee");} */var i=new Array();i[0]=1;i[1]=2;for(x in i){alert(i[x]);}</script>                

對象

lString對象（瞭解會用）

* var str = "abc";

* var str = new String("abc");

* 屬性：length 字串的長度

* 方法

* 和java中String對象類似的方法（基本相同，需要練習）

* charAt(index) 返回指定位置的字元（常用）

* indexOf(searchvalue,fromindex) 檢索字串

* lastIndexOf() 從後向前的

* replace() 替換字串（較常用）

* substring(start,stop) 從哪開始，到哪結合（包含開始不包含結束）

* substr(start,length) 從哪開始，截取長度

      demo1.html                    <script type="text/javascript">/* String對象var s = new String("aaa");var s = "aaa";document.write();//會把值輸出到瀏覽器頁面上*//* var str ="abc";var str2 ="你好麼";document.write(str2.blink());document.write(str2);document.write(str.charAt(1)); */var str = "ABC";document.write(str.toLowerCase());</script>                

lArray對象（重要）

* js的數組

* var arr = [1,2,3];

*var arr = new Array();數組長度預設為0

* var arr = new Array(4); 數組長度是4

* var arr = new Array(1,2); 數組元素是1,2

* 數組的長度

* length

* 數組的長度是可變的

*數組元素可以是任意類型（注意）

* 方法

* concat() 連結數組或者元素都可以（較少）

* join(separator) 轉化成字串

* push() 向末尾添加一個元素，返回新的長度

      demo1.html                    <script type="text/javascript">/* Array對象var str = [1,2,3]; 長度是3，長度可變var str = new Array();長度預設是0，長度可變var str = new Array(5);長度預設是5，長度可變var str = new Array(1,2);長度是2，長度可變join(分隔字元)  預設是 push   就是把元素添加進數組末尾*//* var str=[1,2,3];var str2=[4,5,6];alert(str.concat(str2)); *//* var str2=[1,2,3];var str=str2.join();alert(str); */var str2=[1,2,3];var str=5;str2.push(str);alert(str2);//</script>                

lDate對象（比較常用）

* var date = new Date(); 當前的時間

* toLocaleString() 根據本地的日期格式轉化成字串（瞭解）

* getDate() 返回一個月中的某一天（瞭解）

* getMonth() 擷取月份（0-11）（瞭解）

* getFullYear() 擷取年（瞭解）

* getTime() 擷取毫秒數（比較重要）

* setTime() 通過毫秒數設定日期（比較重要）

同時也可以通過構造器設定new Date(毫秒數);

* Date.parse(datestring) 解析字串，返回毫秒數（重要的）

* 2015-4-29 解析不了

* 2015/4/29 是可以解析的

lMath對象（瞭解）

round(x) 四捨五入

random() 隨機產生0~1數字

      demo1.html                    <script type="text/javascript">/* Date對象var aa = new Date();*/var aa = new Date();// alert(aa.toLocaleDateString());/* alert(aa.getDate());alert(aa.getMonth());alert(aa.getFullYear()); *//* var long1 = aa.getTime();var long2=long1-(1000*60*60*24);aa.setTime(long2);alert(aa.toLocaleString()); */var bb = Date.parse("2015/5/21");//aa.setTime(bb);var cc = new Date(bb)alert(cc.toLocaleString());</script>                

lRegExp對象（重要）

*正則對象 正確的規則

* var reg = new RegExp("運算式"); （開發中基本不用）

* var reg = /^運算式$/ 直接量（開發中常用）

直接量中存在邊界，即^代表開始，$代表結束

* test(string) （經常使用）符合規則返回true，不符合返回false

例如：

if(reg.test("12345")){

//

}else{

//

}

      demo1.html                    <script type="text/javascript">/* RegExp對象var s = new RegExp("運算式");var s = /^運算式$/;test()*/var reg = /^\s*$/;//驗證空var checkText = "";alert(reg.test(checkText));</script>                

練習：判斷字串是否為空白 var msg=””; var reg = /^\s*$/; alert(reg.test(msg));

l全域函數

Global

瀏覽器記憶體中游離的函數，直接拿過來用。

eval() 可以解析字串，執行裡面的javascript的代碼（學習JSON）（最常用）

isNaN() 是否不是 數字 （常用）

encodeURI() 編碼

decodeURI() 解碼

（不用看）escape不編碼字元有69個：*，+，-，.，/，@，_，0-9，a-z，A-Z

（瞭解）encodeURI不編碼字元有82個：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z

（瞭解）encodeURIComponent不編碼字元有71個：!，'，(，)，*，-，.，_，~，0-9，a-z，A-Z

三、JavaScript和HTML的結合方式（瞭解）

l兩種使用方式

>內部使用

*<script type=”text/javascript”>JavaScript的代碼</script>

>外部參考

*<script type=”text/javascript” src=”javascript檔案路徑”></script>

*外部參考時script標籤內不能有script代碼，即使寫了也不會執行

注意：<script>標籤寫在任意地方都可以，但是要注意HTML和JAVASCRIPT的載入順序

在網頁載入完畢後做什麼事

      demo1.html                    <script type="text/javascript" >function aa(){alert(document.getElementById("a").innerHTML);//列印 你好啊alert("1");alert("2");}</script>          你好啊      

四、JavaScript的組成(瞭解) JavaScript的組成

*ECMAScript (核心)

*DOM 文檔物件類型

*BOM 瀏覽器物件類型

練習：

1、99乘法表

2、2015-01-01到2015-09-01有多少天

1、答案 <script type="text/javascript"> for(var i=1;i<=9;i++){ for(var j=1;j<=i;j++){ document.write(j+"*"+i+"="+j*i+"\t"); } document.write(" "); } </script>

2答案：245 <script type="text/javascript"> var dlong1=Date.parse("2015/01/01"); var dlong2=Date.parse("2015/09/03"); alert((dlong2-dlong1)/1000/60/60/24); </script>