JavaScript入門篇—第1章 請做好准備
本章節主要講解如何在HTML文件中添加JavaScript代碼，掌握必備的基礎語法，為以后來章學習打下基礎。
- 1-1 為什么學習JavaScript
- 1-2 新朋友你在哪里（如何插入JS）
- 1-3 我也可以獨立（引用JS外部文件）
- 1-4 找到你的位置（JS在頁面中的位置）
- 1-5 JavaScript-認識語句和符號
- 1-6 JavaScript-注釋很重要
- 1-7 JavaScript-什么是變量
- 1-8 JavaScript-判斷語句（if...else）
- 1-9 JavaScript-什么是函數
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>為什么學習JavaScript</title> 6 </head> 7 <body> 8 <ul> 9 <li id="ceshi1">所有主流瀏覽器都支持JavaScript。</li> 10 <li id="ceshi2">目前，全世界大部分網頁都使用JavaScript。</li> 11 <li>它可以讓網頁呈現各種動態效果。</li> 12 <li>做為一個Web開發師，如果你想提供漂亮的網頁、令用戶滿意的上網體驗，JavaScript是必不可少的工具。</li> 13 </ul> 14 <script type="text/javascript"> 15 document.write("hello javascript!") 16 document.getElementById("ceshi1").style.color="#A0522D"; 17 </script> 18 </body> 19 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>插入JS代碼</title> 6 <script type="text/javascript"> 7 document.write("開啟JS之旅！") 8 </script> 9 </head> 10 <body> 11 <p><img src="images/demo1-2.png" ></p> 12 </body> 13 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>引用JS文件</title> 6 <script src="script.js"></script> 7 </head> 8 <body> 9 <p><img src="images/demo1-3-1.png" ></p> 10 <p><img src="images/demo1-3-2.png" ></p> 11 <p><img src="images/demo1-3-3.png" ></p> 12 </body> 13 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>JS代碼位置</title> 6 <script type="text/javascript"> 7 document.write('我真的真的很喜歡') 8 </script> 9 </head> 10 <body> 11 <script type="text/javascript"> 12 document.write('js'+'不是嗎'+'￣□￣｜｜我相信'+'<br />') 13 </script> 14 <img src="images/demo1-4.png" > 15 </body> 16 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>認識JS語句</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 document.write("I"); 10 document.write("love"); 11 document.write("JavaScript"); 12 </script> 13 <blockquote> 14 1. “;”分號要在英文狀態下輸入，同樣，JS中的代碼和符號都要在英文狀態下輸入。 15 16 2. 雖然分號“;”也可以不寫，但我們要養成編程的好習慣，記得在語句末尾寫上分號。 17 </blockquote> 18 </body> 19 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>JS注釋</title> 6 <script type="text/javascript"> 7 document.write('我本微塵，卻也心向天空')//我是單行注釋 8 /*======這個就是多行注釋======知道嗎 9 JS可以實現很多動態效果 10 快來學習吧!*/ 11 </script> 12 </head> 13 <body> 14 </body> 15 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>JS變量</title> 6 <script type="text/javascript"> 7 var mychar; 8 mychar="javascript"; 9 //變量要先聲明再賦值 10 var mynum = 6; 11 var mychar="javascript" 12 //變量也可以邊聲明邊賦值 13 var mychar; 14 mychar="javascript"; 15 mychar="hello"; 16 //變量也可以重復賦值 17 </script> 18 </head> 19 <body> 20 <img src="images/demo1-7.png" > 21 </body> 22 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>判斷語句</title> 6 <script type="text/javascript"> 7 /*if(條件) 8 { 條件成立時執行的代碼 } 9 else 10 { 條件不成立時執行的代碼 }*/ 11 var myage=20;//變量存儲值，初始值20 12 if(myage>=18){ 13 document.write('傷心，我已經長大了') 14 } 15 else{ 16 document.write('恭喜，你還可以繼續浪') 17 } 18 </script> 19 </head> 20 <body> 21 </body> 22 </html>
1 <!-- <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>JS函數調用</title> 6 <script type="text/javascript"> 7 // function 函數名() 8 // { 9 // 函數代碼; 10 // }//基本語法 11 function myceshi(){ 12 var a=2; 13 var b=3; 14 var c=a+b; 15 alert(c); 16 } 17 // myceshi();//調用函數直接寫函數名 18 </script> 19 </head> 20 <body> 21 <input type="button" name="" id="" value="好夢,晚安" onclick="myceshi()"/> 22 <p><img src="images/demo1-9.jpg" ></p> 23 </body> 24 </html> 25 --> 26 <!-- ====================無情分割線=========================== --> 27 <!DOCTYPE html> 28 <html> 29 <head> 30 <meta charset="utf-8"> 31 <title>拓展</title> 32 <script type="text/javascript"> 33 function myceshi(){ 34 var a=2; 35 a=--a; 36 var b=3; 37 b=--b; 38 var c=a+b; 39 if(c>=5){ 40 alert("我是帥哥") 41 } 42 else{ 43 alert("好吧，人丑要多學習") 44 } 45 } 46 </script> 47 </head> 48 <body> 49 <input type="button" name="" id="" value="點我有驚喜" onclick="myceshi()"/> 50 </body> 51 </html> 52