复习javascript第1章

article/2025/9/30 8:31:40

JavaScript 是全球最流行的编程语言。

JavaScript 是属于 Web 的编程语言。

JavaScript 很容易学习。

JavaScript 能够改变 HTML 内容

getElementById() 是多个 JavaScript HTML 方法之一。

本例使用该方法来“查找” id="demo" 的 HTML 元素,并把元素内容(innerHTML)更改为 "Hello JavaScript":

document.getElementById("demo").innerHTML = "Hello JavaScript";

提示:JavaScript 同时接受双引号和单引号:

document.getElementById("demo").innerHTML = 'Hello JavaScript';

JavaScript 能够改变 HTML 样式 (CSS)

改变 HTML 元素的样式,是改变 HTML 属性的一种变种:

document.getElementById("demo").style.fontSize = "25px";

JavaScript 能够隐藏 HTML 元素

可通过改变 display 样式来隐藏 HTML 元素:

实例

document.getElementById("demo").style.display="none";

JavaScript 能够显示 HTML 元素

可通过改变 display 样式来显示隐藏的 HTML 元素:

实例

document.getElementById("demo").style.display="block";

JavaScript 使用

<script> 标签

在 HTML 中,JavaScript 代码必须位于 <script> 与 </script> 标签之间。

<script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>

注释:旧的 JavaScript 例子也许会使用 type 属性:<script type="text/javascript">。

注释:type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。

JavaScript 函数和事件

JavaScript 函数是一种 JavaScript 代码块,它可以在调用时被执行。

例如,当发生事件时调用函数,比如当用户点击按钮时。

提示:您将在稍后的章节学到更多有关函数和事件的知识。

<head> 或 <body> 中的 JavaScript

您能够在 HTML 文档中放置任意数量的脚本。

脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中,或兼而有之。

<head> 中的 JavaScript

在本例中,JavaScript 函数被放置于 HTML 页面的 <head> 部分。

该函数会在按钮被点击时调用:

实例

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head><body><h1>一张网页</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button></body>
</html>

<body> 中的 JavaScript

在本例中,JavaScript 函数被放置于 HTML 页面的 <body> 部分。

该函数会在按钮被点击时调用:

实例

<!DOCTYPE html>
<html>
<body> <h1>A Web Page</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button><script>
function myFunction() {document.getElementById("demo").innerHTML = "段落被更改。";
}
</script></body>
</html>

提示:把脚本置于 <body> 元素的底部,可改善显示速度,因为脚本编译会拖慢显示。

外部脚本

脚本可放置与外部文件中:

外部文件:myScript.js

function myFunction() {document.getElementById("demo").innerHTML = "段落被更改。";
}

外部脚本很实用,如果相同的脚本被用于许多不同的网页。

JavaScript 文件的文件扩展名是 .js

如需使用外部脚本,请在 <script> 标签的 src (source) 属性中设置脚本的名称:

实例

<script src="myScript.js"></script>

您可以在 <head> 或 <body> 中放置外部脚本引用。

该脚本的表现与它被置于 <script> 标签中是一样的。

注释:外部脚本不能包含 <script> 标签。

外部 JavaScript 的优势

在外部文件中放置脚本有如下优势:

  • 分离了 HTML 和代码
  • 使 HTML 和 JavaScript 更易于阅读和维护
  • 已缓存的 JavaScript 文件可加速页面加载

如需向一张页面添加多个脚本文件 - 请使用多个 script 标签:

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

外部引用

可通过完整的 URL 或相对于当前网页的路径引用外部脚本:

本例使用完整的 URL 来链接至脚本:

实例

<script src="https://www.w3school.com.cn/js/myScript1.js"></script>

JavaScript 输出

JavaScript 不提供任何内建的打印或显示函数。

JavaScript 显示方案

