第10节课:JavaScript基础——网页交互的魔法
目录
- JavaScript的作用
- JavaScript的基本语法
- 基本语法规则
- 变量、数据类型和运算符
- 变量
- 数据类型
- 运算符
- 实践:使用JavaScript增强网页功能
- 结语
JavaScript是一种高级的、解释型的编程语言,它使得网页能够从静态文档转变为具有动态交互性的应用程序。本节课将介绍JavaScript的基本概念、基本语法,以及变量、数据类型和运算符的使用。
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是一种高级的、解释型的编程语言,它使得网页能够从静态文档转变为具有动态交互性的应用程序。本节课将…...
springboot+vue+mybatis汽车租赁管理+PPT+论文+讲解+售后
汽车租赁系统是针对目前汽车租赁管理的实际需求,从实际工作出发,对过去的汽车租赁管理系统存在的问题进行分析,完善客户的使用体会。采用计算机系统来管理信息,取代人工管理模式,查询便利,信息准确率高&…...
.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 …...
软考基本介绍
一,基本了解 计算机技术与软件专业技术资格(水平)考试(简称软件考试)为国家级考试。 考试设置了27个专业资格,涵盖5个专业领域, 3个级别层次(初级、中级、高级)。 中国计算机技术职业…...
【Vue】vue3 中使用 ResizeObserver 监听元素的尺寸宽度变化
要监听 div 宽度的变化,可以使用 ResizeObserver 接口。ResizeObserver 允许你观察一个或多个元素的尺寸变化,并在发生变化时执行回调函数。这种方法比使用 MutationObserver 更专注于尺寸变化,且不受元素属性变化的影响。 使用 ResizeObserv…...
信息安全专业好吗?
22 届的 211 信安毕业生,目前在读研(虽然已经和安全没关系),整体来看大部分高校的信安都是作为计算机的附属专业存在的,除了极具特色的几个高校,例如山大的密码学,广州大学某院士加持的网络安全…...
梧桐数据库(WuTongDB):数据库中元数据表的常见信息
元数据表是数据库系统中用于存储和管理元数据的表。这些表提供关于数据库对象(如表、列、索引、视图、存储过程等)的详细信息。以下是元数据表的一些常见类型及其详细解释: 常见元数据表类型 表信息表 表名:TABLES描述࿱…...
在 Linux 9 上安装 Oracle 19c:克服兼容性问题 (INS-08101)
Oracle 数据库 19c 的基础版本 (19.3) 发布的时候还没有 Linux 9 ,因此在Linux 9上面安装Oracle 19c会遇到很多兼容性问题。本文将探讨如何解决这些问题。 安装步骤 设置环境变量以绕过操作系统检查: Oracle 19.3 安装程序无法识别 Linux 9。 [WARNIN…...
【踩坑】pytorch中的索引与copy_结合不会复制数据及其解决方案
转载请注明出处:小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你,欢迎[点赞、收藏、关注]哦~ 目录 背景知识 实验验证 结论分析 错误案例 处理方法 注意事项 附加说明 基本索引返回视图 高级索引返回副本 赋值操作都是原地操作 以下内容…...
十六、【Python】基础教程 - 【Flask】网络编程开发
目录 前言 Flask 基础概念 安装 Flask 示例:创建一个 Flask Web 应用 运行 Flask 应用 更复杂的例子 测试新功能 前言 Flask 是一个用 Python 编写的微型 Web 框架,它以简单性和灵活性著称,非常适合快速开发小型到中型的 Web 应用。F…...
C#初级——List 容器
容器 在C#中,容器通常指的是用于存储和组织数据的集合类。 本文介绍的容器是动态数组:List<T> 内部使用数组来存储元素,当添加元素超出当前数组容量时,会自动调整大小(扩容)。 list容器 List<&g…...
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处理程序…...
【Linux-MISC设备】
目录 1. MISC设备2. MISC蜂鸣器实验 1. MISC设备 MISC设备的主设备号为10.MISC设备会自动创建cdev,不需要再手动创建。MISC设备是基于platform的. MISC驱动的编写的核心就是初始化miscdevice结构体变量,然后用misc_register函数向内核注册,…...
【随笔】VRRP+MSTP
虚拟路由冗余协议(Virtual Router Redundancy Protocol,VRRP) 设计采用主备模式,将VRRP组内多个路由设备都映射为一个虚拟路由设备。 一个VRRP组中只能由一台处于主控角色的路由器,可以有一个或多个备份角色的路由器。…...
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"角色…...
计算机网络的基本概念
IP地址(Internet Protocol Address)是指在计算机网络中每个设备的唯一标识符。它用于区分不同设备并在网络中进行数据包的路由。我们平常所使用的IP地址主要版本: IPv4 格式: 由四个整数(0到255)组成,以点…...
Python 爬虫项目实战三:GitHub 用户信息抓取与分析
一、项目背景 爬虫技术不仅限于获取网页内容,还可以用于获取和分析特定网站的用户信息。本文将演示如何使用Python编写爬虫程序,从GitHub网站抓取用户信息,并进行简单的数据分析。 二、环境准备 在开始之前,请确保你已经安装了…...
xtrabackup搭建MySQL 8.0 主从复制
xtrabackup搭建MySQL 8.0 主从复制 安装MySQL 8.0.37安装xtrabackupGTIDs初始化从库参考:GTID概述GTID相较与传统复制的优势GTID自身存在哪些限制GTID工作原理简单介绍如何开启GTID复制GTID与传统模式建立复制时候语句的不同点传统复制GTID复制 GTID同步状态简单解析…...
Java程序员接单分享
作为一名Java程序员,这阵子通过承接些小型项目,我顺利跨过了月薪破万的门槛。这些项目虽小,却如同磨刀石般,让我在实战中发现了自身技术栈的棱角与不足,尤其是意识到了在Java这一浩瀚技术海洋中的诸多未知领域。我深知…...
【HarmonyOS NEXT星河版开发学习】小型测试案例01-今日头条置顶练习
个人主页→VON 收录专栏→鸿蒙开发小型案例总结 基础语法部分会发布于github 和 gitee上面 前言 本系列可能是博客首发,鸿蒙开发星河版是一个全新的版本,由于参考视频较少鸿蒙开发不被重视导致csdn上面并没有全套的学习路线,…...
jarvisoj_level0栈溢出漏洞分析:从危险函数到后门利用的全过程指南
JarvisOJ Level0栈溢出漏洞实战:从危险函数识别到后门利用的深度解析 在二进制安全领域,栈溢出始终是最经典且最具教学价值的漏洞类型之一。今天我们将以JarvisOJ平台的Level0题目为蓝本,完整演示如何从零开始分析一个真实的栈溢出漏洞。不同…...
yz-女生-角色扮演-造相Z-Turbo与MySQL数据库交互实战教程
yz-女生-角色扮演-造相Z-Turbo与MySQL数据库交互实战教程 1. 引言 想象一下,你刚刚用yz-女生-角色扮演-造相Z-Turbo生成了一批精美的二次元角色图片,现在想要把这些作品保存起来,方便后续管理和检索。这时候,一个可靠的数据库系…...
React Native Collapsible与其他动画库对比分析:如何选择最佳折叠动画组件
React Native Collapsible与其他动画库对比分析:如何选择最佳折叠动画组件 【免费下载链接】react-native-collapsible Animated collapsible component for React Native, good for accordions, toggles etc 项目地址: https://gitcode.com/gh_mirrors/re/react-…...
企微CRM自动标签入门到精通:转化率狂飙300%,收藏这篇就够了!
客户越来越多,转化率反而越来越低? 这个问题,做过私域的人都懂。客户加了几千上万个,但每次群发活动,转化率不到1%。不是触达不够,是你根本不知道该对谁说什么——高意向客户和随便看看的人,收…...
【数据库系统】数据库系统概论——第十五章 内存数据库系统
第十五章 内存数据库系统 文章目录第十五章 内存数据库系统15.1概述15.2内存数据库的发展历史15.3内存数据库的特性15.4内存数据库的关键技术15.5小结15.1概述 内存数据库是将内存作为主存储设备的数据库系统,也称主存数据库、In-Memory DataBase等。 内存作为数据…...
3D-Speaker说话人日志技术详解:多模块集成解决方案
3D-Speaker说话人日志技术详解:多模块集成解决方案 【免费下载链接】3D-Speaker A Repository for Single- and Multi-modal Speaker Verification, Speaker Recognition and Speaker Diarization 项目地址: https://gitcode.com/gh_mirrors/3d/3D-Speaker 3…...
OpenClaw二次开发:基于Qwen3-14B扩展自定义自动化协议
OpenClaw二次开发:基于Qwen3-14B扩展自定义自动化协议 1. 为什么需要自定义协议 去年夏天,当我尝试用OpenClaw控制实验室的智能家居设备时,发现现有的指令集无法满足红外遥控和Zigbee设备联动的需求。官方提供的标准协议主要针对办公场景的…...
2001-2023年各省农产品进出口额数据(无缺失)
2001-2023年各省农产品进出口额数据 1、时间:2001-2023年 2、来源:商务BU、农业年鉴、海关总署 3、指标:年份、省份、农产品出口额(亿元)、农产品进口额(亿元)、农产品出口额(万美…...
V7K 数据收集
V7000的故障数据收集1. 通过GUI图形管理界面Download Support Package是基本的数据收集方式 选择Troubleshooting菜单下面的“Support” 注意: 微码6.3下,应选择Settings菜单下面的“Support”。点击“Download Support Package” 有4个选项可…...
如何划分接口文档?
🍅 点击文末小卡片,免费获取软件测试全套资料,资料在手,涨薪更快1、首先最主要的就是要分析接口测试文档,每一个公司的测试文档都是不一样的。具体的就要根据自己公司的接口而定,里面缺少的内容自己需要与开…...
