【Web基础入门】一文搞懂HTML + CSS + JavaScript 简单了解

最新推荐文章于 2024-08-03 15:42:27 发布

Lishier99

最新推荐文章于 2024-08-03 15:42:27 发布

阅读量3.5k

点赞数 9

分类专栏：前端文章标签：前端 javascript html css json

本文链接：https://blog.csdn.net/weixin_43895667/article/details/126103139

版权

前端专栏收录该内容

2 篇文章 2 订阅

订阅专栏

html

html是什么

超文本标记语言，运行在浏览器上

超文本：超级文本，如流媒体、声音、视频
标记语言：由大量的标签组成
标签：任何一个标签都有开始标签和结束标签

html不是编程语言，没有变量，数据类型，控制语句等，只能算一种浏览器的规范

html怎么开发

创建.html或.htm结尾的文件，记事本打开就可以开发，打开浏览器就可以运行，无需编译

web是什么

web就是网站开发

web程序员

web前端：html css js

前端浏览器展示的效果

web后端：java/c++/c/python

前端浏览器展示的内容，是动态数据，是由后台java程序或者c++程序等提供的

B/S架构的原理

B:客户端
S:服务器
http协议：w3c制定的，浏览器和web服务器传送消息的协议

粗略流程（计算机网络知识）：

用户在浏览器输入URL，或者点击链接
浏览器（客户端）向浏览器发送请求request
服务器给浏览器（客户端）一个响应（html代码），浏览器队该html代码进行解释执行，展示到浏览器界面

第一个html

1、用记事本编辑

2、用浏览器运行

3、基本标签（标签包含开始标签和结束标签）

基本框架
<html></html>：根标签
<head></head>：头标签
<body></body>：网页体（显示在网页上）

常用标签
<title></title>：网页标题
<p></p>：段落标签
<h1></h1>：标题标签，h1、h2、h3、h4...
<br>（独目标签）：换行
<hr>（独目标签）：分割线
<font></font>：字体标签

补充标签
<pre></pre>：保留格式标签，源码是什么格式，浏览器显示什么格式
<b></b>：粗体字标签
<i></i>：斜体字标签
<ins></ins>：插入字标签
<del></del>：删除子标签
<sup></sup>：右上角字体标签
<sub></sub>：右下角锥体标签
<!DOCTYPE html>：标识html5标签
<meta>：编码方式标签，使用什么编码方式打开此文件

4、常用属性（放在标签里面，如

color：颜色属性
size：字号属性
charset：编码，浏览器默认GBK简体中文，程序员一般工作区默认UTF-8
border：边框宽度，1px
width:宽度，可以用百分比表示，50%
height：高度
align：对齐方式，center居中对齐
colspan:列td合并，"=2"即合并两个列
rowspan:行tr合并，"=2"即合并两个行

bgcolor：指定背景颜色，一般放在body
background：指定背景图片，"=文件路径”

5、实体符号

&nbsp：空格
&lt：小于号
&gt：大于号

6、table标签

<table></table>：表格标签
<tr></tr>：表格中的一行（类似一维数组）
<td></td>：一行中的一列（类似二维数组）
<th></th>:可以代替td，相当于加粗，居中的td
<thead></thead>和<tbody></tbody>和<tfoot></tfoot>可以将表格分成三部分，为js提供便利

7.img标签

<img></img>中间没有内容等同于<img/>

属性
src:指定图片路径
width：指定图片宽度，同时不指定高度会等比例缩小放大，否则容易失真
title：鼠标指针悬停时的提示信息
alt：图片加载失败时的提示信息

8.超链接

href：超链接属性，指定链接路径，可以是网络路径，也可以是本地路径
<a href="">  超链接的内容：可以是文字，也可以是图片<img src=" "/> <a/>
自动添加下划线，鼠标指针停留自动变成小手

target：指定点击超链接后是新增浏览器窗口，还是当前窗口等
	_blank:新窗口属性
	_self:当前窗口属性
	_top:当前窗口的顶级窗口属性，嵌套窗口比如用<iframe>
	_parent:当前窗口的父窗口属性，嵌套窗口比如用<iframe>

9.列表

<ul></ul>：无序列表，只有图标
<ol></ol>:有序列表,有1234
<li></li>：列表项
列表项<li>内部可以继续嵌套列表<ul>或<ol>

