复习javascript第1章

news2024/9/23 19:26:19

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

10011

字符串是文本，由双引号或单引号包围：

"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://www.coloradmin.cn/o/697074.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

深入浅出设计模式 - 迭代器模式

深入浅出设计模式 - 迭代器模式

博主介绍&#xff1a; ✌博主从事应用安全和大数据领域&#xff0c;有8年研发经验&#xff0c;5年面试官经验&#xff0c;Java技术专家✌ Java知识图谱点击链接&#xff1a;体系化学习Java&#xff08;Java面试专题&#xff09; &#x1f495;&#x1f495; 感兴趣的同学可以收…
阅读更多...
ERR_SSL_VERSION_OR_CIPHER_MISMATCH

ERR_SSL_VERSION_OR_CIPHER_MISMATCH

Firefox开启TLS 1.1支持 问题&#xff1a; 建立安全连接失败 连接到…时发生错误。对等端使用了不支持的安全协议版本。 错误代码&#xff1a;SSL_ERROR_UNSUPPORTED_VERSION 由于不能验证所收到的数据是否可信&#xff0c;无法显示您想要查看的页面。 建议向此网站的管理…
阅读更多...
Ubuntu TensorRT安装

Ubuntu TensorRT安装

文章目录 1.1环境1.2下载地址1&#xff09;操作步骤2&#xff09;添加环境变量3&#xff09;检查是否安装成功 2.1其它环境 1.1环境 1&#xff09;Ubuntu20.04 2&#xff09;cuda111torch1.8.0py38 1.2下载地址 https://developer.nvidia.com/nvidia-tensorrt-download 1…
阅读更多...
【Linux】线程同步(一)

【Linux】线程同步(一)

概念 线程同步是指多个线程之间协调和管理彼此的执行顺序&#xff0c;以避免竞态条件和不确定的结果。线程同步的目的是确保共享资源的正确访问和保护临界区的完整性。 作用 避免竞态条件&#xff1a;当多个线程同时访问和修改共享资源时&#xff0c;可能会导致竞态条件的发生…
阅读更多...
javaee session的创建

javaee session的创建

当访问服务器时&#xff0c;服务器就会创建一个session TestSession.java package com.yyy.servlet;import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import java…
阅读更多...
String、反射、枚举、lambda表达式以及泛型进阶（数据结构系列16）

String、反射、枚举、lambda表达式以及泛型进阶（数据结构系列16）

目录 前言&#xff1a; 1. String 1.1 字符串常量池 1.1.1 创建对象的思考 1.1.2 字符串常量池&#xff08;StringTable&#xff09; 1.1.3 再谈String对象创建 1.1.4 intern方法 2. 反射 2.1 反射的定义 2.2 反射的用途 2.3 反射的基本信息 2.4 反射相关的类 2.4.…
阅读更多...
Android实现发送短信功能

Android实现发送短信功能

Android发送短信 效果图代码实现先添加权限.java由用户输入手机号 自定义短信内容跳转系统发送短信页面 自定义手机号短信内容全部代码 .xml 效果图 代码实现 先添加权限 <!-- 允许程序发送SMS短信 --><uses-permission android:name"android.permission.SEND_S…
阅读更多...
nodejs线上环境远程调试

nodejs线上环境远程调试

将nodejs部署到线上环境之后&#xff0c;这个时候想要去调试还是有点困难的&#xff0c;但是好在nodejs提供了一个可以让你进行调试的开关&#xff1a;--inspect 我们可以使用这个开关来启动一个可以调试的服务&#xff0c;使用非常简单&#xff0c;在启动服务的时候加上这个指…
阅读更多...
高性能计算怎么入门？

高性能计算怎么入门？

如果入门没有专业方向&#xff0c;自学摸索的话&#xff0c;不容易有自己的核心竞争力。国内目前生态尚不完善&#xff0c;学习资料也比较少~如果想要系统学习的话&#xff0c;一定不要错过国内首家专业做高性能计算的系统学习课程。 ~我们是国内首家做高性能计算人才培养和推…
阅读更多...
微型逆变器会不会迎来CC2340时代

微型逆变器会不会迎来CC2340时代

光伏领域的朋友对微型逆变器并不陌生。而CC2340&#xff0c;对大家而言则都是陌生的主。它是何方神仙&#xff1f;和微型逆变器能有什么关系&#xff1f;你还说它可能引领微型逆变器的下一个时代&#xff1f;不急&#xff0c;我们一起来看看。 在全球为双碳愿景努力以及俄乌战…
阅读更多...
VR虚拟展会——打造商企展厅线上展示新模式

VR虚拟展会——打造商企展厅线上展示新模式

