代码改变世界

《javascript权威指南》基础笔记 - 重要

2012-06-21 23:05  臭小子1983  阅读(213)  评论(0编辑  收藏  举报

第二章  词法结构

一、大小写敏感

  关键字、变量、函数名所有标识符都是区分大小

 

二、空白符和换行符

  JS会忽略程序中记号之间的空格,制表符和换行符

 

三、可选的分号

  JS中的简单语句后通常都有分号(;)

 

四、注释

  单行注释://     多行注释:/*  */

 

五、直接量

  直接量就是程序中直接显示出来的数据值,例:2.1  "hello"  "hi"

    数组直接量和对象直接量

 

六、变量和常量

  1、变量的声明

  使用var 关键字来声明var i=9;   声明多个变量:var i,sum;   

  如果未声明变量提示:undefined   alert(typeof(a))

 

  2、变量的作用域

   

七、垃圾收集

  JS则不要求手动地释放内存,称为拉圾收集

  var s = "hello";

  var u = s.toUpperCase();

  s = u;

 

八、运算符

  1、算术运算符

  + 加、- 减、* 乘、/ 除、% 模运算、++ 递增、-- 递减

 

  1、相等运算符:

  == 相等运算符    

=== 等同运算符:不做类型转换,类型不同的一定不等


下面分别说明: 

先说 ===,这个比较简单。下面的规则用来判断两个值是否===相等:
1、如果类型不同,就[不相等]
2、如果两个都是数值,并且是同一个值,那么[相等];(!例外)的是,如果其中至少一个是NaN,那么[不相等]。(判断一个值是否是NaN,只能用isNaN()来判断)
3、如果两个都是字符串,每个位置的字符都一样,那么[相等];否则[不相等]。
4、如果两个值都是true,或者都是false,那么[相等]。
5、如果两个值都引用同一个对象或函数,那么[相等];否则[不相等]。
6、如果两个值都是null,或者都是undefined,那么[相等]。


再说 ==,根据以下规则:
1、如果两个值类型相同,进行 === 比较。
2、如果两个值类型不同,他们可能相等。根据下面规则进行类型转换再比较:
a、如果一个是null、一个是undefined,那么[相等]。
b、如果一个是字符串,一个是数值,把字符串转换成数值再进行比较。
c、如果任一值是 true,把它转换成 1 再比较;如果任一值是 false,把它转换成 0 再比较。
d、如果一个是对象,另一个是数值或字符串,把对象转换成基础类型的值再比较。对象转换成基础类型,利用它的toString或者valueOf方法。js核心内置类,会尝试valueOf先于toString;例外的是Date,Date利用的是toString转换。非js核心的对象,令说(比较麻烦,我也不大懂)
e、任何其他组合,都[不相等]。

 

  != 不等于  !== 不等同运算符

 

  2、关系运算符

  1、< 小于运算符  2、> 大于运算符  3、<= 小于等于运算符  4、>= 大于等于运算符  

 

  3、字符串的运算符“ + ”

  var newStr = "str1"+"str2";

 

  4、逻辑运算符

  1、&&:两个运算数都为true,返回true    2、||:两个运算符其中一个为true,返回true    3、!:当运算数为true,返回false

 

  5、赋值运算符

  1、var i = 0;  // 为变量i赋值

 

  6、条件运算符

  唯一的三元运算符  x > 0 ? x*y : -x *y;  // 如果x大于0,执行x*y ,否则-x*y

 

  7、对象运算符
  包括:in、instanceof、new、delete、.和[]运算符

  

  8、类型运算符

  “typeof(str)”:单目运算符,返回str的类型

 

  9、delete和void运算符

  delete:是一个一元运算符,它将删除指定的对象属性、数组元素或变量,如果删除成功返回true;

  var d = {};
  d.fire = "a";
  d.hir = "b";
  console.log(delete d.fire);  // 返回true;

 

  10、void运算符

   void:作用是舍弃运算数的值,返回undefined作为表达式的值.

 

  11、逗号运算符:var i=0, j=1; k=2;

 

  12、数组和对象存取运算符“ . ”

  

  13、in和instanceof、typeof运算符

   in:如果运算符左边的值是右边对象的一个属性名,返回true;

   var point = { x=1, y=2 }

   var has_x = "x" in point;    // 返回true;

  

   instanceof:一般是用来验证一个对象是否属于某类

   var d = new Date();
   var a = d instanceof Date;    // 返回true
   var b = d instanceof String;   // 返回false

 

   typeof:返回一个字符串,返回运算数的类型

   var str = "asdfasdfasd"
   alert(typeof(str));    // 返回 String;

 

 

 

 

第三章  数据类型和值

一、JS允许使用3种基本数据类型:数字、文本和布尔,还支持两种小数据类型Null和undefined

 

二、数字

  1、整型:2、3、1000  2、浮点:3.41、423.43

  3、isNaN():是返回一个 Boolean 值,指明提供的值是否是保留值 NaN (不是数字)

  4、isFinite():用来检测一个数字是否是NaN、正无穷大或负无穷大

 

三、字符串

  1、是由Unicode字符、数字、标点符号组成的序列

  2、字符串是由单引号或双引号括起来的(' '," ")

  3、使用反斜线符号(\)转义

  4、字符串的使用:

    str.length  // 长度

    str.charAt(s.length -1);  // 获取最后一个字符

    str.substring(1,4);  // 抽出第2-4个字符

    str.indexOf("a");   // 查找一个字母a的位置

  5、将数字转换成字符串的两种方法:

     var stringValue = String(num);

     var stringValue = num.toString();

  

  6、toFixed()方法:把一个数字转为字符串,并且显示小数点后指定的位数

    var n = 123456.7890

    n.toFixed(1);    // 返回"123456.7"

 

  7、将字符转成整型:parseInt()    将字符串转成浮点:parseFloat()

 

四、布尔值

  true和false

 

五、函数

  函数的定义:
  1、匿名函数:var square = function(x) { return x * x }

  2、命名函数: function square(x) { return x * x }

  

  形参与实参:

  1、function max(x, y){ return x > y ? x : y; }   x和y为形参

  2、max(1,2);  这个参数为实参

 

  Arguments对象:

  通过arguments属性来获取形参,或者参数的长度

  function(x, y, z){

    alert(arguments.length);  // 返回3

  }

 

六、数组和对象
  创建对象:var  obj = new Object();  或var obj = {};

  对象直接量:var point = { x:2.3, y:-1.2 }

 

七、null和undefined

  null:表示无值,显示对象为“空”或者变量没有引用任何对象

  undefined:在使用一个未声明的变量

 

八、数据类型转换

  1、转换成数字:parseInt(str)  parseFloat(str)

 

  2、自动转换:

    var a = 5, b = 7;
    alert(a + b); // 等于12

    var s = "5";
    alert(a + s); // 等于"55"

 

  3、强制转换:

    var str = "20";

    alert(int(str));   // 等于数字20  包括String(a)、int(a)、Number(a)、bool(a)、  

  

  4、高级类型转换:  

  valueOf():

  toString():  

 

  void:该操作符指定要计算一个表达式但是不返回值

  下面的代码创建了一个超级链接,当用户以后不会发生任何事。当用户链接时,void(0) 计算为 0,但 Javascript 上没有任何效果。

  <A HREF="javascript:void(0)">单此处什么也不会发生</A>

  下面的代码创建了一个超级链接,用户单时会提交表单。

  <A HREF="javascript:void(document.form.submit())">单此处提交表单</A>  a href=#与 a href=javascript:void(0) 的区别 链接的几种办法

  #包含了一个位置信息:默认的锚是#top 也就是网页的上端,而javascript:void(0) 仅仅表示一个死链接,这就是为什么有的时候页面很长浏览链接明明是#是,跳动到了页首,而javascript:void(0) 则不是如此所以调用脚本的时候最好用void(0)或者<input onclick><div onclick>等

链接的几种办法:
1.window.open(''url'')

2.用自定义函数
<script>
function openWin(tag,obj)
{
obj.target="_blank";
obj.href = "Web/Substation/Substation.aspx?stationno="+tag;
obj.click();
}
</script>

<a href="javascript:void(0)" onclick="openWin(3,this)">株洲</a>

 

 

第四章  语句

一、表达式语句

  var s = "hello" + name;  //赋值表达式

 

二、if语句else if语句

 

三、switch语句

  switch(n){

    case 1:

      // 如果n等于1执行

      break;    

    case 2:

      // 如果n等于1执行

      break;    

    default:

      // 如果n等于1执行

      break;    

  }


四、while语句、do while和for语句

 

五、for in语句

  var potin = { x:1, y:2, z:3 };

  for(var i in potin){

    console.log(potin[i]);    // 返回1,2,3

    console.log(i);    // 返回 x,y,z
  }

  i是个变量名,是数组的一个元素或者是对象的一个属性,

 

  数组:  

  var f = ["aa","bb","cc"];

  for(var i in f){

    console.log(f[i]);    // 返回aa,bb,cc

    console.log(i);    // 返回 1,2,3
  }

 

六、break语句、continue语句

  break:用来退出循环或者switch语句

  continue:它不是退出循环而是退出当前一次循环在进入下一次的循环

 

七、var 语句

  允许明确的声明一个或多个变量

 

八、function语句

  函数的声明function 函数句(是否有参考) { 执行的语句; }

 

九、return 语句

  return 就用于指定函数返回值,return只能出现函数体内

 

十、with语句

  语句可以方便地用来引用某个特定对象中已有的属性,但是不能用来给对象添加属性。要给对象创建新的属性,必须明确地引用该对象。 

 

十一、空语句

  执行空语句显然不会产生任何作用,也不会执行任何动作

 

 

 

第五章  对象

一、创建对象

  方法一:var obj = new Object();

  方法二:var obj = {};    // 简写

 

  1、创建对象直接量

    var point = {x:0, y:0 }

    var homer = { "name":"homer simpson", "age":34 }    

 

二、对象属性

  通常使用“ . ”运算符来存取对象属性的值

var book = {};
book.title = "javascript the guide";
book.now = "introduction to js";

book.chapter = new Object();
book.chapter.pages = 11;
book.chapter.my = "ss";

console.log(book.title); // 返回javascript the guide
console.log(book.chapter.pages); // 返回11

 

  1、检查属性的存在性

    in运算符来测试一个属性是否存在,

    if("x" in o){ o.x = 1};    // 如果x为o对象的属性那就返回true;

 

  2、删除属性 delete

    var book = {};
    book.title = "javascript the guide";
    book.now = "introduction to js";

    delete book.title

    var r = "title" in book ? console.log("存在") : console.log("不存在");

    alert(r);

 

三、通用的Object属性和方法

  1、constructor属性:每个对象都有一个constructor属性

 

  2、toString()方法:当将一个对象转换成为一个字符串的时候,使用这个方法

    var s = {x:1 , y:2}.toString();

 

  3、toLocaleString():返回对象的一个本地化字符串的表示

 

  4、valueOf():需要把一个对象转换为某种基本数据类型

  
  5、hasOwnProperty():如果对象用一个单独的字符串参数所指定的名字来本地定义一个非继承的属性,hasOwnProperty()返回true

    var obj = {};

    o.hasOwnProperty("undef");

 

  6、propertyIsEnumerable()、isPrototypeOf()

 

四、数组

  数组是一个有序的、值的集合,每一个值叫一个元素,每个元素都有一个下标,

  1、声明数组

    var arr = new Array();    // 创建一个无参数调用数组

    arr[0] = "哈哈";

    arr[1] = "呵呵";

 

    也可以直接赋值:var arr = new Array("aa", "bb", "cc");

 

    var arr = ["aa", "bb", "cc"];

   

  2、删除数组元素:arr.shift():删除数组的第一个元素  arr.pop():删除数组最后一个元素

 

  3、数组的长度:arr.length;

 

  4、遍历数组:

    var fruits = ["mango", "banana", "cherry", "pear"];
    for(var i=0; i<fruits.length; i++){
      console.log(fruits[i]);
    }

  

  5、join():将数转换成字符串,然后在把他们链接起来

     var a = [1,2,3];  var s = a.join(':');  // 返回 "1:2:3"

   

  6、reverse():将颠倒数组元素的顺序并返回颠倒后的数组.  

  7、sort():在原数组上对数组元素进行排序.

  8、concat():将两个数组合并,并返回一个新的数组  

    var a = [1,2,3];  a.concat(4,5,6);  // 返回1,2,3,4,5,6

  9、slice(0,3):返回一段指定位置数组的的内容,返回的是一个数组.

  10、splice():插入或删除数组元素的通用方法.

  11、push()、pop():从头部和尾部增加内容.

  12、unshift()、shift():删除头或尾部的内容

  13、toString()和toLocaleString():

 

 

第八章  函数

  函数是定义一次却可以调用或执行任意多次的一段JS代码,可以有参或无参,当一个函数在一个对象上被调用的个函数叫做方法.

 

一、嵌套的函数 

function hypote(a, b){
    function square(s) {
    return x * x;
  }
  return Math.sqrt(square(a) + square(b));
}

 

二、函数直接量

  js 允许用函数直接量来定义函数

  var f = function(x) { return x * x; }

 

三、参数

  1、Arguments对象:获取函数参数的个数

  function hypote(a, b){
    var len = arguments.length;
    console.log(len);
  }
  hypote(1,2)

 

四、

function hypote(a, b){
  var len = arguments.length;
  console.log(len);
}
hypote(1,2)

(function(a,b){
  var len = arguments.length;
  console.log(len);
})(1,2)

 

 

 

第九章  类、构造函数和原型

一、构造函数

 

二、原型和继承

  

 http://www.tigihairreborn.com/en-gb/#how-it-works

http://www.ianlunn.co.uk/

 

 

 

第二十章  脚本化HTTP

<img>、<iframe>、和<script>标记都有一个scr属性,当把这个属性设置一个URL就会启动一个HTTP GET请求来下载该URL的内容.

 

一、使用XMLHttpRequest

  使用XMLHttpRequest脚本化HTTP有3个步骤:

  1、创建一个XMLHttpRequest对象  2、指定HTTP请求并向一个Web服务器提交  3、同步或异步获得服务器响应

 

  1、获取一个请求

  var request = new XMLHttpRequest();  // 创建一个请求

  var request = new ActiveXobject("Msxml2.XMLHTTP");    // 在IE7之前,ie没有XMLHttpRequest(),创建一个ActiveX对象

 

  2、提交一个请求

  request.open("GET", url, false);    // 指定所请求的URL以及该请求的HTTP方法

  request.send(null);    // send是个请求体,HTTP GET请求,参数总为null,

 

  3、XMLHTTPRequest

 

 

 

第二十一章  JavaScript和XML

一、Ajax Web应用程序架构最重要的特征就是使用XMLHttpRequest对象脚本化HTTP的能力

 

二、XML DOM 和 XML HTTP为javascript提供了读写XML文档的能力

 

三、浏览器支持的XML DOM接口

  var oXmlDom = document.implementation.createDocument("文档命名空间","文档元素标签","一个文档类型对象为null表示新文档");  // 创建文档

  oXmlDom.load

 

 

第二十二章  面向对象

一、面向对象三大特点

  封装、延展、多态缺一不可

 

二、对象的三种基本构造法

// 第一种构造 new Object
var a = new Object();
a.x =1, a.y = 2;

// 第二种构造法,对象直接量
var b = { x:1, y:2 }

// 第三种构造法,定义类型
function Point(x,y){
  this.x = x;
  this.y = y;
}
var p = new Point(1,2);            

 

三、公有和私有属性封装

  所谓的封装是指属性或方法可以被声明为公有或私有,只有公有的属性或方法才被外部环境访问.

 

四、四种属性  

function dwn(s){
    document.write(s + "<br>");
}

function myClass(){
    var p = 100;    // private prroperty; 私有属性
    this.x = 10;    // dynameic public property 动态公有属性
}

myClass.prototype.y = 20;   // 原型属性
myClass.z = 30;     // 静态属性

var a = new myClass();
dwn(a.p);   // undefined私有属性对象无法访问
dwn(a.x);   // 返回10,公有属性
dwn(a.y);   // 20,公有属性

a.x = 20;
a.y = 40;
dwn(a.x);   // 20
dwn(a.y);   // 40 动态公用属性Y覆盖了原型属性y

 

五、继承与多态

  一旦确定两个类的继承关系,至少有三层含义,一子类的实例可以共享父类的方法,二子类可以覆盖父类的方法或者扩展新的方法,三子类和父类都子类实例的类型.