属性
type：制定列表项图标格式，circle、square、disc或ABC、123

10.表单

表单是什么？有什么用？
   1、收集用户数据，如登入注册界面（制定了输入窗口）
   2、发送请求，携带数据（超链接只有发送请求但不携带数据）
   
<form></form>标签：一个网页可以有多个表单

表单属性
action：相当于href功能，制定请求路径，与超链接的区别：超链接直接点击即可发送，而表单要收集完数据，点击提交按钮，才会发送，所以要设置按钮

<input/>输入域
type属性：制定不同样式
    提交按钮（type="submit"）
    普通按钮（type="button")
    重置按钮（type="reset")：重置表单，要放在表单里面
    文件按钮（type="file"):选文件，需要后台io处理
    文本框（type="text")
    密码框（type="password")
    选择框（type="radio")：需要指定value，name需要一致，checked指默认开始选中
    复选框（type="checkbox"):需要指定value，name需要一致，checked指默认开始选中
    下拉框（type="select"):需要指定name，selected指定默认选中，包含多个<option>
	隐藏域（type="hidden"):隐藏，但会提交数据name=value
    
name属性：来标识数据（w3C制定的，所有浏览器都是这样的）
    数据链接格式：url?name=value&name=value....（该value是数据，不是下面那个value属性）
    按钮不需要填写name，否则会将按钮的value发送（没用的数据）
    
value属性
	文本框不用制定，因为发送value是输入的数据
	而选择框/复选框需要制定value
	按钮的value就是按钮的文字提示

maxlength属性：最多输入多少字符

readonly：只读，会提交数据
disabled：只读，不提交数据

<option></option>：是下拉列表里面的选择框，需要指定value
<textarea></textarea>:文本域，不用制定value，由用户自己填写

补充

下拉列表多选
size：表示下拉框最多显示条目数量
multiple：表示支持多选

11、id属性

1、每个节点都有id属性
2、同一个网页id属性不能重复
3、id代表这个节点，id是这个节点的身份证号
4、为JavaScript服务，对节点进行增删改，即索引各个节点

12、div和span：图层

1、图层是什么？有什么用？
每一个图层就是一个独立的盒子，最主要的作用就是布局
2、若table表格用于布局，会非常不灵活，太规则了
3、div和span左上角有x、y坐标，可以非常灵活布局
4、现代化都是采用div和span进行布局
5、div默认独自占用1行，span不会占用1行，只是一块

css快速入门

css是什么？

层叠样式表语言，属于样式语言，用来修饰html，让html更好看
依附于html，为html服务

如何在html中嵌入css？

内联定义方式
定义内部样式块对象
链入外部样式表文件

第一个css

内敛定义方式

<标签 style= "样式名：样式值;
             样式名：样式值;
             样式名：样式值">
</标签>

任何一个标签都可以加style使用内敛定义方式
样式名和样式值通过查文档学习

定义内部样式块对象

在<head>标签中，定义样式块<style></style>

链入外部样式表文件（常用）

在外部创建样式表.css文件
在内部链接外部.css文件
<link rel="stylesheet" type="text/css" href="文件路径"/>

选择器

css中常见的选择器包括
标签选择器:用于所有该类标签
	标签名{}
	div{
		width:100px
	}
id选择器：可以指定用于某个标签
	#id{}
	$username{
		width:100px
	}
类选择器:可以同时指定不同类的标签
	.class{}
	.student{
		width:100px
	}
	在需要的标签上加上class=""属性

选择器优先级
标签<类<id

以上是css的重点，能够看懂前端css代码即可

以下是常用的样式，列举一二，在遇到不认识的样式时，对照官方文档进行学习

隐藏样式

display:none 隐藏控件
display:block 显示控件

list-style-type:none  隐藏列表ul/ol左边的点

文本装饰样式

text-decoration:
	underline:下划线
	overline:上划线
	line-through:贯穿线
	blink:闪烁（很多浏览器不兼容）
	none：取消样式（强制去除超链接默认的下划线）

鼠标悬停效果

hover{ }：专门设置鼠标悬停效果
如input:hover{
	color:red 鼠标放在input控件中，字体变红色
}
注意:input:hover的:两边不能有空格

内外补丁

margin-top:在控件外的上边打个补丁
padding-left:在控件内的左边打个补丁

浮动样式

front:left:浮动效果

