汇智网重温JS

确认选择

除了向用户提供信息，我们还希望从用户那里获得信息。这里就用到了confirm 消息对话框。

语法：confirm(str);

参数说明：

str: 在消息对话框中要显示的文本，返回的是布尔值。当点击“确定”按钮时，会返回true，点击“取消”按钮时，返回的是false。

示例：

if(confirm("你有房有车有存款吗？")==true){
    document.write("求包养");
}else{
    document.write("努力吧，少年");
}

 

提示

有时候，不仅希望用户回答Yes/No。而是希望得到更特定的响应。这中情况我们可以利用prompt。

语法：prompt(str1, str2);

参数说明：

str1：要显示在消息对话框中的文本，不能修改

str2：文本框中的内容，可以修改

点击确定按钮，文本框中的内容将作为函数返回值，点击取消按钮将返回null。

var myName = prompt("输入您的名字");
if(myName != null && myName != ''){
    document.write("welcome to " + myName);
}else{
    document.write("welcome to my friend.");
}

 

打开新页面

在html页面中，有时我们需要跳转到新的页面中。这是时候就用到了open()。

语法：window.open(URL, 窗口名称);

参数说明：

URL：可选,打开窗口的网址或路径。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。

窗口名称：可选,该字符串是一个由逗号分隔的特征列表，声明了被打开窗口的名称。可以是"_top"、"_blank"、"_selft"、"_parent"等。

  • _blank 在新窗口显示目标网页
  • _selft 在当前窗口显示目标网页
  • _parent 框架网页中当前整个窗口位置显示目标网页
  • _top 框架网页中在上部窗口中显示目标网页
function open_win() {
    window.open("http://www.baidu.com","_blank");
}
open_win();

 

try...catch...语句

当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

JavaScript 语句 try 和 catch 是成对出现的。

try {
  allert("Welcome guest!");\\这里是故意把alert单词写错
}catch(err) {
  txt="本页有一个错误。\n\n";
  txt+="错误描述：" + err.message + "\n\n";
  txt+="点击确定继续。\n\n";
  alert(txt);
}

throw 语句

throw 语句允许我们创建自定义错误。

正确的技术术语是：创建或抛出异常（exception）。

如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。

语法：throw exception

参数：exception 可以是 JavaScript 字符串、数字、逻辑值或对象。

function myFunc(){
    try{
        //这是是获取id为test的输入框中的值，详细用处会在DOM操作中讲解
        var test = document.getElementById("test").value;
        if (x == ""){
            throw "值为空";
        }
        if (x > 5){
            throw "值小了";
        }
        if (x < 10){
            throw "值大了";
        }
    }
    catch (err){
        alert("错误：" + err + "。");
    }
}

 

文档对象模型（Document Object Model简称DOM）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树。

HTML文档可以说由节点构成的集合，三种常见的DOM节点:

  • 元素节点：上图中<html>、<body>、<a>等都是元素节点，即标签。
  • 文本节点:向用户展示的内容，如<title>...</title>中的“文档标题”文本。
  • 属性节点:元素属性，如<a>标签的链接属性 href 。

 

改变属性：

document.getElementById(id).attribute=new value

改变CSS：

document.getElementById("p2").style.color="red";

 

 

 

数据类型分为：基础类型和对象类型。

基础类型：Number、String、Boolean、Null、Undefined

对象类型：object，包括Array、Function、Date...

在保存浮点数值时需要的内存空间是整数值的两倍，因此JavaScript在一些情况下会将 浮点数值转换为整数值。如下列情况：

  • 小数点后面没有跟任何的数字；
  • 本身表示的就是一个整数（像3.0）。
var floatN1 = 3.;  //小数点后面没有数字，解析为3
var floatN2 = 3.0; //本身表示整数，解析为3

NaN:

NaN是一个数值，它表示一个不能产生正常结果的运算结果。NaN不等于任何值，包括它自己本身。我们可以用函数isNaN(number)检测NaN。

number参数可以是任意类型，而函数会帮我们确定这个参数是否“不是数值”。这个函数在接收一个值之后，会尝试将这个值转换为数值。而任何不能被转换为数值的值都会导致这个函数返回true。

alert(isNaN(NaN));        //true
alert(isNaN(3));        //false(3是一个数值)
alert(isNaN("3"));        //false(可以被转换成数值3)
alert(isNaN(true));        //false(被转换成数值1)
alert(isNaN("bool"));    //true(不能被转换成数值)

 

 

javascript使用以下八种转义字符，它们都是以反斜杠（\）开始。当JavaScript解析器看到反斜杠的时候，就会把程序员所要表达的意思表现出来。

