标签：
JavaScript
一、什么是JavaScript？
脚本描述语言，网页交互特效，说白了，就是实现HTML实现不了的效果。(JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。)
HTML:
超文本标记语言
CSS：
网页样式
JavaScript：
网页交互特效
二、为什么要使用JavaScript？
解决我们现在技术解决不了的问题，例如，表单及时验证，图片轮播...
三、语法：
<script type="text/javascript">
</script>
1、document.write("Hello!!");
在网页上输出Hello!!，其实这个相当于是：System.out.print();
2、在java中的流程控制，在javaScript中一样使用。
3、三种弹窗
a、alert(); ----用的比较多，测试
警告弹窗，只有内容和确定按钮
b、confirm();
提示窗口，有内容，确定和取消按钮，点击确定，返回true，点击取消
返回false；
c、prompt();
用户输入窗口，有提示，输入框，确定和取消按钮，点击确定，返回
文本框中的内容，点击取消，返回null
四、代码演示案例：
1、在页面中输出一千遍好好学习天天向上
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>第二题</title> 5 <script type="text/javascript"> 6 for(var i=1;i<=1000;i++){ 7 document.write("第"+i+"遍"+"好好学习，天天上当！！！<br/>"); 8 } 9 </script> 10 </head> 11 12 <body> 13 </body> 14 </html> 15 16 在页面中输出一千遍好好学习天天向上
2、实现计算器效果
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>无标题文档</title> 5 <script type="text/javascript"> 6 var num1 =window.prompt("1,加法；2、减法；3、乘法；4、除法；"); 7 var num2 =window.prompt("请输入第一个数字"); 8 var num3 =window.prompt("请输入第二个数字"); 9 var a =parseInt(num1); 10 var b =parseInt(num2); 11 var c =parseInt(num3); 12 var d = 0; 13 switch(a){ 14 case 1: 15 d = b+c; 16 break; 17 case 2: 18 d = b-c; 19 break; 20 case 3: 21 d = b*c; 22 break; 23 case 4: 24 d = b/c; 25 break; 26 } 27 document.write("结果为："+d); 28 </script> 29 </head> 30 31 <body> 32 </body> 33 </html> 34 35 实现计算器效果
3、弹窗演示案例
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>无标题文档</title> 4 </head> 5 <script type="text/javascript"> 6 //alert("123");//警告弹窗 7 //window.alert("321"); 8 //var q = window.confirm("456");//带确定和取消的弹窗，点击确定，返回true，点击取消，返回false 9 //document.write(q); 10 //var a = window.prompt("请输入姓名：","小黑");//可以实现用户输入的弹窗，点击确定，返回输入框中的内容，点击取消，返回null 11 //document.write(a); 12 //var t = ""; 13 //while(t!="小黑"){ 14 // t = window.prompt("请输入姓名："); 15 //} 16 var num = window.prompt("请输入数值1-9"); 17 if(num>1&&num<=9){ 18 for(var i = 1;i<=num;i++){ 19 for(var j = 1;j<=i;j++){ 20 document.write("*"); 21 } 22 document.write("<br/>"); 23 } 24 }else{ 25 alert("请正确输入"); 26 } 27 </script> 28 <body> 29 </body> 30 </html> 31 32 弹窗演示案例
4、综合演示案例
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>无标题文档</title> 5 6 </head> 7 <script type="text/javascript"> 8 for(var i =1;i<=4;i++){ 9 for(var k = 3;k>=i;k--){ 10 document.write(" "); 11 } 12 for(var j = 1;j<=2*i-1;j++){ 13 document.write("*"); 14 } 15 document.write("<br/>"); 16 } 17 for(var i = 1;i<=3;i++){ 18 for(var k = 0;k<i;k++){ 19 document.write(" "); 20 } 21 for(var k = 3;k>=i;k--){ 22 document.write("*"); 23 } 24 for(var k = 3;k>i;k--){ 25 document.write("*"); 26 } 27 document.write("<br/>"); 28 } 29 document.write("-----------------------我是分割线--输出1-100的累加值，跳过个位数为3的数字--------------<br/>"); 30 var sum = 0; 31 for(var i = 1;i<=100;i++){ 32 if(i%10!=3){ 33 sum = sum + i; 34 } 35 } 36 document.write("sum="+sum); 37 document.write("<br/>-----------------------我是分割线--鸡兔同笼--------------<br/>"); 38 for(var ji = 0;ji<=24;ji++){ 39 var tu = 24-ji; 40 if(ji*2+tu*4==60){ 41 document.write("鸡有"+ji+"只，兔有"+tu); 42 } 43 } 44 document.write("<br/>-----------------------我是分割线--古典问题--------------<br/>"); 45 var start=1; 46 var next=1; 47 for(var i=3;i<13;i++){ 48 var temp=start+next; 49 start=next; 50 next=temp; 51 52 53 document.writeln(next); 54 } 55 </script> 56 <body> 57 </body> 58 59 综合演示案例
标签：
原文地址：http://www.cnblogs.com/w13248223001/p/5714293.html
