学习JavaScript哪几个方面

   -- 核心部分:基础部分(变量定义、运算符、流程控制 for in)、
       函数的定义、函数的调用、函数的作用、类、对象、继承、JSON、内置函数.
   -- DOM编程
   -- BOM编程
   -- AJAX编程

一、js语句可以写在哪些地方:
    1. 写在<script type="text/javascript">js语句</script>之间
       <script></script>可以写在html页面的任何地方。
    2. 写在外部的js文件中。用得时候要在当前页面引入。
       <script type="text/javascript" src="a.js"></script>
    3. 写在html元素事件属性中。
       <input type="button" οnclick="1-N条语句"/>
       onxxxx事件属性
    4. 写在a标签的href属性中。
       <a href="javascript:1-N条语句">fkjava</a>

二、js中的变量分两种:
    -- 全局变量: 属于window的属性就是全局变量。
    -- 局部变量: 函数中定义的变量。

三、js中函数分两种:
    -- 自定义函数
    -- 内置函数(Date、Array、Number、RegExp、String、Boolean、Function、Object、Math、Error)

四、js中的数据类型:
    -- Number : 数字 (var i = 10;) js中所有的数字都是Number类型.
    -- String : 字符串
    -- Array : 数组
    -- Boolean : 布尔
    -- RegExp: 正则表达式
    -- Function : 函数
    -- Object : 对象
    
五、函数定义的三种方式:
    1. 第一种定义函数的方式 : Function
function test1(a, b){ 
alert("第一种" + a + "==" + b);
}
       语法:
function 函数名(形参列表){
  // 函数的执行体(写js语句)
}
    2. 第二种定义函数的方式 : Function (常用)
var test2 = function(a, b){ 
alert("第二种" + a + "==" + b);
}
       语法:
        var 函数名 = function(形参列表){
  // 函数的执行体(写js语句)
}
// 匿名函数(第一种)
(function(a, b, c){
alert(a * b * c);
}(10,20,30));
语法:
(function(形参列表){
// 函数的执行体(写js语句)
 }(实参列表));


        // 匿名函数(第一种)
(function(a, b, c){
alert(a * b * c);
})(10,20,40);
          语法:
(function(形参列表){
// 函数的执行体(写js语句)
 })(实参列表);

    3. 第三种定义函数的方式 : Function (不常用)
var test3 = new Function("a","b","c", "alert('第三种' + a + b + c)");
语法:
var 函数名 = new Function(arg1,arg2,arg3,...,argN);
-- arg1-argN-1 : 形参列表
-- argN : 函数的执行体(写js语句)。
    
   注意:
   a. 函数不存在重载,后定的函数会覆盖前定的函数.
         var test1 = function(){}; // Function
   b. 只要定义了一个函数,那它就是Function类型,这样就可以用Function中的属性方法。

   c. 函数想实现重载功能要用Function中arguments属性。

   d. 定义一个函数就是window的方法

五、函数调用的三种方式:
    1. 第一种方式:
       var test1 = function(a, b){
alert(a + b);
       };
       window.test1(20,30); // 默认主调是window
       语法:
       主调.函数名(实参列表);

    2. 第二种方式:
       var test1 = function(a, b){
alert(a + b);
       };
       test1.call(window, 20,30);
       语法:
       函数名.call(主调, 实参列表1,实参列表1,..);

    3. 第三种方式:
       var test1 = function(a, b){
alert(a + b);
       };
       test1.apply(window,[20,30]);
       语法:
       函数名.apply(主调, [实参列表1,实参列表1,..]);

