HTML入门（三）

Silenlay

已于 2022-02-13 16:23:28 修改

阅读量371

点赞数

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

于 2022-02-08 14:51:58 首次发布

本文链接：https://blog.csdn.net/Silencelay/article/details/122820169

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript

1. 主要内容
2. 基本用法
3. 基础语法
4. JS事件
5. JS表单
6. Jquery Ajax（请求后台）

1. 主要内容

请添加图片描述

2. 基本用法

行内JS

<button onclick="alert('you clicked here!!')">click here</button>

内部JS
script标签可放在head或body标签中（建议挡在body标签最后）因为从上往下运行代码，可能会出现先运行JS代码，而HTML代码还没有生成的情况

<script type="text/javascript" charset="UTF-8">
alert('this is inner js code')
</script>

外部JS文件

<script src="js/1.js" type="text/javascript" charset="UTF-8"></script>

3. 基础语法

3.1 语句和注释

1.JavaScript程序执行单位为行，一行一条语句
2.每一个语句以分号结尾
3.表达式不需要加分号，如果加分号，会当作语句执行，生成无用的语句

3.2 标识符和关键字

变量命名规范
1.见名知意
2.驼峰命名法或下划线规则

3.3 变量声明

变量：带名字的用于存储数据的内存空间
JAvaScript是一种弱类型语言，声明变量时不需要指明数据类型，直接用var修饰符声明

1.如果变量只声明不赋值，显示undefined
2.如果变量未声明就使用，会报错
3.使用var可以同时声明多个变量
4.重新声明一个已存在的变量，是无效
5.如果重新声明一个已存在的变量并赋值，会覆盖
6.JS是一个动态的、弱类型语言，可以声明任意数据类型的变量
7.var定义的变量提升：JS引擎工作的方式是先解析代码，获取所有被声明的变量，然后再一行行运行（Python、JAVA严格要求所有变量先在头部声明再使用）

3.4数据类型

undefined

1.声明变量却没有初始化
2.调用函数，该函数有形参，却未提供实参
3.函数没有返回值，默认返回undefined

null

1.typeof操作符判断变量类型，null返回的类型：object
2.undefined派生自null，console.log(undefined == null);返回值为true
3.只声明未赋值的变量为null

布尔类型

true false

数值型

整型
浮点型
1.所有数字都以64位浮点数形式储存，所以1=1.0，1+1.0还是一个整数2。浮点数最高精度为17位小数，由于浮点数运算不精确，尽量不要使用浮点数做判断
2.存储数值型数据时，自动将可以转换为整型的浮点数值转为整型

字符串

1.使用' '或" "括起来的
2.加号+，字符串拼接

对象object（各种值组成的集合）

1.数组
	var 数组名 = [ ];
2.对象
	var 对象名 = { };
3.函数
	function 方法名(){
	
	}

3.5 类型转换

3.5.1 自动类型转换

1.转字符串：所有值都是加引号
2.转布尔型：有值为true，无值为false（0为false，非0为true）
3.转数值型；空值是0，非空的数值型字符串能转换，非数值字符产转换为NaN

3.5.2 函数转换

parseInt() 	 转整数型
	console.log(parseInt("1234blue"));//1234
	console.log(parseInt("22.5"));//22
	console.log(parseInt("bule"));//NaN
parseFloat()		转浮点型
	console.log(parseFloat("123.4blue"));//123.4
	console.log(parseFloat("22.5"));//22.5
	console.log(parseFloat("bule"));//NaN
注意：转换时会从值的第零个位置开始找有效数字，直到找到无效数字位置，parseFloat会多识别一个小数点

3.5.3 显式转换（强制转换）

toString() 将值转换成字符串
toFixed() 保留指定小数位，四舍五入
注意：值不能为null
Number()
Boolean()
String()
注意：转换的是数值全部

3.6 运算符

比较运算符
===（全等）三个等号：值和类型相等

