JavaWeb笔记整理——HTML、CSS、JavaScript

最新推荐文章于 2024-06-16 15:31:20 发布

i_Water_boy

最新推荐文章于 2024-06-16 15:31:20 发布

阅读量805

点赞数 14

分类专栏： JavaWeb笔记文章标签： java 笔记 html

本文链接：https://blog.csdn.net/i_Water_boy/article/details/137752373

版权

JavaWeb笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

各位好，这次我来整理一下javaweb中前端三件套HTML、CSS和JS的笔记，希望对大家有帮助~

正在学习Java的小伙伴们可以看我之前整理过的非常详细的笔记，带你从面向对象速通Java：

JavaSE笔记_i_Water_boy的博客-CSDN博客

一、JavaWeb 技术体系框架

JavaWeb的B/S架构：即Browser Server架构浏览器服务端架构。

BS架构可以被分为三部分——前端、后端以及数据库。

在前端开发中，我们需要了解和掌握的技术栈有：

html
css
JavaScript
vue
react
ajax
jQuery

这些我们作为后端程序员，需要掌握基本的使用方法，并让前端和后端的知识体系融合，不需要特别深入钻研。

而后端开发需要的技术栈有：

java
servlet + javabean
spring 、springmvc
mybatis
ssm
springboot
springcloud
……
各种主流数据库 mysql oracle DB2

有了以上内容体系的了解，我们接下来学习javaweb的内容就可以心中有数了，要记住自己学的内容是属于前端的还是后端的。

二、HTML

1、什么是HTML？

HTML全称超文本标签语言（HyperText Mark-up Language）

HTML是网页内容的载体。

网页的内容，即网页作者想要在网页上呈现的文本、图片、视频等内容。

我们使用HTML标签来作为网页内容的载体。

2、HTML访问方式

本地访问：

远程访问：

3、html标签

（1）标签的基本使用

我们可以使用idea来开发html，我来编写一个简单的html代码，并演示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>htmlTitle</title>
</head>
<body>
<h1>
    这是一个html
</h1>
</body>
</html>

我们点击idea右上角的浏览器图表就会在浏览器中显示我们编好的网页：

这里的代码大家没有学过前端的话肯定是看不懂的，让我来逐步解释一下。

开头部分 <!DOCTYPE html> 是html文件头

下一行则代表使用语言的地区，这里的en表示英国或美国

接下来是html的head标签，这个就相当于html头部，包含很多html文件的信息，head标签中包含着这个文件所使用的字符集，这里我们使用的utf8

之后是标题，title标签，这个标签中的内容会显示在我们网页端的页面标签栏上

之后是body标签，这是我们html文件的身体部分，也是html的主要内容，这里就可以添加我们想要添加的网页内容了，

<h1>标签是标题标签，在<h1>标签内部的文本都会呈现出标题的大字体的样式。

整个html文件除了文件头，都是在一个<html>标签中被包含起来的：

以上就是html文件的基本使用，以及html的结构。

这里需要我们注意的是，html文件是不需要编译的，它可以由浏览器直接解析，从而呈现出来，

这一点与Java等编程语言不同。

（2）标签的分类和特点以及html元素

<h1>这样的标签是闭合标签，它需要在前后面各有一个标签表示闭合：<h1>文本内容</h1>

其中</h1>结束标签要在前面加一个/

而像换行标签<br/>这样的标签，在最后带有一个/

这样的标签就是不需要闭合的，只单独出现即可

html元素，就是指从开始标签到结束标签的全部内容

而每个html标签中，可以设置标签的属性，如开头的<html>标签中指定的语言就是一个属性:

html标签不可以交叉嵌套，例如这样就不可以

接下来我们一一介绍html的各类标签

（3）font标签

用于显示字体，并可以自定义字体的样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>htmlTitle</title>
</head>
<body>
<font size="40" face="微软雅黑" color="#6495ed">font标签内容</font>
</body>
</html>

（4）字符实体标签

用于显示一些特殊的横线等特殊字符，如<hr/>标签，用于显示一个分割线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>htmlTitle</title>
</head>
<body>
<font size="40" face="微软雅黑" color="#6495ed">font标签内容</font>
<hr/>
</body>
</html>