定位样式

position:absolute 严格定位
top:300px
left:300px

光标样式

cursor:pointer  光标变成小手，尽量不要用hand，有兼容问题

JavaScript

JavaScript是什么

1、简称JS，与java没有多大关系
2、是一种脚本语言，运行在浏览器上，以普通文本形式保存，可以直接用记事本打开（直接运行，不用生成.class等）
3、是一种编程语言，有变量，控制语句等
4、主要用于操作HTML的节点，产生动态效果

JavaScript包括三块：ECMAScript、DOM、BOM

ECMAScript:JavaScript核心语法
DOM:对HTML的某个节点进行操作
BOM:对浏览器进行操作，如网页前进、后退、关闭、刷新

嵌入JavaSript代码的三种方式

行间事件

JavaScript是一种事件驱动型的编程语言，通常在发生某件事的时候，会去执行某段代码。其中事件包括鼠标单击click，鼠标经过mouseover等。所有事件句柄都是一标签的属性形式存在，例如按钮对象input button有一个onclick这样的属性，当用户点击按钮对象，触发了鼠标单击click事件，那么注册在onclick事件句柄当中的JS代码就会执行。onclick后面的代码实际上是由浏览器负责执行

脚本块的方式
1. 在页面打开的时候自上而下依次执行JS代码
2. 一个界面可以出现过个脚本块
3. 位置任意

<script type="tet/javascript">
	JS代码
</script>

引入外部独立的JS文件

<script type="text/javascript" src="路径"></script>

alert函数
1. 引入的JS文件里面的JS代码会自上而下的运行
2. 可以多次引入
3. <script></script>之间的代码不会运行

window.alert('hello world');
用于弹窗，可以用单引号或双引号括字符串
分号可以省略，同时可以运行多个alert语句。

console.log函数

conloe.log(’hello world‘);
输出信息到控制台，类似与system.out.println();

标识符命名规则

由字母、数字、$、_组成
以字母、$、_开头
不可以使用保留字
要有意义，驼峰命名法，蛇形命名法

JS变量

java语言：是一种强类型语言，有编译阶段，属于编译型语言。在编译阶段就确定了变量的类型，而且永远不改变
int x;
x = 100; 	//x为int类型
x = false; 	//java编译器报错
int a,b,c = 100; 	//a,b,c都是int类型，a和b没有赋值，c是100

JS语言：是一种弱类型语言，没有编译姐段，直接浏览器打开解释执行，不需要指定变量数据类型，在赋值的时候赋什么类型数据，变量就是什么类型变量。
var i;
i = 100; 	//i为int类型
i = false; 	//i为布尔类型
var a,b,c = 100; 	//a和b没有赋值，系统默认赋值undefined，undefined是一个具体的值，c是100

JS函数

java的方法
[修饰符列表] 返回值类型 方法名(形式参数列表){
	函数体;
}
public int sum(int a ,int b){
	return a+b;
}

JavaScript的函数:不需要返回值类型，传什么类型，返回什么类型
function 函数名(形式参数列表){
	函数体;
}
function sum(var a,var b){  	//var可以省略
	alert(a+','+b);
    return a+b;
}

sum();	//输出"undefined,undefined"
sum(1);	//输出"1,undefined"
sum(1,2);	//输出"1,2"
sum(1,2,3);	//输出"1,2"
//注意：这也是JS没有重载机制的一种体现。

另一种定义函数方式
sum = function(a,b){
    return a+b;
}

行间事件调用函数（在事件句柄中写调用函数代码）
<input type="button" value="hello" onclick="sum(1,2)"/>
    
脚本块的方式调用函数
<script type="text/javascript">
    函数声明;
	函数调用;	//声明和调用代码位置前后顺序无所谓，浏览器默认先执行声明（与代码位置无关）
</script>

JS全局变量和局部变量

全局变量：在函数体之外声明的变量，在浏览器打开的时候分配空间，浏览器关闭的时候才会销毁
局部变量：在函数体当中声明的变量，在函数被调用的时候分配空间，函数执行结束之后，内存释放

特别的地方
function sum(){
	i = 1;
    j;		//全局变量必须手动赋值，否则报错
}
alert(i);	//如果没有var关键字，那么i不管在哪里声明，都是全局变量，不会报错

JS重载问题

