程序员经验分享-hwhale

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

2023-11-08

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服务器传送消息的协议

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

  1. 用户在浏览器输入URL，或者点击链接
  2. 浏览器（客户端）向浏览器发送请求request
  3. 服务器给浏览器（客户端）一个响应（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是什么？

  1. 层叠样式表语言，属于样式语言，用来修饰html，让html更好看

  2. 依附于html，为html服务

如何在html中嵌入css？

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

第一个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

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

嵌入JavaSript代码的三种方式

行间事件

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

  1. 脚本块的方式
    1. 在页面打开的时候自上而下依次执行JS代码
    2. 一个界面可以出现过个脚本块
    3. 位置任意
<script type="tet/javascript">
	JS代码
</script>
  1. 引入外部独立的JS文件
<script type="text/javascript" src="路径"></script>
  1. alert函数
    1. 引入的JS文件里面的JS代码会自上而下的运行
    2. 可以多次引入
    3. <script></script>之间的代码不会运行
window.alert('hello world');
用于弹窗，可以用单引号或双引号括字符串
分号可以省略，同时可以运行多个alert语句。
console.log函数
conloe.log(’hello world‘);
输出信息到控制台，类似与system.out.println();
标识符命名规则
  1. 由字母、数字、$、_组成
  2. 以字母、$、_开头
  3. 不可以使用保留字
  4. 要有意义，驼峰命名法，蛇形命名法
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. 焦点事件
1、失去焦点事件
<input type="text" onblur="console.log('失去焦点')"/>
2、获取焦点事件
<input type="text" onfocus="console.log('获得焦点')"/>

用途：在注册界面，当鼠标点击其他input时，原先的input就失去焦点了，也就可以触发一些判断逻辑。
  1. 鼠标点击事件
1、click单击事件
<input type="button" value="click事件" onclick="console.log('单击')"/>

2、dblclick双击事件
<input type="button" value="dblclick事件" ondblclick="console.log('双击')"/>
  1. 键盘事件
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. 鼠标事件
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>
  1. 表单事件
<form action="xxx" onsubmit="console.log('表单提交了') onreset="console.log('表单重置了')">
1、表单提交事件
<input type="submit" value='提交'/>
2、表单重置事件
<input type="reset" value='重置'/>
</form>
  1. 文本选中事件
<textarea row="10" cols="30" onselect="console.log('文本被选中了')"></textarea>

<input type="text" onselect="console.log('文本被选中了')"/>
  1. 下拉列表选项改变事件
<select onchange="console.log('选项被修改')">
	<option value="Chinese">语文</option>
	<option value="Math">数学</option>
  1. 页面加载完毕事件
<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");
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端

javascript

html

css

