web学习——JavaScript(1)

使用方式
HTML页面中的任意位置加上标签即可。

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

• 直接在标签内写JS代码。

例如：
在.html文件中：

• 直接引入文件：。

例如：
index.js的内容为：

console.log("Hello World!");

在.html的head标签或者body标签都可以引入script标签，被引入的js文件就会自动执行

控制台：

• 将所需的代码通过import关键字引入到当前作用域。

例如：

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

let name = "acwing";

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

export {
    name,
    print
}

中的内容为：

按F12控制台输出如下：

第二种和第三种的区别就是，第三种在一个script标签可以引入多个js文件，但是第二种在一个script标签只能引入一个js文件

执行顺序

类似于HTML与CSS，按从上到下的顺序执行；
事件驱动执行；
HTML, CSS, JavaScript三者之间的关系
CSS控制HTML
JavaScript控制HTML与CSS
为了方便开发与维护，尽量按照上述顺序写代码。例如：不要在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>

• 保留两位小数如何输出

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

练习：

• 输入两个数，计算两个数的和

let [a,b]=input.value.split(' ');
a=parseInt(a),b=parseInt(b);
output.innerHTML = a+b;

• 输入一个小数，返回向零取整之后的结果

let a = parseFloat(input.value);
output.innerHTML = parseInt(a);

• 输入a, b, c，输出 (a + b) * c 的值

let [a, b, c] = input.value.split(' ');
a = parseInt(a), b = parseInt(b), c = parseInt(c);
output.innerHTML = (a + b) * c;

• 求反三位数

let a = parseInt(input.value);
        let i = a % 10;
        a = parseInt(a / 10);
        let j = a % 10;
        a = parseInt(a / 10)
        let k = a;

        let b = `${i}${j}${k}`;
        output.innerHTML = b;

• 输出如下的菱形。
  

 let s = "";
 s += "  *n";
 s += " ***n";
 s += "*****n";
 s += " ***n";
 s += "  *";
 output.innerHTML = s;

JavaScript中的if-else语句与C++、Python、Java中类似。

例如：

let score = 90;
if (score >= 85) {
    console.log("A");
} else if (score >= 70) {
    console.log("B");
} else if (score >= 60) {
    console.log("C");
} else {
    console.log("D");
}

JavaScript中的逻辑运算符也与C++、Java中类似：

&&表示与
||表示或
!表示非

JavaScript中的循环语句与C++中类似，也包含for、while、do while循环。

for循环

for (let i = 0; i < 10; i++) {
    console.log(i);
}

枚举对象或数组时可以使用：

• for-in循环，可以枚举数组中的下标，以及对象中的key
• for-of循环，可以枚举数组中的值，以及对象中的value

while循环

let i = 0;
while (i < 10) {
    console.log(i);
    i++;
}

do while循环
do while语句与while语句非常相似。唯一的区别是，do while语句限制性循环体后检查条件。不管条件的值如何，我们都要至少执行一次循环。

let i = 0;
do {
    console.log(i);
    i++;
} while (i < 10);