Web基础 - JavaScript

• 前言
• 一、js 的引用方式与执行顺序
• • 1. 引用方式
  • 2. 执行顺序
  • 3. html、css、js 三者之间的关系
• 二、变量与运算符
• 三、输入和输出
• • 1. 输入
  • 2. 输出
• 四、判断
• 五、循环
• 六、对象
• 七、数组
• 八、函数
• • 1. 定义（3 种方式）
  • 2. 函数返回值
• 九、类

          学习 JavaScript 内容！

与使用加载 css 文件类似，在 HTML 页面中的任意想要执行 js 代码的位置加上标签即可

引入 js 代码的方式

1. 在标签中直接写 js 代码
   
   2. 复用 js 代码（让一份代码在多个页面里执行）
      用一个文件管理 js 代码，然后在页面任意位置引入 js文件即可。

   // /static/js/index.js文件中的内容为
   console.log("Hello World")
   

   3. 将所需的代码通过 import 关键字引入到当前作用域（只希望用到 js 文件中的某些变量或函数）
      通过 export 将其它文件可以调用的变量和函数暴露出来。
      通过 import 将 js 文件里暴露出来的内容引入到当前作用域。

   // /static/js/index.js文件中的内容为
   let name = "yjx";
   let age = 18
   
   function print() {
       console.log("My name is " + name);
   }
   
   export {
       name,
       print
   }
   

   ---

   2. 执行顺序
   1. js 与 C++ 和 Java 不同的地方在于 C++ 和 Java 执行从主函数的入口开始执行，而 js 代码没有明确的执行入口，按照在页面中从上到下的顺序依次执行与渲染 html 和 css 的顺序一样。
   2. 事件驱动执行。

   ---

   3. html、css、js 三者之间的关系
   1. css 可以操控 html，反之不行。
   2. js 可以操控 css 和 html。js 可以改变 html 的结构，在 html 里面随意添加和删除标签和内容，也可以通过 js 改变 css 对应样式。
      
   二、变量与运算符

   1. 变量的声明与定义

      • 只声明不定义： let a;
      • 定义：let x = 3, name = "yjx";
      • const 用来定义常量 const y = 6;
        
        

   2. 变量类型动态变化：let 定义变量时，不用申明类型，js 中的变量类型是动态的。

   let name = "yjx", x = 6;
   
   let d = {
       name: "yjx",
       age: 20,
   }
   

   3. 变量类型

      • number 数值变量：js 中不管是整数还是浮点数统一为 number 类型
      • string 字符串：
        • 不区分单引号 '' 和双引号 ""
        • 字符串中每一个字符都是只读变量，不能修改赋值
        • substr 函数，使用同 C++
      • boolean 布尔值：true，false
      • object：对象
        • 类似于 C++ 中的 map 和 python 中的 字典
        • js 中的对象的关键字一般都是字符串，每个关键字对应的值可以是任意类型
        • 定义：let d = { name = "yjx", age = "18", };，关键字字符串可以加 "" 也可以不加
        • 调用属性
          • 方式 1：d["name"] = 'lj'; 或 d['name'] = 'lj';
          • 方式 2：d.name = "lj";
        • 动态加值：d["school"] = "pku"; 或者 d.school = "pku";
        • 删除字典中的某个属性：delete d.school;
        • 直接输出一个对象：console.log(b);
        • null 也是一个 object 类型
        • undefined 未定义的变量类型，例如：let x;
          
          

   4. 运算符

      • ** 表示乘方
      • === 等于，!== ，会同时判断变量的类型和数值
   三、输入和输出 1. 输入
   1. 通过页面的交互输入
   2. 通过从服务器端获取输入
   3. 从标准输入里读取信息

   let fs = require('fs');
   let buf = '';
   
   // 当输入缓冲区内有内容时会执行下面的函数
   process.stdin.on('readable', function() {
   	// 如果有输入从缓冲区中将内容读进来，将内容放到 buf 里
       let chunk = process.stdin.read();
       if (chunk) buf += chunk.toString();
   });
   
   // 当输入缓冲区内没有内容时（输入完成）会执行下面的函数
   process.stdin.on('end', function() {
       buf.split('n').forEach(function(line) {
       	// 对于一行的输入内容用空格将其隔开，每一个数转换成整数放到 tokens 里。
           let tokens = line.split(' ').map(function(x) { return parseInt(x); });
           if (tokens.length != 2) return;
           console.log(tokens.reduce(function(a, b) { return a + b; }));
       });
   });
   

   2. 输出
   四、判断 五、循环
   六、对象
   1. value 可以是变量、数组、对象、函数等。
   2. 对象属性与函数的调用：
      • 方式 1：对象属性的调用：person.name;，对象函数的调用：person.add_money();
      • 方式 2：对象属性的调用：person["name"];，对象函数的调用：person["add_money"]();

   let person = {
       name: 'yjx',
       age: 18,
       money: 0,
       friends: ['Bob', 'Alice', 'Lucy'],  // 值为数组
       clothes: {
           color: "red",
           price: 20,
       },
       add_money: function (x) {
           this.money += x;                // this：返回拥有这个函数的对象
       },
   };
   
   function main() {
       // 调用方式 1
       console.log(person.money);
       person.add_money(10);                // ()：执行函数
       console.log(person.money);
   
       // 调用方式 2
       console.log(person["money"]);
       person["add_money"](10);
       console.log(person["money"]);
   }
   
   export {
       main
   }
   

   
   七、数组
   1. 数组的定义：数组内的元素可以是变量、数组、对象、函数

   let a = [1, 2, "yjx", [3, 4, 5]];
   let b = []; // 空数组
   let c = [
       1,  // 变量
       "yjx",  // 变量
       ['a', 'b', 3],  // 数组
       function () {  // 函数
           console.log("Hello World");
       },
       { name: "yxc", age: 18 }  // 对象
   ];
   

   2. 数组的访问和赋值：通过下标，例如：c[0];，c[0] = 2; 没有数组下标越界的概念。
   3. 数组的常用属性和函数
      1. length：返回数组长度，注意不要加 ()
      2. push()：向数组末尾添加元素
      3. pop()：删除数组末尾元素
      4. splice(a, b)：删除下标从 a 开始的 b 个数
      5. sort()：将数组从小到大排序
         • 自定义比较函数：逆序：let main = { a.sort(function(a, b)) { return b - a; });
   八、函数 1. 定义（3 种方式）
   1. 第一种方式

   // 第一种方式，function 为函数修饰符
   function add (a, b) {
   	return a + b;
   };
   

   2. 第二种方式：js 中的函数名就是一个一般的变量名，可随便赋值。js 中函数和变量没有区别

   // 第二种方式：js 中的函数名就是一个一般的变量名，可随便赋值
   let add = function (a, b) {
   	return a + b;
   }
   
   let a = 3;
   

   3. 第三种方式：第二种方式的简写，将 function 换成 =>

   let add = (a, b) => {
   	return a + b;
   }
   

   2. 函数返回值

   如果未定义返回值，返回 undefined。

   
   九、类