JavaScript高级程序设计(第三版)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript高级程序设计(第三版)相关的知识,希望对你有一定的参考价值。

1、javascript是一种专为与网页交互而设计的脚本语言;
由三个不同的部分组成:ECMAScript、文档对象模型(DOM)、浏览器对象模型(BOM);
在当前五个主要浏览器(IE、Firefox、Chrome、Safari、Opera)中都得到了不同程度的支持。 


2、html页面中插入JavaScript的主要方法,就是使用 <script> 元素 。


3、 <script> 元素会按顺序被解析
      传统: 所有的 <script> 元素都应该放在页面的 <head> 元素中,(可以用defer="defer"代替)延迟执行。最好只有一个,只适用于外部脚本文件。
      现代:把全部的JavaScript引用放在 <body> 元素中页面内容的后面(在解析JavaScript代码之前,页面内容将完全呈现在浏览器中,用户会感觉打开页面的速度变快了)。最佳选择


4、浏览器在遇到 <body> 标签时才开始呈现内容


5、async,异步加载页面其他内容,不保证.js文件执行的先后顺序,确保多个.js文件之间互不依赖非常重要。


6、最好在html中尽可能使用外部文件来包含JavaScript代码,
优点:可维护性、可缓存


7、严格模式:一些不确定的行为将得到处理,而且某些不安全的操作也会抛出错误

function  doSomething (    ) {
    "use  strict";
    //函数体
}



8、全局变量

function  test (    ) {
    message = "hi";    //全局变量
}
test();
alert (message);//hi


省略了 var 操作符,因而message就成了全局变量。这样,只要调用过一次test( )函数,这个变量就有了定义,就可以在函数外部的任何地方被访问到。


9、类型显示

var massage = "this is my first";
alert(typeof massage);    --string
alert(typeof (massage));    --string
alert(typeof 95);       --number


10、逐个遍历数组

 var myObject = new Object();
myObject.name = "lvhazhou";
myObject.age = "22";
myObject.phone = "13951245632"
for(prop in myObject){
window.alert("The property " + prop + " is " + myObject[prop]);
}



11、向所取id的参数插入内容  innerHTML

function displayDate(){
    document.getElementById("demo").innerHTML=Date();
} 
<h1>我的第一个 JavaScript 程序</h1>
<p id="demo">这是一个段落</p>
<button type="button" onClick="displayDate()">显示日期</button>



12、点击图片,两个图片直接互相切换

function changeImage(){
    element=document.getElementById("myimage");
    if(element.src.match("one")){
        element.src="java4_two.jpg";
    }
    else{
        element.src="java3_one.jpg";
    }
}

<img id="myimage" onClick="changeImage()" src="java3_one.jpg" width="100" height="180">


match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。


13、声明数组

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

var cars=new Array("Saab","Volvo","BMW");
var cars=["Saab","Volvo","BMW"];


14、声明对象

var person={firstname:"John", lastname:"Doe", id:5566};

对象属性的寻址方式:

name=person.lastname;
name=person["lastname"];


15、声明对象类型
当声明新变量时,可以使用关键词 "new" 来声明其类型: 

var carname=new String;
var x=new Number;
var y=new Boolean;
var cars=new Array;
var person= new Object;


JavaScript对象均为变量,当声明一个变量时,就创建了一个新的对象。 


16、两种访问属性的方法

person.lastName;
person["lastName"];


17、JavaScript变量的生存期
JavaScript变量的生命周期从它被声明的时间开始,
局部变量会在函数运行以后被删除,
全局变量会在页面关闭以后被删除。


18、向未声明的JavaScript变量分配值
    如果把值赋给尚未声明的变量,该变量将会自动作为全局变量声明

    carname = “voloe” ;

    将声明一个全局变量carname,即使它在函数内执行。


19、代码将修改自身元素的内容

<button onclick="this.innerHTML=Date()">现在的时间是?</button>


20、常见的HTML事件
onchange             HTML元素改变
onclick                  用户点击HTML元素
      用户在一个HTML元素上移动鼠标
  用户从一个HTML元素上移开鼠标
onkeydown           用户按下键盘按键
   浏览器已完成页面的加载


21、绝对相等符号   ===

var x = "John";              
var y = new String("John");
(x === y)     // 结果为 false,因为 x 是字符串,y 是对象

===为绝对相等,既数据类型和值都必须相等


22、跳出代码块

cars=["BMW","Volvo","Saab","Ford"];
list:{
document.write(cars[0] + "<br>"); 
document.write(cars[1] + "<br>"); 
document.write(cars[2] + "<br>"); 
break list;
document.write(cars[3] + "<br>"); 
document.write(cars[4] + "<br>"); 
document.write(cars[5] + "<br>"); 
}



 23、清空对象
