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

news/2024/7/6 21:08:50/文章来源:https://www.cnblogs.com/zjq182/p/18259646

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转换为Numberif (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 in 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);

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/733728.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

综述 | 农业大模型：关键技术、应用分析与发展方向

综述 | 农业大模型：关键技术、应用分析与发展方向

分享一篇农业大模型综述。 官网全文免费阅读知网阅读农业大模型：AI领域的新热点 农业大模型，基于Transformer架构，通过自监督学习方法，在大规模数据上进行训练，展现出了卓越的通用能力和强大的下游任务适应性。这些模型不仅能够处理复杂的关联表示，还在多模态信息处理等方…
阅读更多...
[算法学习笔记] 可持久化栈

[算法学习笔记] 可持久化栈

可持久化栈前置知识 可持久化，即对于每次更改，我们都期望记录它的历史信息。容易进行可持久化的数据结构通常满足 修改数据结构是，数据结构本身的拓扑序没有改变。，即形态没有改变。例如线段树，Trie 树，数组都可以容易地进行可持久化。 可持久化线段树前面已经讲过，见 算…
阅读更多...
Windows Terminal 自定义 SSH 连接

Windows Terminal 自定义 SSH 连接

我们在远程操作Linux主机时常常会使用各种Remote SSH工具，比如最常用的X Shell、MobaXterm。这些工具功能强大，但很多时候只是需要开个终端，Windows 10开始自带的Windows Terminal就不错。 Windows Terminal 是Window 10 以上系统自带的工具，对选项卡、富文本等功能支持不错…
阅读更多...
OOP第四次blog

OOP第四次blog

本次blog是本学期的最后一次blog，接下来分析最后一次小结内容的PTA作业。 本次作业分为以下部分： （1）总结三次题目集的知识点、题量、难度等情况。 （2）设计与分析：重点对题目的提交源码进行分析。 （3）采坑心得：对源码的提交过程中出现的问题及心得进行总结。 （4）改…
阅读更多...
南昌航空大学第二次blog

南昌航空大学第二次blog

本次blog是本学期的最后一次blog，接下来分析最后一次小结内容的PTA作业。 本次作业分为以下部分： （1）总结三次题目集的知识点、题量、难度等情况。 （2）设计与分析：重点对题目的提交源码进行分析。 （3）采坑心得：对源码的提交过程中出现的问题及心得进行总结。 （4）改…
阅读更多...
(交换使逆序对数为1+并查集)CF1768D Lucky Permutation

(交换使逆序对数为1+并查集)CF1768D Lucky Permutation

题意：思路： 先从排好序的数组考虑：1,2,3,4,5，...n，如果交换相邻元素，必然使得逆序对数+1。 考虑先将乱序数组变成顺序数组，最后交换任意一对相邻元素即可。 将所有的i与\(p_{i}\)连边，最后形成若干个环，交换次数其实就是边数，也即点数-环数。并查集维护。 注意特殊情…
阅读更多...
[C++ Primer] 开始

[C++ Primer] 开始

C++ Primer 第5版中英版电子版pdf开始 C++ Primer 第5版pdf中英版 夸克云盘 百度云盘 提取码：qrjn该系列记录了我在学习C++过程中经常会遗忘和混淆的相关操作语法，以备将来用到时方便查找。 加油吧！！！🙆
阅读更多...
【MX-S1】梦熊周赛 提高组 1（同步赛）

【MX-S1】梦熊周赛 提高组 1（同步赛）

【MX-S1】梦熊周赛 提高组 1（同步赛）\(T1\) luogu P10672 【MX-S1-T1】壁垒 \(100pts\)一个简单的结论：随着前缀长度的增长，出现的数字种类数每次只能增加 \(0\) 或 \(2\)。考虑构造时可以从这里下手。一种构造方案是这样的：优先让数字种类数增加 \(2\)，即先将原先没有出…
阅读更多...
vue学习笔记-2

vue学习笔记-2

