当前位置：首页 > news >正文

第10节课：JavaScript基础——网页交互的魔法

news 文章来源：https://blog.csdn.net/XWXXX666/article/details/140933409 2025/5/6 15:42:41

JavaScript的作用

JavaScript最初是为网页上的交互式元素设计的，但随着技术的发展，它的应用范围已经远远超出了网页。JavaScript可以用于：

表单验证
动态内容更新（Ajax）
动画和视觉效果
Web游戏开发
响应用户事件（如点击、键盘输入等）
服务端编程（Node.js）

JavaScript的基本语法

JavaScript语法与其他C语言家族的语言类似，包括变量声明、数据类型、函数定义等。

基本语法规则

使用var、let或const声明变量。
使用函数function定义函数。
使用花括号{}定义代码块。
使用分号;分隔语句。

变量、数据类型和运算符

变量

变量是存储数据值的容器。在JavaScript中，变量可以有不同的数据类型。

var message = "Hello, World!"; // 字符串
let age = 25; // 数字
const pi = 3.14; // 常量

数据类型

JavaScript主要有以下几种数据类型：

Undefined：未定义，表示变量已声明但未赋值。
Null：空值，表示故意赋予变量的空值。
Boolean：逻辑实体，true或false。
Number：数值，包括整数和浮点数。
BigInt：可以安全地表示及操作大整数。
String：文本数据。
Symbol：ES6引入的新类型，一个唯一的、不可变的数据类型。
Object：复杂的数据结构，可以包含多个属性。

运算符

运算符用于执行数学和逻辑运算。

算术运算符：+、-、*、/、%等。
比较运算符：==（等于）、===（严格等于）、!=（不等于）、!==（严格不等于）等。
逻辑运算符：&&（逻辑与）、||（逻辑或）、!（逻辑非）等。
赋值运算符：=、+=、-=等。

实践：使用JavaScript增强网页功能

下面是一个简单的示例，展示如何使用JavaScript来增强网页的功能。

<!DOCTYPE html>
<html>
<head><title>JavaScript示例</title>
</head>
<body><h1 id="greeting">欢迎来到学问小小谢的网页！</h1><button onclick="changeGreeting()">点击我改变问候语</button><script>// 定义变量let userName = "访客";// 函数定义function changeGreeting() {// 获取元素const greetingElement = document.getElementById("greeting");// 改变文本greetingElement.textContent = `你好，${userName}！`;}// 监听键盘事件document.addEventListener("keydown", function(event) {if (event.key === "Enter") {changeGreeting();}});</script>
</body>
</html>

结语

通过本节课的学习，你应该对JavaScript的基本概念、基本语法，以及变量、数据类型和运算符有了基本的了解。JavaScript是实现网页动态交互的关键技术。掌握这些基础，你将能够为网页添加各种交互功能。继续深入学习JavaScript的高级特性，如函数、对象、数组、DOM操作等，你将能够创建出更加丰富和互动的网页体验。

第10节课：JavaScript基础——网页交互的魔法

目录 JavaScript的作用JavaScript的基本语法基本语法规则变量、数据类型和运算符变量数据类型运算符实践：使用JavaScript增强网页功能结语 JavaScript是一种高级的、解释型的编程语言，它使得网页能够从静态文档转变为具有动态交互性的应用程序。本节课将…...

编程日记 2024/8/7 5:10:44

springboot+vue+mybatis汽车租赁管理+PPT+论文+讲解+售后

汽车租赁系统是针对目前汽车租赁管理的实际需求，从实际工作出发，对过去的汽车租赁管理系统存在的问题进行分析，完善客户的使用体会。采用计算机系统来管理信息，取代人工管理模式，查询便利，信息准确率高&…...

编程日记 2024/8/7 5:09:43

.NET C# 将文件夹压缩至 zip

.NET C# 将文件夹压缩至 zip 文章目录 .NET C# 将文件夹压缩至 zip1 使用 System.IO.Compression1.1 环境1.2 压缩文件夹1.2.1 简单压缩1.2.2 复杂压缩 1.3 解压缩1.3.1 简单解压缩1.3.2 复杂解压缩 2 使用 SharpZipLib2.1 环境2.2 压缩文件夹2.3 解压缩 3 压缩效果简单测试 1 …...

编程日记 2024/8/7 5:07:41

软考基本介绍

