小菜鳥之HTML第二課
JavaScriptjavascript
運行在瀏覽器上的一種基於對象和事件的驅動的腳本語言css
基於對象（windows – document location histroyhtml
便於調用對象屬性和方法java
事件驅動編程
鍵盤和鼠標與瀏覽器互動windows
js特色數組
向html頁面添加交互行爲瀏覽器
腳本語言，語法與java相似dom
解釋性語言，一邊執行，一遍編譯函數
js的模型
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js引入的三種方式</title> 6 <link type=""> 7 <script type="text/javascript"> 8 function m1() { 9 alert("hello world2"); 10 } 11 </script> 12 <script type="text/javascript" src="js/myjs.js"></script> 13 </head> 14 <body> 15 <!--行間事件驅動 給事件屬性賦值--> 16 <div> 17 <input type="button" name="btn" value="點擊" onclick="alert('hello world')"> 18 </div> 19 20 <!--頁面嵌入script標籤進行交互--> 21 <div> 22 <input type="button" name="btn1" value="點擊1" onclick="m1()"> 23 </div> 24 25 <!-- 外部引入進行交互--> 26 <div> 27 <input type="button" name="btn2" value="點擊2" onclick="m2()"> 28 </div> 29 </body> 30 </html>
HTML表現型
CSS表現型
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS的介紹</title> 6 <link type=""> 7 <script type="text/javascript"> 8 function ml() { 9 alert("hello") 10 // 提示框顯示「hello 11 } 12 </script> 13 <script type="text/javascript" src="myjs.js"></script> 14 </head> 15 <body> 16 <!--行間事件驅動 給屬性賦值--> 17 <div> 18 <input type="button" name="btn" value="點擊" onclick="alert('hello')"> 19 </div> 20 <!--頁面嵌入script標籤進行交互--> 21 <div> 22 <input type="button" name="btn2" value="點擊1" onclick="ml()"> 23 </div> 24 <!--外部引用--> 25 <div> 26 <input type="button" name="btn3" value="點擊3" onclick="m2()"> 27 </div> 28 </body> 29 </html>
m2外部引用
1 function m2() { 2 alert("123") 3 4 }
js語法與註釋
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js語法與註釋</title> 6 <script type="text/javascript"> 7 //註釋 /**/ 8 /** 9 * 10 **/ 11 //如何聲明變量 12 13 var s; 14 var s1=1; var s2="abc";var s3=null; 15 var s1l=1,s22="abc",s33=null; 16 </script> 17 </head> 18 <body> 19 20 </body> 21 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>數據類型的判斷</title> 6 <script type="text/javascript"> 7 //聲明一些變量 8 var str="abc";//string 9 var num=123;//number 10 var datc=new Date();//object 複合類 11 var flag=true;//boolean 12 var arr=new Array(4);//數組
//typeof（）是js內置經常使用的方法
//通常狀況下，在執行過程當中取不到的狀況下，返回null
var o;
13 //typeof（）是js內置經常使用的方法 14 document.write("str "+typeof (str)+"<br>"); 15 document.write("num "+typeof (num)+"<br>"); 16 document.write("str "+typeof (datc)+"<br>"); 17 document.write("num "+typeof (flag)+"<br>"); 18 document.write("str "+typeof (arr)+"<br>"); 19 20 </script> 21 </head> 22 <body> 23 24 </body> 25 </html>
網頁結果
1 str string 2 num number 3 str object 4 num boolean 5 str object
變量和函數的預解析
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>變量和函數的預解析</title> 6 <script type="text/javascript"> 7 method(); 8 //編譯執行的順序是從上往下 9 alert("num爲"+num); 10 var num=123;//number 11 //函數的定義 12 function method() { 13 alert("abc") 14 15 } 16 </script> 17 </head> 18 <body> 19 20 </body> 21 </html>
行間事件調用和提取行間事件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>行間事件調用和提取行間事件</title> 6 <script type="text/javascript"> 7 //行間事件調用 8 function method1(){ 9 alert("測試行間事件調用"); 10 } 11 //提取行間事件，而後調用 12 window.onload=function(){ 13 var oBtn=document.getElementById("id1"); 14 oBtn.onclick=method2;//執行點擊事件:調用method2方法 15 function method2() { 16 alert("測試提取行間事件"); 17 18 } 19 } 20 </script> 21 </head> 22 <body> 23 <!--提取行間事件，而後調用--> 24 <input type="button" name="btn1" value="點擊1" id="id1"> 25 </div> 26 <div> 27 <!--行間事件 就是 onclick事件--> 28 <input type="button" name="btn" value="點擊" 29 onclick="method1()"> 30 </div> 31 <div> 32 33 34 </body> 35 </html>
匿名函數
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>匿名函數</title> 6 <script type="text/javascript"> 7 //匿名函數 ：沒有函數名的函數 8 window.onload=function () { 9 var oBtn=document.getElementById("btn1"); 10 //匿名函數的好處：是代碼更加簡潔 11 oBtn.onclick=function(){ 12 alert("test"); 13 }; 14 15 } 16 </script> 17 </head> 18 <body> 19 <div><input type="button" value="點擊" id="btn1"></div> 20 21 </body> 22 </html>
有參函數
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>有參函數</title> 6 <script type="text/javascript"> 7 function method(count) { 8 for(var i=0;i<count;i++){ 9 document.write("學習js"+"<br>"); 10 } 11 } 12 </script> 13 </head> 14 <body> 15 <div><input type="button" value="點擊" 16 onclick="method(prompt('請輸入次數',''))"></div> 17 18 </body> 19 </html>
條件語句
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>條件語句</title> 6 <script type="text/javascript"> 7 //條件語句: if /if-else/ if-else-if/ if的嵌套/ switch 8 /* var a=1; 9 if(a==1){ 10 alert("test1"); 11 }else if(a==2){ 12 alert("test2"); 13 }else if(a==3){ 14 alert("test3"); 15 }*/ 16 //switch 17 var a=12; 18 switch(a){ 19 case 1: 20 alert("test1"); 21 break; 22 case 2: 23 alert("test2"); 24 break; 25 case 3: 26 alert("test3"); 27 break; 28 default: 29 alert("test4"); 30 break;//可寫可不寫 31 } 32 </script> 33 </head> 34 <body> 35 36 </body> 37 </html>
循環語句
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>循環語句</title> 6 <script type="text/javascript"> 7 //while do-while for 8 for (var i=0;i<4;i++){ 9 document.write("for輸出序號："+(i+1)+"<br>"); 10 } 11 /*+++++++++++++++++++++++++++++++*/ 12 var j=0; 13 while(j<4){ 14 document.write("while輸出序號："+(j+1)+"<br>"); 15 j++; 16 } 17 /*=====================================*/ 18 var k=0;// 0 1 2 3 4取不到 19 do { 20 document.write("do-while輸出序號："+(k+1)+"<br>") 21 k++; 22 }while (k<4);//false 23 24 </script> 25 </head> 26 <body> 27 28 </body> 29 </html>
break與continue與return的使用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>break與continue與return的使用</title> 6 <script type="text/javascript"> 7 //break : 終止當前循環 8 // 若是有循環嵌套，當前循環是指終止最近的循環 9 for(var j=0;j<4;j++){ 10 for(var i=0;i<10;i++){ 11 document.write("輸出:"+(i+1)+"<br>"); 12 if(i==5){ 13 break; 14 } 15 } 16 //代碼 17 //代碼 18 } 19 //代碼 20 //代碼 21 //continue的使用 22 for(var k=0;k<10;k++){ 23 if(k==5){ 24 continue; 25 } 26 document.write("輸出:"+(k+1)+"<br>"); 27 } 28 //return 29 function method() { 30 alert("test1"); 31 return; 32 alert("test2"); 33 } 34 method(); 35 </script> 36 </head> 37 <body> 38 39 </body> 40 </html>
函數return的用法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>函數return的用法</title> 6 <script type="text/javascript"> 7 //定義一個有參函數 8 function add(a,b) { 9 var c=a+b; 10 alert("test1"); //會輸出 11 return c; //經過return關鍵字結束函數 12 alert("test2"); //不會輸出 13 14 } 15 //之間調用/執行函數 16 var result=add(1,2); 17 alert(result); 18 </script> 19 </head> 20 <body> 21 22 </body> 23 </html>
數組的用法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>數組的用法</title> 6 <script type="text/javascript"> 7 //數組的聲明和賦值 8 //方法一 9 var arr=new Array(4); 10 arr[0]=1; 11 arr[1]=2; 12 arr[2]=3; 13 arr[3]=4; 14 //方法二 15 var arr1=new Array(1,2,3,4); 16 //方法三 17 var arr2=[1,2,3,4]; 18 //數組的經常使用方法 19 alert("數組arr2的長度爲："+arr2.length); 20 //數組中的元素分別是什麼 21 alert(arr2[0]); 22 /* alert(arr2[1]); 23 alert(arr2[2]); 24 alert(arr2[3]);*/ 25 //將數組元素經過分隔符號連成字符串 26 alert(arr2.join("-")); 27 alert(arr2); 28 //push（）在數組最後位置添加數組元素 29 arr2.push(5); 30 alert("添加元素後輸出："+arr2); 31 //pop（）刪除數組中的最後一個元素 32 arr2.pop(); 33 alert(arr2); 34 // unshift()和shift（） 在數組的頭部添加和刪除元素 35 arr2.unshift(0); 36 alert(arr2); 37 arr2.shift(); 38 alert(arr2); 39 //將數組反轉 40 arr2.reverse(); 41 alert(arr2); 42 //如何知道數組元素對應的下標（索引值） 43 alert(arr2.indexOf(2)); 44 //splice() 從索引爲2開始（包含2），刪除一個元素，添加 7，8，9 45 arr2.splice(2,1,7,8,9); 46 alert(arr2); 47 48 49 </script> 50 </head> 51 <body> 52 53 </body> 54 </html>
window對象
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>window對象</title> 6 <script type="text/javascript"> 7 function location1() { 8 //打開一個網頁,此網頁覆蓋最初的網頁 9 window.location="01.html"; 10 } 11 //打開新的網頁 12 function open1() { 13 window.open("01.html"); 14 } 15 //關閉當前網頁 16 function close1() { 17 window.close(); 18 } 19 //window經常使用的方法 confirm() 確認框 20 function confirm1() { 21 var flag=window.confirm("你肯定要刪除此消息嗎？");//返回 boolean類型 22 if(flag==true){ 23 alert("刪除成功"); 24 }else{ 25 alert("刪除取消"); 26 } 27 } 28 </script> 29 </head> 30 <body> 31 <div><input type="button" onclick="location1()" value="location按鈕測試"></div> 32 <div><input type="button" onclick="window.location='01.html'" value="location按鈕測試1"></div> 33 34 <div><input type="button" onclick="open1()" value="open按鈕測試"></div> 35 <div><input type="button" onclick="window.open('01.html')" value="open按鈕測試1"></div> 36 37 <div><input type="button" onclick="close1()" value="close按鈕測試"></div> 38 <div><input type="button" onclick="window.close()" value="close按鈕測試1"></div> 39 40 <div><input type="button" onclick="confirm1()" value="confirm按鈕測試"></div> 41 42 43 44 45 </body> 46 </html>
setTimeout函數
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>setTimeout函數</title> 6 <script type="text/javascript"> 7 //setTimeout函數 ，設置必定時間（毫秒爲單位）後調用某個函數 8 function timer() { 9 setTimeout("alert1()",3000); 10 } 11 12 function alert1() { 13 alert('3秒後輸出警示框'); 14 } 15 </script> 16 </head> 17 <body> 18 <!-- 編寫一個按鈕，點擊按鈕，調用函數--> 19 <div><input type="button" value="定時器" onclick="timer()"></div> 20 </body> 21 </html>
實現時鐘的特效
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>實現時鐘的特效</title> 6 <script type="text/javascript"> 7 function myClock() { 8 var now=new Date(); 9 var str= "如今是："+now.getHours()+"時"+now.getMinutes()+"分"+now.getSeconds()+"秒"; 10 document.getElementById("id1").innerHTML=str; 11 } 12 var intervalId; 13 //表示 每一秒鐘調用一次此函數 14 function start() { 15 intervalId=setInterval("myClock()",1000); 16 } 17 //讓時鐘暫停 18 function stop() { 19 clearInterval(intervalId); 20 } 21 </script> 22 </head> 23 <body> 24 <div><input type="button" value="start" onclick="start()"></div> 25 <div><input type="button" value="stop" onclick="stop()"></div> 26 27 <div id="id1"></div> 28 </body> 29 </html>
document對象
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>document對象</title> 6 <script type="text/javascript"> 7 //得到html中id="div1" 的對象 8 window.onload=function () { 9 var oDiv=document.getElementById("div1"); 10 alert(oDiv.innerHTML); 11 } 12 13 </script> 14 </head> 15 <body> 16 <div id="div1">這是一個div元素</div> 17 18 </body> 19 </html>
document操做屬性（讀取和寫入）</
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <link href="css1.css" rel="stylesheet" type="text/css"> 5 <meta charset="UTF-8"> 6 <title>document操做屬性（讀取和寫入）</title> 7 <script type="text/javascript"> 8 window.onload=function () { 9 var oInput=document.getElementById("input1"); 10 //經過屬性名，讀取到屬性值 11 var text1=oInput.type; 12 var name1=oInput.name; 13 var class1=oInput.className; 14 var value1=oInput.value; 15 //如什麼時候document對象實現這樣的樣式設計：style="color:red;font-size: 50px 16 var oA=document.getElementById("link1"); 17 oA.style.color="red"; 18 var oInput2=document.getElementById("input2"); 19 var value2=oInput2.value; 20 oA.style[value2]=value1; 21 //屬性的寫入 22 // oA.style.fontSize=value1; 23 } 24 </script> 25 </head> 26 <body> 27 <div> 28 <input type="text" class="className" name="setsize" id="input1" value="50px"> 29 <input type="text" class="className" name="setsize" id="input2" value="fontSize"> 30 <input type="text" class="className" name="setsize" id="input3" value="color"> 31 <a href="http://www.baidu.com" id="link1" >百度</a> 32 <div>html內容</div> 33 34 </div> 35 </body> 36 </html>
innerHTML和innerText的區別
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>innerHTML和innerText的區別</title> 6 <script type="text/javascript"> 7 window.onload=function () { 8 var oDiv=document.getElementById("div1"); 9 //讀取到標籤對中間的內容 10 //innerHTML能夠識別標籤，而innerText不能 11 var str= oDiv.innerHTML; 12 alert(str); 13 /* var str1=oDiv.innerText; 14 alert(str1);*/ 15 16 //如何寫入 17 var oDiv2=document.getElementById("div2"); 18 oDiv2.innerText="<a href='http://www.baidu.com'>點擊</a>"; 19 } 20 </script> 21 </head> 22 <body> 23 <div id="div1"><h1>這是一個div元素</h1></div> 24 <div id="div2"></div> 25 </body> 26 </html>
dom模型的其餘方法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>dom模型的其餘方法</title> 6 <script type="text/javascript"> 7 function changeBookName() { 8 //getElementsByName(),返回的是一個對象數組，數組內只有一個對象元素 9 var newBookNames=document.getElementsByName("addBookName"); 10 document.getElementById("book").innerHTML=newBookNames[0].value; 11 } 12 13 function outputSeason() { 14 //getElementsByName(),返回的是一個對象數組，數組內有4個對象元素 15 var seasons=document.getElementsByName("season"); 16 var str=""; 17 //數組遍歷，for遍歷 18 for(var i=0;i<seasons.length;i++){ 19 //累加 20 str+=seasons[i].value+" "; 21 22 } 23 document.getElementById("outputSeason").innerHTML=str; 24 25 } 26 function outputZM() { 27 //getElementsByTagName(),返回的是對象數組 28 var zms=document.getElementsByTagName("p"); 29 var str=""; 30 for(var i=0;i<zms.length;i++){ 31 //累加 32 str+= zms[i].innerHTML+" "; 33 } 34 document.getElementById("div1").innerHTML =str; 35 } 36 function clearAll() { 37 document.write(""); 38 } 39 </script> 40 </head> 41 <body> 42 <div id="book">java編程思想</div> 43 <div><input name="addBookName" type="text" value=""></div> 44 <div><input type="button" value="改變書名" onclick="changeBookName()"></div> 45 46 <div> 47 <input type="text" name="season" value="春"> 48 <input type="text" name="season" value="夏"> 49 <input type="text" name="season" value="秋"> 50 <input type="text" name="season" value="冬"> 51 </div> 52 <div id="outputSeason"></div> 53 <div><input type="button" value="輸出四季" onclick="outputSeason()"></div> 54 55 <div> 56 <p>a</p> 57 <p>b</p> 58 <p>c</p> 59 <p>d</p> 60 </div> 61 <div id="div1"></div> 62 <div><input type="button" value="輸出字母" onclick="outputZM()"></div> 63 64 <div><input type="button" value="清空全部內容" onclick="clearAll()"></div> 65 </body> 66 </html>
1 Html（表現的結構） 2 CSS（表現的樣式） 3 JavaScript（表現的是一種行爲） 4 運行在瀏覽器上的一種基於對象和事件驅動的腳本語言。 5 基於對象（window --document location history）,便於調用 6 對象的屬性和方法。 7 事件驅動 8 鍵盤和鼠標與瀏覽器的互動（鍵盤在輸入框輸入文字/ 鼠標的點擊等） 9 js的特色 10 向html頁面添加交互行爲 11 腳本語言，語法與java相似 12 解釋性語言，一邊執行一邊解釋 13 js的模型 14 BOM模型 15 browser object model 是指瀏覽器對象模型，提供操做瀏覽器的一些方法 16 window 17 document 18 location 19 history 20 window的經常使用方法和屬性 21 location 22 open() 23 close() 24 confirm() 25 alert() 26 prompt() 27 setTimeout() 28 setInterval() 29 document的經常使用方法和屬性 30 write() 31 getElementById() 32 getElementsByTagName() 返回是一個對象數組 33 getElementsByName() 返回的是一個對象數組 34 innerHTML 讀取的<>這裏的內容<> 35 DOM模型 36 document object model 是指文檔對象模型，提供操做html和css的一些方法。 37 39 40
相關文章
- 1. 小菜鳥之HTML第一課
- 2. 小菜鳥之HTML第三課
- 3. 小菜鳥的第二天
- 4. 小菜鳥之HTML經常使用
- 5. springboot菜鳥第一課
- 6. 小菜鳥之Phyhon
- 7. 小菜鳥之servlet
- 8. Python菜鳥編程第二課之字符串
- 9. Python菜鳥編程第二十一課之Redis
- 10. Python菜鳥編程第二課之流程控制
- 更多相關文章...
- • Eclipse 菜單 - Eclipse 教程
- • HTML 指南 - 網站建設指南
- • RxJava操作符（二）Transforming Observables
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 小菜鳥之HTML第一課
- 2. 小菜鳥之HTML第三課
- 3. 小菜鳥的第二天
- 4. 小菜鳥之HTML經常使用
- 5. springboot菜鳥第一課
- 6. 小菜鳥之Phyhon
- 7. 小菜鳥之servlet
- 8. Python菜鳥編程第二課之字符串
- 9. Python菜鳥編程第二十一課之Redis
- 10. Python菜鳥編程第二課之流程控制