Javascript的内容

Posted 2020-09-07 李佳阳

  JS简介和变量

{JS的三种方式}
            1 html中内嵌JS(不提倡使用)
            <button onclick="javascript:alert()">点我呀！！！</button>
        <button ondblclick="javascript:alert()">点我呀！！！</button>
        <button onmouseover="javascript:alert()">点我呀！！！</button>
            2  html页面中使用JS
            <script type="text/javascript">
                //JS代码
        </script>
             3 引用外部JS文件
            <script language="JavaScript"src=""></script>
            注意事项：
            ① 页面中的JS代码和引用的JS代码 可以嵌入到HTML中的任何位置，但是位置不同，会影响JS代码的执行顺序
            ②页面中的js代码：使用type="text/javascript"
            引用外部的js文件 使用language="JavaScript"src=""
            例如<script>在body前面会在加载前出现
            ③  引用外部JS文件的<script></script>必须成对出现且标签内部不能有任何代码
        <script type="text/javascript">
//            js中的注释
            // 单行注释      ctrl+/
            /*
             段落注释     ctrl+shift+/
             **/
//            alert("我弹了一个窗")
//         document.write("<h1></h1>")
/*JS中的变量
  * 1   js中变量声明的写法
 *   var width=10;    使用var声明的变量，只在当前函数作用域有效
 * width=11;       不使用var  直接赋值生成的变量      默认为全局变量整个JS文件有效
 *  var a,b,c=1;  同一声明语句同时声明多个变量，变量之间用英文逗号分开，但 赋值需要单独赋，例如上式中的只有c赋为1
 * 2 变量的命名规范：
 * ①   变量名只能有字母数字下划线$ 组成
 * ②    开头不能使数字
 * ③   变量区分大小写    大写字母与小写字母为不同变量
 * 3  变量名命名要符合驼峰法则
 * 变量开头要小写     之后首字母大写  （或单词之间有下划线分隔）
 * JiangHaoIsShuaiGe
 * 4 类型JS中的变量的数据类型
 * undefined：未定义 用var声明的变量    没有进行初始化数值。  var a；
 * Null   代表特殊的变量类型。  表示为空的引用 var a=null；  
 * Boolean    真假 可选true和false
 * Number  数值类型 可以是小数，也可以是整数
 * STRING 字符串类型 用""或‘‘包裹的内容为字符串
 * Object  （复杂数据类型） 后续讲解， 函数，数组等。
 * 5 常用的数值函数
 * ① isNaN  用于判断一个变量或常量   是否为非数值
 * 使用isNAN判断时，会尝试使用number（）函数进行转换   如果能转换为数字 则不是非数值  结果为false
 * "111"   纯数字字符串   的、false  " "  空字符串  false  "la"  包含其他字符   true
 * true/false  布尔类型   false
 * ②  Number（）  将其他类型转化为数值类型
 * [字符串类型]
 * 1  字符串为纯数值字符串，会转为对应的数字 "1111"》111
 * 2   字符串为空字符串  会转为"0">0
 * 3  字符串包含其他非数字字符时，不能转换，"111a">NaN
 * [NULL/undefined转数值]
 * null>0    unfedined>0
 * [Boolean类型转数值]
 * true>1    false>0
 * Object类型转数值]
 * 先通用ValueOf 方法确定函数是否有返回值 在根据上述情况判断
 * ③parseInt  将字符串转化为数值类型
 * >>>>  空字符串 不能转 结果为NAN
 * >>>>  纯数值字符串  能转    "123">123    "123.65">123(小数转化时，直接抹掉小数点)
 *>>>>    包含其他字符的字符串。会就取第一个非数值字符前的数值部分
 *           "1234a123">1234        "a1234">NaN
 * >>>> parseInt值能转string类型，boolem/null/undefined 均为NaN
 * ④ parseFloa：将字符串转换为数值
 * 使用方式同parseInt，当转化小数字符串时 保留小数点，转化整数字符串时 保留整数
 * "123.5" >123.5       "123">123
 * ⑤ typeof  用来检测变量数据类型
 * 未定义>undefined        字符串>string       true/false> boolean
 * 数值>number        对象/null>object          函数>function  
 * */
   /*声明变量注意事项
            * ①  JS中的所有变量类型声明，均使用var关键字变量的具体数据类型取决于给变量赋值的执行
            * ② 同一变量：可以再多次不同赋值时，修改变量的数据类型
            *  var width=10;   width为整型变量
            *  width="haha";    width被改为字符串类型
            * ③变量可以使用var声明 也可以省略var  [区别]  不使用var为全局变量
            * ④ 同一变量名可以多次用var声明 但并没有任何含义 也不会报错，第二次之后的声明      只会被理解为赋值
            * */
