JavaScript基础

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

HTML页面中的任意位置加上<script type="module">标签，目的：限制变量的作用域

将

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

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

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

js 复制代码

let name = "acwing";

// function 定义一个函数
function print() {
  console.log("Hello World!");
}

// 希望被其他作用域引用的变量,用export
export { name, print };

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

html 复制代码

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

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

2.变量与运算符

let与const

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

let用来定义变量；
const用来定义常量；
例如：

js 复制代码

let s = "acwing", x = 5;
let d = {
    name: "yxc",
    age: 18,
}
console.log(d["name"]);
console.log(d.name);
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中的变量类型可以动态变化。
typeof 可以输出变量类型
运算符

与C++、Python、Java类似，不同点：
**表示乘方
等于与不等于用===和!==

3. 输入与输出

输入

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

js 复制代码

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; }));
    });
});

输出

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

格式化字符串

字符串中填入数值：

js 复制代码

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

定义多行字符串：

js 复制代码

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

保留两位小数如何输出
Math.round(x) 、Math.ceil(x)和Math.floor(x)分别表示将x向0、向上和向下取整

js 复制代码

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

js 复制代码

let x=1.234654;
let y = x.toFixed(4);  //保留四位小数
console.log(y)

例如：

index.html

html 复制代码

  <body>
    输入：
    <br />
    <textarea class="input" name="" id="" cols="30" rows="10"></textarea>
    <br />
    <button>Run</button>
    <br />
    <pre></pre>

    <script type="module">
      import { main } from "/static/js/index.js";
      main();
    </script>
  </body>

index.css

css 复制代码

textarea {
    width: 500;
    height: 300;
    background-color: aqua;
    font-size: 24px;
}

pre {
    width: 500;
    height: 300;
    background-color: antiquewhite;
    font-size: 24px;
}

index.js

js 复制代码

let input = document.querySelector("textarea"); // document.querySelector选择一个标签
let run = document.querySelector("button");
let output = document.querySelector("pre");
function main() {
  // addEventListener表示绑定一个事件，当这个事件发生的时候会执行哪个函数
  run.addEventListener("click", function () {
    let s = input.value; //.value表示textarea中的一个属性，获取其输入的值
    output.innerHTML = s; //innerHTML表示获取标签里面的内容
  });
}  
export { main };

4.判断语句

js 复制代码

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.循环语句

for循环

js 复制代码

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

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

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

javascript 复制代码

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

do while循环

javascript 复制代码

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

目录

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

2.变量与运算符

3. 输入与输出

4.判断语句

5.循环语句