HTML+CSS+JS基础
目的：开发一个平台
-前端开发：HTML、CSS、JavaScript
-web框架:接收请求并处理请求
-Mysql数据库：存储数据位置
快速上手：基于flask web框架能够快速搭建一个网站
深入学习：基于django框架
1.快速开发网站
#安装flask
pip install flask
from flask import Flask
app = Flask(__name__)
@app.route("/show/info")
def index():
return "中国联通"
if __name__=="__main__":
app.run()
2.HTML
实例
<p>My cat is very grumpy</p>
HTML元素详解
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Knmulk5U-1659506769261)(阶段三：python全栈工程师前端/grumpy-cat-small.png)]
段落元素
开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
内容（Content）：元素的内容，本例中就是所输入的文本本身。
元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
元素属性（Attribute）：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JbcDzjtD-1659506769262)(阶段三：python全栈工程师前端/grumpy-cat-attribute-small.png)]
属性包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。本例中，class 是属性名称，editor-note 是属性的值。class 属性可为元素提供一个标识名称，以便进一步为元素指定样式或进行其他操作时使用。
属性包括：
- 在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
- 属性名称，并接上一个符号。
- 由引号所包围的属性值。
注：不包含 ASCII 空格（以及 " ' ` = < > ）的简单属性值可以不使用引号，但是建议将所有属性值用引号括起来，这样的代码一致性更佳，更易于阅读。
嵌套元素
把一个元素放在其他元素里面，我们称之为嵌套元素。
<p>My cat is <strong>very</strong> grumpy.</p>
必须保证元素嵌套次序正确：本例首先使用
标签，然后使用标签，因此要先去运行标签，等结束后，才结束
标签。嵌套中错误表达方式。
<p>My cat is <strong>very grumpy.</p></strong>
元素必须有这鲜明的嵌套层次。尽力避免嵌套层次混乱，元素必须遵循正确的开始和结束方式。
空元素
不包含任何内容的元素称为空元素。比如元素：
<img src="images/firefox-icon.png" alt="My test image">
本元素包含两个属性，但是并没有 结束标签，元素里也没有内容。这是因为图像元素不需要通过内容来产生效果，它的作用是向其所在的位置嵌入一个图像。
HTML详解
以上介绍了一些基本的 HTML 元素，但孤木不成林。现在来看看单个元素如何彼此协同构成一个完整的 HTML 页面。回顾 文件处理 小节中创建的 index.html 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>
解析
<!DOCTYPE html> — 文档类型。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，DOCTYPE 用来链接一些 HTML 编写守则，比如自动查错之类。DOCTYPE 在当今作用有限，仅用于保证文档正常读取。现在知道这些就足够了。
<html></html> — <html> 元素。该元素包含整个页面的内容，也称作根元素。
<head></head> — <head> 元素。该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。
<meta charset="utf-8"> — 该元素指定文档使用 UTF-8 字符编码，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。
<title></title> — <title> 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
<body></body> — <body> 元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。
图像
重新认识元素:
<img src="images/firefox-icon.png" alt="My test image">
像之前所讲，该元素通过包含图像文件路径的地址属性 src，可在所在位置嵌入图像。
该元素还包括一个替换文字属性 alt，是图像的描述内容，用于当图像不能被用户看见时显示，不可见的原因可能是：
- 用户有视觉障碍。视障用户可以使用屏幕阅读器来朗读
alt属性的内容。 - 有些错误使图像无法显示。可以试着故意将
src属性里的路径改错。保存并刷新页面就可以在图像位置看到：
alt 属性的关键字即“描述文本”。alt 文本应向用户完整地传递图像要表达的意思。用 “测试图片” 来描述 Firefox 标志并不合适，修改成 “Firefox 标志：一只盘旋在地球上的火狐” 就好多了。
可以试着为图像编写一些更好的 alt 文本。
标记文档
标题
标题元素可用于指定内容的标题和子标题。就像一本书的书名、每章的大标题、小标题，等。HTML 文档也是一样。HTML 包括六个级别的标题， h1 (en-US)–h6 (en-US) ，一般最多用到 3-4 级标题。
<h1>主标题</h1>
<h2>顶层标题</h2>
<h3>子标题</h3>
<h4>次子标题</h4>
可以尝试在 <img> 元素上面添加一个合适的标题。
注:你可以看到第一级标题是有隐式的主题样式。不要使用标题元素来加大、加粗字体，因为标题对于 无障碍访问 和 搜索引擎优化 等问题非常有意义。要保持页面结构清晰，标题整洁，不要发生标题级别跳跃。
段落（Paragraph）
<p>元素是用来指定段落使用的，通常用来指定常规的文本内容</p>
试着添加一些文本（在 设计网站的外观 小节）到一个或几个段落中，并把它们放在你的 `` 元素下方。
列表（List）
Web上的很多内容都是列表，HTML有一些特别的列表元素。标记列表通常包括至少两个元素。最常用的列表类型为：
列表的每个项目用一个项目列表(List ltem)元素
- 包围
-
比如，如果需要将下面片段改成一个列表:
<p>At Mozilla, we're a global community of technologists, thinkers, and builders working together… </p>可以这样更改标记:
<p>At Mozilla, we're a global community of</p> <ul> <li>technologists</li> <li>thinkers</li> <li>builders</li> </ul> <p>working together… </p>示例页面中添加了一个有序列表和一个无序列表.
链接
链接非常重要—它们赋予 Web 网络属性。要植入一个链接，我们需要使用一个简单的元素 — `` — a 是 “anchor” （锚）的缩写。要将一些文本添加到链接中，只需如下几步：
-
选择一些文本。比如“Mozilla Manifesto”。
-
将文本包含在
<a>元素内，就像这样：<a>Mozilla Manifesto</a> -
为此
<a>元素添加一个href属性，就像这样：<a href="">Mozilla Manifesto</a> -
把属性的值设置为所需网址：
<a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla Manifesto</a>
如果网址开始部分省略了
https://或者http://，可能会得到错误的结果。在完成一个链接后，可以试着点击它来确保指向正确。注:href 这个名字可能开始看起来有点令人费解，代表超文本引用（ hypertext reference）。3.CSS基础
层叠样式表（Cascading Style Sheet，简称：CSS）是为网页添加样式的代码。本节将介绍 CSS 的基础知识，并解答类似问题：怎样将文本设置为黑色或红色？怎样将内容显示在屏幕的特定位置？怎样用背景图片或颜色来装饰网页？
css来源
css并不是编程语言，也不是标记语言，它是一门样式表语言，通常我们会在html添加css样式，例如,选择html页面中所有段落元素，并将其中的文本改为红色：
p { color: red; }可以试一下：新建一个styles文件夹，在其中新建一个style.css文件，将这三行css保存在里面，然后将css文件连接到html文件，否则css代码不会对html文件显示效果有任何影响
-
打开index.html文件，然后将下面一行粘贴到文档头（也就是和标签之间）。
<link href="styles/style.css" rel="stylesheet"> -
保存
index.html并用浏览器将其打开。应该看到以下页面:
“CSS 规则集”详解
让我们来仔细看一看上述 CSS：
整个结构称为 规则集（通常简称“规则”），各部分释义如下：
-
选择器（Selector）
HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是
p元素）。要给不同元素添加样式只需要更改选择器就行了。 -
声明（Declaration）
一个单独的规则，如
color: red;用来指定添加样式元素的属性。 -
属性（Properties）
改变 HTML 元素样式的途径。（本例中
color就是 `` 元素的属性。）CSS 中，由编写人员决定修改哪个属性以改变规则。 -
属性的值（Property value）
在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了
red之外还有很多属性值可以用于color）。
注意其他重要的语法：
- 每个规则集（除了选择器的部分）都应该包含在成对的大括号里（
{}）。 - 在每个声明里要用冒号（
:）将属性与属性值分隔开。 - 在每个规则集里要用分号（
;）将各个声明分隔开。
如果要同时修改多个属性，只需要将它们用分号隔开，就像这样：
p { color: red; width: 500px; border: 1px solid black; }多元素选择
也可以选择多种类型的元素并为它们添加一组相同的样式。将不同的选择器用逗号分开。例如：
p, li, h1 { color: red; }不同类型的选择器
选择器有许多不同的类型。上面只介绍了元素选择器，用来选择 HTML 文档中给定的元素。但是选择操作可以更加具体。下面是一些常用的选择器类型：
选择器名称 选择的内容 示例 元素选择器（也称作标签或类型选择器） 所有指定 (该) 类型的 HTML 元素 p选择<p>ID 选择器 具有特定 ID 的元素（单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID） #my-id选择<p id="my-id">或<a id="my-id">类选择器 具有特定类的元素（单一页面中，一个类可以有多个实例） .my-class选择<p class="my-class">和<a class="my-class">属性选择器 拥有特定属性的元素 img[src]选择<img src="myimage.png">而不是<img>伪（Pseudo）类选择器 特定状态下的特定元素（比如鼠标指针悬停） a:hover仅在鼠标指针悬停在链接上时选择<a>。选择器的种类远不止于此，更多信息请参阅 选择器。
字体和文本
译注：再一次说明，中文字体文件较大，不适合直接用于 Web Font。在探索了一些 CSS 基础后，我们来把更多规则和信息添加至
style.css中，从而让示例更美观。首先，让字体和文本变得更漂亮。1.第一步，找到之前 Google Font 输出的地址。并以
link元素的形式添加进index.html文档头（head 和</head>之间的任意位置）。代码如下：<link href="https://fonts.font.im/css?family=Open+Sans" rel="stylesheet" type="text/css">以上代码为当前网页下载 Open Sans 字体，从而使自定义 CSS 中可以对 HTML 元素应用这个字体。
2.接下来，删除
style.css文件中已有的规则。虽然测试是成功的了，但是红字看起来并不太舒服。3.将下列代码添加到相应的位置，用你在 Google Fonts 找到的字体替代
font-family中的占位行。（font-family意味着你想要你的文本使用的字体。）这条规则首先为整个页面设定了一个全局字体和字号（因为<html>是整个页面的父元素，而且它所有的子元素都会继承相同的font-size和font-family）：html { /* px 表示“像素（pixels）”: 基础字号为 10 像素 */ font-size: 10px; /* Google fonts 输出的 CSS */ font-family: 'Open Sans', sans-serif; }注：CSS 文档中所有位于 /* 和 */ 之间的内容都是 CSS 注释，它会被浏览器在渲染代码时忽略。你可以在这里写下对你现在要做的事情有帮助的笔记。译注：/**/ 不可嵌套，/*这样的注释是/*不行*/的*/。CSS 不接受 // 注释。4.接下来为文档体内的元素（
h1(en-US)、li和p）设置字号。将标题居中显示，并为正文设置行高和字间距，从而提高页面的可读性。h1 { font-size: 60px; text-align: center; } p, li { font-size: 16px; /* line-height 后面可以跟不同的参数，如果是数字，就是当前字体大小乘上数字 */ line-height: 2; letter-spacing: 1px; }可以随时调整px值来获得满意的结果,大体效果如下:
一切皆盒子
编写 CSS 时你会发现，你的工作好像是围绕着一个一个盒子展开的——设置尺寸、颜色、位置，等等。页面里大部分 HTML 元素都可以被看作若干层叠的盒子。
并不意外，CSS 布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性：
padding：即内边距，围绕着内容（比如段落）的空间。border：即边框，紧接着内边距的线。margin：即外边距，围绕元素外部的空间。
这里还使用了：
width：元素的宽度background-color：元素内容和内边距底下的颜色color：元素内容（通常是文本）的颜色text-shadow：为元素内的文本设置阴影display：设置元素的显示模式（暂略）
开始在页面中添加更多 CSS 吧！大胆将这些新规则都添加到页面的底部，而不要纠结改变属性值会带来什么结果。
更改页面颜色
html { background-color: #00539F; }这条规则将整个页面的背景颜色设置为 所计划的颜色。
文档体格式设置
body { width: 600px; margin: 0 auto; background-color: #FF9500; padding: 0 20px 20px 20px; border: 5px solid black; }现在是
body元素。以上条声明，我们来逐条查看：width: 600px;—— 强制页面永远保持 600 像素宽。margin: 0 auto;—— 为margin或padding等属性设置两个值时，第一个值代表元素的上方和下方（在这个例子中设置为0），而第二个值代表左边和右边（在这里，auto是一个特殊的值，意思是水平方向上左右对称）。你也可以使用一个，三个或四个值，参考 这里 。background-color: #FF9500;—— 如前文所述，指定元素的背景颜色。我们给 body 用了一种略微偏红的橘色以与深蓝色的 `` 元素形成反差，你也可以尝试其它颜色。padding: 0 20px 20px 20px;—— 我们给内边距设置了四个值来让内容四周产生一点空间。这一次我们不设置上方的内边距，设置右边，下方，左边的内边距为 20 像素。值以上、右、下、左的顺序排列。border: 5px solid black;—— 直接为 body 设置 5 像素的黑色实线边框。
定位页面主标题并添加样式
h1 { margin: 0; padding: 20px 0; color: #00539F; text-shadow: 3px 3px 1px black; }你可能发现页面的顶部有一个难看的间隙，那是因为浏览器会在没有任何 CSS 的情况下 给
h1(en-US) 等元素设置一些默认样式。但这并不是个好主意，因为我们希望一个没有任何样式的网页也有基本的可读性。为了去掉那个间隙，我们通过设置margin: 0;来覆盖默认样式。至此，我们已经把标题的上下内边距设置为 20 像素，并且将标题文本与 HTML 的背景颜色设为一致。
需要注意的是，这里使用了一个
text-shadow属性，它可以为元素中的文本提供阴影。四个值含义如下：- 第一个值设置水平偏移值 —— 即阴影右移的像素数（负值左移）。
- 第二个值设置垂直偏移值 —— 即阴影下移的像素数（负值上移）。
- 第三个值设置阴影的模糊半径 —— 值越大产生的阴影越模糊。
- 第四个值设置阴影的基色。
不妨尝试不同的值看看能得出什么结果。
图像居中
img{ display:block; margin:0 uato; }最后，我们把图像居中来使页面更美观。可以复用 body 的
margin: 0 auto，但是需要一点点调整。body元素是块级元素，意味着它占据了页面的空间并且能够赋予外边距和其他改变间距的值。而图片是内联元素，不具备块级元素的一些功能。所以为了使图像有外边距，我们必须使用display: block给予其块级行为。注：以上说明假定所选图片小于页面宽度（600 pixels）。更大的图片会溢出 body 并占据页面的其他位置。要解决这个问题，可以： 1）使用 图片编辑器 来减小图片宽度； 2）用 CSS 限制图片大小，即减小 <img> 元素 width 属性的值（比如 400 px）。注：如果你暂时不能理解 display: block 和块级元素与行内元素的差别也没关系；随着你对 CSS 学习的深入，你将明白这个问题。display 属性的更多信息请查看 参考页面 。JavaScript 基础
JavaScript是一门编程语言，可为网站添加交互功能（例如：游戏、动态样式、动画以及在按下按钮或收到表单数据时做出的响应等）。
JavaScript 到底是什么？
JavaScript（缩写：JS）是一门完备的 动态编程语言。当应用于 HTML 文档时，可为网站提供动态交互特性。由布兰登·艾克（Brendan Eich，Mozilla 项目、Mozilla 基金会和 Mozilla 公司的联合创始人）发明。
JavaScript 的应用场合极其广泛，简单到幻灯片、照片库、浮动布局和响应按钮点击，复杂到游戏、2D/3D 动画、大型数据库驱动程序等等。
JavaScript 相当简洁，却非常灵活。开发者们基于 JavaScript 核心编写了大量实用工具，可以使 开发工作事半功倍。其中包括：
- 浏览器应用程序接口（API）—— 浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成 3D 图像与音频样本等等。
- 第三方 API —— 让开发者可以在自己的站点中整合其它内容提供者（Twitter、Facebook 等）提供的功能。
- 第三方框架和库 —— 用来快速构建网站和应用。
本节是一篇 JavaScript 简介，因此这个阶段不会对 JavaScript 语言和上述工具做过多的介绍。之后可以到 JavaScript 学习区 和 MDN 的其它地方学习更多细节。
下面对语言核心做一个不完整介绍，期间还可以接触到一些浏览器 API 特性。
hello world
-
首先，打开你的测试站点，创建一个名为
scripts的文件夹。然后在其中创建一个名为 main.js 的文件。 -
下一步，在index.html文件 标签前的新行添加以下代码。
<script src="scripts/main.js" defer></script> -
与 CSS 的
<link>元素类似，它将 JavaScript 引入页面以作用于 HTML（以及 CSS 等页面上所有内容）： -
现在将以下代码添加到main.js文件中：
let myHeading = document.querySelector('h1'); myHeading.textContent = 'Hello world!'; -
最后，保存 HTML 和 JavaScript 文件，用浏览器打开
index.html。可以看到如下内容：
注：我们将 <script> 放在 HTML 文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将 JavaScript 代码放在 HTML 页面的底部附近通常是最好的策略。发生了什么?
JavaScript 把页面的标题改成了“Hello world!” 。首先用
querySelector()函数获取标题的引用，并把它储存在myHeading变量中。这与 CSS 选择器的用法非常相像：若要对某个元素进行操作，首先得选择它。之后，把
myHeading变量的属性textContent（标题内容）修改为“Hello world!” 。注:上面用到的两个函数都来自 文档对象模型 (DOM) API，均用于控制文档。JavaScript 快速入门
我们来学习一些 JavaScript 的核心特性，从而更好地理解它的运行机制。学习这些知识很有意义，因为这些原理普遍适用于所有编程语言，掌握好它们，可以做到融会贯通。
重要：学习本节时，请尝试将示例代码输入到 JavaScript 控制台里看看会发生什么。JavaScript 控制台的更多信息请查看 浏览器开发者工具。变量（variable）
变量 (en-US) 是存储值的容器。要声明一个变量，先输入关键字
let或var，然后输入合适的名称：let myVariable;注：行末的分号表示当前语句结束，不过只有在单行内需要分割多条语句时，这个分号才是必须的。然而，一些人认为每条语句末尾加分号是一种好的风格。分号使用规则的更多细节请参阅 JavaScript 分号使用指南（英文页面）。注：几乎任何内容都可以作为变量名，但还是有一些限制（请参阅 变量命名规则）。如果你不确定，还可以 验证变量名 是否有效。注：JavaScript 对大小写敏感，myVariable 和 myvariable 是不同的。如果代码出现问题了，先检查一下大小写！注：想要了解更多关于 var 和 let 的不同点，可以参阅 var 与 let 的区别。变量定义后可以进行赋值:
myVariable='李雷';也可以将定义、赋值操作写在同一行：
let myVariable = '李雷';可以直接通过变量名取得变量的值:
myVariable;变量在赋值后是可以更改的：
let myVariable = '李雷'; myVariable = '韩梅梅';注意变量可以有不同的 数据类型 ：
变量 解释 示例 String 字符串（一串文本）：字符串的值必须用引号（单双均可，必须成对）扩起来。 let myVariable = ‘李雷’; Number 数字：无需引号。 let myVariable = 10; Boolean 布尔值（真 / 假）： true/false是 JS 里的特殊关键字，无需引号。let myVariable = true; Array 数组：用于在单一引用中存储多个值的结构。 let myVariable = [1, '李雷', '韩梅梅', 10];
元素引用方法：myVariable[0],myVariable[1]……Object 对象：JavaScript 里一切皆对象，一切皆可储存在变量里。这一点要牢记于心。 let myVariable = document.querySelector('h1');
以及上面所有示例都是对象。那么变量有什么用呢？我们说，编程时它们无所不在。如果值无法改变，那么就无法做任何动态的工作，比如发送个性化的问候，或是改变在图片库当前展示的图片。
注释
类似于 CSS，JavaScript 中可以添加注释。
/* 这里的所有内容 都是注释。 */如果注释只有一行，可以更简单地将注释放在两个斜杠之后，就像这样：
// 这是一条注释。运算符
运算符 (en-US) 是一类数学符号，可以根据两个值（或变量）产生结果。以下表格中介绍了一些最简单的运算符，可以在浏览器控制台里尝试一下后面的示例。
译注：这里说“根据两个值（或变量）产生结果”是不严谨的，计算两个变量的运算符称为“二元运算符”，还有一元运算符和三元运算符，下表中的“取非”就是一元运算符。运算符 解释 符号 示例 加 将两个数字相加，或拼接两个字符串。 + 6 + 9;
"Hello " + “world!”;减、乘、除 这些运算符操作与基础算术一致。只是乘法写作星号，除法写作斜杠。 - ,*,/9 - 3;
8 * 2; //乘法在JS中是一个星号
9 / 3;赋值运算符 为变量赋值（你之前已经见过这个符号了） = let myVariable = ‘李雷’; 等于 测试两个值是否相等，并返回一个 true/false（布尔）值。=== let myVariable = 3;
myVariable === 4; // false不等于 和等于运算符相反，测试两个值是否不相等，并返回一个 true/false（布尔）值。!== let myVariable = 3;myVariable !== 3; // false 取非 返回逻辑相反的值，比如当前值为真，则返回 false。！ 原式为真，但经取非后值为 false：let myVariable = 3;!(myVariable === 3); // false运算符种类远不止这些，不过目前上表已经够用了。完整列表请参阅 表达式和运算符。
注：不同类型数据之间的计算可能出现奇怪的结果，因此必须正确引用变量，才能得出预期结果。比如在控制台输入 "35" + "25"，为什么不能得到 60？因为引号将数字转换成了字符串，所以结果是连接两个字符串而不是把两个数字相加。输入 35 + 25 才能得到正确结果。条件语句
条件语句是一种代码结构，用来测试表达式的真假，并根据测试结果运行不同的代码。一个常用的条件语句是
if ... else。下面是一个示例：let iceCream = 'chocolate'; if (iceCream === 'chocolate') { alert('我最喜欢巧克力冰激淋了。'); } else { alert('但是巧克力才是我的最爱呀……'); }if ( ... )中的表达式进行测试，用（上文所提到的）等于运算符来比较变量iceCream与字符串'chocolate'是否相等。如果返回true，则运行第一个代码块；如果返回false，则跳过第一块直接运行else之后的第二个代码块。函数（Function）
函数用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。之前已经涉及过一些函数，比如：
let myVariable = document.querySelector('h1');alert('hello!');document.querySelector和alert是浏览器内置的函数，随时可用。如果代码中有一个类似变量名后加小括号
()的东西，很可能就是一个函数。函数通常包括参数，参数中保存着一些必要的数据。它们位于括号内部，多个参数之间用逗号分开。比如，
alert()函数在浏览器窗口内弹出一个警告框，还应为其提供一个字符串参数，以告诉它警告框里要显示的内容。好消息是：人人都能定义自己的函数。下面的示例是为两个参数进行乘法运算的函数：
function multiply(num1, num2) { let result = num1 * num2; return result; }尝试在控制台运行这个函数，不妨多试几组参数，比如：
multiply(4, 7); multiply(20, 20); multiply(0.5, 3);注：return 语句告诉浏览器当前函数返回 result 变量。这是一点很有必要，因为函数内定义的变量只能在函数内使用。这叫做变量的 作用域。（详见 变量作用域。）事件
事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。最简单的事件是 点击事件，鼠标的点击操作会触发该事件。可尝试将下面的代码输入到控制台，然后点击页面的任意位置：
document.querySelector('html').onclick = function() { alert('别戳我，我怕疼。'); }将事件与元素绑定有许多方法。在这里选用了 `` 元素，把一个匿名函数（就是没有命名的函数，这里的匿名函数包含单击鼠标时要运行的代码）赋值给了
html的onclick (en-US)属性。请注意：
document.querySelector('html').onclick = function() {};等价于
let myHTML = document.querySelector('html'); myHTML.onclick = function() {};只是前者更简洁。
刚刚我们传递给
onclick的函数被称为匿名函数，因为它没有名字。匿名函数还有另一种我们称之为箭头函数的写法，箭头函数使用() =>代替function ()：document.querySelector('html').addEventListener('click', () => { alert('别戳我，我怕疼。'); });完善示例网页
现在你已经具备了一些 JavaScript 基础，下面来为示例网页添加一些更酷的特性。
这里将用新的 DOM API 为网页添加另一张图片，并用 JavaScript 使图片在点击时进行切换。
-
首先，找到另一张你想要在你的页面上展示的图片，且尺寸与第一张图片尽可能相同。
-
将这张图片储存在你的
images目录下。 -
将图片重命名为’firefox2.png’（去掉引号）。
-
打开
main.js文件，输入下面的 JavaScript 代码 ( 请删除刚才的 “hello world” 脚本)：let myImage = document.querySelector('img'); myImage.onclick = function() { let mySrc = myImage.getAttribute('src'); if(mySrc === 'images/firefox-icon.png') { myImage.setAttribute('src', 'images/firefox2.png'); } else { myImage.setAttribute('src', 'images/firefox-icon.png'); } } -
保存所有文件并用浏览器打开
index.html。点击图片可以发现它能够切换了！
这里首先把 `` 元素的引用存放在
myImage变量里。然后将这个变量的onclick事件与一个匿名函数绑定。每次点击图片时：- 获取这张图片的
src属性值。 - 用一个条件句来判断src的值是否等于原始图像的路径：
- 如果是，则将
src的值改为第二张图片的路径，并在 `` 内加载该图片。 - 如果不是（意味着它已经修改过）, 则把
src的值重新设置为原始图片的路径，即原始状态。
- 如果是，则将
添加个性化欢迎信息
下面来添加另一段代码，在用户初次进入站点时将网页的标题改成一段个性化欢迎信息（即在标题中添加用户的名字）。名字信息会由 Web Storage API 保存下来，即使用户关闭页面之后再重新打开，仍可得到之前的信息。还会添加一个选项，可以根据需要改变用户名字以更新欢迎信息。
打开
index.html，在script标签前添加以下代码，将在页面底部显示一个“切换用户”字样的按钮：<button> 切换用户 </button>将以下 JavaScript 代码原封不动添加到
main.js文件底部，将获取新按钮和标题的引用，并保存至变量中：let myButton = document.querySelector('button'); let myHeading = document.querySelector('h1');然后添加以下函数来设置个性化欢迎信息。（函数需要在调用后生效，下文中提供了两种对该函数的调用方式）
function setUserName() { let myName = prompt('请输入你的名字。'); localStorage.setItem('name', myName); myHeading.textContent = 'Mozilla 酷毙了，' + myName; }该函数首先调用了
prompt()函数，与alert()类似会弹出一个对话框。但是这里需要用户输入数据，并在确定后将数据存储在myName变量里。接下来将调用localStorageAPI，它可以将数据存储在浏览器中供后续获取。这里用localStorage的setItem()函数来创建一个'name'数据项，并把myName变量复制给它。最后将textContent属性设置为一个欢迎字符串加上这个新设置的名字。接下来，添加以下的
if ... else块。我们可以称之为初始化代码，因为它在页面初次读取时进行构造工作：if(!localStorage.getItem('name')) { setUserName(); } else { let storedName = localStorage.getItem('name'); myHeading.textContent = 'Mozilla 酷毙了，' + storedName; }这里首次使用了取非运算符（逻辑非，用
!表示）来检测'name'数据是否存在。若不存在，调用setUserName()创建。若存在（即用户上次访问时设置过），调用getItem()获取保存的名字，像上文的setUserName()那样设置textContent。最后，为按钮设置 onclick 事件处理器。按钮按下时运行 setUserName() 函数。这样用户就可以通过按这个按钮来自由设置新名字了：
myButton.onclick = function() { setUserName(); }第一次访问网页时，页面将询问用户名并发出一段个性化的信息。可随时点击按钮来改变用户名。告诉你一个额外的福利，因为用户名是保存在
localStorage里的，网页关闭后也不会丢失，所以重新打开浏览器时所设置的名字信息将依然存在:)用户名为 null?
运行示例代码，弹出输入用户名的对话框，试着按下 取消 按钮。此时标题会显示为“Mozilla 酷毙了，null”。这是因为取消提示对话框后值将设置为
null，这是 JavaScript 中的一个特殊值，表示引用不存在。也可以不输入任何名字直接按 确认，你的标题会显示为“Mozilla 酷毙了，”，原因么显而易见。
要避免这些问题，应该更新
setUserName()来检查用户是否输入了null或者空名字：function setUserName() { let myName = prompt('请输入你的名字。'); if(!myName) { setUserName(); } else { localStorage.setItem('name', myName); myHeading.textContent = 'Mozilla 酷毙了，' + myName; } }用人话说就是：如果
myName没有值或值为null，就再次从头运行setUserName()。如果有值（上面的表达式结果不为真），就把值存储到localStorage并且设置标题。 -
1991
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
