第一章 请做好准备
1-1 为什么学习JavaScript
一、你知道，为什么JavaScript非常值得我们学习吗？
1. 所有主流浏览器都支持JavaScript。
2. 目前，全世界大部分网页都使用JavaScript。
3. 它可以让网页呈现各种动态效果。
4. 做为一个Web开发师，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。
二、易学性
1.学习环境无外不在，只要有文本编辑器，就能编写JavaScript程序。
2.我们可以用简单命令，完成一些基本操作。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>热身</title> </head> <body> <p id="p1">我是第一段文字</p> <p id="p2">我是第二段文字</p> <script type="text/javascript"> //表示在<script></script>之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言。 document.write("hello");//写下hello document.getElementById("p1").style.color="blue";//设置“p1”为蓝色字体 </script> </body> </html>
我们可以将JavaScript代码放在html文件中任何位置，但是我们一般放在网页的head或者body部分。
放在<head>部分
最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。
放在<body>部分
JavaScript代码在网页读取到该语句的时候就会执行。
javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；而如果是通过事件调用执行的function那么对位置没什么要求的。
三、从哪开始学习呢？
学习JavaScript的起点就是处理网页，所以我们先学习基础语法和如何使用DOM进行简单操作。
1-2 新朋友你在哪里（如何插入JS）
1-3 我也可以独立（引用JS外部文件）
1-4 找到你的位置（JS在页面中的位置）
1-5 认识语句和符号
1-6 注释很重要
注释：单行注释 “//” 多行注释 /* 注释内容 */
1-7 什么是变量
1-8 判断语句（if...else）
if...else语句是在指定的条件成立时执行代码，在条件不成立时执行else后的代码。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>if...else</title>
<script type="text/javascript">
var score =80; //score变量存储成绩，初值为80
if(score>60)
{
document.write("很棒，成绩及格了。");
}
else
{
document.write("加油，成绩不及格。");
}
</script>
</head>
<body>
</body>
</html>
1-9 什么是函数
5、函数是完成某个特定功能的一组语句。如没有函数，完成任务可能需要五行、十行、甚至更多的代码。这时我们就可以把完成特定功能的代码块放到一个函数里，直接调用这个函数，就省重复输入大量代码的麻烦。
-第2章 请和我互动（常用互动方法）
2-1 输出内容（document.write）
document.write() 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。
第一种:输出内容用“”括起，直接输出""号内的内容。
<script type="text/javascript">
document.write("I love JavaScript！"); //内容用""括起来，""里的内容直接输出。
</script>
第二种:通过变量，输出内容
<script type="text/javascript"> var mystr="hello world!"; document.write(mystr); //直接写变量名，输出变量存储的内容。 </script>
第三种:输出多项内容，内容之间用+号连接。
<scripttype="text/javascript"> var mystr="hello"; document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接 </script>
第四种:输出HTML标签，并起作用，标签使用“”括起来。
<script type="text/javascript">
var mystr="hello";
document.write(mystr+"<br>");//输出hello后，输出一个换行符
document.write("JavaScript");
</script>
2-2 警告（alert 消息对话框）
我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的。
2-3 确认（confirm 消息对话框）
confirm 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)
2-4 提问（prompt 消息对话框）
prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。
var myname=prompt("请输入你的姓名:");
2-5 打开新窗口（window.open）
open() 方法用于打开一个新的窗口。
语法：
window.open(<URL>, <窗口名称>, <参数字符串>)
参数说明:
URL：打开窗口的网址或路径。 窗口名称：被打开窗口的名称。可以是"_top"、"_blank"、"_selft"等。 参数字符串：设置窗口参数，各参数用逗号隔开。
参数表:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>window.open</title> <script type="text/javascript"> function Wopen(){ window.open('http://www.imooc.com','_blank','width=600,height=400,top=100,left=0') } </script> </head> <body> <input name="button" type="button" onClick="Wopen()" value="点击我，打开新窗口!" / > </body> </html>
2-6 关闭窗口（window.close）
close()关闭窗口
用法：
window.close(); //关闭本窗口
或
<窗口对象>.close(); //关闭指定的窗口
2-7 编程练习
1、新窗口打开时弹出确认框，是否打开
提示: 使用 if 判断确认框是否点击了确定，如点击弹出输入对话框，否则没有任何操作。
2、通过输入对话框，确定打开的网址，默认为 http：//www.imooc.com/
3、打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏
<html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=gbk"/> <script type="text/javascript"> function openWindow() { //新窗口打开时弹出确认框，是否打开 var mymessage=confirm("新窗口打开时弹出确认框，是否打kai?");
//通过输入对话框，确定打开的网址，默认为 http：//www.imooc.com/ 打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏
if(mymessage==true ) { window.open('http://www.imooc.com','_blank','width=400,height=500,menubar=no,toolbar=no'); } </script> </head> <body> <input type="button" value="新窗口打开网站" onclick="openWindow()" /> </body> </html>
-第3章 你也有控制权（DOM操作）
3-1 认识DOM
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
先来看看下面代码:
将HTML代码分解为DOM节点层次图:
HTML文档可以说由节点构成的集合，三种常见的DOM节点:
1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。
看下面代码:
<a href="http://www.imooc.com">JavaScript DOM</a>
3-2 通过ID获取元素
学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。
语法:
document.getElementById(“id”)
看看下面代码:
结果:null或[object HTMLParagraphElement]
注:获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。
3-3 innerHTML 属性
innerHTML 属性用于获取或替换 HTML 元素的内容。
语法:
Object.innerHTML
注意:
1.Object是获取的元素对象，如通过document.getElementById("ID")获取的元素。
2.注意书写，innerHTML区分大小写。
我们通过id="con"获取<p> 元素，并将元素的内容输出和改变元素内容，代码如下:
结果:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>innerHTML</title> </head> <body> <h2 id="con">javascript</H2> <p> JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。</p> <script type="text/javascript"> var mychar= document.getElementById("con") ; document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容 mychar.innerHTML="Hello world"; document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容 </script> </body> </html>
3-4 改变 HTML 样式
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？
语法:
Object.style.property=new style;
注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。
基本属性表（property）:
注意:该表只是一小部分CSS样式属性，其它样式也可以通过该方法设置和修改。
看看下面的代码:
改变 <p> 元素的样式，将颜色改为红色，字号改为20,背景颜色改为蓝：
<p id="pcon">Hello World!</p>
<script>
var mychar = document.getElementById("pcon");
mychar.style.color="red";
mychar.style.fontSize="20";
mychar.style.backgroundColor ="blue";
</script>
结果:
3-5 显示和隐藏（display属性）
网页中经常会看到显示和隐藏的效果，可通过display属性来设置。
语法：
Object.style.display = value
注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。
value取值:
看看下面代码:
3-6 控制类名（className 属性）
className 属性设置或返回元素的class 属性。
语法：
object.className = classname
作用:
1.获取元素的class 属性
2. 为网页内的某个元素指定一个css样式来更改该元素的外观
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>className属性</title> <style> body{ font-size:16px;} .one{ border:1px solid #eee; width:230px; height:50px; background:#ccc; color:red; } .two{ border:1px solid #ccc; width:230px; height:50px; background:#9CF; color:blue; } </style> </head> <body> <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p> <input type="button" value="添加样式" onclick="add()"/> <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p> <input type="button" value="更改外观" onclick="modify()"/> <script type="text/javascript"> function add(){ var p1 = document.getElementById("p1"); p1.className="one"; } function modify(){ var p2 = document.getElementById("p2"); p2.className="two"; } </script> </body> </html>
-第4章 编程挑战
4-1 编程挑战
<!DOCTYPE HTML> <html> <head> <meta http-equiv="txttent-Type" txttent="text/html; charset=gb2312" /> <title>style样式</title> <style type="text/css"> *{ font-size:12px;} #txt{ height:400px; width:600px; border:#333 solid 1px; padding:5px; } p{ line-height:18px; text-indent:2em;} </style> </head> <body> <h2 id="con">JavaScript课程</H2> <div id="txt"> <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5> <p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p> <p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p> <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p> </div> <form> <input type="button" value="改变颜色" onClick="dcolor()"> <input type="button" value="改变宽高" onClick="dwh()"> <input type="button" value="隐藏内容" onClick="dh()"> <input type="button" value="显示内容" onClick="ds()"> <input type="button" value="恢复" onClick="dclear()"> </form> <script type="text/javascript"> function dcolor(){ var mychar = document.getElementById("txt"); mychar.style.color="red"; mychar.style.backgroundColor="#ccc"; } function dwh(){ var mychar = document.getElementById("txt"); mychar.style.width="400px"; mychar.style.height="200px"; } function dh(){ var mychar = document.getElementById("txt"); mychar.style.display="none"; } function dclear(){ if(confirm("确定要取消设置吗?")){ var mychar = document.getElementById("txt"); mychar.style.color="#000"; mychar.style.backgroundColor="#fff"; mychar.style.width="600px"; mychar.style.height="400px"; mychar.style.display="block"; } } function ds(){ var mychar = document.getElementById("txt"); mychar.style.display="block"; } </script> </body> </html>