zoukankan      html  css  js  c++  java
  • 8.20 一周学习总结

    一、使用JS的三种方式
      1、html标签中直接内嵌JS
           <button onclick="alert('小婊砸!你真点!')">有本事点我呀!!</button>
           不符合W3C内容与行为分离的要求,不提倡使用

      2、html页面中使用<script></script>包裹JS代码
           <script type="text/javascript">


           JS多行注释,中间 * 号可删掉 Ctrl+Shift+/


           JS单行注释 Ctrl+/

           //JS代码
          </script>
          >>><script></script>标签可以放到页面中任何一个位置

       3、引入外部js文件
         <script language="JavaScript" src="js/01.js"></script>

        注意事项:
                     ①<script></script>标签可以嵌入到页面中任意位置;但位置不同会导致JS代码执行顺序不同
                    例如:<script></script>放到<body></body>前面,则JS代码会在页面加载之前就执行

         ②引入外部JS代码,<script></script>必须是成对出现的代码,而且标签中不能再有任何的JS代码(有也不会生效)

    二、JS中变量

      1、JS中变量声明的写法:

           var num=10;//使用var声明的变量,属于局部变量,只在当前作用域有效
           num=10; //不用var声明的变量,属于全局变量(即使是全局变量,作用范围也仅仅是这一行+这一行往下的范围,
           再往上,超出了它的作用域),在整个JS文件中有效
           var x=8,y,z=10;使用一行语句,同时声明多个变量,这条语句表明,x初值8,y未赋初值,z初值10
     
         声明变量的注意事项
         ①JS中所有变量的声明,均使用var关键字。变量具体是什么类型,取决于赋给变量值的类型。
     
       ②JS中同一个变量,可以在多次不同赋值时,修改变量的数据类型:
          var a=10; //初始声明时,a属于int型
          a = "哈哈哈";//重复赋值时,a被修改为string型
     
      ③变量可以使用var声明,也可不使用var声明
         [区别]:使用var声明为局部变量,不使用var声明为全局变量
     
      ④只用var声明,但是不赋值,结果为undefined(未赋值)
        例如:var a;//a为undefined
       但不赋值也不声明a,直接使用会报错
     
     ⑤同一变量名,可以多次使用 var声明。但后面的var并没有什么用,第二次var声明时,只会被理解为普通的赋值操作。
     
     
      2、变量名的命名要求:
      ①变量名只能有字母数字下划线组成
     ②开头不能是数字
     ③变量名区分大小写 ,大写字母与小写字母为不同变量
       大写字母用来声明常量
     
      3、变量名命名规范:
      ①要符合小驼峰法则(骆驼命名法),第一个单词首字母小写,剩下的每个单词首字母大写,myNameIsHuiRui
     ②匈牙利命名法,所有字母小写,下划线分隔,my_name_is_hui_rui
     
     4、JS中的数据类型
      ①Undefined:未定义。已经使用var声明,但没有赋值的变量,例: var a;
     ②Null:表示空的引用。
     ③Boolean:布尔类型。表示真假,只有两个值:true/false
    ④Number:数值类型。可以是整数,也可以是小数
    ⑤String:字符串类型,用 "" 或 '' 包裹的内容,称为字符串
     ⑥Object:对象类型

     面试重点:6种数据类型

     5、[常用的数值函数]
     ①isNaN():判断一个变量或常量是否是NaN(not a num 非数值);
     使用isNaN()判断时,会尝试使用Number()函数进行转换,若能进行转换成数字,则不是NaN,结果为false

     ②Number()函数:将其他类型的数据尝试转为数值型
       字符串类型
      >>>字符串为纯数值字符串,转为对应的数字 "111"->111
     字符串为空字符串, 转为数字0 ""->0
    字符串包含其他任意字符时,都不能转为数字 "1a"->NaN
    *
    Boolean类型: true转为1,false转为0
    Null/Undefined:Null->0 Undefined->NaN

    ③ParseInt():将字符串转换为整数类型
      >>>纯数值字符串,能转。
      "12"->12;"12.9"->12(小数转换时,不进行四舍五入)
     
      >>>空字符串不能转 ""->NaN
     >>>包含其他字符的字符串,会截取第一个非数值字符串前的数字部分 "123a456"->123 "a123456"->NaN
     
     >>>ParseInt()只能转字符串,转其他类型,全是NaN
     
      面试重点:Number()函数与ParseInt()函数的区别:a、Number()函数可以转各种数据类型,
      ParseInt()函数只能转字符串
     b、两者在转字符串时,结果全然不同,见上详解
     
      ④ParseFloat():将字符串转换为数值型
     转换规则与ParseInt()相同,只是如果有小数点,则保留小数点,如果没有,则依然是整数
     "12.5"->12.5 "12"->12
     
     ⑤typrof():检测变量数据类型
     字符串->String 数值->Number true/false->Boolean
    未定义->Undefined 对象{}/Null->Object 函数->function

    三、JS中常用的输入输出语句

     1、document.write():将()中的内容打印输出到浏览器屏幕上

         使用需注意:除变量、常量外的所有内容,必须放到 "" 中; 变量和常量必须放到 "" 外;
        如果同时有变量和字符串,必须用+连接;
        eg: document.write("左手中的纸牌: "+left+"<br />");

    2、alert():使用弹窗输出
         弹窗警告,()中的内容与上述要求相同

         

    3、prompt():弹窗输入
        接受两部分布参数: ①输入框上面的提示内容,可选
                                      ②输入框里面的默认信息,可选

        当只写一部分时,表示输入框上面的提示内容
        可以定义变量,接受输入的内容。点击确定按钮,变量将被赋值为输入的内容,点击取消按钮,变量将被赋值为null
        输入内容时,默认接受的数据类型都是字符串

    四、算术运算符

      1、算术运算(单目运算符) : + 、 -、 *、 /、 %、 ++ 、 --
           加 减 乘 除 取余 自增运算符 自增运算符

           +: 有两种作用,连接字符串/加法运算符。当 + 两边全为数字时,进行加法运算;
           当 + 两边有任意一边为字符串时,起连接字符串的作用,,连接之后的结果为字符串

          除 + 外,其余符号运算时,会先尝试将左右变量用Number函数转为数字

          / :结果将会保留小数(可以保存16位)

         ++: 自增运算符 ,将变量在原有基础上加1
         --: 自减运算符 ,将变量在原有基础上减1


        a++ 和 ++a的异同:
       ①相同点:无论 a++ 还是 ++a,运算完后结果相同
       ②不同点:
       a++:先用a的值去运算,语句执行完后a再+1
       ++a:先把a的值+1,然后再用加完后的值(a+1)去执行语句
       eg:var a=3,b=a++ +2,c=++a +2;
       alert(a);
       alert(b);
       alert(c);
       结果为:5 5 7


    2、赋值运算: = += -= *= /= %=
    赋值号

    +=: a+=b,相当于 a=a+b;但是,前者运算效率快,推荐使用前者

    3、关系运算: ==、 !=、 === !== >、<、>=、<=
    严格等于 不严格等于
    >>> 关系运算符,运算之后的结果只能是Boolean类型,true/false
    >>> 判断一个数字是否处于某个区间,必须用 && 连接
    eg:a<10 && a>0 √
    10>a>0 ×
    >>> ===: 严格等于;不但要求值相同,类型也必须相同,类型不同,结果直接为false;类型相同,再进行下一步判断

    ==: 等于。类型相同,与===效果一样。类型不同时,会尝试用Number函数将两边转为数字,再进行判断
    特例:aNull==false × Null==Undefined √ NaN==NaN ×

    4、条件运算符(多目运算): a>b?true:false

    有两个重要符号: ? 和 :
    ? 前面部分 成立,执行: 前面的代码
    ? 后面部分 成立,执行: 后面的代码

    :两边可以为数值, 则整个式子用于赋值 var a= 1<2?1:2;
    :两边可以为代码块,将直接执行代码 1<2?alert(1):alert(2);
    多目运算符可以直接嵌套 var a=1<2?alert(1):(1>0?4:5);

    5、位运算符、 逻辑运算符: &&、 ||、 ! && 和 || 同时存在时,&&的优先级高于||
    与 或 非

    && 两边都成立,结果为true
    || 两边有任意一边成立,结果为true
    alert(!true);

    6、运算符的优先级
    () 小括号最高
    ! ++ -- 单目运算符
    * / %
    > >= < <=
    + -
    == !=
    && && 和 || 同时存在时,&&的优先级高于||
    ||
    = += -= *= /= 最低的是各种赋值

    五、if-else 结构1、结构的写法:

     if(条件){
     //条件为 true 时,执行 if 中语句
    }

    else{
    //条件为 false 时,执行 else 中语句
     }

     2、注意事项:
     ①else{} 语句块可以根据情况省略
     ②if 和 else 后的大括号可以省略,但是省略{}后,if 和 else 只能能跟一条语句,所以并不建议省略 {}

    3、if 中的判断条件,支持的情况——面试常考
     ①Boolean: true 为真, false 为假
     ②String :空字符串为假,所有非空字符串(空格也算非空字符串)为真
    ③Number :零为假,一切非零数字为真
    ④Null/Undefined/NaN :假
    ⑤Object :全为真


    多重 if、阶梯 if 结构
     1、结构写法:
     if(条件1){
    //条件1成立执行
     }

    else if(条件2){
    //条件1不成立且条件2执行
    }


    else{
     //所有条件都不成立时执行
     }

     2、多重if结构中,各个判断条件是互斥的,选择其中一条执行;遇到正确选项并执行完后,直接跳出结构,不再判断后续分支



    嵌套 if 结构
     1、结构写法:
     if(条件1){
     //条件1成立
    if(条件2){
     //条件1不成立 && //条件2成立
     }

     else{
     //条件1不成立 && //条件2不成立
    }
     }

     else{
    //条件1不成立
     }


    2、嵌套 if 结构中,如果省略 {},则 else 结构 永远属于离它最近的一个 if 结构

    3、嵌套结构可以多层嵌套,但一般不推荐超过三层
         能用多重 if 结构的一般不推荐使用嵌套 if

  • 相关阅读:
    保持URL不变和数字验证
    centOS ftp key?
    本地环境测试二级域名
    linux 解决You don't have permission to access 问题
    php smarty section loop
    php header Cannot modify header information headers already sent by ... 解决办法
    linux部分命令
    Linux 里面的文件操作权限说明
    用IT网络和安全专业人士视角来裁剪云的定义
    SQL Server 2008 R2炫酷报表"智"作有方
  • 原文地址:https://www.cnblogs.com/HRurl/p/7402050.html
Copyright © 2011-2022 走看看