1.BOM
alert()
prompt()
confirm()
console.log()
console.time()
console.timeEnd()
setInterval()
setTimeout()
2. window
一个页面 一个窗口 window.onload 每一个窗口都具有一个window
js的全局 this window.a
通过window属性添加的变量可以使用delete删除。
BOM的顶层对象是window。DOM的顶层对象document。所有的对象的顶层都是Object。
但是需要注意的是document是window的一个子对象。
3.认识浏览器
标题栏 : window.title 属性
状态栏 : window.status 属性
地址栏 : window.location 对象
历史记录 : window.history 对象 可以省略前面的window
4.location对象
href属性: 地址。统一资源定位符 .
location.href 会跳转页面,并且产生历史记录。
search属性:返回的URL的参数部分。
hash属性: 返回URL的hash值。
replace() 方法:能够实现页面的跳转,和href属性类似,但是不会产生历史记录。
reload()方法: 页面重新加载。如果参数设置为true。那么页面不使用浏览器缓存。
浏览器缓存:下载好的东西会在系统里保存一定的时间。每一个文件都有一个过期时间,一旦文件过期,系统自动删除。当访问的时候检测到服务器对这个文件做出过修改,那么就需要下载新的文件,旧的文件删除。
url : http://www.xmr100.com:80/admin/user/main.php?user=zhangsan&pass=123#n1
协议:
file ftp ssh
http:超文本传输协议
HTML:超文本标记语言
XML:可扩展标记语言域名:
www.xmr100.com
一级域名:.com .cn .中国
二级域名:www.bbaidu.com tupian.baidu.com ditu.baidu.com端口:
计算机提供服务的窗口
http:默认的是80端口,如果服务器提供网站服务的不是80端口,这个端口号不能省略。
HTTPS: http的安全版本。 443端口。
ssh 22
mysql 3306
计算机一共具有65535个端口。前10000个基本都具有专门的服务。用户自定义的服务要在10000之后。端口也是黑客攻击的主要方式。
黑客:骇客 hacker 一群最求高技术的计算机专家
白帽子:路径: 域名只能定位服务器。路径是用来确定文件位置的。
文件: 具体需要访问的文件。
参数: 请求所需要的一些参数。参数之间使用&连接。都是键值对的形式。
-
hash哈希值: 锚点
eg:localhost
点击前:
点击后:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="js.js"></script>
<img src="http://g.hiphotos.baidu.com/image/h%3D300/sign=8f27e5b05f66d01661199828a72ad498/8601a18b87d6277f28d3544525381f30e824fc8e.jpg" alt="">
<button>点击</button>
</body>
<script>
var btn = document.querySelector('button');
btn.onclick = function(){
//替换地址栏
location.href = 'http://baidu.com';
// console.log(location.search)
// console.log(location.hash)
// location.replace('http://baidu.com');
// location.reload(true);
//
// history.back();
};
</script>
</html>
5.history 对象 历史记录
length属性:历史记录的长度
注意: FF 。Chrome都是从1开始计算的。IE是从0开始计算的。
back()方法: 后退一步
forWard()方法:前进一步
go(数字)*: 跳转历史记录的个数。
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
console.log(history.length);
document.onclick = function(){
// location.href = '2localtion.html';
// history.forward();
history.go(2) //打印例记录的长度
}
</script>
</body>
</html>
6.screen 对象 屏幕
width属性 :返回显示器的宽度
height属性 : 返回显示器的高度 (包含屏幕任务栏的)
availWidth属性:返回显示器的宽度
availHeight属性:返回显示器的高度(不包含任务栏)
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
console.log(screen); //在任务栏中显示对象
</script>
</body>
</html>
7.navigator 浏览器信息(用户代理信息)
userAgent 属性:浏览器的版本信息
网页模式:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36
手机模式:Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.23 Mobile Safari/537.36
通过这个属性可以判断出用户的代理机器。
platform属性:当前浏览器的机器环境
Win32
cookieEnabled属性:检测浏览器是否启用cookie。
cookie:小饼干。在计算机里面表示一小片文本。用来存放用户的访问信息。
一般网站登录之后需要使用cookie去记录网站的登录状态。cookie是服务器写在浏览器主机上的。保存在客户端的。类似的在服务器端可以使用session的机制。
http协议是一种无状态的协议,不记录用户的状态,也不分辨用户的区别,更没有识别用户的能力。
cookie能够在每一次访问同一个网站的时候带一段小的文本过来,这个文本里面可以存放用户的不明感的个人信息。服务器可以根据这个信息来区分用户的身份。
也可以使用url参数的形式告诉服务器你是谁。
eg:检查浏览器是否启用cookie
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// console.log(navigator.userAgent);
// console.log(navigator.platform);
console.log(navigator.cookieEnabled);
</script>
</body>
</html>
8.窗口操作
window.open(url,target,control);
window.close(); 高级浏览器可以关闭一个不是通过open打开的窗口的,但是低级浏览器只能关闭open打开的窗口。
moveBy 从当前位置移动多少
moveTo 移动到多少
resizeBy 改变大小
resizeTo
scrollBy 滚动距离
scrollTo
eg:窗口打开、关闭
点击打开按钮打开新窗口
点击新窗口页面显示百度页面
点击关闭按钮关闭新窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>打开</button>
<button>关闭</button>
<script>
var btn = document.querySelectorAll('button');
btn[0].onclick=function(){
w=window.open('8.html','_blank','windth=400,height=400,top=100,left=100,location'); //在新窗口页面引进了下面8.html的百度网页
};
btn[1].onclick=function(){
w.scrollBy(200,200); //当前网页侧边栏滑动多少
}
</script>
</body>
</html>
eg:8.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
height:2000px;
}
</style>
</head>
<body>
dnnidcnin
<script>
window.onclick=function(){
window.open('http://baidu.com','_top'); //显示页面打开的显示情况
}
</script>
</body>
</html>