还有其他很多这样的标签，列表如下：

（5）标题标签

用于设置文本为标题的标签，前面我们已经见过一个<h1>标签。

实际上<h1><h2><h3>...<h6>都是标题标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>htmlTitle</title>
</head>
<body>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</body>
</html>

其中我们可以在标签内设置属性，使用align——对齐属性，来进行对齐设置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>htmlTitle</title>
</head>
<body>
<h1 align="left">h1</h1>
<h2 align="center">h2</h2>
<h3 align="right">h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</body>
</html>

（6）超链接标签

我们在网页上很常见到的一类标签，我们点击一个图片或者视频，就会直接跳转到某个网页，这就是超链接标签的作用。

我们使用<a>来制作一个超链接。还需要在标签内设置href属性，指定跳转到哪个链接。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>htmlTitle</title>
</head>
<body>
<a href="homework01.html">homework01</a>
<a href="http://www.baidu.com">baidu</a>
</body>
</html>

如果跳转到的链接是一个网址，而不是一个html本地文件，就需要在前面加上http:// 。

除此之外，使用target属性，我们还可以指定我们是在本页面打开链接，还是新开一个页面。

（7）无序列表

在开发中也比较常见。用的是ul/li标签，并且有三种不同的款式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>htmlTitle</title>
</head>
<body>
<ul>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
</ul>
</body>
</html>

默认是一个实心圆点，并且字体比较小。

想要修改样式，我们可以修改标签的属性。使用type属性，即可修改无序列表的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>htmlTitle</title>
</head>
<body>
<ul type="circle">
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
</ul>
<ul type="disc">
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
</ul>
<ul type="square">
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
</ul>
</body>
</html>

（8）有序列表

有序列表有排序，有先后顺序。使用ol/li标签来制作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>htmlTitle</title>
</head>
<body>
<ol>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
</ol>
</body>
</html>

使用type属性和start属性可以控制有序列表的序号的样式以及开始和结束。

（9）图像标签

使用<img>在网页上创建图像，需要指定图像的获取路径属性——src。

同时我们可以通过width、height属性来指定图片大小，只指定一个则按照等比例缩放。

border属性可以指定图片的边框；alt属性可以在图片找不到时，显示特定的文字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>htmlTitle</title>
</head>
<body>
<img width="300" border="2" src="img/1.bmp" alt="乌龟不见了">
</body>
</html>

如果我们把图片标签放在超链接标签的话，就可以把图片作为一个超链接。

（10）表格标签

表格标签使用频率很高，并且可以将一个混乱的html内容进行格式化，让其看起来更整齐。

<table>：表格开始标签

<th>：表头

<tr>：表格的一行

<td>：表格的一个单元格

cellspacing 属性：表示单元格之间的距离

表格同样可以设置宽和高，对齐方式，以及边框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>htmlTitle</title>
</head>
<body>
<table border="1" cellspacing="3" width="400" align="center">
    <tr>
        <th>
            表头一
        </th>
        <th>
            表头二
        </th>
    </tr>
    <tr>
        <td>
            第二行第一列
        </td>
        <td>
            第二行第二列
        </td>
    </tr>
</table>
</body>
</html>

如果我们想要合并单元格，或者说跨行跨列的显示一个表格，我们需要使用rowspan和colspan属性。

在<td> 中指定colspan即可合并一行的某些单元格，指定rowspan即可合并比某些列的单元格，如下演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>htmlTitle</title>
</head>
<body>
<table border="1" cellspacing="3" width="400" align="center">
    <tr>
        <th colspan="2">
            表头一
        </th>
    </tr>
    <tr>
        <td rowspan="3">
            第二行第一列
        </td>
        <td>
            第二行第二列
        </td>
    </tr>
    <tr>
        <td>
            第三行第一列
        </td>
        <td>
            第三行第二列
        </td>
    </tr>
    <tr>
        <td>
            第四行第一列
        </td>
        <td>
            第四行第二列
        </td>
    </tr>
</table>
</body>
</html>

