JavaScript入门

芝士 2019-08-23 10:55:20
原文地址:https://segmentfault.com/a/1190000020132188
  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                         变量
拼音                              数据类型
汉字                                  操作符 
语法                                 表达式
成语,古诗词,
史记【文言文】,文章         流程控制语句
写作,写字

声明:该文章系转载,转载该文章的目的在于更广泛的传递信息,并不代表本网站赞同其观点,文章内容仅供参考。

本站是一个个人学习和交流平台,网站上部分文章为网站管理员和网友从相关媒体转载而来,并不用于任何商业目的,内容为作者个人观点, 并不代表本网站赞同其观点和对其真实性负责。

我们已经尽可能的对作者和来源进行了通告,但是可能由于能力有限或疏忽,导致作者和来源有误,亦可能您并不期望您的作品在我们的网站上发布。我们为这些问题向您致歉,如果您在我站上发现此类问题,请及时联系我们,我们将根据您的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。