序号 转义字符 使用说明
1 \b 后退一格
2 \f 换页
3 \n 换行
4 \r 返回
5 \t 制表符
6 \' 单引号
7 \" 双引号
8 \ 反斜杠

 

 

任意的JavaScript的值都能转换为布尔值，如下图：

 

数据类型 转换为true的值 转换为false的值
Boolean true false
String 任何非空字符串 ""（空字符串）
Number 任何非零数字值（包括无穷大） 0和NaN
Object 任何对象 null
Undefined 不适用 undefined

 

Null和Undefined类型

Null和Undefined类型都只有唯一的特殊值,即null和undefined。不过null是关键字而undefined不是。

alert(null == undefined);//会弹出true。

尽管这两个值相等，但是它们的含义不同。undefined表示更深层次的“空值”，它是变量的一种取值，表明变量没有初始化。null 则用于表示尚未存在的对象。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。所以：

alert(null === undefined);//会弹出false

你也可以认为undefined是表示系统级的、出乎意料的或类似错误的值的“空值”；而null表示程序级的、意料之中的值的“空值”。如果你想吧两者赋值给变量或者属性等，最好的选择是null

 

 

 

创建对象

 

对象（object）是JavaScript的基本数据类型之一。对象是一种复合值：它把多个值（原始值或者其他对象）聚合在一起，可以通过名字访问这些值。对象也可看做是 属性的无序集合，每个属性都是一个名/值对。属性名是字符串，因此我们可以把对象 看成是从字符串到值的映射。

创建对象的方式：

第一种是使用new操作符后跟object 构造函数，如下：

  1. var obj = new Object();
  2. obj.name = "MangGuo";
  3. obj.age = 25;

第二种方式是使用对象字面量表示法。如下创建了一个和上面一样的对象：

  1. var obj = {
  2. name : "MangGuo", //name是属性名，"MangGuo"是值
  3. age : 25
  4. }

　　在对象字面量中，使用逗号来分隔不同的属性，因此"mangGuo"后面是一个逗号。但是，在age属性的值25的后面不能添加逗号，因为age是这个对象的最后一个属性。

　　使用对象字面量创建对象需要注意：当属性名中含有空格、特殊字符或者是保留字的时候一定要加上引号,其他情况下可加可不加。如下

var obj = {
    "name" : "huizhi",<br>    "hui zhi" : "hubwiz", //属性名中有空格
    "hui-zhi" : "hubwiz", //属性名中有特殊字符
    "for" : "baoliuzi"     //属性名是保留字
}
document.write(obj.name);  //输出obj对象属性名为name的值

 

第三种方式是使用工厂模式创建对象,返回带有属性和方法的person对象。

第四种方式使用自定义构造函数模式创建对象；这里注意命名规范，作为构造函数的函数首字母要大写，以区别其它函数。这种方式有个缺陷是sayName这个方法，它的每个实例都是指向不同的函数实例，而不是同一个

第五种方式是使用原型模式创建对象；解决了方法4中提到的缺陷，使不同的对象的函数（如sayFriends）指向了同一个函数。但它本身也有缺陷，就是实例共享了引用类型friends，从下面的代码执行结果可以看到，两个实例的friends的值是一样的，这可能不是我们所期望的。

第六种方式是组合使用原型模式和构造函数创建对象，解决了方法5中提到的缺陷，而且这也是使用最广泛、认同度最高的创建对象的方法

参照：http://www.cnblogs.com/wangjq/p/3755691.html

 

 

访问属性

访问对象的属性有两种方式：点或者中括号操作符。点操作符在我们上一页当中已经应用到了。

1.使用点操作符

语法：objectName.propertyName

其中，objectName 为对象名称，propertyName为属性名称。

2.使用中括号操作符

语法：objectName[propertyName]

其中，objectName 为对象名称，propertyName 为属性名称。

 

 

删除属性

delete 操作符是删除属性的唯一方法。把属性设置为undefined或者null不能真正的删除属性，它只是移除了属性和值的关联。

语法：delete 对象名.属性名;

 

hasOwnProperty()函数

对象是属性的集合，我们经常会检测集合中成员的所属关系——判断某个属性是否属于某个对象。这个时候就用到了我们前文提到的：hasOwnProperty 函数。

语法：object.hasOwnProperty(proName);

参数说明：

object

为必需参数，是对象的实例。

proName

必需参数。 一个属性名称的字符串值

详解：如果object对象中存在指定名称的属性，则返回true，反之则返回false。

注：hasOwnProperty 是 JavaScript 中唯一一个处理属性但是不查找原型的函数。

 

原型

