【JavaWeb】前端工程化学习笔记

AltMan
186 阅读25分钟

前端基础

笔记参考视频：

尚硅谷最新版 JavaWeb 全套教程,javaweb 零基础入门完整版(2020 版)

尚硅谷全新 JavaWeb 教程，企业主流 javaweb 技术栈(2023 版)

一、HTML

1.页面框架

<!--
    DOCTYPE标签：声明这是一个HTML文档（不写也可以）
-->
<!DOCTYPE html>

<!--
    html标签：表示整个页面内容
    lang:表示支持的语言(en:英文 zh_CN:中文)
    html标签内包含两部分：head和body
-->
<html lang="en">

    <!--
        head标签：表示头部信息，内容不会展示到页面上
        一般包含三部分内容：title标签，css样式，js代码
    -->
    <head>
        <!--编码格式-->
        <meta charset="UTF-8">
        <!--标题：标签名-->
        <title>Title</title>
    </head>

    <!--body标签：页面主体内容
		里面的内容会被渲染到页面上
	-->
    <body>
    	页面内容
    </body>
</html>

2.常用组件

标题

HTML 最大支持六级标题，用 <h1>(双标签)​~<h6>(双标签) ​表示

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

段落

自然段用 <p>(双标签) ​表示

    <p>
        第一个自然段：HTML的全称为超文本标记语言，是一种标记语言。
        它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
        HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
    </p>

    <p>
        第二个自然段：超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。
        这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。
        这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
    </p>

块元素

在开发页面的时候，一个页面可能包含多个组成部分，我们开发的时候，如果改了一部分，肯定不想影响其他部分，这个时候就可以使用布局标签 div​,将页面分成多块，分块开发。

块元素 div ​会自己独占一行。

<div style="border: antiquewhite 1px solid;width: 500px;height: 200px;margin: 10px auto;background-color: cadetblue"></div>
<div style="border: antiquewhite 1px solid;width: 500px;height: 200px;margin: 10px auto;background-color: cadetblue"></div>
<div style="border: antiquewhite 1px solid;width: 500px;height: 200px;margin: 10px auto;background-color: cadetblue"></div>

行内元素

块元素 div ​会自己独占一行，而行内元素不会自己独占一行。因此如果需要设置部分内容的特殊效果，可以使用行内元素 span​

<div style="border: antiquewhite 1px solid;width: 500px;height: 200px;margin: 10px auto;background-color: cadetblue">
    丰富的课程教学案例演示，让你不依赖视频即可独立开发项目，真正做到一名前后端通吃的<span style="font-size: 20px;color: red">全端工程师</span>。
</div>

换行

换行方式有两种：

  1. 普通换行 <br/>​

  2. 下划线换行 <hr/>​

    普通换行<br/>
    划线换行<hr/>

列表

列表标签实现的样式可以参考常见文档的目录结构

列表标签分为两种：有序列表、无序列表

列表可以嵌套

  • 有序列表

    分条展示数据，每一条数据都是单独的一行，每一行前面有单独的数字序号

    实现一个有序列表需要用到两个标签：<ol>(双标签) ​和 <li>(双标签)​

        <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>

	<!--标签嵌套-->
    <ol>
        <li>HTML</li>
            <ol>
                <li>标题</li>
                <li>换行</li>
                <li>标签</li>
            </ol>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>

  • 无序列表

    分条展示数据，每一条数据都是单独的一行，每一行前面只有一个黑点

    实现一个无序列表需要用到两个标签：<ul>(双标签) ​和 <li>(双标签)​

        <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>

超链接

点击后可以跳转到指定连接

用 <a>(双标签) ​标签实现

有两个属性：

  • ​href​：目标页面的链接地址

    完整的 URL；相对路径；绝对路径

  • ​target​：指定目标页面的打开方式

    ​_self​:在当前窗口打开页面

    _blank​:开启一个新窗口打开页面

    <a href="https://www.bilibili.com/">bilibili</a>
    <a href="https://www.baidu.com/" target="_self">baidu</a>
    <a href="https://www.github.com/" target="_blank">github</a>

图片

用 <img/> ​标签实现

有三个属性：

  • ​src​：定义图片的路径

    完整的 URL；相对路径；绝对路径

  • ​title​：定义鼠标悬停时提示的文字

  • ​alt​：定义图片加载失败时提示的文字

<img src="https://t7.baidu.com/it/u=3967993555,2117869320&fm=193&f=GIF" title="美女" alt="图片加载失败">

表格

一个表格需要由多个标签组合实现

  • ​<table>​：表示整张表格

    • ​<thead>​：表头

    • ​<tbody>​：内容

      ​<tr>​：表示一行

      ​<td> ​或 <th>​：表示一列(th 自带加粗和居中效果)

    • <tfoot>​：表尾

如果不区分表头、内容、表尾可以不写 <thead>​ <tbody>​ <tfoot> ​标签，直接写 <tr> ​和 <td>​