3.7 控制语句

switch（ === ）

3.8 数组

3.8.1 数组定义

var arr = []; /隐式创建空数组
var arr = [值1, 值2, 值3...]; /隐式创建
var arr = new Array[值1, 值2, 值3];/直接实例化
var arr = new Array(size); /创建数组并指定长度

3.8.2 基本操作

数组名[下标]
数组名.length
数组名.name = 值 //设置数组的属性
		arr1.name='zhangsan';
		console.log(arr1);
		arr1["pwd"]="123456";
		console.log(arr1);

3.8.3 数组遍历

下标从0开始
如果下标

(1)为非负整数（包括整数字符串）：自动从0开始，不存在添加undefined
(2)为负数、小数、非数字符串：这些内容不计算再长度内，当成属性处理，相当于自定义属性

访问数组元素：
（1）下标：非负整数（包括整数字符串）：

数组.下标
数组[下标]

（2）下标：负数、小数、非数字符串：

数组[属性]

for 循环不遍历属性

for (var i = 0; i < arr1.length; i++) {
	console.log("索引：" + i + " ，值：" + arr1[i]);
}

for…in 不遍历索引中的undefined

for (var i in arr4) {
	console.log("索引：" + i + " ，值：" + arr1[i]);
}

forEach 不遍历属性和索引中的undefined

arr1.forEach(
	function(element, index) {
		console.log("索引：" + index + " ，值：" + element);
	}
);

3.8.4 数组提供的操作方法

方法	描述
push	添加元素到最后
unshift	添加元素到最前
pop	删除最后一项
shift	删除第一项
reverse	数组翻转
join	数组转成字符串
indexof	数组元素索引
alice	切片（截取）数组，原数组不变
splice	剪接数组，原数组变化
concat	合并数组

3.9 函数

3.9.1 函数定义

函数声明语句

function 函数名（[参数列表]）{
}
function foo(){
	console.log(1);
}

函数定义表达式

var 变量名/函数名 = function([参数列表]){

}

Function构造函数

var add = new Function('x', 'y', 'return (x + y)');//最后一个参数为函数体
等价于
function add(x + y){
	return (x + y);
}
add();

3.9.2 函数参数

1.若传入实参为空，形参显示为undefined
2.如果形参名相同，以最后一个参数为准
3.可以设置形参的默认值
4.若参数为值传递，传递副本；若参数为引用传递，则为地址，操作的是同一个对象

3.9.3 函数调用

1.常用调用方式

函数名([实参])；

函数存在返回值则接收，若无返回值为undefined
2.函数调用模式
将函数的返回值赋给一个变量

function add(a,b){
	return a+b;
}
var sum = add(1,2);
console.log(sum);

3.方法调用模式

//创建对象o，key：字符串，value：任意数据类型
var o = {
	m: function(){
		console.log(1);
	}
};
o.m();//调用函数加括号

3.9.4 return

如果方法没有返回值，返回undefined
作用

1.在没有返回值的方法中，用来结束方法
2.有返回值的方法中，一个是用来结束方法，一个是将值带给调用者

3.9.5 函数作用域

在JS中，只有在函数中才有作用域

在函数中，存在全局变量、局部变量
在函数中，如果声明变量时未使用var修饰符，则该变量是全局变量

3.10 内置对象

对象	描述
Arguments	只在函数内部定义，保存了函数的实参
Array	数组对象
Date	日期对象，用来创建和获取日期
Math	数学对象
String	字符串对象，提供对字符串的一系列操作

3.10.1 String

方法	描述
charAt(idx)	返回指定位置处的字符
indexOf(chr)	返回指定字符串的位置，从左到右，找不到返回-1
substr(m,n)	返回给定字符串中从m位置开始，取n个字符，如果n省略，默认取到字符串末尾
substring(m,n)	返回给定字符串中从m位置开始，到n位置结束，如果n省略，默认取到字符串末尾
toLowerCase()	将字符串中的字符全部转化为小写
toUpperCase()	将字符串中的字符全部转化为大写
length	属性，不是方法，返回字符串的长度

