<form name="名称" action="提交路径" method="提交方式get/post">
文本框:<input type="text" name="username" value="默认值">
密码框:<input type="password" name="password" value="默认值">
单选:<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female" checked>女
多选:<input type="checkbox" name="hobby" value="sing">唱
<input type="checkbox" name="hobby" value="dance" checked>跳
<input type="button" value="普通按钮">
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
<input type="image" src="图片路径">
选择文件:<input type="file" name="file">
隐藏域:<input type="hidden" name="hidden" value="隐藏域的值">
下拉框:
<select name="address">
<option value="option1">选项1option>
<option value="option2" selected>选项2option>
<option value="option3">选项3option>
select>
文本域:
<textarea name="introduce">默认值写在这里textarea>
form>
黑马程序员
标签名称{css样式名:值; css样式名:值; ...}
#id值{css样式名:值; css样式名:值; ...}
.类名{css样式名:值; css样式名:值; ...}
#d1 .c1{}
找id为d1的元素的后代 类名为c1的元素input[type="text"]
找文本框:link, :visited, :hover, :active
和用户交互,实现页面的动态效果的
script
标签,把js代码写在script
标签里<script>
alert();
script>
xxx.js
文件里,在html中使用script
标签引入js文件<script src="js文件路径">script>
// 注释内容
/* 多行注释 */
<script>
//单行注释
/*
多行注释
*/
script>
System.out.println()
输出到控制台<script>
//1. 弹窗输出
alert("hello, world1");
//2. 输出到页面。可输出html代码
document.write("hello, world2
");
//3. 输出到浏览器的控制台
console.log("hello, world3");
script>
引入js文件alert("输出内容")
document.write("输出内容")
console.log("输出内容")
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tBlykaSg-1592825923988)(img/image-20200516101255001.png)]
ES6中,js里变量定义:
let
定义变量:变量不可重复声明,只在当前作用域有效const
定义常量:常量值不可修改注意:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量定义title>
head>
<body>
<script>
//----------定义变量---------------
//定义整数
let v = 1;
console.log(v);
//定义小数
v = 3.14;
console.log(v);
//定义布尔
v = true;
console.log(v);
//定义字符串
v = "hello";
console.log(v);
//定义对象
v = new Date();
console.log(v);
//----------定义变量---------------
const PI = 3.14;
console.log(PI);
//修改常量值,会报错
PI = 1;
script>
body>
html>
let
和var
的区别var
定义变量let
定义变量let
定义变量仅在当前代码块有效;var
定义变量是全局变量let
不允许重复定义变量;var
允许重复定义变量let
定义变量,语法更严谨
<html lang="en">
<head>
<meta charset="UTF-8">
<title>var和lettitle>
head>
<body>
<script>
//--------var和let的区别-----------
//1. var定义的不具备块级作用域的特征,在{}里用var定义的变量,{}之外也可访问
// let定义的是局部变量,具备块级作用域的特征,只在let所在的块{}内有效,{}外不能访问
{
var a = "1a";
let b = "2b";
}
console.log(a);//输出结果:1a
console.log(b);//运行时报错
//2. var可重复定义变量;let不能重复定义变量
var v = 1;
var v = 2;
console.log(v);//正常运行,输出结果:2
let l = 1;
let l = 2;
console.log(l);//运行时报错,因为let不允许重复定义变量
script>
body>
html>
数据类型 | 描述 | 示例 |
---|---|---|
number |
数字类型 | 1 , 2 , 3 , 3.14 |
boolean |
布尔类型 | true , false |
string |
字符串类型 | "hello" , 'hello' |
object |
对象类型 | new Date() , null |
undefined |
未定义类型 | undefined |
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据类型title>
head>
<body>
<script>
//说明:typeof关键字,用于判断一个变量的类型
//要求:定义变量,输出变量的类型
let v;
console.log(typeof v); //输出结果:undefined
v = 1;
console.log(typeof v); //输出结果:number
v = 3.14;
console.log(typeof v); //输出结果:number
v = true;
console.log(typeof v); //输出结果:boolean
v = "hello";
console.log(typeof v); //输出结果:string
v = new Date();
console.log(typeof v); //输出结果:object
v = null;
console.log(typeof v); //输出结果:object
script>
body>
html>
js也有:+,-,*,/,%,+=,-=,*=,/=,%=,++,--,>,<,=,>=,<=,==,!=,&&,||,!
三元运算 等等
需要说明的有:
==
和===
:运算符 | 描述 | 示例 |
---|---|---|
== |
比较值。只要值一样,就是true | 1=="1" ,结果是true |
=== (推荐) |
比较值和类型。只有值和类型都一样,才是true | 1==="1" ,结果是false |
-*/
:
NaN
Infinity
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运算符title>
head>
<body>
<script>
//1. ==和===
let v1 = 3;
let v2 = "3";
console.log(v1 == v2); //输出结果:true。只要值相等,结果即是true
console.log(v1 === v2);//输出结果:false。只有值和类型都相同,结果才是true
//2. + - * /
console.log("2" + 1);//输出结果:21。 有字符串的加法是拼接字符串
console.log("2" - 1);//输出结果:1。 把字符串转换成数字再运算
console.log("a" - 1);//输出结果:NaN。字符串不能转换成数字,结果NaN:Not a Number
console.log("2" * 3);//输出结果:6
console.log("10" / 2);//输出结果:5
console.log("10" / 0);//输出结果:Infinity。表示数字无穷大
script>
body>
html>
if, else, else if, while, switch, for
""
是false,非空字符串是true
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流程控制语句title>
head>
<body>
<script>
// if判断
let v = true;
v = 1; //number类型:0为false;非0为true
v = "";//string类型:""为false;非空串为true
v = null;//object类型:null为false;非null为true
v = undefined;//undefined类型:始终为false
if (v) {
console.log("true");
}else{
console.log("false");
}
script>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>乘法口诀表title>
<style>
table{
border-collapse: collapse;
}
td{
border:1px solid #ccc;
padding:5px;
}
style>
head>
<body>
<script>
document.write("");
for (let i = 1; i <= 9; i++) {
document.write("");
for (let j = 1; j <= i; j++) {
// 2*3=6
document.write("" + j + "*" + i +"=" + i*j + " ");
}
document.write(" ");
}
document.write("
");
script>
body>
html>
+,-,*,/,%,+=,-=,*=,/=,%=,++,--
>,<,>=,<=,==,!=, ===, !==
&&,||, !
-, *, /
:如果有字符串,js会转换成数字再运算。如果转换不成功结果是NaN。如果除以0,结果是Infinity表示数字无穷大==和===
:==
比较值,只要值一样,结果就是true;===
比较值和类型,只有值和类型都一样才是true//1.定义 一个普通函数
function 函数名(形参1, 形参2, ...){
//函数体
//如果需要返回值,就return;否则就不return
}
//2.调用 一个普通函数
let result = 函数名(实参1,实参2, ...);
<html lang="en">
<head>
<meta charset="UTF-8">
<title>普通函数title>
head>
<body>
<script>
//---------普通函数------------
//要求:定义函数,计算两个变量之和
function add(a, b) {
return a+b;
}
console.log("得到结果:" + add(1, 2));
script>
body>
html>
//定义:
function(形参1, 形参2, ...){
//函数体
//如果需要返回值,就return;否则就不return
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>匿名函数title>
head>
<body>
<script>
//--------匿名函数--------------
//1. 把匿名函数赋值给一个变量,通过变量名调用
let fn = function(a){
console.log("fn函数执行了,得到参数a:" + a);
};
fn("123");
//2. 匿名函数作为参数,传递给其它函数---回调函数
setInterval(function () {
console.log(new Date());
}, 1000);
script>
body>
html>
arguments
来得到所有的实参数组
<html lang="en">
<head>
<meta charset="UTF-8">
<title>普通函数title>
head>
<body>
<script>
//第一次定义函数func
function func() {
console.log("func()");
}
//第二次定义func:会把之前定义的覆盖掉
function func(a) {
console.log("func(a)");
console.log("参数a:" + a);
console.log("接收到的所有实参-arguments数组:");
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
//调用的是func(a)函数。因为func()被覆盖掉了。
//第一个实参赋值给函数第一个形参,依此类推
func("aaa", "bbb", "ccc");
script>
body>
html>
//以下是匿名函数 不常用的调用方法
let fn = function(){
alert();
};
setInterval(fn, 2000);
setInterval("fn()", 2000); //浏览器每隔2000毫秒,把"fn()"作为js代码执行一次:执行fn()
//定义
function add(a, b){
return a+b;
}
//调用
let result = add(1, 2);
//1.把匿名函数赋值给一个变量,通过变量名调用
let fn = function(){
console.log("fn");
}
fn();
//2.把匿名函数作为其它函数的实参传递进去
setInterval(function(){
console.log("aaa");
}, 2000)
要实现 每隔2秒钟切换一次显示的图片,需要:
定时器技术
setInterval(fn, ms)
let timer = setInterval(function(){
console.log("每隔1秒钟输出一次");
}, 1000);
修改img标签的属性值
let element = document.getElementById("id");
element.src = "新的属性值";
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图title>
head>
<body>
<img src="img/1.jpg" alt="" id="image">
<script>
let image = document.getElementById("image");
let imageName = 1;
setInterval(function () {
imageName++;
if (imageName > 5){
imageName = 1;
}
image.src = "img/"+imageName+".jpg";
}, 2000);
script>
body>
html>
事件属性 | 描述,监听什么 |
---|---|
onclick | 监听鼠标单击 |
ondblclick | 监听鼠标双击 |
onsubmit | 监听表单提交了,事件源是表单form标签 |
onchange | 监听域内容改变,通常用于监听下拉框的选项变化 |
onload | 监听加载完成,通常用于监听浏览器加载完了页面 |
onfocus | 监听获取焦点(光标) |
onblur | 监听失去焦点(光标) |
onkeydown | 监听键盘按键按下 |
onkeypress | 监听键盘按键按下或按住 |
onkeyup | 监听键盘按键弹起 |
onmousedown | 监听鼠标按键按下 |
onmouseup | 监听鼠标按键弹起 |
onmouseover | 监听鼠标移入 |
onmouseout | 监听鼠标移出 |
onmousemove | 监听鼠标移动 |
<input type="button" value="点击弹窗1" onclick="show1()">
<script>
function show1() {
alert("点我干嘛");
}
script>
<input type="button" value="点击弹窗2" id="btn2">
<script>
document.getElementById("btn2").onclick = function(){
alert("点我干嘛");
}
script>
常见事件:
事件绑定方式:
<input type="button" value="按钮1" onclick="show(this)">
<script>
function show(obj){
//obj得到的实参值:就是调用show方法时传递进来的实参-标签对象
alert();
}
script>
<input type="button" value="按钮2" id="btn2">
<script>
let btn2 = document.querySelector("#btn2");
btn2.onclick = function(){
//直接使用this:表示当前标签对象btn2
alert();
}
script>
onmouseover
,事件源:图片onmouseout
,事件源:图片clearInterval(定时器的id)
setInterval(fn, ms)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图-增强title>
head>
<body>
<img src="img/1.jpg" alt="" id="image" onmouseover="imageStop()" onmouseout="imageGo()">
<script>
let imageName = 1;
let timer;
//图片开始切换,开启定时器
function imageGo(){
let image = document.getElementById("image");
timer = setInterval(function () {
imageName++;
if (imageName > 5){
imageName = 1;
}
image.src = "img/"+imageName+".jpg";
}, 1000);
}
//图片停止切换,清除定时器
function imageStop(){
clearInterval(timer);
}
//页面加载完成,开始切换图片
window.onload = imageGo;
script>
body>
html>
练习二
实现表格数据增删
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QRDYjatN-1592825923992)(C:\Users\HUANGHAI\AppData\Roaming\Typora\typora-user-images\1592809438822.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text" id="name" placeholder="请输入姓名" autocomplete="off">
<input type="text" id="age" placeholder="请输入年龄" autocomplete="off">
<input type="text" id="gender" placeholder="请输入性别" autocomplete="off">
<input type="button" value="添加" id="add">
</div>
<table id="tb">
<caption>学生信息表</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>男</td>
<!-- JavaScript:void(0)当我们点击这个删除时不会刷新页面 -->
<td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
</tr>
<tr>
<td>李四</td>
<td>24</td>
<td>男</td>
<td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
</tr>
</table>
</body>
<script>
//一、添加功能
//1.为添加按钮绑定单击事件
document.getElementById("add").onclick = function(){
//2.创建行元素
let tr = document.createElement("tr");
//3.创建4个单元格元素
let nameTd = document.createElement("td");
let ageTd = document.createElement("td");
let genderTd = document.createElement("td");
let deleteTd = document.createElement("td");
//4.将td添加到tr中
tr.appendChild(nameTd);
tr.appendChild(ageTd);
tr.appendChild(genderTd);
tr.appendChild(deleteTd);
//5.获取输入框的文本信息
let name = document.getElementById("name").value;
let age = document.getElementById("age").value;
let gender = document.getElementById("gender").value;
//6.因为上面获取到的只是字符串,不能直接添加入td中,需要转换一下,
// //根据获取到的信息创建3个文本元素
// let nameText = document.createTextNode(name);
// let ageText = document.createTextNode(age);
// let genderText = document.createTextNode(gender);
// //7.将3个文本元素添加到td中
// nameTd.appendChild(nameText);
// ageTd.appendChild(ageText);
// genderTd.appendChild(genderText);
// 上面6,7这些可以替换成这样
nameTd.innerHTML=name;
ageTd.innerHTML=age;
genderTd.innerHTML=gender;
//8.创建超链接元素和显示的文本以及添加href属性
let a = document.createElement("a");
a.innerHTML="删除";
a.href="JavaScript:void(0);";
//给自己添加的数据添加onclik事件
a.onclick="drop(this)";
deletetd.appendChild(a);
//9.将超链接元素添加到td中
deleteTd.appendChild(a);
//10.获取table元素,将tr添加到table中
let table = document.getElementById("tb");
table.appendChild(tr);
}
//二、删除的功能
//1.为每个删除超链接标签添加单击事件的属性
//2.定义删除的方法
function drop(obj){
//3.获取table元素
let table = obj.parentElement.parentElement.parentElement;
//4.获取tr元素
let tr = obj.parentElement.parentElement;
//5.通过table删除tr
table.removeChild(tr);
}
</script>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RJgXJR5m-1592825923997)(img/1565665429761.png)]
new Array();//长度是0
new Array(size);//长/度为size,里边是空的
new Array(element0, element1, ..., elementn);//相当于Java的:new Object[]{v1,v2,v3...}
//推荐方式:
let arr = ["a","b","c"];
//for i循环:基本for循环
for(let i=0; i<arr.length;i++){
alert(arr[i]);
}
//for..of循环:类似Java的增强for循环
for (let v of arr3) {
console.log(v);
}
length
:设置或获取数组中元素的数目let arr = ["a", "b", "c"];
//获取数组的长度
console.log(arr.length);
//设置数组长度为2:比实际长度小,会截取前2个
arr.length = 2;
for(let i=0; i<arr.length;i++){
alert(arr[i]);
}
//设置数组的长度为5:比实际长度大,会扩容,没有值的是undefined-
arr.length = 5;
for(let i=0; i<arr.length;i++){
alert(arr[i]);
}
concat(arr1, arr2, ..., arrn)
:把多个数组合并成一个,返回新数组
join(seperator)
:把数组元素 按照指定分隔符拼接字符串,返回拼接的字符串
reverse()
:颠倒数组里元素的顺序,直接在原数组里操作,不会创建新数组
sort()
:数组元素排序。直接在原数 组里排序,不会创建新数组
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V5Lka6cI-1592825924001)(C:\Users\HUANGHAI\AppData\Roaming\Typora\typora-user-images\1592730734363.png)]
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组title>
head>
<body>
<script>
let arr = [1, 10, 20, 2];
//sort()无参:按照字符的ASCII排序
arr.sort();
console.log(arr); //输出结果:1, 10, 2, 20
//sort(fn):按照指定规则排序
arr.sort(function (a, b) {
//返回a-b:升序。 返回b-a:降序
return a-b;
});
console.log(arr);//输出结果:1, 2, 10, 20
//reverse():颠倒数组里元素的顺序
arr.reverse();
console.log(arr);//输出结果:20, 10, 2, 1
//join():按照指定的分隔符,把数组里的元素拼接成字符串
let str = arr.join("/");
console.log(str);//输出结果:20/10/2/1
script>
body>
html>
new Array();
new Array(size);
new Array(element1, elenent2, ..., elementn)
[element1, elenent2, ..., elementn]
数组常用属性:length
数组常用方法:
arr1.concat(arr2, arr3,...)
:把多个数组合并成一个新数组,返回新数组
<script>
//定义数组
let arr = [10,20,30];
//arr[3] = 40; js中的数组长度可变
//遍历数组
for(let i = 0; i < arr.length; i++) {
document.write(arr[i] + "
");
}
document.write("==============
");
// 数组高级运算符 ...
//复制数组
let arr2 = [...arr];
//遍历数组
for(let i = 0; i < arr2.length; i++) {
document.write(arr2[i] + "
");
}
document.write("==============
");
//合并数组
let arr3 = [40,50,60];
let arr4 = [...arr2 , ...arr3];
//遍历数组
for(let i = 0; i < arr4.length; i++) {
document.write(arr4[i] + "
");
}
document.write("==============
");
//将字符串转成数组
let arr5 = [..."heima"];
//遍历数组
for(let i = 0; i < arr5.length; i++) {
document.write(arr5[i] + "
");
}
</script>
arr.join("分隔符")
:把数组里的元素,按照指定分隔符 拼接成字符串
arr.reverse()
:颠倒数组里元素的顺序,直接操作原数组,不会创建新数组
arr.sort()
:数组里元素排序,默认按照ASCII排序
arr.sort(function(a,b){
return a-b;//升序
});
arr.sort(function(a,b){
return b-a;//降序
});
循环遍历
for(let i=0; i<arr.length; i++){
let element = arr[i];
}
for(let element of arr){
}
let now = new Date();//当前时间
let date1 = new Date(2019, 9, 1);// 2019-10-01。注意:月是从0开始的
let date2 = new Date(2019, 9, 1, 11, 20, 30);//2019-10-01 11:20:30
getTime()
:获取毫秒值(从1970年1月1日开始)setTime(ms)
:以毫秒值设置日期toLocaleString()
:把日期对象 转换成 本地日期格式的字符串
<html lang="en">
<head>
<meta charset="UTF-8">
<title>日期title>
head>
<body>
<script>
let date = new Date();
//转换成本地日期格式的字符串
let str = date.toLocaleString();
console.log(str);//输出结果:2020/5/11 下午5:34:08
//获取日期的毫秒值
let time = date.getTime();
console.log(time);//1589189682449
//以毫秒值设置日期
date.setTime(1000*60*30);
console.log(date.toLocaleString());//1970/1/1 上午8:30:00。注意:这是本地的北京时间,北京是东8区,世界标准时间1970/1/1 00:00:00 换算成北京本地时间就是1970/1/1 上午8:30:00
//------练习:现在距离十一还有几天?--------
//1. 创建当前日期
let now = new Date();
//2. 创建十一的日期
let holiday = new Date(2020, 9, 1);
//3. 计算两个日期之间的毫秒值之差
let ms = holiday.getTime() - now.getTime();
//4. 把毫秒值换算成天
let days = ms/1000/60/60/24;
console.log("距离十一放假还有:" + days);
script>
body>
html>
let date = new Date();//当前日期当前时间
let date2 = new Date(2020,9,1);//2020-10-1
let date3 = new Date(2020,9,1,20,30,40);//2020-10-1 20:30:40
toLocaleString()
:转换成本地日期格式的字符串getTime()
:获取毫秒值setTime()
:以毫秒值设置日期Math.PI
:圆周率Math.floor()
:向下取整Math.ceil()
:向上取整Math.random()
:求随机数,范围[0,1)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数学工具title>
head>
<body>
<script>
console.log(Math.PI); //圆周率 ∏ 的值
console.log(Math.floor(3.999));//向下取整
console.log(Math.ceil(3.001));//向上取整
console.log(Math.round(3.49));//四舍五入
console.log(Math.random());//求随机数,范围:[0,1)
console.log(Math.random() * 10);//随机数:[0,10)
console.log(Math.random() * 10 + 90);//随机数:[90,100)
script>
body>
html>
常用属性:
length
:字符串的长度常用方法:
substring(startIndex, endIndex)
:截取字符串,含头不含尾
split(separator)
:切分字符串
toLowerCase()
:转换成小写
toUpperCase()
:转换成大写
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-61QqfPWK-1592825924007)(C:\Users\HUANGHAI\AppData\Roaming\Typora\typora-user-images\1592727684967.png)]
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串title>
head>
<body>
<script>
let str = "Hello, World";
console.log("字符串长度:" + str.length);
//1. substr(startIndex, length):截取字符串,从起始索引 截取到 结束索引
let subStr = str.substring(2, 5);
console.log(subStr);
//2. split(seperator):按照指定分隔符切分字符串
let strArr = str.split(",");
console.log(strArr);
//3. toUpperCase()转换大写
let upper = str.toUpperCase();
console.log(upper);
//4. toLowerCase()转换小写
let lower = str.toLowerCase();
console.log(lower);
//1. charAt(index) 获取指定索引处的字符
document.write(s2.charAt(1) + "
");
//2. indexOf(value) 获取指定字符串出现的索引位置
document.write(s2.indexOf("l") + "
");
//3. substring(start,end) 根据指定索引范围截取字符串(含头不含尾)
document.write(s2.substring(2,4) + "
");
//4. split(value) 根据指定规则切割字符串,返回数组
let s3 = "张三,23,男";
let arr = s3.split(",");
for(let i = 0; i < arr.length; i++) {
document.write(arr[i] + "
");
}
//5. replace(old,new) 使用新字符串替换老字符串
let s4 = "你会不会跳伞啊?让我落地成盒。你妹的。";
let s5 = s4.replace("你妹的","***");
document.write(s5 + "
");
script>
body>
html>
let reg1 = /^正则表达式$/; //直接量方式
let reg2 = new RegExp("正则表达式"); //对象形式
test(string)
:校验字符串的格式是否符合正则表达式[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b2Bd9zB3-1592825924010)(img/1565624336644.png)]
[]
写法[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QV1h8uur-1592825924013)(img/1565624439863.png)]
n
是表达式[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SJdXao0w-1592825924014)(img/1565624492958.png)]
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RegExp</title>
</head>
<body>
</body>
<script>
//1.验证手机号
//规则:第一位1,第二位358,第三到十一位必须是数字。总长度11
let reg1 = /^[1][358][0-9]{9}$/;
document.write(reg1.test("18688888888") + "
");
//2.验证用户名
//规则:字母、数字、下划线组成。总长度4~16
let reg2 = /^[a-zA-Z_0-9]{4,16}$/;
document.write(reg2.test("zhang_san123"));
</script>
</html>
方法名 | 说明 |
---|---|
parseFloat() | 将传入的字符串浮点数转为浮点数 |
parseInt() | 将传入的字符串转为整数 |
isNaN() | 判断传入的值是否是NaN |
eg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number</title>
</head>
<body>
</body>
<script>
//1. parseFloat() 将传入的字符串浮点数转为浮点数
document.write(Number.parseFloat("3.14") + "
");
//2. parseInt() 将传入的字符串整数转为整数
document.write(Number.parseInt("100") + "
");
document.write(Number.parseInt("200abc") + "
"); // 200,从数字开始转换,直到不是数字为止
document.write(Number.isNaN(NaN));//true
</script>
</html>
JavaScript 中的 Set 集合,元素唯一,存取顺序一致。
构造方法
构造方法 | 说明 |
---|---|
Set() | 创建Set集合对象 |
成员方法
成员方法 | 说明 |
---|---|
add(元素) | 向集合中添加元素 |
size | 获取集合长度 |
keys() | 获取迭代器对象 |
delete(元素) | 删除指定元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set</title>
</head>
<body>
</body>
<script>
// Set() 创建集合对象
let s = new Set();
// add(元素) 添加元素
s.add("a");
s.add("b");
s.add("c");
s.add("c");
// size属性 获取集合的长度
document.write(s.size + "
"); // 3
// keys() 获取迭代器对象
let st = s.keys();
for(let i = 0; i < s.size; i++){//for循环只是控制循环次数
document.write(st.next().value + "
");
}
// delete(元素) 删除指定元素
document.write(s.delete("c") + "
");
let st2 = s.keys();
for(let i = 0; i < s.size; i++){
document.write(st2.next().value + "
");
}
</script>
</html>
JavaScript 中的 Map 集合,key 唯一,存取顺序一致。
构造方法
构造方法 | 说明 |
---|---|
Map() | 创建Map集合对象 |
成员方法
成员方法 | 说明 |
---|---|
set(key,value) | 向集合中添加元素 |
size | 获取集合长度 |
get(key) | 根据key获取value |
entries() | 获取迭代器对象 |
delete(key) | 根据key删除键值对 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map</title>
</head>
<body>
</body>
<script>
// Map() 创建Map集合对象
let map = new Map();
// set(key,value) 添加元素
map.set("张三",23);
map.set("李四",24);
map.set("李四",25);
// size属性 获取集合的长度
document.write(map.size + "
");
// get(key) 根据key获取value
document.write(map.get("李四") + "
");
// entries() 获取迭代器对象
let et = map.entries();
for(let i = 0; i < map.size; i++){
document.write(et.next().value + "
");
//获取到键值对
}
// delete(key) 根据key删除键值对
document.write(map.delete("李四") + "
");
let et2 = map.entries();
for(let i = 0; i < map.size; i++){
document.write(et2.next().value + "
");
}
</script>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m3Jsmgy6-1592825924017)(img/image-20200511151608856.png)]
onsubmit
form
表示监听到表单提交时,阻止提交事件继续执行
表示监听到表单提交时,允许提交事件继续执行element.innerHTML = "要设置的内容";
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9ygGTmK3-1592825924018)(img/image-20200515185336308.png)]
<head>
<meta charset="UTF-8"/>
<title>验证注册页面title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-size: 12px;
line-height: 20px;
}
.main {
width: 525px;
margin-left: auto;
margin-right: auto;
}
.hr_1 {
font-size: 14px;
font-weight: bold;
color: #3275c3;
height: 35px;
border-bottom: 2px solid #3275c3;
vertical-align: bottom;
padding-left: 12px;
}
.left {
text-align: right;
width: 80px;
height: 35px;
padding-right: 5px;
font-size: 14px;
}
.center {
width: 280px;
}
.in {
width: 200px;
height: 25px;
border: solid 1px #79abea;
}
div {
color: #F00;
}
.error{
color:red;
font-size: 14px;
}
style>
<script type="text/javascript">
script>
head>
<body>
<form action="" method="get" id="myform" onsubmit="return checkForm()">
<table class="main" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="hr_1">新用户注册td>
tr>
<tr>
<td style="height:10px;">td>
tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="left">用户名:td>
<td class="center">
<input id="user" name="user" type="text" class="in" />
<span id="userError" class="error">span>
td>
tr>
<tr>
<td class="left">密码:td>
<td class="center">
<input id="pwd" name="pwd" type="password" class="in" />
<span id="pwdError" class="error">span>
td>
tr>
<tr>
<td class="left">确认密码:td>
<td class="center">
<input id="repwd" name="repwd" type="password" class="in"/>
<span id="repwdError" class="error">span>
td>
tr>
<tr>
<td class="left">电子邮箱:td>
<td class="center">
<input id="email" name="email" type="text" class="in"/>
<span id="emailError" class="error">span>
td>
tr>
<tr>
<td class="left">手机号码:td>
<td class="center">
<input id="mobile" name="mobile" type="text" class="in"/>
<span id="mobileError" class="error">span>
td>
tr>
<tr>
<td class="left">生日:td>
<td class="center">
<input id="birth" name="birth" type="date" class="in"/>
<span id="birthError" class="error">span>
td>
tr>
<tr>
<td class="left"> td>
<td class="center">
<input name="" type="image" src="img/register.jpg" />
td>
tr>
table>td>
tr>
table>
form>
<script>
function checkForm(){
let result = true;
//校验用户名的值
//1.获取到用户名
let userValue = document.getElementById("user").value;
//2.判断userValue
let userError = document.getElementById("userError");
if (userValue === "") {
userError.innerHTML = "用户名不能为空";
result = false;
}else if(userValue.length < 5){
userError.innerHTML = "用户名最少5位";
result = false;
}else if(userValue.length > 10){
userError.innerHTML = "用户名最多10位";
result = false;
}else{
userError.innerHTML = "";
}
//得到邮件的值
var emailValue = document.getElementById("email").value;
//判断邮件的值
let emailError = document.getElementById("emailError");
if (emailValue === "") {
emailError.innerHTML = "邮箱不能为空";
result = false;
}else if(!/^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/.test(emailValue)){
emailError.innerHTML = "邮箱格式不正确";
result = false;
}else{
emailError.innerHTML = "";
}
return result;
}
script>
body>
html>
上午内容梳理:
引入js
js的基本语法
let
const
number
:数字类型boolean
:布尔类型string
:字符串类型object
:对象类型undefined
:未定义类型-, *, /
:如果有字符串,会转换成数字再运算;如果转换失败结果是NaN;如果除以0结果是:Infinity==
:比较值。只要值相等,结果就是true===
:比较值和类型。只有值和类型都一样,结果才是truenumber
类型:0是false,非0是truestring
类型:"“是false,非”"是trueojbect
类型:null是false,非null是trueundefined
类型:始终是false函数和事件
function 函数名(形参列表){
//函数体
[return 返回值;]
}
let result = 函数名(实参列表);
//1.匿名函数赋值给一个变量,通过变量名调用
let fn = function(){}
fn();
//2.函数作为另外一个函数的实参
setInterval(function(){}, 1000)