前言：随着工作了几个月的时间，我感觉到我们在学校学到的东西真的好少哦，由于现在在公司做一个项目，而这个项目中我的角色是后台代码的编写，但是我也在是不是的调试JavaScript代码，虽然老师当年交了我们，但是现在忘的差不多了。所以我抽时间看视频重新学习了一下JS,这里是我的学习笔记，希望对我们想要学习JS初级的同学有用，所以我就产生了这个系列。
- Dom入门
(1) Dom就是HTML页面的模型，将每个标签都作为一个对象，JavaScript通过调用Dom中的属性，方法就可以对网页中的文本框，层等元素进行编程控制，比如：通过操作文本框的Dom对象，就可以读取文本框的值，设置文本框中的值。
JavaScript——>Dom就像C#——>.NET FrameWork
(2) Dom也像Winform一样，通过事件，属性，方法进行编程。
(3) CSS+JavaScript+Dom=DHTML。
- 事件
(1) 事件：<body onmousedown=”alert(‘欢迎您’);alert(‘来访问’);”>当点击鼠标的时候执行onmousedown中的代码，有时候事件响应的代码太多，就放到单独的函数中。
<script type="text/javascript">
function bodymousedown() {
alert('欢迎您');
alert('韩迎龙');
}
</script>
<body onmousedown="bodymousedown()">
bodymousedown()后面的括号不能丢，因为表示调用bodymousedown函数，而不是onmousedown事件的响应函数是bodymousedown。
- 动态设置事件
(1) 可以在代码中动态设置事件响应函数,就像.NET中的btnClick+=一样。
<script type="text/javascript">
function trends1() {
alert("动态创建事件1");
}
function trends2() {
alert("动态创建事件2");
}
</script>
<input type="button" value="事件1" onclick="document.ondblclick=trends1" />
<input type="button" value="事件2" onclick="document.ondblclick=trends2" />
注意：trends1,trends2不要加括号
- window对象1
(1) window对象代表当前浏览器窗口，我们在使用window对象的属性，方法的时候可以省略window,比如：window.alert(‘a‘)可以省略成alert(‘a’)。
(2) alert方法，弹出消息对话框。
(3) confirm方法，显示”确定”，”取消”对话框，如果按了[确定]按钮，就返回True,否则就返回False。
function ConfirmDemo() {
if (confirm("是否进入")) {
alert("进入");
}
else {
alert("没进入");
}
}
<input type="button" value="确定" onclick="ConfirmDemo()" />
(4) 重新导航到指定的地址：navigate(“http://www.baidu.com”);
<input type="button" value="navigate" onclick="navigate('http://www.baidu.com')" />
(5) setInterval每隔一段时间执行制定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识。
function setInterVal() {
setInterval("alert('Hello')", 1000); //注意被执行的代码必须是字符串形式，也
} 可以写一个匿名函数
<input type="button" value="SetInterVal" onclick="setInterVal()" />
(6) clearInterval取消setInterval的定时执行，相当于timer中的Enable=false，因为setInterval可以设定多个定时，所以clearInterval要指定清除那个定时器的标识，即SetInterval的返回值。
var intervalId = setInterVal("alert('Hello')", 5000);
clearInterval(intervalId);
var intervalId;
function startInterVal() {
intervalId = setInterVal("alert('Hello')", 10000);
}
<input type="button" value="SetInterVal" onclick="startInterVal()" />
<input type="button" value="停止InterVal" onclick="clearInterval(intervalId)" />
(7) SetTimeout也是定时执行，但是不像setInterval那样是重复的定时执行，只执行一次，clearTimeout也是清楚定时，很好区分。Interval;间隔，Timeout超时。
var TimeoutId = setTimeout("alert('Hi')", 1000);‘
(8) 举例说明
案例1：实现标题栏走马灯效果，也就是浏览器标题栏文字每隔5000MS向右滚动一下。提示：标题为document.title属性。
<title>本网站非常欢迎您</title>
<script type="text/javascript">
function scroll() {
var title = document.title; //获取标题栏的值
var firstCh = title.charAt(0); //获取标题栏的第一个字符
var lastStr = title.substring(1, title.length); //获取标题栏剩余的字符
document.title = lastStr + firstCh;
}
setInterval("scroll()", 500);
</script>
- Dom事件1——body.document对象的事件
(1) onload:网页加载完毕时候触发，浏览器是一边下载文档，一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到onload事件中，或者可以把JavaScript放到元素之后。
(2) onunload：网页关闭（或者离开）后触发。
注释：元素的onload事件是元素自己加载完毕时触发，body的onload才是全部加载完成。
例1： 获取onload改变某个HTML控件的值
<!--<script type="text/javascript">
btn.value = "OK"; //报错，因为btn元素还没有构建
</script>-->
<body onload="btn.value='OK'">
<input type="button" id="btn" value="Yes" />
例2：试验onunload的试验
<body onunload="alert('欢迎你下次访问')">
(3) onbeforeunload：在网页中准备关闭（或者离开）后触发，所以在事件中为：”window.event.returnValue”赋值（要显示的警告信息），这样窗口离开(比如前进，后退，关闭，刷新)就会弹出确认信息。
<body onbeforeunload="window.event.returnValue='真的要放弃发帖吗？'">
举例：当我们关闭浏览器的时候会提示信息，问我们是否离开本页面
<body onbeforeunload="window.event.returnValue='文章会被丢失'">
<input type="text" /><br />
<textarea cols="20" rows="20"></textarea>
</body>
(4) 除了有特有的属性之外，当然还有通用的HTML元素的事件，onclick(单击)，ondbclick(双击)，onkeydown（按键按下），onkeyPress（点击按键），onkeyUp（按键释放），onmousedown（鼠标按下），ommousemove（鼠标移动），onmouseout（鼠标离开元素范围），onmouseover（鼠标移动到元素范围），onmouseUp（鼠标按键释放）。