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 综合演示案例
时间： 2024-10-09 20:49:10