<!--完整代码-->
<h1>员工技能竞赛评分表</h1>
<table>

    <thead>
	    <tr>
	        <th>排名</th>
	        <th>姓名</th>
	        <th>得分</th>
	    </tr>
    </thead>

    <tbody>
	    <tr>
	        <td>1</td>
	        <td>张三</td>
	        <td>100</td>
	    </tr>

	    <tr>
	        <td>2</td>
	        <td>李四</td>
	        <td>99</td>
	    </tr>

	    <tr>
	        <td>3</td>
	        <td>王五</td>
	        <td>95</td>
	    </tr>
    </tbody>

    <tfoot>
	    <tr>
	        <td>平均分</td>
	        <td></td>
	        <td>98</td>
	    </tr>
    </tfoot>

</table>


<!--简化版代码-->
<h1>员工技能竞赛评分表</h1>
<table>
    <tr>
        <th>排名</th>
        <th>姓名</th>
        <th>得分</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>100</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>99</td>
    </tr>
    <tr>
        <td>3</td>
        <td>王五</td>
        <td>95</td>
    </tr>
</table>

跨行/跨列表格

案例 1：跨行表格（使用 td ​的 rowspan ​属性）

案例 2：跨列表格（使用 td ​的 colspan ​属性）

<!--跨行表格：新增备注列，跨三行-->
<h1>员工技能竞赛评分表</h1>
<table>
    <tr>
        <th>排名</th>
        <th>姓名</th>
        <th>得分</th>
        <th>备注</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>100</td>
        <td rowspan="3">前三名升职加薪</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>99</td>
    </tr>
    <tr>
        <td>3</td>
        <td>王五</td>
        <td>95</td>
    </tr>
</table>

<!--跨列表格：新增总人数、平均分、及格率，都跨两列-->
<h1>员工技能竞赛评分表</h1>
<table>
    <tr>
        <th>排名</th>
        <th>姓名</th>
        <th>得分</th>
        <th>备注</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>100</td>
        <td rowspan="6">前三名升职加薪</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>99</td>
    </tr>
    <tr>
        <td>3</td>
        <td>王五</td>
        <td>95</td>
    </tr>
    <tr>
        <td>总人数</td>
        <td colspan="2">200</td>
    </tr>
    <tr>
        <td>平均分</td>
        <td colspan="2">96</td>
    </tr>
    <tr>
        <td>及格率</td>
        <td colspan="2">80%</td>
    </tr>

表单

​<form> ​表单标签：

属性：

  • ​action​：定义数据的提交地址（url地址​、相对路径​、绝对路径​）
  • ​method​：定义数据的提交方式（GET(默认)​、POST​）
<form action="https://baidu.com/login" method="get">
    用户名：<input type="text" name="userName"><br>
    密码：<input type="password" name="passWord"><br>
    <input type="submit" value="登录">
    <input type="reset" value="清空">
</form>

表单项

表单项就是表单提交的时候，表单中的内容。

表单项有如下几种：

  • ​input ​文本框
  • ​textarea ​多行文本框
  • ​select​ 下拉框

注意：表单项使用的时候 ​name​​属性的参数一定要定义，不然后端收不到

常用的表单项如下：

  1. 单行文本框
  用户名：<input type="text" name="userName">
  1. 密码框
  密码：<input type="password" name="passWord">
  1. 单选框

单选框，每次只能提交一个值。

​<input/> ​标签的 name=radio ​时，就是单选框。

规则：

  1. 如果多个单选框的 name ​相同时，就会产生互斥效果
  2. 需要设置 value ​属性值
  3. 不勾选默认提交空的值
  4. 如果需要默认选中，则设置 checked ​属性
  5. 如果选中多个，默认提交后一个
  性别：<input type="radio" name="gender" value="1" checked>男
       <input type="radio" name="gender" value="0">女
  1. 复选框
  爱好：<input type="checkbox" name="hobby" value="1">唱
       <input type="checkbox" name="hobby" value="2">跳
       <input type="checkbox" name="hobby" value="3">rap
       <input type="checkbox" name="hobby" value="4">篮球
       <input type="checkbox" name="hobby" value="0">其他
  1. 隐藏域

隐藏域也是表单项，其提交的内容不会显示在页面上，但是在提交的时候也会被携带。

  <input type="hidden" name="fid" value="123456789">
  1. 提交按钮
  <input type="submit" value="登录">
  1. 重置按钮
  <input type="reset" value="清空">

‍

  1. 多行文本框

属性：

​rows​：显示几行的高度

​cols​：一行可以显示几个字符

  <textarea name="intro" cols="30" rows="10"></textarea>
  1. 下拉框

下拉框需要由 select ​标签和 option ​选项实现。

​select ​标签表示这是一个下拉框，option ​是下拉框的选项。