函数的三个作用:
    1. 把函数当作函数用(html页面事件监听时用得最多):
       -- html元素事件绑定的四种方式:
       a. 第一种绑定事件方式:
          <input type="button" onxxx="函数调用字符串"/>
 onxxx : onclick、onmouseover、onmouseout、onfocus、onblur、onchange

       b. 第二种绑定事件方式:
 // 根据html 元素的id属性值获取dom 元素
 var dom元素 = document.getElementById("html元素的id属性值");
 dom元素.onclick = function(){
alert("第二种");
 };
 语法:
 dom元素.onxxxx = 事件处理函数;
 -- onxxx : html元素的事件属性名

       c. 第三种绑定事件方式:
 // 根据html 元素的id属性值获取dom 元素
 var btn3 = document.getElementById("btn3");// Object
 btn3.addEventListener("click", function(){
alert("第三种");
 });
 语法:
 dom元素.addEventListener("click", 事件处理函数);
 -- 第一参数 : html元素的事件属性名把前面的on去掉。

        d. 第四种绑定事件方式:(msie专用)
 // 根据html 元素的id属性值获取dom 元素
 var btn4 = document.getElementById("btn4");// Object
 btn4.attachEvent("onclick", function(){
alert("第四种");
 });
 语法:
 dom元素.attachEvent("onclick", 事件处理函数);
 -- 第一参数 : html元素的事件属性名.

    2. 把函数当作类来用:
       -- 当你把函数当作类来用时,它就提供了一个万能的构造器。
       -- new Function() --> function
       -- new new Function() --> object
       -- 创建对象:var obj =  new function(); // object

       var Person = function(){
       };
       a. 静态的属性
 Person.age = 20;
          函数的引用.属性名 = 属性值;
          函数的引用["属性名"] = 属性值;
 调用:
            函数的引用.属性名|函数的引用["属性名"]

       b. 静态的方法
          Person.say = function(){};
          函数的引用.方法名 = 函数的引用;
          函数的引用["方法名"] = 函数的引用;
 调用:
            函数的引用.方法名(实参列表);
   函数的引用["方法名"](实参列表);

       创建对象才能用的属性与方法:
       var Person = function(){}

       /** ###############  对象创建之后添加属性与方法 ################## */
       var p = new Person();
       1. 对象的属性
          p.age = 30;
 p["sex"] = "女";
          对象名.属性名 = 属性值
 对象名["属性名"] = 属性值

       2. 对象的方法
          p.say = function(){};
 p["info"] = function(){};
 对象名.方法名 = 函数的引用
 对象名["方法名"] = 函数的引用

      /** ###############  对象创建之前添加属性与方法 ################## */
       var Person = function(age){
  this.age = age;
       }
       1. 对象的属性
          Person.prototype.age = 30;
 Person.prototype["sex"] = "女";
 函数的引用.prototype.属性名 = 属性值
 函数的引用.prototype["属性名"] = 属性值

 var p = new Person(40);
 p.属性名
          
       2. 对象的方法
          Person.prototype.say = function(){};
 Person.prototype["info"] = function(){};
 函数的引用.prototype.方法名 = 函数的引用
 函数的引用.prototype["方法名"] = 函数的引用

 var p = new Person(40);
 p.方法名(实参);

       /** 继承 */
       1. 对象冒充的方式
       2. 通过原型实现继承
          -- 单一继承:
    var Person = function(){}
    var Student = function(){}
    Student.prototype.say = Person.prototype.say;
    语法:
    子函数的引用.prototype.属性名|方法名 = 父函数的引用.prototype.属性名|方法名
       
          -- 全部继承:
    Student.prototype = Person.prototype;
    语法:
    子函数的引用.prototype = 父函数的引用.prototype

    3. 把函数当作类中的方法用。

七、js中的对象:
    a. js中的对象分两种:
       -- 内置对象(BOM)
       -- 自已创建对象.
    b. 创建对象的三种方式:
       -- var obj = new new Function();
       -- var obj = new Object(); // 空对象
       -- var obj = {}; // 空对象

    JSON: JavaScript Object Notation (javascript对象标记) .
    -- json已经成为了跨平台,跨语言进行数据交互的通用格式。(比较流行)
    
    json取代xml进行数据传输.
    -- 生成与解析xml的数据格式都比较繁琐。
    -- 用xml传输数据冗余的数据太多。
   
    json格式:(java中map集合)
    {key : value, key : value} --> Object类型
    key: 对象的属性名|方法名 (只能用字符串)
    value : 对象的属性值|函数的引用 (js能支持的所有数据类型)

    调用json对象(js对象)
    a. 调用一
       alert(obj.name);
    b. 调用二
        alert(obj["age"]);
    c. 调用三
       for (var key in obj){
 key : 属性名|方法名
       }
    json在什么情况下用得最多:
    1. 异步请求时,用json格式返回数据.
    2. 跨平台时,进行数据交互时. (webservice)

    xml:
    <types>
   <type>
<code>0001</code>
<name>fdsfa</name>
<remark>fdfd</remark>
   </type>
    <type>
<code>0001</code>
<name>fdsfa</name>
<remark>fdfd</remark>
   </type>
    </types>
    json:
    [{"code" : "0001", "name" : "fdfdfd", "remark" : "fdsf"},
    {"code" : "0001", "name" : "fdfdfd", "remark" : "fdsf"}]
   
    List集合        []
    List<Article>   [{},{}]
    Map集合         {}

八、实战示例
    -- 系统运行时间
    -- 两个时间比较计算出相差的秒数

内置函数:
1. Function中的属性方法:
   -- arguments : 获取实参数组。
   -- toString() : 把函数定义当作字符串输出
   -- length : 获取形参的长度。
   -- call(主调, arg1,arg2,...) : 函数调用
   -- apply(主调, [arg1,arg2,...]) : 函数调用
   -- prototype : 专门为函数的对象添加属性与方法。

2. Date : 日期
内置对象(BOM):
1. window : 代表html页面对应的窗口
   -- onload : 窗口加载完的事件
   -- setTimeout("调用函数的字符串", "毫秒数") : 定时器(延迟多少毫秒调一次) 只执行一次
   -- setInterval("调用函数的字符", "毫秒数") : 定时器(每隔多少毫秒调一次) 不断执行

2. document : 代表html页面当前的文档 <html></html>

注意: 
  1. 函数与对象之间关系
     -- 函数的创建: new Function(); --> function
     -- 对象的创建: new new Function(); --> object
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值