JS没有重载机制，后面定义的函数会覆盖前面定义的同名函数（不看参数）

JS的数据类型

ES6之前有6种数据类型
原始类型（基本数据类型）
undefined
	1、只有一个值，就是undefined
	2、当一个变量声明后没有赋值，系统默认赋值undefined
Number
	1、包括整数，浮点数，NaN，Infinity
	2、NaN不是一个数字，但类型是Number，意义是运算结果本应该是一个数字，却返回不了数字时，就会产生NaN，例如100/"a" -> NaN。
	3、isNaN(x),会先尝试转换成数字，例如x是true，那么转换成1。在进行判断是否为NaN
	判断结果返回true，表示不是一个数字，返回false，表示是一个数字
	4、Inifity是无穷大的意思，如100/0（java会报异常）
	5、Number(x)，该函数可以将不是数字的变量转换成数字，例如Number("123.123")->123
	6、parseInt(123.123) -> 123 不会四舍五入,只取整数部分
	7、ceil(123.123) -> 124 向上取整
	8、10/3=3.33333 是浮点类型（与java不同）
String
	1、var s1 = "abc" 属于String类型
	2、var s2 = new String("abc") 属于Object类型
	3、不管是String类型的字符串s1，还是Object类型的s2，他们的方法都一样
	4、常用方法
		charAt() 获取指定下标位置的字符
		concat() 连接字符串
		IndexOf()	获取某个字符串在该字符串中第一次出现的索引
		lastIndexOf()	获取某个字符串在改字符串中最后一次出现的索引
		replace()	替换
		split()		拆分
		substr()	截取，（起始下标，长度）
		substring()		截取，（起始下标，终止下标）
		toLowerCase()	转小写
		toUpperCase()	转大写
Boolean
	1、Boolean()函数，可以将不是Boolean类型的变量转换成Boolean类型，非空/非零就是为true
	2、0、“”、NaN、undefined转换成false
	3、Boolean()函数在JS种会被隐式调用
Null    
	1、var v = null; null是基本数据类型，但typeof运算符的运算结果是"object"

对象类型
Object
	1、JS内置的类型，一般看作所有类型的超类/基类
	2、属性：prototype
		可以给对象动态扩展属性和方法
		var o = new Object;
		Object.prototype.doSome = function(){
			xxx;
		}
		o.doSome();		//声明时没有该方法，通过prototype扩展了一个方法
		Object.prototype.username = "username";
		console.log(o.username)		//通过prototype扩展了一个属性
		由于Object是其他类型的基类，所以也可以通过prototype给String等类型扩展方法、属性
		
		
ES6之后引入了两个新类型
Symbol
BigInt

动态获取变量的数据类型 typeof 变量名
返回结果是数据类型的字符串，如"undefined"、"number"、"string"、"object"、"function"，都是小写
判断两个变量的数据类型是否相同，用==
if(typeof x == "number" && (typeof y == typeof z))

官方文档参考

https://developer.mozilla.org/en-US/docs/Learn/JavaScript

JS的类

类的定义
第一种方法：
function 类名(形式参数列表){		//既是函数定义，又是类的定义，关键在于调用方式
    this.属性名 = 参数;
    this.方法名 = function(){
   		xxx;
    }		
}

函数名();	//上面看作函数定义，不会在堆中new对象
var obj = new 类名();		//上面看作类定义，会导致在浏览器的堆中new一个新对象

第二种方法：
类名 = function(形式参数列表){
	this.属性名 = 参数;
    this.方法名 = function(){
    	xxx;
    }	
}

同理可以用上面的prototype来对类进行扩展函数和属性
 
补充：访问属性名可以用：对象名["属性名"]来访问对象中的某个属性

null、NaN、undefined的区别

1、== 与 === 的区别
	== 等同运算符，只比较值是否相等
	=== 全等运算符，既比较值是否相等，又比较数据类型是否相等

2、null与undefined是等同关系，值相等
   三者都不是全等关系，因为类型都不同null(Object)、NaN(Number)、undefined(undefined)

JS的常用事件

任何一个事件都有对应的事件句柄。事件句柄是在事件名称钱添加on即可。

焦点事件

1、失去焦点事件
<input type="text" onblur="console.log('失去焦点')"/>
2、获取焦点事件
<input type="text" onfocus="console.log('获得焦点')"/>