规则：

  1. name 属性设置到 select 标签上
  2. 如果 option 属性没有设置 value，那么提交的时候默认提交标签中的内容，如果设置了 value 属性，默认提交 value 的值
  3. 如果需要设置默认选中项，需要使用 selected ​属性
      <select name="province">
          <option value="0" selected>-请选择-</option>
          <option value="1" >北京</option>
          <option value="1" >天津</option>
          <option value="1" >河北</option>
      </select>
  1. 文件上传
   <input type="file">

内置窗口

内置窗口 iframe ​标签可以结合 a ​标签，实现页面跳转（要求：a ​标签 target ​属性的值是 iframe ​标签 name ​属性的值）

<!--src属性：内置窗口默认加载的页面-->
<iframe src="https://www.baidu.com" width="500" height="200" name="abc"></iframe>
<a target="abc" href="https://www.bilibili.com">B站</a>
<a target="abc" href="https://www.github.com">Github</a>
<a target="abc" href="https://www.tencent.com">腾讯</a>

二、CSS

能够修改页面的样式，美化页面

1.基本语法

/*基本语法*/
选择器{
	属性:值;
}

/*注释语法*/
/*注释内容*/

案例：
p{
	front-size:80px;
}

2.引入方式

方式一：行内式

在 HTML 标签的内部使用 style 属性引入样式

语法：style="样式名:值;样式名:值"​

缺点：代码利用率低；css 代码和 html 代码在一起影响阅读；影响文件大小

/*案例*/
<input type="button" value="提交" 
       style="width: 80px;
               height: 40px;
               color: aqua;
               background-color: red"
>

方式二：内嵌式

在 HTML 文件的 head标签​ 中通过 style标签​ 定义公共样式，然后通过选择器确定样式的作用对象范围

缺点：只能在一个页面中生效，其他文件不能复用

/*案例*/
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input {
            width: 80px;
            height: 40px;
            color: aqua;
            background-color: red
        }
    </style>
</head>
<body>
<input type="button" value="提交">

方式三：外部样式表

将 CSS 样式单独写在一个.css 文件中，那个 HTML 文件需要使用样式，哪个 HTML 文件就通过 link标签​ 引入 css 文件

语法：<link href="css文件目录" rel="stylesheet">​

说明：

  1. link 标签的 href属性​：是引入文件的路径

  2. link 标签的 rel属性​：css 文件固定是 stylesheet​

/*css文件内容*/
input {
    width: 80px;
    height: 40px;
    color: aqua;
    background-color: red
}

/*html文件内容*/
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="demo03.css" rel="stylesheet">
</head>
<body>
<input type="button" value="提交">
</body>

‍

3.选择器

元素(标签名)选择器

作用：可以通过标签类型决定哪些标签使用这个样式

/*语法：*/
标签名 {
	属性:值;
}

/*案例：给页面中的所有span标签设置字体颜色为蓝色*/
span {
    color: blue;
}

id 选择器

作用：可以通过 id 属性选择哪些元素使用这个样式

说明：在 HTML 中，每个 id 都是唯一的。因此设置 id 属性时不允许重复

/*语法：*/
#id属性值 {
	属性:值;
}

/*案例：给页面中id为s1的标签设置字体颜色为蓝色*/ 
#s1{
    color: blue;
}

/*HTML页面内容*/
<span id="s1">这是个span标签</span>

class 选择器

作用：根据标签的 class 属性值设置哪些元素使用这个样式

说明：在 HTML 中，class 不是唯一的，不同的标签可以设置相同的 class 属性值。同时一个标签也可以拥有多个 class 属性。

/*语法：*/
.class属性值 {
	属性:值;
}

/*案例：给页面中id为s1的标签设置字体颜色为蓝色*/ 
.class01 {
    color: blue;
}

/*HTML页面内容*/
<span class="class01">这是个span标签</span>

组合选择器

作用：多个选择器公用一个样式

/*语法：*/
选择器1,选择器2,选择器N{
	属性:值;
}

/*案例：给设置一个组合选择器*/ 
p, #i1, .hn {
    color: aqua;
    background-color: red
}

/*HTML页面内容*/
<p>这是一个P标签</p>
<input type="text" id="i1" value="这是一个文本框">
<h1 class="hn">这是一个一级标题</h1>
<h2 class="hn">这是一个二级标题</h2>

4.常用 CSS 样式

属性作用备注
color字体颜色
font-size字体大小
border边框
weidth宽度
height高度
background-color背景颜色
text-decoration超链接去下划线text-decoration:none

5.浮动

浮动的作用：浮动原始设计目的是实现文字环绕效果。是在不遮挡其他元素文字情况下，改变当前元素在父容器中的位置

解释：可以想象成一张图片插到 word 中，图片移动后，文字的布局会做相应的变化，但是不会被图片遮住。

用法：使用 css 样式的 float​ 属性

说明：元素向某个方向浮动后，原本的位置就会让出来，这个时候其他没有浮动的元素会顶替其位置，具体可以参考下图：