var a;   // 声明变量
 a=10;  // 给变量赋值
             JS中输入和输出语句
             *1  文档中的打印输出   document 。write{};
             * 输出语句 将write的（）中的内容打印在浏览器屏幕上
             * 使用时注意：改变量/常量以外的内容   打印时必须放在""中，变量/常量必须放在""外
             * 打印内容同时有多部分内容时，中间用+链接
             * 例如   document.write("左手中的纸牌"+left+"<br/>");
             *   2  弹窗输出alter{}  警报
             * 弹窗警告  （）中的内容 同上
             * 3  弹窗输出  promptjkkk
             * s\两部分参数① 输入框上面的提示信息
                                ② 输入框里面的默认信息
             * 两部分中间用逗号隔开，只写一部分，默认为提示信息
             * 可以定义变量接受输出内容    例如var name = prompt("请输入您的名字","姜浩" );点击确定按钮 输入成功  点击取消按钮  name=null；
             *默认接收输入的内容为字符串
             * var center=   声明一个中间变量
             center=left    左手的值给中间
             right = center   把中间的值给右边 */      
       var name = prompt("请输入您的名字：","姜浩" ); 
        document.write("您的名字："+name)；
           var one =prompt("输入第一个数字：","2");
            var two = prompt("输入第二个数字：","2") ;
            var sum  = parseFloat(one)  + parseFloat(two)
          document.write(sum

JS中的运算符

1 算术运算
     + 加、- 减、* 乘、 / 除、 % 取余、++ 自增、-- 自减
     +:有两种作用，链接字符串/加法运算；当加号两边为数字使进行加法运算，当+号郎边有任意一边为字符串时，进行字符串链接，连接后的结果为字符串
     ++：自动运算符，将变量在原有的基础上加1
     --：自动运算符，将变量在原有的基础上减1
       n++与++n的区别
     n++:  先使用n的值来计算，然后再把n+1
     ++n ：先把n的值加1，然后再用n+1以后的值去计算
     相同点：不论n++还是++n在执行完代码后，均会把n+1
     var a=3
     var b c
     b = a++  +2   a=3  b=5  a=4
     c = ++a  +2   a=4  a=5  c=7
     2 赋值运算
     =  赋值   += -=  *=  /=  %=
     +=：  a+=5；相当于    a = a  + 5  但是，前者的执行效率比后者快。
     -=:
      3关系运算
     ==、 等于  ===  严格等于    ！=     不等于、>、<、>=、<
     ===：严格等于；类型不同，直接返回false，类型相同，在进行下一步判断，
     ==：等于；类型相同，同===；类型不同，尝试将等式两边转换为数字，在判断。
                  特例       null  ==   Undefined  √   null  ===  Undefined  ×
     4 条件运算符(多目运算)
     a>b?true:false
          有两个关键符号：？和：
          当问号前面的部分运算结果为true时        执行：前面的代码
          当问号前面的部分运算结果为false时      执行：后面的代码
    多目运算符可以多层嵌套      
       例如  var  jieguo = num>5?"输入太大"：( num==5?"蒙对了！":"输入太小") ；  
     5逻辑运算符
     &&    与、||   或、！ 非
   
            var num =5;
           
           var  jieguo = num>5?"输入太大":( num==5?"蒙对了！":"输入太小"); 
            document.write(jieguo);
          
           [运算符的优先级]
             1  ++ --  !
             2 *  /  %
             3 + -
             4 > < >=  <=
             5 ==  ！=
             6 &&
             7 ||
             8   各种赋值= += *= /=  %=                                

JS中的分支结构

[if-else结构]
             1 结构写法
              if(){
                条件为true时执行
            }else{
                条件为false时执行
            }
            2  if()中的表达式，运算之后的结果应该为
            ① Boolean  true 真  false 假
             ② string 非空字符串为真，空字符串为假。
             ③ Number 0为假    一切非零均为真
             ④null/nan/undefined  全为假。
             ⑤ Objict ：全为真。
            3 else{}结构，可以根据情况省略 。
            
            [多重if 阶梯if]
             1 结构写法
             if（条件一）{
                 条件一成立
             }else if(条件二){
                 条件一不成立&&条件二成立
                 
                 else-if 部分可以有多个
             }else{
                 条件一不成立&&条件二不成立
             }
             2  多成if条件中，各种判断条件是互斥的，只能选择其中一条路。
             3 if else的{}可以省略  但是一概不提倡
              如果省略{}  则 if/else结构包含的代码   仅为其中最近的一行（分号结束）
             * 如果省略{}  则else结构永远属于其前方最近的一个if
             * */
            
         var sum =5;
            if(sum<10){
               document.write("if条件成立")
            }else{
                document.write("if条件不成立 ")
            }
           
[嵌套if结构]
             
              1  结构写法
              if（条件一）{
                    条件一成立
              if（条件二）{
                    条件一成立&&条件二成立
             }else{
                   条件一成立&&条件二不成立}
              }else {
                  条件一不成立
              if(){
             *     111
             * }else{
             *     1111
             * }
             * }
             * 2 if结构可多层嵌套 但原则上不可超过3层。
/*   [switch结构]
 * 1 结构写法
 * switch(表达式){
 *         case 常量表达式1：
 *        语句1：
 *    break;
 *  case 常量表达式1：
 *        语句1：
 *    break;
  default:
   语句N
  break；  } 2 注意事项：
① switch()中的表达式，以及每个case后面的表达式，可以为任何JS支持的数据类型。对象和数组不行
② case后面的所有常量表达式，必须各不相同，否则只会执行第一个。
③ case后的常量可以是任何数据类型，同一switch结构的不同case，可以使多种不同 的数据类型

④ switch在进行判断的时候，采用的是全等判断     ===
⑤ break 的作用 执行完case的代码后，弹出当前的switch结构
 缺少break的结果。
 聪明和正确的case项开始 依次执行所有的case和default
⑥  switch结构在判断时，只会判断一次正确答案，当遇到正确的case项后将不会判断、后续项目 依次往下执行
⑦switch的执行速率要快于多重if结构在多路分支时，可优先选择使用switch结构

          var num4=5
           switch(num4=5){
               case 9:
               document.write("这是10的case块")
               break;
               case 10:
               document.write("这是10的case块")
               break;
               default :
            document.write()
               break;
          

JS中的循环结构

/*[循环结构的步骤]
             * ①声明循环变量
             * ②判断循环条件
             * ③ 执行循环体(while{}中所有的代码)操作
             * ④ 更新循环变量
             *
             * 然后执行 ② ③  ④
             *
             * [JS中循环条件支持的数据类型]
             * ① Boolean  true 真  false 假
               ② string 非空字符串为真，空字符串为假。
               ③ Number 0为假    一切非零均为真
               ④null/nan/undefined  全为假。
               ⑤ Objict ：全为真。

//            var n = 1;   /* ①声明循环变量*/
//            while (n<=10){   /* ②  判断循环条件*/
//                document.write("nihao");   /*③ 执行循环体(while{}中所有的代码)操作*/
//                n++   /*④ 更新循环变量*/
//                n+=2
//                n=12
//            }
//          
           /*while循环特点：先判断，后执行。
            * do-while循环特点：先执行 后判断。即使初始条件不成立，do-while循环也至少先执行一次
            * var m=1
            * do {
            *     
            * }while();
            *
            * */
   
//do { 
// var b = parseInt(prompt("请输入一个数"));
//     if(b<7){
//         alert("小了");
//     }else if(b>7){
//         alert("大了");
//     }else if(b==7){
//         alert("对了");
//     }else{
//         alert("输入有误")
//     }
//} while(b!=7)
//            var n = parseInt(prompt("请输入一个整数"))
//            while(n<=100){
//                document.write("你赢了")
//                n++
//            }
            
//            var a = parseInt(prompt("您输入的本金"))
//            var b = 0;
//            var num = parseFloat(prompt("数字"));
//            var sum =a;
//            while(b<num){
//                sum+=sum*0.003;
//                b++
//            }
//            
//            document.write("年份"+num+"年<br />")
//            document.write("您的本金"+a+"元<br />")
//            document.write("您的总金额为"+sum+"元<br />");
            
//            document.write("前"+a);

// var num =parseInt(prompt("数字"))
// var a = 1
// var sum = 0;
//    while(a<=num){
//        sum +=a
//        if(a!=n)document.write(a+"+")
//        else document.write(a+"=");
//        a++;
//        
//    }

//var a =1
//
// var sum=0 , count=0;
// while(a<=1000){
//        if(a%7!=0){
//            document.write(a+" <br />");
//            sum+=a;
//            count++;
//        }
//        a++
// }
//document.write("个数"+count+"<br />")
//document.write("总和为："+sum)


//            var num = prompt("请输入一个三位正整数：");
//            
//            var bai = parseInt(num/100);
//            var shi = parseInt(num%100/10);
//            var ge =  parseInt(num%10);
//            
//            var sum  =  bai*bai*bai+shi*shi*shi+ge*ge*ge ;
//            
//            document .write(sum==num?"是水仙花数":"不是水仙花数")
//
//    var n =100;
//    while(n<=999){
//        var bai = parseInt(n/100);
//        var shi = parseInt(n%100/10);
//        var ge =  parseInt(n%10);
//        if(n  ==  bai*bai*bai+shi*shi*shi+ge*ge*ge){
//            document.write(n+"");
//        }
//        n++;
//    }
   
//     斐波
//     var a=1;
//     var b=1;
//     var c;
//     
//     var n =1;
//     while(n<=20){
//         c=a+b   /* c=2*/
////         document.write(c+"<br />");
//         a=b     /*a=1*/
//         document.write(a+"/"+c+"<br />")
//         b=c     /*b=2*/
//         n++
//     }
//        var a = parseInt(prompt("输入的个数："));
//        var b =1;
//        var sum=0;
//        while(b<=a){
//            var c = parseInt(prompt("请输入一个数"+b+"个数"));
//            sum+=c;
//            b++;
//        }
//       document.write("总和："+sum)
//        
       /*for循环
        
        * 1 for 循环有三个表达式  分别为： ① 定义循环变量 ②判断循环条件③更新循环变量
        * 三个表达式之间用；隔开
        * 三个表达式可以省略，两个；缺一不可
        * 2 for循环特点：先判断后执行
        * 3 for循环的三个表达式均可由多个部分组成，之间用逗号隔开。但是第二部分判断条件用&&链接，最终结果需要为真/假。
        * */
//     var sum = 0 ;
//     for(var a=1,b=100;a<b;a++,b--){
//         if(a<50) document.write("("+a+"+"+b+"）+");
//         else document.write("("+a+"+"+b+")=");
//         sum +=(a+b);
//     }
//    document.write(sum);
      var sum = 0;
        for(var a=1,b=100;a<b;a++,b--){
        if(a<50) document.write("("+a+"+"+b+"）+");   
        else document.write("("+a+"+"+b+"）=");
        sum +=(a+b);     
        }
       document.write(sum);