用途：在注册界面，当鼠标点击其他input时，原先的input就失去焦点了，也就可以触发一些判断逻辑。

鼠标点击事件

1、click单击事件
<input type="button" value="click事件" onclick="console.log('单击')"/>

2、dblclick双击事件
<input type="button" value="dblclick事件" ondblclick="console.log('双击')"/>

键盘事件

1、keydown键盘按下事件
<input type="text" value="keydown事件" onkeydown="console.log('keydown')"/>
2、keyup键盘抬起事件
<input type="text" value="keyup事件" onkeyup="console.log('keyup')"/>
3、keydown、keyup事件结合
<input type="text" value="key事件" onkeyup="console.log('keyup') onkeydown="console.log('keydown')"/>

鼠标事件

1、鼠标经过事件
<div id="mouseover" onmouseover="consolo.log('鼠标经过了')"></div>
2、鼠标按下事件
<div id="mousedown" onmousedownr="consolo.log('鼠标按下了')"></div>
3、鼠标弹起事件
<div id="mouseup" onmouseup="consolo.log('鼠标弹起了')"></div>
4、鼠标移动事件
<div id="mousemove" onmousemove="consolo.log('鼠标移动了')"></div>
5、鼠标离开事件
<div id="mouseout" onmouseout="consolo.log('鼠标离开了')"></div>

表单事件

<form action="xxx" onsubmit="console.log('表单提交了') onreset="console.log('表单重置了')">
1、表单提交事件
<input type="submit" value='提交'/>
2、表单重置事件
<input type="reset" value='重置'/>
</form>

文本选中事件

<textarea row="10" cols="30" onselect="console.log('文本被选中了')"></textarea>

<input type="text" onselect="console.log('文本被选中了')"/>

下拉列表选项改变事件

<select onchange="console.log('选项被修改')">
	<option value="Chinese">语文</option>
	<option value="Math">数学</option>

页面加载完毕事件

<body onload="console.log('页面加载完毕')"></body>
注意：不是在页面加载过程中触发，而是页面所有元素加载完毕之后才会触发

JS注册事件的两种方式

第一种方式，注册事件

在标签中使用事件句柄，在事件句柄中编写JS代码（调用函数），当事件句柄对应的事件被触发时候，"注册"在事件句柄的这个代码就被监听器调用。

当页面打开时，button标签中的say()函数并不会调用，知识在页面打开时完成事件的绑定，即注册事件，只有事件发生后，say()才会被调用，像这种函数，被称作回调函数

回调函数的特点

监听器负责调用，不是程序员主动调用。
事件发生之后，监听器才会调用函数。

<script type="text/javascript">
	function say(){
		console.log("hello");
	}
</script>
<input type="button" value="say" onclick="say()"/>

补充：根据节点id获得节点对象

<input type="button" id="mybtn" value="按钮"/>

想要在JS种获取该input对象
<script type="text/javascript">
	//JS当中有一个内置的隐含的对象叫做：document，document代表整个HTML文档。document是DOM的顶级对象
	//JS当中有一个内置的隐含的对象叫做：wiondow，window代表整个浏览器窗口。window是BOM的顶级对象
	
	var mybtnElt = document.getElementById("mybtn");	//通过顶级对象的getElementById方法找到该节点
	mybtnElt.type = "checkbox";		//重点：在JS中，当你获取了某个节点后，这个节点中有什么属性你就可以访问他的属性，并修改，前端会发生变化
</script>

第二种方式，

<input type="button" value="say" id="saybtn" onclick=""/>	//这里句柄不注册函数

<script type="text/javascript">
	function say(){
		console.log("hello");
	}
	
	sayElt = document.getElementById("saybtn");
	sayElt.onclick = say;	//通过这种方式来注册函数，注意这里不是调用，所以不是say()，只是把say()函数注册在onclick句柄上，网页打开的时候就会执行。
	sayElt.onclick = function(){
		console.log("我是一个回调函数");	//也可以直接用匿名函数注册在句柄上
	}
</script>

注意执行顺序

<script type="text/javascript">
	sayElt = document.getElementById("saybtn");		//若先写script，那么input节点还没有在浏览器上加载，则getElementById会报错
	sayElt.onclick = function(){
		console.log("我是一个回调函数");	
	}
</script>

<input type="button" value="say" id="saybtn" onclick=""/>	