一,基本了解计算机技术与软件专业技术资格（水平）考试（简称软件考试）为国家级考试。考试设置了27个专业资格，涵盖5个专业领域， 3个级别层次（初级、中级、高级）。中国计算机技术职业…...

编程日记 2024/8/7 5:05:38

【Vue】vue3 中使用 ResizeObserver 监听元素的尺寸宽度变化

要监听 div 宽度的变化，可以使用 ResizeObserver 接口。ResizeObserver 允许你观察一个或多个元素的尺寸变化，并在发生变化时执行回调函数。这种方法比使用 MutationObserver 更专注于尺寸变化，且不受元素属性变化的影响。使用 ResizeObserv…...

编程日记 2024/8/7 5:04:36

信息安全专业好吗？

22 届的 211 信安毕业生，目前在读研（虽然已经和安全没关系），整体来看大部分高校的信安都是作为计算机的附属专业存在的，除了极具特色的几个高校，例如山大的密码学，广州大学某院士加持的网络安全…...

编程日记 2024/8/7 5:03:36

梧桐数据库（WuTongDB）：数据库中元数据表的常见信息

元数据表是数据库系统中用于存储和管理元数据的表。这些表提供关于数据库对象（如表、列、索引、视图、存储过程等）的详细信息。以下是元数据表的一些常见类型及其详细解释： 常见元数据表类型表信息表表名：TABLES描述&#xff1…...

编程日记 2024/8/7 5:02:34

在 Linux 9 上安装 Oracle 19c：克服兼容性问题 (INS-08101)