image

案例 1：写一个页面，页面有一个父容器 div，里面有三个小的容器，让第一个容器向右浮动

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outerDiv{
            width: 1000px;
            height: 1000px;
            border: 1px solid black;
            background-color: black;
        }
        .innerDiv{
            width: 100px;
            height: 100px;
            border: 1px solid white;
        }
        #div1{
            background-color: antiquewhite;
            float: right;
        }
        #div2{
            background-color: cornflowerblue;
        }
        #div3{
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>
<div class="outerDiv">
    <div class="innerDiv" id="div1">div1</div>
    <div class="innerDiv" id="div2">div2</div>
    <div class="innerDiv" id="div3">div3</div>
</div>
</body>

案例 2：写一个页面，页面有一个父容器 div，里面有三个小的容器，让第一个容器向左浮动

结果分析：div1 浮动之后会脱离文档流，脱离文档流的元素不会占据页面控件。因此其他元素会顶替 div1 的位置，然后 div1 向左浮动还是原来的位置，因此 div1 会覆盖 div2。同时由于文字不会覆盖，因此 div1 会将 div2 的文字挤回原来的位置，因此 div2 和 div3 的文字重叠了

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outerDiv{
            width: 1000px;
            height: 1000px;
            border: 1px solid black;
            background-color: black;
        }
        .innerDiv{
            width: 100px;
            height: 100px;
            border: 1px solid white;
        }
        #div1{
            background-color: antiquewhite;
            float: left;
        }
        #div2{
            background-color: cornflowerblue;
        }
        #div3{
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>
<div class="outerDiv">
    <div class="innerDiv" id="div1">div1</div>
    <div class="innerDiv" id="div2">div2</div>
    <div class="innerDiv" id="div3">div3</div>
</div>
</body>

案例 3：将三个子块都向左移动

结果分析：由于父容器内只有三个 div 元素，且这三个容器都浮动了，因此这三个容器都会脱离文档流，脱离文档流的元素会按顺序排列，因此他们三个没有覆盖，而是按脱离的顺序排列在了页面同一行上，如果页面一行控件不够会自动换行

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outerDiv{
            width: 1000px;
            height: 1000px;
            border: 1px solid black;
            background-color: black;
        }
        .innerDiv{
            width: 100px;
            height: 100px;
            border: 1px solid white;
        }
        #div1{
            background-color: antiquewhite;
            float: left;
        }
        #div2{
            background-color: cornflowerblue;
            float: left;
        }
        #div3{
            background-color: rebeccapurple;
            float: left;
        }
    </style>
</head>
<body>
<div class="outerDiv">
    <div class="innerDiv" id="div1">div1</div>
    <div class="innerDiv" id="div2">div2</div>
    <div class="innerDiv" id="div3">div3</div>
</div>
</body>

6.定位

定位的作用：让块元素出现在指定位置

用法：使用 css 样式的 position、left、right、top、bootom ​属性

  • ​position​：static 静态(默认)​ absolute 绝对​ relative 相对原本位置（原位置不会被占用）​ fixed 相对浏览器窗口（原位置会被占用）​
  • ​left​：距离左侧像素
  • ​right​：距离右侧像素
  • ​top​：距离顶部像素
  • ​bootom​：距离底部像素

案例：写一个页面，页面包含三个 div 元素，让 div1 定位到指定位置

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .innerDiv{
            width: 100px;
            height: 100px;
            border: 1px solid white;
        }
        #div1{
            background-color: antiquewhite;
            position: absolute;
            right: 100px;
            top: 100px;
        }
        #div2{
            background-color: cornflowerblue;
        }
        #div3{
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>
<div class="outerDiv">
    <div class="innerDiv" id="div1">div1</div>
    <div class="innerDiv" id="div2">div2</div>
    <div class="innerDiv" id="div3">div3</div>
</div>
</body>

7.盒子模型

页面布局都是一块一块嵌套之后显示其对应的内容，大的块可以包含多个小的块，大的块就可以理解成一个大盒子装了多个小盒子。盒子之间都是存在缝隙的，盒子模型就是为了调整盒子间缝隙的大小。

相关概念：给 div 设置宽、高后，容器的大小就是宽 × 高，当再设置外边框 boder 后，他会在原来的区域外部增加对应像素的边框，而不会侵占块内的面积

  • 外边距：边线向外的距离
  • 内边距：边线向内的距离（边距不会侵占真是容量，而是会向外整体扩展）

用法：

  • 内边距：padding​
  • 外边距：margin​

