JavaScript日常笔记-1

1.JS的组成

ECMAScript语法

Bom浏览器与JS交互

Dom html内容与JS交互

2.BOM对象

1.screen 屏幕

        //屏幕宽高
		document.write("<br/>屏幕的宽"+screen.width);
		document.write("<br/>屏幕的高"+screen.height);
		//移除状态栏的屏幕宽高
		document.write("<br/>移除状态栏的屏幕宽"+screen.availWidth);
		document.write("<br/>移除状态栏的屏幕高"+screen.availHeight);
		//浏览器可视区域的宽高
		document.write("<br/>可视区域的宽"+window.innerWidth);
		document.write("<br/>可视区域的高"+window.innerHeight);

2.location 地址

        <h1>location</h1>
		<button type="button" onclick="sx()">刷新</button>
		<script type="text/javascript">
			function sx(){
				location.reload();//普通刷新
				//location.reload(true)//更新缓存（强制更新缓存刷新）
			}
			//解析地址栏信息（路由和跨域时用到）
			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>

3.navigator 浏览器对象

<    h1>Navigator</h1>
	<script type="text/javascript">
		//全局方法 alert警告，confirm确认，prompt输入，setInterval间隔，serTimeout延迟
		//	window	innerWidth可视宽，innerHeight可视高
		//history back()返回，forward前进 go(num)跳转
		//location reload()刷新 href地址 protocol协议 hostname域名 pathname路径 port端口号
		//	search查询 hash哈希
		//sceen width宽 height高 availHeigth可用高 availWidth可用宽
		//
		var aa = navigator.userAgent;
		document.write("<br/>"+aa);
			
		if(aa.includes("Mobile")){
			document.width("<br/>手机浏览器")
		}else{
			document.width("<br/>pc浏览器")
		}
	</script>

4.history 历史记录

    <script type="text/javascript">
		function qj(){
			history.go(1);
			//历史记录前进1
		}
		function ht(){
			//历史记录后退1
			// history.back();
			history.go(-1);
		}
	</script>

3.window的全局方法

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

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

3.常用全局方法 都可以省略window。

alevt警告框、

comfiem确认框、

prompt弹出框、

setlerve间隔调用、

isNaN是否为数字、

document文档、

console.log控制台输出

4.window的事件

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

2.onscroll-滚动时候触发

3.resize-当窗口发生大小变化

4.滚动距离：document.documentElement.scrollTop

5.open方法

语句：win=window.open(url,name,feature)

1.url 打开文件的地址

2.name 名称

3.feature 特性"width=100,heigth=100","top=100,left=100"

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

<script type="text/javascript">
			//声明全局变量
			var win;
			//打开窗口
			function openA(){
				//width 打开窗口的宽
				//heigth 打开窗口的高
				//top 距离屏幕左上角的位置
				//left 与屏幕左上角的水平距离
				win=window.open("https://www.baidu.com","baidu",
                "width=100,heigth=100","top=100,left=100")
			}
			
			//关闭窗口
			function GUAN(){
				win.close();
			}
		</script>