解决方式：只要让input节点加载完后，再执行script代码，回到上面的load内容——让页面全部元素加载完，才会执行body里面的程序
所以只需要把script的代码封装成注册函数，在<body onload = "注册函数"></body>即可
即等待网页元素加载完毕事件发生后，就会调用句柄事件中的pageLoad函数，也就把回调函数注册在button上了（此时button早已加载出来了）
<body onload="pageLoad()">
	<script type="text/javascript">
         function pageLoad(){
         	sayElt = document.getElementById("saybtn");		
            sayElt.onclick = function(){
                console.log("我是一个回调函数");	
            }
    	}
    </script>

	<input type="button" value="say" id="saybtn" onclick=""/>	
</body>

onload事件句柄

<body>
	<script type="text/javacript">
		function myfun(){
			console.log("go")；
		}
		window.onload = myfun	//页面打开的时候会先把myfun注册在onload句柄上，等待页面加载事件load执行完，监听器才会调用myfun()函数
		//window就是DOM顶级对象，可以直接调用onload属性
</body>

同样可以简写成匿名函数
<script>
	windos.onload = function(){
		console.log("go");
	}
</script>

经典案例（以后就这么编写事件）

<body>
	<script type="text/javascript">
		window.onload = function(){
			var btnElt1 = document.getElementById("btn1");
			btnElt1.onclick = function(){
				console.log('按钮1被点击');
			}
			
			var btnElt2 = document.getElementById("btn2");
			btnElt2.onclick = function(){
				console.log('按钮2被点击');
			}
		}
	</sctipt>
	<input type="button" id="btn1" value="按钮1"/>
	<input type="button" id="btn2" value="按钮2"/>
</body>

捕捉用户的回车键

1、keydown事件
2、捕捉键值，当敲入的是"Enter"，才执行
3、接收监听器调用函数时传递过来的事件对象
4、键盘事件对象，有keyCode属性，通过keyCode属性获取键值
5、判断键值=="Enter"，键盘上的回车的键值永远是13，ESC的键值永远是27

<body>
	<script type="text/javascript">
		window.onload = function(){		
			var usernameElt = document.getElementById("username");
			usernameElt.keydown = function(key){		//1、注册keydown事件
			//3、function(key)的key类似java的形式参数，这里的function(key)是被监听器调用，所以key是用来接收监听器调用时传递过来的实参（事件对象）
				if(key.keyCode == 17){		//4、获取键值 5、判断键值
					console.log("输入回车")
				}
			}
		}
	</script>
	
	<input type="text" id="username"/>
</body>

JS运算符之void

绝大多数运算符与java相同，例如++、--

<a href="javascript:void(0)" onclick="JS代码"></a>   //保留了超链接格式，点击后运行JS代码，且不会跳转界面

void运算符执行表达式，但不会返回任何结果，javascript:void(0)结果就是废弃掉链接路径，不会跳转界面的核心

JS的控制语句

JS控制语句绝大多数和java一样
选择语句if、switch
循环语句while、for
转向语句break、continue、return

不同的：
数组（JS中的数组对象创建的时候用的时中括号[]）
var arr = [1,2,3];


以下了解即可
for...in语句
for(var a in arr){		//arr是数组，a是arr的下标
	console.log(arr[a]);		//根据a下标遍历数组arr
}

for...in语句也可以遍历对象属性
function Employee(enum,estring){		//类的定义
	this.enum = enum;
	this.estring = estring; 
}
var e = new Employee(123,'456');		//创建对象
三种遍历属性方式
console.log(e.num +','+ estring);	//通过对象访问
console.log(e["enum"] +','+ e["estring"])		//通过对象+数组下标
for(var a in e){
	console.log(e["a"])		//a就相当于上面的"enum"和”estring"，是字符串，含义是数组下标，通过遍历数组下标访问数组
}

JS数组

创建

第一种方式
var a = [];
var a1 = [1,2,3];
var a2 = [1,true,"123"];		//数组原始可以不一致
a2[100] = 100    	//数组长度可以变,自动扩容，中间添加的内容是undefined
console.log(a2[-100]);		//不报错，undefined

第二种方式
var arr1 = new Array();
var arr2 = new Array(3):	//3不是数组元素，而是长度为3
var arr3 = new Array(1,2,3,4,5);	//数组内容是1，2，3，4，5

Array常用函数

