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代码