本文参与4月更文挑战，打卡day13，第十三篇

1. JS的调用方式与执行顺序

使用方式

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

type="module"的作用是限制变量的作用域，使定义的变量只能在当前<script></script>标签内部使用。

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

  • 直接在<script type="module"></script>标签内写JS代码。
  • 直接引入文件：<script type="module" src="/static/js/index.js"></script>。（该方法只能引入一个js文件）
  • 将所需的代码通过import关键字引入到当前作用域。（可以引入很多个js文件的内容，注意必须要在js文件中写明export）

// 通过 import关键字引入js代码的示例如下：

/static/js/index.js文件中的内容为：
// 在当前文件中export中的变量/函数可以被其他文件访问（name,print()）
// 没有在export中书写的只能在当前文件被访问到
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>

执行顺序

Java，Python，C++一般都是从主函数开始执行，JavaScript没有明确的入口开始执行，按页面顺序从上到下执行

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

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

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

2. 变量与运算符

let与const

用来声明变量，作用范围为当前作用域。(可以只声明不定义)

• let用来定义变量；

• const用来定义常量；（只能赋值一次）

let s = "acwing", x = 5;

// 下方是一个对象，相当于Python里的字典
let d = {
    name: "yxc",
    age: 18,
}

const n = 100;

变量类型

number

number：数值变量，例如1, 2.5

string

string：字符串，例如"acwing", 'yxc'，单引号与双引号均可。字符串中的每个字符为只读类型。

bollean

boolean：布尔值，例如true, false

object

object：对象，类似于C++中的指针，例如[1, 2, 3]，{name: "yxc", age: 18}，null（常用）

undefined

undefined：未定义的变量

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

打印变量类型的方式：

需要用到关键字typeof,下面这一行会输出变量s的变量类型

console.log(typeof s)

通过下标修改字符串

// JavaScript里字符串可以通过下标访问到字符串的每一位（下表从0开始），但是不能直接修改字符串

let s1 = 'acwing' , s2 = "abc";

console.log(s1[1]); // c

let s3 = s1.substr(0, 1) + "x" + s1.substr(2);

console.log(s3); // axwing

// 与Python语法类似，这里的s1.substr(0, 1)是指取字符串s1的第0位到第（1-1）位；s1.substr(2)是指取字符串s1的第2位到结束

// 1. 类似于字典的写法，关键字(字典的值的位置，其中键的位置可以带上双、单引号也可以不带)一般都是字符串
let d = {
	name: "abd",
	age: 18,
};
// 调用的时候需要对键所在的部分加上引号    也可以直接调用d    还可以用d.name调用name键值对
console.log(d["name"], d['age']);
// 定义字典的时候用冒号，赋值的时候用等于号
d['name' = "abc"];

// 遍历这个字典的方法
for (let key in d)l {
	console.log(d[key])
}

运算符

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

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

几个运算符的例子

1. 左移符号（<<）

console.log(1 << 10)

// 是指1的二进制数字中1这个数字向左移动10位

// 00000000001 即2^0=1

// 10000000000 即2^10=1024

1 << 31 会返回负数

1 << 32 会返回1

2. 取余符号（%）

console.log(2.5 % 2) // 0.5

3. 对于小数的取整方法

var a = 234

console.log(a /= 10) // 23.4 默认

console.log(parseInt(a /= 10)) // 23 保留整数

console.log(parseFloat(a /= 10)) // 23.4 保留小数

console.log(Math.ceil(a /= 10)) // 24 向上取整（有小数就舍去小数部分，整数部分向上进一位）

console.log(Math.round(a /= 10)) // 23 四舍五入

console.log(Math.floor(a /= 10)) // 23 向下取整（向下取整：比自己小的最大整数）