JavaScript Day 3
JavaScript Day 3
JavaScript对象
-
String对象
var string = new String('hello'); alert(typeof(string)+' '+string); -
Array对象
var array1=new Array(); array1[0]=0; array1[1]=1; var array2=[1,2]; var array3=new Array(1,2,3); -
Date对象
var date1 = new Date(); var date2 = new Date(milliseconds); var date3 = new Date(dateString); var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds); -
Math对象
var num=Math.random();// 返回 0 ~ 1 之间的随机数。 var max=Math.max(12,34,-90,9);//返回 n个数值中的最大值。 var min=Math.min(12,34,-90,9);//返回 n个数值中的最小值。
JavaScript的函数
常用全局函数
- isNaN(param)
- parseFloat(String)
- parseInt(string,radix)
自定义函数
function 自定义函数名称(参数列表){
//函数体
}
//函数的形参直接写参数名称，不需要声明类型，即不需要写var.
//函数的返回取决于函数体中是否有return关键字.
匿名函数
var fun = function () {
alert("fun!");
}
fun();
JavaScript变量的作用域
- 局部 JavaScript 变量
在 JavaScript 函数内部声明的变量(使用 var)是 变量，所以只能在函数内部访问,在不同的函数中可以声明名称相同变量，因为局部变量出该函数就失效了。 - 全局 JavaScript 变量
在函数外声明的变量是 变量，网页上的所有脚本和函数都能访问它。
<script>
var userId = 1001; //全局变量:整个script脚本中都可用,要注意先后顺序
function printMessage() {
var userName = "李白";//局部变量:只在当前函数中生效
document.write(userId);//使用全局变量的时候，保证使用(方法被调用)之前定义并赋值
document.write(message);
printMessage();
</script>
<script>
function printMessage2() {
var userName2 = "李白2";
document.write(userId);//这里也可以使用userId
//document.write(userName1);//错误:调用不到printMessage函数中的局部变量
document.write(userName2);//正确:可以使用自己函数中的局部变量
}
</script>
变量的生命周期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。
JavaScript自定义对象
var Student =
{
name: "LIN",
age: 12,
height: 177.5,
study: function () { alert("Study!") }
}
Student.study();
alert(Student.name);
//访问对象的属性
//方式1:
var n = Student.name;
//方式2:
var n2 = Student["name"];
Window–浏览器对象模型(BOM)
-
window对象Window 对象 (w3school.com.cn)
if(window.confirm("confirm test")==true)alert("yes"); else alert('no');<a href="javascript:window.open('https://www.baidu.com')">打开百度</a> <a href="javascript:window.open('index.html')">打开-index</a> <a href="javascript:window.close()">关闭当前页面</a>定时器操作
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="/test.js"></script> </head> <body> <script> function fun() { document.getElementById("demo").innerHTML = new Date().toUTCString(); } window.setInterval("fun()", 1000); </script> <p id="demo"></p> </body> </html> -
history对象
<a href="javascript:window.history.forward()">前进</a> <a href="javascript:window.history.back()">后退</a> <a href="javascript:window.history.go(1)">前进go</a> <a href="javascript:window.history.go(-1)">后退go</a> -
location对象
<a href="javascript:alert(window.location.href)">获取当前页面的URL地址</a> <a href="javascript:window.location.reload()">刷新</a><br /> <a href="javascript:window.location.replace('index.html')">跳转到index</a><br /> <a href="javascript:location.replace('https://www.baidu.com')">跳转到百度</a><br />
JavaScript之事件
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载
onfocus 元素获取焦点时触发
onblur 元素失去焦点时触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/test.js"></script>
</head>
<body>
<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>
<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>
</body>
</html>
JavaScript之DOM模型
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML：
- JavaScript 能够改变页面中的所有 HTML
- 元素 JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
document.getElementById() 返回对拥有指定 id 的第一个对象的引用。
document.getElementsByClassName() 返回文档中所有指定类名的元素集合，作为 NodeList 对象
document.getElementsByTagName() 返回带有指定标签名的对象集合
document.getElementsByName() 返回带有指定名称的对象集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function myLoad() {
//如果有重名的ID元素，获取到的是第一个元素)
var div = document.getElementById("myDiv");
console.log(div);
//根据指定的类样式的名称获取元素，返回集合
var list = document.getElementsByClassName("demo");
console.log("根据类样式的名称获取到的元素的集合长度是:" + list.length); for (var i = 0; i < list.length; i++) {
console.log(list[i]);
}
//根据指定HTML标签名称获取元素，返回集合
var list2 = document.getElementsByTagName("li");
console.log("根据标签的名称获取到的元素的集合长度是:" + list2.length);
for (var i = 0; i < list2.length; i++) {
console.log(list2[i]);
}
//根据指定HTML元素的name属性获取元素，返回集合
var list3 = document.getElementsByName("myli"); console.log("根据标签的名称属性获取到的元素的集合长度是:" + list3.length);
for (var i = 0; i < list3.length; i++) {
console.log(list3[i]);
}
}
</script>
<body onload="myLoad()">
<p class="demo"></p>
<div id="myDiv" class="demo">
div
</div>
<ul class="demo">
<li>li11111111111</li>
<li name="myli">li11111111111</li>
<li>li11111111111</li>
<li name="myli">li11111111111</li>
</ul>
</body>
</body>
</html>
修改 HTML 内容和属性
//修改 HTML 元素属性的语法:
//方式1:
document.getElementById(id).attribute=新属性值;
//方式2:
document.getElementById(id).setAttribute(属性名，属性值);
修改 HTML 元素的css
document.getElementById("myli").style.color="blue";
document.getElementById("myli").style.fontFamily="微软雅黑";
document.getElementById("myli").style.fontSize="24px";
HTML DOM 元素
创建新的 HTML 元素
要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var num = 0;
function createNewP() {
var newP = document.createElement("p");
newP.appendChild(document.createTextNode("" + num++));
document.getElementById("div1").appendChild(newP);
}
function createNewP2() {
var newP = document.createElement("p");
newP.appendChild(document.createTextNode("" + num++));
document.getElementById("div1").insertBefore(newP, document.getElementById("p1"));
}
</script>
</head>
<body>
<button type="button" onclick="createNewP()">动态添加一个元素-- appendChild</button>
<button type="button" onclick="createNewP2()">动态添加一个元素-- insertBefore</button>
<div id="div1">
<p id="p1">这是段落1</p>
</div>
</body>
</html>
替换 HTML 元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function changeElemnt() {
var num = 'hello';
var newp = document.createElement('p1').appendChild(document.createTextNode(num));
document.getElementById('div1').replaceChild(newp, document.getElementById('p1'));
}
</script>
</head>
<body>
<div id="div1">
<p id="p1">1</p>
</div>
<button type="button" onclick="changeElemnt()">+1</button>
</body>
</html>
删除HTML元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function changeElemnt() {
document.getElementById('div1').removeChild(document.getElementById('p1'));
}</script>
</head>
<body>
<div id="div1">
<p id="p1">1</p>
</div>
<button type="button" onclick="changeElemnt()">removeChild</button>
</body>
</html>
表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script>
function validateName(){
//所有的表单项元素都value属性
var name=document.getElementById("userName").value;
var msg=document.getElementById("nameMsg");
if(name==null || name ==""){
msg.innerHTML="用户名不能为空!";
msg.style.color="red";
return false;
} else if(name.length<6){
msg.innerHTML="用户名长度必须为大于6的!";
msg.style.color="red";
return false;
}
msg.innerHTML="用户名可用"; msg.style.color="green";
return true;
}
function validatePwd(){
var password1=document.getElementById("password1").value;
var msg=document.getElementById("pwdMsg1");
if(password1==null || password1 ==""){
msg.innerHTML="密码不能为空!"; msg.style.color="red";
return false;
} else if(password1.length<8){
msg.innerHTML="密码的长度必须为大于8的!";
msg.style.color="red";
return false;
}
msg.innerHTML="密码合法"; msg.style.color="green";
return true;
}
function confirmPwd(){
var pwd1=document.getElementById("password1").value;
var pwd2=document.getElementById("password2").value;
var msg=document.getElementById("pwdMsg2");
if(pwd1!=pwd2){
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>
</head>
<body>
<form action="提交.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>
正则表达式
var reg=new RegExp(/正则表达式主体/,修饰符(可选)); 或更简单的方法
var reg=/正则表达式主体/修饰符(可选);
案例:
var reg=new RegExp(/kaikeba/i);
var reg = /kaikeba/i; //此处定义了一个一个正则表达式。 kaikeba 是一个正则表达式主体 (用于检索)。
i 是一个修饰符 (搜索不区分大小写)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>var pattern = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
str = window.prompt("邮箱验证");
alert(pattern.test(str));
</script>
</head>
<body>
</body>
</html>
浙公网安备 33010602011771号