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