3.10.2 Math

方法	描述
Math.random()	1以内的随机数
Math.ceil()	向上取整，大于最大整数
Math.floor()	向下取整，小于最小整数

3.10.3 Date

方法	描述
getFullYear()	年
getMonth()	月（0-11）
getDate()	日
getHours()	时
getMinutes()	分
setSeconds()	秒
setFullYear()	年
setMonth()	月（0-11）
setDate()	日
setHours()	时
setMinutes()	分
setSeconds()	秒
toLoacaleString	转换成本地时间字符串

3.11 对象

object对象，所有数据都可以被视为对象，对象是带有属性和方法的特殊数据类型。
简单说，对象，就是一种无序的数据集合，由若干个键值对构成(key-value)。
Javascript对象满足的这种键值对的格式，称为JSON格式（ JavaScript Object Notation(JavaScript 对象表示法)）

var car = {
	name:"Fiat", 
	model:500, 
	color:"white"
};

3.11.1 对象的创建

1.字面量形式创建

var obj = {}；//创建空对象
var car = {
	name:"Fiat", 
	model:500, 
	color:"white"
};

2.new Object 创建

var car = new Object()；//创建空对象
car.name:"Fiat";
car.model:500;
car.color:"white";

3.Object对象的create方法创建

var obj = Object.create(null)；//创建空对象
var car = new Object()；//创建空对象
car.name:"Fiat";
car.model:500;
car.color:"white";
var obj = Object.create(car);

3.11.2 对象的操作

//获取对象的属性
console.log(obj.name);
//设置对象的属性
obj.name = 20;

3.11.3 对象的序列化和反序列化

序列化，将JS对象序列化为字符串；
反序列化，将字符串反序列化为JS对象。
JS中通过调用JSON方法，可以将对象序列化成字符串，也可以将字符串反序列化为对象。

//序列化对象
JSON.stringify(object);
//反序列化对象
JSON.parse(jsonStr);

3.11.4 this

关键字，代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
谁调用函数，this就是谁。
1.直接调用函数，this代表的是全局的window对象

function test(){
	console.log("====全局函数===");
	console.log(this);//window对象
}
test();

2.调用对象中的函数，this代表对象本身

var o = {
	name:"zhangsan",
	age:18,
	say:function(){
		console.log("====对象函数===");
		console.log("Hello！");
		console.log(this);//当前o对象
	}
}
o.say();

4. JS事件

4.1 事件

用户交互事件，通过使用JavaScript，可以监听特定事件的发生，并规定某些事件发生以对这些事件做出响应。

4.2 作用

1.验证用户输入的数据
2.增加页面的动感效果
3.增强用户的体验度

4.3 事件中的几个名词

事件源：谁触发的事件？
事件名：触发了什么事件？
事件监听：谁管这个事情，谁监视？
事件处理：发生了怎么办？

事件	事件源	事件名	监听	处理
单击按钮	按钮	单击	窗口	执行函数

4.4 事件类型

Window事件
Keyboard事件
Mouse事件
Media事件
Form事件

事件	描述
onload	当页面或图像加载完毕后立即触发
onblur	元素失去焦点
onfocus	元素获得焦点
onclick	鼠标点击某个对象
onchange	用户改变域的内容
onmouseover	鼠标移动到某个元素上
onmouseout	鼠标从某个元素离开
onkeyup	某个键盘的键被松开
onkeydown	某个键盘的键被按下

4.5 事件流和事件模型