案例 1：设置三个 div，排列到一排，然后设置边距

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .innerDiv{
            width: 100px;
            height: 100px;
            border: 1px solid white;
            float: left;
        }
        #div1{
            background-color: antiquewhite;
            /*设置右外边距10个像素*/
            margin-right: 10px;
            /*设置左内边距10个像素*/
            padding-left: 10px;
        }
        #div2{
            background-color: cornflowerblue;
            /*外边距逆时针设置：上右下左*/
            margin: 10px 20px 30px 40px;
        }
        #div3{
            background-color: rebeccapurple;
            /*上下左右都是10个像素*/
            margin: 10px;
        }
    </style>
</head>
<body>
<div class="outerDiv">
    <div class="innerDiv" id="div1">div1</div>
    <div class="innerDiv" id="div2">div2</div>
    <div class="innerDiv" id="div3">div3</div>
</div>
</body>

案例 2：将整体内容移动到页面中间

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outerDiv{
            width: 500px;
            height: 500px;
            background-color: chocolate;
            margin:50% auto;
        }
        .innerDiv{
            width: 100px;
            height: 100px;
            border: 1px solid white;
            float: left;
        }
        #div1{
            background-color: antiquewhite;
        }
        #div2{
            background-color: cornflowerblue;
        }
        #div3{
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>
<div class="outerDiv">
    <div class="innerDiv" id="div1">div1</div>
    <div class="innerDiv" id="div2">div2</div>
    <div class="innerDiv" id="div3">div3</div>
</div>
</body>

三、JavaScript

JS 是一种运行于浏览器上的脚本语言，可以实现页面内容控制。他有以下特点：

  1. 脚本语言：js 是解释性语言，会在程序执行的时候对源文件进行解释

  2. 基于对象：可以实现封装，可以模拟继承，不支持多态，因此不是面向对象的语言，而是基于对象。

  3. 弱类型：js 中也有明确的数据类型，但是声明的变量可以接收所有类型的数据，并且会在程序执行中自动转换类型

  4. 事件驱动：js 代码需要页面事件触发之后才能执行

  5. 跨平台：仅需要浏览器支持

‍

1.通用语法

1.1 JS 的两种引入方式

  • 方式一：在 head ​中使用 script标签 ​定义 js 代码（放到其他位置也可以生效）

    <head>
    <meta charset="UTF-8">
    <title>Title</title>
	<!--如果是js代码，type可以省略-->
    <script type="text/javascript">
         alert("Hello World");
    </script>
</head>

  • 方式二：将 js 代码写在 .js ​文件中，然后在 html 页面使用 script标签 ​引入文件

    <head>
    <meta charset="UTF-8">
    <title>Title</title>
	<!--如果是js文件，type可以省略-->
    <script type="text/javascript" src="jsdemo01.js"></script>
</head>

注意事项：

  1. 一个 HTML 文件可以有多个 script标签​

  2. 一个 script标签 ​只能使用一种 js 的引入方式，如果一个 script标签 ​已经使用 src 属性了，那么里面不能再写 js 代码了，会不生效。

  3. 如果需要多种方式使用 js 代码，那么可以再写一个 script标签​

‍

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jsdemo01.js"></script>
    <script>
        alert("Hello JavaScript...!");
    </script>
</head>

1.2 数据类型

js 是弱类型的，不是没有类型。

变量在声明的时候是不指定类型的，在赋值的时候才确定类型。

变量的声明：var 变量名 = 值;​

种类类型说明
数值number数值类型都是 number，不区分整数和浮点
字符串stringjs 中不严格区分单引号和双引号，因此都可以表示字符串
对象object非空字符串和非零数字都会被认为是 true
布尔boolean
函数function
命名未赋值undefined值也是 undefined
赋予 nullobject值是 null
获取数据类型typeof这是一个操作符，会返回数据类型
    <script>
        //数值类型
        var i = 10;
        console.log(i);
        console.log(typeof i);
        console.log("number" ==typeof i)

        //布尔类型
        i = 1>10;
        console.log(i);
        console.log(typeof i);

        //对象类型
        i = new Object();
        console.log(i);
        console.log(typeof i);

        //字符串类型
        i = "hello world";
        console.log(i);
        console.log(typeof i);

        //方法类型
        function fun1(){

        }
        console.log(typeof fun1);

        //命名未赋值
        var x;
        console.log(x);
        console.log(typeof x);
        
        //赋予null
        i = null;
        console.log(i);
        console.log(typeof i);
    </script>

1.3 逻辑运算

运算符基本与 java 一样，有两个需要特殊说明

  • ​==​：只会比较值，如果两边数据类型不一致会尝试将两边的数据都转成 number 再比较
  • ​===​：除了比较值以外，还会比较数据类型

其他说明：

  1. 如果数字类型做运算会保留小数部分

  2. ​0​、null​、undefined​、""​ ​都会被认为是 false

1.4 数组

说明：

  1. 定义方式：var arr = [];​ 或 var arr = [true,1]; ​或 var arr = new Array();​

  2. 如果定义一个空数字默认长度是 0

  3. 可以随意给指定下标赋值，完成后数组长度自动在最大下标上加一,中间没有赋值的其内容为 undefined​

