回顾JS第一章如何在HTML文件中添加JavaScript代码
程序员文章站
2024-01-10 19:54:28
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