1.事件流：页面接受事件的顺序。
当一个HTML元素产生一个事件时，该事件会在元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程成为DOM事件流。
2.事件顺序有两种：
事件捕获：从大到小逐级向上找
事件冒泡：从小到大逐级向上找
冒泡和捕获是事件流的不同表现，这两者的产生是因为IE和Netscape两个大公司完全不同的事件流概念产生的，IE事件流是事件冒泡流，Netscape事件流是事件捕获流。

4.5.1 事件冒泡

事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点（文档）。

4.5.2 事件捕获

由不太具体的节点（文档）应该更早接受到事件，事件开始时由最具体的元素接受，然后逐级向下传播到最具体的元素，在事件到达预定目标之前捕获它。

4.5.3 DOM事件流

在这里插入图片描述

4.6 事件处理程序

事件：用户或浏览器自身执行的某种动作,如click、load
事件处理程序：响应某个事件的函数，名字以"on"开头，如onclick、onload

4.6.1 HTML事件绑定方式

直接在HTML元素上绑定，缺点：耦合度高

<input type="button" value="Press me" onclick=" alert('谢谢！' ); "/>;
//注意双引号里面的引号用单引号
<button onclick="test()" onmouseout="out()">点我！</button>

4.6.2 DOM0级事件绑定方式

先获取事件源，再给事件源绑定事件
缺点：不能同时给元素绑定相同事件多次

<button type="button" id="btn1">按钮1</button>
<script type=" text/javascript">
// DOM0级事件
// 1. 事件源获取： 通过id属性值获取节点对象
var aa = document.getElementById("btn1");
console.log(aa);

// 2. 事件绑定3. 执行函数
btn1.onclick = function() {
	console.log("按钮被点击了！");
}

4.6.2 DOM2级事件绑定方式

优点：可以为同一个元素的同一个事件添加多个处理函数

addEventListener(事件名，函数，布尔值)
removeEventListener(事件名，函数，布尔值)（注意，使用该函数时，函数一定要有名字）

布尔值：
false 冒泡阶段调用
true 捕获阶段调用

	// DOM2级事件
	// 1. 事件源获取： 通过id属性值获取节点对象
	var bb = document.getElementById("btn2");
	// 2. 添加事件监听
	btn2.addEventListener("click",function(){
		console.log("按钮2点击！");
	},false);
	function btnf(){
		console.log("按钮2离开！");
	};
	btn2.addEventListener("mouseout",btnf,false);

5. JS表单

5.1 获取表单

1. document.表单name属性值
2. document.getElementById(表单id);
3. document.forms[表单name属性值];
4. document.forms;//获取所有表单对象
5. document.forms[索引]；//从0开始

5.2 获取表单元素

5.2.1 input元素

1. id获取：document.getElementById(元素id);
2. form.元素name属性：myform.元素name;
3. name获取：document.getElementsByName(name属性值)[索引值];//从0开始
4. tagName数组：document.getElementByTagName('input')[索引]//从0开始

注意区分：
getElement ById （特定元素的id）唯一身份证
getElements ByName（多个元素有相同的name）同名

<form id="form" name="form" action="" method="get">
	姓名：<input type="text" id="uname" name="uname" value="zs"/>
	<br />
	密码：<input type="password" id="upwd" name="upwd" value="123456"/>
	<br />
	<input type="hidden" id="uNo" name="uNo" value="隐藏域"/>
	个人说明：<textarea name="intro"></textarea>
	<br />
	<button type="button" onclick="getTxt();">获取表单元素</button>
</form>
<script type="text/javascript">
function getTxt(){
    //1. id获取：document.getElementById(元素id);
	var uname = document.getElementById("uname").value;
	console.log(uname);
	//2. form.元素name属性：myform.元素name;
	var upwd = document.getElementById("form").upwd.value;
	console.log(upwd);
	//3. name获取：document.getElementsByName(name属性值)[索引值];//从0开始
	var uNo = document.getElementsByName("uNo")[0].value;
	console.log(uNo);
	//4. tagName数组：document.getElementByTagName('input')[索引]//从0开始
	var intro = document.getElementsByTagName("textarea")[0].value;
	console.log(intro);
}
</script>

