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
点击前：
loaclhost 1.jpg
点击后：
loaclhost 2.jpg
<!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：
screen.jpg
<!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
cookie已被启用.jpg
<!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:窗口打开、关闭
点击打开按钮打开新窗口
窗口打开2.jpg
点击新窗口页面显示百度页面
窗口3.jpg
点击关闭按钮关闭新窗口
窗口关闭1.jpg
<!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>
网友评论