欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-04 11:15:56
JavaScript入门篇—第1章 请做好准备 本章节主要讲解如何在HTML文件中添加JavaScript代码,掌握必备的基础语法,为以后来章学习打下基础。 1-1 为什么学习JavaScript 1-2 新朋友你在哪里(如何插入JS) 1-3 我也可以独立(引用JS外部文件) 1-4 找到你的位置 ......

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