push():添加一个元素，并放在末尾，可以是不同类型
pop():将数组末尾的元素弹出，并且数组长度-1
reverse():翻转数组
jion():连接字符串

内置对象Date

var time = new Date();
console.log(time);  //Fri Jul 08 2022 23:09:31 GMT+0800 (中国标准时间)
抽取时间，并格式化输出
var year = time.getFullYear();	//getYear过时了，只有两位数
var month = time.getMonth()+1;	//0-11
//var day = time.getDay();	获取的是星期几
var day = time.getDate();
var	hour = time.getHours();
...
var strTime = time.toLocaleString();	//获取本地的日期表达形式 2022/7/8 下午11:15:01

重点方法
console.log(new Date().getTime())	//获取从1970:00:00到现在的总毫秒数

BOM和DOM区别和联系

1、BOM（浏览器对象模型）：通过BOM的对象和方法可以完成对浏览器窗口的操作，例如关闭浏览器，前进后退，等等
2、DOM（文档对象模型）：通过DOM的对象和方法可以完成对文档的操作，如每个标签，属性
3、BOM是浏览器，DOM是浏览器的网页，所以BOM是包含DOM的

操作div和span

var divElt = document.getElementById("div1");	//老方法，先根据id取节点
divElt.innerHTML = "<font color='red'>用户名不能为空!</font>";		//修改属性，可以修改<div>标签之间的内容，而且会让浏览器对字符串解释执行
divElt.innerText = "<font color='red'>用户名不能为空!</font>";		//修改属性，可以修改<div>标签之间的内容，不过是原样输出字符串，不会解释执行

同理用到span中
var spanElt = document.getElementById("span1");	
spanElt.innerHTML = "<font color='red'>用户名不能为空!</font>";		
spanElt.innerText = "<font color='red'>用户名不能为空!</font>";

复选框的全选和取消全选

具体代码可以参考：复选框的全选和取消全选案例视频

获取文本框的value（用户输入的内容）

经典操作

window.onload = function(){
	var usernameElt = document.getElementById("username");
	console.log(usernameElt.value);
}

获取下拉列表选中项的value

一般数据库存储下拉列表的value，所以获取下拉列表的value去数据库查询
例如存储各个省01、02、03...取得省份可以再查该省的各个市

方法一
<select id="province" onchange="alert(this.value)">		//一改变选项，就可以用this.value获取
	<option value="">--请选择省份--</option>
	<option value="01">广东</option>
</select>

方法二：老方法
window.onload = function(){
	document.getElementById("province").onchage = function(){
		console.log(this.value)	
		console.log(document.getElementById("province").value)	//this就是这个节点对象
	}
}

显示网页时钟

window.onload = function(){
	document.getElementById("displayTimeBtn").onclick = funciton(){
		v = window.setInterval("displayTime()",1000)		//该函数可以实现，每隔1000ms调用一次，无限循环
	}
	
	document.getElementById("stopTimeBtn").onclick = funciton(){
		window.clearInterval(v)			//setInterval设置完后有个返回值，将返回值设置为全局变量，方便之后重置间隔，即达到取消周期的作用clearInterval
	}
}

function displayTime(){
	var nowTime = new Time();
	document.getElementById("timediv").innerHTML = nowTime.toLocaleString();	
	//之前学习过innerHTML就是编译执行输出字符串
	//tolocaleString就是当前机器默认的时间表示
}

打开和关闭窗口（BOM操作）

window.open(url,targe) 	//与超链接相似，都能发送请求
window.close()	//关闭窗口

默认开新窗口
<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com')"/>

开一个窗口，在当前窗口显示
<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com','_self')"/>

开一个窗口，在新窗口显示
<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com','_blank')"/>

开一个窗口，在父窗口显示
<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com','_parent')"/>

开一个窗口，在顶级窗口显示
<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com','_top')"/>

alert和confirm

alert是消息框
confirm是确认框，有返回值Boolean类型

function del(){
	var ok = window.confirm("确认删除？");
	if(ok){
		alert("删除");
	}
}

设置当前窗口为顶级窗口

可能使用场景：若操作菜单子窗口控制显示子窗口，当长时间没有使用系统时，token过期，那么点击操作菜单的时候，需要重新回到登录界面，那么登陆界面就需要设置成顶级窗口，覆盖原来的各个子窗口

