JS教程重要笔记

JavaScript 可以做

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

• 页面加载时触发事件
• 页面关闭时触发事件
• 用户点击按钮执行动作
• 验证用户输入内容的合法性
• …

可以使用多种方法来执行 JavaScript 事件代码：

• HTML 事件属性可以直接执行 JavaScript 代码
• HTML 事件属性可以调用 JavaScript 函数
• 你可以为 HTML 元素指定自己的事件处理程序
• 你可以阻止事件的发生。

JavaScript 显示数据

JavaScript 可以通过不同的方式来输出数据：

• 使用 window.alert() 弹出警告框。
• 使用 document.write() 方法将内容写到 HTML 文档中。
• 使用 innerHTML 写入到 HTML 元素。
• 使用 console.log() 写入到浏览器的控制台。

Confirm确认框和Prompt提示框的使用

alert('警告框提示语'); //只是提示
confirm('确认框提示语'); //可以取消和确认
prompt('请输入你的名字');  //提示框可输入内容，并且按确认或取消

JavaScript 数据类型

var length = 16;                                  // Number 通过数字字面量赋值
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

JavaScript 语句标识符

• break：用于跳出循环。
• catch：语句块，在 try 语句块执行出错时执行 catch 语句块。
• continue：跳过循环中的一个迭代。
• do … while：执行一个语句块，在条件语句为 true 时继续执行该语句块。
• for：在条件语句为 true 时，可以将代码块执行指定的次数。
• for … in：用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
• function：定义一个函数
• if … else：用于基于不同的条件来执行不同的动作。
• return：退出函数
• switch：用于基于不同的条件来执行不同的动作。
• throw：抛出（生成）错误 。
• try：实现错误处理，与 catch 一同使用。
• var：声明一个变量。
• while：当条件语句为 true 时，执行语句块。

声明变量类型

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

对象定义

可以说 “JavaScript 对象是变量的容器”。但是，我们通常认为 “JavaScript 对象是键值对的容器”。键值对通常写法为 name : value (键与值以冒号分割)。键值对在 JavaScript 对象通常称为 对象属性。

var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};

对象键值对的写法类似于：

• PHP 中的关联数组
• Python 中的字典
• C 语言中的哈希表
• Java 中的哈希映射
• Ruby 和 Perl 中的哈希表

自调用函数

函数表达式可以 “自调用”。自调用表达式会自动调用。如果表达式后面紧跟 () ，则会自动调用。不能自调用声明的函数。通过添加括号，来说明它是一个函数表达式：

(function () {
    var x = "Hello!!";      // 我将调用自己
})();

return 语句

在您仅仅希望退出函数时 ，也可使用 return 语句，返回值是可选的：

function myFunction(a,b)
{
    if (a>b)
    {
        return;
    }
    x=a+b
}
//如果 a 大于 b，则上面的代码将退出函数，并不会计算 a 和 b 的总和。

JavaScript 变量的生存期

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

向未声明的 JavaScript 变量分配值

非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。

var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明，可配置全局属性

console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(window.var2); // 2

delete var1; // false 无法删除
console.log(var1); //1

delete var2; 
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义

常见的HTML事件

• onchange HTML 元素改变
• onclick 用户点击 HTML 元素
• onmouseover 用户在一个HTML元素上移动鼠标
• onmouseout 用户从一个HTML元素上移开鼠标
• onkeydown 用户按下键盘按键
• onload 浏览器已完成页面的加载

字符串属性

• constructor 返回创建字符串属性的函数
• length 返回字符串的长度
• prototype 允许您向对象添加属性和方法

字符串方法

• charAt() 返回指定索引位置的字符
• charCodeAt() 返回指定索引位置字符的 Unicode 值
• concat() 连接两个或多个字符串，返回连接后的字符串
• fromCharCode() 将 Unicode 转换为字符串
• indexOf() 返回字符串中检索指定字符第一次出现的位置
• lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置
• localeCompare() 用本地特定的顺序来比较两个字符串
• match() 找到一个或多个正则表达式的匹配
• replace() 替换与正则表达式匹配的子串
• search() 检索与正则表达式相匹配的值
• slice() 提取字符串的片断，并在新的字符串中返回被提取的部分
• split() 把字符串分割为子字符串数组
• substr() 从起始索引号提取字符串中指定数目的字符
• substring() 提取字符串中两个指定的索引号之间的字符
• toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
• toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
• toLowerCase() 把字符串转换为小写
• toString() 返回字符串对象值
• toUpperCase() 把字符串转换为大写
• trim() 移除字符串首尾空白
• valueOf() 返回某个字符串对象的原始值

