回顧JS第一章如何在HTML文件中添加JavaScript代碼


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  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM