JavaScript入门

9次阅读

共计 3804 个字符,预计需要花费 10 分钟才能阅读完成。

  1. Javascript 介绍
    编程(数据结构,算法,内存分配)
    表单验证

    需要一门语言可以直接运行在浏览器中,来完成表单验证的功能。

    浏览器厂商

    网景 firefox
        js 标准 
        js 解释器
    
    IE
        js
        js 解释器
    
    google
        js
        js 解释器
    
    ECMAScript
    
  2. Javascript
    1) ECMAScrpt【js 标准】(兼容器 100%)

    注释 //、/**/
    变量
    操作符
    流程控制语句
    数组
    对象
    函数
    正则表达式
    ...
    所有的 JS 解释器都可以兼容 ECMAScript【lodash】ECMAScript 库
    

    2) DOM【js 操作 html 的 api】

    Document object model     文档对象模型
    var dom = document.getElementsByTagName("input");
    var dom = document.getElementsById("input_name");
    dom.onclick = function(){}
    js 语言
        基础语法
        基础库【jQuery】DOM 库

    3) BOM【js 操作浏览器的 api】

    Browser Object model 浏览器对象模型
    alert()/prompt()/confirm()
    setInterval()
    setTimeout()
    XMLHttpReqeust
    ajax
    
  3. 解释器
    浏览器【dom 操作,动画,表单校验,ajax 异步交互】

    nodeJS【网络编程(http 模块)数据库操作(mysql),io 文件 (file),iot(…)】
    google v8 => nodeJS
    可以安装 linux window macos unix

  4. 学习方式
    环境:ubuntu16.04
    软件:nodejs、vi(spf13)、git
    使用 sudoer 用户登录
    在家目录中编写测试代码
  5. hello world
    1) 编写代码

    $ vi hello.js

    2) 执行代码

    $ node hello
    或
    $ node hello.js
    
  6. js 特点
    1) 解释型语言

    js -> nodejs(js 解释器)

    2) 弱类型语言

    变量的数据类型取决于值的数据类型
    var a ;
    a = 2;        // a 的数据类型为 number
    a = true;    // a 的数据类型为 boolean

    3) 顺序解释执行
    4) 既可以作为前端脚本语言,也可以作为后端语言,取决于应用平台(浏览器 / 操作系统)和使用的框架(dom、jquery/http、mysql、file)

    Java
    编译型语言

    java -> .class -> jvm(java 解释器)

    强类型语言

    变量的数据类型取决于声明的数据类型
    int a ;
    a = 3;
    a = 8;
    
    无符号整数
        char
    有符号整数
        byte short int long
    有符号小数
        float double
    布尔类型
        boolean
    
  7. 数据类型
    基本数据类型(用于保存单个值)

    字符串类型 string
        var a = "hello world"
        var a = 'hello world'
        var a = '1';
        var a = '{"name":"terry","age":12}';
    数字类型 number
        var a = 3;
        var a = 3.1;
        var a = 3.0;
    
        var a = 011;
        var a = 0x11;
        var a = 1.3e10;
    
        var a = 1/0;
    
    布尔类型 boolean
        var a = true;
        var a = false;
    
    null
        表示空对象
        var gf = null;        // 经常做,表示占位
    
    undefined
        表示未定义
        var a;
        console.log(a);
    
        var b = undefined;    // 很少这么做
    
    undefined 与 null 关系
    undefined 继承 null,所有 undefined == null 结果为 true, 但是 null 表示空对象,undefined 表示未定义
    

    引用数据类型(保存多个值)

    对象     var a = {name:"terry",age:12};
    数组     var arr = [1,2,3,4];
    函数
    正则表达式
    ...
    
内存图:变量都维护在栈区,基本数据类型的值保存在栈区,而引用数据类型的引用地址保存在栈区,值保存在堆区



  1. 变量
    1) 变量声明

    var a;
    var b;

    2) 变量初始化

    a =3;
    b = "hello"
    
    var c = true;
    => 
    var c;
    c = true;

    3) 变量使用

    var result = a + 1;
    console.log(b);
    

    var a = 3;

    a 是一个基本数据类型的变量,a 的变量类型是 number,a 是一个整数类型
    变量是指向一个值
    基本数据类型类型的变量保存的单个值

    4) 变量的提升

    在所有代码执行之前,js 解释器会将 js 中所有的 var 声明的变量提升。
  2. 编程语言
    1) 语法
    2) 系统库
    3) 解释器

    java     -> jvm
    c         -> linux
    js         -> nodejs/ 浏览器
    

10. 内置函数

console.log()

如何判断变量的数据类型
    typeof v

    var a = "hello world";
    if((typeof a) == "string"){ }
    if(a == "null"){}
如何判断一个变量是否是有穷的
    isFinite();
    当参数为无穷大或者小返回 false
如何判断一个变量是否是 NaN
    isNaN()
    当参数为 NaN 返回 true
  1. 操作符(运算符)
    1) 算术运算符(number)

    +         +=
    -         -=
    *         *=
    /            /=
    %            %=

    var a = 3;
    var result = a + 3;
    result += 3;
    =》result = result + 3;
2) 一元运算符(number)
    +
    -
        var a = "12";
        +a;
        -a;
        经常用于类型转换
    ++
    --
        var a = 12;
        a++;
        ++a;    //a = 14
        var result = ++a+a++;
        /*
            a = 14;
            ++a                         //a = 15;
            result = a + a     //result = 30
            a++                         //a = 16
        */
        console.log(a);
        console.log(result);
3) 逻辑运算符(短路运算符)
    && 
        var age= 12;
        var gender = "male"

        age > 18 && gender == "male"

        并且,当第一个表达式为假,就可以确定整个表达式结果为假,这时候无需判断第二个表达式,将第一个表达式运算结果返回;当第一个表达式为真,整个表达式的结果取决于第二个表达式,将第二个表达式运算结果返回。var result = "hello" && 12;
    ||

    !
        !true                 false
        !false            true
        !!true          true
        !!"hello"     true    将其他数据类型转化为 boolean
4) 比较运算符
    ==
    !=
        比较两个变量的值,当值的数据类型不一样的时候,先转换为相同类型的然后再比较
        当比较引用数据类型的时候,比较的是内存地址
    ===
    !==
        先比较两个变量的数据类型,数据数据类型不一样,返回 false,否则继续比较值

        1 == "1"    //true
        1 === "1"    //false
    > >=
    < <=
5) 三目运算符
    exp1 ? exp2 : exp3
    当 exp1 为真,返回 exp2,否则返回 exp3

    var age = 22;
    var result = age >= 18 ? "成年人":"未成年人"
    =>
    var result;
    var age = 22;
    if(age >= 18){result = "成年人";} else {result = "未成年人";}

6) 拼接运算符
    字符串与任何其他数据类型相加都是字符串拼接
    "terry" + 2        //'terry2'
    如何将其他数据类型转换为字符串
    true+""

7) 赋值运算符
    var a = 3 + 1;
    将 3 + 1 的结果赋值给 a

#8) 位运算符(number, 转换为二进制再运算)
    ^
    &
    |

    1&2
  1. 类型转换
    string

    String(v)
    +""
    v.toString()    // 不适用于 null,undefined
    

    boolean

    Bollean(v)
    !!v
    null                 false
    undefined     false
    NaN                 false
    Infinite         true
    0                     false
    ""                     false
    {}                     true
    

    number

    Number(v)
    +v
    -(-v)
        true             1
        false         0
        undefined NaN
    
    parseInt(v)         v 为字符串
        "12.3"         12
        "12abc"     12
        "a12abc"     NaN
    parseFloat(v)
        "12.3"         12.3
        "12abc"     12
        "a12abc"     NaN
    
  2. 表达式
    操作符 + 操作数
    表达式以 ’;’ 作为结束

    var a = 3;
    var result = a>3;

  3. 流程控制语句

    1. 分支语句
      1) if else

      
      if(exp1) {exp2}
      exp3
      exp1 可以为任意数据类型,在执行的时候先判断 exp1 为 true 还是 false, 如果为 true 执行 exp2,exp3 始终都会执行
      
      if(exp1){exp2} else {exp3}
      如果 exp1 为 true, 执行 exp2,否则执行 exp3
      
      if(exp1){exp2} else if(exp3){exp4} else {exp5}
      如果 exp1 为 true,执行 exp2;如果 exp1 为 false,判断 exp3,如果 exp3 为 true,执行 exp4,否则执行 exp5
      
      课堂作业
          var day = 3;
          1     今天是周一
          2     今天是周二
          ...
          6,7 今天是周末

      2) switch

      var day = 3;
      switch(day){
          case 常量 1:
              代码块 1
              break;
          case 常量 2:
              代码块 2
              break;
          ...
          default :
              代码块 n
      }
      
      day === 常量 1     =》代码块 1
      day === 常量 2    =》代码块 2
      ...
      代码块 n
      
      注意:1. case 代码块中的 break 不能省略
          2. default 可以放在代码块的上部,中部,底部,如果放在上部或者中部,一定不能省略 break
          3. 变量与常量对比的时候使用 "==="
      
2. 循环语句



a b c d                         变量
拼音                              数据类型
汉字                                  操作符 
语法                                 表达式
成语,古诗词,史记【文言文】,文章         流程控制语句
写作,写字

























正文完
 0