5.2.2 单选按钮

前提：将一组单选按钮设置为相同的name属性值

获取单选按钮组

document.getElementByName("name属性值");

遍历每个单选按钮，并查看单选按钮元素的checked属性。

若属性为true，则选中，否则未选中。
选中状态设定：checked = 'checked'; checked = true；checked；
未选中状态设定：不设checked属性或checked='false'

获取单选按钮的值

元素.value;

<form id="form" name="form" action="#" method="get">
性别：<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女<br />
<button type="button" onclick="getradio()"/>提交</button>	
</form>
<script type="text/javascript">
function getradio(){
	var radios = document.getElementsByName("sex");
	if(radios != null && radios.length >0){
		for(var i=0; i<radios.length;i++){
			console.log("值："+radios[i].value+",是否选中:"+radios[i].checked);
		}
	}
}
</script>

5.2.3 多选按钮

全选/全不选：<input type="checkbox" id="control" onclick="CheckAllorNot()" />
<button type="button" onclick="CheckReverse()" />反选</button>
<input type="checkbox" name="hobby" value="sing" />唱歌
<input type="checkbox" name="hobby" value="dance" />跳舞
<input type="checkbox" name="hobby" value="rap" />说唱
<button type="button" onclick="getCheckBox()" />提交按钮</button>
<script type="text/javascript">
	function getCheckBox() {
		var checkboxs = document.getElementsByName("hobby");
		if (checkboxs != null && checkboxs.length > 0) {
			var checkeds = '';
			for (var i = 0; i < checkboxs.length; i++) {
				if (checkboxs[i].checked) {
					checkeds += checkboxs[i].value + ",";
				}
			}
		}
		if (checkeds != "") {
			checkeds = checkeds.substring(0, checkeds.length - 1)
		}
		console.log(checkeds);
	}
	
	function CheckAllorNot() {
		var control = document.getElementById("control");
		var flag = control.checked;
		console.log(flag);
		var checkboxs = document.getElementsByName("hobby");
		if (checkboxs != null && checkboxs.length > 0) {
			for (var i = 0; i < checkboxs.length; i++) {
				checkboxs[i].checked = flag;
			}
		}
	}
	
	function CheckReverse() {
		var checkboxs = document.getElementsByName("hobby");
		if (checkboxs != null && checkboxs.length > 0) {
			for (var i = 0; i < checkboxs.length; i++) {
				checkboxs[i].checked = !checkboxs[i].checked;
			}
		}
	}
</script>

5.2.4 下拉选项

1.获取select对象

var uform = document.getElementById("uform");

2.获取选中项的索引

var idx = uform.selectedIndex;

3.获取选中项options的value属性值

var val = uform.options[idx].value;

注意：
当通过options获取选中项的value属性值时，
若没有value属性，获取option标签内容；
若存在valu属性，获取value值。
4.获取选中项options的text

var txt = uform.options[idx].text;

选中状态设定：selected = ‘selected’; selected = true；selected；
未选中状态设定：不设selected属性

5.3 提交表单

普通button按钮+onclick事件+执行函数

<form id="myform" name="myform" action="http://www.baidu.com" method="">
	姓名:<input name="uname" id="uname" />&nbsp;<span id="mag" style="color: red;"></span><br />
	<button type="button" onclick="submitForm1()">提交</button>
</form>
<script type="text/javascript">
	function submitForm1() {
		var uname = document.getElementById("uname").value;
		if (isEmpty(uname)) {
			document.getElementById("mag").innerHTML = "*姓名不能为空！";
			return;
		}
		document.getElementById("myform").submit();//手动提交表单
	}
	function isEmpty(str) {
		if (str == null || str.trim() == "") {
			return true;
		}
		return false;
	}
</script>

