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

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

目录

    • JavaScript的作用
    • JavaScript的基本语法
      • 基本语法规则
      • 变量、数据类型和运算符
        • 变量
        • 数据类型
        • 运算符
    • 实践:使用JavaScript增强网页功能
    • 结语

JavaScript是一种高级的、解释型的编程语言,它使得网页能够从静态文档转变为具有动态交互性的应用程序。本节课将介绍JavaScript的基本概念、基本语法,以及变量、数据类型和运算符的使用。

JavaScript的作用

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

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

JavaScript的基本语法

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

基本语法规则

  • 使用varletconst声明变量。
  • 使用函数function定义函数。
  • 使用花括号{}定义代码块。
  • 使用分号;分隔语句。

变量、数据类型和运算符

变量

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

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

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

  • Undefined:未定义,表示变量已声明但未赋值。
  • Null:空值,表示故意赋予变量的空值。
  • Boolean:逻辑实体,truefalse
  • 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的基本语法基本语法规则变量、数据类型和运算符变量数据类型运算符 实践&#xff1a;使用JavaScript增强网页功能结语 JavaScript是一种高级的、解释型的编程语言&#xff0c;它使得网页能够从静态文档转变为具有动态交互性的应用程序。本节课将…...

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

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

.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 …...

软考基本介绍

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

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

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

信息安全专业好吗?

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

梧桐数据库(WuTongDB):数据库中元数据表的常见信息

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

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

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

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

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

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

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

C#初级——List 容器

容器 在C#中&#xff0c;容器通常指的是用于存储和组织数据的集合类。 本文介绍的容器是动态数组&#xff1a;List<T> 内部使用数组来存储元素&#xff0c;当添加元素超出当前数组容量时&#xff0c;会自动调整大小&#xff08;扩容&#xff09;。 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端⼝ 对⽹站进⾏⼀个访问&#xff0c;⼤概意思为这是对新的cookie处理程序…...

【Linux-MISC设备】

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

【随笔】VRRP+MSTP

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

vue 动态增删行,并form表单校验(附v2\v3)

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

计算机网络的基本概念

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

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

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

xtrabackup搭建MySQL 8.0 主从复制

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

Java程序员接单分享

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

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

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

数字孪生案例|港口海运模拟可视化,电子海图与船舶动态3D实景呈现

在智慧港口、船舶调度与海事监管领域&#xff0c;构建一个高保真、可交互的港口海运数字孪生系统&#xff0c;正成为提升港口运营效率、保障航行安全的关键需求。 然而&#xff0c;多数开发者在搭建港口海运可视化项目时&#xff0c;常面临技术门槛高、多源数据&#xff08;如A…...

Bypass Paywalls Clean技术实现:浏览器扩展的付费内容访问完整方案

Bypass Paywalls Clean技术实现&#xff1a;浏览器扩展的付费内容访问完整方案 Bypass Paywalls Clean是一款基于Chrome扩展架构的智能内容访问工具&#xff0c;通过请求头优化、脚本注入和动态解析技术&#xff0c;为技术爱好者和进阶用户提供突破网站付费限制的深度解决方案&…...

SDD基于规范编程-OpenSpec及SuperPowers狙

智能体时代的代码范式转移与 C# 的战略转型 传统的 C# 开发模式&#xff0c;即所谓的“工程导向型”开发&#xff0c;要求开发者创建一个复杂的项目结构&#xff0c;包括项目文件&#xff08;.csproj&#xff09;、解决方案文件&#xff08;.sln&#xff09;、属性设置以及依赖…...

Wan2.2-I2V-A14B Java面试热点:如何设计高并发视频生成任务系统?

Java面试热点&#xff1a;如何设计高并发视频生成任务系统&#xff1f; 1. 场景与挑战 视频生成服务正成为内容创作领域的热门需求&#xff0c;而高并发场景下的系统设计是Java后端开发面试中的常见考察点。假设我们需要基于Wan2.2-I2V-A14B模型构建一个视频生成平台&#xf…...

MedGemma医疗助手:5分钟本地部署,打造你的专属AI医生

MedGemma医疗助手&#xff1a;5分钟本地部署&#xff0c;打造你的专属AI医生 引言 深夜&#xff0c;当你感到身体不适&#xff0c;想初步了解症状时&#xff0c;身边有一位随时待命、知识渊博的“医生”可以咨询&#xff0c;而且这位“医生”的回答过程完全透明&#xff0c;每…...

DeepSeek-OCR-2实用指南:如何用AI高效处理扫描件和照片文字

DeepSeek-OCR-2实用指南&#xff1a;如何用AI高效处理扫描件和照片文字 1. 认识DeepSeek-OCR-2 1.1 什么是OCR技术 OCR&#xff08;Optical Character Recognition&#xff09;技术就像给电脑装上了一双"会读书的眼睛"。它能将图片、扫描件中的文字转换为可编辑的…...

图解目标检测算法之CenterNet

&#x1f31e;欢迎来到图解深度学习的世界 &#x1f308;博客主页&#xff1a;卿云阁 &#x1f48c;欢迎关注&#x1f389;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; &#x1f4c6;首发时间&#xff1a;&#x1f339;2026年3月20日&#x1f339; ✉️希望可以和大家一起完成…...

OpenClaw压力测试:Qwen3.5-9B持续工作24小时稳定性报告

OpenClaw压力测试&#xff1a;Qwen3.5-9B持续工作24小时稳定性报告 1. 测试背景与目标 上周在部署OpenClaw对接本地Qwen3.5-9B模型后&#xff0c;我产生了一个疑问&#xff1a;这套组合在长时间运行场景下表现如何&#xff1f;作为个人自动化工具&#xff0c;能否稳定处理周期…...

GTE-Base-ZH镜像体验:可视化界面+API,双模式交互更便捷

GTE-Base-ZH镜像体验&#xff1a;可视化界面API&#xff0c;双模式交互更便捷 1. 模型与镜像介绍 1.1 GTE模型背景 GTE&#xff08;General Text Embedding&#xff09;模型是由阿里巴巴达摩院研发的文本嵌入模型系列&#xff0c;基于BERT框架构建。该系列模型在大规模中文和…...

如何在openKylin 2.0 SP2中安装Qt(v0.2.2)(上)

作者&#xff1a;沈传越&#xff0c;赵文硕 明德融创工作室&#xff08;Minter Fusion Studio, MFS&#xff09; 出品 本文的所有步骤均经过测试复现 如何在openKylin 2.0 SP2中安装Qt&#xff08;v0.2.2&#xff09;&#xff08;下&#xff09; Qt是一款著名的桌面图形化系…...