5.17JS的这些Bom基础内容快来学习吧

前言：目前正在学习JS的一些基础内容，会将学习到的持续分享到博客，欢迎萌新观看

文章目录

• 一、window对象
• 二、window全局方法
• 三、screen屏幕
• 四、history历史记录
• 五、location地址栏信息
• 六、navigator
• 七、open方法
• 八、事件
• 九、编码

           1.常见编码

           2.编译为URL

           3.预览图片

一、Bom、window对象

1.浏览器对象模型Browser Object Model

2.document文档
3.screen 屏幕
4.location 地址
navigator 浏览器对象
5.history历史记录
6.本地存储相关

二、window全局方法

1. script 中 var 声明变量没有用var 声明的变量 都是window全局变量

2. 有id命名的html节点也是全局对象 可以通过window.id名访问

3. 常用全局方法，都是省略了window，alert警告，confirm 确认，prompt弹框，setInterval间隔调用，setTimeout延迟调用，isNaN是否为非数字，doument文档

三、screen屏幕

1、width 屏幕宽、height 屏幕高

	// 屏幕的宽高
			document.write("<br/>屏幕的宽"+screen.width);
			document.write("<br/>屏幕的高"+screen.height);

2、avialWidth 除任务栏宽、availHeight 除任务栏高

// 移除状态的屏幕宽高
			document.write("<br/>可用屏幕的宽"+screen.availWidth);
			document.write("<br/>可用屏幕的高"+screen.availHeight);
			

3、window.innerHeight 浏览器的可视区域高、window.innerWdith 浏览器的看的是区域宽

	// 浏览器可视区域的宽高
			document.write("<br/>浏览器可视区域宽"+window.innerWidth);
			document.write("<br/>浏览器可视区域高"+window.innerHeight);

四、history历史记录

1、forward() 前进、go(1)前进

2、back() 后退、go(-1)后退

*注：有浏览记录才能前进或后退

<a href="demo2-screen.html">screenB</a>
		<button type="button" onclick="goForward()">前进</button>
		<button type="button" onclick="goBack()">返回</button>
		<script>
			function goForward(){
				// 实现前进 浏览器记录向前一步				
				// history.forward();
				history.go(1);//前进一步
			}
			// forward前进 back 返回
			function goBack(){
				// history.back();
				history.go(-1); //后退一步
			}

五、location地址栏信息

1、reload() 刷新、reload(true)刷新并强制更新缓存

2、href 地址信息（全）http://127.0.01/javascript/index.html?name=mumu&age=18#good
3、protocol 协议 http:
4、hostname 域名 127.0.0.1
5、port 端口号 :8080
6、pathname 地址 /javascript/index.html
7、search 查询?name=mumu&age=18
8、hash 哈希值 （锚点）（?后面的值）#good

	<button type="button" onclick="reload()">刷新</button>
		<button type="button" onclick="change()">跳转</button>
	
		<script type="text/javascript">
			function change(){
				alert("付款完毕，自动跳回商户页面");
				// 修改地址href
				location.href="http://www.baidu.com";
			}
			function reload(){
				location.reload();//普通刷新
				// location.reload(true)//更新缓存（强制更新缓存刷新）
			}
			//解析地址栏信息（路由的时候可以用上，跨域时候）
			document.write("<br/>地址信息："+location.href);
			// 常见协议：file:// http:// https:// ftp:// mail://
			document.write("<br/>协议："+location.protocol);
			document.write("<br/>域名："+location.hostname);
			document.write("<br/>路径："+location.pathname);
			document.write("<br/>端口号："+location.port);
			document.write("<br/>查询："+location.search);
			document.write("<br/>哈希（锚点）："+location.hash);
		</script>

六、navigator

1、ua  = navigator.userAgent;、浏览器的头信息