但是可以看到，这里如果我们合并了行或者列以后，没有把多余的行或列删除，那么就会顶出表格，所以不要忘记删除多余的行列。

（11）表单标签

<form>表单标签，用于给浏览网页的用户一个输入的空间，并可以提交到服务端上（但是目前我们还做不到检测用户的输入，需要用到js，现在只是完成一个页面）。

<input>标签：用于设置表单元素

type属性：用于设置表单元素的类型，如text为输入文本框、submit为提交按钮。

name属性：给用户的输入值取一个变量名，如下的用户名输入的值为111，则取变量名为username，之后浏览器在发送html请求后会将这个username作为变量传输。

value属性： type为按钮的元素可以指定一个value作为按钮上显示的名字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>htmlTitle</title>
</head>
<body>
<form action="Game01.html" method="get">
    用户名：<input type="text" name="username"><br/>
    密码：<input type="text" name="pwd"><br/>
    <input type="submit" value="登录">
</form>
</body>
</html>

（12）input标签

这里的input标签还有许多类型，这里再详细说明一下：

checkbox：多选选项框，可以由用户勾选。

radio：单选选项框，必须选择一个，选中就不可以取消勾选，除非使用js设定选中逻辑。

可以在标签后输入checked属性，表示该标签默认被选中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>htmlTitle</title>
</head>
<body>
<form action="Game01.html" method="get">
    用户名：<input type="text" name="username"><br/>
    密码：<input type="text" name="pwd"><br/>
    <input type="checkbox">是否记住用户名和密码<br/>
    <input type="radio" checked>是否同意用户协议<br/>
    <input type="submit" value="登录">
</form>
</body>
</html>

（13）select/option/textarea标签

这些也是常用在表单的标签。

直接上演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>htmlTitle</title>
</head>
<body>
<form action="Game01.html" method="get">
    选择游戏：
    <select name="game">
        <option>
            洛克王国
        </option>
        <option>
            赛尔号
        </option>
        <option>
            乌龟追击
        </option>
    </select><br/>
    用户名：<input type="text" name="username"><br/>
    密码：<input type="text" name="pwd"><br/>
    <input type="checkbox">是否记住用户名和密码<br/>
    <input type="radio" checked>是否同意用户协议<br/>
    <input type="submit" value="登录"><br/>
    <textarea name="4" rows="20" cols="10"></textarea>
</form>
</body>
</html>

select和option配合使用，option里面的文本就是选项的文本。

textarea则就是一个输入文本框，没什么好说的，可以指定行列。

（14）表单格式化

通过把表单放到一个表格中我们可以将表单格式化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>htmlTitle</title>
</head>
<body>
<form action="Game01.html" method="get">
    <table>
        <tr>
            选择游戏：
            <select name="game">
                <option>
                    洛克王国
                </option>
                <option>
                    赛尔号
                </option>
                <option>
                    乌龟追击
                </option>
            </select><br/>
        </tr>
        <tr>
            <td>
                用户名：
            </td>
            <td>
                <input type="text" name="username"><br/>
            </td>
        </tr>
        <tr>
            <td>
                密码：
            </td>
            <td>
                <input type="text" name="pwd"><br/>
            </td>

        </tr>
        <tr>
            <td>
                是否记住用户名和密码
            </td>
            <td>
                <input type="checkbox"><br/>
            </td>

        </tr>
        <tr>
            <td>
                是否同意用户协议
            </td>
            <td>
                <input type="radio" checked>
            </td>
            <td>
                <input type="submit" value="登录">
            </td>
        </tr>
    </table>
</form>
</body>
</html>

（15）表单的get和post属性

表单的属性有一个method，可以指定为get或者post。

我们讲一下get和post的作用以及区别：

如果使用的是get请求，那么在浏览器的网址栏中就会显示该表单提交的各个值，这里有一个经典的案例就是某度网盘。

如果我们在输入别人分享的链接时，后面戴上了pwd=xxxx那么我们不用输入提取码就会自动跳转到下载页面。

像这样的就是get请求，会在网页直接显示表单传输的全部值。

所以get请求的特点就是：

（1）在网页上显示请求参数和action的值

（2）不安全