JavaScript 能够以不同方式“显示”数据:

  • 使用 window.alert() 写入警告框
  • 使用 document.write() 写入 HTML 输出
  • 使用 innerHTML 写入 HTML 元素
  • 使用 console.log() 写入浏览器控制台

使用 innerHTML

如需访问 HTML 元素,JavaScript 可使用 document.getElementById(id) 方法。

id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容:

实例

<!DOCTYPE html>
<html>
<body><h1>我的第一张网页</h1><p>我的第一个段落</p><p id="demo"></p><script>document.getElementById("demo").innerHTML = 5 + 6;
</script></body>
</html> 

提示:更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法。

使用 document.write()

出于测试目的,使用 document.write() 比较方便:

实例

<!DOCTYPE html>
<html>
<body><h1>我的第一张网页</h1><p>我的第一个段落</p><script>
document.write(5 + 6);
</script></body>
</html> 

注意:在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML :

实例

<!DOCTYPE html>
<html>
<body><h1>我的第一张网页</h1><p>我的第一个段落</p><button onclick="document.write(5 + 6)">试一试</button></body>
</html>

提示:document.write() 方法仅用于测试。

使用 window.alert()

您能够使用警告框来显示数据:

实例

<!DOCTYPE html>
<html>
<body><h1>我的第一张网页</h1><p>我的第一个段落</p><script>
window.alert(5 + 6);
</script></body>
</html> 

使用 console.log()

在浏览器中,您可使用 console.log() 方法来显示数据。

请通过 F12 来激活浏览器控制台,并在菜单中选择“控制台”。

实例

<!DOCTYPE html>
<html>
<body><h1>我的第一张网页</h1><p>我的第一个段落</p><script>
console.log(5 + 6);
</script></body>
</html>

JavaScript 语法

JavaScript 语法是一套规则,它定义了 JavaScript 的语言结构。

var x, y;	// 如何声明变量
x = 7; y = 8;	// 如何赋值
z = x + y;	// 如何计算值

JavaScript 值

JavaScript 语句定义两种类型的值:混合值和变量值。

混合值被称为字面量(literal)。变量值被称为变量

JavaScript 字面量

书写混合值最重要的规则是:

数值有无小数点均可:

15.9010011

字符串是文本,由双引号或单引号包围:

"Bill Gates"'Bill Gates' 

JavaScript 变量

在编程语言中,变量用于存储数据值。

JavaScript 使用 var 关键词来声明变量。

= 号用于为变量赋值

在本例中,x 被定义为变量。然后,x 被赋的值是 7:

var x;x = 7;

JavaScript 运算符

JavaScript 使用算数运算符+ - * /)来计算值

(7 + 8) * 10

JavaScript 使用赋值运算符=)向变量赋值

var x, y;
var x = 7;
var y = 8;

JavaScript 表达式

表达式是值、变量和运算符的组合,计算结果是值。

6 * 10

值可以是多种类型,比如数值和字符串。

例如,"Bill" + " " + "Gates",计算为 "Bill Gates":

"Bill" + " " + "Gates"

JavaScript 关键词

JavaScript 关键词用于标识被执行的动作。

var 关键词告知浏览器创建新的变量:

var x = 7 + 8;
var y = x * 10; 

JavaScript 注释

并非所有 JavaScript 语句都被“执行”。

双斜杠 // 或 /* 与 */ 之间的代码被视为注释

注释会被忽略,不会被执行:

var x = 7;   // 会执行// var x = 8;   不会执行

JavaScript 标识符

标识符是名称。

在 JavaScript 中,标识符用于命名变量(以及关键词、函数和标签)。

在大多数编程语言中,合法名称的规则大多相同。

在 JavaScript 中,首字符必须是字母、下划线(-)或美元符号($)。

连串的字符可以是字母、数字、下划线或美元符号。

提示:数值不可以作为首字符。这样,JavaScript 就能轻松区分标识符和数值。

JavaScript 对大小写敏感

所有 JavaScript 标识符对大小写敏感

