zoukankan      html  css  js  c++  java
  • 【JavaScript你需要知道的基础知识~】

    前言

    最近开始学习JavaScript,整理了一些相关的基础知识

    JS注释方式:

    1. // 单行注释(Ctrl+/ )
    2. /*
       *段落注释(Ctrl+shift+/ )
       */

    1JavaScript基础

    JavaScript:
    基于浏览器 、基于(面向)对象、事件驱动、脚本语言
    JavaScript的作用:
    表单验证,减轻服务的压力,添加页面动画效果,动态更改页面内容,Ajax网络请求(Ajax:可以实现页面局部刷新)
    JavaScript组成部分;ECMAScript(5.1/6)、DOM、BOM
    ECMAScript脚本程序语言:
    语法标准:语法;变量和数据类型;运算符;逻辑控制语句;关键字、保留字;对象
    DOM文档对象模型
    BOM浏览器对象模型

    JavaScript的基本结构:
    <script type="text/javascript">
    JS语句;
    </script>

    变量的声明和变量:
    先声明变量再赋值:
    var width; width=5;
    var——用于声明变量的关键字;width——变量名
    ...
    同时声明变量和赋值
    不声明直接赋值

    2使用JS的三种方式

    1、HTML标签中内嵌JS;
    <button onclick="alert('小样你真点啊!')">有本事点我呀!!!</button>
    2、HTML页面中直接使用JS:
    <script type="text/javascript">
    JS语句;
    </script>
    3、引用外部JS文件:
    <script language="JScript" src="JS文件路径"></script>

    【注意事项】
    1)页面中JS代码与引用JS代码,可以嵌入到HTML页面的任意位置。但是,位置不同会影响到JS代码的执行顺序;
    例如:<script>在body前面,会在页面加载之前执行JS代码;
    2)页面中JS代码,使用type="text/javascript"
    引用外部的JS文件,使用language="JScript"
    3)引用外部JS文件的<script></script>标签,必须成对出现,且标签内部不能有任何代码!

    3JS中的变量

    1、JS中变量声明的写法

    • var width = 10;//使用var声明的变量,只在当前函数作用域有效
    • width1 = 11;//不适用var,直接赋值生成的变量,默认为全局变量,整个JS文件有效
    • var a,b,c=1;//同一声明语句同时声明多个变量,变量之间用英文逗号分隔,但是,赋值需要单独赋值,例如上式中,只有c赋值为1,a b为undefined(未定义)。

      【JavaScript声明变量注意事项】

        1)JS中所有变量类型声明,均使用var关键字。变量的具体数据类型,取决于给变量赋值的执行。

        2)同一变量可在多次不同赋值时,修改变量的数据类型
          var width = 10;//width 为整型变量
          width="hahaha";//width 被改为字符串类型
        3)变量可以使用var声明,也可以省略var,[区别]不使用var,默认为全局变量
        4)同一变量名,可以多次用var声明,但是并没有任何含义,也不会报错,

          第二次之后的声明,只会被理解为赋值。


    2、变量的命名规范

    • 变量名,只能有字母,数字,下划线,$组成
    • 开头不能是数字
    • 变量区分大小写,大写字母与小写字母为不同变量


    3、变量命名名要符合驼峰法则
      变量开头为小写,之后每个单词首字母大写

      举个栗子

    •   XiaoXiZhenMeng √
    •   xiao_xi_zhen_meng √
    •   xiaoxizhenmeng ×


    4、JS中的变量的数据类型

    • Undefined:未定义,用var声明的变量,没有进行初始化赋值。var a;
    • Null:表示为空的引用。var a = null;(其中一种情况)eg:空对象,空数组。。。
    • boolean:真假,可选值true/false
    • Number:数值类型。可以是小数,也可以是正数。
    • String:字符串类型。用""和''包裹的内容,称为字符串。
    • Object(复杂数据类型):后续讲解,函数、数组等。。。


    5、常用的数值函数:

    • isNaN:用于判断一个变量或常量是否为NaN(非数值)

    使用isNaN判断时,会尝试使用Number()函数进行转换,如果能转换为数字,则不是非数值,结果为false
    "111" 纯数字字符串,false "" 空字符串,false "la" 包含其他字符,true
    true/false 布尔类型,false

    • Number():将其他类型转换为数值类型

    [字符串类型转数值]
    >>字符串为纯数值字符串,会转为对应的数字"111"->111
    >>字符串为空字符串时,会转换为0 ""->0
    >>字符串包含其他非数字字符时,不能转换 "111a"->NaN

    [布尔Boolean类型转数值]
    true->1 false->0

    [null/Undefined转数值]
    null->0 Undefined->NaN

    [Object类型转数值]
    (以后再了解哦~)先调用ValueOf方法,确定函数是否有返回值,再根据上述各种情况判断。

    • parseInt:将字符串转成数值

    >>>空字符串,不能转。结果为NaN
    >>>纯数值字符串,能转。"123"->"123" "123.5"->123(小数转化时,会直接抹去小数点,不进行四舍五入)
    >>>包含其他字符的字符串,会截取第一个非数值字符串前的数值部分。"123a456"->123 "a123b345"->NaN
    >>>parseInt只能转String类型,Boolean/null/Undefined 均为NaN

    • parseFloat:将字符串转为数值

    >>>使用方式同parseInt,但是,当转化小数字符串时,保留小数点;转化整数字符串时,保留整数;
    "123.5"->123.5 "123.0"->123

    • typeOf:用来检测变量类型

    未定义—>Undefined 字符串->string true/false->boolean 数值->Number
    对象/null->Object 函数->function

    4JS中的输出语句

    document.write();
    输出语句,将write的()中的内容打印在浏览器屏幕上
    使用时注意:除变量/常量以外的任何内容,打印时必须放在""中,变量/常量必须放到""外
    打印的内容同时有多部分组成,之间用“+”链接


    举个栗子

      document.write("输出互换前手中的纸牌:"+left+"<br />");
      alert();弹窗警告

    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 c=4
      c = ++a +2; //a=4 b=5 c=7

    document.write("a:"+a);
    document.write("b:"+b);
    document.write("c:"+c);

    2、赋值运算

    = 赋值、 += -= *= /= %=
    +=:a += 5;相当于a = a + 5;但是,前者的执行效率要比后者快,

    3、关系运算

    == 等于、=== 严格等于、 != 不等于 、>、<、>=、<=

    ===:严格等于;类型不同,返回false;类型相同,再进行下一步判断
    ==:等于;类型相同,同===;类型不同,尝试将等式两边转为数字,再判断;
    特例:null==Undefined √ ; null===Undefined ×

    4、条件运算符(多目运算)

    a>b?true:false

    有两个关键符号:?和:
    当?前面的部分运算结果为true时,执行:前面的代码;
    当?前面的部分运算结果为false时,执行:后面的代码;

    >>>多目运算符可以多层嵌套:
    例如:var jieguo =

    5、逻辑运算符

    && 与、|| 或、! 非

    6、运算符的优先级(由高到低)


    ! ++ --
    % / *
    + -
    > < >= <=
    == !=
    &&
    ||
    各种赋值= =+ *= /= %=

    5if-else结构 / switch-case结构

    • if-else结构

    1、结构写法:
    if(判断条件){
      //条件为ture时执行
    }else{
      //条件为false时执行
    }
    2、if()中的表达式,运算之后的结果应该为
    1)Boolean:true 真 ; false 假
    2)string:非空字符串为真 ;空字符串为假
    3)Number:0为假 ;一切非0均为真
    4)Null/NaN/Undefined:全为假
    5)Object:全为真
    3、else{}结构,可以根据具体情况省略

    • 多重if、阶梯if

    1、结构写法:
    if(条件一){
    //条件一成立
    }else if(条件二){
    //条件一不成立&&条件二成立

    //else if 部分,可以有多个
    }else{
    //条件一不成立&&条件二不成立
    }

    2、多重if结构中,各个判断条件是互斥的,只能选择其中一个
    3.if/else的大括号可以省略,但不提倡,如果省略,
    则if/else包含的代码只包括其后最近的一行(分号结束);
    else结构永远属于其前方最近的一个if结构。

    • 嵌套if结构

    1、结构写法:
    if(条件一){
      //条件一成立
    if(条件二){
      //条件二成立
    }else{
      //条件为false时执行
    }
    }else{
      //条件为false时执行
    }
    2、if结构可以多重嵌套,但是原则上不超过三层

    • Switch-Case结构

    1、结构写法:
    switch(表达式){
      case 常量表达式1:
        语句一;
        break;
      case 常量表达式2:
        语句二;
        break;
        。。。
      default:
        语句N
    }
    2、注意事项:
    1)switch()中的表达式,以及每个case后面的表达式,可以为任何JS支持的 数据类型;(对象和数组不同);
    2)case后面的所有常量表达式,必须各不相同,否则只会执行第一个;
    3)case后的常量可以是任何数据类型;同一个switch结构的不同case,可以是多种不同的数据类型;
    4)switch在进行判断时,采用的是全等判断===
    5)break的作用:执行完case代码后,跳出当前switch结构;
    缺少break的后果:从正确的case项开始,依次执行所有的case和defalse
    6)switch结构在判断时,只会判断一次正确答案,当遇到正确的case项后,将会不再判断后续项目,依次往下执行;
    7)switch结构的执行速率要快于多重if结构。在多路分支时,优先考虑switch结构。

    • 循环结构的步骤

    1)声明循环变量
    2)判断循环条件
    3)执行循环体(while的{}中所有代码)操作
    4)更新循环变量
    然后,循环执行2)3)4)

    • JS中循环条件支持的数据类型

    1)Boolean:true 真 ; false 假
    2)string:非空字符串为真 ;空字符串为假
    3)Number:0为假 ;一切非0均为真
    4)Null/NaN/Undefined:全为假
    5)Object:全为真

    while循环特点:先判断,在执行
    do-while循环特点:先执行,在判断;即使初始条件不成立,do-while循环也至少执行一次

    • For循环

    1、for循环有三个表达式,分别为:①定义循环变量 ② 判断循环条件 ③更新循环变量(三个表达式之间,用;分隔。)
    for循环三个表达式可以省略,两个;缺一不可
    2、for循环特点:先判断,再执行;
    3、for循环三个表达式,均可以有多部分组成,之间用逗号分隔,但是第二部分判断条件
    需要用&&链接,最终结果需要为真/假

    • 循环控制语句

    1、break:终止本层循环,继续执行循环后面的语句;
    当循环有多层时,break只会跳过一层循环;
    2、continue:跳过本次循环,继续执行下一次循环;
    对于for,continue执行后,继续执行循环变量更新语句n++
    对于while,do-while,continue执行后,继续执行循环条件,
    判断;所以使用这两个循环时必须注意continue一定要在n++之后,否则会造成死循环。

     

     

  • 相关阅读:
    书_Delphi
    20160226
    SVG_style_script
    辅助
    电影_Z
    Windows下软件调试
    20160221
    Qt5.3.2_vs10_发布时所需DLL的路径
    android intent 传数据
    android 消息机制
  • 原文地址:https://www.cnblogs.com/hope666/p/6659870.html
Copyright © 2011-2022 走看看