var arr = [];//定义一个空数组
alter(arr.length);//0

arr[2]=10;
alter(arr.length);//3
alter(arr[1]);//undefined

1.5 流程控制

说明：

  1. ​if ​语法和 java 一样，判断逻辑查看上面的逻辑运算部分

  2. ​switch ​语法和 java 一样

  3. ​while ​语法和 java 一样

  4. ​for ​语法和 java 一样

  5. ​增强for​ ​语法和 java 不一样：for(var index in arr)​

//增强for循环案例
var arr = ["北京","上海","广州","深圳"];

for(var index in arr){//这里拿出来的不再是对象，而是下标
	alert(arr[index]);
}

1.6 函数

  • 第一种方式：

    //格式：
function 方法名(参数列表){
	方法体;
}

//案例：
//定义一个无参函数
function fun1(){
     alert("无参函数fun1被调用");
}
//定义有参函数
function fun2(a,b){
      return a + b;
}

  • 第二种方式：

    //格式
var 方法名 = function (参数列表){
	方法体;
}

//案例：
var fun3 = function (a,b) {
    return a + b;
}

其他注意事项：

  1. js 中不允许方法重载，如果两个方法名一样，下面的会覆盖上面的

1.7 常用对象

  • 数组

    1. 创建方式
    //方式1：不传参数
var arr = new Array();
//方式2：传入长度参数
var arr = new Array(5);
//方式3：直接赋值
var arr = new Array("张三",11,false);
//方式4：直接写数组
var arr =["张三",11,false];
    1. 常用 API
    方法说明案例
    pop移除并返回最后一个元素​var res = fruits.pop();​
    push从末尾增加元素并返回长度​var res = fruits.push();​
    indexOf查找元素第一次出现的位置​var res = fruits.indexOf("榴莲");​
    lastIndexOf查找元素最后出现的位置​var res = fruits.lastIndexOf("榴莲");​
    reverse反转数组​fruits.reverse();​
    slice(开始下标,结束下标)截取数据【前闭后开】​fruits.slice(2,4);​

  • Boolean 对象

    1. 常用 API
    方法说明案例
    toString把布尔值转化为字符串，并返回结果​var res = fruits.pop();​
    valueOf返回布尔类型原始值​var res = fruits.push();​

  • Date 对象

    Date 是一个时间对象，新创建的对象会存放当前时间

    1. 常用 API
    方法说明案例
    new Date()创建当前事件对象​var dateObj = new Date();//输出后返回的是当前时间 Mon Jun 02 2025 17:06:06 GMT+0800 (中国标准时间)​
    getFullYear返回时间对象的四位年份​var dateObj = new Date();​
    var date = dateObj.getFullYear();//2024​
    getMonth返回时间对象的月份​var dateObj = new Date();​
    var date = dateObj.getMonth();//6​
    getDate返回 Date 对象的所在天​var dateObj = new Date();​
    var date = dateObj.getDate();//2号​
    getHours返回时间对象的小时​var dateObj = new Date();​
    var date = dateObj.getHours();//17时​
    getMinutes返回时间对象的分钟​var dateObj = new Date();​
    var date = dateObj.getMinutes();//30分​
    getSeconds获取时间对象的秒​var dateObj = new Date();​
    var date = dateObj.getSeconds();//20秒​
    setFullYear设置时间对象四位年份
    setMonth设置时间对象的月份
    setDate设置 Date 对象的所在天
    setHours设置时间对象的小时
    setMinutes设置时间对象的分钟
    setSeconds设置时间对象的秒

  • Math

    1. 常用 API
    方法说明案例
    abs(x)返回 x 的绝对值​Math.abs(-123);//123​
    ceil(x)对 x 向上取整​Math.ceil(-123);//123​
    floor(x)对 x 向下取整​Math.ceil(2.1);//3​
    round(x)对 x 四舍五入​Math.ceil(2.1);//2​
    Math.ceil(2.5);//3​
    trunc(x)只保留 x 的整数部分​Math.ceil(2.5);//2​

  • Number

    1. 常用 API
    方法说明案例
    isInteger(x)检测 x 是否是整数​Number.isInteger(2.1);//false​
    isNaN(x)检测 x 是否是 NaN​Number.isNaN(2.1);//false​
    parseInt(x)将字符串 x 转为整数​Number.parseInt('2.1');//2​
    parseFloat(x)将字符串 x 转为小数​Number.parseFloat('2.1');//2.1​

  • String

    1. 常用 API

    参考菜鸟教程 API 文档：www.runoob.com/js/js-obj-s…

1.8 自定义对象

自定义对象有两种方式：

  • 方式 1：Object 形式的自定义对象
  • 方式 2：花括号形式的自定义对象

  • 方式 1：Object 形式的自定义对象

    //基本语法:
	//1.定义一个对象
	var 对象名 = new Object();
	//2.定义对象中的属性
	对象名.属性 = 值;
	//3.定义对象中的方法
	对象名.方法名 = function (){
		方法体
	}

