JavaScript学习笔记（四）

JavaScript学习笔记（四）

	<p><b>JS的构成：</b>ECMAScript、BOM、DOM</p>
		<p>ECMAScript：定义JS的基本语法。</p>
		<p>BOM：浏览器对象模型。</p>
		<p>DOM：文档——HTML。</p>
		<p><b>DOM和BOM的区别于联系：</b></p>
		<p>BOM的顶级对象是window。</p>
		<p>DOM的顶级对象是document。</p>
		<p>BOM包括DOM。</p>
		<p><b>JS语言类型大致分为三种：</b></p>
		<h4>（一）、用户定义对象。</h4>
		<h4>（二）、内置对象。</h4>
		<h4>（三）、宿主对象。</h4>
		<p><b>window对象包含的方法：</b></p>
		<ol>
			<li>
				<h4>alert 方法</h4>
				<p>作用：以提示框的形式输出信息。</p>
				<p>格式：window.alert("输出的信息");</p>
				<p>注意：alert不能解析标签。</p>
				<p>
					<span style="color: green;">eg：</span>
					<script type="text/javascript">
						 window.alert("信息");
					</script>
				</p>
			</li>
			<li>
				<h4>confirm 方法</h4>
				<p>作用：弹出确认框。</p>
				<p>格式：window.confirm('提示文字');</p>
				<p>返回值：TRUE（确认）、FALSE（取消）。</p>
				<p>
					<span style="color: green;">eg：</span>
					<script type="text/javascript">
						var x = window.confirm("哈哈");
						 console.log(x);
						document.write(typrof(corfirm));
					</script>
				</p>
			</li>
			<li>
				<h4>prompt 方法</h4>
				<p>作用：弹出输入框。</p>
				<p>格式：window.pormpt('提示文字','默认值');</p>
				<p>注意：返回值为字符串string类型。</p>
				<p>
					<span style="color: green;">eg：</span>
					<script type="text/javascript">
						 window.prompt("你好！","未来的我！");
					</script>
				</p>
			</li>
			<li>
				<h4>isFinite 方法</h4>
				<p>作用：判断数据是否为有限数据。</p>
				<p>格式：window.inFinite(数据);</p>
				<p>返回值：如果是有限数据返回TRUE，否则返回FALSE。</p>
				<p>注意：参数可以使任意类型，判断是系统会调用Number方法将参数转换成数值型，如果转换成功，且是有限数据，返回TRUE，如果成功，但是是Infinity或者是-Infinity，那么返回FALSE，如果是NaN,返回FALSE。</p>
				<p>
					<span style="color: green;">eg：</span>
					<script type="text/javascript">
						document.write(window.isFinite(555*"aw"));
					</script>
				</p>
			</li>
			<li>
				<h4>isNaN 方法</h4>
				<p>作用：判断数据是否为NaN,是返回TRUE，反之FALSE。</p>
				<p>格式：window.inNaN(数据);</p>
				<p>
					<span style="color: green;">eg：</span>
					<script type="text/javascript">
						document.write(window.isNaN("aaa"));
					</script>
				</p>
			</li>
			<li>
				<h4>open 方法</h4>
				<p>作用：打开一个新的浏览器。</p>
				<p>格式：window.open("新窗口地址","新窗口名称","新窗口特性");</p>
				<p>
					<h4>参数说明：</h4>
					<ul>
						<li>三个参数可以省略，则打开的是空白窗口。</li>
						<li>如果省略两个参数，则打开多个窗口。</li>
						<li>新窗口特性：“width=新窗口宽度，height=新窗口高度，top=新窗口距离屏幕顶端的距离，left=新窗口距离屏幕右侧的距离。”</li>
					</ul>
				</p>
				<p>
					<span style="color: green;">eg：</span>
					<button id="box">打开窗口</button>
					<script type="text/javascript">
						var btn1 = document.getElementById("box");
						var cc;
						btn1.onclick = function() {
							cc = window.open("https://www.2345.com/?from=ie","","width=500px height=200px");
						}
					</script>
				</p>
			</li>
			<li>
				<h4>close 方法</h4>
				<p>作用：关闭窗口。</p>
				<p>格式：window.close();</p>
				<p>
					<span style="color: green;">eg：</span>
					<button id="co">关闭窗口</button>
					<script type="text/javascript">
						var btn2 = document.getElementById("co");
						btn2.onclick = function() {
							cc.close();
						}
					</script>
				</p>
			</li>
			<li>
				<h4>moveTo 方法</h4>
				<p>作用：将窗口移动到指定位置。</p>
				<p>格式：window.moveTo(x,y);</p>
				<p>
					<span style="color: green;">eg：</span>
					<button id="xck">打开新的窗口</button>
					<button id="tok">moveTo移动窗口</button>
					<script type="text/javascript">
						var btn3 = document.getElementById("xck");
						var btn4 = document.getElementById("tok");
						var xk;
						btn3.onclick = function() {
							xk = window.open("","","width=500,height=100")
						}
						btn4.onclick = function() {
							xk.moveTo(100,200);
						}
					</script>
				</p>
			</li>
			<li>
				<h4>moveBy 方法</h4>
				<p>作用：将窗口按照指定的尺寸进行移动。</p>
				<p>格式：window.moveBy(x,y);</p>
				<p>
					<span style="color: green;">eg：</span>
					<button id="by">moveBy移动窗口</button>
					
					<script type="text/javascript">
						var btn5 = document.getElementById("by");
						btn5.onclick = function() {
							xk.moveBy(300,200);
						}
					</script>
				</p>
			</li>
		</ol>
		<p><b>window对象的定时器方法：</b></p>
		<h4>一、setInterval方法与clearInterval</h4>
		<h4>setInterval 方法：</h4>
		<p>作用：被称之为间歇调用函数，可以再一定间隔时间下重复执行某些操作。</p>
		<p>格式：window.setInterval(要重复执行的操作,时间间隔);</p>
		<p>
			参数说明：
			<ul>
				<li>要重复执行的操作：可以是匿名函数，也可以是函数名称。</li>
				<li>时间间隔：以毫秒为单位，1秒=1000毫秒。</li>
				<li>注意：该方法的返回值为:定时器的编号，该编号可以用来清除定时器。</li>
			</ul>
		</p>
		<p>
			<span style="color: green;">eg：</span>
			控制台查看F12
			<script type="text/javascript">
				var timer = window.setInterval(fn,100);
				var tz;
				function fn() {
					tz = console.log("HELLo！");
				}
			</script>
		</p>
		<h4>clearInterval 方法：</h4>
		<p>作用：该方法的作用就是用来清除setInterval方法启动的定时器。</p>
		<p>格式：window.clearInterval(定时器编号);</p>
		<p>
			<span style="color: green;">eg：</span>
			控制台输入clearInterval(定时器编号);
		</p>
		<h4>二、setTimeout方法与clearTimeout方法</h4>
		<h4>setTimeuot 方法</h4>
		<p>作用：被称作为超时调用函数，即可以在指定的时间后执行某些行为</p>
		<p>格式：window.setTimeout(要执行的操作,延迟时间);</p>
		<p>
			参数说明：
			<ul>
				<li>要重复执行的操作：可以是匿名函数，也可以是函数名称。</li>
				<li>时间间隔：以毫秒为单位，1秒=1000毫秒。</li>
				<li>注意：该方法的返回值为:定时器的编号，该编号可以用来清除定时器。</li>
			</ul>
		</p>
		<p>
			<span style="color: green;">eg：</span>
			控制台查看F12
			<script type="text/javascript">
				var time = window.setInterval(fu,1000);
				function fu() {
					console.log("你好！");
				}
			</script>
		</p>
		<h4>clearTimeout 方法：</h4>
		<p>作用：该方法的作用就是用来清除setTimeout方法启动的定时器。</p>
		<p>格式：window.clearTimeout(定时器编号);</p>
		<p>
			<span style="color: green;">eg：</span>
			控制台输入clearTimeout(定时器编号);
		</p>