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>
执行顺序
- 类似于HTML与CSS,按从上到下的顺序执行;
- 事件驱动执行;
HTML,CSS,JS之间的关系
- CSS控制HTML
- JavaScript控制HTML与CSS
- 为了方便开发与维护,尽量按照上述顺序写代码。例如:不要在HTML中调用JavaScript中的函数。
变量与运算符
用来声明变量,作用范围为当前作用域。
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);
分类:
Web应用课
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库