//案例
	//定义对象
	var obj = new Object();
	//定义变量
	obj.title = "Title";
	//定义方法
	obj.fun1 = function () {
	            alert("调用了obj对象的fun1方法");
	}
	alert(obj.title);
	obj.fun1();

  • 方式 2：花括号形式的自定义对象

    //基本语法
var 对象名 ={属性名1:值1,属性名2:值2, .... , 函数名: function(){}};

//案例
	var student = {
	          stuName : "John",
	          stuNo : "123456",
	          stuClass : "student",
	          study : function(){
	          alert("学生正在学习")
	      }
	}

1.9 js 中的事件

什么是事件？事件是电脑输入设备与页面进行交互时，页面做出的响应

常用的事件：还有其他事件，如果有需要可以去查找 API 文档

事件作用说明
onload浏览器加载完成页面后执行的事件页面加载完成之后，常用于做 js 代码初始化操作
onclick鼠标单击事件常用于按钮的点击响应操作
ondbclick鼠标双击事件
onmouseover鼠标悬停事件
onmousemove鼠标移动事件
onmouseleave鼠标离开事件
onkeydown键盘按键按下事件
onkeyup键盘按键抬起事件
onfocus获取焦点事件鼠标点到输入框里的时候触发
onblur失去焦点事件常用于输入框失去焦点后验证输入内容是否合法
onchange内容发生改变事件常用于下拉列表和输入框内容发生该表后的操作
onsubmit表单提交事件【事件要放在表单 form 上】常用于表单提交前，验证所有表单项是否合法。返回 false 就会阻止表单提交
onreset点击 reset 类型的按钮触发的事件常用于清空表单内容

事件的注册方式：静态注册、动态注册

什么是事件注册？

就是告诉浏览器，当事件响应后要执行哪些操作代码。一个事件可以绑定多个方法。

静态注册：通过 HTML 标签的事件属性，绑定对应的事件相应方法

动态注册：先通过 js 代码获取标签的 dom 对象，然后通过 dom对象.事件名 = function(){} 这种形式赋予事件响应后的代码​，动态注册代码要放在页面加载之后 onload 里面，不然可能会因为找不到对象报错

  • onload 事件

    1. 静态注册
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function onloadfun1(){
            alert("执行页面加载方法");
        }
    </script>
</head>

<body onload="onloadfun1()">
</body>
    1. 动态注册
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function (){
            alert("执行页面加载方法");
        }
    </script>
</head>
<body>
</body>

  • onclick 事件

    1. 静态注册
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function onclickfun1(){
            alert("点击了按钮");
        }
    </script>
</head>
<body>
<button onclick="onclickfun1()">按钮</button>
</body>
    1. 动态注册
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function() {
            var btnObj = document.getElementById("btn");
            btnObj.onclick = function() {
                alert("点击了按钮");
            }
        }
    </script>
</head>
<body>
<button id="btn">按钮</button>

  • onblur 事件

    1. 静态注册
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function onblurfun1(){
            console.log("调用失去焦点事件")
        }
    </script>
</head>
<body>
	用户名:<input type="text" name="username" onblur="onblurfun1()">
</body>
    1. 动态注册
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var textObj = document.getElementById("username");
            textObj.onblur = function () {
                console.log("调用数去焦点事件");
            }
        }
    </script>
</head>
<body>
用户名:<input type="text" name="username" id="username">
</body>

  • onchange 事件

    1. 静态注册
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function onloadfun1() {
            alert("调用了onclick事件");
        }
    </script>
</head>
<body>
请选择你心中的女神：
<select onchange="onloadfun1()">
    <option>吉泽</option>
    <option>大桥</option>
    <option>玩偶</option>
</select>
</body>
    1. 动态注册
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function() {
            var selectObj = document.getElementById("select1");
            selectObj.onchange = function() {
                alert("调用了onclick事件");
            }
        }
    </script>
</head>
<body>
请选择你心中的女神：
<select id="select1">
    <option>吉泽</option>
    <option>大桥</option>
    <option>玩偶</option>
</select>
</body>

    ‍

  • onsubmit 事件

    1. 静态注册

    注意：静态注册时，onsubmit 事件需要写一个 return 后才能接收方法的返回值，否则返回 false 接收不到

    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function onloadfun1() {
            alert("发现数据不合法，禁止提交数据");
            return false;
        }
    </script>
</head>
<body>
<form action="https://www.baidu.com" method="get" onsubmit="return onloadfun1()">
    <input type="submit" value="提交表单">
</form>
</body>
    1. 动态注册
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function() {
            var formObj = document.getElementById("form1");
            formObj.onsubmit = function() {
                alert("调用了onsubmit事件,发现数据不合法");
                return false;
            }
        }
    </script>
