runoob js第二天

JavaScript语句

JavaScript语句是发给浏览器的指令。

document.getElementById("demo").innerHTML = "你好 Dolly";
含义：JavaScript 语句向 id="demo" 的 HTML 元素输出文本 "你好 Dolly" 

分号；
用于分隔语句，在每条可执行的语句结尾添加分号
可以一行中编写多条语句
js代码
js代码是js语句的序列
浏览器按照编写顺序依次执行每条语句

一个段落。
一个 DIV。

js代码块
js可以分批的组合起来
代码块以左括号开始，右括号结束
代码块的作用是一并地执行语句序列

我是一个段落。
我是一个div。

点击这里


当您点击上面的按钮时，两个元素会改变。

js语句标识符
JavaScript 语句通常以一个语句标识符为开始，并执行该语句。
语句标识符是保留关键字不能作为变量名使用。
下表列出了 JavaScript 语句标识符 (关键字) ：

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

空格
JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。下面的两行代码是等效的

var person="Hege";
var person = "Hege";

对代码行进行折行
在文本字符串中使用反斜杠对代码行进行换行

document.write("你好 \
世界!");

JavaScript注释

1. 单行注释 // 。

// 输出标题：
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
// 输出段落：
document.getElementById("myP").innerHTML="这是我的第一个段落。";

ar x=5;    // 声明 x 并把 5 赋值给它
var y=x+2;  // 声明 y 并把 x+2 赋值给它

2. 多行注释以 /* 开始，以 */ 结尾。

/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";

3. 使用注释来阻止代码行的执行（可用于调试）

// document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";

/*
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";
*/

变量

变量是用于存储信息的"容器"。
JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。
变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

• 变量必须以字母开头
• 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
• 变量名称对大小写敏感（y 和 Y 是不同的变量）

js数据类型
JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串。
当变量为文本值时，应该用双引号或单引号包围这个值。
当变量为数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。

var pi=3.14;
var person="John Doe";
var answer='Yes I am!';

声明（创建） JavaScript 变量
在 JavaScript 中创建变量通常称为"声明"变量。

1. 我们使用 var 关键词来声明变量：

var carname;

2. 变量声明之后，该变量是空的（它没有值）。
   如需向变量赋值，请使用等号：

carname="Volvo";

3. 不过，您也可以在声明变量时对其赋值：

var carname="Volvo";

4. 在下面的例子中，我们创建了名为 carname 的变量，并向其赋值 "Volvo"，然后把它放入 id="demo" 的 HTML 段落中

var carname="Volvo";
document.getElementById("demo").innerHTML=carname;

一条语句，多个变量
您可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：

var lastname="Doe", age=30, job="carpenter";

声明也可横跨多行：

var lastname="Doe",
age=30,
job="carpenter";

一条语句中声明的多个不可以赋同一个值:

var x,y,z=1;
x,y 为 undefined， z 为 1。

Value = undefined
在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。

JavaScript 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol(Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值)。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。
JavaScript 拥有动态类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

JavaScript 字符串
字符串是存储字符（比如 "Bill Gates"）的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号：

var carname="Volvo XC60";
var carname='Volvo XC60';

var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';

JavaScript 数字
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带

var x1=34.00;      //使用小数点来写
var x2=34;         //不使用小数点来写

极大或极小的数字可以通过科学（指数）计数法来书写：

var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

JavaScript 布尔
布尔（逻辑）只能有两个值：true 或 false。

var x=true;
var y=false;

JavaScript 数组

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

或者 (condensed array):
var cars=new Array("Saab","Volvo","BMW");

或者 (literal array):
var cars=["Saab","Volvo","BMW"];
数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。

JavaScript 对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔

var person={firstname:"John", lastname:"Doe", id:5566};
上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。

空格和折行无关紧要。声明可横跨多行：

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

对象属性有两种寻址方式：

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

Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。

cars=null;
person=null;

声明变量类型
声明新变量时，可以使用关键词 "new" 来声明其类型

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

JavaScript 对象

JavaScript 对象是变量的容器
对象也是一个变量，但对象可以包含多个值（多个变量）。

var car = {type:"Fiat", model:500, color:"white"};
3 个值 ("Fiat", 500, "white") 赋予变量 car。
3 个变量 (type, model, color) 赋予变量 car。

JavaScript 对象可以跨越多行，空格跟换行不是必须的：
对象属性
JavaScript 对象是键值对的容器
键值对通常写法为 name : value (键与值以冒号分割)。
键值对在 JavaScript 对象通常称为 对象属性。
访问对象属性

1.person.lastName;
2.person["lastName"];

对象方法
对象方法通过添加 () 调用 (作为一个函数)。

name = person.fullName();
访问 person 对象的 fullName() 方法:

name = person.fullName;
访问 person 对象的 fullName 属性，它将作为一个定义函数的字符串返回：

访问对象方法

创建对象方法
methodName : function() { code lines }
访问对象方法
objectName.methodName()

通常 fullName() 是作为 person 对象的一个方法， fullName 是作为一个属性。
有多种方式可以创建，使用和修改 JavaScript 对象。
同样也有多种方式用来创建，使用和修改属性和方法。

