回顾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