每一个对象都连接到一个原型对象，并且可以从中继承属性。所有通过字面量创建 的对象都具有同一个原型对象，并可以通过Object.prototype获取对原型 对象的引用。通过new关键字后跟构造函数创建的对象的原型，就是构造函数的prototype 属性的值。

比如通过new Object()创建的对象和字面量创建的对象一样也继承自Object.prototype。

var sum = {
  name: "汇智网",
  type: "加法"
}
Object.prototype.add = function(){
  alert("原型对象的方法");
}
sum.add(); // =>原型对象的方法

 

 

遍历属性

我们除了检测属性的存在，我们还经常对属性进行遍历。通常我们会用：for/in

for / in 语句可用来遍历一个对象的所有属性名。它会将所有的属性（包括函数和原型中的属性）。如下代码：

 

创建数组

Array类型是Javascript中比较常用的类型，它和其他语言的数组有很大的区别，虽然它们数组的数据都是有序列表。但是JavaScript的数组可以保存任意类型的数据（包括它本身）。且大小是动态的，可以随着数据的添加而自动增长。

创建数组的两种方式：

第一种方式：使用Array构造函数

var arr = new Array();

如果知道数组中的数据，可以把数据包含到构造函数中。比如：

var arr = new Array("cat","dog","mouse");

如果数组中的数据只有一个且是数值时，用引号引起来length是1，不用引号的话数值是几就表示length是多少。比如：

var arr = new Array("3"); //创建了一个包含字符串是3的数组，length为1。
var arr = new Array(3);   //创建了一个length为3的数组

第二种方式：使用字面量表示法

var arr = [];

上面创建了一个空数组，如果你知道其中的数据，可以如下使用：

var arr = ["cat", "dog", "mouse"];

 

稀疏数组

稀疏函数就是从0开始的不连续索引的数组。

通常情况下，数组中length属性值代表着元素的个数，那就是稀疏数组。就像上文中提到的。示例如下：

var arr = new Array(3);
arr.length; // 
arr[0] = 1;
arr[100] = 98;
arr.length;

 

 

遍历数组

数组就是对象，所以我们可以用 for/in 来遍历数组。可惜 for/in 不能保证属性的顺序，但是大多数情况下都希望按照 阿拉伯数组顺序来产生元素。

要想解决这个问题，我们可以用最常规的 for 来遍历数组。如下示例：

 

 

函数声明和函数表达式

JavaScript解析器在向执行环境加载数据的时候，对函数声明和函数表达式并不是一视同仁的。 对于前者解析器会率先读取，并使其在执行任何代码之前可用；对于后者，则必须等到解析器执行 到它所在的代码行，才会真正被解析执行。看如下中的示例：

alert(sum(3,11));  //弹出14
function sum(x, y) {
    return x + y;
}
alert(sum(3,11);   // unexpected identifier 意外标识符错误
var sum = function (x, y) {
    return x + y;
}

 

作为值的函数

JavaScript中的函数名本身就是变量，所以函数也可以作为值来使用。看如下示例：

function funcName(someFunc, someParam){
    return someFunc(someParam)
}
function funcName(someFunc, someParam){
    return someFunc(someParam)
}
function sum(num){
    return num + 3;
}
var result = funcName(sum, 5);
alert(result);  //=>8

 

 

函数调用

在JavaScript中有四种方式调用函数，如下：

  • 1.方法调用模式；
  • 2.函数调用模式；
  • 3.构造器调用模式；
  • 4.apply调用模式。

方法调用模式

当一个函数被保存为对象的一个属性时，我们称它为一个方法。如果调用表达式包含一个提取属性 的动作（即我们在讲解对象时说的 . 操作符），那么它就被当做一个方法来调用。

构造器调用模式

JavaScript中函数还可以是构造器. 将函数作为构造器来使用的语法就是在函数调用前面加上一个new关键字. 如以下代码：

var add = function() {
    this.name = "汇智网";
    this.sum = function (a, b){
        return a + b;
    }
}
// 构造器调用模式
var obj = new add(); //obj是一个对象
obj.sum(1,2);  //=>3

apply调用模式

JavaScript中函数也是对象，也可以拥有方法。其中call()和apply()用来间接的调用函数。称之为apply调用模式。

apply方法让我们构建一个参数数组传递给调用函数。它也允许我们选择this的值。 apply方法接收两个参数，第一个是要绑定给this的值，第二个就是一个参数数组。

语法：函数名.apply(对象, 参数数组);

var add = function (a, b) {
    return a + b;
}
 
add.apply(null,[1,2]);  //=>3

 

posted @ 2016-09-08 11:46  chenxj  阅读(97)  评论(0)    收藏  举报