JavaScript 基础学习 （第二天）

下定决心，好好过一天 ~

JavaScript 函数

可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量
只要函数运行完毕，本地变量就会被删除。

全局 JavaScript 变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

JavaScript 变量的生存期

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

向未声明的 JavaScript 变量分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。

carname="Volvo";

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

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); // 已经删除 报错变量未定义

JavaScript 作用域

作用域是可访问变量的集合。

JavaScript 局部作用域

变量在函数内声明，变量为局部作用域。
局部变量：只能在函数内部访问。

JavaScript 全局变量

变量在函数外定义，即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

// 此处可调用 carName 变量
 
function myFunction() {
    carName = "Volvo";
    // 此处可调用 carName 变量
}

HTML 中的全局变量

在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。
你的全局变量，或者函数，可以覆盖 window 对象的变量或者函数。
局部变量，包括 window 对象可以覆盖全局变量和函数。

JavaScript 事件

HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为。
以下是 HTML 事件的实例：
1.HTML 页面完成加载
2.HTML input 字段改变时
3.HTML 按钮被点击

通常，当事件发生时，你可以做些事情。
在事件触发时 JavaScript 可以执行一些代码。
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

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

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

常见的HTML事件

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

JavaScript 字符串

字符串可以是对象

通常， JavaScript 字符串是原始值，可以使用字符创建： var firstName = “John”
但我们也可以使用 new 关键字将字符串定义为一个对象： var firstName = new String(“John”)

var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object

(x === y) // 结果为 false，因为 x 是字符串，y 是对象

不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用：

字符串属性和方法

原始值字符串，如 “John”, 没有属性和方法(因为他们不是对象)。
原始值可以使用 JavaScript 的属性和方法，因为 JavaScript 在执行方法和属性时可以把原始值当作对象。

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

JavaScript for 循环

For/In 循环

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

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

JavaScript 标签

如需标记 JavaScript 语句，请在语句之前加上冒号：

break labelname; 
continue labelname;

通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：

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>"); 
}

JavaScript typeof, null, 和 undefined

typeof 操作符

你可以使用 typeof 操作符来检测变量的数据类型。
typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

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

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

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

undefined 和 null 的区别

null 和 undefined 的值相等，但类型不等：
typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

JavaScript 类型转换

JavaScript 数据类型

在 JavaScript 中有 6 种不同的数据类型：
1.string
2.number
3.boolean
4.object
5.function
6.symbol

3 种对象类型：
1.Object
2.Date
3.Array

2 个不包含任何值的数据类型：
1.null
2.undefined

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

如果对象是 JavaScript Array 或 JavaScript Date ，我们就无法通过 typeof 来判断他们的类型，因为都是 返回 object。

constructor 属性

"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] }

function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}//你可以使用 constructor 属性来查看对象是否为数组 (包含字符串 "Array"):

function isDate(myDate) {
    return myDate.constructor.toString().indexOf("Date") > -1;
}//你可以使用 constructor 属性来查看对象是否为日期 (包含字符串 "Date"):

将数字转换为字符串

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

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

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

一元运算符 +

Operator + 可用于将变量转换为数字：
如果变量不能转换，它仍然会是一个数字，但值为 NaN (不是一个数字):

var y = "5";      // y 是一个字符串
var x = + y;      // x 是一个数字

自动转换类型

当 JavaScript 尝试操作一个 “错误” 的数据类型时，会自动转换为 “正确” 的数据类型。
以下输出结果不是你所期望的：

5 + null    // 返回 5         null 转换为 0
"5" + null  // 返回"5null"   null 转换为 "null"
"5" + 1     // 返回 "51"      1 转换为 "1" 
"5" - 1     // 返回 4         "5" 转换为 5

自动转换为字符串

当你尝试输出一个对象或一个变量时 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"

myVar = 123             // toString 转换为 "123"
myVar = true            // toString 转换为 "true"
myVar = false           // toString 转换为 "false"

JavaScript 正则表达式

使用字符串方法

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

search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

正则表达式参数可用在以上方法中 (替代字符串参数)。
正则表达式使得搜索功能更加强大(如实例中不区分大小写)。

正则表达式修饰符

修饰符 可以在全局搜索中不区分大小写:

正则表达式模式

方括号用于查找某个范围内的字符

元字符是拥有特殊含义的字符：

量词:

使用 RegExp 对象

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

使用 test()

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

var patt = /e/;
patt.test("The best things in life are free!");
//true

使用 exec()

exec() 方法是一个正则表达式方法。
exec() 方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

/e/.exec("The best things in life are free!");
//e

完整的 RegExp 参考手册

传送

参考资料

下定决心，好好过一天 ~