读廖雪峰老师《JavaScript教程》笔记——入门篇

时间: 2023-08-15 admin 互联网

读廖雪峰老师《JavaScript教程》笔记——入门篇

读廖雪峰老师《JavaScript教程》笔记——入门篇

入门篇

  • 一.导论
    • 1.什么是JavaScript语言
    • 2.为什么学习JavaScript
  • 二.历史
  • 三.基础语法
    • 1.语句
    • 2.变量
    • 3.标识符
    • 4.注释
    • 5.区块
    • 6.条件语句
      • 6.1 if 语句
      • 6.2 if...else.. 语句
      • 6.3 if...else if... else语句
      • 6.4 switch语句(分支语句)
      • 6.5 三元运算符 ...? .. :..
    • 7.循环语句
      • 7.1 while语句
      • 7.2 do...while语句
      • 7.3 for 循环语句
      • 7.4 break语句和continue语句
      • 7.5 label 标签

一.导论

1.什么是JavaScript语言

轻量级的脚本语言
嵌入式语言

2.为什么学习JavaScript

  • 操作浏览器的能力
  • 广泛的使用领域
  • 易学习
  • 强大的性能
  • 开放性
  • 社区支持和就业机会

二.历史

三.基础语法

1.语句

JavaScript程序的执行单位是行,语句以分号结尾;

    var a=1+2;  var b=a+2;

2.变量

2.1 含义:变量是对值具名的引用,变量就是为值起名;
2.2 声明变量
注:

  • 变量名区分大小写;
  • 只声明变量而没有赋值,变量值为undefined;
  • 变量没声明没赋值直接使用会报错;
  • 重复声明无效,但重复声明且赋值,后声明的会覆盖前声明的;
//   1.声明变量

    var a;          //直接声明  
    console.log("a:"+a);  //undefined
    var b=1;       //声明并赋值  
    console.log("b:"+b);  //1
    var c,d;       //一次声明多个变量 

    e=1;           //未声明直接赋值  等同于  var e=1;
    console.log("e:"+e);  //1

    var f=0;
    var F=1;     //大小写不冲突

    x         //变量没有声明就直接使用   报错
    console.log("x:"+x);  
    //Uncaught ReferenceError: x is not defined

变量声明的情况

  // 2.重复声明的情况区分
    console.log("重复声明的情况"); 

      var g=1;  
        g=2;       //重新赋值的情况
      console.log("g:"+g);     // 2
    

      var i=1;  
      var i;  //重复声明未赋值,无影响;
      console.log("i:"+i);     //1 

      var p=1;  
      var p=2;  //重复声明并且赋值的情况,覆盖前面声明的变量;
      console.log("p:"+p);     //2

重复声明的情况(注意区分)

2.3 变量提升


    // 3.变量提升 
     
     console.log("声明前t:"+t); //声明前t:undefined
      var t=0;

     console.log("声明后t:"+t);  //声明后t:0

    // 类似于
    var t;  //变量声明提前,但是赋值并没有提前
    console.log("声明前t:"+t); //声明前t:undefined
    t=0;
    console.log("声明后t:"+t);//声明后t:0

原因:js引擎的工作方式是先解析代码,获得所有被声明的变量,然后一行一行的运行,所有变量声明语句都会提升到代码头部;

3.标识符

含义: 指用来识别各种值的合法名称(包括:变量名,函数名等)

  // 标识符
       var 1num;  //不符合 ,
       //报错Uncaught SyntaxError: Invalid or unexpected token
       var _num;  //符合
       var $num; //符合

标识符命名规则:

  • 第一个字符:任意的unicode字母(英文字母和其他语言都可以),以及美元符合$和下划线_;
  • 第二字符及以后的字符:任意的unicode字母(英文字母和其他语言都可以),以及美元符合$和下划线_和数字(0-9);

4.注释

  • 单行注释 //
  • 多行注释 /* */
      
      // 单行注释

      /*
      多行注释
      */ 

5.区块