变量 lastName 和 lastname,是两个不同的变量。

lastName = "Gates";
lastname = "Jobs"; 

JavaScript 变量

JavaScript 变量

JavaScript 变量是存储数据值的容器。

在本例中,x、y 和 z 是变量:

实例

var x = 7;
var y = 8;
var z = x + y; 

从上例中,您可获得:

  • x 存储值 7
  • y 存储值 8
  • z 存储值 15

类似代数

在本例中,price1、price2 以及 total 是变量:

实例

var price1 = 7;
var price2 = 8;
var price3 = 12;
var total = price1 + price2 + price3;

在编程中,类似代数,我们使用变量(比如 price1)来存放值。

在编程中,类似代数,我们在表达式中使用变量(total = price1 + price2)。

从上例中,您可以算出 total 的值是 27。

提示:JavaScript 变量是存储数据值的容器。

JavaScript 标识符

所有 JavaScript 变量必须以唯一的名称标识

这些唯一的名称称为标识符

标识符可以是短名称(比如 x 和 y),或者更具描述性的名称(age、sum、totalVolume)。

构造变量名称(唯一标识符)的通用规则是:

  • 名称可包含字母、数字、下划线和美元符号
  • 名称必须以字母开头
  • 名称也可以 $ 和 _ 开头(但是在本教程中我们不会这么做)
  • 名称对大小写敏感(y 和 Y 是不同的变量)
  • 保留字(比如 JavaScript 的关键词)无法用作变量名称

提示:JavaScript 标识符对大小写敏感。

赋值运算符

在 JavaScript 中,等号(=)是赋值运算符,而不是“等于”运算符。

这一点与代数不同。下面的代码在代数中是不合理的:

x = x + 5

然而在 JavaScript 中,它非常合理:把 x + 5 的值赋给 x。

(计算 x + 5 的值并把结果放入 x 中。x 的值递增 5。)

注释:JavaScript 中的“等于”运算符是 ==

JavaScript 数据类型

JavaScript 变量可存放数值,比如 100,以及文本值,比如 "Bill Gates"。

在编程中,文本值被称为字符串。

JavaScript 可处理多种数据类型,但是现在,我们只关注数值和字符串值。

字符串被包围在双引号或单引号中。数值不用引号。

如果把数值放在引号中,会被视作文本字符串。

实例

var pi = 3.14;
var person = "Bill Gates";
var answer = 'How are you!';

声明(创建) JavaScript 变量

在 JavaScript 中创建变量被称为“声明”变量。

您可以通过 var 关键词来声明 JavaScript 变量:

var carName;

一条语句,多个变量

您可以在一条语句中声明许多变量。

以 var 作为语句的开头,并以逗号分隔变量:

var person = "Bill Gates", carName = "porsche", price = 15000;

声明可横跨多行:

var person = "Bill Gates",
carName = "porsche",
price = 15000;

Value = undefined

在计算机程序中,被声明的变量经常是不带值的。值可以是需被计算的内容,或是之后被提供的数据,比如数据输入。

不带有值的变量,它的值将是 undefined

变量 carName 在这条语句执行后的值是 undefined

实例

var carName;

重复声明 JavaScript 变量

如果再次声明某个 JavaScript 变量,将不会丢它的值。

在这两条语句执行后,变量 carName 的值仍然是 "porsche":

实例

var carName = "porsche";
var carName; 

 本篇Javascript的基础语法就到这了,小编也是从基础语法慢慢学起来的,感谢支持


http://chatgpt.dhexx.cn/article/aeLjlSHh.shtml

相关文章

【NLP】第1章 什么是Transformers?

&#x1f50e;大家好&#xff0c;我是Sonhhxg_柒&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流&#x1f50e; &#x1f4dd;个人主页&#xff0d;Sonhhxg_柒的博客_CSDN博客 &#x1f4c3; &#x1f381;欢迎各位→点赞…

