基本输入输出

  1. 输入

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

  2. 输出

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

输入a, b，输出a + b

1
2
3
4
5
6
7
8
9
10
11
12
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(){
    let [a, b] = buf.split(' ').map(x => {return parseInt(x);});
    console.log(a + b);
});

变量类型

变量类型：

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

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

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

判断语句

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

  • &&表示与
  • ||表示或
  • !表示非
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let buf = ""

process.stdin.on("readable", function(){
    let chunk = process.stdin.read();
    if(chunk) buf += chunk.toString();
});

process.stdin.on("end", function(){
    let n = parseFloat(buf);
    if(n >= 0 && n <= 25) console.log(`Intervalo [0,25]`);
    else if(n > 25 && n <= 50) console.log(`Intervalo (25,50]`);
    else if(n > 50 && n <= 75) console.log(`Intervalo (50,75]`);
    else if(n > 75 && n <= 100)console.log(`Intervalo (75,100]`);
    else console.log(`Fora de intervalo`);
});

循环语句

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

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

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

统计正数的个数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let buf = ""
process.stdin.on("readable", function(){
    let chunk = process.stdin.read();
    if(chunk) buf += chunk.toString();
});

process.stdin.on("end", function(){
    let v = buf.split('\n').map(x => {return parseFloat(x);});
    let cnt = 0;
    for(let x of v){
        if(x > 0)cnt++;
    }
    console.log(`${cnt} positive numbers`);
});

数组

js中数组是一种特殊的对象。

类似于C++中的数组，但是数组中的元素类型可以不同。

数组中的元素可以是变量、数组、对象、函数。
例如：

1
2
3
4
5
6
7
8
9
let b = [
    1,  		// 变量
    "abcdefg",  // 变量
    ['a', 'b', 3],  // 数组
    function () {  // 函数
        console.log("Hello World");
    },
    { name: "xxxxx", age: 20 }  // 对象
];

数组的常用属性和函数:

  • 属性length：返回数组长度。注意length是属性，不是函数，因此调用的时候不要加()。
  • 函数push()：向数组末尾添加元素。
  • 函数pop()：删除数组末尾的元素。
  • 函数splice(a, b)：删除从a开始的b个元素。
  • 函数sort()：将整个数组从小到大排序。
  • 自定义比较函数：array.sort(cmp)，函数cmp输入两个需要比较的元素，返回一个实数，负数表示第一个参数小于第二个参数，0表示相等，正数表示大于。

蛇形数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
let buf = ""

process.stdin.on("readable", function(){
    let chunk = process.stdin.read();
    if(chunk) buf += chunk.toString();
});

process.stdin.on("end", function(){
    let dx = [-1, 0, 1, 0], dy = [0, 1, 0, -1];
    let [n, m] = buf.split(' ').map(x => {return parseInt(x);});
    let g = [];
    for(let i = 0; i < n; i++){
        let gv = [];
        for(let j = 0; j < m; j++){
            gv.push(0);
        }
        g.push(gv);
    }
    let d = 1, x = 0, y = 0, cur = 1;
    for(let i = 1; i <= n * m; i++){
        g[x][y] = i;
        let nx = dx[d] + x, ny = dy[d] + y;
        if(nx < 0 || ny < 0 || nx >= n || ny >= m || g[nx][ny] !== 0){
            d = (d + 1) % 4;
            nx = dx[d] + x;
            ny = dy[d] + y;
        }
        x = nx, y = ny;
    }
    for(let i = 0; i < n; i++){
        let s = "";
        for(let j = 0; j < m; j++){
            s += g[i][j].toString();
            s += ' ';
        }
        console.log(s);
    }
});

对象

c++中map相类似，但是其中的value可以变量、数组、对象、函数等，与数组的类似。

1
2
3
4
5
6
7
8
let person = {
    name: "xxxx",
    age: 18,
    money: 0,
    add_money: function (x) {
        this.money += x;
    }
}

调用person.name、person.add_money()

类与c++中的类相似

函数

求最大值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
let buf = ""

process.stdin.on("readable", function(){
    let chunk = process.stdin.read();
    if(chunk) buf += chunk.toString();
});

let max = (a, b) => {
    if(a > b) return a;
    else return b;
}
/*
function max (a, b){
    if(a > b) return a;
    else return b;
}
*/
process.stdin.on("end", function(){
    let [a, b] = buf.split(' ').map(x => {return parseInt(x)});
    console.log(max(a, b));
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
let buf = ""

process.stdin.on("readable", function(){
    let chunk = process.stdin.read();
    if(chunk) buf += chunk.toString();
});

let path = [];
let st = [];

let dfs = (u, n) => {
    if(u === n) {
        console.log(path.join(' '));
    }
    for(let i = 1; i <= n; i++){
        if(!st[i]){
            path.push(i);
            st[i] = true;
            dfs(u + 1, n);
            path.pop();
            st[i] = false;
        }
    }
}

process.stdin.on("end", function(){
    let n = parseInt(buf);
    dfs(0, n);
});


事件

JavaScript的代码一般通过事件触发。

可以通过addEventListener函数为元素绑定事件的触发函数。

常见的触发函数有：

  1. 鼠标
    • click：鼠标左键点击
    • dblclick：鼠标左键双击
    • contextmenu：鼠标右键点击
    • mousedown：鼠标按下，包括左键、滚轮、右键
    • event.button：0表示左键，1表示中键，2表示右键
    • mouseup：鼠标弹起，包括左键、滚轮、右键
    • event.button：0表示左键，1表示中键，2表示右键
  2. 键盘
    • keydown：某个键是否被按住，事件会连续触发
    • event.code：返回按的是哪个键
    • event.altKey、event.ctrlKey、event.shiftKey分别表示是否同时按下了
    • alt、ctrl、shift键。
    • keyup：某个按键是否被释放
    • event常用属性同上
    • keypress：紧跟在keydown事件后触发，只有按下字符键时触发。适用于判定用户输入的字符。
    • event常用属性同上
      keydown、keyup、keypress的关系类似于鼠标的mousedown、mouseup、click。
  3. 表单
    • focus：聚焦某个元素
    • blur：取消聚焦某个元素
    • change：某个元素的内容发生了改变
  4. 窗口
    • 需要作用到window元素上。
    • resize：当窗口大小放生变化
    • scroll：滚动指定的元素
    • load：当元素被加载完成

常用库

选择器

1
2
3
let $div = $('div');

let $div = $('#mydiv > p'); //复合选择器

事件绑定与解绑

1
2
3
4
5
6
7
8
9
10
11
12
13
let $div = $('div');
$div.on("click", function(){
   	console.log("click div 1"); 
}); 
//定义名字
$div.on("click.name1", function(){
   	console.log("click div 1"); 
}); 
//另一种写法
$div.click(function(){
   	console.log("click div"); 
    $div.off("click");
});