json

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

  • Chrome 19 无法识别字体粗细：较轻

    我刚刚启动了一个正在开发的项目以进行一些修改 并注意到该声明font weight lighter正在通过以下方式提供服务 font face并且它不再在网站上运行 参见图片 顶部镀铬 底部 ff 自昨晚以来 我的系统 Windows 上没

  • 参考上一个问题：为什么 VBA 没有加载所有发票详细信息

    除了上一个问题之外 我们在销售发票上仍然存在相同的加载失败问题 下面的 VBA Json 仍然仅加载一行或第一个产品详细信息行 而不是与表中该销售发票合作的所有产品行详细信息 我们希望下面的 VBA 能够根据参数加载发票详细信息 例如 如果

  • 通过 JavaScript 单击按钮/页面提交

    我想了解 asp net 框架如何知道何时单击了按钮 因此一旦收到请求 就会在服务器上触发其单击事件 我需要了解它是如何工作的 因为我想从 JavaScript 触发按钮的服务器单击事件 我能够从 JavaScript 执行页面提交 doc

  • 如何在 Rails 5 中设置资产管道以使用自定义字体？

    我必须使用自定义字体贾米尔 努里 纳斯塔莱克 http www urdujahan com urdu fonts Jameel 20Noori 20Nastaleeq zip在 Rails 5 应用程序中 我以前从未使用过 Rails 中的

  • 如何显示接下来的三个图像单击加载更多按钮

    我需要一个加载更多按钮来显示图像 页面加载时 我显示 3 个图像 单击 加载更多 按钮后 接下来的 3 个图像将显示在屏幕上 我尝试了下面的代码 但它不起作用 你能帮我解决这个问题吗 function item slice 0 2 show

  • 使用 float:left 与 display:inline-block 的 jQuery UI 拖放排序比较

    我这里有两个例子 这两个例子之间的唯一区别是 一种使用display inline block 另一种使用float left li doc item 显示 内联块 与 li doc item float left 我的问题是 displa

  • Apache Camel 的 JsonMappingException

    我在骆驼路线上遇到以下异常 Caused by com fasterxml jackson databind JsonMappingException No serializer found for class org apache cam

  • 播放没有音频标签的音频

    是否可以在没有音频标签的情况下仅使用 javascript 播放音频 我通过 tinyMce 编辑器注入脚本 因为我无权访问网站的后端 并且它不支持客户端的音频标签 她只想要当您将鼠标悬停在图像上时发出简单的声音 我已经完成了所有设置 但是

  • ES6 模块范围

    我有代码 lib js var a a export var b b main js console log a a variable is not available in a global scope import b from lib

  • HTML5 文件 API 和 AJAX 上传分块问题

    我编写了一个带有单独进度的拖放多个文件上传等 除了一件事之外 它工作得非常好 上传较大文件时 有时浏览器会锁定 直到上传完成 我认为这是因为该文件存储在浏览器的内存中并占用了浏览器可用的所有资源 我想知道 是否可以逐段读取文件并在读取时通过

  • 从网页运行 ClickOnce 应用程序，无需用户操作

    我们有一个基于 Java 的 Web 应用程序以及用 C 编写的相同应用程序 如果 java 检查器发现客户端计算机上没有安装 Java 则应该运行该应用程序 这个想法是运行 C 单击一次 http en wikipedia org wik

  • 了解 Document.createElement()

    我在用着GWT及其底层DOM能力 我基本上想要实现的是 Have a div包含一些文本的元素 其中一些文本将被包围span元素 span 元素可相互拖动并提供上下文菜单 New span元素可以由最终用户动态创建 它可能是这样的 在应用程

  • WordPress 子主题包括包含文件

    我在一家WordPress使用 AMPPS 作为本地主机在我的本地计算机上进行设置 使用 Delta 主题 我创建了一个子主题 delta2 child 初始设置效果很好 但是 我需要更改包含文件夹中名为 home slider php 的

  • 如何将MathJax公式转换为img

    Mathjax 现在在我的项目中运行良好 但有一个问题 有没有办法将MathJax的公式 纯html和css 转换成img文件 我可以保存 MathJax 可以配置为生成 SVG 看http docs mathjax org en late

  • javascript - 如何获取对象名称或关联数组索引名称？

    我有一个像这样的 JSON 对象 var list name1 element1 value1 name2 element1 value2 如何提取所有 nameX 字符串值 例如 假设我想将它们连接在一个字符串中输出 例如 name1 n

  • 当php脚本通过ajax运行时显示进度条

    我有一个通过 ajax 向服务器提交值的表单

  • Graphql 将多个查询合并（组合）为一个？

    我正在尝试使用 JavaScript 将多个 GraphQL 查询合并为一个查询 我正在寻找这样的东西 let query3 mergeQueries query1 query2 我们事先不知道哪些查询将被组合 假设我有这样的查询 输入查询

  • 为什么 JavaScript 中是 [1,2] + [3,4] = "1,23,4" ？

    我想将一个数组的元素添加到另一个数组中 所以我尝试了以下方法 1 2 3 4 它的回应是 1 23 4 到底是怎么回事 The 操作员没有为数组定义 发生的事情是 JavaScript将数组转换为字符串并将它们连接起来 Update 由于这

  • 如果 POST 响应仅包含 ID，如何将数据保存到我的 Ember 存储？

    Ember 数据期望我的服务器在每次成功后返回完整的对象POST 但是 我的 API 只返回一种元对象 其中包含id 当 Ember 收到此对象时 记录中的现有数据将被删除 除了id 例如 当我这样做时 var asset App Asse

  • 如何在单元测试中使用 JSON 发送请求

    我的 Flask 应用程序中有在请求中使用 JSON 的代码 我可以像这样获取 JSON 对象 Request request get json 这一直工作得很好 但是我正在尝试使用 Python 的 unittest 模块创建单元测试 但