if(window.top! = window.self){
	window.top.location = window.self.location		//地址
}

历史记录（回退到上个界面，前进下个界面）

onclick="window.history.back()"		//回退
onclick="window.history.go(1)"		//前进1步
onclick="window.history.go(-1)"		//前进-1步，相当于后退一步

多种发送请求方法

1、浏览器地址栏填写url(重点)
2、超链接(重点)
3、提交表单(重点)
4、window.open(url,target)(了解)
5、js代码：window.location.href或document.location.href(重点)
	function go(){
		window.location.href="www.baidu.com";
		window.location="www.baidu.com";
		
		document.location.href="www.baidu.com";
		document.location="www.baidu.com";
	}

JSON

eval函数

作用：把一串字符串当做JS代码解释执行
window.eval("var i = 100")等同于var i = 100

JSON是什么？

JavaScript标记对象，是一种轻量级的数据交换格式

轻量级：JSON的体积小，但表示的数据很多
数据交换：不同语言之间进行的数据通讯。例如C语言对数据库进行查询后，将数据拼接成XML格式的字符串，通过网络的形式将XML格式的字符串传递给java，java接收后再解析XML，获取里面的数据，这样就完成了一次数据交换。同理也可以用JSON格式，或者其他语言之间进行数据交换。
对象：JavaScript当中，json以对象的形式存在

能够数据交换，包括XML、JSON
XML：解析难度大，语法严格
JSON：解析难度小，语法简单

怎么定义JSON对象，怎么访问对象的属性

1、JSON的属性值可以是任意类型
2、JSON是无类型对象，直接大括号包起来就是一个JSON对象
3、数组使用[]，JSOn是用{}

定义JSON对象
var jsonObj={
		"属性名":属性值
}

var emp = {
	"empno" : 123,
	"ename" : "name"
}

访问JSON对象
emp.empno
emp["empno"]

JSON的属性也可以是JSON对象
var emp1 = {
	"city" : "北京",
	"street" : "中山路"
} 
var emp2 = {
	"name" : "小明",
	"address" : emp1
}
或者
var emp2 = {
	"name" : "小明",
	"address" : {	"city" : "北京","street" : "中山路"}
}

访问
emp2.address.city
emp2.address.street
所以JSON访问属性非常容易，靠"."即可

处理JSON对象流程

现从java后台中获取JSON类型的字符串
var fromJavaJSON = "{\"nanme\":\"zhangsan\",\"age\":20}";	//这里是用定义的方式模拟从java得到的字符串
其中\"的含义就是转义字符，所以就是取到了一串内容为：{"nanme":"zhangsan","age":20}的字符串

接下来我们就要拼接成JSON格式，并且把这串代码当做JSON代码来解释执行，也就是取得JSOn对象
window.eval("var stu = "+fromJavaJSON)	//现拼接字符串，再用eval把字符串当做JS代码执行，从而获得了JSON对象stu

经典案例（将后台传递的数据展示在前端表格中）

<body>
	<script type="text/javascript">
	var fromJavaJSON = "{\"total\":2,\"students\":[{\"name\":\"zhangsan\",\"age\":20},{\"name\":\"lisi\",\"age\":21}]}";	//还没用后端，这里是用定义的方式模拟从java得到的字符串
		window.onload = function(){
			document.getElementById("stubtn").onclick = function(){
				window.eval("var json = " + fromJavaJSON);
				document.getElementById("total").innerHTML = json.total;
				
				var students = json.students;
				var html = "";
				for(var i = 0;i < students.length;i++){
					html += "<tr>";
					html += "<td>" + students[i].name + "</td>";
					html += "<td>" + students[i].age + "</td>";
					html += "</tr>";
				}
				document.getElementById("tbody").innerHTML = html;
			}
		}
	</script>
	
	<input type="button" id="stubtn" value="显示学生信息"></button>
	<table border="1px" width="40%">
		<tbody id="tbody">
		
		</tbody>
	</table>
	总记录数是：<span id="total"></span>条。
</body>

正则表达式

参考：正则表达式

经典案例-表单验证

具体代码参考：经典案例-表单验证视频

JS拿元素的三种案例

1、根据id
var div1 = document.getElementById("div1");
2、根据name
var aihaos = document.getElementsByName("aihao");
3、根据标签名
var divs = document.getElementsByTagName("div");