javascript学习总结

javascript学习总结

  • 前言
  • 一、JavaScript是什么?
  • 二、JavaScript使用
    • 2.1、JavaScript 输出
    • 2.2、JavaScript 语法
        • 2.2.1、JavaScript 值
        • 2.2.2、JavaScript 运算符
        • 2.2.3、JavaScript 关键词
        • 2.2.4、JavaScript 注释
        • 2.2.5、JavaScript 数据类型
        • 2.2.7、JavaScript条件语句
        • 2.2.8、JavaScript循环语句
    • 2.3、JavaScript 链式语法


前言

这篇笔记主要记录了我在学习JavaScript时的重点知识总结。通过web应用基础这门课程的学习,我对于JavaScript是什么,JavaScript的基本用法和语法有了初步的了解。


一、JavaScript是什么?

JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码,可以改变html悲痛。JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。


二、JavaScript使用

  • 标签之间。

  • 中的 JavaScript:可以在 HTML 文档中放入任意数量的脚本。脚本可位于 HTML 的 部分中,或者同时存在于两个部分。一般做法是把脚本全部放在,或者放在页面底部,可让编写html代码时更加清晰,不会干扰道页面内容。

  • 中的 JavaScript函数被放置于 HTML 页面的 部分。示例中的函数会在按钮被点击时调用。

     <!DOCTYPE html>
     <html>
     <head>
     <script>
     function myFunction() {
             document.getElementById("demo").innerHTML = "段落被更改。";
     }
     </script>
     </head>
     <body>
          <h1>一张网页</h1>
          <p id="demo">一个段落</p>
          <button type="button" onclick="myFunction()">试一试</button>
     </body>
     </html>
    
  • 中的 JavaScript函数被放置于 HTML 页面的 部分。示例中的点函数会在按钮被点击时调用。

      <!DOCTYPE html>
      <html>
      <body> 
     <h1>A Web Page</h1>
     <p id="demo">一个段落</p>
     <button type="button" onclick="myFunction()">试一试</button>
     <script>
     function myFunction() {
           document.getElementById("demo").innerHTML = "段落被更改。";
       }
    </script>
    </body>
    </html>
    
  • JavaScript 函数是一种 JavaScript 代码块,它可以在调用时被执行。

2.1、JavaScript 输出

JavaScript 能够以不同方式“显示”数据:

  • 使用 window.alert() 写入警告框
  • 使用 document.write() 写入 HTML 输出
  • 使用 innerHTML 写入 HTML 元素
  • 使用 console.log() 写入浏览器控制台

2.2、JavaScript 语法

JavaScript 是一个程序语言。语法规则定义了语言结构。

2.2.1、JavaScript 值

JavaScript 语句定义两种类型的值:混合值和变量值。
混合值被称为字面量(literal)。变量值被称为变量。通常使用var来声明变量。
字面量:写数值时有无小数点均可以。字符串是文本,需要由双引号或单引号包围。
变量:用于存储数据值。JavaScript 使用关键字 var 来定义变量, 使用等号=来为变量赋值。

var x, length
x = 5
length = 6

2.2.2、JavaScript 运算符

  • JavaScript 使用算数运算符(+ - * /)来计算值;
  • JavaScript 使用赋值运算符(=)向变量赋值。
  • JavaScript还有关系运算符,关系运算符在逻辑语句中使用,以测定变量或值是否相等,例如'<','>','<=','>='
  • JavaScript 使用逻辑运算符测定变量或值之间的逻辑,常用逻辑运算符'&&','||','!'
  • JavaScript 使用比较运算符来比较两个值是否相等,如果相等会返回true,否则返回false。使用 == 来做相等运算,使用 != 来做不相等运算,使用 === 来做全等运算,使用 !== 来做不全等运算

2.2.3、JavaScript 关键词

JavaScript 关键词用于标识被执行的动作,JavaScript有许多关键字,int,else,let等等。

2.2.4、JavaScript 注释

JavaScript 使用双斜杠//来添加单行注释,多行注释以 /* 开始,以 */ 结尾。

2.2.5、JavaScript 数据类型

JavaScript 有多种数据类型:数字,字符串,数组,对象等等。
主要分为两类:值类型(基本类型)和引用数据类型(对象类型)。

 tips:
   1、JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型。
   2、变量的数据类型可以使用 typeof 操作符来查看。
   3、字符串是存储字符(比如 "Bill Gates")的变量。字符串可以是引号中的任意文本。
   4、JavaScript 只有一种数字类型。数字可以带小数点,也可以不带。
   5、布尔(逻辑)只能有两个值:true 或 false。

