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

posted @ 2017-11-07 15:20  咕噜噜zmj  阅读(311)  评论(0编辑  收藏  举报