JavaScript基础(一)

时间:2023-11-14 14:18:38

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、在页面中输出一千遍好好学习天天向上

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>第二题</title>
 <script type="text/javascript">
 for(var i=1;i<=1000;i++){
 document.write("第"+i+"遍"+"好好学习,天天上当!!!<br/>");
 }
 </script>
 </head>

 <body>
 </body>
 </html>

 在页面中输出一千遍好好学习天天向上

  2、实现计算器效果

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>无标题文档</title>
 <script type="text/javascript">
 var num1 =window.prompt("1,加法;2、减法;3、乘法;4、除法;");
 var num2 =window.prompt("请输入第一个数字");
 var num3 =window.prompt("请输入第二个数字");
 var a =parseInt(num1);
 var b =parseInt(num2);
 var c =parseInt(num3);
 var d = 0;
 switch(a){
     case 1:
         d = b+c;
     break;
     case 2:
         d = b-c;
     break;
     case 3:
         d = b*c;
     break;
     case 4:
         d = b/c;
     break;
 }
 document.write("结果为:"+d);
 </script>
 </head>

 <body>
 </body>
 </html>

 实现计算器效果

  3、弹窗演示案例

 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>无标题文档</title>
 </head>
 <script type="text/javascript">
     //alert("123");//警告弹窗
     //window.alert("321");
     //var q = window.confirm("456");//带确定和取消的弹窗,点击确定,返回true,点击取消,返回false
     //document.write(q);
     //var a = window.prompt("请输入姓名:","小黑");//可以实现用户输入的弹窗,点击确定,返回输入框中的内容,点击取消,返回null
     //document.write(a);
     //var t = "";
     //while(t!="小黑"){
     //    t = window.prompt("请输入姓名:");
     //}
     var num = window.prompt("请输入数值1-9");
     if(num>1&&num<=9){
         for(var i = 1;i<=num;i++){
             for(var j = 1;j<=i;j++){
                 document.write("*");
             }
             document.write("<br/>");
         }
     }else{
         alert("请正确输入");
     }
 </script>
 <body>
 </body>
 </html>

 弹窗演示案例

4、综合演示案例

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>无标题文档</title>

 </head>
 <script type="text/javascript">
     for(var i =1;i<=4;i++){
         for(var k = 3;k>=i;k--){
             document.write("&nbsp;&nbsp;");
         }
         for(var j = 1;j<=2*i-1;j++){
             document.write("*");
         }
         document.write("<br/>");
     }
     for(var i = 1;i<=3;i++){
         for(var k = 0;k<i;k++){
             document.write("&nbsp;&nbsp;");
         }
         for(var k = 3;k>=i;k--){
             document.write("*");
         }
         for(var k = 3;k>i;k--){
             document.write("*");
         }
         document.write("<br/>");
     }
     document.write("-----------------------我是分割线--输出1-100的累加值,跳过个位数为3的数字--------------<br/>");
     var sum = 0;
     for(var i = 1;i<=100;i++){
         if(i%10!=3){
             sum = sum + i;
         }
     }
     document.write("sum="+sum);
     document.write("<br/>-----------------------我是分割线--鸡兔同笼--------------<br/>");
     for(var ji = 0;ji<=24;ji++){
         var tu = 24-ji;
         if(ji*2+tu*4==60){
             document.write("鸡有"+ji+"只,兔有"+tu);
         }
     }
     document.write("<br/>-----------------------我是分割线--古典问题--------------<br/>");
     var start=1;
     var next=1;
     for(var i=3;i<13;i++){
         var temp=start+next;
         start=next;
         next=temp;

         document.writeln(next);
         }
 </script>
 <body>
 </body>

 综合演示案例