Oracle 数据库 19c 的基础版本 (19.3) 发布的时候还没有 Linux 9 ，因此在Linux 9上面安装Oracle 19c会遇到很多兼容性问题。本文将探讨如何解决这些问题。安装步骤设置环境变量以绕过操作系统检查： Oracle 19.3 安装程序无法识别 Linux 9。 [WARNIN…...

编程日记 2024/8/7 5:01:33

【踩坑】pytorch中的索引与copy_结合不会复制数据及其解决方案

转载请注明出处：小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你，欢迎[点赞、收藏、关注]哦~ 目录背景知识实验验证结论分析错误案例处理方法注意事项附加说明基本索引返回视图高级索引返回副本赋值操作都是原地操作以下内容…...

编程日记 2024/8/7 4:59:31

十六、【Python】基础教程 - 【Flask】网络编程开发

目录前言 Flask 基础概念安装 Flask 示例：创建一个 Flask Web 应用运行 Flask 应用更复杂的例子测试新功能前言 Flask 是一个用 Python 编写的微型 Web 框架，它以简单性和灵活性著称，非常适合快速开发小型到中型的 Web 应用。F…...

编程日记 2024/8/7 4:58:31

C#初级——List 容器

容器在C#中，容器通常指的是用于存储和组织数据的集合类。本文介绍的容器是动态数组：List<T> 内部使用数组来存储元素，当添加元素超出当前数组容量时，会自动调整大小（扩容）。 list容器 List<&g…...

编程日记 2024/8/7 4:57:30

serial靶机教程

靶机下载地址 https://download.vulnhub.com/serial/serial.zip 主机发现 arp-scan -l 端口扫描 nmap 192.168.229.131 -A 根据对⽐可知serial的⼀个ip地址为192.168.47.143 该靶机开启了22端⼝和80端⼝对⽹站进⾏⼀个访问，⼤概意思为这是对新的cookie处理程序…...

编程日记 2024/8/7 4:56:29

【Linux-MISC设备】

目录 1. MISC设备2. MISC蜂鸣器实验 1. MISC设备 MISC设备的主设备号为10.MISC设备会自动创建cdev，不需要再手动创建。MISC设备是基于platform的. MISC驱动的编写的核心就是初始化miscdevice结构体变量，然后用misc_register函数向内核注册，…...

编程日记 2024/8/7 4:54:27

【随笔】VRRP+MSTP

虚拟路由冗余协议（Virtual Router Redundancy Protocol，VRRP） 设计采用主备模式，将VRRP组内多个路由设备都映射为一个虚拟路由设备。一个VRRP组中只能由一台处于主控角色的路由器，可以有一个或多个备份角色的路由器。…...

编程日记 2024/8/7 4:53:26

vue 动态增删行，并form表单校验（附v2\v3）

Vue3 组件用的 ant 可以换成你们用，主要是form校验前端代码 <a-formref"formRef":model"formData":label-col-props"{ span: 5 }":wrapper-col-props"{ span: 17 }"><a-row><a-form-itemlabel"角色…...

编程日记 2024/8/7 4:52:25

计算机网络的基本概念

IP地址（Internet Protocol Address）是指在计算机网络中每个设备的唯一标识符。它用于区分不同设备并在网络中进行数据包的路由。我们平常所使用的IP地址主要版本： IPv4 格式: 由四个整数（0到255）组成，以点…...

编程日记 2024/8/7 4:51:24

Python 爬虫项目实战三：GitHub 用户信息抓取与分析

一、项目背景爬虫技术不仅限于获取网页内容，还可以用于获取和分析特定网站的用户信息。本文将演示如何使用Python编写爬虫程序，从GitHub网站抓取用户信息，并进行简单的数据分析。二、环境准备在开始之前，请确保你已经安装了…...

编程日记 2024/8/7 4:50:23

xtrabackup搭建MySQL 8.0 主从复制

xtrabackup搭建MySQL 8.0 主从复制安装MySQL 8.0.37安装xtrabackupGTIDs初始化从库参考：GTID概述GTID相较与传统复制的优势GTID自身存在哪些限制GTID工作原理简单介绍如何开启GTID复制GTID与传统模式建立复制时候语句的不同点传统复制GTID复制 GTID同步状态简单解析…...

编程日记 2024/8/7 4:49:22

Java程序员接单分享

作为一名Java程序员，这阵子通过承接些小型项目，我顺利跨过了月薪破万的门槛。这些项目虽小，却如同磨刀石般，让我在实战中发现了自身技术栈的棱角与不足，尤其是意识到了在Java这一浩瀚技术海洋中的诸多未知领域。我深知…...

编程日记 2024/8/7 4:48:21

【HarmonyOS NEXT星河版开发学习】小型测试案例01-今日头条置顶练习

个人主页→VON 收录专栏→鸿蒙开发小型案例总结基础语法部分会发布于github 和 gitee上面前言本系列可能是博客首发，鸿蒙开发星河版是一个全新的版本，由于参考视频较少鸿蒙开发不被重视导致csdn上面并没有全套的学习路线，…...

编程日记 2024/8/7 4:46:19

C语言----计算开机时间

计算开机时间实例说明编程实现计算开机时间，要求在每次开始计算开机时间时都能接着上次记录的结果向下记录。实现过程： 1. 在TC中创建一个C文件。 2. 引用头文件，代码如下: #include <stdio.h> 3. 定义结构体time，用来…...

编程日记 2024/8/7 4:44:18

批发行业进销存-登录适配 android 横竖屏幕源码CyberWinApp-SAAS 本地化及未来之窗行业应用跨平台架构

一、横竖屏切换的意义以下是移动端横屏竖屏可切换在进销存中的一些重要应用： a、数据录入与查看在录入商品信息、库存数量等大量数据时，横屏模式可以提供更宽阔的输入区域，减少输入错误。例如，在输入长串的商品编码或详细的商…...

编程日记 2024/8/7 4:43:17

js功能（1）

1、readonly 应用于元素：readonly 可以应用于 <input> 和 <textarea> 元素。用户界面表现：当元素设置为 readonly 时，用户不能更改输入框中的值，但可以选中和复制文本，且表单包含该输入字段的值可以被提交…...

编程日记 2024/8/7 4:42:12

微信小程序乡村医疗系统，源码、部署+讲解

目录摘要 Abstract 1 绪论 1.1 研究背景及意义 1.2 研究现状 1.3 研究内容 2 相关技术介绍 2.1 Java 语言 2.2 MySQL 数据库 2.3 Spring Boot 框架 2.4 B/S 结构 2.5 微信小程序 3 系统分析 3.1 可行性分析 3.1.1 经济可行性 3.1.2 技术可行性…...

编程日记 2024/8/7 4:41:11

完美解决pip命令版本冲突导致对应版本模块包无法安装的问题

解决步骤使用pip更新/降低指定模块包命令格式降低pip自身至指定版本的命令再次换源安装指定模块包在对 FasterNet 这篇论文源码复现过程中，我们首先需要安装相关依赖文件（ path/to/your/requirements.txt） -extra-index-url https://down…...

编程日记 2024/8/7 4:40:10