2、变量的命名规则：
1、String对象属性，属性长度
2、String对象方法
2 location对象
1 打开和关闭浏览器案例 
2 弹框案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="today01">
div----显示时间1
</div>
<br />
<a href="javascript:window.clearInterval(flag01)">停止定时器clearInterval</a>
<div id="today02">
div----显示时间2
</div>
<a href="javascript:window.clearTimeout(flag02)">停止定时器clearTimeout</a>
</body>
</html>
<script>
function showTime01(){
var time = new Date();
var year = time.getFullYear();
var month = time .getMonth();
var day = time.getDate();
var hour = time.getHours();
var minte = time.getMinutes()
var minlls = time.getSeconds();
document.getElementById("today01").innerHTML=year+"年"+month+"月"+day+"日"+hour+"时"+minte+"分"+minlls+"秒";
}
//调用定时器
var flag01 = window.setInterval("showTime01()",1000);
</script>
<script>
function showTime02(){
var time = new Date();
var Y = time.getFullYear();
var M = time.getMonth();
var D = time.getDate();
var H = time.getHours();
var M = time.getMinutes();
var S = time.getSeconds();
document.getElementById("today02").innerHTML=Y+"年"+M+"月"+D+"日"+H+"时"+M+"分"+S+"秒";
}
var flag02 = window.setInterval("showTime02()",2000);
</script>
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body onload="myLoad()">
<input id="userName" onkeydown="fun5()" onfocus="fun6()" onblur="fun7()" />
<input id="password" type="password" />
<button id="btn" type="button" onclick="fun2()" onmouseover="fun3()" onmouseout="fun4()">点击我试试</button>
<select id="month" onchange="fun1()">
<option>1月份</option>
<option>2月份</option>
</select>
</body>
</html>
<script>
function fun1() {
alert(‘选择的内容发生了变化‘);
}
function fun2() {
alert("触发了单击事件");
}
function fun3() {
document.getElementById("btn").innerHTML = "鼠标移动到按钮上了";
}
function fun4() {
document.getElementById("btn").innerHTML = "点击我试试";
}
function fun5() {
alert("键盘按下了");
}
function fun6() {
alert("获取到了焦点");
}
function fun7() {
alert("input失去了焦点");
}
function myLoad() {
alert("页面加载完毕");
}
</script>
上面的方法的作用：当触发了一个时间之后给出的反应
4、通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
查找 HTML 元素常用方法
代码演示：
2 修改 HTML 内容和属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="mydiv">div</div>
<h1 style="color: green;" id="myh1">hello world</h1>
<script>
var mydiv=document.getElementById("mydiv");
mydiv.innerHTML="新的div内容";
document.getElementById("myimg").src="x1.jpg";
var h1=document.getElementById("myh1");
h1.setAttribute("class","bg");//设置属性
console.log(h1.getAttribute("class"));//获取属性class
console.log(h1.getAttribute("style"));//获取属性style
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button type="button" onclick="createNewP()">点我试试</button>
<button type="button" onclick="createNewP2()">再点我试试</button>
<div id="div01">
<p id="id01">我是段落1</p>
<p>我是段落2</p>
</div>
</body>
</html>
<script>
//该方法时添加再后面
function createNewP(){
var newElement = document.createElement("p");
var text = document.createTextNode("这是我创建的新的段落1");
newElement.appendChild(text);
//获取页面中存在的一个
var my = document.getElementById("div01");
my.appendChild(newElement);
}
//该方法时添加在指定位置
function createNewP2(){
var newElement = document.createElement("p");
var text = document.createTextNode("这是我创建的新的段落2");
newElement.appendChild(text);
var div = document.getElementById("div01");
var id01 = document.getElementById("id01");
//添加新创建的元素p到已经存在的元素div中,指定插入到段落id01前面
div.insertBefore(newElement,id01);
}
</script>
2 替换 HTML 元素 -replaceChild()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button type="button" onclick="replaceElement()">点我试试</button>
<div id="div01">
<p id="id01">我是段落1</p>
<p>我是段落2</p>
</div>
</body>
</html>
<script>
function replaceElement(){
var newElement = document.createElement("p");
var text = document.createTextNode("这是我创建的新的段落2");
newElement.appendChild(text);
var div = document.getElementById("div01");
var id01 = document.getElementById("id01");
//添加新创建的元素p到已经存在的元素div中,指定插入到段落id01前面
div.replaceChild(newElement,id01);
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button type="button" onclick="deleteElement()">点我试试</button>
<button type="button" onclick="deleteElement02()">再点我试试</button>
<div id="div01">
<p id="p1">我是段落1</p>
<p>我是段落2</p>
</div>
</body>
</html>
<script>
function deleteElement(){
var div01 = document.getElementById("div01");
var p1 = document.getElementById("p1");
div01.removeChild(p1);
}
function deleteElement02(){
var p1 = document.getElementById("p1");
p1.parentNode.removeChild(p1);
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>英雄会注册</h1>
<form action="Demo02.html" method="get" onsubmit="return register()">
*用户名:<input type="text" id="userName" placeholder="请输入用户名" onblur="validateName()" />
<span id="nameMsg">用户名长度至少6位</span><br /> *密码：
<input type="password" id="password1" placeholder="请输入密码" onblur="validatePwd()" />
<span id="pwdMsg1">密码长度至少8位</span><br /> *确认密码：
<input type="password" id="password2" placeholder="请确认密 码" onblur="confirmPwd()" />
<span id="pwdMsg2">确认密码与密码一致</span><br /> *性别：
<select id="gender">
<option value="-1">请选择性别</option>
<option value="0">女</option>
<option value="1">男</option>
</select><br /><br />
<button type="submit">注册</button>
<button type="reset">重置</button>
</form>
</body>
</html>
<script>
function validateName(){
//获取到用户名
var userName = document.getElementById("userName").value;
var msg = document.getElementById("nameMsg");
if(userName==null || userName==""){
msg.innerHTML="用户名不能为空";
msg.style.color="red";
return false;
}else if(userName.length<6){
msg.innerHTML="用户名必须小于六位数";
msg.style.color="red";
return false;
}
msg.innerHTML="用户名输入正确";
msg.style.color="green";
return true;
}
function validatePwd(){
//获取到密码
var psw = document.getElementById("password1").value;
var msg = document.getElementById("pwdMsg1");
if(psw==null || psw==""){
msg.innerHTML="密码不能为空";
msg.style.color="red";
return false;
}else if(psw.length<8){
msg.innerHTML="用户名必须大于八位数";
msg.style.color="red";
return false;
}
msg.innerHTML="密码输入正确";
msg.style.color="green";
return true;
}
function confirmPwd(){
var psw1 = document.getElementById("password1");
var psw2 = document.getElementById("password2");
var msg = document.getElementById("pwdMsg2");
if(psw1!=psw2){
msg.innerHTML="前后密码不一致";
msg.style.color="red";
return false;
}
msg.innerHTML="密码输入正确";
msg.style.color="green";
return true;
}
function validateGender(){
var gender=document.getElementById("gender").value;
if(gender==-1){
alert("性别为必选项！");
return false;
}
return true;
}
function register(){
return validateName()&&validatePwd()&&confirmPwd()&&validateGender();
}
</script>
2） 正则表达式模式
3） 正则表达式的方法test(str)
原文：https://www.cnblogs.com/baiyangshu/p/15028351.html