1、javascript的簡介 * 是基於對象和事件驅動的語言，應用與客戶端。 - 基於對象： ** 提供好了很多對象，可以直接拿過來使用 - 事件驅動： ** html做網站靜態效果，javascript動態效果 - 客戶端：專門指的是瀏覽器 * js的特點 （1）交互性 - 信息的動態交互 （2）安全性 - js不能訪問本地磁盤的文件 （3）跨平台性 - java里面跨平台性，虛擬機 - 只有能夠支持js的瀏覽器，都可以運行 * javascript和java的區別（雷鋒和雷峰塔） （1）java是sun公司，現在oracle；js是網景公司 （2）JavaScript 是基於對象的，java是面向對象 （3）java是強類型的語言，js是弱類型的語言 - 比如java里面 int i = "10"; - js: var i = 10; var m = "10"; （4）JavaScript只需解析就可以執行，而java需要先編譯成字節碼文件，再執行。 * javascript的組成（下面js） 三部分組成 （1）ECMAScript - ECMA : 歐洲計算機協會 - 有ECMA組織制定的js的語法，語句..... （2）BOM - broswer object model: 瀏覽器對象模型 （3）DOM - document object model：文檔對象模型 2、js和html的結合方式（兩種） 第一種： - 使用一個標簽 <script type="text/javascript"> js代碼; </script> 第二種： - 使用script標簽，引入一個外部的js文件 *** 創建一個js文件，寫js代碼 - <script type="text/javascript" src="1.js"></script> ** 使用第二種方式時候，就不要在script標簽里面寫js代碼了，不會執行。 3、js的原始類型和聲明變量 ** java的基本數據類型 byte short int long float double char boolean ** 定義變量 都使用關鍵字 var ** js的原始類型（五個） - string: 字符串 *** var str = "abc"; - number：數字類型 *** var m = 123; - boolean：true和false *** var flag = true; - null *** var date = new Date(); *** 獲取對象的引用，null表示對象引用為空 ，所有對象的引用也是object - undifined *** 定義一個變量，沒有賦值 *** var aa; ** typeof(); 查看當前變量的數據類型 4、js的語句 - java里面的語句： ** if判斷 ** switch語句 ** 循環 for while do-while -js里面的這些語句 ** if判斷語句 **** =:表示賦值 **** ==：表示判斷 ** switch語句 - java里面支持數據類型 string支持嗎？在jdk1.7開始支持 - js里面都支持 - switch(a) { case 5: break; case 6: break; default: ...... } ** 循環語句 for while do-while - while循環 **** var i = 5; while(i>1) { alert(i); i--; } - for循環 *** for(int i=0;i<=10;i++) { } for(var mm=0;mm<=3;mm++) { alert(mm); } ** i++ ++i和java里面一樣 5、js的運算符 ** += ： x+=y; ===> x=x+y; ** js里面不區分整數和小數 var j = 123; alert(j/1000*1000); // j/1000*1000 在java里面得到結果是 0 // 在js里面不區分整數和小數，123/1000=0.123 * 1000 = 123 ** 字符串的相加和相減的操作 var str = "123"; ** 如果相加時候，做是字符串連接 ** 如果相減，做的是相減的運算 * //字符串的操作 var str = "456"; //alert(str+1); //在java里面操作的結果是 4561 ，在js里面還是 4561 alert(str-1); //相減時候，執行減法的運算 * 提示NaN:表示不是一個數字 ** boolean類型也可以操作 *** 如果設置成true，相當於這個值是1 *** 如果設置成false，相當於這個值是0 ** == 和 === 區別 ** 做判斷 ** == 比較的只是值 ** === 比較的是值和類型 ** 引入知識 直接向頁面輸出的語句（可以把內容顯示在頁面上） * document.write("aaa"); document.wirte("<hr/>"); ** 可以向頁面輸出變量，固定值和html代碼 6、實現99乘法表（輸出到頁面上） * document.write("<table border='1' bordercolor='blue'>"); //循環行 9 for(var i=1;i<=9;i++) { document.write("<tr>"); //循環列 for(var j=1;j<=i;j++) { document.write("<td>"); //運算 document.write(j+"*"+i+"="+i*j); document.write("</td>"); } //document.write("<br/>"); document.write("</tr>"); } document.write("</table>"); - document.write里面是雙引號，如果設置標簽的屬性需要使用單引號 - document.write可以輸出變量，還可以輸出html代碼 7、js的數組 * 什么是數組？ - 使用變量，var m = 10; - java里面的數組 定義 int[] arr = {1,2,3}; * 定義方式（三種） 第一種： var arr = [1,2,3]; var arr = [1,"4",true]; 第二種：使用內置對象 Array對象 var arr1 = new Array(5); //定義一個數組，數組的長度是5 arr1[0] = "1"; 第三種：使用內置對象 Array var arr2 = new Array(3,4,5); //定義一個數組，數組里面的元素是3 4 5 * 數組里面有一個屬性 length：獲取到數組的長度 * 數組可以存放不同的數據類型的數據 8、js的函數 ** 在java里面定義方法 public 返回類型void /int 方法名(參數列表) { 方法體; 返回值; } public int add(int a,int b) { int sum = a+b; return sum; } ** 在js里面定義函數（方法）有三種方式 **** 函數的參數列表里面，不需要寫var，直接寫參數名稱 第一種方式： **** 使用到一個關鍵字 function **** function 方法名(參數列表) { 方法體; 返回值可有可無（根據實際需要）; } **** 代碼 //使用第一種方式創建函數 function test() { alert("qqqqq"); } //調用方法 //test(); //定義一個有參數的方法 實現兩個數的相加 function add1(a,b) { var sum = a+b; alert(sum); } //add1(2,3); //有返回值的效果 function add2(a,b,c) { var sum1 = a+b+c; return sum1; } alert(add2(3,4,5)); 第二種方式： **** 匿名函數 var add = function(參數列表) { 方法體和返回值; } **** 代碼 //第二種方式創建函數 var add3 = function(m,n) { alert(m+n); } //調用方法 add3(5,6); 第三種方式：（用的少，了解） *** 動態函數 *** 使用到js里面的一個內置對象 Function var add = new Function("參數列表","方法體和返回值"); 9、js的全局變量和局部變量 ** 全局變量：在script標簽里面定義一個變量，這個變量在頁面中js部分都可以使用 - 在方法外部使用，在方法內部使用，在另外一個script標簽使用 ** 局部變量：在方法內部定義一個變量，只能在方法內部使用 - 如果在方法的外部調用這個變量，提示出錯 - SCRIPT5009: “nn”未定義 12-js的局部變量.html, 行18 字符3 ** ie自帶了一個調試工具，ie8及其以上的版本中，鍵盤上 F12，在頁面下方出現一個條 10、script標簽放在的位置 * 建議把script標簽放到 </body>后面 * 如果現在有這樣一個需求： 在js里面需要獲取到input里面的值，如果把script標簽放到head里面 會出現問題。 html解析是從上到下解析的，script標簽放到的是head里面，直接在里面取input里面的值， 因為頁面還沒有解析到input那一行，肯定取不到。 11、js的重載 * 什么是重載？方法名相同，參數列表不同 - java里面有重載，肯定有 * js里面是否有重載？