JavaScript诞生于1995年，JavaScript它不再像html是一种标记语言，而是一种轻量级的编程语言，它可以插入html页面中，这门语言可由浏览器执行。
Ⅰ 向HTML中嵌入JavaScript的方法
(1)用<script>元素直接在HTML页面中嵌入JavaScript代码例：
<script>
alert("HelloWorld!");/*alert表示一个弹框*/
</script>效果展示：
(2)用<script>元素链接外部的javascript文件例
index.html
<body>
<script type="text/javascript" src="index.js"></script>
</body>index.js
alert("HelloWorld!");效果展示：
注意：在链接外部的javascript的时候，我们如果把引用的代码放在head标签中，这样会把外部链接的文件房间一起（包括CSS文件），但是这样一来，当打开一个页面的时候，页面先要加载完所有的外部文件才显示页面，速度相对来说较慢。一般情况下，为了页面加载的速度快一些，我们将链接外部JavaScript的链接代码放在body中，这样就可以页面显示以后，再加载js文件。
Ⅱ 语法
A:变量名、函数名、操作符等等区分大小写，比如Test和test，它们是不同的两个的。
B:标识符（变量名、函数名、属性名等等）一般采用驼峰式，也就是第一个字母小写，剩下的每个单词的首字母大写。
C:注释分为：//（单行注释）和/**/（多行注释）。
D：语句每一句的结束用分号结束，虽然不屑分号也可以，但是建议都写分号。
Ⅲ 数据类型
typeof操作符：用来检测变量的类型的，它的返回值有undefined、boolean、string、number、object、function。
Ⅳ 变量
定义一个变量用var
var a;/*表示申请了一个不知道类型的变量*/
var b=2;/*表示申请了一个number类型的变量*/
var c="123adb";/*表示申请了一个string类型的变量*/
var d=[1,2,3,4,5];/*表示申请了一个数组变量*/
var e={AA:1,BB:2,CC:3}/*表示申请了一个object类型变量*/
var m=null;/*表示申请了一个object类型的变量*/
var f=true;/*表示申请了一个boolean类型的变量*/Ⅴ 数据类型之间的转换
转换成字符串：除了null和undefined没有toString()方法以外，其他类型的的变量都可以用此方法转换成string类型。一般该方法没有参数，默认为十进制如果添加了参数就表示按几进制转换。
var a=11;
var b=a.toString();/*十进制*/
var b=a.toString(2);/*二进制*/
var b=a.toString(8);/*八进制*/
var b=a.toString(16);/*十六进制*/数值转换：有三个函数可以把非数字类型转换成数字类型Number()、parseInt()、parsrFloat().
转换规则：
Boolean值，true和false分别被转换成0和1；
如果是数字值，只是简单的传入和返回；
如果是null值，则返回0；
如果是undefined，返回NaN;
如果是字符串:
如果字符串中只包含数字（包括数字前面的正负号），则将其转换成十进制的数，即“1”会被转换成1、“123”会被转换成123、“011”会被转换成11（前导零会被忽略）。
如果字符串包含有效的浮点格式，如"1.1",则将其转换为对应的浮点数值（同样前导零也会被忽略）。
如果字符串包含有效的十六进制格式，例如“0xf”,则将其转换成相同大小的十进制数。
如果字符串是空的，则将其转换成数值0。
如果是字符串中除了上述格式之外的字符，则将其转换成NaN。
如果是对象，则调用对象的valueOf()方法，然后依照前面的转换方式返回相应的值，如果转换的结果是NaN，则调用toString()的方法然后再依次按照上述规则转换返回的字符串值。Ⅵ 运算符
算术运算符：
+ 加
- 减
* 乘
/ 除
% 取余
++ 自加
-- 自减法赋值运算符：
运算符 解释
= 赋值
+= x+=y等同于x=x+y;
-= x-=y等同于x=x-y;
*= x*=y等同于x=x*y;
/= x/=y等同于x=x/y;
%= x%=y等同于x=x%y;
连接运算符：
+ 连接两个字符串比较运算符：
== 判断是否相等
=== 绝对相等（值和类型都相等）
!= 判断是否不等
> 判断符号左边是否大于右边
< 判断符号右边是否小于右边
>= 大于或等于
<= 小于或等于逻辑运算符：
&& 符号两边条件同时成立才为真
|| 符号两边有一个为真即为真
！ 非条件运算符：
a?b:c 若a为真则结果为b,若a为假则结果为cⅦ 语句
if 语句
if(条件)
{
条件为真时执行；
}if else语句：‘
if(条件)
{
条件为真时执行；
}
else
{
条件为假时执行；
}if else if else语句：
if(条件1){
条件1为真时执行；
}
else (条件2){
条件2为真时执行；
}
else (条件3){
条件3为真时执行；
}else{
条件1条件2条件3都为假时执行；
}switch 语句
switch(n){
case 1:
执行代码块1；
break;
case 2:
执行代码块2；
break;
default:
n与case1和case2执行代码不同时执行此语句；
}for 语句
for(语句1;语句2; 语句3){
被执行的代码；
}while 语句
while(条件){
被执行的语句；
}do-while 语句
do{
被执行的语句；
}while(条件);
/*此语句先执行一次语句，再进行条件的判断*/break 语句
for(i=0; i<5; i++){
if(i==3){
break;
}
x+=3;
}
/*表示的是跳出当前循环，所以当i==3时跳出循环，不再执行i=4*/continue 语句
for(i=0; i<5; i++){
if(i==3){
continue;
}
x+=3;
}
/*表示跳出此次循环，执行下一次循环，当i==3时跳出去，接着执行i=4*/Ⅷ 事件
onmouseover /*当鼠标放上去的时候触发该事件*/
onmouseout /*当鼠标离开的时候触发该事件*/
onmousedown /*当鼠标按下的时候触发该事件*/
onmousemove /*当鼠标移动的时候触发该事件*/
onkeyup /*当键盘松开的的时候触发该事件*/
onkeydown /*当键盘按下的时候触发该事件*/
onclick /*当鼠标点击的时候触发该事件*/
onfocus /*获取焦点的时候触发该事件*/
onblur /*失去焦点的时候触发该事件*/注意：onclick和onmousedown的区别：onmousedown是鼠标按键按下去的瞬间触发。onclick是鼠标点击弹起之后触发的事件。
Ⅸ 对象
对象只是带有属性和方法的特殊数据类型。
访问对象的属性：objectNmae.propertyName
var msg="Hello World!";
var a=msg.length;
/*这两行代码的意思就是定义了一个字符串变量msg,msg用它的属性length来获取字符串的长度（该属性在获取字符串的长度时候，不会忽略空格），并将其复制给a*/访问对象的方法：objectName.methodName()
var msg="Hello";
var x=msg.toUpperCase();
/*这两行代码的意思就是定义了一个字符串变量msg，现在调用String对象的toUpperCase()方法来将其转换成大写，并赋值给x*/创建对象的方法
1.定义并创建对象的实例
a=new Object();
a.name="Bob";
a.age=19;
a.sex="girl";
等同于：
a={name:"Bob",age:19,sex:"girl"};
2.使用函数来定义对象，然后创建新的对象实例(使用函数构造器)。
function a(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
}创建JavaScript对象的实例
有了对象构造器，就可以创建新的对象实例
var f=new a("zhangsan",90,"boy");
var m=new a("lisi",87,"girl");把属性添加到JavaScript
为对象a添加属性shool
a.shool="******大学";
w=a.shool;
输出w的结果就是：*****大学把方法添加到JavaScript当中
function a(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
this.changeAge=changeAge;
function changeAge(Age){
this.age=Age;
}
}
/*这段代码的意思就是在对象中添加对象的方法，changeAge()函数Age的值赋给对象a的属性age*/常用对象的方法：
Math对象：
Math.round(); /*四舍五入返回整数*/
Math.PI; /*Π*/
Math.random(); /*产生随机数，产生的随机数只能在0~1之间*/
Math.ceil(); /*向上舍入*/
Math.floor(); /*向下舍入*/
Number对象：
Number.toString(); /*转换成字符串类型*/
Number.Infinity; /*这不是一个属性，而是一个方法，表示的是无穷大*/
Number.toFixed(n); /*保留小数位数，n是大于0的整数，表示小数位数的个数*/Ⅹ 获取元素的方法
首先来展示一个例子：
<body>
<p class="p"><a href=""></a><span>Hello World</span></p>
<input type="text" value="love" class="name"><br>
<script>
var a=document.getElementsByClassName("p")[0].innerText;
var b=document.getElementsByClassName("p")[0].innerHTML;
var c=document.getElementsByClassName("name")[0].value;
document.write("a的值为："+a+"<br>");
document.write("b的值为："+b+"<br>");
document.write("c的值为："+c);
alert("a的值为："+a+" "+"b的值为："+b+" "+"c的值为："+c);
</script>
</body>结果展示：
结果可以看出document和alert输出结果并不相同，那么innerText和innerHTML在document和alert中由什么不同呢？
首先在document中：为什么innerText和innerHTML输出结果一样呢？document.write()是以文档流的形式输出，innerHTML读出来的标签被解析掉了以后就剩下文本内容，这样使得二者的输出结果相同。
接下俩在alert中：由于alert不能解析标签，所以innerHTML读取出来的标签就会被输出，innerText只输出文本内容。
由此说明一点innerText和innerHTML的区别在于：innerText只读取文本内容，而innerHTML读取的是该标签下的所有内容（包括文本内容和标签）。
获取到一个标签的方法有那些呢？
document.getElementsByClassName("className")[索引值].innerText/innerText/value; /*通过类名读取*/
document.getElementsByTagName("TagName")[索引值].innerText/innerText/value; /*通过标签名读取*/
document.getElementById("idName")[索引值].innerText/innerText/value; /*通过id名读取，由于一个页面中只会出现一个id，所以是Element*/
Ⅹ+Ⅰ 函数的定义
格式一:
<body>
<p <!--要触发的事件例如：-->onclick="show()"></p>
<script>
function show(){
函数内容；
}
</script>
</body>
格式二:
<body>
<p></p>
<script>
var a=document.getElementsByTagName("p")[0];
a.onclick=function(){
this.style.backgroundColor="yellow";
}
</script>
</body>综合小案例：
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<p><span>First</span></p>
<p class="lala" onmouseover="show()"><span>Second</span></p>
<p><span>Third</span></p>
<script>
var a=document.getElementsByTagName("p")[0];
a.onclick=function(){
this.style.backgroundColor="yellow";
}
function show(){
document.getElementsByClassName("lala")[0].innerText="Last";
}
var m=document.getElementsByTagName("p")[2];
m.onmouseout=function(){
this.style.width="200px";
}
var n=document.getElementsByTagName("p");
for(var i=0; i< n.length; i++){
n[i].onmousemove=function(){
this.style.fontSize="25px";
}
}
document.write("<table style='border:2px solid red;width:1200px'>");
for(var i=1;i<=9;i++){
document.write("<tr>")
for(var j=1;j<=i;j++){
document.write("<td style='border:2px solid red;width:100px'>")
document.write(i+"*"+j+"="+i*j+" ");
document.write("</td>")
}
document.write("</tr>")
}
document.write("</table>");
</script>
</body>
</html>index.css
p{
height:100px;
width:100px;
margin:0 10px;
background:red;
float:left;
}效果展示：
事件触发前：
事件触发后：