1.模板语法 文本插值 <template><p>{{ msg }}</p><br/> <p>{{ num+1 }}</p><br/> <p>{{ ok?"yes":"no" }}</p> </template> <script> export default{data(){return{msg:"模板语…
阅读更多...
Nginx 站点配置多目录管理

Nginx 站点配置多目录管理

运维需求 在使用Nginx 对多个站点进行配置和运行维护时，如果将多个站点的配置都放在同一配置文件中，对于server 部分的调整，随着时间的推移，可能对应的配置变更是由不同的人员接手，不方便系统的部署和迁移。解决方案 为了解决这个问题，可以考虑使用include 块。用于指定加…
阅读更多...
PNAS | 中国农大汪海团队实现转录调控序列的人工智能设计

PNAS | 中国农大汪海团队实现转录调控序列的人工智能设计

近日，中国农业大学农学院汪海团队联合美国康奈尔大学、丹麦奥胡斯大学、北京大学现代农业研究院、坦桑尼亚农业科学院等单位在_PNAS在线发表了题为Modeling 0.6 million genes for the rational design of functional cis-regulatory variants and de novo design of cis-regu…
阅读更多...
[C++ Primer] 关联容器

[C++ Primer] 关联容器

C++关联容器相关操作关联容器标准库提供了8个关联容器。类型map和multimap定义在头文件map中；set和multiset定义在头文件set中；无序容器则定义在头文件unordered_map和unordered_set中。pair标准库类型，定义在头文件utility中。关联容器额外的类型别名：关联容器insert操作：…
阅读更多...
单点登录流程图

单点登录流程图

阅读更多...
Kali 关闭自动锁屏功能

Kali 关闭自动锁屏功能

Kali 关闭自动锁屏功能 1、点击 [开始] -> [设置] -> [电源管理器]2、选择 [安全性]，将 [自动锁定会话] 选为 [从不]，将 [当系统休眠时锁定屏幕] 取消勾选，点击 [关闭]
阅读更多...
键盘记录大师：用pynput轻松捕获每一个按键，包括组合键和功能键

键盘记录大师：用pynput轻松捕获每一个按键，包括组合键和功能键

哈喽，大家好，我是木头左！揭秘键盘输入的监控神器 - pynput库 在数字时代，键盘是与计算机交流的主要工具。无论是编写代码、撰写文档还是进行日常通讯，键盘的每一次敲击都承载着信息。而在某些场景下，可能需要记录这些信息，比如开发一个学习打字的软件、监控儿童的上网行…
阅读更多...
使用后台模板，cnpm install报错

使用后台模板，cnpm install报错

阅读更多...
word通用模板说明

word通用模板说明

个人偷懒，标题、表、图、公式按章节自动编号，字体与间距按照武汉理工大学硕士论文设置，方便平时报告用，模板在个人文件夹中https://files.cnblogs.com/files/blogs/806514/%E9%80%9A%E7%94%A8word%E6%A8%A1%E6%9D%BF.zip?t=1719659030&download=true 标题自动编号 点击…
阅读更多...
HydroOJ 从入门到入土（20）已通过的题目显示 AC 代码

HydroOJ 从入门到入土（20）已通过的题目显示 AC 代码

定期的代码汇总分析和整理是必要的。个人面板里，通过的题目，直接链接到对应的AC记录。用处就是可以按人汇总，便于学生自己整理，以及老师分析学生。 权限：看不了别人代码的人，依然看不了别人代码。 效果修改后端 进入 user.ts 文件 435 行左右： cd /usr/local/share/.con…
阅读更多...
模拟集成电路设计系列博客——8.2.2 LC振荡器

模拟集成电路设计系列博客——8.2.2 LC振荡器

8.2.2 LC振荡器 LC振荡器是调谐振荡器的一个例子。环形振荡器使用有源放大器级来提供环路不稳定性所需要的180相移，调谐振荡器向反馈环路中插入调谐（谐振）电路来提供相移。在LC振荡器的例子中，谐振是由一个并联的LC电路实现的。 一个简单的LC振荡器如下图(a)所示，其小信号…
阅读更多...
安装编译ffmpeg

安装编译ffmpeg

原文链接 安装MSYS2msys2是一款跨平台编译套件，它模拟linux编译环境，支持整合mingw32和mingw64，能很方便的在windows上对一些开源的linux工程进行编译运行。类似的跨平台编译套件有：msys，cygwin，mingw 优势： 相对于 cygwin 和 msys 等环境，它支持 pacman 包管理器，这…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发