（3）有数据长度限制（不同浏览器限制不同，一般在2k左右）

如果使用的post请求，就不会在网页上显示传输值。只会显示action的值，特点：

（1）不会在网页上显示传输值。只会显示action的值

（2）相对get请求更安全

（3）理论上没有长度限制

（16）div标签和span标签

这两个是块元素，在div或者span标签中的元素相当于被分组了，后续可以使用css来统一规定样式。

区别是div标签是自动换行的，而span标签不会。

div演示（用到了css）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Div Example</title>
    <style>
        .container {
            background-color: lightblue;
            padding: 20px;
            width: 50%;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph inside a div element. The div is a block-level element, which means it takes up the full width available.</p>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Span Example</title>
    <style>
        .highlight {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
<p>This is a normal text and <span class="highlight">this is a highlighted text</span> inside the paragraph.</p>
</body>
</html>

（17）p标签

段落标签，浏览器会在p标签前后自动创建一些空白。

三、css

1、什么是css

css全称为cascading style sheets，层叠样式表。它可以更方便的修饰html文本或图片等内容的样式。

在之前我们如果想要修改一个文本或者图片或者表格的样式，就需要在某个标签内进行修改，添加我们想要添加的属性。

但是如果这样的table标签多了以后，我们还想要让所有的table表都是一样的格式，我们就需要一个一个在table标签中添加样式属性，非常不方便。

但是如果使用css，我们就可以很快捷方便的实现样式的统一。

2、css基本演示

我定义三个div块标签，我想要让这三个div块标签都是一样的颜色以及文本居中。

在没有css的情况下，我们需要一个一个在div标签设置属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Span Example</title>
</head>
<body>
<div align="center" style="background-color:olivedrab" >
    div块1<br/>
    <br/>
    <br/>
    <br/>
</div>
<br/>
<div align="center" style="background-color:olivedrab">
    div块2
    <br/>
    <br/>
    <br/>
</div>
<br/>
<div align="center" style="background-color:olivedrab">
    div块3
    <br/>
    <br/>
    <br/>
</div>
</body>
</html>

可见这样的代码冗余度非常高，如果我们的div块是几十个甚至几百个，那么就相当麻烦了。

而我们使用css就可以将这些div块统一样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Span Example</title>
    <style type="text/css">
        div{
            background-color: olivedrab;
            text-align: center;
        }
    </style>
</head>
<body>
<div>
    div块1<br/>
    <br/>
    <br/>
    <br/>
</div>
<br/>
<div>
    div块2
    <br/>
    <br/>
    <br/>
</div>
<br/>
<div>
    div块3
    <br/>
    <br/>
    <br/>
</div>
</body>
</html>

可见，有了css以后我们可以对html的标签的样式做更好的管理。

3、css的使用方式

在上面的演示中，我们把css放在<head>标签中，实际上我们css也就是这样用的。

在<head>标签中创建一个<style>标签，并在style标签上标记为text/css，表示这是一个css样式。

之后，我们在这个<style>标签中写上css样式，就可以使用。

一个css中包含两个部分，一个是选择器，一个是各种属性。

选择器可以帮我们限制我们样式的范围。这里我们的选择器是div，所以这里的所有属性就都会加在<div>标签上，而其他标签里的内容就不受影响。

如果选择器是h1，那么所有<h1>标签的内容就会按照这里的属性来展现。

在html中有什么样的标签，就会有什么样的选择器。

样式属性在选择器的大括号中写出，并且样式的类型和样式的值是用 "："隔开的，而不是“=”。

值与值之间用空格隔开，而不同的样式之间使用“；”隔开。

如：

4、常见的样式

（1）color

规定字体的颜色。

（2）border

规定边框的样式，可以指定颜色，和宽度等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Span Example</title>
    <style type="text/css">
        div{
            border: 3px blue dashed;
        }
    </style>
</head>
<body>
<div>
    div块1<br/>
    <br/>
    <br/>
    <br/>
</div>
<br/>
<div>
    div块2
    <br/>
    <br/>
    <br/>
</div>
<br/>
<div>
    div块3
    <br/>
    <br/>
    <br/>
</div>
</body>
</html>

（3）width、height

可以填入像素值如100px 也可以是百分值如 50%，百分值则代表使用其父元素的50%计算大小。

（4）background-color

设置背景颜色

（5）字体样式

font-size:字体大小

font-weight:字体是否加粗

font-family:使用指定的字体类型

（6）div居中

margin-left:auto

margin-right:auto

（7）文本居中

text-align：center

这里注意不是align了，要写成text-align。

（8）超链接去下划线

text-decoration：none；

还有很多样式，遇到了就自己查一下吧，作为后端程序员了解一下就可以了。

5、css的三种形式

（1）在html标签指定

也就是我们最初使用的方式：

（2）在<head>中的<style>标签中指定

（3）导入css文件

我们可以将css写成一个单独的文件，然后在程序中引入。

6、css选择器

（1）元素选择器

也就是选中某个标签作为选择器，如之前的div。

可以在div后面继续加元素，从而让这些元素也显现这样的样式。（称为组合选择器）

（2）id选择器

我们可以指定某一个html标签的id，然后使用id作为选择器。这样，css的样式只会作用在这一个id的标签上。并且每个标签的id不可以重复。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Span Example</title>
    <style type="text/css">
        #div1{
            border: 3px blue dashed;
        }
        #div2{
            background-color: olive;
        }
    </style>