2、判断浏览器、        if(ua.includes("Mobile")){//手机浏览器}

	<button type="button" onclick="jump()">跳转</button>
		<script type="text/javascript">
			// 全局方法 	alert 警告 confirm 确认 prompt输入 setInterval间隔 setTimeout延迟 
			// 			innerWidth可视宽 innerHeight可视高
			// history 	back()返回 forward() 前进 go(num)跳转
			// location reload()刷新 href地址 protocol协议hostname域名 pathname路径  port端口号 
			// 			search查询 hash哈希
			// screen	width宽 height高 availHeight可用高 availWidth 可用宽
			// navigator
			// console.log(navigator);
			// 最重要的UA 浏览器的头信息：通常判断是什么浏览器（pc，手机，ios，安卓，谷歌还是Edg...）
			var ua = navigator.userAgent;
			document.write("<br/>"+ua);
			// 检测浏览器是否为手机  includes包含  检测浏览器的头信息是否包含Mobile字符串
			if(ua.includes("Mobile")){
				document.write("<br/>手机浏览器")
			}else{
				document.write("<br/>PC浏览器")
			}
			function jump(){
				location.href = "https://www.baidu.com";
			}
		</script>

七、open方法

1、win = window.open(url,name,feature)
2、url 打开文件的地址  https://www.baidu.com
3、name 名称  
4、feature 特性  “width=400,height=400,top=200,left=200”

5、关闭 打开的窗口win.close() 

	<button onclick="openWin()">打开窗口</button>
		<button onclick="closeWin()">关闭打开的窗口</button>
		 
		<script type="text/javascript">
			// 声明全局变量
			var win;
				
			function openWin(){
				 // width 打开窗口的宽
				 // height 打开窗口的高
				 // top 距离屏幕左上角的位置
				 // left 与屏幕左上角的水平距离
				 // window.open(url,name,feature)
				 // url 打开的地址 name 命令（窗口通信与查找 ） featrue特性 
				win=window.open("https://www.baidu.com","baidu","width=400,height=400,top=200,left=200")
			 }
			 function closeWin(){
				 // 自己打开的才能自己关闭
				 win.close();
			 }
		</script>

八、事件

1、onload事件窗口、图片加载完毕触发

		<script type="text/javascript">
			// 在上面时候，页面还没有加载完毕，访问不到myh，也访问不到myh.innerText
			// alert(window.myh.innerText);
			// 等待页面加载完毕后再执行 访问节点的操作
			
			// id命名的html节点是全局window的子对象可以直接访问
			
			
			// 在head 里面的script执行代码的时候，body，h1 p都还没有加载
			// myh是访问不到的
			// 我们需要等待整个页面加载完毕后再去访问myh
			window.onload =function(){
				// 当窗口加载完毕执行这个function
				console.log("窗口加载完毕");
				// 窗口加载完毕，可以访问myh
				console.log(myh.innerText);
			}
		</script>
	</head>
	<body>
		<h1 id="myh">windows 常用事件</h1>
		<p>onload,onscroll onresize</p>
	
	</body>

2、onscroll 滚动时候触发、滚动距离：document.documentElement.scrollTop

	<script>
			window.onscroll = function(){
                // 当滚动条滚动执行这个function
				console.log("页面滚动了");
				
				// 页面滚动的距离
				var t = document.documentElement.scrollTop;
				// 页面垂直滚动的距离 document文档 docmentElement根节点
				// scrollTop垂直滚动距离 scrollLeft 水平滚动距离
				console.log(t);
			}
		</script>

3、resize当窗口发生大小变化

	<script>
			// 当窗口发生大小变化时候，向页面写入窗口可视区域的宽高
			 window.onresize = function(){
			 	console.log("窗口的大小发生了变化");
				console.log("宽："+window.innerWidth+",高:"+window.innerHeight)
			console.log("宽：1920，高：1080")
			
			 }
			
		</script>

九、编码

1、常见编码：utf-8 万国码、gb2312 国标、gbk  中文包含繁体字

2、编译为URL：decodeURI：

1. 转url编码、encodeURI：解url编码
2. decodeURIComponent：转URI编码、ecodeURIComponent：解URI编码（包含标点符号）

	<p>utf-8,gb2312,xxxx</p>
		<script>
			// http://127.0.0.1:8848/javascript/demo10-%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%BC%96%E7%A0%81.html 
			// 为什么需要编码：互联网是全世界的，中国人用中文，阿拉伯，用阿拉伯文
			// 阿拉伯人电脑用中文字体  识别失败 
			// 国际上用万国编码 utf-8
			// 对一些特殊的还是需要手动转义 地址就需要转换
			 var str = "中国";
			// encodeURI 把字符串转换为浏览器地址可以识别的字符
			 console.log(window.encodeURI(str));
			// %E4%B8%AD%E5%9B%BD 
			// 把url编码的字符转换为普通字符串
			 console.log(decodeURI("%E4%B8%AD%E5%9B%BD"))
			var str = ",!"; //encodeURI默认是不会转义标点符号
			// encodeURIComponent会转义标点符号 decodeURIComponent
			console.log(window.encodeURIComponent(str));
		</script>

3、预览图片：img.src = window.URL.createObjectURL(myf.files[0])

	<input type="file" name="" id="myf" value="" onchange="preImg()" multiple />
		<img src="" width="50%" id="mypic"/>	 
		 <!-- onclick 被点击，onchange值发生变化了 -->
		<script>
	       //用户选择图片时候能预览图片
		   function preImg(){
			   // 拿到图片文件
			   var file = myf.files[0];
			   // 把图片文件转换为base64字符串
			   // create创建Object对象URL字符串编码
			   var src = window.URL.createObjectURL(file);
			   // 定义图片的src
			   mypic.src = src;
		   }
		</script>