声明数组、对象和变量类型示例:

 //创建数组方法一
 var cars = ["Saab", "Volvo", "BMW"];
 //创建数组方法二
 var car1 = "Saab";
 var car2 = "Volvo";
 var car3 = "BMW"; 
 //创建数组方法三
 var cars = new Array("Saab", "Volvo", "BMW");
 //声明JavaScript 对象
 var person={firstname:"John", lastname:"Doe", id:5566};
 //声明变量类型
 var carname=new String;
 var x=      new Number;
 var y=      new Boolean;
 var cars=   new Array;
 var person= new Object;

**2.2.6、JavaScript 类型转换
强制类型转换指将一个数据类型强制转换为其它的数据类型。一般是指,将其它的数据类型转换为String、Number、Boolean。Number() 转换数值,String() 转换字符串,Boolean() 转换布尔值。

  • 全局方法 String() 能够将布尔转换为字符串。布尔方法 toString() 同理。

        //全局方法 String() 
        String(false)        // 返回 "false"
        String(true)         // 返回 "true"
        //布尔方法 toString() 
        false.toString()     // 返回 "false"
        true.toString()      // 返回 "true"
        //全局方法 String() 可将日期转换为字符串。
        String(Date())      "demo1">// 返回 "Thu Jun 23 2022  21:22:38 GMT+0800 (中国标准时间)"
        //日期方法 toString() 同理。
        Date().toString()   "demo2">// 返回 "Thu Jun 23 2022 21:22:38 GMT+0800 (中国标准时间)"
        //全局方法 String() 能够把数字转换为字符串。
        String(x)         // 从数值变量 x 返回字符串
        String(123)       // 从数值文本 123 返回字符串
        String(100 + 23)  // 从表达式中的数值返回字符串
        //数字方法 toString() 同理。
        x.toString()
        (123).toString()
        (100 + 23).toString()
    
  • 全局方法 Number() 可把字符串转换为数字。

     Number("3.14")    // 返回 3.14
     Number(" ")       // 返回 0
     Number("")        // 返回 0
     Number("99 88")   // 返回 NaN
     //全局方法 Number() 也可把布尔转换为数字。
     Number(false)     // 返回 0
     Number(true)      // 返回 1
     //日期方法 getTime() 同理。
     d = new Date();
     d.getTime()        "demo4">// 返回 1655990558350
    
  • 将其它的数据类型转换为Boolean,只能使用Boolean()函数。使用Boolean()函数,数字 —> 布尔,除了0和NaN,其余的都是true,字符串 —> 布尔,除了空串,其余的都是true,null和undefined都会转换为false,对象也会转换为true

2.2.7、JavaScript条件语句

  1. if…else,是最基本的控制语句。

     //用法一
      if (条件) {
          如果条件为 true 时执行的代码
      } 
      //用法二
      if (条件) {
         条件为 true 时执行的代码块
         } else { 
         条件为 false 时执行的代码块
      }
      //用法三
      if (条件 1) {
         条件 1true 时执行的代码块
      } else if (条件 2) {
         条件 1false 而条件 2true 时执行的代码块
      } else {
         条件 1 和条件 2 同时为 false 时执行的代码块
      }
    
  2. switch…case是另一种流程控制语句。switch语句更适用于多条分支使用同一条语句的情况。

        switch (语句) {
              case 表达式1:
                   语句...
              case 表达式2:
                   语句...
              default:
                   语句...
         }
    

2.2.8、JavaScript循环语句

JavaScript有三大循环语句:

  • for - 循环代码块一定的次数,for/in - 循环遍历对象的属性

       for (语句 1; 语句 2; 语句 3)
       {
           被执行的代码块
        }//语句 1 (代码块)开始前执行,语句 2 定义运行循环(代码块)的条件,语句 3 在循环(代码块)已被执行之后执行
    
  • while - 当指定的条件为 true 时循环指定的代码块

    while (条件)
    {
        需要执行的代码
     }
    
  • do/while - 同样当指定的条件为 true 时循环指定的代码块

     do
      {
        需要执行的代码
      }while (条件);
    

2.3、JavaScript 链式语法

让每个函数返回 this代表包含该函数的对象,这样其他函数就可以立即被调用。

  • 以函数形式调用时,this永远都是window
  • 以方法的形式调用时,this是调用方法的对象
  • 以构造函数的形式调用时,this是新创建的那个对象
  • 使用call和apply调用时,this是传入的那个指定对象
    示例如下:
 //链式语法
 var bird = {//定义对象字面量
    catapult: function() {
     console.log( 'Yippeeeeee!' );
     return this;//返回bird对象自身
  },
  destroy: function() {
    console.log( "That'll teach you... you dirty pig!" );
    return this;
   }
  };
  bird.catapult().destroy();//destroy()后还可以再链接吗?

你可能感兴趣的:(javascript,学习,前端)