</head>
<body>
<div id="div1">
    div块1<br/>
    <br/>
    <br/>
    <br/>
</div>
<br/>
<div id="div2">
    div块2
    <br/>
    <br/>
    <br/>
</div>
<br/>
<div>
    div块3
    <br/>
    <br/>
    <br/>
</div>
</body>
</html>

（3）class选择器

class选择器的含义则是可以将每个html标签进行分组，让某一个分组使用同一个样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Span Example</title>
    <style type="text/css">
        .class1{
            border: 3px blue dashed;
        }
        .class2{
            background-color: olive;
        }
    </style>
</head>
<body>
<div class="class1">
    div块1<br/>
    <br/>
    <br/>
    <br/>
</div>
<br/>
<div class="class1">
    div块2
    <br/>
    <br/>
    <br/>
</div>
<br/>
<div class="class2">
    div块3
    <br/>
    <br/>
    <br/>
</div>
</body>
</html>

（4）优先级

如果同时有元素选择器、id选择器和class选择器还有标签内的css样式，那么他们有一个先后次序：

标签样式>id选择器>class选择器>元素选择器

也就是范围越小的样式设置，优先级越高。

三、JavaScript（js）

1、JavaScript的作用

JavaScript定义了用户和网页之间的交互逻辑，如，我们有了html定义的按钮之后，我们还需要使用JavaScript定义的按钮逻辑来进行网页实际的操作。

JavaScript可以改变html的内容、属性和css的样式等，还可以完成页面提交的数据的验证。

JavaScript中可以定义变量和函数，就像Java一样也有循环、判断等语句，而且我们可以把JavaScript和网页相关联，当用户在点击、光标移动到目标上等操作后让网页进行相应的操作。

2、JavaScript简单演示

JavaScript代码要放在body标签中的<script>标签中。

下面的代码定义了一个按下按钮的逻辑，我们想使用html定义一个按钮，然后使用JavaScript定义按钮按下的逻辑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript01</title>
</head>
<body>
<script>
    window.onload = function (){
        var but1 = document.getElementById("but1");
        but1.onclick = function (){
            alert("警告，你按下了按钮！")
        }
    }
</script>

<button id="but1">按下会发出警告</button>

</body>
</html>

3、JavaScript特点

（1）JavaScript是一种解释性语言，也就是会在运行过程中边运行边逐行编译。

（2）JavaScript是基于对象的编程语言，可以创建对象和使用对象。

（3）JavaScript的语法要求比较宽松，某些格式不规范也可以运行。（如分号可以不写）

4、两种使用方式

（1）直接在html文件中的<body>标签写js代码

（2）通过<script>标签引入JavaScript文件

例如如下代码：

需要注意的是，两个方式不可以混用，如果一个用方法一，一个用方法二，那么会报错，并且只有按顺序的第一段js代码生效。