submit按钮（自动提交）+οnclick=‘return 函数();’+执行函数
函数必须要有函数值：return true 或不return，表单会提交；return false 表单不会提交

<form id="myform2" name="myform2" action="http://www.baidu.com">
	姓名:<input name="uname2" id="uname2" />&nbsp;<span id="mag2" style="color: red;"></span><br />
	<button type="submit" onclick="return submitForm2()">提交submit</button>
</form>
<script type="text/javascript">
	function isEmpty(str) {
		if (str == null || str.trim() == "") {
			return true;
		}
		return false;
	}
	
	function submitForm2() {
		var uname = document.getElementById("uname2").value;
		if (isEmpty(uname)) {
			document.getElementById("mag2").innerHTML = "*姓名不能为空！";
			return false;
		}
		return true;
	}
</script>

submit按钮/图片提交按钮+给表单绑定οnsubmit=‘return 函数()’+执行函数
最后必须返回：return true|false；

<form id="myform3" name="myform3" action="http://www.baidu.com" onsubmit="return submitForm3()">
	姓名:<input name="uname3" id="uname3" />&nbsp;<span id="mag3" style="color: red;"></span><br />
	<button type="submit">提交onsubmit</button>
</form>
<script type="text/javascript">
	function isEmpty(str) {
		if (str == null || str.trim() == "") {
			return true;
		}
		return false;
	}
	
	function submitForm3() {
		var uname = document.getElementById("uname3").value;
		if (isEmpty(uname)) {
			document.getElementById("mag3").innerHTML = "*姓名不能为空！";
			return false;
		}
		return true;
	}
</script>

6. Jquery Ajax（请求后台）

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。异步无刷新技术
区分同步和异步：
同步：只能进行一个操作，其余操作等待，直到接收到上一个操作发出的响应再开始下一个操作。
异步：可以同时进行多个操作

1.得到XMLHttpRequest()对象
var xhr = new XMLHttpRequest();
2.打开请求
	xhr.open(method,url,async);
		method:请求方式，GET|POST
		url:请求地址
		async:是否异步，true异步，false同步
xhr.open();
3.发送请求
xhr.send(params);
	params:请求时需要传递的参数
		GET:设置null
		POST:无参数设置为null，有参数设置参数
4.接受响应
	xhr.status 响应状态（200-响应成功；404-资源未找到；500-服务器异常）
	xhr.responseText得到响应结果

<body>
	请输入要查询的城市：<input type="text" id="city" />
	<button type="button" onclick="LoadWeather()">查询天气</button>
	<p id="text"></p>
</body>
<script>
	function LoadWeather() {
		var city = document.getElementById("city").value;
		var url = "https://api.seniverse.com/v3/weather/now.json?key=WNEUXAAE2G&location=" + encodeURI(city) +
			"&language=zh-Hans&unit=c";
		var xhr = new XMLHttpRequest();
		xhr.open("GET", url, false);//同步请求
		xhr.send(null);
		if (xhr.status == 200) {
			var arr = JSON.parse(xhr.responseText).results;
			var name = arr[0].location.name;
			var text = arr[0].now.text;
			var tem = arr[0].now.temperature;
			document.getElementById("text").innerHTML = "城市：" + name + " 天气：" + text + " 温度：" + tem + "摄氏度";
		} else {
			console.log("状态码：" + xhr.status + "，原因：" + xhr.responseText);
		};
	};
</script>

Silenlay

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML入门（三）

JavaScript1. 主要内容2. 基本用法3. 基础语法3.1 语句和注释3.2 标识符和关键字3.3 变量声明3.4数据类型3.5 类型转换3.5.1 自动类型转换3.5.2 函数转换3.5.3 显式转换（强制转换）4. JS事件5. BOM对象6.DOM对象7.JS表单1. 主要内容2. 基本用法行内JS<button onclick="alert('you clicked here!!')">click here</button>内部JSscript标签可
复制链接

扫一扫