</head>
<body>
<form action="https://www.baidu.com" method="get" id="form1">
    <input type="submit" value="提交表单">
</form>
</body>

1.10 Document 对象

  1. Document 对象的理解：

    • Document 对象管理着页面所有的 HTML 文档内容

    • document 是一种树形结构的文档，具有层级关系

    • 他把所有的标签都对象化

    • 可以通过 document 对象访问所有的标签对象

  2. 关系参考下图： image

  3. 模拟对象结构参考如下【里面的属性都是可以直接使用的】

      class Dom{
  	private String id;//id属性
  	private String tagName;//标签名
  	private String className;//标签的class值
  	private String innerHTML;//起始标签和结束标签中间的内容
  	private String innerText;//起始标签和结束标签中间的文本

  	private List<Dom> childNodes;//当前节点的所有子节点
  	private Dom firstChild;//当前节点的第一个子节点
  	private Dom lastChild;//当前节点的最后一个子节点
  	private Dom parentNode;//当前节点的父节点
  	private Dom nextSibling;//当前节点的下一个节点
  	private Dom previousSibling;//当前节点的上一个节点
  }

‍

  1. Document 对象的常用方法

    方法描述案例
    getElementById(id)根据 id 属性获取页面标签对象​var videoObj = document.getElementById("video");​
    getElementsByName(name)根据 name 属性获取页面标签对象数组​var hobbyObjs = document.getElementsByName("hobby");​
    getElementsByTagName(tagName)根据标签名获取页面标签对象数组​var inputTagObjs = document.getElementsByTagName("input");​
    createElement("类型")创建一个元素（不会显示到页面上）​var divObj = doucment.createElement("div");//在内存中创建div​
    appendChild(对象)为当前节点添加子节点（会显示在页面上）​document.body.appendChild(divObj);//将上面创建的元素添加到body里面​

1.11 BOM 对象

BOM 对象是浏览器对象，他表示整个浏览器窗口（包含浏览器的内容：历史记录、地址栏、控制台等），因此他的范围比 DOM 对象更大，包含 DOM 对象。它可以通过浏览器的 API 控制浏览器的行为。

BOM 对象使用 window ​表示，访问 window ​对象的属性，默认可以不写 window​

image

相关 API 如下：

  • 三种弹窗

    1. 第一种：信息提示框

      //1.完整写法 window对象由浏览器提供使用，无需创建
window.alert("提示内容");
//2.简化写法 调用window对象的属性可以不写window
alert("提示内容");

    2. 第二种：信息输入框

      let age = window.prompt("请输入你的年龄：", "18");//提示内容、默认值
if (age !== null) {
  console.log("你输入的年龄是：" + age);
} else {
  console.log("你取消了输入");
}

    3. 第三种：信息确认框

      var flag = window.confirm("询问内容");//点击确定返回true，点击取消返回false
if(!flag){//如果点击取消，则取消提交
	retrun false;
}
return true;//如果点击确定返回true

  • 定时任务

    到间隔时间后，执行一次指定动作

    //1.基本语法 window.setTimeout(执行方法,多长时间后执行);

//案例1：参数中写一个方法
window.setTimeout(funciton (){
	console.log("hello");
},2000);

//案例2：调用外部参数
function fun1() {
    var divs = document.getElementsByTagName("div");
     divs[0].innerHTML = divs[0].innerHTML-1;
}
window.setTimeout(fun1,1000);//1秒后调用方法fun1

  • 历史记录

    作用：可以实现上一页、下一页的跳转

    history.back();//向前翻页【省略了window】
history.firward();//向后翻页【省略了window】
history.go(n);//向前翻动n页(n为整数表示向前翻页，n为负数表示向后翻页)【省略了window】

  • 地址栏

    作用：改了地址之后，浏览器会自动跳转该页面

    location.href="http://www.baidu.com";//自动跳转到百度【省略了window】

  • sessionStorage

    作用：用于存储会话级数据（浏览器关闭后需要清除的数据）

    查看方法：打开浏览器控制台，找到应用程序，选择会话存储，选择 url，可以看到键值对

    //1.存储数据 语法：sessionStorage.setItem("key","value");
sessionStorage.setItem("userName","123456");
//2.读取数据 语法：sessionStorage.getItem("key");
sessionStorage.getItem("userName");
//3.清除数据 语法：sessionStorage.removeItem("key");
sessionStorage.removeItem("userName");

  • localStorage

    作用：用于存储持久级数据（浏览器关闭后还需要保存的数据）

    查看方法：打开浏览器控制台，找到应用程序，选择本地存储，选择 url，可以看到键值对

    //1.存储数据 语法：localStorage.setItem("key","value");
localStorage.setItem("userName","123456");
//2.读取数据 语法：localStorage.getItem("key");
localStorage.getItem("userName");
//3.清除数据 语法：localStorage.removeItem("key");
localStorage.removeItem("userName");
avatar
文章
阅读
粉丝