5、JavaScript查看报错信息

在我们编写网页中使用快捷键shift + ctrl + i 打开网页开发者界面，之后打开控制台就可以看错误信息。

6、JavaScript语法汇总

（1）变量

使用var关键字定义一个js变量，这个变量可以是任意类型，JavaScript会自动转换类型，包括String类型和数字型变量。

例如，下面的num1是number型变量，如果我后续的代码中把num1赋值为“abcde”，那么这个num1的类型就会变成String类型。

也就是说，js中的变量类型可能会随着代码的运行而动态改变

以上几种变量的类型依次是 number、String、number、boolean

可以注意到的是无论是整数还是浮点数，在js变量中都是number类型。

js中的变量类型有：

number、String、boolean、function、Object。（是的函数也是一个数据类型）

除此之外，还有一些特殊类型：

我们定义一个变量没有赋值时，会有一个默认值 undefined。如下代码和演示

如果定义一个变量但是这个变量暂时不需要值，我们可以将其定义为null值。

如果一个字符变量和一个数字变量作了数学运算（减乘除运算），那么会返回一个NaN值，也就是not a number。意味着String变量不可以与number变量进行数学运算。

（2）运算符

和Java一样，注意逻辑运算符中的短路与和短路或的返回值：

短路与 &&：如果式子为真，则返回第二个式子的值；如果式子为假，则返回第一个为假的式子值

短路或 || ：如果式子为假，则返回第二个式子的值；如果式子为真，则返回第一个为真的式子值

（3）条件判断

和Java一样，也支持三元运算符

（4）循环

for循环while循环和Java一样。

（5）数组

定义方式：跟Java一样也用中括号[]，但是中扩号要放在等号后面，等号前面不用放[]

①定义一个数组并初始化

var num1 = [1,2,3,4,5];

②先定义一个空数组，再赋值

var num2 = [];

num2[0] = 1;

num2[1] = 2;

③使用new Array定义数组

var num3 = new Array(1,2,3,4,5);

遍历的话直接使用for循环遍历即可。

（6）函数

函数定义

在js中直接简单粗暴的使用function关键字来定义一个函数，我们可以把一个变量初始化为一个function，因为function也是js的一种基本类型。

调用方法直接在下面几行代码中直接使用方法名调用即可。

函数的传参机制

因为js的变量会随着代码运行动态改变。当我们传入参数到一个函数中时，我们也可以不需要与函数中的操作相对应。例如，我们想要进行两个参数相加的运算，我们依然可以传入一个字符串类型变量。

其他注意细节

①js中的函数名如果重复，不会发生重载，而是会直接覆盖

②js中的函数有隐藏参数列表argument，在任何函数中都有。举例：

而即便是有参的函数，也有这个隐形的argument参数：

（7）对象

定义一个对象方式：

7、事件

事件就是用户在网页上进行的交互过程。

点击一个按钮、图片，输入文本到文本框中，把鼠标放到某个元件上，甚至网页加载……这些都是事件。

利用事件，我们可以指定用户和网页的交互逻辑，并利用JavaScript来改变网页内容。

网页事件一览：

（1）事件注册

我们可以把事件绑定到一个html标签上，当这个标签发生这个事件后，我们就可以使用JavaScript来定义发生这个事件后需要进行的逻辑。

那么这个将一个事件绑定到一个html标签的这个过程叫做事件注册。

静态注册：

直接在html标签中显式的注册

动态注册

在JavaScript脚本中绑定：

（2）dom动态加载说明

每一个网页中的内容或者说标签和属性还有xml文件，都会被映射为一个dom，我们可以通过这个dom来对各种网页的内容逻辑进行处理。

其中window表示整个网页的映射，而document表示html中的所有内容。

我们可以通过document.getElementById这个函数获得网页中的dom。

但是网页中可能并没有加载完毕网页中的各种元素，这样我们就不会获得这个相应dom。

我们如果想要保证可以获取到网页的dom，可以在前面加上一条语句：

window.onload = function（）{ 【获取dom代码】 }

这样就是再window完全加载后，再去调用function函数，也就是再去获取网页的dom，这样就可以保证可以获取到。