JavaScript 使用大括号,将多个相关的语句组合在一起,称为“区块”;
注:区块与作用域

   // var 声明
      {
        var a=1;
      }
      console.log("a:"+a);//1
          // let声明 
      {
        let b=1;
      }
      console.log("b:"+b);  //报错
      //Uncaught ReferenceError: b is not defined

6.条件语句

6.1 if 语句

格式:if(判断条件) 一个执行语句 ;
/或者 if(判断语句){多个执行语句};
作用:判断一个表达式的布尔值,然后根据布尔值的真伪,执行不同的语句;
示例:

     // if语句  格式一
      var x=1;
      if(x==1) console.log("一");

      // if语句  格式二
      var x=0;
      if(x==0) {
        x+1;
        console.log("二");
        }

6.2 if…else… 语句

格式:if(判断条件) {true时执行语句 }else{false 执行语句};
作用:判断一个表达式的布尔值,然后根据布尔值的真伪,执行不同的语句;
示例:

    // if ...else 语句
      var x=1;
      if(x<0) {
        console.log("x是负数");
      }else{
        console.log("x是正数");
      }

6.3 if…else if… else语句

格式:if(判断条件1) {执行语句1 }else if(判断条件2){执行语句2}…else{执行语句x};
作用:判断一个表达式的布尔值,然后根据布尔值的真伪,执行不同的语句;
示例:

    // if ...else if ...else 语句
         var x=4;
      if(x==1) {
        console.log("星期一");
      }else if(x==2){
        console.log("星期二");
      }else{
        console.log("星期x");
      }

6.4 switch语句(分支语句)

格式:
switch (判断值){
case x:执行语句1;
break;
case y:执行语句2;
break;
default:最终执行的语句;
}
作用:根据判断值执行对应的语句,当没有匹配的语句时直接执行default语句;
示例:


      // switch语句
      var y=7;
      switch(y){
        case 1:console.log("星期一");
        break;
        case 2:console.log("星期二");
        break;
        case 3:console.log("星期三");
        break;
        case 4:console.log("星期四");
        break;
        case 5:console.log("星期五");
        break;
        case 6:console.log("星期六");
        break;
        default:console.log("星期日");
      }

注意:case采用严格相等运算符;break 是跳出循环;default 无匹配的情况下默认执行;

6.5 三元运算符 …? … :…

格式:判断语句?执行语句1:执行语句2;
作用:相对于if else的作用
示例:

// 三元运算符
var k=1;
var j=2;
k>j?console.log("最大值"+k):console.log("最大值"+j);

7.循环语句

7.1 while语句

格式:while(条件) 语句 ;
或者 while(条件) {语句};
作用:while语句包括一个循环条件和代码块;只要条件为真,就不断的执行代码
示例:

  // while语句
      var i=0;
      while(i<10){
        console.log(i);
        i++
      };  // 0  1 2 3 4 5 6 7 8 9

7.2 do…while语句

格式:do{循环体}while(判断条件);
作用:于while类似,唯一的区别就是先运行一次循环体,然后判断循环条件
示例:

// do while语句
var z=0;
do{  
  console.log(z);
  z++; 
        }while(z<10);   // 0  1 2 3 4 5 6 7 8 9

7.3 for 循环语句

格式:for(初始化语句;条件;递增表达式) 语句;
或者 for(初始化语句;条件;递增表达式) {语句}
作用:for循环语句是另一种形式,可以指定循环起点,循环终止条件;
示例:

// for循环
 for(var a=0;a<10;a++){
  console.log(a);  // 0  1 2 3 4 5 6 7 8 9
 }

 for(var a=0;a<10;a++){
 }
 console.log(a);  //10

注:

  • 初始条件:确定循环变量的初始值,只在循环开始是时候执行一次;
  • 条件表达式:每轮循环开始时。都要执行这个表达式,值为真才接着循环;
  • 递增表达式每一轮最后执行的操作,通常用来递增循环变量;

7.4 break语句和continue语句

break:跳出循环或者代码块;
continue:跳出当前的循环,进入下一次循环;

7.5 label 标签

语句的前面有标签(label),相对于定位符,用于跳转到程序是任意位置;