一、简介：
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如相应用户的各种操作。
JavaScript是一种宽松类型的语言，宽松类型意味着不必显示定义变量的数据类型。
二、放置位置：
1、位于head部分的脚本：
<!doctype> <html> <head> <meta charset='utf-8'> <script type='text/javascript'> ... </script> </head> <body> </body> </html>
2、位于body部分的脚本：
<!doctype> <html> <head> <meta charset='utf-8'> </head> <body> <script type='text/javascript'> ... </script> </body> </html>
3、使用外部JavaScript：
<!doctype> <html> <head> <meta charset='utf-8'> <script type='text/javascript' src='xxx.js'></script> </head> <body> </body> </html>
三、基本语法：
1、变量：
变量就是内存中的一块存储空间，这个空间中存放的数据就是变量的值。为这块区域贴个标识符，就是变量名。
变量值在程序运行期间是可以改变的，主要是作为数据的存取容器。在使用变量时候，最好对其进行声明。变量的声明主要是明确变量的名字、类型以及作用域。
变量命名注意以下几点：
（1）只能由字母、数字和下划线‘_’组成，以字母开头，除此之外不能有空格和其他符号；
（2）不能使用JavaScript中的关键字，比如int,true等；
（3）最好把变量的意义与其代表的意思对应起来，以免出现错误。
在JavaScript中声明变量用的是var关键字。
定义了变量就要赋值，也就是向里面存储一个值，利用赋值符‘=’来完成。
var city1 = 100; //100为数值型，该变量就是数值变量 var city2 = 北京; //‘北京’为字符串，该变量就是字符串变量 var city3 = true; //true为布尔常量，该变量就是布尔型变量 var city4 = null; //null为空值，该变量就是空值
2、数据类型：
2.1、数字数据类型：
（1）整数值：
整数值包含0、正整数和负整数，可以使用十进制、八进制和十六进制表示。以0开头的数字且每个位数的值为0~7的整数是八进制；以0x开头，位数值为0~9和A~F的数字是十六进制。
（2）浮点数值：
浮点数就是整数加上小数，其范围最大为±1.797693138623157E08，最小为±5E-324，使用e或E符号代表以10为底的指数。
2.2、字符串数据类型：
字符串可以包含0或多个Unicode字符，其中包含文字、数字和标点符号。字符串数据类型是用来保存文字内容的变量，JavaScript程序代码的字符串需要使用''或'符号括起来。
JavaScript没有表示单一字符的函数。
2.3、布尔数据类型：
布尔数据类型只有两个值，即true和false，主要用于条件和循环控制的判断，以便决定是否继续运行对应段的程序代码，或判断循环是否结束。
2.4、Null数据类型：
Null数据类型只有一个null值，null是一个关键字并不是0，如果变量值为null，表示变量没有值或不是一个对象。
2.5、Undefined数据类型：
Undefined数据类型指的是一个变量有声明，但是不曾指定变量值，或者一个对象属性根本不存在。
3、表达式和运算符：
3.1、表达式：
是常量、变量、布尔和运算符的集合，分为算术表达式、字符表达式、赋值表达式和布尔表达式等。
3.2、运算符：
是完成操作的一系列符号。包括算术运算符、比较运算符和逻辑布尔运算符。
（1）算术运算符可以进行加、减、乘、除和其他数学运算：
| 算术运算符 | 描述 |
| + | 加 |
| - | 减 |
| * | 乘 |
| / | 除 |
| % | 取模 |
| ++ | 递加1 |
| -- | 递减1 |
（2）逻辑运算符用于比较两个布尔值（真或假），然后返回一个布尔值：
| 逻辑运算符 | 描述 |
| && | 逻辑与，在形式A && B中，只有当两个条件都成立，整个表达式才为真true |
| || | 逻辑或，在形式A || B中，只要两个条件A或B有一个成立，整个表达式就为真true |
| ! | 逻辑非，在！A中，当A成立时，表达式的值为false；当A不成立是，表达式的值为true |
（3）比较运算符可以比较表达式的值，并返回一个布尔值：
| 比较运算符 | 描述 |
| < | 小于 |
| > | 大于 |
| <= | 小于等于 |
| >= | 大于等于 |
| = | 等于 |
| != | 不等于 |
3.3、函数：
函数是一个拥有名字的一系列JavaScript语句的有效组合。只要这个函数被调用，就意味着这一系列JavaScript语句被按顺序解释执行。一个函数可以有自己的参数，并可以在函数内使用参数。
语法：
function 函数名(参数表){ 函数执行部分 }
说明：在这一系列语法中，函数名用于定义函数名称，参数是传递给函数使用或操作的值，可以是常量、变量或其他表达式。
3.4、注释：
可以添加注释来对JavaScript进行解释，以提高其可读性。
单行注释：//
<script type="text/javascript">
// 这行代码输出标题h1
document.write("<h1>这是标题</h1>");
// 这行代码输出段落
document.write("<p>这是段落</p>");
document.write("<p>这是另一段落</p>");
</script>
多行注释： /* */
<script type="text/javascript">
/*
下面输出一个标题和两个段落
*/
document.write("<h1>这是标题</h1>");
document.write("<p>这是段落</p>");
document.write("<p>这是另一段落</p>");
</script>
4、JavaScript程序语句：
主要有两种基本语句，一种是循环语句，如for、while；一种是条件语句，如if等。
4.1、if...else语句：
if...else语句是JavaScript中最基本的控制语句，通过它可以改变语句的执行顺序。
语法：
if(条件){ 执行语句1 } else { 执行语句2 }
说明：当表达式的值为true时，则执行语句1，否则执行语句2。若if后的语句有多行，括在大括号（{}）内通常是一个好习惯。
实例：
<!doctype> <html> <head> <title>if语句</title> </head> <body> <script type="text/javascript"> for(a = 10; a < = 15; a ++){ if(a % 2 == 0){ document.write("<div style="background: red;"> ' + a + '</div>"); } else { document.write("<div style="background: green;"> ' + a + '</div>"); } } </script> </body> </html>
4.2、for语句：
for语句的作用是重复执行语句，直到循环条件为false为止。
语法：
for(初始化; 条件; 增量) { 语句集； }
说明：初始化参数是告诉循环的开始位置，必须赋予变量初值；条件是用于判别循环停止时的条件，若条件满足，则执行循环体，否则跳出循环；增量主要是定义循环控制变量在每次循环时按什么方式变化。在三个主要语句之间，必须用（;）分隔。
实例：
<!doctype> <html> <head> <title>for语句</title> </head> <body> <script type="text/javascript"> for(a = 1; a < = 7; a ++){ document.write("<font size="+a+">小蝌蚪找妈妈</font size="+a+">"); } </script> </body> </html>
4.3、switch语句：
switch语句是多分支选择语句，执行哪一语句块，取决于表达式的值与常量表达式相匹配的那一路，不同于if...else语句，它的所有分支都是并列的，执行程序时，由第一分支开始查找，如果匹配，则执行第一分支的内容块，接着执行第二分支、第三分支...的块，如果不匹配，继续查找下一个分支是否匹配。
语法：
switch(){ case 条件1: 语句块1 case 条件2: 语句块2 ... default: 语句块N }
说明：当判断条件较多时，为了使程序更加清晰，可以使用switch语句。如果没有相匹配的case语句，则执行default语句。
4.4、while循环：
while循环和for循环一样，当条件为真时，重复循环，否则退出循环。
语法：
while(条件){ 语句集.; ... }
说明：在while语句中，条件只有一个，当不符合条件时跳出循环。
实例：
<!doctype> <html> <head> <title>while语句</title> </head> <body> <script type="text/javascript"> var a = 1; while(a < = 7){ document.write("<font size="+a+">小蝌蚪找妈妈</font size="+a+">"); } </script> </body> </html>
4.5、break语句：
break语句用于终止包含它的for、switch或while语句的执行，以控制传递给该终止语句的后续语句。
语法：
break;
说明：当程序遇到break语句时，会跳出循环并执行下一条语句。
4.6、continue语句：
continue语句只能在循环结构中。一旦条件为真，执行continue语句，程序跳过循环体中位于该语句后的所有语句，提前结束本次循环周期并开始下一个循环周期。
语法：
continue;
说明：continue语句会停止当前循环的迭代，并从循环的开始处继续程序流程。
5、JavaScript的事件：
通常鼠标或者键盘的动作称之为事件，而由鼠标或键盘引发的一连串程序的动作，称之为事件驱动。而对事件进行处理程序或函数，称之为事件处理程序。
5.1、onClick事件：
鼠标单击事件是最常用的事件之一，当用户单击鼠标时，产生onClick事件，同时onClick指定的事件处理程序或代码将被调用执行。
实例：
<!doctype> <html> <head> <title>onClick事件</title> </head> <body> <div align="center"> <img src="test.png" width="778" height="407" /> <input type="button" name="fullscreen" value="全屏" onClick="window.open(document.location, 'big', 'fullscreen=yes')" /> <input type="button" name="close" value="还原" onClick="window.close()" /> </div> </body> </html>
5.2、onChange事件：
onChange事件是一种与表单相关的事件，当利用text或textarea元素输入的字符值改变时发生该事件，同时在select表各项中的一个选项状态改变后也会引发该事件。
实例：
<!doctype> <html> <head> <title>onChange事件</title> </head> <body> 招商加盟： <form id="form1" name="form1" method="post" action=""> <p>您的姓名： <input type="text" name="textfield" /> </p> 留言内容： <br /> <textarea name="textarea" cols="50" roes="5" onchange="alert("输入留言内容")"></textarea> </form> </body> </html>
5.3、onSelect事件：
onSelect事件是指当文本框中的内容被选中时所发生的事件。
实例：
<!doctype> <html> <head> <title>onSelect事件</title> </head> <body> <div align="center"> <table height=50 cellspacing=0 cellpadding=0 width=778 border=0> <tbody> <tr> <td colspan=2 valign=top> <p>请在下面输入你的名字： <input name=stra id=stra tabindex=1 value="选择输入的名称" size=16 onselect=alert("选择输入的名称") /> </p> </td> </tr> </tbody> </table> </body> </html>
5.4、onFocus事件：
当点击表单对象时，即将光标落在文本框或选择框时产生onFocus事件。
实例：
<!doctype> <html> <head> <title>onChange事件</title> </head> <body> 个人爱好： <form id="form1" name="form1" method="post" action=""> <p> <label> <input type="radio" name="radiogroup1" value="骑单车" onfocus=alert("选择骑单车！") />骑单车 </label> <br /> <label> <input type="radio" name="radiogroup1" value="逛街" onfocus=alert("选择逛街！") />逛街 </label> <br /> <label> <input type="radio" name="radiogroup1" value="跳舞" onfocus=alert("选择跳舞！") />跳舞 </label> <br /> </p> </form> </body> </html>
5.5、onLoad事件：
当加载网页文档时，会产生onLoad事件。onLoad事件的一个作用就是在首次载入一个页面文件时检测cookie的值，并用一个变量为其赋值，使它可以被源代码使用。
实例：
<!doctype> <html> <head> <title>onLoad事件</title> </head> <body onload="mm_popopmsg('欢迎！！')"> <div align="center"> <img src="test.png" width="778" height="407" /> </div> </body> <script type="text/javascript"> <!-- function mm_popopmsg(msg){ alert(msg); } </script> </html>
5.6、onUnload事件：
当网页退出时会引发onUnload事件，并可更新cookie的状态。
实例：
<!doctype> <html> <head> <title>onUnload事件</title> </head> <body onunload="mm_popopmsg('关闭本文档！！')"> <div align="center"> <img src="test.png" width="778" height="407" /> </div> </body> <script type="text/javascript"> <!-- function mm_popopmsg(msg){ alert(msg); } </script> </html>
5.7、onBlur事件：
失去焦点事件正好与获得焦点事件相对，当text对象、textarea对象或select对象不再拥有焦点而退到后台时，引发onBlur事件。
实例：
<!doctype> <html> <head> <title>onBlur事件</title> </head> <body> <p>账号： <input type="text" name="textfield" onblur="mm_popopmsg('文档汇总的“账号”文本域失去焦点！')" /> </p> </body> <script type="text/javascript"> <!-- function mm_popopmsg(msg){ alert(msg); } </script> </html>
5.8、onMouseOver事件：
onMouseOver是当鼠标移动到某对象范围的上方时触发的事件。
实例：
<!doctype> <html> <head> <title>onMouseover事件</title> </head> <body> <div align="center"> <img src="test.png" width="778" height="407" onmouseover="mm_popopmsg('鼠标移动到图片上方了！！')" /> </div> </body> <script type="text/javascript"> <!-- function mm_popopmsg(msg){ alert(msg); } </script> </html>
5.9、onMouseOut事件：
onMouseOut事件是当鼠标离开某对象范围时触发的事件。
<!doctype> <html> <head> <title>onMouseOut事件</title> </head> <body> <div align="center"> <img src="test.png" width="778" height="407" onmouseout="mm_popopmsg('鼠标离开图片了！！')" /> </div> </body> <script type="text/javascript"> <!-- function mm_popopmsg(msg){ alert(msg); } </script> </html>
5.10、onDblClick事件：
onDblClick事件是鼠标双击时触发的事件。
<!doctype> <html> <head> <title>onDblClick事件</title> </head> <body> 1:<input type="text" id="1" value="i love you!" /> <br /> 2:<input type="text" id="2" /> <br /> 双击下面的按钮，把1的内容复制到2中： <button ondblclick="document.getElementById('2').value = document.getElementById('1').value">复制</button> </body> </html>
5.11、其他常用事件：
JavaScript中还提供了一些其他的事件，如：
| 事件 | 描述 |
| onmousedown | 按下鼠标时触发此事件 |
| onmouseup | 鼠标按下松开时触发此事件 |
| onmousemove | 鼠标移动时触发此事件 |
| onkeypress | 当键盘上的某个键被按下且释放时触发此事件 |
| onkeydown | 当键盘上的某个键被按下时触发此事件 |
| onkeyup | 当键盘上某个按键被按放开时触发此事件 |
| onabort | 图片在下载时被用户中断 |
| onbeforeunload | 当前页面的内容将要被改变时触发此事件 |
| onerror | 出现错误时触发此事件 |
| onmove | 浏览器的窗口被移动时触发此事件 |
| onresize | 当浏览器的窗口大小被改变时触发此事件 |
| onscroll | 浏览器的滚动条位置发生变化时触发此事件 |
| onstop | 浏览器的停止按钮被按下时触发此事件或正在下载的文件被中断 |
| onreset | 当表单中reset的属性被激发时触发此事件 |
| onsubmit | 一个表单被递交时触发此事件 |
| onbounce | 在Marquee内的内容移动至Marquee显示范围之外时触发此事件 |
| onfinish | 当Marquee元素完成需要现实的内容后触发此事件 |
| onstart | 当Marquee元素开始显示内容时触发此事件 |
| onbeforecopy | 当页面当前的被选择内容将要复制到浏览器系统的剪贴板前触发此事件 |
| onbeforecut | 当页面中的一部分内容或者全部内容将被移离当前页面的剪贴板并 移动到浏览器的系统剪贴板时触发此事件 |
| onbeforeeditfocus | 当前元素将要进入编辑状态 |
| onbeforepaste | 内容将要从浏览器的系统剪贴板粘贴到页面中时触发此事件 |
| onbeforeupdate | 当浏览者粘贴系统剪贴板中的内容通知目标对象 |
| oncontextmenu | 当浏览者按下鼠标右键出现菜单时或通过键盘的案件触发页面菜单时触发此事件 |
| oncopy | 当页面当前的选择内容被复制后触发此事件 |
| oncut | 当页面当前的选择内容被剪切时触发此事件 |
| ondrag | 当某个对象被拖动时触发此事件 |
| ondragdrop | 一个外部对象被鼠标拖进当前窗口或帧 |
| ondragend | 当鼠标拖动结束时触发，即鼠标的按钮被释放了 |
| ondragenter | 当对象被鼠标拖动的对象进入其容器范围内时触发此事件 |
| ondragleave | 当对象被鼠标拖动的对象离开其容器范围内时触发此事件 |
| ondragover | 当某被拖动的对象在另一对象容器范围内拖动时触发此事件 |
| ondragstart | 当某对象将被拖动时触发此事件 |
| ondrop | 在一个拖动过程中，释放鼠标时触发此事件 |
| onlosecapture | 当元素失去鼠标移动所形成的的选择焦点时触发此事件 |
| onpaste | 当内容被粘贴时触发此事件 |
| onselectstart | 当文本内容选择将开始发生时触发此事件 |
| onafterupdate | 当数据完成由数据源到对象的传送时触发此事件 |
| oncellchange | 当数据来源发生变化时 |
| ondataavailable | 当数据接受完成时 |
| ondatasetchanged | 数据在数据源发生变化时 |
| ondatasetcomplete | 当来自数据源的全部有效数据读取完毕时 |
| onerrorupdate | 当使用onBeforeUpdate事件触发取消了消息传送时，代替onAfterUpdate事件 |
| onrowenter | 当前数据源的数据发生变化且有新的有效数据时 |
| onrowexit | 当前数据源的数据将要发生变化时 |
| onrowsdelete | 当前数据记录将被删除时 |
| onrowsinserted | 当前数据源将要插入新数据记录时 |
| onafterprint | 当文档被打印后 |
| onfilterchange | 当某个对象的滤镜效果发生变化时 |
| onhelp | 当浏览者按下F1键或者浏览器的帮助选择时 |
| onpropertychange | 当对象的属性之一发生变化时 |
| onreadystatechange | 当对象的初始化属性发生变化时 |
| onbeforeprint | 当文档即将打印时 |
6、浏览器的内部对象：
JavaScript提供了非常丰富的内部属性和方法，从而减轻了编程人员的工作，提高了变成效率。在这些对象系统中，文档对象属性非常重要，它位于最底层，但对实现页面信息交互起着关键作用，因为它是对象系统的核心部分。
6.1、navigator对象：
navigator对象用来存取浏览器的相关信息，常用属性如下：
| 属性 | 说明 |
| appName | 浏览器的名称 |
| appVersion | 浏览器的版本 |
| appCodeName | 浏览器的代码名称 |
| browserLanguage | 浏览器所使用的语言 |
| plugins | 可以使用的插件信息 |
| platform | 浏览器系统所使用的的平台，如win32等 |
| cookieEnabled | 浏览器的cookie功能是否打开 |
实例：
<!doctype> <html> <head> <title>浏览器信息</title> </head> <body onload=check()> <script type="text/javascript"> function check(){ name = navigator.appname; document.write("您现在使用的是 ' + name + '浏览器！"); } </script> </body> </html>
6.2、document对象：
JavaScript的输出可通过document对象实现。在document中主要有links、anchor和form 3个最重要的对象。
（1）anchor锚对象：它是指<a name=...></a>标记在HTML源码中存在时产生的对象，它包含着文档中所有的anchor信息。
（2）links链接对象：是借用<a href=...></a>标记链接一个超文本或超媒体的元素作为一个特定的url。
（3）form窗体对象：是文档对象的一个元素，它含有多种格式的对象储存信息，使用它可以在JavaScript脚本中编写程序，并可以用来动态改变文档的行为。
document对象有以下方法：write()和writeIn()（主要用来实现在web页面上显示输出信息）。
实例：
<!doctype> <html> <head> <title>document对象</title> </head> <body> <form> <input type="button" value="所有链接地址" onclick="links()" /> </form> <p><a href="#">文档1</a></p> <p><a href="#">文档2</a></p> <p><a href="#">文档3</a></p> <p><a href="#">文档4</a></p> <script type="text/javascript"> function links(){ n = document.links.length; s = ''; for(j = 0; j < n; j ++){ s = s + document.links[j].href + ' '; } if(s == '') s = '没有任何链接~'; else
alert(s); } </script> </body> </html>
6.3、Windows对象：
windows对象处于对象层次的最顶端，它提供了处理navigator窗口的方法和属性。JavaScript的输入可以通过windows对象来实现，常用的方法如下：
| 方法 | 方法的含义及参数说明 |
| Open(url, windowName, paramenterlist) | 创建一个新窗口，参数分别为地址、窗口名称和打开属性（一般可以包括宽度、高度、定位、工具栏等） |
| Close() | 关闭一个窗口 |
| Alert(text) | 弹出式窗口，text为窗口中显示的文字 |
| Confirm(text) | 弹出确认域，text为窗口中显示的文字 |
| Prompt(text, defaulttext) | 弹出提示框，text为窗口中的文字，defaulttext参数用来设置默认情况下的显示文字 |
| moveBy(水平位移，垂直位移) | 将窗口移至指定的位移 |
| moveTo(x, y) | 将窗口移至指定的坐标 |
| resizeBy(水平位移，垂直位移) | 按给定的位移重新设置窗口大小 |
| resizeTo(x, y) | 将窗口设为指定大小 |
| Back() | 页面的后退 |
| Forward() | 页面前进 |
| Home() | 返回主页 |
| Stop() | 停止装载网页 |
| Print() | 打印网页 |
| status | 状态栏信息 |
| location | 当前窗口url信息 |
实例：
<!doctype> <html> <head> <title>打开浏览器窗口</title> </head> <body onload="mm_openwinow('http://www.baidu.com', '', 'width = 600, height = 500')"> <script type="text/javascript"> function mm_openwinow(url, name, features){ window.open(url, name, features); } </script> </body> </html>
6.4、location对象：
location对象是一个静态的对象，它描述的是某一个窗口对象所打开的地址。常用属性如下：
| 属性 | 实现的功能 |
| protocol | 返回地址的协议，取值为http:、https:、file:等 |
| hostname | 返回地址的主机名。如"http://www.microsoft.com/china"的地址主机名为"www.microsoft.com" |
| port | 返回地址的端口号 |
| host | 返回地址的主机名和端口号 |
| pathname | 返回路径名。如"http://www.microsoft.com/china/index.html"的路径名为"china/index.html" |
| hash | 返回“#”以及以后的内容。若没有#，则返回字符串 |
| search | 返回“？”以及后面的内容。若没有？，则返回字符串 |
| href | 返回整个地址，即返回在浏览器的地址上显示的内容 |
location对象常用的方法如下：
（1）reload()：相当于Internet Explorer浏览器上的刷新功能。
（2）replace()：打开一个url，并取代历史对象中当前位置的地址。用这个方法打开一个url后，单击浏览器的【后退】按钮将不能返回到刚才的页面。
6.5、history对象：
history对象是浏览器的浏览历史，history对象常用的方法如下：
（1）back()：后退，与单击浏览器的【后退】按钮是等效的。
（2）forward()：前进，与单击浏览器的【前进】按钮是等效的。
（3）go()：该方法用来进入指定的页面。
实例：
<!doctype> <html> <head> <title>history对象</title> </head> <body> <p><a href="index1.html"></a></p> <form name="form1" methos="post" action=""> <input name="按钮" type="button" onclick="history.back()" value="返回" /> <input type="button" onclick="history.forward()" value="前进" /> </body> </html>