Web应用(acwing)
三、JavaScript
1.JS的调用方式与执行顺序
①使用方法
HTML页面中任意位置加上<script type="module"></script>标签即可
常见使用方式：
- 直接在
<script type="module"></script>标签内写JS代码。
- 直接引入文件：
<script type="module" src="/static/js/index.js"></script>。
- 将所需的代码通过
import关键字引入到当前作用域。必须在js里export才能在html里import。
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>
②执行顺序
- 类似于HTML与CSS，按从上到下的顺序执行；
- 事件驱动执行；
③HTML, CSS, JavaScript三者之间的关系
- CSS控制HTML
- JavaScript控制HTML与CSS
- 为了方便开发与维护，尽量按照上述顺序写代码。例如：不要在HTML中调用JavaScript中的函数。
2.变量与运算符
①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’，单引号与双引号均可。字符串中的每个字符为只读类型,不可改变，如果要改变，可以重新再定义一个变量，用substr函数改变，例如：
let s3 = s1.substr(0, 1) + 'x' + s1.substr(2);,输出由s1(acwing)变为s3(axwing)
- boolean：布尔值，例如true, false
- object：对象，类似于C++中的指针，例如[1, 2, 3]，{name: “yxc”, age: 18}，null
- undefined：未定义的变量
类似于Python，JavaScript中的变量类型可以动态变化，typeof可查询变量类型，console.log(typeof s)
③运算符
与C++、Python、Java类似，不同点：
- 表示乘方
- 等于与不等于用
===和!==
3.输入与输出
①输入
- 从HTML与用户的交互中输入信息，例如通过input、textarea等标签获取用户的键盘输入，通过click、hover等事件获取用户的鼠标输入。
- 通过Ajax与WebSocket从服务器端获取输入
- 标准输入，示例：
cpp:
#include <iostream> using namespace std; int main () { int a, b; cin >> a >> b; cout << a + b << endl; return 0; }
c
#include <stdio.h> int main() { int a, b; scanf("%d%d", &a, &b); printf("%d\n", a + b); return 0; }
java
import java.io.*; import java.util.*; public class Main { public static void main(String args[]) throws Exception { Scanner cin=new Scanner(System.in); var a = cin.nextInt(); var b = cin.nextInt(); System.out.println(a + b); } }
python
import sys for line in sys.stdin: print sum(map(int, line.split()))
python3
import sys for line in sys.stdin: print(sum(map(int, line.split())))
javascript
let fs = require('fs'); let buf = ''; process.stdin.on('readable', function() { let chunk = process.stdin.read(); if (chunk) buf += chunk.toString(); }); process.stdin.on('end', function() { buf.split('\n').forEach(function(line) { 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; })); }); });
go
package main import "fmt" func main() { var a, b int for { n, _ := fmt.Scanf("%d %d", &a, &b) if n != 2 { break } fmt.Println(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)}`;
4.判断语句
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中类似：
&&表示与
||表示或
!表示非
5.循环语句
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);
6.对象
英文名称：Object。
类似于C++中的map，由key:value对构成。
value可以是变量、数组、对象、函数等。
- 函数定义中的
this用来引用该函数的“拥有者”。
例如：
let person = { name: "yxc", age: 18, money: 0, add_money: function (x) { this.money += x; } }
对象属性与函数的调用方式：
person.name、person.add_money()
person["name"]、person["add_money"]()
7.数组
①数组中的元素类型
数组是一种特殊的对象。
类似于C++中的数组，但是数组中的元素类型可以不同。
- 数组中的元素可以是变量、数组、对象、函数。
例如：
let a = [1, 2, "a", "yxc"]; let b = [ 1, // 变量 "yxc", // 变量 ['a', 'b', 3], // 数组 function () { // 函数 console.log("Hello World"); }, { name: "yxc", age: 18 } // 对象 ];
②访问数组中的元素
通过下标。
例如：
a[0] = 1; // 访问数组a[]的第0个元素 console.log(a[0]);
③数组的常用属性和函数
- 属性
length：返回数组长度。注意length是属性，不是函数，因此调用的时候不要加()
- 函数
push()：向数组末尾添加元素
- 函数
pop()：删除数组末尾的元素
- 函数
splice(a, b)：删除从a开始的b个元素
- 函数
sort()：将整个数组从小到大排序
- 自定义比较函数：
array.sort(cmp)，函数cmp输入两个需要比较的元素，返回一个实数，负数表示第一个参数小于第二个参数，0表示相等，正数表示大于。
