[ JavaScript | 青训营笔记]

这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

JS的调用方式与执行顺序

使用方式

HTML页面中的任意位置加上<script type="module"></script>标签即可。

常见使用方式有以下几种：

• 直接在<script type="module"></script>标签内写JS代码。
• 直接引入文件：<script type="module" src="/static/js/index.js"></script>。
• 将所需的代码通过import关键字引入到当前作用域。

例如：

/static/js/index.js文件中的内容为：

let name = "acwing";

function print() {
    console.log("Hello World!");
}

export {
    name,
    print
}

<script type="module"></script>中的内容为：

<script type="module">
    import { name, print } from "/static/js/index.js";

    console.log(name);
    print();
</script>

执行顺序

1. 类似于HTML与CSS，按从上到下的顺序执行；
2. 事件驱动执行；

HTML, CSS, JavaScript三者之间的关系

1. CSS控制HTML
2. JavaScript控制HTML与CSS
3. 为了方便开发与维护，尽量按照上述顺序写代码。例如：不要在HTML中调用JavaScript中的函数。

变量与运算符

let与const

用来声明变量，作用范围为当前作用域。

• let用来定义变量；
• const用来定义常量；

例如：

let s = "acwing", x = 5;

let d = {
    name: "yxc",
    age: 18,
}

const n = 100;

变量类型

• number：数值变量，例如1, 2.5
• string：字符串，例如"acwing", 'yxc'，单引号与双引号均可。字符串中的每个字符为只读类型。
• boolean：布尔值，例如true, false
• object：对象，类似于C++中的指针，例如[1, 2, 3]，{name: "yxc", age: 18}，null
• undefined：未定义的变量

类似于Python，JavaScript中的变量类型可以动态变化。

运算符

与C++、Python、Java类似，不同点：

• **表示乘方
• 等于与不等于用===和!==

输入与输出

输入

• 从HTML与用户的交互中输入信息，例如通过input、textarea等标签获取用户的键盘输入，通过click、hover等事件获取用户的鼠标输入。
• 通过Ajax与WebSocket从服务器端获取输入
• 标准输入，参考AcWing 1. A + B

输出

• 调试用console.log，会将信息输出到浏览器控制台
• 改变当前页面的HTML与CSS
• 通过Ajax与WebSocket将结果返回到服务器

格式化字符串

• 字符串中填入数值：

  let name = 'yxc', age = 18;
  let s = `My name is ${name}, I'm ${age} years old.`;
  

• 定义多行字符串：

  let s = 
  `<div>
      <h2>标题</h2>
      <p>段落</p>
  /div>`
  

• 保留两位小数如何输出

  let x = 1.234567;
  let s = `${x.toFixed(2)}`;