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

随声附和 提交于 2020-04-08 02:13:11

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  
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!