Web应用课 3.1 JavaScript——变量与运算符、输入输出、判断、循环

JS的调用方式与执行顺序

使用方式

HTML页面中的任意位置加上<script type="module"></script>标签即可。
常见使用方式有以下几种:

  • 直接在标签内写JS代码。
  • 直接引入文件:<script type="module" src="/static/js/index.js"></script>
  • 将所需的代码通过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>

执行顺序

  1. 类似于HTML与CSS,按从上到下的顺序执行;
  2. 事件驱动执行;

HTML,CSS,JS之间的关系

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

变量与运算符

用来声明变量,作用范围为当前作用域。
let用来定义变量;
const用来定义常量;

let s = "acwing",x = 5;
let d = { //对象
    name:zjq,
    age: 18,
}
const n = 100;

变量类型

  • number:数值变量,例如1, 2.5
let x = 1,y = 3.14;
  • string:字符串,例如"acwing", 'yxc',单引号与双引号均可。字符串中的每个字符为只读类型
let s1 = "acwing",s2 = "yxc",let s3 = s1.substr(0,1) + 'x' + s1.substr(2);
  • boolean:布尔值,例如true, false
let flag = false;
  • object:对象,类似于C++中的指针,例如[1, 2, 3],{name: "yxc", age: 18},null
let d = {
	name: "zjq",//注意赋值使用冒号
	age: 18,
};
console.log(d['name'],d["age"]);//注意:一定要加上引号
console.log(d.name,d.age);
d['name'] = 'abc';

let key = 'age';
console.log(d[key]);//也可以使用变量来访问字典
d.school = "pku";//支持动态添加原本不存在的属性
delete d.school;//删除属性
console.log(typedef d,typedef null);//object类型
  • undefined:未定义的变量
let t;
console.log(typeof t);//undefined类型

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

运算符

与C++、Python、Java类似,不同点:
** 表示乘方
等于与不等于用===!==,注意:===会同时判断类型,使用==会发生类型转换。
取整

console.log(parseInt(5 / 3));
console.log(Math.ceil(5 / 3));//上取整
console.log(Math.floor(5 / 3));//下取整
console.log(Math.round(5 / 3));//四舍五入取整

输入与输出

  • 从HTML与用户的交互中输入信息,例如通过input、textarea等标签获取用户的键盘输入,通过click、hover等事件获取用户的鼠标输入。
    HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/static/css/index.css" type="text/css">
</head>
<body>
    <div>输入</div>
    <textarea class="input"></textarea>
    <br>
    <button class="confirm">确定</button>
    <br>
    <textarea class="output"></textarea>

    <!-- 将js代码放置页面最后,使其最后再渲染,可防止页面元素加载慢导致js执行错误 -->
    <script type="module">
        import {
            main
        } from "/static/js/index.js";

        main();
    </script>
</body>
</html>

CSS代码

textarea{
    width: 70%;
    height: 500px;
}

button{
    width: 70%;
    height: 50px;
}


JS代码

let input = document.querySelector("textarea");//获取单个html页面标签,若获取全部标签使用querySelectorAll函数
let input1 = document.querySelector(".input");//获取某个类的页面标签
let confirm = document.querySelector(".confirm");//获取页面的按钮,原理同上
let output = document.querySelector(".output");//获取页面中用于输出的文本段落,原理同上

function main(){
    console.log(input);
    console.log(typeof input);
    confirm.addEventListener("click",function(){
        let str = input.value;//获取输入框中的内容,保存到字符串
        output.innerHTML = str;//将字符串内容赋值给output段落的文本中
    });
}

export{
    main
}
  • 通过Ajax与WebSocket从服务器端获取输入
  • 标准输入,参考AcWing 1. A + B
let fs = require('fs');//导入了内置的 fs(文件系统)模块
let buf = '';//初始化了一个空字符串 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); });//将每个数用空格隔开,并将类型从string转换为Number
        if (tokens.length != 2) return; 
        console.log(tokens.reduce(function(a, b) { return a + b; }));//每次 reduce() 被调用时,a 代表之前计算的累积值,b 代表当前处理的数字。最终,reduce() 函数会返回所有数字的总和。
    });
});

格式化字符串

字符串中填入数值

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

判断语句

JavaScript中的if-else语句与C++、Python、Java中类似。
JavaScript中的逻辑运算符也与C++、Java中类似:

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

循环语句

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

for循环

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

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

for-in循环,可以枚举数组中的下标,以及对象中的key

for(let k in arr){
	arr[k] = k;
}

for-of循环,可以枚举数组中的值,以及对象中的value

for(let v of arr){
	console.log(v);
}

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);
posted @   安河桥北i  阅读(11)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示