第1章 Python 顺序结构

文章目录 Educoder—第1章 Python 顺序结构第1关&#xff1a;Python顺序结构之无输入求多边形的面积第2关&#xff1a;Python顺序结构之无输入求平抛小球与抛出点之间的距离第3关&#xff1a;Python顺序结构之无输入求星期几第4关&#xff1a;Python顺序结构之有输入格式化输出…

【Word/word2007】将标题第1章改成第一章

问题&#xff1a;设置多级列表没有其他格式选的解决办法和带来的插入图注解的问题&#xff0c;将标题第1章改成第一章的问题其他方案。 按照百度搜索的方法设置第一章&#xff0c;可以是没有相应的样式可以选。 那就换到编号选项 设置新的编号值 先选是 然就是变得很丑 这时打开…

python教程第1章

python教程第1章 (1)python(2)IDEIDE是什么安装IDEVSCode第一步第二步第四步插件 海龟编辑器第一步第二步 (3)安装python下载安装包安装 (1)python 为什么python是一个成功的语言呢&#xff1f;正是因为它有非常强大的IDE。 (2)IDE IDE是什么 IDE是三个英文单词的缩写&…

第1章 介绍

介绍 正如业界众所周知的那样&#xff0c;28纳米及以下节点的设计复杂性正在爆炸式增长。小尺寸要求和高性能&#xff0c;低功耗和小面积的相互矛盾的要求导致了如此复杂的设计架构。多核&#xff0c;多线程和功耗&#xff0c;性能和面积&#xff08;PPA&#xff09;需求加剧了…

第1章 Python基础

目录 0. Jupyter Notebook简介 0.1 Jupyter Notebook简介及启动 0.1.1 Jupyter Notebook简介0.1.2 Jupyter Notebook安装与启动0.2 Jupyter Notebook里面的最常用的操作&#xff1a; 0.2.1 更改文件名0.2.2 模式切换0.2.3 命令模式快捷键0.2.4 查询帮助1. Python基础语法 1.1 编…

第1章 实践基础

文章目录 第1章 实践基础1.1 如何运行本书的代码1.1.1 本地运行1.1.1.1 环境准备1.1.1.2 快速安装 1.1.2 AI Studio运行 1.2 张量1.2.1 创建张量1.2.1.1 指定数据创建张量1.2.1.2 指定形状创建1.2.1.3 指定区间创建 1.2.2 张量的属性1.2.2.1 张量的形状1.2.2.2 形状的改变1.2.2…

第1章 Nginx简介

基于 Nginx版本 1.14.2 &#xff0c;Tomcat版本 9.0.0 演示 第1章 Nginx简介 1.1 Nginx发展介绍 Nginx &#xff08;engine x&#xff09; 是一个高性能的Web服务器和反向代理服务器&#xff0c;也可以作为邮件代理服务器。 Nginx 特点是占有内存少&#xff0c;并发处理能力…

第1章 多线程基础

第1章 多线程基础 1.1.2 线程与进程的关系 进程可以看成是线程的容器&#xff0c;而线程又可以看成是进程中的执行路径。 1.2 多线程启动 线程有两种启动方式&#xff1a;实现Runnable接口&#xff1b;继承Thread类并重写run()方法。 执行进程中的任务时才会产生线程&a…

第1章 Rust安装

Rust是一门安全的语言&#xff0c;最近也加入到Linux内核中&#xff0c;因此后续这门语言会越来越流行&#xff0c;所以准备学习下&#xff0c;本篇介绍Rust在Window平台上的安装过程。 目录 安装步骤 1.到官网下载安装包 2.搭建 Visual Studio Code 开发环境 安装步骤 1.…

第1章 概述

第一章 概述 考试范围&#xff1a; 1.1-1.10 考试内容&#xff1a; 章节后的Review Terms&#xff08;名词基本都在课文中&#xff09; 考试题型&#xff1a; 综合题 Review Terms Database-management system (DBMS) &#xff1a;A collection of interrelated data and a …

