day50
JS核心技术
BOM
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。
Browser Object Model
window对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一
window.location
Location属性是一个用于存储当前载入页面URL信息的对象。
功能：
实现当前页面的跳转，【前面学习的提交按钮也可以】
window.location.href = “http://www.baidu.com”;
window.location = “http://www.baidu.com”;
重新加载页面
location.reload();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="fun01()">跳转百度</button>
<button onclick="fun02()">刷新</button>
<script type="text/javascript">
function fun01(){
//window.location.href = "http://www.baidu.com";
//window.location = "http://www.baidu.com";
location = "http://www.baidu.com";
}
function fun02(){
//window.location.reload();
location.reload();
}
</script>
</body>
</html>
window.history
操作同一个浏览器会话中的已访问页面
功能：
history.back()
history.forward()
history.go(-1)
histroy.go(1)
histroy.go(0)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="fun01()">上两页</button>
<button onclick="fun02()">上一页</button>
<button onclick="fun03()">刷新</button>
<button onclick="fun04()">下一页</button>
<button onclick="fun05()">下两页</button>
<script type="text/javascript">
function fun01(){
window.history.go(-2);
}
function fun02(){
//window.history.go(-1);
window.history.back();
}
function fun03(){
window.history.go(0);
}
function fun04(){
//window.history.go(1);
window.history.forward();
}
function fun05(){
window.history.go(2);
}
</script>
</body>
</html>
运行，然后直接在地址栏搜索其他网站网址，然后返回在代码运行页面就可以使用功能按钮
window.open()
open()方法将创建一个新的浏览器窗口 ，实现弹出新的窗口
window.open(“http://www.baidu.com”,“baidu”);
一般少有使用：1.用户体验差；2.浏览器可能会禁用
注意要在浏览器设置：弹出式窗口允许的条件下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.open("http://www.baidu.com","baidu");
//这里设置弹出指定窗口
</script>
</body>
</html>
各种弹出框
注意：当xx框出现后，用户需要点击确定按钮才能继续进行操作。
警告框
警告框经常用于确保用户可以得到某些信息。
语法：alert(“文本”)
确认框
确认框用于使用户可以验证或者接受某些信息。
如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
语法：confirm(“文本”)
提示框
提示框经常用于提示用户在进入页面前输入某个值。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
语法：prompt(“文本”,“默认值”)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="fun01()">警告框</button>
<button onclick="fun02()">确认框</button>
<button onclick="fun03()">提示框</button>
<script type="text/javascript">
function fun01(){
alert("警告框");
}
function fun02(){
//点击确定返回true，点击取消返回false
var bool = confirm("确认框");
console.log(bool);
}
function fun03(){
//点击确定返回输入的数据，点击取消返回null
var v = prompt("提示框","默认值");
console.log(v);
}
</script>
</body>
</html>
代码添加了控制台输出，在控制台即可观察变化，运行：
定时器
功能：
setTimeout()
语法
var t=setTimeout("javascript语句",毫秒)
clearTimeout()
语法
clearTimeout(setTimeout_variable)
setInterval()
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法
setInterval(code,millisec)
参数 描述 code 必需。要调用的函数或要执行的代码串。 millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="fun01()">取消定时器</button>
<img src="../img/波多野结衣.jpg" width="100px" height="100px" />
<script type="text/javascript">
var img = document.getElementsByTagName("img")[0];
//定时器：5000毫秒后触发该函数
var timeout = setTimeout(function(){
img.setAttribute("src","../img/樱井步.jpg");
},5000);
function fun01(){
clearTimeout(timeout);
}
</script>
</body>
</html>
运行即5000毫秒后图片变化，注意这里只变化一次，如果取消定时器就不会再变化，运行：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="fun01()">取消定时器</button>
<script type="text/javascript">
var interval = setInterval(function(){
console.log("用良心做教育");
},1000);
function fun01(){
clearInterval(interval);
}
</script>
</body>
</html>
这个会一直运行，控制台可见数字增长，如果取消定时器就不会再变化，即数字定格，运行：
案例
ps1：实现页面的倒数自动跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{color: red;}
</style>
</head>
<body>
<h1>注册成功，<span>3</span>秒后跳转到<a href="http://www.baidu.com">百度</a></h1>
<script type="text/javascript">
var span = document.getElementsByTagName("span")[0];
setInterval(function(){
var num = span.innerText;
if(num > 1){
num--;
span.innerText = num;
}else{
window.location = "http://www.baidu.com";
}
},1000);
</script>
</body>
</html>
运行：
ps2：做一个时钟的效果 13:22:23
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1></h1>
<script type="text/javascript">
var h1 = document.getElementsByTagName("h1")[0];
setInterval(function(){
showTime();
},1000);
function showTime(){
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var time = hour + ":" + minute + ":" + second;
h1.innerText = time;
}
showTime();
</script>
</body>
</html>
运行：
ps3：实现图片的定时切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="../img/tx1.jpg" width="100px" height="100px" />
<script type="text/javascript">
/**
* 图片切换
*/
var path = ["../img/tx2.jpg","../img/tx3.jpg","../img/tx1.jpg"];
var index = 0;
var img = document.getElementsByTagName("img")[0];
setInterval(function(){
img.setAttribute("src",path[index]);
index++;
if(path.length == index){
index = 0;
}
},1500);
</script>
</body>
</html>
图片来回切换，这里是连续截图，运行：
Cookie
cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。
Cookie可以做什么？
- 保存用户的登录状态
- 定制页面，如换肤，选择所在地区等等
- 购物车的实现
- 记录用户的浏览历史记录
Cookie的缺点：
- cookie可能被禁用
- cookie是与浏览器相关的，即使访问同一个页面，不同的浏览器保存的cookie也是不能互相访问的
- cookie可能被删除，因为cookie实际就是硬盘上的一个文件
- cookie的安全性不够高，所有的cookie都是以纯文本的形式记录于文件中。
添加cookie、删除cookie、获取cookie（获取指定key上的value）
简单地说：cookie是以键值对的形式保存的，即key=value的格式。各个cookie之间一般是以“;”分隔。
注意：会话开始结束【浏览器打开、关闭】
为cookie设置过期时间
到现在为止，所有的cookie都是内存会话cookie，即浏览器关闭后这些cookie将会丢失，事实上这些cookie仅仅是存储在内存中，而没有建立相应的硬盘文件。
在实际开发中，cookie常常需要长期保存，例如保存用户登录的状态。这可以用下面的选项来实现：
document.cookie=“userId=828; expires=GMT_String”;
其中GMT_String是以GMT格式表示的时间字符串，这条语句就是将userId这个cookie设置为GMT_String表示的过期时间，超过这个时间，cookie将消失，不可访问。
注意：这里没有设置中文、因为设置中文需要编码和解码
下面涉及返回值的问题，通常我们是拿到值进行进一步操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="fun01()">添加Cookie</button>
<button onclick="fun02()">删除Cookie</button>
<button onclick="fun03()">修改Cookie</button>
<button onclick="fun04()">查询Cookie</button>
<script type="text/javascript">
function fun01(){
var date = new Date();
date.setTime(date.getTime() + 1000*60*60*24*10);
document.cookie = "username=hhy;expires=" + date.toGMTString();
document.cookie = "password=123123;expires=" + date.toGMTString();
}
function fun02(){
var date = new Date();
date.setTime(0);
document.cookie = "username=hhy;expires=" + date.toGMTString();
document.cookie = "password=123123;expires=" + date.toGMTString();
}
function fun03(){
var date = new Date();
date.setTime(date.getTime() + 1000*60*60*24*10);
document.cookie = "username=xiaohong;expires=" + date.toGMTString();
document.cookie = "password=123456;expires=" + date.toGMTString();
}
function fun04(){
alert(document.cookie);
}
</script>
</body>
</html>
添加设置过期时间，删除就是将添加的时间改为0，反正就是改变时间；修改就是改key对应的value
优化：
添加、修改、删除都是数据的更新，注意查询一般是拿到key对应的value值，并不是全部拿到
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="fun01()">添加Cookie</button>
<button onclick="fun02()">删除Cookie</button>
<button onclick="fun03()">修改Cookie</button>
<button onclick="fun04()">查询Cookie</button>
<script type="text/javascript">
function fun01(){
updateCookie("username","hhy",1000*60*60*24*10);
updateCookie("password","123123",1000*60*60*24*10);
}
function fun02(){
updateCookie("username","hhy",0);
updateCookie("password","123123",0);
}
function fun03(){
updateCookie("username","xiaohong",1000*60*60*24*10);
updateCookie("password","123456",1000*60*60*24*10);
}
function fun04(){
alert(queryCookie("username") + " -- " + queryCookie("password"));
}
function updateCookie(key,value,time){
var date = new Date();
date.setTime(date.getTime() + time);
document.cookie = key + "=" + value+ ";expires=" + date.toGMTString();
}
function queryCookie(key){
var cookies = document.cookie.split(";");
for(var i = 0;i<cookies.length;i++){
var cookieKey = cookies[i].trim().split("=")[0];
var cookieValue = cookies[i].trim().split("=")[1];
if(key == cookieKey){
return cookieValue;
}
}
return null;
}
</script>
</body>
</html>
运行：这里拿的value
JS对象
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数…
此外，JavaScript 允许自定义对象。
创建js对象
通过 JavaScript，您能够定义并创建自己的对象。
创建新对象有两种不同的方法：
方式1、2创建直接的实例
方式3用构造器 ：有了对象构造器，就可以创建新的对象实例
注意：js里{}里表示一个对象。for…in 循环中的代码块将针对每个属性执行一次。 访问对象的属性和方法和java类似
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var stu = new Object();
stu.name = "奇男子";
stu.age = 23;
stu.printInfo = function(){
alert(this.name + " -- " + this.age);
}
stu.printInfo();
</script>
</body>
</html>
//方式2：替代语法（使用对象 literals /JSON 字面值）
<script type="text/javascript">
var stu = {
"name":"奇男子",
"age":21,
"printInfo":function(){
alert(this.name + " -- " + this.age);
}
};
stu.printInfo();
</script>
//方式3：构造器
<script type="text/javascript">
function Student(name,age){
this.name = name;
this.age = age;
}
//原型：在原有的基础上加属性或函数
Student.prototype.printInfo = function(){
alert(this.name + " -- " + this.age);
}
var stu = new Student("奇男子",20);
//stu.printInfo();
//遍历对象：for-in可以遍历出对象里的属性和函数
for(var v in stu){
console.log(v);
}
</script>
JS面向对象的特点
JavaScript 是面向对象的语言，但 JavaScript 不使用类。
在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。
JavaScript 基于 prototype（原型）【相当于java继承】，而不是基于类的。
补充：去除空格
正则表达式
replace(/(^\s*)|(\s*$)/g,“”)
493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