JavaScript 函数

调用带参数的函数
在调用函数时，您可以向其传递值，这些值被称为参数。
这些参数可以在函数中使用。
参数之间用逗号，分割

myFunction(argument1,argument2)

声明函数时，把参数作为变量来声明

function myFunction(var1,var2)
{
代码
}
变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。

带有返回值的函数
使用 return 语句时，函数会停止执行，并返回指定的值。

function myFunction()
{
    var x=5;
    return x;
}
上面的函数会返回值 5
整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。

计算两个数字的乘积

function myFunction(a,b)
{
    return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
"demo" 元素的 innerHTML 将是：12

局部 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

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

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

JavaScript 作用域

在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。
js局部作用域
变量在函数内声明，变量为局部作用域。
局部变量：只能在函数内部访问。

// 此处不能调用 carName 变量
function myFunction() {
    var carName = "Volvo";
    // 函数内可调用 carName 变量
}
因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。
局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。

JavaScript 全局变量
变量在函数外定义，即为全局变量。
全局变量有全局作用域: 网页中所有脚本和函数均可使用。

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

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

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

JavaScript 变量生命周期
JavaScript 变量生命周期在它生命时初始化
局部变量在函数执行完毕后销毁
全局变量在页面关闭后销毁
函数参数
只在函数内起作用，属于局部变量
HTML 中的全局变量
在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。

//此处可使用 window.carName
function myFunction() {
    carName = "Volvo";
}

JavaScript 事件

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
html事件
HTML 事件可以是浏览器行为，也可以是用户行为。
以下是 HTML 事件的实例：
HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

在事件触发时 JavaScript 可以执行一些代码。
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。
常见的html事件

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

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

• 页面加载时触发事件
• 页面关闭时触发事件
• 用户点击按钮执行动作
• 验证用户输入内容的合法性
• 等等 ...
  可以使用多种方法来执行 JavaScript 事件代码：
• HTML 事件属性可以直接执行 JavaScript 代码
• HTML 事件属性可以调用 JavaScript 函数
• 你可以为 HTML 元素指定自己的事件处理程序
• 你可以阻止事件的发生。
• 等等 ...

字符串

1. 字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号

var carname = "Volvo XC60";
var carname = 'Volvo XC60';

2. 你可以使用索引位置来访问字符串中的每个字符：

var character = carname[7];
字符串的索引从 0 开始，这意味着第一个字符索引值为 [0],第二个为 [1], 以此类推。

3. 你可以在字符串中使用引号，字符串中的引号不要与字符串的引号相同:

var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';

4. 你也可以在字符串添加转义字符来使用引号：

var x = 'It\'s alright';
var y = "He is called \"Johnny\"";

字符串长度
可以使用内置属性 length 来计算字符串的长度

特殊字符
"We are the so-called "Vikings" from the north."
字符串 "We are the so-called " 被截断。
可以使用反斜杠 () 来转义 "Vikings" 字符串中的双引号
"We are the so-called "Vikings" from the north."
反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符：
转义字符 () 可以用于转义撇号，换行，引号，等其他特殊字符。

\'        单引号
\"        双引号
\\        反斜杠
\n        换行
\r        回车
\t        tab(制表符)
\b        退格符
\f        换页符

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

var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object
不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用

var x = "John";              
var y = new String("John");
(x === y) // 结果为 false，因为 x 是字符串，y 是对象
=== 为绝对相等，即数据类型与值都必须相等。

字符串属性

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 运算符

运算符 = 用于给 JavaScript 变量赋值。
算术运算符 + 用于把值加起来。
JavaScript 算术运算符
y=5，下面的表格解释了这些算术运算符：

运算符 描述        例子    x 运算结果  y 运算结果
 +     加法       x=y+2     7          5 
 -     减法       x=y-2     3          5  
 *     乘法       x=y*2     10         5  
 /     除法       x=y/2     2.5        5  
 %     取模（余数）x=y%2     1          5 
 ++    自增       x=++y     6          6  
                  x=y++     5          6  
 --    自减       x=--y     4          4  
                  x=y--     5          4 

JavaScript 赋值运算符
赋值运算符用于给 JavaScript 变量赋值。
给定 x=10 和 y=5，下面的表格解释了赋值运算符：

| 运算符 | 例子 | 等同于 | 运算结果
| +=    | x+=y | x=x+y | x=15 
| -=    | x-=y | x=x-y | x=5 
| *=    | x*=y | x=x*y | x=50
| /=    | x/=y | x=x/y | x=2
| %=    | x%=y | x=x%y | x=0 

用于字符串的 + 运算符
+运算符用于把文本值或字符串变量加起来（连接起来）。
如需把两个或多个字符串变量连接起来，请使用 + 运算符。

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
=>What a verynice day

要想在两个字符串之间增加空格，需要把空格插入一个字符串之中：
txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;
=>What a verynice day

或者把空格插入表达式中：
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;
What a verynice day

对字符串和数字进行加法运算
两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串，如下实例：

x=5+5;
y="5"+5;
z="Hello"+5;
=>10
  55
  Hello5
如果把数字与字符串相加，结果将成为字符串！