一. 第一个JS例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //编写js代码 document.write("<h1>Hello World</h1>"); //把内容输出到网页 alert("HelloWorld"); //弹出提示框 </script> </head> <body> <script> document.write("<h1>Hello JavaScript</h1>"); //把内容输出到网页 </script> </body> </html> <script> document.write("<h1>Hello Java</h1>"); //把内容输出到网页 </script>
二. 引入外部JS文件
1. HTML文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //编写js代码 document.write("<h1>Hello World</h1>"); //把内容输出到网页 alert("HelloWorld"); //弹出提示框 </script> </head> <body> <script> document.write("<h1>Hello JavaScript</h1>"); //把内容输出到网页 </script> </body> </html> <script> document.write("<h1>Hello Java</h1>"); //把内容输出到网页 </script>
2. JS文件
alert("hello world");
三. 定义变量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> /*var aa = "污王" //string var aa = 10.5 //number var aa = true //boolean var aa; //undefined*/ aa = 10; //var可以不写，但是建议写上 alert(aa) //alert(typeof(aa)); //typeof()查看变量类型 </script> </head> <body> </body> </html>
四. 运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var aa = 10; /* 后++：先输出变量的内容，然后变量再自动加1 前++：变量先自动加1，然后再输出变量的内容 alert(aa++); //10 alert(aa); //11*/ var bb = "10"; //alert(aa == bb); //true,js会自动把字符串10转换number类型，再进行比较 //alert(aa === bb); //比较变量的类型和值 aa += 10; //相当于aa = aa + 10 aa -= 10; //相当于aa = aa - 10 var name1 = "2"; var name2 = 3; alert(name1 + name2); //只要有一个变量是字符串，那么+号就是连接符。 var sexy = "female"; alert(sexy=="male" ? "男" : "女"); </script> </head> <body> </body> </html>
五. 条件判断一：if...else if...else
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> // 需求：根据学生成绩输出及格、良好、优秀。 var score = 70; if (score >= 90) { document.write("优秀"); } else if (score >= 75) { document.write("良好"); } else if (score >= 60) { document.write("及格"); } else { document.write("不及格"); } </script> </body> </html>
六. 条件判断二：switch...case..break...default
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> //需求：根据星期的数字输出星期几。 var date = 8; switch (date) { case 1: document.write("这是星期一"); break; //结束switch case 2: document.write("这是星期二"); break; case 3: document.write("这是星期三"); break; case 4: document.write("这是星期四"); break; case 5: document.write("这是星期五"); break; case 6: document.write("这是星期六"); break; case 7: document.write("这是星期日"); break; default: document.write("无效数字"); } </script> </body> </html>
七. 循环：while...do...while...for...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> /*//需求：输出1~10的总数 var num = 1; var result = 0; //保存计算的结果 while (num <= 10) { result = result + num; num++; } //计算1~10奇数的总和 var num = 1; var result = 0; do { if (num % 2 == 1) { result += num; } num++; } while (num <= 10);*/ //需求：实现1~10之间偶数的相加。 var result = 0; for (var num = 1; num <= 10; num++) { if (num % 2 == 0) { result += num; } } alert(result); </script> </body> </html>
八. 循环案例：打印星星
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> //循环输出一个三角形 //星号的数量 = 行号 * 2 - 1 //空格的数量 = 6 - 行号 //循环每一行 for (var row = 1; row <= 6; row++) { //循环输出空格 var spNum = 6 - row; //空格数量 for (var col = 1; col <= spNum; col++) { document.write(" "); } //循环输出星号 var starNum = row * 2 - 1; for (var col = 1; col <= starNum; col++) { document.write("*"); } document.write("<br/>"); //换行 } </script> </body> </html>