随机推荐

  • 华清 c++ day5 9月12

    ifndef HOMEWORK H define HOMEWORK H include

  • 分治法( Divide and Conquer)

    分治法也称为分解法 分治策略等 分治法算法思想如下 1 将一个问题划分为同一类型的若干子问题 子问题最好规模相同 2 对这些子问题求解 一般使用递归方法 但在问题规模足够小时 有时也会利用另一个算法 3 有必要的话 合并这些子问题的解 以得

  • 《算法零基础100讲》 最值算法

    题目1 题目链接 int findMaxConsecutiveOnes int nums int numsSize int cnt 0 int max 0 for int i 0 i

  • Java项目校园兼职平台（含代码）

    一 项目分析 1 本平台根据角色定位不同有不同的模块 首先系统有一个登录注册模块 属于兼职人员的模块有个人信息管理和兼职申请 属于管理员的模块有基本信息维护 兼职信息投放和系统管理 2 平台登录注册 用户可以通过账号密码登录平台 如果用户是

  • error: You have not concluded your merge (MERGE_HEAD exists).git拉取失败

    拉取git上的更新时出现错误如下 error You have not concluded your merge MERGE HEAD exists hint Please commit your changes before mergin

  • 何为PostgreSQL？

    PostgreSQL是以加州大学伯克利分校计算机系开发的POSTGRES 版本 4 2为基础的对象关系型数据库管理系统 ORDBMS POSTGRES 领先的许多概念在很久以后才出现在一些商业数据库系统中 PostgreSQL是最初的伯克利

  • OculusRiftS与Unity.UI的交互（6）-播放视频

    1 在Hierarchy空白处点右键 gt CreateEmpty 创建出一个空节点 并命名为Video 2 在这个Video的Inspector中 点击AddComponent 添加组件 VideoPlayer 添加完成后 将视频素材拖入

  • npm构建脚本_NPM脚本简介

    npm构建脚本 by Mohammed Ajmal Siddiqui 由Mohammed Ajmal Siddiqui NPM脚本简介 Introduction to NPM Scripts NPM scripts are among my

  • 享元模式详解

    享元模式 即共享元素 主要用于减少创建对象的数量以减少系统的复杂度 应用实例有池技术如数据库连接池 线程池等 享元模式尝试重用现有的同类对象 如果未找到匹配的对象 则创建新对象 比如说你有通过单车出行的需求 正好有共享单车来满足你的需求 这

  • Linux磁盘空间占满，但搜不到大文件

    使用 df h 查看磁盘空间 使用 du sh 查看每个目录的大小 经过查看没有发现任何大的文件夹 继续下面的步骤 如果您的Linux磁盘已满 但是通过 du sh 找不到大文件 可能是因为有一些进程正在写入磁盘 但是这些文件已经被删除 但

  • JDK8 学习笔记

    JDK7 try catch 支持处理多异常 try catch Exc Exc 一个catch 捕获多个异常 字节码文件跟小 数字类型 支持下划线 int num 123 345 float num2 222 33F long num3

  • 根据三角形的三条边长(长、中、短三条边)，来判断三角形类型

    根据三角形的三条边长 长 中 短三条边 来判断三角形类型 注意 1 一个三角形的边应该都为正数 2 一个三角形的边都应该满足三角形条件 两边之和大于第三边 如果有两边的平方和比第三边的平方小 它就是钝角三角形 比如 a a b b

  • nginx+tomcat配置集群

    下载nginx 下载稳定版 下载地址 解压 修改conf里的nginx conf user nobody worker processes 1 error log logs error log error log logs error lo

  • java启动参数，idea参数设置，环境变量参数，jdk选项，程序main函数参数的配置和获取方式

    Idea 开发java 项目中的各种启动参数配置和获取方式汇总 java启动命令的整体结构 如下4图涵盖了所有情况 本人亲自测试所得 欢迎提问 1 启动参数优先级 高优先级的配置 会覆盖低优先级的配置 2 按上图配置 启动测试 可见优先级最

  • 成功利用arthas解决一个cpu占用100%的问题

    最近在项目中 发现一个程序的cpu瞬间会占用100 经验来说应该是某个方法死循环了或者迭代次数过多 利用arthas可以查看问题的症结所在 arthas用户手册 1 首先启动arthas java jar arthas boot jar 2

  • springboot实现用户统一认证、管理（单点登录）

    大家好 我是雄雄 欢迎关注微信公众号 雄雄的小课堂 前言 现在是 2022年5月25日13 44 16 最近和模拟登录杠上了 这不 又来了个需求 还是以这个技术点入手的 需求大概是这样的 为了统一管理系统的用户 上游平台做了个统一认证平台

  • 1072: 青蛙爬井

    1072 青蛙爬井 题目描述 有一口深度为high米的水井 井底有一只青蛙 它每天白天能够沿井壁向上爬up米 夜里则顺井壁向下滑down米 若青蛙从某个早晨开始向外爬 对于任意指定的high up和down值 均为自然数 计算青蛙多少天能够

  • GPGGA校验计算方式

    GPGGA 092725 00 4717 11399 N 00833 91590 E 1 08 1 01 499 6 M 48 0 M 5B String str GPGGA 092725 00 4717 11399 N 00833 915

  • HiveSql一天一个小技巧：利用array_contains()函数进行容器存在性计数问题分析

    0 需求描述 文章被引用关系数据表如下 id oid 1 0 2 0 3 1 4 1 5 2 6 0 7 3 其中id表示文章id oid引用的文章 当oid为0时表示当前文章为原创文章 求原创文章被引用的次数 注意本题不能用关联的形式求解

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

    html html是什么 超文本标记语言 运行在浏览器上 超文本 超级文本 如流媒体 声音 视频 标记语言 由大量的标签组成 标签 任何一个标签都有开始标签和结束标签 html不是编程语言 没有变量 数据类型 控制语句等 只能算一种浏览器的

热门标签