JavaScript入门
一、JavaScript基础
1、概念：
JavaScript简称JS，是运行在浏览器端的一门直译式脚本语言，代码不需要编译，可直接运行，并且读入一行，运行一行，多应用于：浏览器端验证、Ajax、富客户端等
JavaScript是一种动态类型、弱类型、基于原型的语言，它的解释器称为JavaScript引擎，是浏览器的一部分。
2、编写位置：
标签内部：在标签内部写JS事件代码：结构与行为耦合，不推荐使用
网页内部：在<script> </script>标签对内部写JS代码
在<body></body>中
在<head></head>中
外部.JS文件：<script type="text/javascript" src="script.js"></script>
3、JavaScript注释：
单行注释： //
多行注释： /* */
4、鼠标事件：
onclick：鼠标单击事件，当鼠标单击时执行脚本
ondblclick：鼠标双击事件，双击元素执行脚本
onmouseover：鼠标移上事件，当鼠标移上元素时执行脚本
onmouseout：当鼠标移出元素时执行脚本
onmouseup：当鼠标按钮松开时执行脚本
onmousedown：当鼠标按钮被按下时执行脚本
onmousemove：当鼠标指针移动时执行脚本
代码示例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript" src="script.js"></script> //外部JS 7 <script type="text/javascript"> //<head></head>内JS 8 window.onload=function(){ //表示页面加载完成时调用 9 var btn=document.getElementById("btn3"); 10 btn.onclick=function(){ 11 alert("点3"); 12 } 13 } 14 </script> 15 </head> 16 <body> 17 <button id="btn1" onclick="alert('点1')">点1</button> //标签内JS 18 <button id="btn2">点2</button> 19 <button id="btn3">点3</button> 20 <button id="btn4">点4</button> 21 <script type="text/javascript"> //<body></body>内JS 22 var btn=document.getElementById("btn2"); 23 btn.onmouseover=function(){ 24 alert("页面：点2！"); 25 } 26 </script> 27 </body> 28 </html>
script.js中的代码：
1 window.onload=function(){ 2 var btn=document.getElementById("btn4"); 3 btn.onclick=function(){ 4 alert("外部：你干嘛点我！"); 5 }; 6 };
其中，按钮“点3”的JS代码不会被执行，因为window.onload只会被调用一次，先调用了外部JS中的window.onload
5、变量：
声明：JS是一门弱类型语言，声明变量时不需要指定变量的类型，只需要使用var关键字
赋值：JS是一门动态类型的语言，可以给变量赋任意类型的值，在使用过程中可以任意改变变量的类型
6、函数
在JS中函数也是一个对象，可以将函数的引用赋值给一个变量
JS中函数并不会检查参数的类型和个数，因此也不存在重载这回事
函数：包括函数的定义、函数的调用
函数的声明：函数使用function关键字声明
匿名函数：
var a=function(){ //匿名函数
alert("函数a");
}
命名函数：
function sum(a,b){
var sum=a+b;
return sum;
}
函数的调用：函数的引用+();
a();
sum(2,3);
return的作用：1、终止函数的执行；2、将函数的结果返回给调用者
7、对象
JS中创建对象有两种方式：
1、var obj=new Object();
2、var obj={ };
给对象动态的添加属性和方法：
代码示例：
1 var obj={}; 2 obj.name="张三"; 3 obj.age=12; 4 obj.fun=function(){ 5 alert("hello world"); 6 }; 7 alert(obj.name); 8 alert(obj.age); 9 obj.fun();
显示结果：
在对象创建时添加属性和方法：
代码示例：
1 var b=function(){ 2 alert("你好"); 3 }; 4 var obj1={ 5 name:"李四", 6 age:21, 7 fun:b 8 }; 9 alert(obj1.name); 10 alert(obj1.age); 11 obj1.fun();
显示结果：
8、加载方式
浏览器加载网页代码是自上而下的，因此写在<head></head>中的JS可能无法对页面后面才被定义的标签进行操作
浏览器为我们提供了一个window对象，代表浏览器的一个窗口
window.onload=function(){ } ; 函数将在整个页面加载完成后执行function中的JS代码
