问题记录
- 微信小程序的开发语言：
wxml、wsxx、Javascript
- HTML常用标签汇总
w3school网站www.w3schoolcom.cn
-
前端服务器（Nginx？）、前端程序具体是个什么东西？前端代码是否就是HTML+CSS+JS？具体包含了哪些东西？
-
浏览器解析的工作流程与底层原理？渲染引擎，HTML解析，Dom树，不同浏览器的解析原理是否一样？
-
前端项目开发时的文件结构，比如图片，视频，CSS文件,配置文件，JS脚本、配置文件都应该放在文件中哪些位置，哪些目录下？
-
引用资源采用什么路径方式？
使用相对路径是个好习惯，使用了相对路径，网页就不会和当前的基准URL绑定，所有链接在本机（localhost）或者未来的公共域中均可以正常工作。
- 推荐书：offer来了2，写给JAVA工程师的干货笔记，java编程的逻辑
1.Web开发介绍
1.1什么是Web开发
- Web：全球广域网，也成为万维网（www:World Wide Web），能够通过浏览器访问的网站。
- Web开发就是开发网站的，如京东淘宝等等。
- 那么我们要学习哪些知识呢？这些知识在整个网站开发过程中占据什么位置？对于这些疑问，必须学习网站的整体的工作流程。
1.2网站的工作流程
依据网站的工作流程，构建知识架构体系
1.首先通过**浏览器**访问发布到**前端服务器**中的**前端程序**，这时候**前端程序**会将**前端代码**返回给浏览器。如下图所示
2.浏览器得到前端代码，此时浏览器会对前端代码解析，然后展示在浏览器的窗口中，这就是我们看到的**网站**的**页面**，如下图所示：
3.此时页面没有具体的数据，数据存放在数据库中，浏览器根据**前端代码中指定的后台服务器的地址**向**后台服务器**（java程序）发起**请求**，后台服务器再去**数据库**（or数据库服务器？）中获取数据，然后返回给浏览器。工作流程如下图所示：
4.浏览器拿到后台返回的数据后，然后将数据展示在前端资源也就是网页上，然后我们就能看到如下图所示的完整内容了。
整体流程梳理：
1.浏览器先向前端服务器请求前端资源（前端代码）。
2.浏览器解析前端代码，呈现网页。
3.根据前端代码中的网址向后端服务器发起请求，获取数据。
4.浏览器将后端的数据展示到网页上。形成完整的网页。
1.3网站的开发模式
网站的开发模式主要分为两种：前后端分离和混合开发
前后端分离：（目前的主流技术）特点如下：
- 前端人员开发前端程序，前端程序单独部署在前端服务器上；
- 后端人员开发后端程序，后端程序单独部署在后端服务器上。
大型网站的服务器架构设计，分为多少层，比如CDN-前端服务器-后端服务器-数据库服务器。成熟的架构设计模式有哪些？
混合开发（早期技术）特点是前端人员开发的代码和后端人员开发的代码在同一个项目中，一起打包发布。
小型网站通过前后端端口号不一致前后端服务器分别部署，是否也算是实现了前后端分离技术
1.4网站的开发技术
学习目标：让页面看起来像个页面
前端web开发：
| 技术 |
描述 |
| HTML |
用于构建网站的基础结构（重点一点） |
| CSS |
用于美化页面的，和化妆作用类似（知道干什么的就行） |
| JavaScript |
用于实现网页和用户的交互（重点一点） |
| Vue |
主要用于将数据填充到Html页面上的（国人 |
| Element |
主要提供通了非常美观的插件（饿了么公司出的组件库） |
| Nginx |
一款Web服务器软件，可以用于部署前端工程，静态Web服务器 |
| Axios |
发送库？ |
| Ajax |
？ |
| Yapi |
？ |
后端Web开发
| 技术 |
描述 |
| Maven |
一款java中用于管理项目的软件 |
| Mysql |
常用的数据库软件之一 |
| SpringBoot |
Spring家族的产品，目前主流的项目开发技术 |
| Mybatis |
用于操作数据库的框架 |
1.5前端的开发介绍
前端开发，主要开发的是网页，需要使用的技术
万维网联盟（World Wide Web Consortium），创建于1994年10月，主要是对Web进行标准化。
该组织定义了网页开发需要如下3门技术：
- HTML：定义网页的结构
- CSS：定义网页的表现，样式
- JavaScript：网页的交互，定义网页的行为
随着技术的发展，为了更快速的开发，对前端做了封装，衍生了很多前端框架。如：Vue，ElementUI等等。
课程安排如图所示：
1.6浏览器F12视图的使用方法
2.HTML
2.1HTML介绍快速入门
2.1.1HTML介绍
HTML（HyperText Markup Language）:超文本**标记语言**，比普通文本功能更强大，除了文字信息，还可以定义图片、音频、视频等内容。
标记语言：由标签构成的语言，HTML中的标签都是预先定好的。之前学习的XML也是标记语言，由一个个标签构成，HTML代码直接在浏览器中运行，HTML标签由浏览器解析。
标签类型
\\主动闭合标签
\自闭合标签
2.1.2快速入门
\是根标签，\
和\是子标签，\中的子标签\是用来定义网页的标题的，里面定义的内容会显示在浏览器网页标题位置，\<body>中定义的内容会呈现在浏览器的内容区域</p>
<h4 id="213html">2.1.3HTML开发工具<a class="headerlink" href="#213html" title="Permanent link">¶</a></h4>
<p>VS Code：前端开发工具，占有率30%，WebStrom占有率更高，JetBrains旗下工具。</p>
<h3 id="22">2.2基础标签<a class="headerlink" href="#22" title="Permanent link">¶</a></h3>
<p>HTML的预定义标签很多，学习基本的常见的HTML标签</p>
<p>标签就是\<>以及标签名组成的，标签中可以编写内容，嵌套其他的标签，也可以声明属性，</p>
<p>功能分类</p>
<ul>
<li>文本标签</li>
<li>★图片/音频/视频标签</li>
<li>★超链接标签</li>
<li>★表格标签</li>
<li>定位标签（布局标签）</li>
<li>★表单标签</li>
<li>★表单项标签</li>
</ul>
<p>块级标签</p>
<ol>
<li>总是在新行上开始，占据一整行（标签独占一整行）</li>
<li>高度、行高、外边距、内边距都可控制</li>
<li>宽度始终与浏览器的宽度一样，与内容无关</li>
<li>可以容纳内联元素和其他块元素</li>
</ol>
<p>行级标签</p>
<ol>
<li>和其他元素都在同一行上（一行可以有多个标签）</li>
<li>行高、外边距、内边距部分可以改变</li>
<li>宽度和高度只与内容有关</li>
<li>行内元素只能容纳问题或者其他行内元素</li>
</ol>
<h4 id="221">2.2.1文本标签<a class="headerlink" href="#221" title="Permanent link">¶</a></h4>
<p>文本标签：顾名思义都是用来修饰文本的，包括标题、段落、加粗等等，标签学习以及代表含义如下</p>
<table>
<thead>
<tr>
<th>标签</th>
<th>全称</th>
<th>块/行</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>\<h1>~\<h6></td>
<td>headline</td>
<td>块级</td>
<td>定义标题，h1最大，h6最小</td>
</tr>
<tr>
<td>\<font></td>
<td></td>
<td>行内</td>
<td>定义文本的字体、字体大小、字体颜色</td>
</tr>
<tr>
<td>\<b></td>
<td>blod</td>
<td>行内</td>
<td>定义粗体文本</td>
</tr>
<tr>
<td>\<i></td>
<td>italic</td>
<td>行内</td>
<td>定义斜体问题</td>
</tr>
<tr>
<td>\<u></td>
<td>underline</td>
<td>行内</td>
<td>定义文本下划线</td>
</tr>
<tr>
<td>\<center></td>
<td></td>
<td>行内</td>
<td>定义文本居中</td>
</tr>
<tr>
<td>\<p></td>
<td>paragraph</td>
<td>块级</td>
<td>定义段落</td>
</tr>
<tr>
<td>\<br></td>
<td>break</td>
<td></td>
<td>定义换行</td>
</tr>
<tr>
<td>\<hr></td>
<td>horizontal break line</td>
<td>块级</td>
<td>定义水平线</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>标签</th>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>\<font></td>
<td></td>
<td>字体标签，修饰文本的颜色、大小、样式</td>
</tr>
<tr>
<td></td>
<td>color</td>
<td>设置文本的颜色</td>
</tr>
<tr>
<td></td>
<td>size</td>
<td>设置文本的大小，取值1-7，其中1最小，7最大</td>
</tr>
<tr>
<td></td>
<td>face</td>
<td>用来设置字体，如”楷体“、”宋体“等</td>
</tr>
</tbody>
</table>
<p>color属性的三种赋值方法</p>
<p>英文单词：red、green、blue</p>
<p>RGB值（值1，值2，值3）:对应红色绿色蓝色----0-255（不推荐）</p>
<h2 id="123-00-ffcolor00ff00-">值1值2值3：红色绿色蓝色----（00-FF）如color="#00FF00"----绿色<a class="headerlink" href="#123-00-ffcolor00ff00-" title="Permanent link">¶</a></h2>
<p><strong>注意事项：</strong></p>
<p>示例：</p>
<div class="highlight"><pre><span></span><code><span id="__span-0-1"><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span><span id="__span-0-2"><a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a> <span class="p"><</span><span class="nt">h1</span><span class="p">></span>一级标题<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span><span id="__span-0-3"><a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a> <span class="p"><</span><span class="nt">h2</span><span class="p">></span>二级标题<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
</span><span id="__span-0-4"><a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a> <span class="p"><</span><span class="nt">h3</span><span class="p">></span>三级标题<span class="p"></</span><span class="nt">h3</span><span class="p">></span>
</span><span id="__span-0-5"><a id="__codelineno-0-5" name="__codelineno-0-5" href="#__codelineno-0-5"></a> <span class="p"><</span><span class="nt">h4</span><span class="p">></span>四级标题<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
</span><span id="__span-0-6"><a id="__codelineno-0-6" name="__codelineno-0-6" href="#__codelineno-0-6"></a> <span class="p"><</span><span class="nt">h5</span><span class="p">></span>五级标题<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
</span><span id="__span-0-7"><a id="__codelineno-0-7" name="__codelineno-0-7" href="#__codelineno-0-7"></a> <span class="p"><</span><span class="nt">h6</span><span class="p">></span>六级标题<span class="p"></</span><span class="nt">h6</span><span class="p">></span>
</span><span id="__span-0-8"><a id="__codelineno-0-8" name="__codelineno-0-8" href="#__codelineno-0-8"></a> <span class="p"><</span><span class="nt">font</span> <span class="na">size</span><span class="o">=</span><span class="s">"3"</span> <span class="na">face</span><span class="o">=</span><span class="s">"黑体"</span><span class="p">></span>这是一个黑体字<span class="p"></</span><span class="nt">font</span><span class="p">><</span><span class="nt">br</span><span class="p">/></span>
</span><span id="__span-0-9"><a id="__codelineno-0-9" name="__codelineno-0-9" href="#__codelineno-0-9"></a> <span class="p"><</span><span class="nt">font</span> <span class="na">size</span><span class="o">=</span><span class="s">"3"</span> <span class="na">color </span><span class="o">=</span><span class="s">"red"</span><span class="p">></span>这是一个红色字<span class="p"></</span><span class="nt">font</span><span class="p">><</span><span class="nt">br</span><span class="p">/></span>
</span><span id="__span-0-10"><a id="__codelineno-0-10" name="__codelineno-0-10" href="#__codelineno-0-10"></a> <span class="p"><</span><span class="nt">font</span> <span class="na">size</span><span class="o">=</span><span class="s">"7"</span> <span class="p">></span>这是一个7号字<span class="p"></</span><span class="nt">font</span><span class="p">><</span><span class="nt">br</span><span class="p">/></span>
</span><span id="__span-0-11"><a id="__codelineno-0-11" name="__codelineno-0-11" href="#__codelineno-0-11"></a> <span class="p"><</span><span class="nt">b</span><span class="p">></span>这是一个加粗字<span class="p"></</span><span class="nt">b</span><span class="p">><</span><span class="nt">br</span><span class="p">/></span>
</span><span id="__span-0-12"><a id="__codelineno-0-12" name="__codelineno-0-12" href="#__codelineno-0-12"></a> <span class="p"><</span><span class="nt">i</span><span class="p">></span>这是一个斜体字<span class="p"></</span><span class="nt">i</span><span class="p">><</span><span class="nt">br</span><span class="p">/></span>
</span><span id="__span-0-13"><a id="__codelineno-0-13" name="__codelineno-0-13" href="#__codelineno-0-13"></a> <span class="p"><</span><span class="nt">u</span><span class="p">></span>这是一个下划线字<span class="p"></</span><span class="nt">u</span><span class="p">><</span><span class="nt">br</span><span class="p">/></span>
</span><span id="__span-0-14"><a id="__codelineno-0-14" name="__codelineno-0-14" href="#__codelineno-0-14"></a> <span class="p"><</span><span class="nt">center</span><span class="p">></span>这是一个居中字下边是水平线<span class="p"></</span><span class="nt">center</span><span class="p">><</span><span class="nt">br</span><span class="p">/></span>
</span><span id="__span-0-15"><a id="__codelineno-0-15" name="__codelineno-0-15" href="#__codelineno-0-15"></a> <span class="p"><</span><span class="nt">hr</span><span class="p">/></span>
</span><span id="__span-0-16"><a id="__codelineno-0-16" name="__codelineno-0-16" href="#__codelineno-0-16"></a> <span class="p"><</span><span class="nt">p</span><span class="p">></span>
</span><span id="__span-0-17"><a id="__codelineno-0-17" name="__codelineno-0-17" href="#__codelineno-0-17"></a> 地球物理学家将大气空间（或称为空气空间）分为5层。对流层，海平面至10千米。对流层有浓密的空气，称为浓密大气层。浓密大气层随高度增加，空气越来越稀薄。平流层，10-40千米之间。中间层，40~80千米。80-370千米为热层，属于电离层的下部。外大气层，370千米以上的空间，属于电离层的上部。
</span><span id="__span-0-18"><a id="__codelineno-0-18" name="__codelineno-0-18" href="#__codelineno-0-18"></a> <span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span><span id="__span-0-19"><a id="__codelineno-0-19" name="__codelineno-0-19" href="#__codelineno-0-19"></a><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></code></pre></div>
<p>效果：</p>
<p><img alt="文本标签效果" src="../assets/SD-5-FrontEnd.assets/%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE%E6%95%88%E6%9E%9C.png" /></p>
<h4 id="222">2.2.2图片/音频/视频标签<a class="headerlink" href="#222" title="Permanent link">¶</a></h4>
<p>功能：在网页上嵌入图片等元素</p>
<p>图片资源/音频资源/视频资源（统称为资源文件）可以放在本地，也可以放在网络上</p>
<p>元素标签概述</p>
<table>
<thead>
<tr>
<th style="text-align: left;">标签</th>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">\<img></td>
<td></td>
<td>在页面上引入图片的</td>
</tr>
<tr>
<td style="text-align: left;">（自闭）</td>
<td>height</td>
<td>用来定义图片的高度<font color='blue'>为什么只需指定高度</font></td>
</tr>
<tr>
<td style="text-align: left;"></td>
<td>width</td>
<td>用来定义图片的宽度</td>
</tr>
<tr>
<td style="text-align: left;"></td>
<td>src</td>
<td>规定显示图片的url（统一资源定位符）</td>
</tr>
<tr>
<td style="text-align: left;">\<audio></td>
<td></td>
<td>定义音频（支持mp3、<font color='blue'>mav、ogg</font>）</td>
</tr>
<tr>
<td style="text-align: left;">（主动闭合）</td>
<td>src</td>
<td>规定音频文件的url</td>
</tr>
<tr>
<td style="text-align: left;"></td>
<td>controls</td>
<td>显示播放控件</td>
</tr>
<tr>
<td style="text-align: left;">\<video></td>
<td></td>
<td>定义视频（支持mp4、<font color='blue'>webM、ogg</font>）</td>
</tr>
<tr>
<td style="text-align: left;">（主动闭合）</td>
<td>src</td>
<td>规定视频文件的url</td>
</tr>
<tr>
<td style="text-align: left;"></td>
<td>controls</td>
<td>显示播放控件</td>
</tr>
<tr>
<td style="text-align: left;"></td>
<td>heitght</td>
<td>定义视频播放器的高度</td>
</tr>
<tr>
<td style="text-align: left;"></td>
<td>width</td>
<td>定义播放器的宽度</td>
</tr>
<tr>
<td style="text-align: left;"></td>
<td>muted</td>
<td>规定视频输出应该静音</td>
</tr>
<tr>
<td style="text-align: left;"></td>
<td>loop</td>
<td>循环播放</td>
</tr>
<tr>
<td style="text-align: left;"></td>
<td>autoplay</td>
<td>如果出现该属性，则视频在就绪后马上播放</td>
</tr>
</tbody>
</table>
<p><font color='blue'>url详解</font></p>
<p><strong>注意事项：</strong></p>
<ul>
<li>需要填写图片音频视频等资源的路径，建议采用相对路径，一旦路径写错，浏览器上将不会展示相应资源。</li>
<li>音频视频资源必须加上controls才可以显示播放组件；</li>
<li>浏览器规定想要播放声音，用户必须先和页面发生交互。<font color='blue'>B站怎么解决的？重新定义了播放控件？？</font></li>
<li>src指向要展示的图片（本地路径/网络路径）</li>
<li> 本地路径分为本地绝对路径/相对路径</li>
<li> 本地路径的写法（./）-(当前文件所在的文件夹下)（../）-（当前文件所在的上一级文件夹下）</li>
</ul>
<p>示例：</p>
<div class="highlight"><pre><span></span><code><span id="__span-1-1"><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span><span id="__span-1-2"><a id="__codelineno-1-2" name="__codelineno-1-2" href="#__codelineno-1-2"></a> <span class="p"><</span><span class="nt">img</span> <span class="na">src </span><span class="o">=</span><span class="s">"./img/01.jpg"</span> <span class="na">height</span><span class="o">=</span><span class="s">"200px"</span><span class="p">></</span><span class="nt">body</span><span class="p">></span>
</span><span id="__span-1-3"><a id="__codelineno-1-3" name="__codelineno-1-3" href="#__codelineno-1-3"></a> <span class="p"><</span><span class="nt">audio</span> <span class="na">src</span><span class="o">=</span><span class="s">"./audio/01.mp3"</span> <span class="na">controls</span> <span class="na">muted</span> <span class="na">autoplay</span> <span class="na">loop</span><span class="p">></</span><span class="nt">audio</span><span class="p">></span>
</span><span id="__span-1-4"><a id="__codelineno-1-4" name="__codelineno-1-4" href="#__codelineno-1-4"></a> <span class="p"><</span><span class="nt">video</span> <span class="na">src</span><span class="o">=</span><span class="s">"./video/01.mp4"</span> <span class="na">controls</span> <span class="na">muted</span> <span class="na">autoplay</span> <span class="na">loop</span><span class="p">></</span><span class="nt">video</span><span class="p">></span>
</span><span id="__span-1-5"><a id="__codelineno-1-5" name="__codelineno-1-5" href="#__codelineno-1-5"></a><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></code></pre></div>
<p>效果：</p>
<p><img alt="图片音频视频标签效果" src="../assets/SD-5-FrontEnd.assets/%E5%9B%BE%E7%89%87%E9%9F%B3%E9%A2%91%E8%A7%86%E9%A2%91%E6%A0%87%E7%AD%BE%E6%95%88%E6%9E%9C.png" /></p>
<h4 id="223">2.2.3超链接标签<a class="headerlink" href="#223" title="Permanent link">¶</a></h4>
<p>鼠标点击就跳转，就是超链接的效果</p>
<p>可以实现点击图片跳转的效果，行内元素</p>
<p>超链接标签如下</p>
<table>
<thead>
<tr>
<th>标签</th>
<th>属性</th>
<th>全称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>\<a></td>
<td></td>
<td>anchor 锚点或链接</td>
<td>定义超链接，用于链接到另一个资源</td>
</tr>
<tr>
<td></td>
<td>href</td>
<td>Hypertext Reference</td>
<td>指定需要访问的资源的url</td>
</tr>
<tr>
<td></td>
<td>target</td>
<td></td>
<td>_self：默认值，在当前页面打开<br>_blank：在空白页面打开</td>
</tr>
</tbody>
</table>
<p><strong>注意事项：</strong></p>
<p><strong>示例：</strong></p>
<div class="highlight"><pre><span></span><code><span id="__span-2-1"><a id="__codelineno-2-1" name="__codelineno-2-1" href="#__codelineno-2-1"></a><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span><span id="__span-2-2"><a id="__codelineno-2-2" name="__codelineno-2-2" href="#__codelineno-2-2"></a> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://baike.baidu.com/item/"</span> <span class="na">target</span><span class="o">=</span><span class="s">"_self"</span><span class="p">></span>
</span><span id="__span-2-3"><a id="__codelineno-2-3" name="__codelineno-2-3" href="#__codelineno-2-3"></a> <span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"./img/邓肯.jpg"</span><span class="err">,</span><span class="na">width</span><span class="o">=</span><span class="s">"200px"</span><span class="p">></span>
</span><span id="__span-2-4"><a id="__codelineno-2-4" name="__codelineno-2-4" href="#__codelineno-2-4"></a> <span class="p"></</span><span class="nt">img</span><span class="p">></span>
</span><span id="__span-2-5"><a id="__codelineno-2-5" name="__codelineno-2-5" href="#__codelineno-2-5"></a> <span class="p"></</span><span class="nt">a</span><span class="p">></span>
</span><span id="__span-2-6"><a id="__codelineno-2-6" name="__codelineno-2-6" href="#__codelineno-2-6"></a> <span class="p"><</span><span class="nt">br</span><span class="p">/></span>
</span><span id="__span-2-7"><a id="__codelineno-2-7" name="__codelineno-2-7" href="#__codelineno-2-7"></a> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://baike.baidu.com/item/"</span> <span class="na">target</span><span class="o">=</span><span class="s">"_blank"</span><span class="p">></span>
</span><span id="__span-2-8"><a id="__codelineno-2-8" name="__codelineno-2-8" href="#__codelineno-2-8"></a> 邓肯
</span><span id="__span-2-9"><a id="__codelineno-2-9" name="__codelineno-2-9" href="#__codelineno-2-9"></a> <span class="p"></</span><span class="nt">a</span><span class="p">></span>
</span><span id="__span-2-10"><a id="__codelineno-2-10" name="__codelineno-2-10" href="#__codelineno-2-10"></a><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></code></pre></div>
<p><strong>效果</strong></p>
<p><img alt="超链接标签效果" src="../assets/SD-5-FrontEnd.assets/%E8%B6%85%E9%93%BE%E6%8E%A5%E6%A0%87%E7%AD%BE%E6%95%88%E6%9E%9C.png" /></p>
<h4 id="224">2.2.4表格标签<a class="headerlink" href="#224" title="Permanent link">¶</a></h4>
<table>
<thead>
<tr>
<th>标签</th>
<th>属性</th>
<th>全称</th>
<th>功能</th>
</tr>
</thead>
<tbody>
<tr>
<td>\<table></td>
<td></td>
<td></td>
<td>定义表格</td>
</tr>
<tr>
<td></td>
<td>broder</td>
<td></td>
<td>规定表格边框的粗细</td>
</tr>
<tr>
<td></td>
<td>width</td>
<td></td>
<td>规定表格的宽度</td>
</tr>
<tr>
<td></td>
<td>cellspacing</td>
<td></td>
<td>规定单元格之间的空白</td>
</tr>
<tr>
<td></td>
<td>cellpading</td>
<td></td>
<td></td>
</tr>
<tr>
<td>\<tr></td>
<td></td>
<td>tablerow</td>
<td>定义表格的行，可以包裹多个\<th>，\<td></td>
</tr>
<tr>
<td></td>
<td>align</td>
<td></td>
<td>定义表格行的内容定义方式<font color='blue'>（全称，默认值呢？）</font></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>\<th></td>
<td></td>
<td>tableheader</td>
<td>定义表头单元格，默认加粗居中</td>
</tr>
<tr>
<td>\<td></td>
<td></td>
<td>tabledata</td>
<td>定义普通单元格，默认左对齐，不加粗</td>
</tr>
</tbody>
</table>
<p><strong>注意事项：</strong></p>
<p>在table中的数据没有列的概念，只有行的概念，一行数据使用tr标签来声明</p>
<p><strong>示例：</strong></p>
<div class="highlight"><pre><span></span><code><span id="__span-3-1"><a id="__codelineno-3-1" name="__codelineno-3-1" href="#__codelineno-3-1"></a><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span><span id="__span-3-2"><a id="__codelineno-3-2" name="__codelineno-3-2" href="#__codelineno-3-2"></a> <span class="p"><</span><span class="nt">table</span> <span class="na">border</span><span class="o">=</span><span class="s">"1px"</span> <span class="na">width</span><span class="o">=</span><span class="s">"90%"</span> <span class="na">cellspacing </span><span class="o">=</span><span class="s">"0px"</span> <span class="p">></span>
</span><span id="__span-3-3"><a id="__codelineno-3-3" name="__codelineno-3-3" href="#__codelineno-3-3"></a> <span class="p"><</span><span class="nt">tr</span><span class="p">></span>
</span><span id="__span-3-4"><a id="__codelineno-3-4" name="__codelineno-3-4" href="#__codelineno-3-4"></a> <span class="p"><</span><span class="nt">th</span><span class="p">></span>序号<span class="p"></</span><span class="nt">th</span><span class="p">></span>
</span><span id="__span-3-5"><a id="__codelineno-3-5" name="__codelineno-3-5" href="#__codelineno-3-5"></a> <span class="p"><</span><span class="nt">th</span><span class="p">></span>品牌LOGO<span class="p"></</span><span class="nt">th</span><span class="p">></span>
</span><span id="__span-3-6"><a id="__codelineno-3-6" name="__codelineno-3-6" href="#__codelineno-3-6"></a> <span class="p"><</span><span class="nt">th</span><span class="p">></span>品牌名称<span class="p"></</span><span class="nt">th</span><span class="p">></span>
</span><span id="__span-3-7"><a id="__codelineno-3-7" name="__codelineno-3-7" href="#__codelineno-3-7"></a> <span class="p"><</span><span class="nt">th</span><span class="p">></span>企业名称<span class="p"></</span><span class="nt">th</span><span class="p">></span>
</span><span id="__span-3-8"><a id="__codelineno-3-8" name="__codelineno-3-8" href="#__codelineno-3-8"></a> <span class="p"></</span><span class="nt">tr</span><span class="p">></span>
</span><span id="__span-3-9"><a id="__codelineno-3-9" name="__codelineno-3-9" href="#__codelineno-3-9"></a> <span class="p"><</span><span class="nt">tr</span><span class="p">></span>
</span><span id="__span-3-10"><a id="__codelineno-3-10" name="__codelineno-3-10" href="#__codelineno-3-10"></a> <span class="p"><</span><span class="nt">td</span><span class="p">></span>001<span class="p"></</span><span class="nt">td</span><span class="p">></span>
</span><span id="__span-3-11"><a id="__codelineno-3-11" name="__codelineno-3-11" href="#__codelineno-3-11"></a> <span class="p"><</span><span class="nt">td</span><span class="p">><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"./img/huawei.jpg"</span> <span class="na">width</span><span class="o">=</span><span class="s">"40px"</span><span class="p">></</span><span class="nt">td</span><span class="p">></span>
</span><span id="__span-3-12"><a id="__codelineno-3-12" name="__codelineno-3-12" href="#__codelineno-3-12"></a> <span class="p"><</span><span class="nt">td</span><span class="p">></span>华为<span class="p"></</span><span class="nt">td</span><span class="p">></span>
</span><span id="__span-3-13"><a id="__codelineno-3-13" name="__codelineno-3-13" href="#__codelineno-3-13"></a> <span class="p"><</span><span class="nt">td</span><span class="p">></span>华为技术有限公司<span class="p"></</span><span class="nt">td</span><span class="p">></span>
</span><span id="__span-3-14"><a id="__codelineno-3-14" name="__codelineno-3-14" href="#__codelineno-3-14"></a> <span class="p"></</span><span class="nt">tr</span><span class="p">></span>
</span><span id="__span-3-15"><a id="__codelineno-3-15" name="__codelineno-3-15" href="#__codelineno-3-15"></a> <span class="p"><</span><span class="nt">tr</span><span class="p">></span>
</span><span id="__span-3-16"><a id="__codelineno-3-16" name="__codelineno-3-16" href="#__codelineno-3-16"></a> <span class="p"><</span><span class="nt">td</span><span class="p">></span>002<span class="p"></</span><span class="nt">td</span><span class="p">></span>
</span><span id="__span-3-17"><a id="__codelineno-3-17" name="__codelineno-3-17" href="#__codelineno-3-17"></a> <span class="p"><</span><span class="nt">td</span><span class="p">><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"./img/alibaba.jpg"</span> <span class="na">width</span><span class="o">=</span><span class="s">"40px"</span><span class="p">></</span><span class="nt">td</span><span class="p">></span>
</span><span id="__span-3-18"><a id="__codelineno-3-18" name="__codelineno-3-18" href="#__codelineno-3-18"></a> <span class="p"><</span><span class="nt">td</span><span class="p">></span>阿里<span class="p"></</span><span class="nt">td</span><span class="p">></span>
</span><span id="__span-3-19"><a id="__codelineno-3-19" name="__codelineno-3-19" href="#__codelineno-3-19"></a> <span class="p"><</span><span class="nt">td</span><span class="p">></span>阿里巴巴集团控股有限公司<span class="p"></</span><span class="nt">td</span><span class="p">></span>
</span><span id="__span-3-20"><a id="__codelineno-3-20" name="__codelineno-3-20" href="#__codelineno-3-20"></a> <span class="p"></</span><span class="nt">tr</span><span class="p">></span>
</span><span id="__span-3-21"><a id="__codelineno-3-21" name="__codelineno-3-21" href="#__codelineno-3-21"></a> <span class="p"></</span><span class="nt">table</span><span class="p">></span>
</span><span id="__span-3-22"><a id="__codelineno-3-22" name="__codelineno-3-22" href="#__codelineno-3-22"></a><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></code></pre></div>
<p><strong>效果：</strong></p>
<p><img alt="表格标签效果" src="../assets/SD-5-FrontEnd.assets/%E8%A1%A8%E6%A0%BC%E6%A0%87%E7%AD%BE%E6%95%88%E6%9E%9C.png" /></p>
<h4 id="225">2.2.5表单标签<a class="headerlink" href="#225" title="Permanent link">¶</a></h4>
<p><strong><font color='red'>如图所示，这里需要用户填写数据传输到后台程序，然后后台程序将数据保存到数据库中，这是前端和后端交互的手段，非常重要，必须掌握。</font></strong></p>
<p>在网页中主要负责数据采集功能，如注册、登录等数据采集</p>
<p>表单项标签与表单表单标签是配个工作的，表单项标签必须书写到表单标签\<form>中，\<form>必须指定两个内容才有功能（action和method）</p>
<p>表单标签概述：</p>
<table>
<thead>
<tr>
<th>标签</th>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>\<form></td>
<td></td>
<td>定义表单的</td>
</tr>
<tr>
<td></td>
<td>action</td>
<td>定义表单数据提交的服务器地址（#表示提交至本地）</td>
</tr>
<tr>
<td></td>
<td>method</td>
<td>定义表单数据提交的，一般有get和post这2种<font color='blue'>（有无其他的？）</font></td>
</tr>
</tbody>
</table>
<p>method：规定发送表单数据的方式</p>
<ul>
<li>get：</li>
<li>默认值，如果不设置method属性则默认就是该值</li>
<li>请求参数会拼接在URL后边</li>
<li>URL的长度有限制4KB</li>
<li>post：</li>
<li>浏览器会将数据放到http请求消息题中</li>
<li>请求的参数是无限制的</li>
</ul>
<p>表单项标签概述：</p>
<table>
<thead>
<tr>
<th>标签</th>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>\<input></td>
<td></td>
<td>定义表单项，通过type属性控制输入形式，接受用户的信息</td>
</tr>
<tr>
<td></td>
<td>type</td>
<td>定义表单项的表现形式，如：文本框、密码框等等</td>
</tr>
<tr>
<td>\<select></td>
<td></td>
<td>定义下拉列表框，select用于声明下拉列表的方位，具体的选项value需要通过option子标签定义，必须定义name</td>
</tr>
<tr>
<td>\<textarea></td>
<td></td>
<td>定义文本域</td>
</tr>
</tbody>
</table>
<h4 id="226">2.2.6表单项标签<a class="headerlink" href="#226" title="Permanent link">¶</a></h4>
<p>表单项标签概述：</p>
<table>
<thead>
<tr>
<th>标签</th>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>\<input></td>
<td></td>
<td>定义表单项，通过type属性控制输入形式，接受用户的信息</td>
</tr>
<tr>
<td></td>
<td>type</td>
<td>定义表单项的表现形式，如：文本框、密码框等等</td>
</tr>
<tr>
<td>\<select></td>
<td></td>
<td>定义下拉列表框，其\<option>子标签定义选项</td>
</tr>
<tr>
<td>\<textarea></td>
<td></td>
<td>定义大范围的文本数据收集</td>
</tr>
</tbody>
</table>
<p>type取值及表现形式如下：</p>
<table>
<thead>
<tr>
<th>type取值</th>
<th>描述</th>
<th>形式</th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td>
<td>默认值，定义单行的输入字段</td>
<td></td>
</tr>
<tr>
<td>password</td>
<td>定义密码字段</td>
<td></td>
</tr>
<tr>
<td>radio</td>
<td>定义单选按钮----必须定义name(分组)保证互斥/value(提交的真正值)</td>
<td></td>
</tr>
<tr>
<td>checkbox</td>
<td>定义复选框----必须定义name（分组）/value（提交的真正值）</td>
<td></td>
</tr>
<tr>
<td>color</td>
<td>颜色选择框</td>
<td></td>
</tr>
<tr>
<td>date</td>
<td>日期框</td>
<td></td>
</tr>
<tr>
<td>file</td>
<td>定义文件上传按钮（avator小图片）</td>
<td></td>
</tr>
<tr>
<td>hidden</td>
<td>隐藏域：不会被渲染，但会在表单中真是存在，【保存一些需要被提交但不需要被输入的信息】必须定义name(名称)/value(提交的真正值)</td>
<td></td>
</tr>
<tr>
<td>submit</td>
<td>定义提交按钮，提交按钮会把表单数据发送到服务器端</td>
<td></td>
</tr>
<tr>
<td>reset</td>
<td>定义重置按钮，重置按钮会清楚表单中的所有数据</td>
<td></td>
</tr>
<tr>
<td>button</td>
<td>定义可点击按钮</td>
<td></td>
</tr>
</tbody>
</table>
<p><strong>注意事项</strong>：</p>
<ul>
<li>被动收集的都需要value值</li>
<li>
<p>option可以用标签中的值提交，也可以用value指定。</p>
</li>
<li>
<p> 英文空格&emsp中文空格？？<font color='blue'>不能用？？</font></p>
</li>
</ul>
<p><strong>代码：</strong></p>
<div class="highlight"><pre><span></span><code><span id="__span-4-1"><a id="__codelineno-4-1" name="__codelineno-4-1" href="#__codelineno-4-1"></a><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span><span id="__span-4-2"><a id="__codelineno-4-2" name="__codelineno-4-2" href="#__codelineno-4-2"></a> <span class="cm"><!--form标签是表单标签（用于声明收集数据的一块区域）--></span>
</span><span id="__span-4-3"><a id="__codelineno-4-3" name="__codelineno-4-3" href="#__codelineno-4-3"></a> <span class="p"><</span><span class="nt">form</span> <span class="na">action </span><span class="o">=</span><span class="s">"#"</span> <span class="na">method</span><span class="o">=</span><span class="s">"get"</span><span class="p">></span>
</span><span id="__span-4-4"><a id="__codelineno-4-4" name="__codelineno-4-4" href="#__codelineno-4-4"></a> <span class="cm"><!--收集控件:input，重点：指定不同的type才能不同的收集效果，—--></span>
</span><span id="__span-4-5"><a id="__codelineno-4-5" name="__codelineno-4-5" href="#__codelineno-4-5"></a> <span class="cm"><!--重点2：为了可以让提交的数据明确收集到的数据的名称,必须给<input>一个name属性，name属性会随着数据一并提交--></span>
</span><span id="__span-4-6"><a id="__codelineno-4-6" name="__codelineno-4-6" href="#__codelineno-4-6"></a> <span class="cm"><!--文本输入框，必须定义name--></span>
</span><span id="__span-4-7"><a id="__codelineno-4-7" name="__codelineno-4-7" href="#__codelineno-4-7"></a> 用户名：<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">name </span><span class="o">=</span><span class="s">"username"</span><span class="p">/></span>
</span><span id="__span-4-8"><a id="__codelineno-4-8" name="__codelineno-4-8" href="#__codelineno-4-8"></a> <span class="p"><</span><span class="nt">br</span><span class="p">/><</span><span class="nt">br</span><span class="p">/></span>
</span><span id="__span-4-9"><a id="__codelineno-4-9" name="__codelineno-4-9" href="#__codelineno-4-9"></a> <span class="cm"><!--密码输入框，必须定义name--></span>
</span><span id="__span-4-10"><a id="__codelineno-4-10" name="__codelineno-4-10" href="#__codelineno-4-10"></a> 用户密码<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"password"</span> <span class="na">name </span><span class="o">=</span><span class="s">"password"</span><span class="p">/></span>
</span><span id="__span-4-11"><a id="__codelineno-4-11" name="__codelineno-4-11" href="#__codelineno-4-11"></a> <span class="p"><</span><span class="nt">br</span><span class="p">/><</span><span class="nt">br</span><span class="p">/></span>
</span><span id="__span-4-12"><a id="__codelineno-4-12" name="__codelineno-4-12" href="#__codelineno-4-12"></a> <span class="cm"><!--单选框，必须定义name(分组)保证互斥/value(提交的真正值)--></span>
</span><span id="__span-4-13"><a id="__codelineno-4-13" name="__codelineno-4-13" href="#__codelineno-4-13"></a> 性别：男：<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">name</span><span class="o">=</span><span class="s">"gender"</span> <span class="na">value</span><span class="o">=</span><span class="s">"male"</span><span class="p">/></span>女：<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">name</span><span class="o">=</span><span class="s">"gender"</span> <span class="na">value</span><span class="o">=</span><span class="s">"female"</span><span class="p">/></span>
</span><span id="__span-4-14"><a id="__codelineno-4-14" name="__codelineno-4-14" href="#__codelineno-4-14"></a> <span class="p"><</span><span class="nt">br</span><span class="p">/><</span><span class="nt">br</span><span class="p">/></span>
</span><span id="__span-4-15"><a id="__codelineno-4-15" name="__codelineno-4-15" href="#__codelineno-4-15"></a> <span class="cm"><!--多选框（本体就是可以选择的点击按钮）必须定义name（分组）/value（提交的真正值）--></span>
</span><span id="__span-4-16"><a id="__codelineno-4-16" name="__codelineno-4-16" href="#__codelineno-4-16"></a> 爱好：唱<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">name </span><span class="o">=</span><span class="s">"hobby"</span> <span class="na">value</span><span class="o">=</span><span class="s">"sing"</span><span class="p">/></span>跳<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">name </span><span class="o">=</span><span class="s">"hobby"</span> <span class="na">value</span><span class="o">=</span><span class="s">"dance"</span><span class="p">/></span>
</span><span id="__span-4-17"><a id="__codelineno-4-17" name="__codelineno-4-17" href="#__codelineno-4-17"></a> rap<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">name </span><span class="o">=</span><span class="s">"hobby"</span> <span class="na">value</span><span class="o">=</span><span class="s">"rap"</span><span class="p">/></span>篮球<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">name </span><span class="o">=</span><span class="s">"hobby"</span> <span class="na">value</span><span class="o">=</span><span class="s">"basketball"</span><span class="p">/></span>
</span><span id="__span-4-18"><a id="__codelineno-4-18" name="__codelineno-4-18" href="#__codelineno-4-18"></a> <span class="p"><</span><span class="nt">br</span><span class="p">/><</span><span class="nt">br</span><span class="p">/></span>
</span><span id="__span-4-19"><a id="__codelineno-4-19" name="__codelineno-4-19" href="#__codelineno-4-19"></a> <span class="cm"><!--日期选择框:必须定义name--></span>
</span><span id="__span-4-20"><a id="__codelineno-4-20" name="__codelineno-4-20" href="#__codelineno-4-20"></a> 出生日期：<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"date"</span> <span class="na">name</span><span class="o">=</span><span class="s">"date"</span><span class="p">/></span>
</span><span id="__span-4-21"><a id="__codelineno-4-21" name="__codelineno-4-21" href="#__codelineno-4-21"></a> <span class="p"><</span><span class="nt">br</span><span class="p">/><</span><span class="nt">br</span><span class="p">/></span>
</span><span id="__span-4-22"><a id="__codelineno-4-22" name="__codelineno-4-22" href="#__codelineno-4-22"></a> <span class="cm"><!--隐藏域：（不会被渲染，但真是存在，用于保存一些需要被提交但不需要被输入的信息，如单号）--></span>
</span><span id="__span-4-23"><a id="__codelineno-4-23" name="__codelineno-4-23" href="#__codelineno-4-23"></a> <span class="cm"><!--必须定义name(名称)/value(提交的真正值)--></span>
</span><span id="__span-4-24"><a id="__codelineno-4-24" name="__codelineno-4-24" href="#__codelineno-4-24"></a> <span class="p"><</span><span class="nt">input</span> <span class="na">type </span><span class="o">=</span><span class="s">"hidden"</span> <span class="na">name</span><span class="o">=</span><span class="s">"useid"</span> <span class="na">value</span><span class="o">=</span><span class="s">"iiiii"</span><span class="p">/></span>
</span><span id="__span-4-25"><a id="__codelineno-4-25" name="__codelineno-4-25" href="#__codelineno-4-25"></a> <span class="p"><</span><span class="nt">br</span><span class="p">/><</span><span class="nt">br</span><span class="p">/></span>
</span><span id="__span-4-26"><a id="__codelineno-4-26" name="__codelineno-4-26" href="#__codelineno-4-26"></a> <span class="cm"><!--文件输入框，必须定义name【一般情况下必须搭配JS才有提交效果】--></span>
</span><span id="__span-4-27"><a id="__codelineno-4-27" name="__codelineno-4-27" href="#__codelineno-4-27"></a> 头像：<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"file"</span> <span class="na">name</span><span class="o">=</span><span class="s">"file"</span><span class="p">/></span>
</span><span id="__span-4-28"><a id="__codelineno-4-28" name="__codelineno-4-28" href="#__codelineno-4-28"></a> <span class="p"><</span><span class="nt">br</span><span class="p">/><</span><span class="nt">br</span><span class="p">/></span>
</span><span id="__span-4-29"><a id="__codelineno-4-29" name="__codelineno-4-29" href="#__codelineno-4-29"></a> <span class="cm"><!--select下拉列表，select用于声明下拉列表的方位，具体的选项value需要通过option定义，必须定义name--></span>
</span><span id="__span-4-30"><a id="__codelineno-4-30" name="__codelineno-4-30" href="#__codelineno-4-30"></a> 婚姻状况：
</span><span id="__span-4-31"><a id="__codelineno-4-31" name="__codelineno-4-31" href="#__codelineno-4-31"></a> <span class="p"><</span><span class="nt">select</span> <span class="na">name</span><span class="o">=</span><span class="s">"married"</span><span class="p">></span>
</span><span id="__span-4-32"><a id="__codelineno-4-32" name="__codelineno-4-32" href="#__codelineno-4-32"></a> <span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"1"</span><span class="p">></span>未婚<span class="p"></</span><span class="nt">option</span><span class="p">></span>
</span><span id="__span-4-33"><a id="__codelineno-4-33" name="__codelineno-4-33" href="#__codelineno-4-33"></a> <span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"2"</span><span class="p">></span>已婚<span class="p"></</span><span class="nt">option</span><span class="p">></span>
</span><span id="__span-4-34"><a id="__codelineno-4-34" name="__codelineno-4-34" href="#__codelineno-4-34"></a> <span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"3"</span><span class="p">></span>离异<span class="p"></</span><span class="nt">option</span><span class="p">></span>
</span><span id="__span-4-35"><a id="__codelineno-4-35" name="__codelineno-4-35" href="#__codelineno-4-35"></a> <span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"4"</span><span class="p">></span>丧偶<span class="p"></</span><span class="nt">option</span><span class="p">></span>
</span><span id="__span-4-36"><a id="__codelineno-4-36" name="__codelineno-4-36" href="#__codelineno-4-36"></a> <span class="p"></</span><span class="nt">select</span><span class="p">></span>
</span><span id="__span-4-37"><a id="__codelineno-4-37" name="__codelineno-4-37" href="#__codelineno-4-37"></a> <span class="p"><</span><span class="nt">br</span><span class="p">/><</span><span class="nt">br</span><span class="p">/></span>
</span><span id="__span-4-38"><a id="__codelineno-4-38" name="__codelineno-4-38" href="#__codelineno-4-38"></a> <span class="cm"><!--文本域：用于声明大范围的文本数据收集，必须定义name--></span>
</span><span id="__span-4-39"><a id="__codelineno-4-39" name="__codelineno-4-39" href="#__codelineno-4-39"></a> 个人信息：
</span><span id="__span-4-40"><a id="__codelineno-4-40" name="__codelineno-4-40" href="#__codelineno-4-40"></a> <span class="p"><</span><span class="nt">textarea</span> <span class="na">name </span><span class="o">=</span><span class="s">"info"</span><span class="p">></</span><span class="nt">textarea</span><span class="p">></span>
</span><span id="__span-4-41"><a id="__codelineno-4-41" name="__codelineno-4-41" href="#__codelineno-4-41"></a> <span class="p"><</span><span class="nt">br</span><span class="p">/><</span><span class="nt">br</span><span class="p">/></span>
</span><span id="__span-4-42"><a id="__codelineno-4-42" name="__codelineno-4-42" href="#__codelineno-4-42"></a> <span class="cm"><!--提交与重置按钮必须定义value（按钮中显示的内容）--></span>
</span><span id="__span-4-43"><a id="__codelineno-4-43" name="__codelineno-4-43" href="#__codelineno-4-43"></a> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">name</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">value</span><span class="o">=</span><span class="s">"提交"</span><span class="p">/></span>
</span><span id="__span-4-44"><a id="__codelineno-4-44" name="__codelineno-4-44" href="#__codelineno-4-44"></a> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"reset"</span> <span class="na">name</span><span class="o">=</span><span class="s">"reset"</span> <span class="na">value</span><span class="o">=</span><span class="s">"重置"</span><span class="p">/></span>
</span><span id="__span-4-45"><a id="__codelineno-4-45" name="__codelineno-4-45" href="#__codelineno-4-45"></a> <span class="p"></</span><span class="nt">form</span><span class="p">></span>
</span><span id="__span-4-46"><a id="__codelineno-4-46" name="__codelineno-4-46" href="#__codelineno-4-46"></a><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></code></pre></div>
<p><strong>效果：</strong></p>
<p><img alt="表单标签效果" src="../assets/SD-5-FrontEnd.assets/%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE%E6%95%88%E6%9E%9C.png" /></p>
<h4 id="227">2.2.7布局标签<a class="headerlink" href="#227" title="Permanent link">¶</a></h4>
<p>布局：给页面进行的区域的划分，让每一个区域用于展示对应的内容</p>
<p>瀑布流（适用于主站）</p>
<p>头左主/头左主脚/左主脚：适用于后台。</p>
<p>布局标签概览</p>
<table>
<thead>
<tr>
<th>标签</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><font color='blue'>\<div>全称</font></td>
<td>定义HTML文档中的一个区域部分，经常与CSS一起使用，用来布局页面</td>
</tr>
<tr>
<td><font color='blue'>\<span>全称</font></td>
<td>用来组合行内元素，一般用来展示文本</td>
</tr>
</tbody>
</table>
<p>代码：</p>
<div class="highlight"><pre><span></span><code><span id="__span-5-1"><a id="__codelineno-5-1" name="__codelineno-5-1" href="#__codelineno-5-1"></a><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span><span id="__span-5-2"><a id="__codelineno-5-2" name="__codelineno-5-2" href="#__codelineno-5-2"></a> <span class="cm"><!--span行内布局标签--></span>
</span><span id="__span-5-3"><a id="__codelineno-5-3" name="__codelineno-5-3" href="#__codelineno-5-3"></a> <span class="p"><</span><span class="nt">span</span><span class="p">></span>Hello World<span class="p"></</span><span class="nt">span</span><span class="p">></span>
</span><span id="__span-5-4"><a id="__codelineno-5-4" name="__codelineno-5-4" href="#__codelineno-5-4"></a> <span class="p"><</span><span class="nt">span</span><span class="p">></span>Hello World<span class="p"></</span><span class="nt">span</span><span class="p">></span>
</span><span id="__span-5-5"><a id="__codelineno-5-5" name="__codelineno-5-5" href="#__codelineno-5-5"></a> <span class="cm"><!--div块级布局标签--></span>
</span><span id="__span-5-6"><a id="__codelineno-5-6" name="__codelineno-5-6" href="#__codelineno-5-6"></a> <span class="p"><</span><span class="nt">div</span><span class="p">></span>Hello Java<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span><span id="__span-5-7"><a id="__codelineno-5-7" name="__codelineno-5-7" href="#__codelineno-5-7"></a> <span class="p"><</span><span class="nt">div</span><span class="p">></span>Hello Java<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span><span id="__span-5-8"><a id="__codelineno-5-8" name="__codelineno-5-8" href="#__codelineno-5-8"></a><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></code></pre></div>
<p>效果：</p>
<p><img alt="标签布局-行内块级效果" src="../assets/SD-5-FrontEnd.assets/%E6%A0%87%E7%AD%BE%E5%B8%83%E5%B1%80-%E8%A1%8C%E5%86%85%E5%9D%97%E7%BA%A7%E6%95%88%E6%9E%9C.png" /></p>
<h2 id="3css">3.CSS（仅作了解）<a class="headerlink" href="#3css" title="Permanent link">¶</a></h2>
<h3 id="31css">3.1CSS介绍<a class="headerlink" href="#31css" title="Permanent link">¶</a></h3>
<p>CSS（Cascding Style Sheet）：层叠样式表，美化页面的结构，可以控制页面的样式（表现），而能够每户的内容已经全部定义好了！而具体的值不确定。</p>
<p>Css能够美化的内容：Css属性</p>
<p>CSS的编写的基本格式</p>
<p> Css属性名：属性值</p>
<div class="highlight"><pre><span></span><code><span id="__span-6-1"><a id="__codelineno-6-1" name="__codelineno-6-1" href="#__codelineno-6-1"></a><span class="nt">color</span><span class="p">:</span><span class="nd">red</span>
</span></code></pre></div>
<h3 id="32css">3.2CSS引入方式<a class="headerlink" href="#32css" title="Permanent link">¶</a></h3>
<p>三种引入CSS的方式：</p>
<table>
<thead>
<tr>
<th>名称</th>
<th>语法描述</th>
<th>示例</th>
<th>特点</th>
</tr>
</thead>
<tbody>
<tr>
<td>内联样式（行内样式）</td>
<td>在标签内使用style属性，属性值是css属性值键值对</td>
<td>\<div style="color:red;">文本内容\</div>></td>
<td>内联样式会出现大量的代码冗余，不方便后期维护，不常用</td>
</tr>
<tr>
<td>内部样式</td>
<td>定义\<style标签>，在标签内部定义css样式</td>
<td>\<style><br> div{<br> color:red;<br> font-size:40px<br> }<br>\</style></td>
<td>通过定义css选择器，让样式作用在指定的标签上,在head标签内写着</td>
</tr>
<tr>
<td>外部样式</td>
<td>定义\<link>标签，通过href属性引入外部css</td>
<td>\<link rel="stylesheet" href"css/demo.css"></td>
<td>HTML与CSS实现了完全的分离，企业开发常用方式</td>
</tr>
</tbody>
</table>
<h4 id="321">3.2.1.行内模式<a class="headerlink" href="#321" title="Permanent link">¶</a></h4>
<p>代码：</p>
<div class="highlight"><pre><span></span><code><span id="__span-7-1"><a id="__codelineno-7-1" name="__codelineno-7-1" href="#__codelineno-7-1"></a> <span class="cm"><!--行内样式的美化方式：在要美化的元素的标签中使用style属性，属性值就是"Css属性名：属性值;"--></span>
</span><span id="__span-7-2"><a id="__codelineno-7-2" name="__codelineno-7-2" href="#__codelineno-7-2"></a> <span class="p"><</span><span class="nt">p</span> <span class="na">style</span><span class="o">=</span><span class="s">"color: blue;font-family:宋体;"</span><span class="p">></span>
</span><span id="__span-7-3"><a id="__codelineno-7-3" name="__codelineno-7-3" href="#__codelineno-7-3"></a> Hello World,今天的天气不错！准备出去钓鱼~
</span><span id="__span-7-4"><a id="__codelineno-7-4" name="__codelineno-7-4" href="#__codelineno-7-4"></a> <span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span><span id="__span-7-5"><a id="__codelineno-7-5" name="__codelineno-7-5" href="#__codelineno-7-5"></a> <span class="p"><</span><span class="nt">p</span><span class="p">></span>
</span><span id="__span-7-6"><a id="__codelineno-7-6" name="__codelineno-7-6" href="#__codelineno-7-6"></a> Hello World,今天的天气不错！准备出去钓鱼~
</span><span id="__span-7-7"><a id="__codelineno-7-7" name="__codelineno-7-7" href="#__codelineno-7-7"></a> <span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></code></pre></div>
<p>效果：</p>
<p><img alt="行内样式效果" src="../assets/SD-5-FrontEnd.assets/%E8%A1%8C%E5%86%85%E6%A0%B7%E5%BC%8F%E6%95%88%E6%9E%9C.png" /></p>
<h4 id="322">3.2.2内部样式<a class="headerlink" href="#322" title="Permanent link">¶</a></h4>
<p>代码：</p>
<div class="highlight"><pre><span></span><code><span id="__span-8-1"><a id="__codelineno-8-1" name="__codelineno-8-1" href="#__codelineno-8-1"></a> <span class="cm"><!--在head标签中声明style标签，在style中按照指定的方式编写美化的样式（可以作用于当前页面的元素）--></span>
</span><span id="__span-8-2"><a id="__codelineno-8-2" name="__codelineno-8-2" href="#__codelineno-8-2"></a> <span class="cm"><!--</span>
</span><span id="__span-8-3"><a id="__codelineno-8-3" name="__codelineno-8-3" href="#__codelineno-8-3"></a><span class="cm"> 选择器{</span>
</span><span id="__span-8-4"><a id="__codelineno-8-4" name="__codelineno-8-4" href="#__codelineno-8-4"></a><span class="cm"> Css样式名：样式值；</span>
</span><span id="__span-8-5"><a id="__codelineno-8-5" name="__codelineno-8-5" href="#__codelineno-8-5"></a><span class="cm"> Css样式名：样式值；</span>
</span><span id="__span-8-6"><a id="__codelineno-8-6" name="__codelineno-8-6" href="#__codelineno-8-6"></a><span class="cm"> Css样式名：样式值</span>
</span><span id="__span-8-7"><a id="__codelineno-8-7" name="__codelineno-8-7" href="#__codelineno-8-7"></a><span class="cm"> }</span>
</span><span id="__span-8-8"><a id="__codelineno-8-8" name="__codelineno-8-8" href="#__codelineno-8-8"></a><span class="cm"> --></span>
</span><span id="__span-8-9"><a id="__codelineno-8-9" name="__codelineno-8-9" href="#__codelineno-8-9"></a> <span class="p"><</span><span class="nt">style</span><span class="p">></span>
</span><span id="__span-8-10"><a id="__codelineno-8-10" name="__codelineno-8-10" href="#__codelineno-8-10"></a><span class="w"> </span><span class="nt">p</span><span class="p">{</span>
</span><span id="__span-8-11"><a id="__codelineno-8-11" name="__codelineno-8-11" href="#__codelineno-8-11"></a><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="kc">red</span><span class="p">;</span>
</span><span id="__span-8-12"><a id="__codelineno-8-12" name="__codelineno-8-12" href="#__codelineno-8-12"></a><span class="w"> </span><span class="k">font-family</span><span class="p">:</span><span class="err">楷体</span><span class="p">;</span>
</span><span id="__span-8-13"><a id="__codelineno-8-13" name="__codelineno-8-13" href="#__codelineno-8-13"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-8-14"><a id="__codelineno-8-14" name="__codelineno-8-14" href="#__codelineno-8-14"></a>
</span><span id="__span-8-15"><a id="__codelineno-8-15" name="__codelineno-8-15" href="#__codelineno-8-15"></a><span class="w"> </span><span class="p"></</span><span class="nt">style</span><span class="p">></span>
</span><span id="__span-8-16"><a id="__codelineno-8-16" name="__codelineno-8-16" href="#__codelineno-8-16"></a> <span class="p"><</span><span class="nt">p</span><span class="p">></span>
</span><span id="__span-8-17"><a id="__codelineno-8-17" name="__codelineno-8-17" href="#__codelineno-8-17"></a> Hello world,这是内部样式！
</span><span id="__span-8-18"><a id="__codelineno-8-18" name="__codelineno-8-18" href="#__codelineno-8-18"></a> <span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span><span id="__span-8-19"><a id="__codelineno-8-19" name="__codelineno-8-19" href="#__codelineno-8-19"></a> <span class="p"><</span><span class="nt">p</span><span class="p">></span>
</span><span id="__span-8-20"><a id="__codelineno-8-20" name="__codelineno-8-20" href="#__codelineno-8-20"></a> Hello world,这是内部样式！
</span><span id="__span-8-21"><a id="__codelineno-8-21" name="__codelineno-8-21" href="#__codelineno-8-21"></a> <span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></code></pre></div>
<p>效果：</p>
<p><img alt="内部样式" src="../assets/SD-5-FrontEnd.assets/%E5%86%85%E9%83%A8%E6%A0%B7%E5%BC%8F.png" /></p>
<h4 id="323">3.2.3外部样式<a class="headerlink" href="#323" title="Permanent link">¶</a></h4>
<p>代码</p>
<div class="highlight"><pre><span></span><code><span id="__span-9-1"><a id="__codelineno-9-1" name="__codelineno-9-1" href="#__codelineno-9-1"></a><span class="c">/*css文件预先编写美化的样式*/</span>
</span><span id="__span-9-2"><a id="__codelineno-9-2" name="__codelineno-9-2" href="#__codelineno-9-2"></a><span class="nt">p</span><span class="p">{</span>
</span><span id="__span-9-3"><a id="__codelineno-9-3" name="__codelineno-9-3" href="#__codelineno-9-3"></a><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">red</span><span class="p">;</span>
</span><span id="__span-9-4"><a id="__codelineno-9-4" name="__codelineno-9-4" href="#__codelineno-9-4"></a><span class="w"> </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="err">华文彩云</span><span class="p">;</span>
</span><span id="__span-9-5"><a id="__codelineno-9-5" name="__codelineno-9-5" href="#__codelineno-9-5"></a><span class="p">}</span>
</span></code></pre></div>
<div class="highlight"><pre><span></span><code><span id="__span-10-1"><a id="__codelineno-10-1" name="__codelineno-10-1" href="#__codelineno-10-1"></a><span class="cm"><!--预先声明美化的样式信息（css文件），哪个页面要使用就在哪个页面引入进来--></span>
</span><span id="__span-10-2"><a id="__codelineno-10-2" name="__codelineno-10-2" href="#__codelineno-10-2"></a><span class="p"><</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">"./css/my.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span><span class="p">></span>
</span><span id="__span-10-3"><a id="__codelineno-10-3" name="__codelineno-10-3" href="#__codelineno-10-3"></a><span class="p"><</span><span class="nt">p</span><span class="p">></span>
</span><span id="__span-10-4"><a id="__codelineno-10-4" name="__codelineno-10-4" href="#__codelineno-10-4"></a> 这是外部样式！！
</span><span id="__span-10-5"><a id="__codelineno-10-5" name="__codelineno-10-5" href="#__codelineno-10-5"></a><span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span><span id="__span-10-6"><a id="__codelineno-10-6" name="__codelineno-10-6" href="#__codelineno-10-6"></a><span class="p"><</span><span class="nt">p</span><span class="p">></span>
</span><span id="__span-10-7"><a id="__codelineno-10-7" name="__codelineno-10-7" href="#__codelineno-10-7"></a> 这是外部样式！！
</span><span id="__span-10-8"><a id="__codelineno-10-8" name="__codelineno-10-8" href="#__codelineno-10-8"></a><span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></code></pre></div>
<p>效果：</p>
<p><img alt="外部样式效果" src="../assets/SD-5-FrontEnd.assets/%E5%A4%96%E9%83%A8%E6%A0%B7%E5%BC%8F%E6%95%88%E6%9E%9C.png" /></p>
<h3 id="33">3.3选择器与属性<a class="headerlink" href="#33" title="Permanent link">¶</a></h3>
<p>CSS选择器中的属性：顾名思义选择器是选取需要设置样式的元素（标签），但根据业务场景不同，选择的标签的需求也是多种多样的，选择器有很多种，目前只学习最基本的3种。</p>
<p>选择器的通用语法</p>
<div class="highlight"><pre><span></span><code><span id="__span-11-1"><a id="__codelineno-11-1" name="__codelineno-11-1" href="#__codelineno-11-1"></a><span class="nt">选择器名</span><span class="p">{</span>
</span><span id="__span-11-2"><a id="__codelineno-11-2" name="__codelineno-11-2" href="#__codelineno-11-2"></a><span class="w"> </span><span class="err">css样式名：css样式值</span>
</span><span id="__span-11-3"><a id="__codelineno-11-3" name="__codelineno-11-3" href="#__codelineno-11-3"></a><span class="w"> </span><span class="err">css样式名：css样式值</span>
</span><span id="__span-11-4"><a id="__codelineno-11-4" name="__codelineno-11-4" href="#__codelineno-11-4"></a><span class="p">}</span>
</span></code></pre></div>
<h4 id="331">3.3.1元素（标签）选择器<a class="headerlink" href="#331" title="Permanent link">¶</a></h4>
<p>选择器的名字必须是标签的名字</p>
<p>作用：选择器中的样式会作用域所有同名的标签上</p>
<p>格式：</p>
<div class="highlight"><pre><span></span><code><span id="__span-12-1"><a id="__codelineno-12-1" name="__codelineno-12-1" href="#__codelineno-12-1"></a><span class="nt">元素名称</span><span class="p">{</span>
</span><span id="__span-12-2"><a id="__codelineno-12-2" name="__codelineno-12-2" href="#__codelineno-12-2"></a><span class="w"> </span><span class="n">css样式名</span><span class="p">:</span><span class="n">css样式值</span>
</span><span id="__span-12-3"><a id="__codelineno-12-3" name="__codelineno-12-3" href="#__codelineno-12-3"></a><span class="p">}</span>
</span></code></pre></div>
<h4 id="332-id">3.3.2 id选择器<a class="headerlink" href="#332-id" title="Permanent link">¶</a></h4>
<p><font color='red'>id选择器的名字前面要加#</font></p>
<p>作用：选择器中的样式会作用域指定id的标签上，仅作用于此一个标签（元素）</p>
<p>格式：</p>
<div class="highlight"><pre><span></span><code><span id="__span-13-1"><a id="__codelineno-13-1" name="__codelineno-13-1" href="#__codelineno-13-1"></a><span class="p">#</span><span class="nn">id属性值</span><span class="p">{</span>
</span><span id="__span-13-2"><a id="__codelineno-13-2" name="__codelineno-13-2" href="#__codelineno-13-2"></a><span class="w"> </span><span class="n">css样式名</span><span class="p">:</span><span class="n">css样式值</span>
</span><span id="__span-13-3"><a id="__codelineno-13-3" name="__codelineno-13-3" href="#__codelineno-13-3"></a><span class="p">}</span>
</span></code></pre></div>
<h4 id="333">3.3.3类选择器<a class="headerlink" href="#333" title="Permanent link">¶</a></h4>
<p>选择器名字前要加上<font color='red'>.(这是个点)</font></p>
<p>作用：选择器的样式会作用域所有class的属性和该名字一样的标签上，可以是多个。</p>
<p>格式：</p>
<div class="highlight"><pre><span></span><code><span id="__span-14-1"><a id="__codelineno-14-1" name="__codelineno-14-1" href="#__codelineno-14-1"></a><span class="p">.</span><span class="nc">class属性值</span><span class="p">{</span>
</span><span id="__span-14-2"><a id="__codelineno-14-2" name="__codelineno-14-2" href="#__codelineno-14-2"></a><span class="w"> </span><span class="n">css样式名</span><span class="p">:</span><span class="n">css样式值</span>
</span><span id="__span-14-3"><a id="__codelineno-14-3" name="__codelineno-14-3" href="#__codelineno-14-3"></a><span class="p">}</span>
</span></code></pre></div>
<p>代码：</p>
<div class="highlight"><pre><span></span><code><span id="__span-15-1"><a id="__codelineno-15-1" name="__codelineno-15-1" href="#__codelineno-15-1"></a><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span><span id="__span-15-2"><a id="__codelineno-15-2" name="__codelineno-15-2" href="#__codelineno-15-2"></a> <span class="p"><</span><span class="nt">style</span><span class="p">></span>
</span><span id="__span-15-3"><a id="__codelineno-15-3" name="__codelineno-15-3" href="#__codelineno-15-3"></a><span class="w"> </span><span class="c">/*标签名：标签选择器的写法，可以精准的选择到当前页面所有指定标签的元素*/</span>
</span><span id="__span-15-4"><a id="__codelineno-15-4" name="__codelineno-15-4" href="#__codelineno-15-4"></a><span class="w"> </span><span class="p">#</span><span class="nn">p1</span><span class="p">{</span>
</span><span id="__span-15-5"><a id="__codelineno-15-5" name="__codelineno-15-5" href="#__codelineno-15-5"></a><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="kc">red</span><span class="p">;</span>
</span><span id="__span-15-6"><a id="__codelineno-15-6" name="__codelineno-15-6" href="#__codelineno-15-6"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-15-7"><a id="__codelineno-15-7" name="__codelineno-15-7" href="#__codelineno-15-7"></a><span class="w"> </span><span class="c">/*#id值：Id选择器的写法，可以精准的选择到当前页面中id（唯一的元素，需要指定id值）*/</span>
</span><span id="__span-15-8"><a id="__codelineno-15-8" name="__codelineno-15-8" href="#__codelineno-15-8"></a><span class="w"> </span><span class="nt">p</span><span class="p">{</span>
</span><span id="__span-15-9"><a id="__codelineno-15-9" name="__codelineno-15-9" href="#__codelineno-15-9"></a><span class="w"> </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="err">华文彩云</span><span class="p">;</span>
</span><span id="__span-15-10"><a id="__codelineno-15-10" name="__codelineno-15-10" href="#__codelineno-15-10"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-15-11"><a id="__codelineno-15-11" name="__codelineno-15-11" href="#__codelineno-15-11"></a><span class="w"> </span><span class="c">/*Class值：类选择器的写法，任何一个元素都可以加上一个class属性（类名称）*/</span>
</span><span id="__span-15-12"><a id="__codelineno-15-12" name="__codelineno-15-12" href="#__codelineno-15-12"></a><span class="w"> </span><span class="p">.</span><span class="nc">cls1</span><span class="p">{</span>
</span><span id="__span-15-13"><a id="__codelineno-15-13" name="__codelineno-15-13" href="#__codelineno-15-13"></a><span class="w"> </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="kc">xx-large</span><span class="p">;</span>
</span><span id="__span-15-14"><a id="__codelineno-15-14" name="__codelineno-15-14" href="#__codelineno-15-14"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-15-15"><a id="__codelineno-15-15" name="__codelineno-15-15" href="#__codelineno-15-15"></a><span class="w"> </span><span class="p"></</span><span class="nt">style</span><span class="p">></span>
</span><span id="__span-15-16"><a id="__codelineno-15-16" name="__codelineno-15-16" href="#__codelineno-15-16"></a> <span class="p"><</span><span class="nt">p</span> <span class="na">id</span><span class="o">=</span><span class="s">"p1"</span><span class="p">></span>
</span><span id="__span-15-17"><a id="__codelineno-15-17" name="__codelineno-15-17" href="#__codelineno-15-17"></a> Hello World
</span><span id="__span-15-18"><a id="__codelineno-15-18" name="__codelineno-15-18" href="#__codelineno-15-18"></a> <span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span><span id="__span-15-19"><a id="__codelineno-15-19" name="__codelineno-15-19" href="#__codelineno-15-19"></a> <span class="p"><</span><span class="nt">p</span> <span class="na">id</span><span class="o">=</span><span class="s">"p2"</span> <span class="na">class</span><span class="o">=</span><span class="s">"cls1"</span><span class="p">></span>
</span><span id="__span-15-20"><a id="__codelineno-15-20" name="__codelineno-15-20" href="#__codelineno-15-20"></a> Hello Java
</span><span id="__span-15-21"><a id="__codelineno-15-21" name="__codelineno-15-21" href="#__codelineno-15-21"></a> <span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span><span id="__span-15-22"><a id="__codelineno-15-22" name="__codelineno-15-22" href="#__codelineno-15-22"></a> <span class="p"><</span><span class="nt">p</span><span class="p">></span>
</span><span id="__span-15-23"><a id="__codelineno-15-23" name="__codelineno-15-23" href="#__codelineno-15-23"></a> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"cls1"</span> <span class="na">href</span><span class="o">=</span><span class="s">"http://www.itcast.cn"</span> <span class="na">target</span><span class="o">=</span><span class="s">"_self"</span><span class="p">></span>跳转去传智官网<span class="p"></</span><span class="nt">a</span><span class="p">></span>
</span><span id="__span-15-24"><a id="__codelineno-15-24" name="__codelineno-15-24" href="#__codelineno-15-24"></a> <span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span><span id="__span-15-25"><a id="__codelineno-15-25" name="__codelineno-15-25" href="#__codelineno-15-25"></a><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></code></pre></div>
<p>效果：</p>
<p><img alt="选择器效果" src="../assets/SD-5-FrontEnd.assets/%E9%80%89%E6%8B%A9%E5%99%A8%E6%95%88%E6%9E%9C.png" /></p>
<h3 id="34css">3.4常见的Css样式<a class="headerlink" href="#34css" title="Permanent link">¶</a></h3>
<p>代码：</p>
<div class="highlight"><pre><span></span><code><span id="__span-16-1"><a id="__codelineno-16-1" name="__codelineno-16-1" href="#__codelineno-16-1"></a><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span><span id="__span-16-2"><a id="__codelineno-16-2" name="__codelineno-16-2" href="#__codelineno-16-2"></a> <span class="p"><</span><span class="nt">style</span><span class="p">></span>
</span><span id="__span-16-3"><a id="__codelineno-16-3" name="__codelineno-16-3" href="#__codelineno-16-3"></a><span class="w"> </span><span class="c">/*基于id选择器选择div_1元素进行美化*/</span>
</span><span id="__span-16-4"><a id="__codelineno-16-4" name="__codelineno-16-4" href="#__codelineno-16-4"></a><span class="w"> </span><span class="p">#</span><span class="nn">div_1</span><span class="p">{</span>
</span><span id="__span-16-5"><a id="__codelineno-16-5" name="__codelineno-16-5" href="#__codelineno-16-5"></a><span class="w"> </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">100</span><span class="kt">px</span><span class="p">;</span><span class="w"> </span><span class="c">/*Css样式：高度*/</span>
</span><span id="__span-16-6"><a id="__codelineno-16-6" name="__codelineno-16-6" href="#__codelineno-16-6"></a><span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">100</span><span class="kt">px</span><span class="p">;</span><span class="w"> </span><span class="c">/*Css样式：宽度*/</span><span class="w"> </span>
</span><span id="__span-16-7"><a id="__codelineno-16-7" name="__codelineno-16-7" href="#__codelineno-16-7"></a><span class="w"> </span><span class="k">border</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="w"> </span><span class="kc">red</span><span class="w"> </span><span class="kc">solid</span><span class="p">;</span><span class="w"> </span><span class="c">/*Css复合样式：边框宽度 颜色 样式*/</span><span class="w"> </span>
</span><span id="__span-16-8"><a id="__codelineno-16-8" name="__codelineno-16-8" href="#__codelineno-16-8"></a><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">brown</span><span class="p">;</span><span class="w"> </span><span class="c">/*Css样式：文字颜色*/</span>
</span><span id="__span-16-9"><a id="__codelineno-16-9" name="__codelineno-16-9" href="#__codelineno-16-9"></a><span class="w"> </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="kc">aquamarine</span><span class="p">;</span><span class="w"> </span><span class="c">/*Css样式：背景色*/</span>
</span><span id="__span-16-10"><a id="__codelineno-16-10" name="__codelineno-16-10" href="#__codelineno-16-10"></a><span class="w"> </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mi">20</span><span class="kt">px</span><span class="p">;</span><span class="w"> </span><span class="c">/*Css样式：文字大小*/</span>
</span><span id="__span-16-11"><a id="__codelineno-16-11" name="__codelineno-16-11" href="#__codelineno-16-11"></a><span class="w"> </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="n">Consolas</span><span class="p">;</span><span class="w"> </span><span class="c">/*Css样式：文字字体*/</span>
</span><span id="__span-16-12"><a id="__codelineno-16-12" name="__codelineno-16-12" href="#__codelineno-16-12"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-16-13"><a id="__codelineno-16-13" name="__codelineno-16-13" href="#__codelineno-16-13"></a><span class="w"> </span><span class="p"></</span><span class="nt">style</span><span class="p">></span>
</span><span id="__span-16-14"><a id="__codelineno-16-14" name="__codelineno-16-14" href="#__codelineno-16-14"></a> <span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"div_1"</span><span class="p">></span>Hello World<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span><span id="__span-16-15"><a id="__codelineno-16-15" name="__codelineno-16-15" href="#__codelineno-16-15"></a> <span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"div_2"</span><span class="p">></span>你好世界！<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span><span id="__span-16-16"><a id="__codelineno-16-16" name="__codelineno-16-16" href="#__codelineno-16-16"></a><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></code></pre></div>
<p>效果：</p>
<p><img alt="image-20240815220335835" src="../assets/SD-5-FrontEnd.assets/image-20240815220335835.png" /></p>
<h2 id="_2">问题记录<a class="headerlink" href="#_2" title="Permanent link">¶</a></h2>
<p><font color='blue'>js脚本的解析过程以及原理，如何改善页面的加载速度</font></p>
<p><font color='blue'>浏览器的控制台有什么作用？探索浏览器我不知道的功能</font></p>
<p>编译语言与脚本语言的详细区别，如：性能？使用场景？</p>
<p>Java的动态编译？</p>
<p>脚本语言，不用编译，直接运行（<font color='blue'>怎么实现的？</font>）</p>
<p>网页崩溃，如STEAM常见的那种，是没有加载CSS文件？</p>
<p><font color='blue'>\<head> 内\<body>内外 等位置引入有什么区别？？</font></p>
<p>弱类型语言的效率？</p>
<h2 id="_3">学习目标：<a class="headerlink" href="#_3" title="Permanent link">¶</a></h2>
<p>JS函数的定义</p>
<p>JS的DOM编程</p>
<p>事件监听</p>
<p>练习事件监听和函数表达式</p>
<h2 id="1javascript">1.JavaScript<a class="headerlink" href="#1javascript" title="Permanent link">¶</a></h2>
<p>HTML完成架子，CSS做了美化，但是网页还是死的，我们需要给他注入灵魂，JavaScript语言会让我们的页面与用户进行交互。</p>
<h3 id="11javascipt">1.1JavaScipt介绍<a class="headerlink" href="#11javascipt" title="Permanent link">¶</a></h3>
<p>JavaScript是一门跨平台、面向对象的脚本语言，而Java语言也是跨平台、面向对象的语言。但是Java是编译语言，是需要编译字节码文件才能运行；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。</p>
<p>JavaScript用来控制网页行为，它能使网页可交互；如：改变页面内容、修改指定元素属性值、对表单进行校验等等。</p>
<p>改变页面内容：<font color='blue'>Demo展示</font></p>
<p>修改指定元素属性值：<font color='blue'>Demo展示</font></p>
<p>发展历史： 在 1995 年由 Brendan Eich 发明，并于 1997 年成为一部 ECMA 标准。ECMA 规定了一套标准 就叫 <code>ECMAScript</code> ，所有的客户端校验语言必须遵守这个标准，当然 JavaScript 也遵守了这个标准。ECMAScript 6 (简称ES6) 是最新的 JavaScript 版本（发布于 2015 年)，我们的课程就是基于最新的 <code>ES6</code> 进行讲解。1.2引入方式</p>
<h3 id="12javascript">1.2JavaScript引入方式<a class="headerlink" href="#12javascript" title="Permanent link">¶</a></h3>
<p>JavaScript引入方式就是HTML和JavaScript的结合方式，有两种引入方式：</p>
<ul>
<li>内部脚本：将JS代码定义在HTML页面中</li>
<li>外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML文件中</li>
</ul>
<h4 id="121">1.2.1内部脚本<a class="headerlink" href="#121" title="Permanent link">¶</a></h4>
<p>内部脚本方式：将JS代码定义在HTML页面中</p>
<ul>
<li>JavaScript代码必须位于\<script>\</script>标签中间</li>
<li>在HTML文档中，可以在任意地方，放置任意数量的\<script></li>
<li>一般会把脚本至于\<body>元素的底部，可以改善显示速度【因为浏览器加载页面的时候会从上往下进行加载解析，我们应该让用户先看到页面内容，再展示动态的效果。】</li>
</ul>
<h4 id="122">1.2.2外部脚本<a class="headerlink" href="#122" title="Permanent link">¶</a></h4>
<p>外部脚本方式：将JS代码定义在外部JS文件中，然后引入到HTML页面中</p>
<ul>
<li>外部JS文件中，只包含JS代码，不包含\<script>标签</li>
<li>\<script>标签是主动闭合标签。</li>
<li>不能两个方式在同一标签内使用</li>
</ul>
<p>示例：</p>
<div class="highlight"><pre><span></span><code><span id="__span-17-1"><a id="__codelineno-17-1" name="__codelineno-17-1" href="#__codelineno-17-1"></a><span class="cp"><!DOCTYPE html></span>
</span><span id="__span-17-2"><a id="__codelineno-17-2" name="__codelineno-17-2" href="#__codelineno-17-2"></a><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
</span><span id="__span-17-3"><a id="__codelineno-17-3" name="__codelineno-17-3" href="#__codelineno-17-3"></a><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span><span id="__span-17-4"><a id="__codelineno-17-4" name="__codelineno-17-4" href="#__codelineno-17-4"></a> <span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"UTF-8"</span><span class="p">></span>
</span><span id="__span-17-5"><a id="__codelineno-17-5" name="__codelineno-17-5" href="#__codelineno-17-5"></a> <span class="p"><</span><span class="nt">meta</span> <span class="na">http-equiv</span><span class="o">=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content</span><span class="o">=</span><span class="s">"IE=edge"</span><span class="p">></span>
</span><span id="__span-17-6"><a id="__codelineno-17-6" name="__codelineno-17-6" href="#__codelineno-17-6"></a> <span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span><span class="p">></span>
</span><span id="__span-17-7"><a id="__codelineno-17-7" name="__codelineno-17-7" href="#__codelineno-17-7"></a> <span class="p"><</span><span class="nt">title</span><span class="p">></span>16-JavaScript-JavaScript的引入方式<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span><span id="__span-17-8"><a id="__codelineno-17-8" name="__codelineno-17-8" href="#__codelineno-17-8"></a> <span class="cm"><!-- 外部脚本:通过<script>标签声明,引入外部的js文件 注意:如果标签用于引入内容,则不允许在标签体中写东西!--></span>
</span><span id="__span-17-9"><a id="__codelineno-17-9" name="__codelineno-17-9" href="#__codelineno-17-9"></a> <span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"./js/my.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
</span><span id="__span-17-10"><a id="__codelineno-17-10" name="__codelineno-17-10" href="#__codelineno-17-10"></a><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span><span id="__span-17-11"><a id="__codelineno-17-11" name="__codelineno-17-11" href="#__codelineno-17-11"></a><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span><span id="__span-17-12"><a id="__codelineno-17-12" name="__codelineno-17-12" href="#__codelineno-17-12"></a><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span><span id="__span-17-13"><a id="__codelineno-17-13" name="__codelineno-17-13" href="#__codelineno-17-13"></a><span class="cm"><!--内部脚本: 通过 < script> 标签声明, 即可在标签中编写JavaScript代码!--></span>
</span><span id="__span-17-14"><a id="__codelineno-17-14" name="__codelineno-17-14" href="#__codelineno-17-14"></a><span class="p"><</span><span class="nt">script</span><span class="p">></span>
</span><span id="__span-17-15"><a id="__codelineno-17-15" name="__codelineno-17-15" href="#__codelineno-17-15"></a><span class="w"> </span><span class="cm">/* 基于全局静态方法alert输出Hello World */</span>
</span><span id="__span-17-16"><a id="__codelineno-17-16" name="__codelineno-17-16" href="#__codelineno-17-16"></a><span class="w"> </span><span class="nx">alert</span><span class="p">(</span><span class="s2">"Hello World"</span><span class="p">);</span>
</span><span id="__span-17-17"><a id="__codelineno-17-17" name="__codelineno-17-17" href="#__codelineno-17-17"></a><span class="p"></</span><span class="nt">script</span><span class="p">></span>
</span><span id="__span-17-18"><a id="__codelineno-17-18" name="__codelineno-17-18" href="#__codelineno-17-18"></a><span class="p"></</span><span class="nt">html</span><span class="p">></span>
</span></code></pre></div>
<h3 id="13_1">1.3基础语法<a class="headerlink" href="#13_1" title="Permanent link">¶</a></h3>
<h4 id="131">1.3.1书写语法<a class="headerlink" href="#131" title="Permanent link">¶</a></h4>
<p>语法规则</p>
<ul>
<li>区分大小写：与Java一样，变量名、函数名以及其他的一切东西都是区分大小写的</li>
<li>每行结束的分号可有可无<font color='blue'>开发规范怎么要求的？</font></li>
<li>大括号表示代码块</li>
<li>注释：1.单行//注释内容2.多行/*注释内容*/</li>
</ul>
<p>JS的3种输出语句</p>
<table>
<thead>
<tr>
<th>api<font color='blue'>为什么被称为api</font></th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>window.alert()</td>
<td>警告框</td>
</tr>
<tr>
<td>document.write()</td>
<td>在HTML输出内容</td>
</tr>
<tr>
<td>console.log()</td>
<td>写入浏览器的控制台<br></td>
</tr>
</tbody>
</table>
<p>代码：</p>
<div class="highlight"><pre><span></span><code><span id="__span-18-1"><a id="__codelineno-18-1" name="__codelineno-18-1" href="#__codelineno-18-1"></a><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span><span id="__span-18-2"><a id="__codelineno-18-2" name="__codelineno-18-2" href="#__codelineno-18-2"></a> <span class="p"><</span><span class="nt">script</span><span class="p">></span>
</span><span id="__span-18-3"><a id="__codelineno-18-3" name="__codelineno-18-3" href="#__codelineno-18-3"></a><span class="w"> </span><span class="cm">/*输出方式1：弹框 window.alert（输出内容）*/</span>
</span><span id="__span-18-4"><a id="__codelineno-18-4" name="__codelineno-18-4" href="#__codelineno-18-4"></a><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">alert</span><span class="p">(</span><span class="s2">"hello world"</span><span class="p">);</span>
</span><span id="__span-18-5"><a id="__codelineno-18-5" name="__codelineno-18-5" href="#__codelineno-18-5"></a><span class="w"> </span><span class="cm">/*输出方式2：追加到页面 document.write(输出内容)；可以将输出内容作为<body></body>的内容*/</span>
</span><span id="__span-18-6"><a id="__codelineno-18-6" name="__codelineno-18-6" href="#__codelineno-18-6"></a><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="s2">"hello Java"</span><span class="p">);</span>
</span><span id="__span-18-7"><a id="__codelineno-18-7" name="__codelineno-18-7" href="#__codelineno-18-7"></a><span class="w"> </span><span class="cm">/*输出方式3:打印到浏览器控制台 console.log（输出内容）;console.error（输出内容）;console.info(输出内容)*/</span>
</span><span id="__span-18-8"><a id="__codelineno-18-8" name="__codelineno-18-8" href="#__codelineno-18-8"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"hello 黑马"</span><span class="p">);</span>
</span><span id="__span-18-9"><a id="__codelineno-18-9" name="__codelineno-18-9" href="#__codelineno-18-9"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s2">"error打印效果"</span><span class="p">);</span>
</span><span id="__span-18-10"><a id="__codelineno-18-10" name="__codelineno-18-10" href="#__codelineno-18-10"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">info</span><span class="p">(</span><span class="s2">"info打印效果"</span><span class="p">);</span>
</span><span id="__span-18-11"><a id="__codelineno-18-11" name="__codelineno-18-11" href="#__codelineno-18-11"></a><span class="w"> </span><span class="p"></</span><span class="nt">script</span><span class="p">></span>
</span><span id="__span-18-12"><a id="__codelineno-18-12" name="__codelineno-18-12" href="#__codelineno-18-12"></a><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></code></pre></div>
<p>效果：</p>
<p><img alt="JS输出语句打印效果png" src="../assets/SD-5-FrontEnd.assets/JS%E8%BE%93%E5%87%BA%E8%AF%AD%E5%8F%A5%E6%89%93%E5%8D%B0%E6%95%88%E6%9E%9Cpng.png" /></p>
<h4 id="132">1.3.2变量<a class="headerlink" href="#132" title="Permanent link">¶</a></h4>
<p>变量是编程语言中必不可少的，在JS中，变量的声明与Java中还是不同的，主要通过一下三个关键字来生命标量</p>
<table>
<thead>
<tr>
<th>关键字</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>var</td>
<td>早期ECMAScript5中用于声明变量的关键字，作用域：全局变量</td>
</tr>
<tr>
<td>let</td>
<td>ECMAScript6中新增的用于声明变量的关键字，相比较于var，let只会在代码块中生效</td>
</tr>
<tr>
<td>const</td>
<td>ECMAScript6中新增的用于声明常量的关键字，常量一旦声明，不能修改</td>
</tr>
</tbody>
</table>
<p>JS中声明变量的注意事项</p>
<ul>
<li>JavaScript是一门弱类型语言，变量可以存放不同类型的值，</li>
<li>变量名需要遵循以下规则</li>
<li>组成字符可以是任何字符、数字、下划线（_）或者美元符号（$）</li>
<li>数字不能开头</li>
<li>建议使用驼峰命名</li>
<li>JavaScript是一门弱类型语言，变量空间中的内容没有类型限制，存什么可以，所以在声明的时候没有必要加数据类型</li>
</ul>
<p>示例：</p>
<div class="highlight"><pre><span></span><code><span id="__span-19-1"><a id="__codelineno-19-1" name="__codelineno-19-1" href="#__codelineno-19-1"></a><span class="p">{</span>
</span><span id="__span-19-2"><a id="__codelineno-19-2" name="__codelineno-19-2" href="#__codelineno-19-2"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">age</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">20</span><span class="p">;</span>
</span><span id="__span-19-3"><a id="__codelineno-19-3" name="__codelineno-19-3" href="#__codelineno-19-3"></a><span class="p">}</span>
</span><span id="__span-19-4"><a id="__codelineno-19-4" name="__codelineno-19-4" href="#__codelineno-19-4"></a><span class="nx">alert</span><span class="p">(</span><span class="nx">age</span><span class="p">);</span><span class="w"> </span><span class="c1">// 在代码块中定义的age 变量，在代码块外边还可以使用</span>
</span></code></pre></div>
<h4 id="133">1.3.3数据类型<a class="headerlink" href="#133" title="Permanent link">¶</a></h4>
<p>虽然JS是弱数据类型的语言，但是JS中也存在数据类型，JS中的数据类型分为<font color='red'>原始类型</font>和<font color='red'>引用类型</font>，原始类型如下</p>
<table>
<thead>
<tr>
<th>原始类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>number</td>
<td>数字（整数、小数、NaN(Not a Number)）</td>
</tr>
<tr>
<td>string</td>
<td>字符串，用单引号双引号皆可表示（依据团队项目标准，为了后端开发习惯，建议双引）</td>
</tr>
<tr>
<td>boolean</td>
<td>布尔，true/flase</td>
</tr>
<tr>
<td>null</td>
<td>对象为空</td>
</tr>
<tr>
<td>undefined</td>
<td>当声明的变量未初始化时，该变量的默认值是unfined</td>
</tr>
</tbody>
</table>
<p><font color='blue'>undefined不是特别理解</font>：undefined 前提：声明了变量没有赋值</p>
<p>注意事项：</p>
<p>在JS中，0，null，undefined，”“，NaN理解成false，反之理解为true。</p>
<p>基于typeof 变量名可以返回该变量的实际类型</p>
<p>代码：</p>
<div class="highlight"><pre><span></span><code><span id="__span-20-1"><a id="__codelineno-20-1" name="__codelineno-20-1" href="#__codelineno-20-1"></a><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span><span id="__span-20-2"><a id="__codelineno-20-2" name="__codelineno-20-2" href="#__codelineno-20-2"></a> <span class="p"><</span><span class="nt">script</span><span class="p">></span>
</span><span id="__span-20-3"><a id="__codelineno-20-3" name="__codelineno-20-3" href="#__codelineno-20-3"></a><span class="w"> </span><span class="cm">/*基于typeof 变量名可以返回该变量的实际类型*/</span>
</span><span id="__span-20-4"><a id="__codelineno-20-4" name="__codelineno-20-4" href="#__codelineno-20-4"></a><span class="w"> </span><span class="cm">/*原始类型1：number包含所有的数据以及NaN（不是一个具体数字的number类型）*/</span>
</span><span id="__span-20-5"><a id="__codelineno-20-5" name="__codelineno-20-5" href="#__codelineno-20-5"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">a</span><span class="o">=</span><span class="mf">5</span><span class="p">;</span>
</span><span id="__span-20-6"><a id="__codelineno-20-6" name="__codelineno-20-6" href="#__codelineno-20-6"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">b</span><span class="o">=</span><span class="mf">10.5</span><span class="p">;</span>
</span><span id="__span-20-7"><a id="__codelineno-20-7" name="__codelineno-20-7" href="#__codelineno-20-7"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">c</span><span class="o">=</span><span class="kc">NaN</span><span class="p">;</span>
</span><span id="__span-20-8"><a id="__codelineno-20-8" name="__codelineno-20-8" href="#__codelineno-20-8"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">a</span><span class="o">+</span><span class="s2">" "</span><span class="o">+</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">a</span><span class="p">);</span>
</span><span id="__span-20-9"><a id="__codelineno-20-9" name="__codelineno-20-9" href="#__codelineno-20-9"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">b</span><span class="o">+</span><span class="s2">" "</span><span class="o">+</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">b</span><span class="p">);</span>
</span><span id="__span-20-10"><a id="__codelineno-20-10" name="__codelineno-20-10" href="#__codelineno-20-10"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">c</span><span class="o">+</span><span class="s2">" "</span><span class="o">+</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">c</span><span class="p">);</span>
</span><span id="__span-20-11"><a id="__codelineno-20-11" name="__codelineno-20-11" href="#__codelineno-20-11"></a><span class="w"> </span><span class="cm">/*原始类型2：string 字符串，在JavaScript中没有字符的概念*/</span>
</span><span id="__span-20-12"><a id="__codelineno-20-12" name="__codelineno-20-12" href="#__codelineno-20-12"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">d</span><span class="w"> </span><span class="o">=</span><span class="s2">"张二狗"</span><span class="p">;</span>
</span><span id="__span-20-13"><a id="__codelineno-20-13" name="__codelineno-20-13" href="#__codelineno-20-13"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">e</span><span class="o">=</span><span class="s1">'北京市昌平区'</span><span class="p">;</span>
</span><span id="__span-20-14"><a id="__codelineno-20-14" name="__codelineno-20-14" href="#__codelineno-20-14"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">d</span><span class="o">+</span><span class="s2">" "</span><span class="o">+</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">d</span><span class="p">);</span>
</span><span id="__span-20-15"><a id="__codelineno-20-15" name="__codelineno-20-15" href="#__codelineno-20-15"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">e</span><span class="o">+</span><span class="s2">" "</span><span class="o">+</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">e</span><span class="p">);</span>
</span><span id="__span-20-16"><a id="__codelineno-20-16" name="__codelineno-20-16" href="#__codelineno-20-16"></a><span class="w"> </span><span class="cm">/*原始类型3：boolean true/false*/</span>
</span><span id="__span-20-17"><a id="__codelineno-20-17" name="__codelineno-20-17" href="#__codelineno-20-17"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">f</span><span class="o">=</span><span class="kc">true</span><span class="p">;</span>
</span><span id="__span-20-18"><a id="__codelineno-20-18" name="__codelineno-20-18" href="#__codelineno-20-18"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">g</span><span class="o">=</span><span class="kc">false</span><span class="p">;</span>
</span><span id="__span-20-19"><a id="__codelineno-20-19" name="__codelineno-20-19" href="#__codelineno-20-19"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">f</span><span class="o">+</span><span class="s2">" "</span><span class="o">+</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">f</span><span class="p">);</span>
</span><span id="__span-20-20"><a id="__codelineno-20-20" name="__codelineno-20-20" href="#__codelineno-20-20"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">e</span><span class="o">+</span><span class="s2">" "</span><span class="o">+</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">e</span><span class="p">);</span>
</span><span id="__span-20-21"><a id="__codelineno-20-21" name="__codelineno-20-21" href="#__codelineno-20-21"></a><span class="w"> </span><span class="cm">/*原始类型4：null表示没有一个具体的内存引用，typeof一个null值的结果是Object*/</span>
</span><span id="__span-20-22"><a id="__codelineno-20-22" name="__codelineno-20-22" href="#__codelineno-20-22"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">h</span><span class="o">=</span><span class="kc">null</span><span class="p">;</span>
</span><span id="__span-20-23"><a id="__codelineno-20-23" name="__codelineno-20-23" href="#__codelineno-20-23"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">h</span><span class="o">+</span><span class="s2">" "</span><span class="o">+</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">h</span><span class="p">);</span>
</span><span id="__span-20-24"><a id="__codelineno-20-24" name="__codelineno-20-24" href="#__codelineno-20-24"></a><span class="w"> </span><span class="cm">/*原始类型5：undefined 前提：声明了变量没有赋值*/</span>
</span><span id="__span-20-25"><a id="__codelineno-20-25" name="__codelineno-20-25" href="#__codelineno-20-25"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">i</span><span class="p">;</span>
</span><span id="__span-20-26"><a id="__codelineno-20-26" name="__codelineno-20-26" href="#__codelineno-20-26"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">i</span><span class="o">+</span><span class="s2">" "</span><span class="o">+</span><span class="ow">typeof</span><span class="w"> </span><span class="nx">i</span><span class="p">);</span>
</span><span id="__span-20-27"><a id="__codelineno-20-27" name="__codelineno-20-27" href="#__codelineno-20-27"></a><span class="w"> </span><span class="p"></</span><span class="nt">script</span><span class="p">></span>
</span><span id="__span-20-28"><a id="__codelineno-20-28" name="__codelineno-20-28" href="#__codelineno-20-28"></a><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></code></pre></div>
<p>效果：</p>
<p><img alt="JavaScript变量展示" src="../assets/SD-5-FrontEnd.assets/JavaScript%E5%8F%98%E9%87%8F%E5%B1%95%E7%A4%BA.png" /></p>
<h4 id="134">1.3.4运算符<a class="headerlink" href="#134" title="Permanent link">¶</a></h4>
<p>JS中的运算符，JS中运算规则绝大多数和Java中是一致的，<font color='blue'>（有哪几个不一致）</font>具体运算符如下</p>
<table>
<thead>
<tr>
<th>运算符规则</th>
<th>运算符</th>
</tr>
</thead>
<tbody>
<tr>
<td>算术运算符</td>
<td>+，-，*，/，%，++，--</td>
</tr>
<tr>
<td>赋值运算符</td>
<td>=，+=，-=，*=，/=，%=</td>
</tr>
<tr>
<td>比较运算符</td>
<td>>，<，>=，<=，!=，<mark>，=</mark> <strong>注意：==会进行类型转换，===不会进行类型转换</strong></td>
</tr>
<tr>
<td>逻辑运算符</td>
<td>&&，||，！</td>
</tr>
<tr>
<td>三元运算符</td>
<td>条件表达式 ? true_value : falase_value</td>
</tr>
</tbody>
</table>
<p>注意事项：</p>
<ul>
<li><mark>与=</mark>（即比较内容也比较类型，建议使用）</li>
<li>为了严谨，建议使用===</li>
<li><font color = blue>boolean值底层并不是true字符串</font></li>
</ul>
<p>代码：</p>
<div class="highlight"><pre><span></span><code><span id="__span-21-1"><a id="__codelineno-21-1" name="__codelineno-21-1" href="#__codelineno-21-1"></a><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span><span id="__span-21-2"><a id="__codelineno-21-2" name="__codelineno-21-2" href="#__codelineno-21-2"></a> <span class="p"><</span><span class="nt">script</span><span class="p">></span>
</span><span id="__span-21-3"><a id="__codelineno-21-3" name="__codelineno-21-3" href="#__codelineno-21-3"></a><span class="w"> </span><span class="c1">///JavaScript由于原始类型的所有数字都是Number类型【整数/整数不一定整数】</span>
</span><span id="__span-21-4"><a id="__codelineno-21-4" name="__codelineno-21-4" href="#__codelineno-21-4"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mf">10</span><span class="o">/</span><span class="mf">4</span><span class="p">);</span><span class="c1">//2.5</span>
</span><span id="__span-21-5"><a id="__codelineno-21-5" name="__codelineno-21-5" href="#__codelineno-21-5"></a><span class="w"> </span><span class="c1">//==:值比较内容（与数据类型无关）===:既比较内容也比较类型</span>
</span><span id="__span-21-6"><a id="__codelineno-21-6" name="__codelineno-21-6" href="#__codelineno-21-6"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">a</span><span class="o">=</span><span class="mf">10</span><span class="p">;</span>
</span><span id="__span-21-7"><a id="__codelineno-21-7" name="__codelineno-21-7" href="#__codelineno-21-7"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">a</span><span class="o">==</span><span class="s2">"10"</span><span class="p">);</span><span class="c1">//T</span>
</span><span id="__span-21-8"><a id="__codelineno-21-8" name="__codelineno-21-8" href="#__codelineno-21-8"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">a</span><span class="o">===</span><span class="s2">"10"</span><span class="p">);</span><span class="c1">//F</span>
</span><span id="__span-21-9"><a id="__codelineno-21-9" name="__codelineno-21-9" href="#__codelineno-21-9"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">a</span><span class="o">==</span><span class="s2">"10"</span><span class="p">)</span><span class="c1">//T</span>
</span><span id="__span-21-10"><a id="__codelineno-21-10" name="__codelineno-21-10" href="#__codelineno-21-10"></a><span class="w"> </span><span class="c1">//==不能用于boolean的值比较</span>
</span><span id="__span-21-11"><a id="__codelineno-21-11" name="__codelineno-21-11" href="#__codelineno-21-11"></a><span class="w"> </span><span class="c1">//==在于boolean类型比较时，并不会只比较内容，猜测：boolean值底层并不是true字符串</span>
</span><span id="__span-21-12"><a id="__codelineno-21-12" name="__codelineno-21-12" href="#__codelineno-21-12"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">b</span><span class="o">=</span><span class="s2">"true"</span><span class="p">;</span>
</span><span id="__span-21-13"><a id="__codelineno-21-13" name="__codelineno-21-13" href="#__codelineno-21-13"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">b</span><span class="o">==</span><span class="kc">true</span><span class="p">);</span><span class="c1">//F</span>
</span><span id="__span-21-14"><a id="__codelineno-21-14" name="__codelineno-21-14" href="#__codelineno-21-14"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">b</span><span class="o">===</span><span class="kc">true</span><span class="p">);</span><span class="c1">//F</span>
</span><span id="__span-21-15"><a id="__codelineno-21-15" name="__codelineno-21-15" href="#__codelineno-21-15"></a><span class="w"> </span><span class="c1">//为了严谨尽量使用===</span>
</span><span id="__span-21-16"><a id="__codelineno-21-16" name="__codelineno-21-16" href="#__codelineno-21-16"></a><span class="w"> </span><span class="p"></</span><span class="nt">script</span><span class="p">></span>
</span><span id="__span-21-17"><a id="__codelineno-21-17" name="__codelineno-21-17" href="#__codelineno-21-17"></a><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></code></pre></div>
<h4 id="135js">1.3.5JS中的类型转换<a class="headerlink" href="#135js" title="Permanent link">¶</a></h4>
<p>使用<code>==</code>运算符时，会进行类型转换，</p>
<p><font color='blue'>类型转换的目的：</font></p>
<ol>
<li>尽量避免一些错误，</li>
<li>
<p>在Java中操作字符串一般都会判断字符串是不是null，并且不是空字符串才会做一些其他的操作，JavaScript的自动进行类型转换，可以简化判断操作。</p>
</li>
<li>
<p>其他类型转number</p>
</li>
<li>String类型转number：按照字符串的字面值，转为数字，如果字面值不是数字则转为NaN，String转为number有两种方式：代买中<ul>
<li>使用<code>+</code>运算符，<font color='blue'>代码中str1为什么要+=定义才可以转换？=定义不可以转换</font></li>
<li>使用parseInt（）函数【建议使用parseInt进行转换】</li>
<li>boolean类型转为number类型：true转为1，false转为0。</li>
</ul>
</li>
<li>其他类型转boolean</li>
<li>number类型转为boolean类型：0和NaN转为false，其他数字转为true；</li>
<li>String类型转为boolean类型：空字符串转为false，其他数字转为true；</li>
<li>null类型和undefined转为boolean类型：都是false。</li>
</ol>
<p>代码：</p>
<div class="highlight"><pre><span></span><code><span id="__span-22-1"><a id="__codelineno-22-1" name="__codelineno-22-1" href="#__codelineno-22-1"></a><span class="c1">//在js总为了尽量少的出现错误，里边包含了一些默认的类型转换</span>
</span><span id="__span-22-2"><a id="__codelineno-22-2" name="__codelineno-22-2" href="#__codelineno-22-2"></a><span class="w"> </span><span class="c1">//String类型转number</span>
</span><span id="__span-22-3"><a id="__codelineno-22-3" name="__codelineno-22-3" href="#__codelineno-22-3"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">str1</span><span class="o">=</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s2">"20"</span><span class="p">;</span><span class="c1">//这个定义是怎么回事？？？</span>
</span><span id="__span-22-4"><a id="__codelineno-22-4" name="__codelineno-22-4" href="#__codelineno-22-4"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">str2</span><span class="o">=</span><span class="s2">"20"</span>
</span><span id="__span-22-5"><a id="__codelineno-22-5" name="__codelineno-22-5" href="#__codelineno-22-5"></a><span class="w"> </span><span class="nx">alert</span><span class="p">(</span><span class="s2">"使用+号类型转换"</span><span class="o">+</span><span class="p">(</span><span class="nx">str1</span><span class="o">+</span><span class="mf">1</span><span class="p">));</span><span class="c1">//21</span>
</span><span id="__span-22-6"><a id="__codelineno-22-6" name="__codelineno-22-6" href="#__codelineno-22-6"></a><span class="w"> </span><span class="nx">alert</span><span class="p">(</span><span class="s2">"使用parseInt函数"</span><span class="o">+</span><span class="p">(</span><span class="nb">parseInt</span><span class="p">(</span><span class="nx">str2</span><span class="p">)</span><span class="o">+</span><span class="mf">5</span><span class="p">));</span><span class="c1">//25</span>
</span><span id="__span-22-7"><a id="__codelineno-22-7" name="__codelineno-22-7" href="#__codelineno-22-7"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">a</span><span class="w"> </span><span class="o">=</span><span class="mf">10</span><span class="p">;</span>
</span><span id="__span-22-8"><a id="__codelineno-22-8" name="__codelineno-22-8" href="#__codelineno-22-8"></a><span class="w"> </span><span class="k">if</span><span class="p">(</span><span class="nx">a</span><span class="o">></span><span class="mf">5</span><span class="p">){</span><span class="w"> </span><span class="c1">//if()中应该传递boolead值用于判断</span>
</span><span id="__span-22-9"><a id="__codelineno-22-9" name="__codelineno-22-9" href="#__codelineno-22-9"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"a大于5"</span><span class="p">)</span>
</span><span id="__span-22-10"><a id="__codelineno-22-10" name="__codelineno-22-10" href="#__codelineno-22-10"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-22-11"><a id="__codelineno-22-11" name="__codelineno-22-11" href="#__codelineno-22-11"></a><span class="w"> </span><span class="c1">//当使用number类型的数据进行判断时，JavaScript自动转换的逻辑是0和NaN转换成False,其他数字转换成T</span>
</span><span id="__span-22-12"><a id="__codelineno-22-12" name="__codelineno-22-12" href="#__codelineno-22-12"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">b</span><span class="o">=</span><span class="mf">0</span><span class="p">;</span>
</span><span id="__span-22-13"><a id="__codelineno-22-13" name="__codelineno-22-13" href="#__codelineno-22-13"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">c</span><span class="o">=</span><span class="kc">NaN</span><span class="p">;</span>
</span><span id="__span-22-14"><a id="__codelineno-22-14" name="__codelineno-22-14" href="#__codelineno-22-14"></a><span class="w"> </span><span class="k">if</span><span class="p">(</span><span class="nx">a</span><span class="p">){</span>
</span><span id="__span-22-15"><a id="__codelineno-22-15" name="__codelineno-22-15" href="#__codelineno-22-15"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"判断参数为a时转换成true"</span><span class="p">);</span>
</span><span id="__span-22-16"><a id="__codelineno-22-16" name="__codelineno-22-16" href="#__codelineno-22-16"></a><span class="w"> </span><span class="p">}</span><span class="c1">//有输出 </span>
</span><span id="__span-22-17"><a id="__codelineno-22-17" name="__codelineno-22-17" href="#__codelineno-22-17"></a><span class="w"> </span><span class="k">if</span><span class="p">(</span><span class="nx">b</span><span class="p">){</span>
</span><span id="__span-22-18"><a id="__codelineno-22-18" name="__codelineno-22-18" href="#__codelineno-22-18"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"判断参数为b时转换成true"</span><span class="p">);</span>
</span><span id="__span-22-19"><a id="__codelineno-22-19" name="__codelineno-22-19" href="#__codelineno-22-19"></a><span class="w"> </span><span class="p">}</span><span class="c1">//无输出</span>
</span><span id="__span-22-20"><a id="__codelineno-22-20" name="__codelineno-22-20" href="#__codelineno-22-20"></a><span class="w"> </span><span class="k">if</span><span class="p">(</span><span class="nx">c</span><span class="p">){</span>
</span><span id="__span-22-21"><a id="__codelineno-22-21" name="__codelineno-22-21" href="#__codelineno-22-21"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"判断参数为c时转换成true"</span><span class="p">);</span>
</span><span id="__span-22-22"><a id="__codelineno-22-22" name="__codelineno-22-22" href="#__codelineno-22-22"></a><span class="w"> </span><span class="p">}</span><span class="c1">//无输出</span>
</span><span id="__span-22-23"><a id="__codelineno-22-23" name="__codelineno-22-23" href="#__codelineno-22-23"></a><span class="w"> </span><span class="c1">//当使用string类型的数据进行判断时，空字符串转换为False，其他的转换成True</span>
</span><span id="__span-22-24"><a id="__codelineno-22-24" name="__codelineno-22-24" href="#__codelineno-22-24"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">d</span><span class="w"> </span><span class="o">=</span><span class="s2">""</span><span class="p">;</span>
</span><span id="__span-22-25"><a id="__codelineno-22-25" name="__codelineno-22-25" href="#__codelineno-22-25"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">e</span><span class="o">=</span><span class="s2">"Hello"</span><span class="p">;</span>
</span><span id="__span-22-26"><a id="__codelineno-22-26" name="__codelineno-22-26" href="#__codelineno-22-26"></a><span class="w"> </span><span class="k">if</span><span class="p">(</span><span class="nx">d</span><span class="p">){</span>
</span><span id="__span-22-27"><a id="__codelineno-22-27" name="__codelineno-22-27" href="#__codelineno-22-27"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"判断参数为d时转换成true"</span><span class="p">);</span>
</span><span id="__span-22-28"><a id="__codelineno-22-28" name="__codelineno-22-28" href="#__codelineno-22-28"></a><span class="w"> </span><span class="p">}</span><span class="c1">//有输出</span>
</span><span id="__span-22-29"><a id="__codelineno-22-29" name="__codelineno-22-29" href="#__codelineno-22-29"></a><span class="w"> </span><span class="k">if</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
</span><span id="__span-22-30"><a id="__codelineno-22-30" name="__codelineno-22-30" href="#__codelineno-22-30"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"判断参数为e时转换成true"</span><span class="p">);</span>
</span><span id="__span-22-31"><a id="__codelineno-22-31" name="__codelineno-22-31" href="#__codelineno-22-31"></a><span class="w"> </span><span class="p">}</span><span class="c1">//无输出 </span>
</span><span id="__span-22-32"><a id="__codelineno-22-32" name="__codelineno-22-32" href="#__codelineno-22-32"></a><span class="w"> </span><span class="k">if</span><span class="p">(</span><span class="kc">null</span><span class="p">){</span>
</span><span id="__span-22-33"><a id="__codelineno-22-33" name="__codelineno-22-33" href="#__codelineno-22-33"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"判断参数为null时转换成true"</span><span class="p">);</span>
</span><span id="__span-22-34"><a id="__codelineno-22-34" name="__codelineno-22-34" href="#__codelineno-22-34"></a><span class="w"> </span><span class="p">}</span><span class="c1">//无输出</span>
</span><span id="__span-22-35"><a id="__codelineno-22-35" name="__codelineno-22-35" href="#__codelineno-22-35"></a><span class="w"> </span><span class="k">if</span><span class="p">(</span><span class="kc">undefined</span><span class="p">){</span>
</span><span id="__span-22-36"><a id="__codelineno-22-36" name="__codelineno-22-36" href="#__codelineno-22-36"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"判断参数为undefined时转换成true"</span><span class="p">);</span>
</span><span id="__span-22-37"><a id="__codelineno-22-37" name="__codelineno-22-37" href="#__codelineno-22-37"></a><span class="w"> </span><span class="p">}</span><span class="c1">//无输出</span>
</span></code></pre></div>
<h4 id="136">1.3.6流程控制语句<a class="headerlink" href="#136" title="Permanent link">¶</a></h4>
<p>JavaScript中的流程控制语句，与Java中的流程控制语句基本语法都是完全一致的，如下</p>
<ul>
<li>if </li>
<li>switch</li>
<li>for</li>
<li>while</li>
<li>dowhile</li>
</ul>
<p>水仙花数代码：</p>
<div class="highlight"><pre><span></span><code><span id="__span-23-1"><a id="__codelineno-23-1" name="__codelineno-23-1" href="#__codelineno-23-1"></a><span class="w"> </span><span class="c1">//打印水仙花数，</span>
</span><span id="__span-23-2"><a id="__codelineno-23-2" name="__codelineno-23-2" href="#__codelineno-23-2"></a><span class="w"> </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">let</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="mf">100</span><span class="p">;</span><span class="nx">i</span><span class="o"><=</span><span class="mf">999</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">){</span>
</span><span id="__span-23-3"><a id="__codelineno-23-3" name="__codelineno-23-3" href="#__codelineno-23-3"></a><span class="w"> </span><span class="kd">let</span><span class="w"> </span><span class="nx">b</span><span class="o">=</span><span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">i</span><span class="o">/</span><span class="mf">100</span><span class="o">%</span><span class="mf">10</span><span class="p">);</span>
</span><span id="__span-23-4"><a id="__codelineno-23-4" name="__codelineno-23-4" href="#__codelineno-23-4"></a><span class="w"> </span><span class="kd">let</span><span class="w"> </span><span class="nx">s</span><span class="o">=</span><span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">i</span><span class="o">/</span><span class="mf">10</span><span class="o">%</span><span class="mf">10</span><span class="p">);</span>
</span><span id="__span-23-5"><a id="__codelineno-23-5" name="__codelineno-23-5" href="#__codelineno-23-5"></a><span class="w"> </span><span class="kd">let</span><span class="w"> </span><span class="nx">g</span><span class="o">=</span><span class="nx">i</span><span class="o">%</span><span class="mf">10</span><span class="p">;</span>
</span><span id="__span-23-6"><a id="__codelineno-23-6" name="__codelineno-23-6" href="#__codelineno-23-6"></a><span class="w"> </span><span class="kd">let</span><span class="w"> </span><span class="nx">result</span><span class="o">=</span><span class="nx">b</span><span class="o">*</span><span class="nx">b</span><span class="o">*</span><span class="nx">b</span><span class="o">+</span><span class="nx">s</span><span class="o">*</span><span class="nx">s</span><span class="o">*</span><span class="nx">s</span><span class="o">+</span><span class="nx">g</span><span class="o">*</span><span class="nx">g</span><span class="o">*</span><span class="nx">g</span><span class="p">;</span>
</span><span id="__span-23-7"><a id="__codelineno-23-7" name="__codelineno-23-7" href="#__codelineno-23-7"></a><span class="w"> </span><span class="c1">//console.log(b+"--"+s+"--"+g+"--")</span>
</span><span id="__span-23-8"><a id="__codelineno-23-8" name="__codelineno-23-8" href="#__codelineno-23-8"></a><span class="w"> </span><span class="k">if</span><span class="p">(</span><span class="nx">i</span><span class="o">===</span><span class="nx">result</span><span class="w"> </span><span class="p">){</span>
</span><span id="__span-23-9"><a id="__codelineno-23-9" name="__codelineno-23-9" href="#__codelineno-23-9"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"本次水仙花数是["</span><span class="o">+</span><span class="nx">result</span><span class="o">+</span><span class="s2">"]~"</span><span class="p">);</span>
</span><span id="__span-23-10"><a id="__codelineno-23-10" name="__codelineno-23-10" href="#__codelineno-23-10"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-23-11"><a id="__codelineno-23-11" name="__codelineno-23-11" href="#__codelineno-23-11"></a><span class="w"> </span><span class="p">}</span>
</span></code></pre></div>
<p>注意事项：</p>
<p>编写js代码时，要时刻注意与java不完全一样，比如两整数相除，得到结果不一定是整数。</p>
<p><font color='blue'>Math的方法，Math.floor的作用？</font></p>
<h3 id="14js">1.4JS函数★<a class="headerlink" href="#14js" title="Permanent link">¶</a></h3>
<h4 id="141">1.4.1定义格式<a class="headerlink" href="#141" title="Permanent link">¶</a></h4>
<p>介绍：函数（方法）是被设计为指定特定任务的代码块</p>
<p>定义：js函数通过function关键字进行定义，语法为</p>
<div class="highlight"><pre><span></span><code><span id="__span-24-1"><a id="__codelineno-24-1" name="__codelineno-24-1" href="#__codelineno-24-1"></a><span class="kd">function</span><span class="w"> </span><span class="nx">functionName</span><span class="p">(</span><span class="nx">参数1</span><span class="p">,</span><span class="nx">参数2</span><span class="p">...){}</span>
</span></code></pre></div>
<p>定义方式二 （匿名函数用的比较多）</p>
<div class="highlight"><pre><span></span><code><span id="__span-25-1"><a id="__codelineno-25-1" name="__codelineno-25-1" href="#__codelineno-25-1"></a><span class="kd">var</span><span class="w"> </span><span class="nx">functionName</span><span class="w"> </span><span class="o">=</span><span class="kd">function</span><span class="p">(</span><span class="nx">参数1</span><span class="p">,</span><span class="nx">参数2</span><span class="p">){</span>
</span><span id="__span-25-2"><a id="__codelineno-25-2" name="__codelineno-25-2" href="#__codelineno-25-2"></a><span class="w"> </span><span class="c1">//要执行的代码</span>
</span><span id="__span-25-3"><a id="__codelineno-25-3" name="__codelineno-25-3" href="#__codelineno-25-3"></a><span class="p">}</span><span class="w"> </span>
</span></code></pre></div>
<p>注意事项：</p>
<p>因为JavaScrpt是弱类型语言，所以形式参数定义时不需要写数据类型<font color='blue'>形式参数</font></p>
<div class="highlight"><pre><span></span><code><span id="__span-26-1"><a id="__codelineno-26-1" name="__codelineno-26-1" href="#__codelineno-26-1"></a><span class="kd">function</span><span class="w"> </span><span class="nx">add</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span><span class="w"> </span><span class="nx">b</span><span class="p">){</span>
</span><span id="__span-26-2"><a id="__codelineno-26-2" name="__codelineno-26-2" href="#__codelineno-26-2"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">a</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">b</span><span class="p">;</span>
</span><span id="__span-26-3"><a id="__codelineno-26-3" name="__codelineno-26-3" href="#__codelineno-26-3"></a><span class="p">}</span>
</span></code></pre></div>
<p>相较于Java，返回值也不需要定义类型，可以在函数内部直接使用return返回即可</p>
<h4 id="142">1.4.2函数调用<a class="headerlink" href="#142" title="Permanent link">¶</a></h4>
<div class="highlight"><pre><span></span><code><span id="__span-27-1"><a id="__codelineno-27-1" name="__codelineno-27-1" href="#__codelineno-27-1"></a><span class="kd">let</span><span class="w"> </span><span class="nx">result</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">add</span><span class="p">(</span><span class="mf">10</span><span class="p">,</span><span class="mf">20</span><span class="p">);</span>
</span></code></pre></div>
<p>注意事项：</p>
<ul>
<li>JavaScript中，函数调用可以传递任意个参数</li>
<li>例如<code>let result =add(1,2,3);</code>是将1，2分别给了变量a，b，而第三个参数<code>3</code>没有变量接收</li>
<li>当调用方法传递的参数个数小于实际要求的个数的时候，形参默认是undefined</li>
</ul>
<p>代码：</p>
<div class="highlight"><pre><span></span><code><span id="__span-28-1"><a id="__codelineno-28-1" name="__codelineno-28-1" href="#__codelineno-28-1"></a><span class="cm">/*定义一个方法：方法可以返回任意两个数据之间偶数的个数*/</span>
</span><span id="__span-28-2"><a id="__codelineno-28-2" name="__codelineno-28-2" href="#__codelineno-28-2"></a><span class="kd">function</span><span class="w"> </span><span class="nx">getEvenNumberCount1</span><span class="p">(</span><span class="nx">minValue</span><span class="p">,</span><span class="nx">maxValue</span><span class="p">){</span>
</span><span id="__span-28-3"><a id="__codelineno-28-3" name="__codelineno-28-3" href="#__codelineno-28-3"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"minValue:"</span><span class="o">+</span><span class="nx">minValue</span><span class="o">+</span><span class="s2">"maxValue:"</span><span class="o">+</span><span class="nx">maxValue</span><span class="p">);</span>
</span><span id="__span-28-4"><a id="__codelineno-28-4" name="__codelineno-28-4" href="#__codelineno-28-4"></a><span class="w"> </span><span class="kd">let</span><span class="w"> </span><span class="nx">count</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="w"> </span><span class="p">;</span>
</span><span id="__span-28-5"><a id="__codelineno-28-5" name="__codelineno-28-5" href="#__codelineno-28-5"></a><span class="w"> </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">let</span><span class="w"> </span><span class="nx">i</span><span class="o">=</span><span class="nx">minValue</span><span class="p">;</span><span class="nx">i</span><span class="o"><=</span><span class="nx">maxValue</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">){</span>
</span><span id="__span-28-6"><a id="__codelineno-28-6" name="__codelineno-28-6" href="#__codelineno-28-6"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">i</span><span class="o">%</span><span class="mf">2</span><span class="o">==</span><span class="mf">0</span><span class="p">){</span>
</span><span id="__span-28-7"><a id="__codelineno-28-7" name="__codelineno-28-7" href="#__codelineno-28-7"></a><span class="w"> </span><span class="nx">count</span><span class="o">++</span><span class="p">;</span>
</span><span id="__span-28-8"><a id="__codelineno-28-8" name="__codelineno-28-8" href="#__codelineno-28-8"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-28-9"><a id="__codelineno-28-9" name="__codelineno-28-9" href="#__codelineno-28-9"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-28-10"><a id="__codelineno-28-10" name="__codelineno-28-10" href="#__codelineno-28-10"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">count</span><span class="p">;</span>
</span><span id="__span-28-11"><a id="__codelineno-28-11" name="__codelineno-28-11" href="#__codelineno-28-11"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-28-12"><a id="__codelineno-28-12" name="__codelineno-28-12" href="#__codelineno-28-12"></a><span class="kd">var</span><span class="w"> </span><span class="nx">evenNumberCount</span><span class="w"> </span><span class="o">=</span><span class="nx">getEvenNumberCount1</span><span class="p">(</span><span class="mf">12</span><span class="p">,</span><span class="mf">21</span><span class="p">);</span>
</span><span id="__span-28-13"><a id="__codelineno-28-13" name="__codelineno-28-13" href="#__codelineno-28-13"></a><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"12到21中的偶数有"</span><span class="o">+</span><span class="nx">evenNumberCount</span><span class="o">+</span><span class="s2">"个"</span><span class="p">);</span>
</span><span id="__span-28-14"><a id="__codelineno-28-14" name="__codelineno-28-14" href="#__codelineno-28-14"></a><span class="cm">/*定义一个匿名方法：方法可以返回任意两个数据之间偶数的个数*/</span>
</span><span id="__span-28-15"><a id="__codelineno-28-15" name="__codelineno-28-15" href="#__codelineno-28-15"></a><span class="kd">var</span><span class="w"> </span><span class="nx">getEvenNumberCount2</span><span class="o">=</span><span class="kd">function</span><span class="p">(</span><span class="nx">minValue</span><span class="p">,</span><span class="nx">maxValue</span><span class="p">){</span>
</span><span id="__span-28-16"><a id="__codelineno-28-16" name="__codelineno-28-16" href="#__codelineno-28-16"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"minValue:"</span><span class="o">+</span><span class="nx">minValue</span><span class="o">+</span><span class="s2">"maxValue:"</span><span class="o">+</span><span class="nx">maxValue</span><span class="p">);</span>
</span><span id="__span-28-17"><a id="__codelineno-28-17" name="__codelineno-28-17" href="#__codelineno-28-17"></a><span class="w"> </span><span class="kd">let</span><span class="w"> </span><span class="nx">count</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="w"> </span><span class="p">;</span>
</span><span id="__span-28-18"><a id="__codelineno-28-18" name="__codelineno-28-18" href="#__codelineno-28-18"></a><span class="w"> </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">let</span><span class="w"> </span><span class="nx">i</span><span class="o">=</span><span class="nx">minValue</span><span class="p">;</span><span class="nx">i</span><span class="o"><=</span><span class="nx">maxValue</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">){</span>
</span><span id="__span-28-19"><a id="__codelineno-28-19" name="__codelineno-28-19" href="#__codelineno-28-19"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">i</span><span class="o">%</span><span class="mf">2</span><span class="w"> </span><span class="o">==</span><span class="mf">0</span><span class="w"> </span><span class="p">){</span>
</span><span id="__span-28-20"><a id="__codelineno-28-20" name="__codelineno-28-20" href="#__codelineno-28-20"></a><span class="w"> </span><span class="nx">count</span><span class="o">++</span><span class="p">;</span>
</span><span id="__span-28-21"><a id="__codelineno-28-21" name="__codelineno-28-21" href="#__codelineno-28-21"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-28-22"><a id="__codelineno-28-22" name="__codelineno-28-22" href="#__codelineno-28-22"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-28-23"><a id="__codelineno-28-23" name="__codelineno-28-23" href="#__codelineno-28-23"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">count</span><span class="p">;</span>
</span><span id="__span-28-24"><a id="__codelineno-28-24" name="__codelineno-28-24" href="#__codelineno-28-24"></a><span class="p">}</span>
</span><span id="__span-28-25"><a id="__codelineno-28-25" name="__codelineno-28-25" href="#__codelineno-28-25"></a><span class="kd">var</span><span class="w"> </span><span class="nx">evenNumberCount</span><span class="w"> </span><span class="o">=</span><span class="nx">getEvenNumberCount2</span><span class="p">(</span><span class="mf">5</span><span class="p">,</span><span class="mf">18</span><span class="p">);</span>
</span><span id="__span-28-26"><a id="__codelineno-28-26" name="__codelineno-28-26" href="#__codelineno-28-26"></a><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"5到18中的偶数有"</span><span class="o">+</span><span class="nx">evenNumberCount</span><span class="o">+</span><span class="s2">"个"</span><span class="p">);</span>
</span><span id="__span-28-27"><a id="__codelineno-28-27" name="__codelineno-28-27" href="#__codelineno-28-27"></a><span class="c1">//当调用方法传递的参数小于实际要求的个数的时候</span>
</span><span id="__span-28-28"><a id="__codelineno-28-28" name="__codelineno-28-28" href="#__codelineno-28-28"></a><span class="nx">getEvenNumberCount1</span><span class="p">(</span><span class="mf">10</span><span class="p">);</span>
</span><span id="__span-28-29"><a id="__codelineno-28-29" name="__codelineno-28-29" href="#__codelineno-28-29"></a><span class="c1">//输出结果：minValue:10maxValue:undefined</span>
</span></code></pre></div>
<h3 id="15js">1.5JS对象★<a class="headerlink" href="#15js" title="Permanent link">¶</a></h3>
<h4 id="151">1.5.1内置对象<a class="headerlink" href="#151" title="Permanent link">¶</a></h4>
<p>（Math Date等常用工具类js中都有）</p>
<h5 id="1511array">1.5.1.1Array对象<a class="headerlink" href="#1511array" title="Permanent link">¶</a></h5>
<p>既具备数组的特性也具有集合的特性</p>
<p>Array对象是用来定义数组的，常见的语法格式有两种：</p>
<p>方式1：</p>
<div class="highlight"><pre><span></span><code><span id="__span-29-1"><a id="__codelineno-29-1" name="__codelineno-29-1" href="#__codelineno-29-1"></a><span class="kd">var</span><span class="w"> </span><span class="nx">变量名</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="p">(</span><span class="nx">元素列表</span><span class="p">);</span>
</span><span id="__span-29-2"><a id="__codelineno-29-2" name="__codelineno-29-2" href="#__codelineno-29-2"></a><span class="kd">var</span><span class="w"> </span><span class="nx">arr</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="p">(</span><span class="mf">1</span><span class="p">,</span><span class="mf">2</span><span class="p">,</span><span class="mf">3</span><span class="p">,</span><span class="mf">4</span><span class="p">);</span>
</span></code></pre></div>
<p>方式2：</p>
<div class="highlight"><pre><span></span><code><span id="__span-30-1"><a id="__codelineno-30-1" name="__codelineno-30-1" href="#__codelineno-30-1"></a><span class="kd">var</span><span class="w"> </span><span class="nx">变量名</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="nx">元素列表</span><span class="p">];</span>
</span><span id="__span-30-2"><a id="__codelineno-30-2" name="__codelineno-30-2" href="#__codelineno-30-2"></a><span class="kd">var</span><span class="w"> </span><span class="nx">arr</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="mf">1</span><span class="p">,</span><span class="mf">2</span><span class="p">,</span><span class="mf">3</span><span class="p">,</span><span class="mf">4</span><span class="p">];</span>
</span></code></pre></div>
<p>访问数组的和Java一样，通过索引访问</p>
<div class="highlight"><pre><span></span><code><span id="__span-31-1"><a id="__codelineno-31-1" name="__codelineno-31-1" href="#__codelineno-31-1"></a>arr[10] = 值;
</span><span id="__span-31-2"><a id="__codelineno-31-2" name="__codelineno-31-2" href="#__codelineno-31-2"></a>arr[10] = "Hello";
</span></code></pre></div>
<p>特点：JavaScript中的数组相当于Java中的集合，也具备一些数组的特性。数组的长度是可以变化的，而且JavaScript是弱类型语言，所以数组中可以存储任意数据类型的值。</p>
<p>属性：</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>length</td>
<td>设置或返回数组中元素的数量</td>
</tr>
</tbody>
</table>
<p>方法：</p>
<table>
<thead>
<tr>
<th>方法</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>foreach（）</td>
<td>遍历数组中的每个有值的元素，并调用一次传入的函数？？？</td>
</tr>
<tr>
<td>push（）</td>
<td>将新元素添加到数组的末尾，并返回新的长度</td>
</tr>
<tr>
<td>splice（）</td>
<td>从数组中删除元素</td>
</tr>
</tbody>
</table>
<div class="highlight"><pre><span></span><code><span id="__span-32-1"><a id="__codelineno-32-1" name="__codelineno-32-1" href="#__codelineno-32-1"></a><span class="c1">//1.定义数组（两种方式）~1[new array传递参数]</span>
</span><span id="__span-32-2"><a id="__codelineno-32-2" name="__codelineno-32-2" href="#__codelineno-32-2"></a><span class="kd">var</span><span class="w"> </span><span class="nx">nameArray</span><span class="w"> </span><span class="o">=</span><span class="ow">new</span><span class="w"> </span><span class="nb">Array</span><span class="w"> </span><span class="p">(</span><span class="s2">"李狗蛋"</span><span class="p">,</span><span class="s2">"张二狗"</span><span class="p">,</span><span class="s2">"刘铁柱"</span><span class="p">);</span>
</span><span id="__span-32-3"><a id="__codelineno-32-3" name="__codelineno-32-3" href="#__codelineno-32-3"></a><span class="c1">//2.定义数组的（两种方式）~2[元素列表]</span>
</span><span id="__span-32-4"><a id="__codelineno-32-4" name="__codelineno-32-4" href="#__codelineno-32-4"></a><span class="kd">var</span><span class="w"> </span><span class="nx">ageArray</span><span class="w"> </span><span class="o">=</span><span class="p">[</span><span class="mf">21</span><span class="p">,</span><span class="mf">22</span><span class="p">,</span><span class="mf">26</span><span class="p">];</span>
</span><span id="__span-32-5"><a id="__codelineno-32-5" name="__codelineno-32-5" href="#__codelineno-32-5"></a><span class="c1">//JavaScript的Array对象既具备数组的特性（可以通过索引访问元素）也具备集合的特性（调用方法）</span>
</span><span id="__span-32-6"><a id="__codelineno-32-6" name="__codelineno-32-6" href="#__codelineno-32-6"></a><span class="c1">//(1)Array的属性length：用于获取数组的元素个数=>遍历数组</span>
</span><span id="__span-32-7"><a id="__codelineno-32-7" name="__codelineno-32-7" href="#__codelineno-32-7"></a><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"1==========================="</span><span class="p">);</span>
</span><span id="__span-32-8"><a id="__codelineno-32-8" name="__codelineno-32-8" href="#__codelineno-32-8"></a><span class="k">for</span><span class="p">(</span><span class="kd">let</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="mf">0</span><span class="p">;</span><span class="nx">i</span><span class="o"><</span><span class="nx">nameArray</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">){</span>
</span><span id="__span-32-9"><a id="__codelineno-32-9" name="__codelineno-32-9" href="#__codelineno-32-9"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"数组中"</span><span class="o">+</span><span class="nx">i</span><span class="o">+</span><span class="s2">"索引的元素是："</span><span class="o">+</span><span class="nx">nameArray</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
</span><span id="__span-32-10"><a id="__codelineno-32-10" name="__codelineno-32-10" href="#__codelineno-32-10"></a><span class="p">}</span>
</span><span id="__span-32-11"><a id="__codelineno-32-11" name="__codelineno-32-11" href="#__codelineno-32-11"></a><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"2==========================="</span><span class="p">);</span>
</span><span id="__span-32-12"><a id="__codelineno-32-12" name="__codelineno-32-12" href="#__codelineno-32-12"></a><span class="c1">//(2)Array的长度可以发生改变，通过push方法可以添加元素到数组中</span>
</span><span id="__span-32-13"><a id="__codelineno-32-13" name="__codelineno-32-13" href="#__codelineno-32-13"></a><span class="nx">nameArray</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s2">"王小花"</span><span class="p">);</span>
</span><span id="__span-32-14"><a id="__codelineno-32-14" name="__codelineno-32-14" href="#__codelineno-32-14"></a><span class="c1">//(3)调用foreach方法,forEach方法需要传入一个回调函数，传递一个消费元素的逻辑函数进去，第三个参数如果是本数组可以省略</span>
</span><span id="__span-32-15"><a id="__codelineno-32-15" name="__codelineno-32-15" href="#__codelineno-32-15"></a><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"3==========================="</span><span class="p">);</span>
</span><span id="__span-32-16"><a id="__codelineno-32-16" name="__codelineno-32-16" href="#__codelineno-32-16"></a><span class="nx">nameArray</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span><span class="nx">index</span><span class="p">){</span>
</span><span id="__span-32-17"><a id="__codelineno-32-17" name="__codelineno-32-17" href="#__codelineno-32-17"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"value"</span><span class="o">+</span><span class="nx">value</span><span class="o">+</span><span class="s2">"index"</span><span class="o">+</span><span class="nx">index</span><span class="p">);</span>
</span><span id="__span-32-18"><a id="__codelineno-32-18" name="__codelineno-32-18" href="#__codelineno-32-18"></a><span class="p">});</span>
</span><span id="__span-32-19"><a id="__codelineno-32-19" name="__codelineno-32-19" href="#__codelineno-32-19"></a><span class="c1">//(4)调用foreach方法，全参</span>
</span><span id="__span-32-20"><a id="__codelineno-32-20" name="__codelineno-32-20" href="#__codelineno-32-20"></a><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"4==========================="</span><span class="p">);</span>
</span><span id="__span-32-21"><a id="__codelineno-32-21" name="__codelineno-32-21" href="#__codelineno-32-21"></a><span class="nx">nameArray</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span><span class="nx">index</span><span class="p">,</span><span class="nx">nameArray</span><span class="p">){</span>
</span><span id="__span-32-22"><a id="__codelineno-32-22" name="__codelineno-32-22" href="#__codelineno-32-22"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"value"</span><span class="o">+</span><span class="nx">value</span><span class="o">+</span><span class="s2">"index"</span><span class="o">+</span><span class="nx">index</span><span class="p">);</span>
</span><span id="__span-32-23"><a id="__codelineno-32-23" name="__codelineno-32-23" href="#__codelineno-32-23"></a><span class="p">});</span>
</span><span id="__span-32-24"><a id="__codelineno-32-24" name="__codelineno-32-24" href="#__codelineno-32-24"></a><span class="c1">//(5)调用forEach使用箭头函数</span>
</span><span id="__span-32-25"><a id="__codelineno-32-25" name="__codelineno-32-25" href="#__codelineno-32-25"></a><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"5==========================="</span><span class="p">);</span>
</span><span id="__span-32-26"><a id="__codelineno-32-26" name="__codelineno-32-26" href="#__codelineno-32-26"></a><span class="nx">nameArray</span><span class="p">.</span><span class="nx">forEach</span><span class="p">((</span><span class="nx">value</span><span class="p">,</span><span class="nx">index</span><span class="p">)</span><span class="w"> </span><span class="p">=></span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-32-27"><a id="__codelineno-32-27" name="__codelineno-32-27" href="#__codelineno-32-27"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"value"</span><span class="o">+</span><span class="nx">value</span><span class="o">+</span><span class="s2">"index"</span><span class="o">+</span><span class="nx">index</span><span class="p">);</span>
</span><span id="__span-32-28"><a id="__codelineno-32-28" name="__codelineno-32-28" href="#__codelineno-32-28"></a><span class="p">});</span>
</span></code></pre></div>
<p>补充：箭头函数（ES6）:</p>
<p>用来简化函数定义语法的。具体形式为<code>(...)=>{...}</code>，如果要给箭头函数起名：<code>var xxx=(...)=>{...}</code></p>
<h5 id="1512string">1.5.1.2String对象<a class="headerlink" href="#1512string" title="Permanent link">¶</a></h5>
<p>String字符串对象的创建方式有两种：</p>
<p>方式1：</p>
<div class="highlight"><pre><span></span><code><span id="__span-33-1"><a id="__codelineno-33-1" name="__codelineno-33-1" href="#__codelineno-33-1"></a><span class="kd">var</span><span class="w"> </span><span class="nx">变量名</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">String</span><span class="p">(</span><span class="s2">"..."</span><span class="p">);</span>
</span><span id="__span-33-2"><a id="__codelineno-33-2" name="__codelineno-33-2" href="#__codelineno-33-2"></a><span class="kd">var</span><span class="w"> </span><span class="nx">str</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">String</span><span class="p">(</span><span class="s2">"Hello World"</span><span class="p">);</span>
</span></code></pre></div>
<p>方式2：</p>
<div class="highlight"><pre><span></span><code><span id="__span-34-1"><a id="__codelineno-34-1" name="__codelineno-34-1" href="#__codelineno-34-1"></a><span class="kd">var</span><span class="w"> </span><span class="nx">变量名</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"..."</span><span class="p">;</span>
</span><span id="__span-34-2"><a id="__codelineno-34-2" name="__codelineno-34-2" href="#__codelineno-34-2"></a><span class="kd">var</span><span class="w"> </span><span class="nx">str</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"Hello World"</span><span class="p">;</span>
</span></code></pre></div>
<p>特点：</p>
<p>JavaScript中的字符串的创建和Java一样都是由常量池的，所以建议第二种方式进行创建。</p>
<p>同JAVA一样，String都是不可变的，操作内容也要接受结果.</p>
<div class="highlight"><pre><span></span><code><span id="__span-35-1"><a id="__codelineno-35-1" name="__codelineno-35-1" href="#__codelineno-35-1"></a><span class="kd">var</span><span class="w"> </span><span class="nx">resultPassword</span><span class="w"> </span><span class="o">=</span><span class="nx">password</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span><span class="mf">5</span><span class="p">);</span>
</span></code></pre></div>
<p>属性：</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>length</td>
<td>字符串的长度</td>
</tr>
</tbody>
</table>
<p>方法：</p>
<table>
<thead>
<tr>
<th>方法</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>charAt()</td>
<td>返回在指定位置的字符串</td>
</tr>
<tr>
<td>indexOf()</td>
<td>检索子字符串第一次在字符串中出现的索引</td>
</tr>
<tr>
<td>trim()</td>
<td>去掉字符串两边的空格</td>
</tr>
<tr>
<td>substring()</td>
<td>提取两个指定索引号之间的字符（包头不包尾）</td>
</tr>
</tbody>
</table>
<p>代码：</p>
<div class="highlight"><pre><span></span><code><span id="__span-36-1"><a id="__codelineno-36-1" name="__codelineno-36-1" href="#__codelineno-36-1"></a><span class="c1">//String第一种声明方式 new String("") 堆</span>
</span><span id="__span-36-2"><a id="__codelineno-36-2" name="__codelineno-36-2" href="#__codelineno-36-2"></a><span class="kd">var</span><span class="w"> </span><span class="nx">username</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">String</span><span class="p">(</span><span class="s2">"张二狗"</span><span class="p">);</span>
</span><span id="__span-36-3"><a id="__codelineno-36-3" name="__codelineno-36-3" href="#__codelineno-36-3"></a><span class="c1">//String第二种声明方式 = "初始化值" 池</span>
</span><span id="__span-36-4"><a id="__codelineno-36-4" name="__codelineno-36-4" href="#__codelineno-36-4"></a><span class="kd">var</span><span class="w"> </span><span class="nx">password</span><span class="w"> </span><span class="o">=</span><span class="s2">"123456789"</span><span class="p">;</span>
</span><span id="__span-36-5"><a id="__codelineno-36-5" name="__codelineno-36-5" href="#__codelineno-36-5"></a><span class="c1">//length:与Java不同的是，JavaScript中的字符穿的长度要通过length属性获取，而不是length方法</span>
</span><span id="__span-36-6"><a id="__codelineno-36-6" name="__codelineno-36-6" href="#__codelineno-36-6"></a><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"password长度是:"</span><span class="o">+</span><span class="nx">password</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span>
</span><span id="__span-36-7"><a id="__codelineno-36-7" name="__codelineno-36-7" href="#__codelineno-36-7"></a><span class="c1">//charAt(index):与Java不同的是，charAt返回的是字符串类型，在Java中返回是字符类型</span>
</span><span id="__span-36-8"><a id="__codelineno-36-8" name="__codelineno-36-8" href="#__codelineno-36-8"></a><span class="k">for</span><span class="p">(</span><span class="kd">var</span><span class="w"> </span><span class="nx">i</span><span class="o">=</span><span class="mf">0</span><span class="p">;</span><span class="nx">i</span><span class="o"><</span><span class="nx">username</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">){</span>
</span><span id="__span-36-9"><a id="__codelineno-36-9" name="__codelineno-36-9" href="#__codelineno-36-9"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">username</span><span class="p">.</span><span class="nx">charAt</span><span class="p">(</span><span class="nx">i</span><span class="p">));</span>
</span><span id="__span-36-10"><a id="__codelineno-36-10" name="__codelineno-36-10" href="#__codelineno-36-10"></a><span class="p">}</span>
</span><span id="__span-36-11"><a id="__codelineno-36-11" name="__codelineno-36-11" href="#__codelineno-36-11"></a><span class="c1">//indexOf("")判断参数在字符串中第一出现的索引，如果没有则返回-1</span>
</span><span id="__span-36-12"><a id="__codelineno-36-12" name="__codelineno-36-12" href="#__codelineno-36-12"></a><span class="kd">var</span><span class="w"> </span><span class="nx">index</span><span class="o">=</span><span class="nx">password</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">"456"</span><span class="p">);</span>
</span><span id="__span-36-13"><a id="__codelineno-36-13" name="__codelineno-36-13" href="#__codelineno-36-13"></a><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"456第一次在字符串中出现的索引是:"</span><span class="o">+</span><span class="nx">index</span><span class="p">);</span><span class="c1">//结果为3</span>
</span><span id="__span-36-14"><a id="__codelineno-36-14" name="__codelineno-36-14" href="#__codelineno-36-14"></a><span class="c1">//trim():去掉两边的空格，实际开发使用比较多，如用户不小心多输入了一个空格，（String在JavaScript中也是不可变的，操作内容也要接受结果）</span>
</span><span id="__span-36-15"><a id="__codelineno-36-15" name="__codelineno-36-15" href="#__codelineno-36-15"></a><span class="kd">var</span><span class="w"> </span><span class="nx">newPassword</span><span class="o">=</span><span class="nx">password</span><span class="p">.</span><span class="nx">trim</span><span class="p">();</span>
</span><span id="__span-36-16"><a id="__codelineno-36-16" name="__codelineno-36-16" href="#__codelineno-36-16"></a><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"newPassword的长度是:"</span><span class="o">+</span><span class="nx">newPassword</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span><span class="c1">//结果为9</span>
</span><span id="__span-36-17"><a id="__codelineno-36-17" name="__codelineno-36-17" href="#__codelineno-36-17"></a><span class="c1">//subString(start,end)：截取start索引到到end索引之间的内容</span>
</span><span id="__span-36-18"><a id="__codelineno-36-18" name="__codelineno-36-18" href="#__codelineno-36-18"></a><span class="kd">var</span><span class="w"> </span><span class="nx">resultPassword</span><span class="w"> </span><span class="o">=</span><span class="nx">password</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span><span class="mf">5</span><span class="p">);</span>
</span><span id="__span-36-19"><a id="__codelineno-36-19" name="__codelineno-36-19" href="#__codelineno-36-19"></a><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"resultPassword:"</span><span class="o">+</span><span class="nx">resultPassword</span><span class="p">);</span><span class="c1">//结果为12345</span>
</span></code></pre></div>
<p><font color='blue'>js也有吗？？</font></p>
<h5 id="1513json">1.5.1.3JSON★★<a class="headerlink" href="#1513json" title="Permanent link">¶</a></h5>
<p>JSON对象（JavaScript Object Notation）：JavaScript对象标记法。是通过JavaScript标记法书写的文本，是以后开发中<font color='red'>前台与后台的进行数据交互的主要的承载载体</font>本质上就是一个具备指定格式的字符串，通过指定格式可以更加小巧，也更加精准的描述数据。</p>
<p>XML格式的劣势：</p>
<ul>
<li>标签需要书写双份，占用带宽，浪费资源</li>
<li>解析繁琐</li>
</ul>
<p>JSON描述简单对象</p>
<div class="highlight"><pre><span></span><code><span id="__span-37-1"><a id="__codelineno-37-1" name="__codelineno-37-1" href="#__codelineno-37-1"></a><span class="p">{</span><span class="nt">"KEY"</span><span class="p">:</span><span class="s2">"VALUE"</span><span class="p">,</span><span class="nt">"KEY"</span><span class="p">:</span><span class="s2">"VALUE"</span><span class="p">,</span><span class="nt">"KEY"</span><span class="p">:</span><span class="s2">"VALUE"</span><span class="p">}</span>
</span></code></pre></div>
<ul>
<li><strong>KEY必须使用引号且是双引号标记，value可以是任意数据类型</strong>。</li>
<li>VALUE支持的类型有 字符串(加"") 数字 布尔值 NULL 对象 数组</li>
</ul>
<p>JSON描述简单集合</p>
<div class="highlight"><pre><span></span><code><span id="__span-38-1"><a id="__codelineno-38-1" name="__codelineno-38-1" href="#__codelineno-38-1"></a><span class="p">[</span><span class="err">VALUE</span><span class="p">,</span><span class="err">VALUE</span><span class="p">,</span><span class="err">VALUE</span><span class="p">]</span>
</span></code></pre></div>
<p>JSON描述复杂数据</p>
<p>简单对象中嵌套简单对象或者简单集合</p>
<p>JSON字符串转为JavaScript对象</p>
<div class="highlight"><pre><span></span><code><span id="__span-39-1"><a id="__codelineno-39-1" name="__codelineno-39-1" href="#__codelineno-39-1"></a><span class="kd">var</span><span class="w"> </span><span class="nx">isObject</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">userStr</span><span class="p">);</span>
</span></code></pre></div>
<p>JavaScript对象转为JSON字符</p>
<div class="highlight"><pre><span></span><code><span id="__span-40-1"><a id="__codelineno-40-1" name="__codelineno-40-1" href="#__codelineno-40-1"></a><span class="kd">var</span><span class="w"> </span><span class="nx">jsonStr</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">jsObject</span><span class="p">)</span>
</span></code></pre></div>
<p>代码1</p>
<div class="highlight"><pre><span></span><code><span id="__span-41-1"><a id="__codelineno-41-1" name="__codelineno-41-1" href="#__codelineno-41-1"></a><span class="kd">var</span><span class="w"> </span><span class="nx">jsonstr</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}'</span><span class="p">;</span>
</span><span id="__span-41-2"><a id="__codelineno-41-2" name="__codelineno-41-2" href="#__codelineno-41-2"></a><span class="nx">alert</span><span class="p">(</span><span class="nx">jsonstr</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span><span class="c1">//结果：undefined。原因：此时只是个JSON字符串</span>
</span></code></pre></div>
<div class="highlight"><pre><span></span><code><span id="__span-42-1"><a id="__codelineno-42-1" name="__codelineno-42-1" href="#__codelineno-42-1"></a><span class="kd">var</span><span class="w"> </span><span class="nx">obj</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">jsonstr</span><span class="p">);</span>
</span><span id="__span-42-2"><a id="__codelineno-42-2" name="__codelineno-42-2" href="#__codelineno-42-2"></a><span class="nx">alert</span><span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span><span class="c1">//结果：Tom。可以识别JSON对象</span>
</span></code></pre></div>
<div class="highlight"><pre><span></span><code><span id="__span-43-1"><a id="__codelineno-43-1" name="__codelineno-43-1" href="#__codelineno-43-1"></a><span class="nx">alert</span><span class="p">(</span><span class="nb">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">obj</span><span class="p">));</span><span class="c1">//结果{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}</span>
</span></code></pre></div>
<p>代码2</p>
<div class="highlight"><pre><span></span><code><span id="__span-44-1"><a id="__codelineno-44-1" name="__codelineno-44-1" href="#__codelineno-44-1"></a><span class="kd">var</span><span class="w"> </span><span class="nx">jsonStudentStr</span><span class="w"> </span><span class="o">=</span>
</span><span id="__span-44-2"><a id="__codelineno-44-2" name="__codelineno-44-2" href="#__codelineno-44-2"></a><span class="w"> </span><span class="s1">'{"name":"刘铁柱","classroom":"JavaEE410","score":82,"flag":true}'</span><span class="p">;</span>
</span><span id="__span-44-3"><a id="__codelineno-44-3" name="__codelineno-44-3" href="#__codelineno-44-3"></a><span class="kd">var</span><span class="w"> </span><span class="nx">jsonStudentObj</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">jsonStudentStr</span><span class="p">);</span>
</span><span id="__span-44-4"><a id="__codelineno-44-4" name="__codelineno-44-4" href="#__codelineno-44-4"></a><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">jsonStudentObj</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span><span class="c1">//结果：刘铁柱</span>
</span><span id="__span-44-5"><a id="__codelineno-44-5" name="__codelineno-44-5" href="#__codelineno-44-5"></a><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">jsonStudentStr</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span><span class="c1">//结果：undefined</span>
</span></code></pre></div>
<h4 id="152">1.5.2自定义对象<a class="headerlink" href="#152" title="Permanent link">¶</a></h4>
<p>JavaScript的自定义对象和JAVA中的自定义对象十分相似，语法格式：</p>
<div class="highlight"><pre><span></span><code><span id="__span-45-1"><a id="__codelineno-45-1" name="__codelineno-45-1" href="#__codelineno-45-1"></a><span class="kd">var</span><span class="w"> </span><span class="nx">对象名</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-45-2"><a id="__codelineno-45-2" name="__codelineno-45-2" href="#__codelineno-45-2"></a><span class="w"> </span><span class="nx">属性名1</span><span class="o">:</span><span class="nx">属性值1</span><span class="p">,</span>
</span><span id="__span-45-3"><a id="__codelineno-45-3" name="__codelineno-45-3" href="#__codelineno-45-3"></a><span class="w"> </span><span class="nx">属性名2</span><span class="o">:</span><span class="nx">属性值2</span><span class="p">,</span>
</span><span id="__span-45-4"><a id="__codelineno-45-4" name="__codelineno-45-4" href="#__codelineno-45-4"></a><span class="w"> </span><span class="nx">属性名3</span><span class="o">:</span><span class="nx">属性值3</span><span class="p">,</span>
</span><span id="__span-45-5"><a id="__codelineno-45-5" name="__codelineno-45-5" href="#__codelineno-45-5"></a><span class="w"> </span><span class="nx">函数名称</span><span class="err">：</span><span class="kd">function</span><span class="p">(</span><span class="nx">形参列表</span><span class="p">){}</span>
</span><span id="__span-45-6"><a id="__codelineno-45-6" name="__codelineno-45-6" href="#__codelineno-45-6"></a><span class="p">}</span>
</span></code></pre></div>
<p>Java中的类在JavaScript中被称为结构体</p>
<p>我们可以通过如下语法调用属性：</p>
<div class="highlight"><pre><span></span><code><span id="__span-46-1"><a id="__codelineno-46-1" name="__codelineno-46-1" href="#__codelineno-46-1"></a><span class="nx">对象名</span><span class="p">.</span><span class="nx">属性名</span>
</span></code></pre></div>
<p>通过如下语法调用函数：</p>
<div class="highlight"><pre><span></span><code><span id="__span-47-1"><a id="__codelineno-47-1" name="__codelineno-47-1" href="#__codelineno-47-1"></a><span class="nx">对象名</span><span class="p">.</span><span class="nx">函数名</span><span class="p">()</span>
</span></code></pre></div>
<p>代码：</p>
<div class="highlight"><pre><span></span><code><span id="__span-48-1"><a id="__codelineno-48-1" name="__codelineno-48-1" href="#__codelineno-48-1"></a><span class="kd">var</span><span class="w"> </span><span class="nx">student</span><span class="o">=</span><span class="p">{</span>
</span><span id="__span-48-2"><a id="__codelineno-48-2" name="__codelineno-48-2" href="#__codelineno-48-2"></a><span class="w"> </span><span class="c1">//自定义属性的方式 属性名：属性值,</span>
</span><span id="__span-48-3"><a id="__codelineno-48-3" name="__codelineno-48-3" href="#__codelineno-48-3"></a><span class="w"> </span><span class="c1">//name在JS中是一个比较特殊的变量？特殊在何处？其他的不加this也可以访问，但是name不行。</span>
</span><span id="__span-48-4"><a id="__codelineno-48-4" name="__codelineno-48-4" href="#__codelineno-48-4"></a><span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s2">"张明号"</span><span class="p">,</span>
</span><span id="__span-48-5"><a id="__codelineno-48-5" name="__codelineno-48-5" href="#__codelineno-48-5"></a><span class="w"> </span><span class="nx">classroom</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="s2">"JavaEE410期"</span><span class="p">,</span>
</span><span id="__span-48-6"><a id="__codelineno-48-6" name="__codelineno-48-6" href="#__codelineno-48-6"></a><span class="w"> </span><span class="nx">score</span><span class="w"> </span><span class="o">:</span><span class="s2">"80"</span><span class="p">,</span>
</span><span id="__span-48-7"><a id="__codelineno-48-7" name="__codelineno-48-7" href="#__codelineno-48-7"></a><span class="w"> </span><span class="nx">age</span><span class="w"> </span><span class="o">:</span><span class="s2">"23"</span><span class="p">,</span>
</span><span id="__span-48-8"><a id="__codelineno-48-8" name="__codelineno-48-8" href="#__codelineno-48-8"></a><span class="w"> </span><span class="c1">//自定义对象的行为声明方式，方法名：function（形式参数）{方法题}</span>
</span><span id="__span-48-9"><a id="__codelineno-48-9" name="__codelineno-48-9" href="#__codelineno-48-9"></a><span class="w"> </span><span class="c1">//如果在自定义对象的某个方法体中要访问属性，需要加this来声明访问</span>
</span><span id="__span-48-10"><a id="__codelineno-48-10" name="__codelineno-48-10" href="#__codelineno-48-10"></a><span class="w"> </span><span class="c1">//自定义对象方法没有重载，按最后定义的来</span>
</span><span id="__span-48-11"><a id="__codelineno-48-11" name="__codelineno-48-11" href="#__codelineno-48-11"></a><span class="w"> </span><span class="nx">eat</span><span class="w"> </span><span class="o">:</span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="nx">food</span><span class="p">){</span>
</span><span id="__span-48-12"><a id="__codelineno-48-12" name="__codelineno-48-12" href="#__codelineno-48-12"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="o">+</span><span class="s2">"正在吃"</span><span class="o">+</span><span class="nx">food</span><span class="p">);</span>
</span><span id="__span-48-13"><a id="__codelineno-48-13" name="__codelineno-48-13" href="#__codelineno-48-13"></a><span class="w"> </span><span class="p">},</span>
</span><span id="__span-48-14"><a id="__codelineno-48-14" name="__codelineno-48-14" href="#__codelineno-48-14"></a><span class="w"> </span><span class="nx">study</span><span class="o">:</span><span class="kd">function</span><span class="p">(</span><span class="nx">info</span><span class="p">){</span>
</span><span id="__span-48-15"><a id="__codelineno-48-15" name="__codelineno-48-15" href="#__codelineno-48-15"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="o">+</span><span class="s2">"正在"</span><span class="o">+</span><span class="k">this</span><span class="p">.</span><span class="nx">classroom</span><span class="o">+</span><span class="s2">"学习"</span><span class="o">+</span><span class="nx">info</span><span class="p">);</span>
</span><span id="__span-48-16"><a id="__codelineno-48-16" name="__codelineno-48-16" href="#__codelineno-48-16"></a><span class="w"> </span><span class="p">},</span>
</span><span id="__span-48-17"><a id="__codelineno-48-17" name="__codelineno-48-17" href="#__codelineno-48-17"></a><span class="w"> </span><span class="nx">sleep</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="kd">function</span><span class="p">(){</span>
</span><span id="__span-48-18"><a id="__codelineno-48-18" name="__codelineno-48-18" href="#__codelineno-48-18"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="o">+</span><span class="s2">"正在睡觉休息"</span><span class="p">);</span>
</span><span id="__span-48-19"><a id="__codelineno-48-19" name="__codelineno-48-19" href="#__codelineno-48-19"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-48-20"><a id="__codelineno-48-20" name="__codelineno-48-20" href="#__codelineno-48-20"></a><span class="p">}</span>
</span><span id="__span-48-21"><a id="__codelineno-48-21" name="__codelineno-48-21" href="#__codelineno-48-21"></a><span class="c1">//自定义对象的属性名可以通过(对象名.属性名)进行取值与赋值</span>
</span><span id="__span-48-22"><a id="__codelineno-48-22" name="__codelineno-48-22" href="#__codelineno-48-22"></a><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"学生的姓名是"</span><span class="o">+</span><span class="nx">student</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
</span><span id="__span-48-23"><a id="__codelineno-48-23" name="__codelineno-48-23" href="#__codelineno-48-23"></a><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"学生的班级是"</span><span class="o">+</span><span class="nx">student</span><span class="p">.</span><span class="nx">classroom</span><span class="p">);</span>
</span><span id="__span-48-24"><a id="__codelineno-48-24" name="__codelineno-48-24" href="#__codelineno-48-24"></a><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"学生的分数是"</span><span class="o">+</span><span class="nx">student</span><span class="p">.</span><span class="nx">score</span><span class="p">);</span>
</span><span id="__span-48-25"><a id="__codelineno-48-25" name="__codelineno-48-25" href="#__codelineno-48-25"></a><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"学生的年龄是"</span><span class="o">+</span><span class="nx">student</span><span class="p">.</span><span class="nx">age</span><span class="p">);</span>
</span><span id="__span-48-26"><a id="__codelineno-48-26" name="__codelineno-48-26" href="#__codelineno-48-26"></a><span class="c1">//自定义对象的方法可以通过(对象名.方法名)进行调用（需要传递实际参数）</span>
</span><span id="__span-48-27"><a id="__codelineno-48-27" name="__codelineno-48-27" href="#__codelineno-48-27"></a><span class="nx">student</span><span class="p">.</span><span class="nx">study</span><span class="p">();</span>
</span><span id="__span-48-28"><a id="__codelineno-48-28" name="__codelineno-48-28" href="#__codelineno-48-28"></a><span class="nx">student</span><span class="p">.</span><span class="nx">eat</span><span class="p">();</span>
</span><span id="__span-48-29"><a id="__codelineno-48-29" name="__codelineno-48-29" href="#__codelineno-48-29"></a><span class="nx">student</span><span class="p">.</span><span class="nx">study</span><span class="p">(</span><span class="s2">"web"</span><span class="p">);</span>
</span><span id="__span-48-30"><a id="__codelineno-48-30" name="__codelineno-48-30" href="#__codelineno-48-30"></a><span class="nx">student</span><span class="p">.</span><span class="nx">eat</span><span class="p">(</span><span class="s2">"西红柿炒蛋"</span><span class="p">);</span>
</span><span id="__span-48-31"><a id="__codelineno-48-31" name="__codelineno-48-31" href="#__codelineno-48-31"></a><span class="nx">student</span><span class="p">.</span><span class="nx">sleep</span><span class="p">();</span>
</span></code></pre></div>
<h4 id="153bom">1.5.3BOM对象<a class="headerlink" href="#153bom" title="Permanent link">¶</a></h4>
<p>BOM（Browser Object Model）：浏览器对象模型，JavaScript将浏览器的各个组成部分封装成了对象，要操作浏览器的部分功能，可以通过操作BOM对象的相关属性或者函数完成，例如：想要将浏览器的地址修改为<code>http://www.baid.com</code>可以通过BOM中提供的location对象的href属性来完成。</p>
<p>BOM提供了如下五个对象：（<font color='blue'>只有这5个吗</font>）</p>
<table>
<thead>
<tr>
<th>对象名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>Window</td>
<td>浏览器窗口对象</td>
</tr>
<tr>
<td>Navigator<br/>（导航，面板，导航器，航行者，航海者，驾驶员，领航员）</td>
<td>浏览器对象</td>
</tr>
<tr>
<td>Screen</td>
<td>屏幕对象</td>
</tr>
<tr>
<td>History</td>
<td>历史记录对象</td>
</tr>
<tr>
<td>Location</td>
<td>地址栏对象</td>
</tr>
</tbody>
</table>
<p>上述对象与浏览器组成的对应关系如下</p>
<p><img alt="BOM对象示意图" src="../assets/SD-5-FrontEnd.assets/BOM%E5%AF%B9%E8%B1%A1%E7%A4%BA%E6%84%8F%E5%9B%BE.png" /></p>
<p>重点学习：Window对象（没有s），Location对象。</p>
<h5 id="1531window">1.5.3.1Window对象<a class="headerlink" href="#1531window" title="Permanent link">¶</a></h5>
<p>Window对象指的是浏览器串口对象，是JavaScript的顶级对象，所以对于BOM对象，可以直接使用，并且对于Window对象的方法和属性，可以省略window.（点）。例如：alert()函数其实属于window对象的，其完整的代码如下：</p>
<div class="highlight"><pre><span></span><code><span id="__span-49-1"><a id="__codelineno-49-1" name="__codelineno-49-1" href="#__codelineno-49-1"></a>window.alert('hello');
</span></code></pre></div>
<p>其可以省略window. 所以可以简写成</p>
<div class="highlight"><pre><span></span><code><span id="__span-50-1"><a id="__codelineno-50-1" name="__codelineno-50-1" href="#__codelineno-50-1"></a>alert('hello')
</span></code></pre></div>
<p>所以对于window对象的属性和方法，都是采用简写的方式。window提供了很多的属性和方法。</p>
<p>window对象提供的获取其他BOM对象的属性：</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>history</td>
<td>用于获取history对象</td>
</tr>
<tr>
<td>location</td>
<td>用于获取location对象</td>
</tr>
<tr>
<td>navigator</td>
<td>用于获取navigator对象</td>
</tr>
<tr>
<td>screen</td>
<td>用于获取screen对象</td>
</tr>
</tbody>
</table>
<p>如果要使用location对象，只需通过代码<code>window.location</code>或者简写<code>location</code>即可使用</p>
<p>window提供的常用函数，</p>
<table>
<thead>
<tr>
<th>函数</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>alert()</td>
<td>显示带有一段消息和一个确认按钮的警告框</td>
</tr>
<tr>
<td>comfirm()</td>
<td>显示带有一段消息以及确认按钮和取消按钮的对话框</td>
</tr>
<tr>
<td>prompt()</td>
<td>显示带有一段信息以及一个信息收集框</td>
</tr>
<tr>
<td>setInterval()</td>
<td>按照指定的周期（以毫秒计）来调用函数或计算表达式</td>
</tr>
<tr>
<td>setTimeout()</td>
<td>在指定的毫秒数后调用函数或表达式</td>
</tr>
</tbody>
</table>
<p>代码：</p>
<div class="highlight"><pre><span></span><code><span id="__span-51-1"><a id="__codelineno-51-1" name="__codelineno-51-1" href="#__codelineno-51-1"></a><span class="c1">//警告框</span>
</span><span id="__span-51-2"><a id="__codelineno-51-2" name="__codelineno-51-2" href="#__codelineno-51-2"></a><span class="nb">window</span><span class="p">.</span><span class="nx">alert</span><span class="p">(</span><span class="s2">"警告！此操作无法逆转"</span><span class="p">);</span>
</span><span id="__span-51-3"><a id="__codelineno-51-3" name="__codelineno-51-3" href="#__codelineno-51-3"></a><span class="c1">//确认框</span>
</span><span id="__span-51-4"><a id="__codelineno-51-4" name="__codelineno-51-4" href="#__codelineno-51-4"></a><span class="kd">let</span><span class="w"> </span><span class="nx">result</span><span class="w"> </span><span class="o">=</span><span class="nb">window</span><span class="p">.</span><span class="nx">confirm</span><span class="p">(</span><span class="s2">"您是否确认此操作无误？"</span><span class="p">)</span>
</span><span id="__span-51-5"><a id="__codelineno-51-5" name="__codelineno-51-5" href="#__codelineno-51-5"></a><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">result</span><span class="p">);</span>
</span><span id="__span-51-6"><a id="__codelineno-51-6" name="__codelineno-51-6" href="#__codelineno-51-6"></a><span class="c1">//信息收起框</span>
</span><span id="__span-51-7"><a id="__codelineno-51-7" name="__codelineno-51-7" href="#__codelineno-51-7"></a><span class="kd">let</span><span class="w"> </span><span class="nx">info</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">prompt</span><span class="p">(</span><span class="s2">"请输入验证码"</span><span class="p">);</span>
</span><span id="__span-51-8"><a id="__codelineno-51-8" name="__codelineno-51-8" href="#__codelineno-51-8"></a><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">info</span><span class="p">);</span>
</span><span id="__span-51-9"><a id="__codelineno-51-9" name="__codelineno-51-9" href="#__codelineno-51-9"></a><span class="c1">//一次性定时器，当页面加载3秒后触发第一个函数执行</span>
</span><span id="__span-51-10"><a id="__codelineno-51-10" name="__codelineno-51-10" href="#__codelineno-51-10"></a><span class="nb">window</span><span class="p">,</span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
</span><span id="__span-51-11"><a id="__codelineno-51-11" name="__codelineno-51-11" href="#__codelineno-51-11"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"一次性定时器触发了"</span><span class="p">);</span>
</span><span id="__span-51-12"><a id="__codelineno-51-12" name="__codelineno-51-12" href="#__codelineno-51-12"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"这个楼上是同一个定时器"</span><span class="p">);</span>
</span><span id="__span-51-13"><a id="__codelineno-51-13" name="__codelineno-51-13" href="#__codelineno-51-13"></a><span class="p">},</span><span class="mf">3000</span><span class="p">);</span>
</span><span id="__span-51-14"><a id="__codelineno-51-14" name="__codelineno-51-14" href="#__codelineno-51-14"></a><span class="c1">//循环计时器，每隔指定的时间执行一次</span>
</span><span id="__span-51-15"><a id="__codelineno-51-15" name="__codelineno-51-15" href="#__codelineno-51-15"></a><span class="nb">window</span><span class="p">.</span><span class="nx">setInterval</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
</span><span id="__span-51-16"><a id="__codelineno-51-16" name="__codelineno-51-16" href="#__codelineno-51-16"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"循环定时器触发了"</span><span class="p">);</span>
</span><span id="__span-51-17"><a id="__codelineno-51-17" name="__codelineno-51-17" href="#__codelineno-51-17"></a><span class="p">},</span><span class="mf">3000</span><span class="p">);</span>
</span></code></pre></div>
<p>效果：</p>
<p><img alt="BOM-window效果" src="../assets/SD-5-FrontEnd.assets/BOM-window%E6%95%88%E6%9E%9C.png" /></p>
<h5 id="1532location">1.5.3.2Location对象<a class="headerlink" href="#1532location" title="Permanent link">¶</a></h5>
<p>location是指代浏览器的地址栏对象，对于这个对象，我们常用的href属性，用于获取或者设置浏览器的地址信息</p>
<div class="highlight"><pre><span></span><code><span id="__span-52-1"><a id="__codelineno-52-1" name="__codelineno-52-1" href="#__codelineno-52-1"></a><span class="c1">//location对象在JavaScript中表示地址栏，可以通过修改其href属性实现跳转的目的</span>
</span><span id="__span-52-2"><a id="__codelineno-52-2" name="__codelineno-52-2" href="#__codelineno-52-2"></a><span class="nx">location</span><span class="p">.</span><span class="nx">href</span><span class="o">=</span><span class="s2">"https://www.taobao.com"</span><span class="p">;</span>
</span></code></pre></div>
<p>1.5.3.3BOM综合案例</p>
<div class="highlight"><pre><span></span><code><span id="__span-53-1"><a id="__codelineno-53-1" name="__codelineno-53-1" href="#__codelineno-53-1"></a><span class="kd">let</span><span class="w"> </span><span class="nx">result</span><span class="w"> </span><span class="o">=</span><span class="nb">window</span><span class="p">.</span><span class="nx">confirm</span><span class="p">(</span><span class="s2">"想要玩点刺激点吗？未成年勿点"</span><span class="p">)</span>
</span><span id="__span-53-2"><a id="__codelineno-53-2" name="__codelineno-53-2" href="#__codelineno-53-2"></a><span class="k">if</span><span class="p">(</span><span class="nx">result</span><span class="p">){</span>
</span><span id="__span-53-3"><a id="__codelineno-53-3" name="__codelineno-53-3" href="#__codelineno-53-3"></a><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
</span><span id="__span-53-4"><a id="__codelineno-53-4" name="__codelineno-53-4" href="#__codelineno-53-4"></a><span class="w"> </span><span class="c1">//修改location地址栏信息跳转到新的地址栏</span>
</span><span id="__span-53-5"><a id="__codelineno-53-5" name="__codelineno-53-5" href="#__codelineno-53-5"></a><span class="w"> </span><span class="c1">//写全称，带上协议http：//</span>
</span><span id="__span-53-6"><a id="__codelineno-53-6" name="__codelineno-53-6" href="#__codelineno-53-6"></a><span class="w"> </span><span class="nx">location</span><span class="p">.</span><span class="nx">href</span><span class="w"> </span><span class="o">=</span><span class="s2">"https://www.zhihu.com"</span><span class="p">;</span>
</span><span id="__span-53-7"><a id="__codelineno-53-7" name="__codelineno-53-7" href="#__codelineno-53-7"></a><span class="w"> </span><span class="p">},</span><span class="mf">3000</span><span class="p">);</span>
</span><span id="__span-53-8"><a id="__codelineno-53-8" name="__codelineno-53-8" href="#__codelineno-53-8"></a>
</span><span id="__span-53-9"><a id="__codelineno-53-9" name="__codelineno-53-9" href="#__codelineno-53-9"></a><span class="p">}</span><span class="k">else</span><span class="p">{</span>
</span><span id="__span-53-10"><a id="__codelineno-53-10" name="__codelineno-53-10" href="#__codelineno-53-10"></a><span class="w"> </span><span class="kd">let</span><span class="w"> </span><span class="nx">other</span><span class="w"> </span><span class="o">=</span><span class="nb">window</span><span class="p">.</span><span class="nx">prompt</span><span class="p">(</span><span class="s2">"真老实，带你看点更刺激的东西"</span><span class="p">)</span>
</span><span id="__span-53-11"><a id="__codelineno-53-11" name="__codelineno-53-11" href="#__codelineno-53-11"></a><span class="w"> </span><span class="k">if</span><span class="p">(</span><span class="nx">other</span><span class="o">===</span><span class="s2">"B站"</span><span class="p">){</span>
</span><span id="__span-53-12"><a id="__codelineno-53-12" name="__codelineno-53-12" href="#__codelineno-53-12"></a><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">alert</span><span class="p">(</span><span class="s2">"准备好，B站来了"</span><span class="p">);</span>
</span><span id="__span-53-13"><a id="__codelineno-53-13" name="__codelineno-53-13" href="#__codelineno-53-13"></a><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
</span><span id="__span-53-14"><a id="__codelineno-53-14" name="__codelineno-53-14" href="#__codelineno-53-14"></a><span class="w"> </span><span class="nx">location</span><span class="p">.</span><span class="nx">href</span><span class="o">=</span><span class="s2">"htt://www.bilibili.com"</span><span class="p">;</span>
</span><span id="__span-53-15"><a id="__codelineno-53-15" name="__codelineno-53-15" href="#__codelineno-53-15"></a><span class="w"> </span><span class="p">},</span><span class="mf">3000</span><span class="p">)</span>
</span><span id="__span-53-16"><a id="__codelineno-53-16" name="__codelineno-53-16" href="#__codelineno-53-16"></a><span class="w"> </span><span class="p">}</span><span class="k">else</span><span class="w"> </span><span class="k">if</span><span class="p">(</span><span class="nx">other</span><span class="w"> </span><span class="o">===</span><span class="s2">"优酷"</span><span class="p">){</span>
</span><span id="__span-53-17"><a id="__codelineno-53-17" name="__codelineno-53-17" href="#__codelineno-53-17"></a><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">alert</span><span class="p">(</span><span class="s2">"准备好优酷来了"</span><span class="p">);</span>
</span><span id="__span-53-18"><a id="__codelineno-53-18" name="__codelineno-53-18" href="#__codelineno-53-18"></a><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
</span><span id="__span-53-19"><a id="__codelineno-53-19" name="__codelineno-53-19" href="#__codelineno-53-19"></a><span class="w"> </span><span class="nx">location</span><span class="p">.</span><span class="nx">href</span><span class="o">=</span><span class="s2">"https://www.youku.com/"</span><span class="p">;</span>
</span><span id="__span-53-20"><a id="__codelineno-53-20" name="__codelineno-53-20" href="#__codelineno-53-20"></a><span class="w"> </span><span class="p">},</span><span class="mf">3000</span><span class="p">)</span>
</span><span id="__span-53-21"><a id="__codelineno-53-21" name="__codelineno-53-21" href="#__codelineno-53-21"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-53-22"><a id="__codelineno-53-22" name="__codelineno-53-22" href="#__codelineno-53-22"></a>
</span><span id="__span-53-23"><a id="__codelineno-53-23" name="__codelineno-53-23" href="#__codelineno-53-23"></a><span class="p">}</span>
</span></code></pre></div>
<h4 id="154dom">1.5.4DOM对象<a class="headerlink" href="#154dom" title="Permanent link">¶</a></h4>
<h5 id="1541dom">1.5.4.1DOM介绍<a class="headerlink" href="#1541dom" title="Permanent link">¶</a></h5>
<p>DOM：Document Object Model文档对象模型。也就是JavaScript将HTML文档的各个组成部分封装成对象</p>
<p>DOM在学习XML时候接触过（<font color='blue'>是吗？</font>）只不过XML文档中的标签需要我们自己写代码解析，而HTML文档是浏览器解析。封装的对象为</p>
<ul>
<li>Document：整个文档对象</li>
<li>Element：元素对象</li>
<li>Attribute：属性对象</li>
<li>Text：文本对象</li>
<li>Comment：注释对象</li>
</ul>
<p>HTML解析为DOM树：</p>
<p><img alt="HTML转DOM树" src="../assets/SD-5-FrontEnd.assets/HTML%E8%BD%ACDOM%E6%A0%91.png" />DOM技术的作用</p>
<ul>
<li>改变HTML元素的内容</li>
<li>改变HTML元素的样式（CSS）</li>
<li>对HTML COM事件作出反应</li>
<li>添加或者删除HTML元素</li>
</ul>
<p>达到动态改变页面效果的目的。</p>
<h5 id="1542dom">1.5.4.2获取DOM对象<a class="headerlink" href="#1542dom" title="Permanent link">¶</a></h5>
<p>DOM的作用是通过修改HTML元素的内容和样式实现页面的各种动态效果，但是操作DOM对象的前提是先获取元素对象，然后才能操作，所以学习DOM，主要的核心点是学习以下两点：</p>
<p>如何获取DOM中的元素对象（Element对象，也就是标签）</p>
<p>如何操作Element对象的属性，也就是标签的属性</p>
<p>HTML中的Element对象可以通过Document对象获取，而Document对象是通过Window对象获取的，document对象提供的用于获取Element元素对象的api如下图所示：</p>
<table>
<thead>
<tr>
<th>函数</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>document.getElementById()</td>
<td>根据id属性值获取，返回单个Element对象</td>
</tr>
<tr>
<td>document.getElementsByTagName()</td>
<td>根据标签名称获取，返回Element对象数组</td>
</tr>
<tr>
<td>document.getElementsByName()</td>
<td>根据name属性值获取，返回Element对象数组</td>
</tr>
<tr>
<td>document.getElementsByClassName()</td>
<td>根据class属性值获取，返回Element对象数组</td>
</tr>
</tbody>
</table>
<p>获取Element对象</p>
<div class="highlight"><pre><span></span><code><span id="__span-54-1"><a id="__codelineno-54-1" name="__codelineno-54-1" href="#__codelineno-54-1"></a><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span><span id="__span-54-2"><a id="__codelineno-54-2" name="__codelineno-54-2" href="#__codelineno-54-2"></a> <span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"div_1"</span><span class="p">></span>Hello World<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span><span id="__span-54-3"><a id="__codelineno-54-3" name="__codelineno-54-3" href="#__codelineno-54-3"></a> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"cls"</span><span class="p">></span>Hello Java<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span><span id="__span-54-4"><a id="__codelineno-54-4" name="__codelineno-54-4" href="#__codelineno-54-4"></a> <span class="p"><</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"cls"</span><span class="p">></span>
</span><span id="__span-54-5"><a id="__codelineno-54-5" name="__codelineno-54-5" href="#__codelineno-54-5"></a> Hello 黑马
</span><span id="__span-54-6"><a id="__codelineno-54-6" name="__codelineno-54-6" href="#__codelineno-54-6"></a> <span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span><span id="__span-54-7"><a id="__codelineno-54-7" name="__codelineno-54-7" href="#__codelineno-54-7"></a> <span class="p"><</span><span class="nt">form</span> <span class="na">action</span><span class="o">=</span><span class="s">"#"</span> <span class="na">method</span><span class="o">=</span><span class="s">"get"</span><span class="p">></span>
</span><span id="__span-54-8"><a id="__codelineno-54-8" name="__codelineno-54-8" href="#__codelineno-54-8"></a> 用户名:<span class="ni"> </span><span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">name</span><span class="o">=</span><span class="s">"username"</span><span class="p">/></span>
</span><span id="__span-54-9"><a id="__codelineno-54-9" name="__codelineno-54-9" href="#__codelineno-54-9"></a> <span class="p"></</span><span class="nt">form</span><span class="p">></span>
</span><span id="__span-54-10"><a id="__codelineno-54-10" name="__codelineno-54-10" href="#__codelineno-54-10"></a><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span><span id="__span-54-11"><a id="__codelineno-54-11" name="__codelineno-54-11" href="#__codelineno-54-11"></a><span class="p"><</span><span class="nt">script</span><span class="p">></span>
</span><span id="__span-54-12"><a id="__codelineno-54-12" name="__codelineno-54-12" href="#__codelineno-54-12"></a><span class="w"> </span><span class="c1">//想要操作页面中的某一个元素，必须先获取表示该元素的Element对象</span>
</span><span id="__span-54-13"><a id="__codelineno-54-13" name="__codelineno-54-13" href="#__codelineno-54-13"></a><span class="w"> </span><span class="c1">//1.基于要获取元素的ID属性值获取，由于ID值在页面是唯一的，该方法获取到的Element对象只有一个</span>
</span><span id="__span-54-14"><a id="__codelineno-54-14" name="__codelineno-54-14" href="#__codelineno-54-14"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">divElement</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"div_1"</span><span class="p">);</span>
</span><span id="__span-54-15"><a id="__codelineno-54-15" name="__codelineno-54-15" href="#__codelineno-54-15"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">divElement</span><span class="p">);</span>
</span><span id="__span-54-16"><a id="__codelineno-54-16" name="__codelineno-54-16" href="#__codelineno-54-16"></a><span class="w"> </span><span class="c1">//2.基于要获取元素的标签获取，获取所有同类标签对象【数组】</span>
</span><span id="__span-54-17"><a id="__codelineno-54-17" name="__codelineno-54-17" href="#__codelineno-54-17"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">divElements</span><span class="w"> </span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s2">"div"</span><span class="p">);</span>
</span><span id="__span-54-18"><a id="__codelineno-54-18" name="__codelineno-54-18" href="#__codelineno-54-18"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">divElements</span><span class="p">);</span>
</span><span id="__span-54-19"><a id="__codelineno-54-19" name="__codelineno-54-19" href="#__codelineno-54-19"></a><span class="w"> </span><span class="c1">//3.基于要获取元素的name属性获取，一般情况下没有name属性的（主要是信息收集框input/select/textarea）【数组】</span>
</span><span id="__span-54-20"><a id="__codelineno-54-20" name="__codelineno-54-20" href="#__codelineno-54-20"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">usernameElements</span><span class="w"> </span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByName</span><span class="p">(</span><span class="s2">"username"</span><span class="p">);</span>
</span><span id="__span-54-21"><a id="__codelineno-54-21" name="__codelineno-54-21" href="#__codelineno-54-21"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">usernameElements</span><span class="p">);</span>
</span><span id="__span-54-22"><a id="__codelineno-54-22" name="__codelineno-54-22" href="#__codelineno-54-22"></a><span class="w"> </span><span class="c1">//4.基于要获取元素的的class属性值获取，class属性值在页面不唯一。【数组】</span>
</span><span id="__span-54-23"><a id="__codelineno-54-23" name="__codelineno-54-23" href="#__codelineno-54-23"></a><span class="w"> </span><span class="c1">//class属性的作用？</span>
</span><span id="__span-54-24"><a id="__codelineno-54-24" name="__codelineno-54-24" href="#__codelineno-54-24"></a><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">clsElements</span><span class="w"> </span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s2">"cls"</span><span class="p">);</span>
</span><span id="__span-54-25"><a id="__codelineno-54-25" name="__codelineno-54-25" href="#__codelineno-54-25"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">clsElements</span><span class="p">);</span>
</span><span id="__span-54-26"><a id="__codelineno-54-26" name="__codelineno-54-26" href="#__codelineno-54-26"></a><span class="p"></</span><span class="nt">script</span><span class="p">></span>
</span></code></pre></div>
<h2 id="vue">Vue的概念<a class="headerlink" href="#vue" title="Permanent link">¶</a></h2>
<p>前端框架，简化原生的JS对DOM的操作</p>
<h2 id="vue_1">VUE的常用指令<a class="headerlink" href="#vue_1" title="Permanent link">¶</a></h2>
<h2 id="ajax">Ajax的概念<a class="headerlink" href="#ajax" title="Permanent link">¶</a></h2>
<h2 id="ajax_1">原生Ajax<a class="headerlink" href="#ajax_1" title="Permanent link">¶</a></h2>
<h2 id="vue_2">vue路由<a class="headerlink" href="#vue_2" title="Permanent link">¶</a></h2>
<p>Vue Router </p>
<p>介绍：Vue Router是Vue的官方路由</p>
<p>组成：</p>
<p>VueRouter：路由器类，根据路由请求在路由试图中冬天</p>
<h2 id="_4">打包部署<a class="headerlink" href="#_4" title="Permanent link">¶</a></h2>
<h3 id="16js">1.6JS事件监听<a class="headerlink" href="#16js" title="Permanent link">¶</a></h3>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
<button type="button" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg>
回到页面顶部
</button>
</main>
<footer class="md-footer">
<nav class="md-footer__inner md-grid" aria-label="页脚" >
<a href="../SD-5-Python/" class="md-footer__link md-footer__link--prev" aria-label="上一页: Python">
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!--! Font Awesome Free 7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l137.3-137.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>
</div>
<div class="md-footer__title">
<span class="md-footer__direction">
上一页
</span>
<div class="md-ellipsis">
Python
</div>
</div>
</a>
<a href="../SD-6.1-LinuxKernel/" class="md-footer__link md-footer__link--next" aria-label="下一页: Linux 内核">
<div class="md-footer__title">
<span class="md-footer__direction">
下一页
</span>
<div class="md-ellipsis">
Linux 内核
</div>
</div>
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!--! Font Awesome Free 7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M247.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L179.2 256 41.9 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>
</div>
</a>
</nav>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
<div class="md-copyright__highlight">
Copyright © 2025 ~ now | Aiden Wang
</div>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<div class="md-progress" data-md-component="progress" role="progressbar"></div>
<script id="__config" type="application/json">{"base": "../..", "features": ["announce.dismiss", "content.action.edit", "content.action.view", "content.code.annotate", "content.code.copy", "content.tooltips", "navigation.expand", "navigation.footer", "navigation.indexes", "navigation.instant.prefetch", "navigation.instant.progress", "navigation.path", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "navigation.tracking", "search.highlight", "search.share", "search.suggest", "toc.follow"], "search": "../../assets/javascripts/workers/search.973d3a69.min.js", "tags": {"Default": "default-tag", "Hardware": "hardware-tag", "Software": "software-tag"}, "translations": {"clipboard.copied": "\u5df2\u590d\u5236", "clipboard.copy": "\u590d\u5236", "search.result.more.one": "\u5728\u8be5\u9875\u4e0a\u8fd8\u6709 1 \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.more.other": "\u5728\u8be5\u9875\u4e0a\u8fd8\u6709 # \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.none": "\u6ca1\u6709\u627e\u5230\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.one": "\u627e\u5230 1 \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.other": "# \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.placeholder": "\u952e\u5165\u4ee5\u5f00\u59cb\u641c\u7d22", "search.result.term.missing": "\u7f3a\u5c11", "select.version": "\u9009\u62e9\u5f53\u524d\u7248\u672c"}, "version": null}</script>
<script src="../../assets/javascripts/bundle.f55a23d4.min.js"></script>
<script src="../../assets/js/dynamic-css-loader.js"></script>
</body>
</html>