近期的大雨磅礴&#xff0c;不知道大家都感受过吗&#xff1f;就连在武汉展开的国际连锁加盟展产业博览会也都受到了一定的影响&#xff0c;为期三天的展会&#xff0c;接连下了三天的雨&#xff0c;导致很多客户无缘展会。这就是实体展会的限制之一&#xff0c;加上实体展会的…
阅读更多...
vscode修改markdown侧边预览pdf字体等设置

vscode修改markdown侧边预览pdf字体等设置

文章目录 1.按CtrlShiftP打开命令窗口2.在命令窗口出输入Markdown Preview Enhanced: Customize Css&#xff0c;打开style.less文件 1.按CtrlShiftP打开命令窗口 2.在命令窗口出输入Markdown Preview Enhanced: Customize Css&#xff0c;打开style.less文件 然后在文件内加…
阅读更多...
【网站维护】网络杂谈（7）之web网站的维护

【网站维护】网络杂谈（7）之web网站的维护

涉及知识点 如何进行web网站的维护&#xff0c;如何进行web网站的更新与测试&#xff0c;搭建web网站后期如何管理维护。 原创于&#xff1a;CSDN博主-《拄杖盲学轻声码》&#xff0c;更多内容可去其主页关注下哈&#xff0c;不胜感激 文章目录 涉及知识点前言1&#xff0e;网…
阅读更多...
仿牛客社区——7.19生成长图

仿牛客社区——7.19生成长图

采用异步方式&#xff0c;通过任务方式&#xff0c;将次命令丢到消息队列中进行执行 关于wkhtmltopdf的配置&#xff08;applaction.properties&#xff09; #关于wk的配置&#xff08;生成长图 wk.image.commandD:/wkhtmltopdf/bin/wkhtmltoimage wk.image.storageD:/wkData/w…
阅读更多...
婴儿摇篮音乐芯片 N9300-S16：为宝宝带来高品质的音乐体验

婴儿摇篮音乐芯片 N9300-S16：为宝宝带来高品质的音乐体验

​对于父母来说&#xff0c;给婴儿提供一个安稳舒适的睡眠环境是至关重要的。宝宝的睡眠品质对于其健康和发展至关重要。在成长过程中&#xff0c;音乐对婴儿的情绪、认知和智力发展都有积极的影响。因此&#xff0c;厂家在婴儿摇篮中选择一款合适的婴儿摇篮音乐芯片尤为重要。…
阅读更多...
共见·价值成就|亚马逊云科技中国峰会宣布三大举措全面升级

共见·价值成就|亚马逊云科技中国峰会宣布三大举措全面升级

2023年6月27日&#xff0c;亚马逊云科技举办一年一度的中国合作伙伴峰会。本届峰会以“共见价值成就”为主题&#xff0c;面向合作伙伴发布智荟出海计划、可持续发展伙伴计划、合作伙伴解决方案工厂以及获客激励计划等多项计划&#xff0c;以进一步强化合作伙伴“33战略”&…
阅读更多...
ASEMI代理ST可控硅BTA16的工作原理与应用分析

ASEMI代理ST可控硅BTA16的工作原理与应用分析

编辑-Z 本文将对可控硅BTA16的工作原理与应用进行详细的分析。首先&#xff0c;我们将介绍可控硅BTA16的基本概念和工作原理&#xff0c;然后&#xff0c;我们将探讨其在电力电子设备中的应用&#xff0c;接着&#xff0c;我们将分析其在电力调节中的作用&#xff0c;最后&…
阅读更多...
edge自带断网游戏

edge自带断网游戏

在没有网络时你会不会很无聊&#xff1f;博主告诉你一个edge浏览器自带的断网小游戏&#xff0c;让你在断网时也能玩游戏&#xff01; 网址&#xff1a; 打开edge://surf这个断网游戏网站即可游玩&#xff1a; 作弊码既隐藏模式&#xff1a; 输入microsoft&#xff08;意思就…
阅读更多...
C语言学习（二十八）---字符串相关函数

C语言学习（二十八）---字符串相关函数

在上一节的内容结束后&#xff0c;有关指针的内容就告一段落了&#xff0c;指针是开发中非常重要的一环&#xff0c;大家务必要对其深入理解并且掌握&#xff0c;今天我们将继续往下学习&#xff0c;主要学习字符串操作相关的函数&#xff0c;分为不限制长度和限制长度两种&…
阅读更多...
vetcor使用移动构造取代拷贝构造实现push_back

vetcor使用移动构造取代拷贝构造实现push_back

昨天说到&#xff1a;vector变量push_back一个对象或变量的时候&#xff0c;本质上是执行拷贝构造&#xff0c;但我想使用移动构造&#xff0c;而不是拷贝构造&#xff0c;本文就修改调试过程&#xff0c;详细分析如何实现移动构造。 昨天的代码如下&#xff1a;(如果有人想测…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023