图书馆预约占座管理系统项目源码+文档+jsp+ssm+mysql

【项目功能描述】 【源码下载】 图书馆预约占座管理系统的开发技术为jspssmmysql&#xff0c;前端技术为jquery easyui框架&#xff0c;后台用的ssm&#xff08;spring、springMVC、mybaits&#xff09;框架&#xff0c;主要实现的功能有&#xff1a;用户管理、菜单管理、角色…

图书馆座位预约小程序系统设计与实现

项目背景和意义 目的&#xff1a;本课题主要目标是设计并能够实现一个基于微信小程序预约订座小程序&#xff0c;前台用户使用小程序&#xff0c;后台管理使用JavaMysql开发&#xff0c;后台使用了springboot框架&#xff1b;通过后台添加座位类型、座位号&#xff0c;用户通过…

【计算机毕业设计】基于微信小程序的图书馆座位预约系统

毕设帮助、源码交流及技术指导&#xff0c;见文末。 图书馆作为高校的学习宝地&#xff0c;有着不可替代的地位。但是在信息化时代&#xff0c;传统模式下的图书馆管理并不能满足用户需求。为解决图书馆学生占座问题严重、座位资源紧张的问题,设计了图书馆座位预约系统&#xf…

学校图书馆管理系统

摘 要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;学校图书馆管理系统当然也不能排除在外。学校图书馆管理系统是以实际运用为开发背景&#xff0c;运用软件工程开发方法&…

基于javaweb+SpringBoot+JPA图书馆座位占座预约管理系统(管理员、老师、学生)

基于javawebSpringBootJPA图书馆座位占座预约管理系统(管理员、老师、学生) 开发工具&#xff1a;eclipse/idea/myeclipse/sts等均可配置运行 适用 课程设计&#xff0c;大作业&#xff0c;毕业设计&#xff0c;项目练习&#xff0c;学习演示等 /*** 修改密码页面** return*…

基于SSM的图书馆座位预约管理系统占座系统-java图书馆座位预约管理系统占座系统...

基于SSM的图书馆座位预约管理系统占座系统-java图书馆座位预约管理系统占座系统 1.包含源程序,数据库脚本。代码和数据库脚本都有详细注释。2.课题设计仅供参考学习使用,可以在此基础上进行扩展完善开发环境:Eclipse ,MYSQL,JDK1.7,Tomcat 7涉及技术点:MVC模式、SpringMvc、…

图书馆座位预约管理系统毕业设计,图书馆座位管理系统设计与实现,图书馆座位预约系统毕业论文毕设作品参考

项目背景和意义 目的&#xff1a;本课题主要目标是设计并能够实现一个基于web网页的教室图书馆座位预约系统&#xff0c;整个网站项目使用了B/S架构&#xff0c;基于python的Django框架下开发&#xff1b;管理员通过后台录入信息、管理信息&#xff0c;设置网站信息&#xff0c…

Springboot实现图书馆座位预约管理系统之自习室预约占座系统源码

本系统主要实现了学生自由预约选择图书馆的座位的基本功能&#xff0c;除基础脚手架外&#xff0c;实现的功能有&#xff1a; 管理员&#xff1a;学生管理、教师管理、阅览室类型管理、阅览室管理&#xff08;座位生成等&#xff09;、学生信用积分管理、座位预约统计管理等。…

基于Android的图书馆借阅占座座位app-计算机毕业设计

项目介绍 本次毕业设计是设计并实现一个图书馆座位预约系统。该系统的最终目的是为了自动化管理图书馆自习座位&#xff0c;解决占座问题&#xff0c;提高座位利用率。实际上我校是有相应的座位管理系统&#xff0c;它是那种固定的触摸刷卡屏终端&#xff0c;每层有一个&#…