JavaScript switch 语句

<script>
function myFunction(){
	var x;
	var d=new Date().getDay();
	switch (d){
  		case 0:x="今天是星期日";
    	break;
 		case 1:x="今天是星期一";
        break;
  		case 2:x="今天是星期二";
        break;
        case 3:x="今天是星期三";
   	 	break;
  		case 4:x="今天是星期四";
    	break;
  		case 5:x="今天是星期五";
        break;
  		case 6:x="今天是星期六";
    	break;
 	}
	document.getElementById("demo").innerHTML=x;
}
</script>

default 关键词

var d=new Date().getDay();
switch (d)
{
    case 6:x="今天是星期六";
    break;
    case 0:x="今天是星期日";
    break;
    default:
    x="期待周末";
}
document.getElementById("demo").innerHTML=x;

JavaScript break 和 continue 语句

• break 语句用于跳出循环。
• continue 用于跳过循环中的一个迭代。

For/In 循环

JavaScript for/in 语句循环遍历对象的属性：

var person={fname:"Bill",lname:"Gates",age:56}; 
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}

typeof 操作符

可以使用 typeof 操作符来检测变量的数据类型。

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object  
在JavaScript中，数组是一种特殊的对象类型。 因此 typeof [1,2,3,4] 返回 object。 
typeof {name:'John', age:34} // 返回 object

请注意：

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

null

在 JavaScript 中 null 表示 “什么都没有”。
null是一个只有一个值的特殊类型。表示一个空对象引用。
用 typeof 检测 null 返回是object。
你可以设置为 null 来清空对象：

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

也可以设置为 undefined 来清空对象：

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

undefined

在 JavaScript 中, undefined 是一个没有设置值的变量。
typeof 一个没有值的变量会返回 undefined。

var person;                  // 值为 undefined(空), 类型是undefined

任何变量都可以通过设置值为 undefined 来清空。 类型为 undefined.

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

undefined 和 null 的区别

null 和 undefined 的值相等，但类型不等：

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

将数字转换为字符串

全局方法 String() 可以将数字转换为字符串。
该方法可用于任何类型的数字，字母，变量，表达式：

String(x)         // 将变量 x 转换为字符串并返回
String(123)       // 将数字 123 转换为字符串并返回
String(100 + 23)  // 将数字表达式转换为字符串并返回

Number 方法 toString() 也是有同样的效果：

x.toString()
(123).toString()
(100 + 23).toString()

将布尔值转换为字符串

全局方法 String() 可以将布尔值转换为字符串。

String(false)        // 返回 "false"
String(true)         // 返回 "true"

Boolean 方法 toString() 也有相同的效果。

false.toString()     // 返回 "false"
true.toString()      // 返回 "true"

将日期转换为字符串

全局方法 String() 可以将日期对象转换为字符串。

String(new Date())

Date 方法 toString() 也有相同的效果。

obj = new Date()
obj.toString()   // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

Date 方法

• getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
• getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
• getFullYear() 从 Date 对象以四位数字返回年份。
• getHours() 返回 Date 对象的小时 (0 ~ 23)。
• getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
• getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
• getMonth() 从 Date 对象返回月份 (0 ~ 11)。
• getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
• getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

将字符串转换为数字

全局方法 Number() 可以将字符串转换为数字。
字符串包含数字(如 “3.14”) 转换为数字 (如 3.14).
空字符串转换为 0。
其他的字符串会转换为 NaN (不是个数字)。

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

更多关于字符串转为数字的方法：

• parseFloat() 解析一个字符串，并返回一个浮点数。
• parseInt() 解析一个字符串，并返回一个整数。

自动转换为字符串

当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法：

document.getElementById("demo").innerHTML = myVar;

myVar = {name:"Fjohn"}  // toString 转换为 "[object Object]"
myVar = [1,2,3,4]       // toString 转换为 "1,2,3,4"
myVar = new Date()      // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"

上一节：Javascript第六课笔记