你可以设置为 null 来清空对象:

var person = null;           
// 值为 null(空), 但类型为对象

你可以设置为 undefined 来清空对象:

var person = undefined;     
// 值为 undefined, 类型为 undefined


24、JavaScript数据类型
5种数据类型:string、number、boolean、object、function
3种对象类型:Object、Date、Array
2种不包含任何值的数据类型:null、undefined

typeof "John"    // 返回 string 
typeof 3.14    // 返回 number
typeof NaN   // 返回 number
typeof false    // 返回 boolean
typeof [1,2,3,4]   // 返回 object
typeof{name:‘John‘, age:34}  // 返回 object
typeof new Date()  // 返回 object
typeof function() {}   // 返回 function
typeof myCar   // 返回 undefined (如果 myCar 没有声明)
typeof null    // 返回 object

NaN数据类型是 number
数组(Array)数据类型是object
日期(Date)数据类型是object
null数据类型是object
未定义变量的数据类型是undefined 


25、constructor
constructor属性返回所有JavaScript变量的构造函数

"John".constructor  // 返回函数 String()  { [native code] }
(3.14).constructor  // 返回函数 Number()  { [native code] }
false.constructor  // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor  // 返回函数 Array()   { [native code] }
{name:‘John‘,age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor  // 返回函数 Date()    { [native code] }
function(){}.constructor  // 返回函数 Function(){ [native code] }

可以用constructor属性查看对象是否为数组

function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}


26、将字符串转换为数字
空字符串转换为 0
其他字符串会转换为NaN

Number("3.14") // 返回 3.14
Number(" ")  // 返回 0 
Number("")  // 返回 0
Number("99 88") // 返回 NaN

将布尔类型转换为数字

Number(false) // 返回 0
Number(true)  // 返回 1


27、使用字符串方法

在JavaScript中,正则表达式通常用于两个字符串方法:search( ) 和 replace( ) 。

search() 方法 用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。

replace() 方法 用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

search()方法使用正则表达式:
使用正则表达式
搜索 "w3cschool" 字符串,且不区分大小写:
var str = "Visit w3cschool";
var n = str.search(/w3cschool/i);
输出结果为:6
replace()方法使用正则表达式:
使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 w3cschool :

var str ="Visit Microsoft!";
var res = str.replace(/microsoft/i, "w3cschool");


28、正则表达式修饰符
i            执行对大小写不敏感的匹配。
g           执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m          执行多行匹配。


29、正则表达式模式
 

方括号用于查找某个范围内的字符
[abc]            查找方括号之间的任何字符。
[0-9]            查找任何从0至9的数字。
(x|y)             查找任何以 | 分隔的选项。

元字符是拥有特殊含义的字符
\d           查找数字。
\s            查找空白字符。
\b           匹配单词边界。
\uxxx      查找已16进制数 xxx 规定的Unicode字符。

 量词
n+            匹配任何包含至少一个n的字符串。
n*             匹配任何包含零个或多个n的字符串。
n?             匹配任何包含零个或一个n的字符串。

在 JavaScript 中,RegExp 对象是一个预定义了属性和方法的正则表达式对象。

test() 方法是一个正则表达式方法。

test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。

exec() 方法是一个正则表达式方法。

exec() 方法用于检索字符串中的正则表达式的匹配。

该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。

以下实例用于搜索字符串中的字母 "e":  
/e/.exec("The best things in life are free!"); 
输出:e 


30、自己抛出异常

function myFunction(){
    try{
        var x=document.getElementById("demo").value;
        if(x==""){
            throw "值为空";
        }
        if(isNaN(x)){
            throw "不是数字";
        }
        if(x>5){
            throw "太大";
        }
        if(x<5){
            throw "太小";
        }
    }
    catch(err){
        var y=document.getElementById("mess");
        y.innerHTML="错误:" + err + "。";
    }
}
 
<input id="demo" type="text">
<button type="button" onClick="myFunction()">测试输入</button>
<p id="mess"></p>



















本文出自 “夜那么深” 博客,请务必保留此出处http://lvhz94zm6.blog.51cto.com/9805380/1873772

以上是关于JavaScript高级程序设计(第三版)的主要内容,如果未能解决你的问题,请参考以下文章

赠书《JavaScript高级程序设计(第三版)》5本

JavaScript高级 引用类型《JavaScript高级程序设计(第三版)》

javascript高级程序设计第三版 读书笔记

JavaScript高级程序设计(第三版)

JavaScript高级 函数表达式 《JavaScript高级程序设计(第三版)》

JavaScript高级程序设计(第三版)学习笔记222425章