紫薇星上的JS

本文章部分观点引之www.baidu.comwww.runoob.com

学完了HTML与CSS之后当然是继续学习JavaScript,不过学习的时候一直有人告诉我JS和Java不是一个东西,所以还是怀着求知的心情去学习的,学完后发现JS与Java还是非常像的,不知道是不是因为ECMAScriot5更新的原因。

总之对于未接触过面向对象的同学学起来还是有点困难的,这也印证了我先学C、Java再学其他的就会上手快许多的想法。

这篇文章不会像之前的系列一样用大量的篇幅去详细的说明一些知识点,毕竟当今时代信息这么发达,我会将其中不同的,重点的详细说明,但是一些简单的,基础的知识点我就一笔带过。

本质上这篇文章和前几篇的HTML、CSS是有点像的,都是作为我的一个知识索引,好了,我们开始吧!


JavaScript

JavaScript是一种轻量级的脚本语言,也是一种嵌入式语言,是一种对象模型的语言,简称JS,语法包括:

  • 基本的语法构造(操作符、控制结构、语句等)
  • 标准库(操作符、控制结构、语句)

如果要使用实现其他复杂的操作和效果,要依靠宿主环境提供的API,最常见的就是浏览器,还有服务环境。

JavaScript用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间,脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中,或者同时存在于两个部分中:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>demo</title>
    <script>
        document.write("<h1>这是一个标题</h1>");
    </script>	
</head>
<body>
    <script>
        document.write("<p>这是一个段落。</p>");
    </script>
</body>
</html>

通常的做法是把函数放入 <head> 部分中或者放在页面底部,这样就可以把它们安置到同一处位置,不会干扰页面的内容;

也可以把脚本保存到外部文件中,外部文件通常包含被多个网页使用的代码,外部 JavaScript 文件的文件扩展名是 .js,如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"> 
    <title>demo</title> 
</head>
<body>
    <script src="myScript.js"></script>
</body>
</html>

可以将脚本放置于 <head> 或者 <body>中,放在 <script> 标签中的脚本与外部引用的脚本运行效果完全一致,外部脚本不能包含 <script> 标签。

JavaScript输出

JavaScript 没有任何打印或者输出的函数,JavaScript 可以通过不同的方式来输出数据:

  • 使用 window.alert() 弹出警告框:window.alert(5 + 6);
  • 使用 document.write() 方法将内容写到 HTML 文档中:document.getElementById("id").innerHTML = "文本";
  • 使用 innerHTML 写入到 HTML 元素:document.write(Date());
  • 使用 console.log() 写入到浏览器的控制台:console.log(Date());

JavaScript语法

JavaScript字面量

在编程语言中,一般固定值称为字面量,如 3.14。

数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e):3.14

字符串(String)字面量 可以使用单引号或双引号:"Hello" 'world'

表达式字面量 用于计算:5+6

数组(Array)字面量 定义一个数组:[40, 100, 1, 5, 25, 10]

对象(Object)字面量 定义一个对象:{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数(Function)字面量 定义一个函数:function myFunction(a, b) { return a * b;}

JavaScript变量

在编程语言中,变量用于存储数据值。

JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值:

var a;
var b = 1;
var c = "zijun";
var d = 'ziweixing';

变量是一个名称,字面量是一个值,变量可以通过变量名访问。在指令式语言中,变量通常是可变的,字面量是一个恒定的值。

JavaScript 操作符

JavaScript使用 算术运算符 来计算值:5+6*10

JavaScript使用赋值运算符给变量赋值:x = y + 5

JavaScript 语句

在 HTML 中,JavaScript 语句向浏览器发出的命令,语句用分号分隔:

var a = 1;
var b = a + 2;

JavaScript 关键字

JavaScript 关键字用于标识要执行的操作,和其他任何编程语言一样,JavaScript 保留了一些关键字为自己所用,以下是 JavaScript 中最​​重要的保留字(按字母顺序):

abstractelseinstanceofsuper
booleanenumintswitch
breakexportinterfacesynchronized
byteextendsletthis
casefalselongthrow
catchfinalnativethrows
charfinallynewtransient
classfloatnulltrue
constforpackagetry
continuefunctionprivatetypeof
debuggergotoprotectedvar
defaultifpublicvoid
deleteimplementsreturnvolatile
doimportshortwhile
doubleinstaticwith

这些关键字在当前的语言版本中并没有使用,但在以后 JavaScript 扩展中会用到。

JavaScript 注释

不是所有的 JavaScript 语句都是"命令",双斜杠 // 后的内容将会被浏览器忽略:

//注释内容

或多行注释:

/*
注释
内容
*/

JavaScript 数据类型

JavaScript 有多种数据类型:数字,字符串,数组,对象等等。

JavaScript 函数

JavaScript 语句可以写在函数内,函数可以重复引用:引用一个函数 = 调用函数(执行函数内的语句)。

JavaScript 字母大小写

JavaScript 对大小写是敏感的,当编写 JavaScript 语句时,请留意是否关闭大小写切换键;

函数 getElementById 与 getElementbyID 是不同的,同样,变量 myVariable 与 MyVariable 也是不同的。

JavaScript 字符集

JavaScript 使用 Unicode 字符集,Unicode 覆盖了所有的字符,包含标点等字符。

JavaScript语句

JavaScript 语句是发给浏览器的命令,这些命令的作用是告诉浏览器要做的事情;

分号用于分隔 JavaScript 语句,通常在每条可执行的语句结尾添加分号,使用分号的另一用处是在一行中编写多条语句;

JavaScript 代码是 JavaScript 语句的序列,浏览器按照编写顺序依次执行每条语句;

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

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 会忽略多余的空格,可以向脚本添加空格,来提高其可读性;

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

JavaScript 是脚本语言,浏览器会在读取代码时,逐行地执行脚本代码;而对于传统编程来说,会在执行前对所有代码进行编译。

JavaScript变量

变量是用于存储信息的"容器",在代数中,我们使用字母(比如 x)来保存值(比如 5),通过表达式y = x + 3,我们能够计算出 y 的值为 8,在 JavaScript 中,这些字母被称为变量。

与代数一样,JavaScript 变量可用于存放值(比如 x=5)和表达式(比如 z=x+y)。

变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。

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

JavaScript语句和变量都对大小写敏感。

JavaScript 数据类型

JavaScript 变量还能保存其他数据类型,比如文本值 (name="Bill Gates"),在 JavaScript 中,类似 "Bill Gates" 这样一条文本被称为字符串;

JavaScript 变量有很多种类型,但是现在我们只关注数字和字符串:

当向变量分配文本值时,应该用双引号或单引号包围这个值;

当向变量赋的值是数值时,不要使用引号,如果用引号包围数值,该值会被作为文本来处理。

声明(创建) JavaScript 变量

在 JavaScript 中创建变量通常称为"声明"变量,使用 var 关键词来声明变量:var a;

变量声明之后,该变量是空的(它没有值),如需向变量赋值,请使用等号:a = 1;

不过,也可以在声明变量时对其赋值:var a = 1;

可以在一条语句中声明很多变量,该语句以 var 开头,并使用逗号分隔变量即可:var a = 1, b = 2;

一个好的编程习惯是,在代码开始处,统一对需要的变量进行声明。

Value = undefined

在计算机程序中,经常会声明无值的变量,未使用值来声明的变量,其值实际上是 undefined,在执行过以下语句后,变量 carname 的值将是 undefined:var carname;

重新声明 JavaScript 变量

如果重新声明 JavaScript 变量,该变量的值不会丢失,在以下两条语句执行后,变量 carname 的值依然是 "Volvo":

var carname = "Volvo";
var caename;

JavaScript 算数

可以通过 JavaScript 变量来做算数,使用的是 = 和 + 这类运算符。

JavaScript 数据类型

值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol;

引用数据类型:对象(Object)、数组(Array)、函数(Function);

Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值。

JavaScript 拥有动态类型,这意味着相同的变量可用作不同的类型:

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

字符串(String)

字符串是存储字符(比如 "Bill Gates")的变量,字符串可以是引号中的任意文本;

可以使用单引号或双引号,也可以在字符串中使用引号,只要不匹配包围字符串的引号即可;

数字(Number)

JavaScript 只有一种数字类型,数字可以带小数点,也可以不带;极大或极小的数字可以通过科学(指数)计数法来书写;

布尔(Boolean)

布尔(逻辑)只能有两个值:true 或 false;

数组(Array)

下面的代码创建名为 cars 的数组:

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

数组下标是基于零的,所以第一个项目是 [0],第二个是 [1],以此类推;

对象(Object)

对象由花括号分隔,在括号内部,对象的属性以名称和值对的形式 (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"];

对空(Null)、未定义(Undefined)

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

声明变量类型

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

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

JavaScript对象

 "JavaScript 对象是变量的容器",但是我们通常认为 "JavaScript 对象是键值对的容器";

键值对通常写法为 name : value (键与值以冒号分割),键值对在 JavaScript 对象通常称为 对象属性;

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

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

对象方法

对象的方法定义了一个函数,并作为对象的属性存储,对象方法通过添加 () 调用 (作为一个函数);

该实例访问了 person 对象的 fullName() 方法:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"> 
    <title>demo</title> 
</head>
<body>
    <p>创建和使用对象方法。</p>
    <p>对象方法作为一个函数定义存储在对象属性中。</p>
    <p id="demo"></p>
    <script>
        var person = {
            firstName: "John",
            lastName : "Doe",
            id : 5566,
            fullName : function() {
               return this.firstName + " " + this.lastName;
            }
        };
        document.getElementById("demo").innerHTML = person.fullName();
    </script>
</body>
</html>

如果要访问 person 对象的 fullName 属性,它将作为一个定义函数的字符串返回:

 <script>
        var person = {
            firstName: "John",
            lastName : "Doe",
            id : 5566,
            fullName : function() {
               return this.firstName + " " + this.lastName;
            }
        };
        document.getElementById("demo").innerHTML = person.fullName;
</script>

JavaScript函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块;

JavaScript 函数语法

函数就是包裹在花括号中的代码块,前面使用了关键词 function:

function functionname(){
    // 执行代码
}

当调用该函数时,会执行函数内的代码,可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。

JavaScript 对大小写敏感,关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。

调用带参数的函数

在调用函数时,可以向其传递值,这些值被称为参数,这些参数可以在函数中使用,可以发送任意多的参数由逗号分隔,当声明函数时,请把参数作为变量来声明:

function myFunction(var1,var2){
    //代码
}

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。

带有返回值的函数

有时,我们会希望函数将值返回调用它的地方,通过使用 return 语句就可以实现,在使用 return 语句时,函数会停止执行,并返回指定的值。

局部 JavaScript 变量

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

全局 JavaScript 变量

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

JavaScript 变量的生存期

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

向未声明的 JavaScript 变量分配值

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

JavaScript事件

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

HTML 事件

HTML 事件可以是浏览器行为,也可以是用户行为,以下是 HTML 事件的实例:

  • HTML 页面完成加载
  • HTML input 字段改变时
  • HTML 按钮被点击

通常,当事件发生时,你可以做些事情,在事件触发时 JavaScript 可以执行一些代码;

HTML 元素中可以添加事件属性,使用 JavaScript 代码来添加 HTML 元素;

下面是一些常见的HTML事件的列表:

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

JavaScript 可以做什么?

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

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

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

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

JavaScript字符串

JavaScript 字符串用于存储和处理文本,字符串可以存储一系列字符,如 "John Doe",字符串可以是插入到引号中的任何字符,可以使用单引号或双引号;

可以使用索引位置来访问字符串中的每个字符:字符串的索引从 0 开始,这意味着第一个字符索引值为 [0],第二个为 [1], 以此类推,可以在字符串中使用引号,字符串中的引号不要与字符串的引号相同,也可以在字符串添加转义字符来使用引号;

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

在 JavaScript 中,字符串写在单引号或双引号中,所以以下实例 JavaScript 无法解析:

 "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回车
\ttab(制表符)
\b退格符
\f换页符

通常, JavaScript 字符串是原始值,可以使用字符创建: var firstName = "John",但我们也可以使用 new 关键字将字符串定义为一个对象: var firstName = new String("John")。不要创建 String 对象,它会拖慢执行速度并可能产生其他副作用。

字符串属性与方法

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

属性描述
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 算术运算符

运算符描述例子x 运算结果y 运算结果
+加法x=y+275
-减法x=y-235
*乘法x=y*2105
/除法x=y/22.55
%取模(余数)x=y%215
++自增x=++y66
x=y++56
--自减x=--y44
x=y--54

JavaScript 赋值运算符

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

两个数字相加,返回数字相加的和,如果数字与字符串相加,返回字符串;

JavaScript 比较 和 逻辑运算符

比较运算符

运算符描述比较返回值
==等于x==8false
x==5true
===绝对等于(值和类型均相等)x==="5"false
x===5true
!= 不等于x!=8true
!== 不绝对等于(值和类型有一个不相等,或两个都不相等)x!=="5"true
x!==5false
> 大于x>8false
< 小于x<8true
>= 大于或等于x>=8false
<= 小于或等于x<=8true

逻辑运算符

运算符描述例子
&&and(x < 10 && y > 1) 为 true
||or(x==5 || y==5) 为 false
!not!(x==y) 为 true

条件运算符

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符:variablename=(condition)?value1:value2 

一些常见的语句

JavaScript if...Else 语句

通常在写代码时,总是需要为不同的决定来执行不同的动作,可以在代码中使用条件语句来完成该任务,在 JavaScript 中,我们可使用以下条件语句:

  • if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
  • if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
  • if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
  • switch 语句 - 使用该语句来选择多个代码块之一来执行

JavaScript switch 语句

switch 语句用于基于不同的条件来执行不同的动作:

switch(n){
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

JavaScript for 循环

循环可以将代码块执行指定的次数:

<script>
    cars=["BMW","Volvo","Saab","Ford"];
    for (var i=0;i<cars.length;i++){
    	document.write(cars[i] + "<br>");
    }
</script>

For/In 循环

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

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

JavaScript while 循环

只要指定条件为 true,循环就可以一直执行代码块:

while (条件){
    //需要执行的代码
}

do/while 循环

do/while 循环是 while 循环的变体,该循环会在检查条件是否为真之前执行一次代码块,然后如果条件为真的话,就会重复这个循环:

do{
    //需要执行的代码
}
while (条件);

JavaScript break 和 continue 语句

break 语句用于跳出循环、continue 用于跳过循环中的一个迭代,如果在break或continue后面加上一个标签,那就代表跳出这个标签所在的代码块。

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来清空对象;

undefined

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

undefined 和 null 的区别

null 和 undefined 的值相等,但类型不等:

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

JavaScript 类型转换

在 JavaScript 中有 6 种不同的数据类型:

  • string
  • number
  • boolean
  • object
  • function
  • symbol

3 种对象类型:

  • Object
  • Date
  • Array

2 个不包含任何值的数据类型:

  • null
  • undefined

请注意:

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

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

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

JavaScript 类型转换

JavaScript 变量可以转换为新变量或其他数据类型:

  • 通过使用 JavaScript 函数
  • 通过 JavaScript 自身自动转换

将数字转换为字符串

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

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

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

x.toString()
(123).toString()
(100 + 23).toString()
方法描述
toExponential()把对象的值转换为指数计数法。
toFixed()把数字转换为字符串,结果的小数点后有指定位数的数字。
toPrecision()把数字格式化为指定的长度。

将布尔值转换为字符串

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

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

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

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

将日期转换为字符串

Date() 返回字符串:

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

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

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

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

obj = new Date()
obj.toString()   // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
方法描述
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()解析一个字符串,并返回一个整数。

一元运算符 +

Operator + 可用于将变量转换为数字:

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

如果变量不能转换,它仍然会是一个数字,但值为 NaN (不是一个数字):

var y = "John";   // y 是一个字符串
var x = + y;      // x 是一个数字 (NaN)

将布尔值转换为数字

全局方法 Number() 可将布尔值转换为数字:

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

将日期转换为数字

全局方法 Number() 可将日期转换为数字:

d = new Date();
Number(d)          // 返回 1404568027739

日期方法 getTime() 也有相同的效果:

d = new Date();
d.getTime()        // 返回 1404568027739

自动转换类型

当 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"
原始值转换为数字转换为字符串转换为布尔值
false0"false"false
true1"true"true
00"0"false
11"1"true
"0"0"0"true
"000"0"000"true
"1"1"1"true
NaNNaN"NaN"false
InfinityInfinity"Infinity"true
-Infinity-Infinity"-Infinity"true
""0""false
"20"20"20"true
"Runoob"NaN"Runoob"true
[ ]0""true
[20]20"20"true
[10,20]NaN"10,20"true
["Runoob"]NaN"Runoob"true
["Runoob","Google"]NaN"Runoob,Google"true
function(){}NaN"function(){}"true
{ }NaN"[object Object]"true
null0"null"false
undefinedNaN"undefined"false

JavaScript 正则表达式

正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式,搜索模式可用于文本搜索和文本替换。

什么是正则表达式?

正则表达式是由一个字符序列形成的搜索模式,当你在文本中搜索数据时,你可以用搜索模式来描述你要查询的内容,正则表达式可以是一个简单的字符,或一个更复杂的模式,正则表达式可用于所有文本搜索和文本替换的操作。

语法:/正则表达式主体/修饰符(可选),其中修饰符是可选的。

使用字符串方法

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

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

//使用正则表达式
var str = "Visit CSDN!"; 
var n = str.search(/CSDN/i);

//使用字符串
var str = "Visit CSDN!"; 
var n = str.search("CSDN");

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

//使用正则表达式
var str = document.getElementById("demo").innerHTML; 
var txt = str.replace(/microsoft/i,"CSDN");

//使用字符串
var str = document.getElementById("demo").innerHTML; 
var txt = str.replace("Microsoft","CSDN");

正则表达式修饰符

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

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

正则表达式模式

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

表达式描述
[abc]查找方括号之间的任何字符。
[0-9]查找任何从 0 至 9 的数字。
(x|y)查找任何以 | 分隔的选项。

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

元字符描述
\d查找数字。
\s查找空白字符。
\b匹配单词边界。
\uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。

量词:

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

使用 RegExp 对象

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

使用 test()

test() 方法是一个正则表达式方法,test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。以下实例用于搜索字符串中的字符 "e":

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

使用 exec()

exec() 方法是一个正则表达式方法,exec() 方法用于检索字符串中的正则表达式的匹配,该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。以下实例用于搜索字符串中的字母 "e":

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

JavaScript 错误 - throw、try 和 catch

  • try 语句测试代码块的错误。
  • catch 语句处理错误。
  • throw 语句创建自定义错误。
  • finally 语句在 try 和 catch 语句之后,无论是否有触发异常,该语句都会执行。

JavaScript 错误

当 JavaScript 引擎执行 JavaScript 代码时,会发生各种错误:可能是语法错误,通常是程序员造成的编码错误或错别字;可能是拼写错误或语言中缺少的功能(可能由于浏览器差异);可能是由于来自服务器或用户的错误输出而导致的错误;当然,也可能是由于许多其他不可预知的因素。

JavaScript 抛出(throw)错误

当错误发生时,当事情出问题时,JavaScript 引擎通常会停止,并生成一个错误消息,描述这种情况的技术术语是:JavaScript 将抛出一个错误。

JavaScript try 和 catch 和 finally

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

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

finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块;

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

try {
    ...    //异常的抛出
} catch(e) {
    ...    //异常的捕获与处理
} finally {
    ...    //结束处理
}

Throw 语句

throw 语句允许我们创建自定义错误,正确的技术术语是:创建或抛出异常(exception),如果把 throw 与 try 和 catch 一起使用,那么能够控制程序流,并生成自定义的错误消息;

语法:throw exception,异常可以是 JavaScript 字符串、数字、逻辑值或对象。

JavaScript 变量提升

JavaScript 中,函数及变量的声明都将被提升到函数的最顶部,JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明。

以下两个实例将获得相同的结果:

x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 x

var x; // 声明 x
var x; // 声明 x
x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 x

要理解以上实例就需要理解 "hoisting(变量提升)":函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

JavaScript 初始化不会提升

JavaScript 只有声明的变量会提升,初始化的不会,以下两个实例结果结果不相同:

var x = 5; // 初始化 x
var y = 7; // 初始化 y

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 y
var x = 5; // 初始化 x

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 y

var y = 7; // 初始化 y

下面的例子中 y 输出了 undefined,这是因为变量声明 (var y) 提升了,但是初始化(y = 7) 并不会提升,所以 y 变量是一个未定义的变量。

在头部声明你的变量

对于大多数程序员来说并不知道 JavaScript 变量提升,如果程序员不能很好的理解变量提升,他们写的程序就容易出现一些问题,为了避免这些问题,通常我们在每个作用域开始前声明这些变量,这也是正常的 JavaScript 解析步骤,易于我们理解。

JavaScript 严格模式(use strict)

JavaScript 严格模式(strict mode)即在严格的条件下运行。

使用 "use strict" 指令

"use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增,它不是一条语句,但是是一个字面量表达式,在 JavaScript 旧版本中会被忽略。"use strict" 的目的是指定代码在严格条件下执行,严格模式下不能使用未声明的变量。

支持严格模式的浏览器:Internet Explorer 10 +、 Firefox 4+ Chrome 13+、 Safari 5.1+、 Opera 12+。

严格模式声明

严格模式通过在脚本或函数的头部添加 "use strict"; 表达式来声明:

<script>
    "use strict";
    x = 3.14;       // 报错 (x 未定义)
</script>

在函数内部声明是局部作用域 (只在函数内使用严格模式):

x = 3.14;       // 不报错
myFunction();

function myFunction() {
   "use strict";
    y = 3.14;   // 报错 (y 未定义)
}

为什么使用严格模式?

  • 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;
  • 消除代码运行的一些不安全之处,保证代码运行的安全;
  • 提高编译器效率,增加运行速度;
  • 为未来新版本的Javascript做好铺垫。

"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向,包括IE 10在内的主流浏览器,都已经支持它,许多大项目已经开始全面拥抱它。

另一方面,同样的代码,在"严格模式"中,可能会有不一样的运行结果;一些在"正常模式"下可以运行的语句,在"严格模式"下将不能运行。掌握这些内容,有助于更细致深入地理解Javascript,让你变成一个更好的程序员。

严格模式的限制

不允许使用未声明的变量,对象也是一个变量;

不允许删除变量或对象;

不允许删除函数;

不允许变量重名;

不允许使用八进制;

不允许使用转义字符;

不允许对只读属性赋值;

不允许对一个使用getter方法读取的属性进行赋值;

不允许删除一个不允许删除的属性;

变量名不能使用 "eval" 字符串;

变量名不能使用 "arguments" 字符串;

不允许使用这种语句:with (Math){x = cos(2)}; // 报错

由于一些安全原因,在作用域 eval() 创建的变量不能被调用;

禁止this关键字指向全局对象,因此,使用构造函数时,如果忘了加new,this不再指向全局对象,而是报错。

保留关键字

为了向将来Javascript的新版本过渡,严格模式新增了一些保留关键字:

  • implements
  • interface
  • let
  • package
  • private
  • protected
  • public
  • static
  • yield

    "use strict" 指令只允许出现在脚本或函数的开头。

JavaScript 保留关键字

Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。

abstractargumentsbooleanbreakbyte
casecatchcharclass*const
continuedebuggerdefaultdeletedo
doubleelseenum*evalexport*
extends*falsefinalfinallyfloat
forfunctiongotoifimplements
import*ininstanceofintinterface
letlongnativenewnull
packageprivateprotectedpublicreturn
shortstaticsuper*switchsynchronized
thisthrowthrowstransienttrue
trytypeofvarvoidvolatile
whilewithyield 

* 标记的关键字是 ECMAScript5 中新添加的。

JavaScript 对象、属性和方法

应该避免使用 JavaScript 内置的对象、属性和方法的名称作为 Javascript 的变量或函数名:

ArrayDateevalfunctionhasOwnProperty
InfinityisFiniteisNaNisPrototypeOflength
MathNaNnameNumberObject
prototypeStringtoStringundefinedvalueOf

Java关键字

JavaScript 经常与 Java 一起使用。您应该避免使用一些 Java 对象和属性作为 JavaScript 标识符:

getClassjavaJavaArrayjavaClassJavaObjectJavaPackage

Windows 保留关键字

JavaScript 可以在 HTML 外部使用,它可在许多其他应用程序中作为编程语言使用。

在 HTML 中,必须(为了可移植性,您也应该这么做)避免使用 HTML 和 Windows 对象和属性的名称作为 Javascript 的变量及函数名:

alertallanchoranchorsarea
assignblurbuttoncheckboxclearInterval
clearTimeoutclientInformationcloseclosedconfirm
constructorcryptodecodeURIdecodeURIComponentdefaultStatus
documentelementelementsembedembeds
encodeURIencodeURIComponentescapeeventfileUpload
focusformformsframeinnerHeight
innerWidthlayerlayerslinklocation
mimeTypesnavigatenavigatorframesframeRate
hiddenhistoryimageimagesoffscreenBuffering
openopeneroptionouterHeightouterWidth
packagespageXOffsetpageYOffsetparentparseFloat
parseIntpasswordpkcs11pluginprompt
propertyIsEnumradioresetscreenXscreenY
scrollsecureselectselfsetInterval
setTimeoutstatussubmittainttext
textareatopunescapeuntaintwindow

HTML 事件句柄

除此之外,还应该避免使用 HTML 事件句柄的名称作为 Javascript 的变量及函数名:

onbluronclickonerroronfocus
onkeydownonkeypressonkeyuponmouseover
onloadonmouseuponmousedownonsubmit

非标准 JavaScript

除了保留关键字,在 JavaScript 实现中也有一些非标准的关键字;

一个实例是 const 关键字,用于定义变量, 一些 JavaScript 引擎把 const 当作 var 的同义词,另一些引擎则把 const 当作只读变量的定义;

Const 是 JavaScript 的扩展,JavaScript 引擎支持它用在 Firefox 和 Chrome 中,但是它并不是 JavaScript 标准 ES3 或 ES5 的组成部分,建议:不要使用它

JavaScript this 关键字

面向对象语言中 this 表示当前对象的一个引用,但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。

  • 在方法中,this 表示该方法所属的对象。
  • 如果单独使用,this 表示全局对象。
  • 在函数中,this 表示全局对象。
  • 在函数中,在严格模式下,this 是未定义的(undefined)。
  • 在事件中,this 表示接收事件的元素。
  • 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

方法中的 this

在对象方法中 this 指向调用它所在方法的对象;

单独使用 this

单独使用 this,则它指向全局(Global)对象,在浏览器中 window 就是该全局对象为 [object Window];

严格模式下,如果单独使用,this 也是指向全局(Global)对象;

函数中使用 this(默认)

在函数中,函数的所属者默认绑定到 this 上,在浏览器中,window 就是该全局对象为 [object Window];

严格模式下函数是没有绑定到 this 上,这时候 this 是 undefined;

事件中的 this

在 HTML 事件句柄中,this 指向了接收事件的 HTML 元素;

对象方法中绑定

下面实例中,this 是 person 对象,person 对象是函数的所有者:

var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

this.firstName 表示 this (person) 对象的 firstName 属性。

显式函数绑定

在 JavaScript 中函数也是对象,对象则有方法,apply 和 call 就是函数对象的方法,这两个方法异常强大,他们允许切换函数执行的上下文环境(context),即 this 绑定的对象;

在下面实例中,当我们使用 person2 作为参数来调用 person1.fullName 方法时, this 将指向 person2, 即便它是 person1 的方法:

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"John",
  lastName: "Doe",
}
person1.fullName.call(person2);  // 返回 "John Doe"

JavaScript let 和 const

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const:let 声明的变量只在 let 命令所在的代码块内有效、const 声明一个只读的常量,一旦声明,常量的值就不能改变。

在 ES6 之前,JavaScript 只有两种作用域: 全局变量 与 函数内的局部变量

const定义常量与使用let 定义的变量相似:

  • 二者都是块级作用域
  • 都不能和它所在作用域内的其他变量或函数拥有相同的名称

两者还有以下两点区别:

  • const声明的常量必须初始化,而let声明的变量不用
  • const 定义常量的值不能通过再赋值修改,也不能再次声明。而 let 定义的变量值可以修改。

JavaScript JSON

JSON 是用于存储和传输数据的格式,JSON 通常用于服务端向网页传递数据 。

什么是 JSON?

  • JSON 英文全称 JavaScript Object Notation
  • JSON 是一种轻量级的数据交换格式。
  • JSON是独立的语言 *
  • JSON 易于理解。

JSON 使用 JavaScript 语法,但是 JSON 格式仅仅是一个文本,文本可以被任何编程语言读取及作为数据格式传递:

{"sites":[
    {"name":"CSDN", "url":"www.csdn.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]}

JSON 格式化后为 JavaScript 对象

JSON 格式在语法上与创建 JavaScript 对象代码是相同的,由于它们很相似,所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。

JSON 语法规则

  • 数据为 键/值 对。
  • 数据由逗号分隔。
  • 大括号保存对象
  • 方括号保存数组

JSON 数据 - 一个名称对应一个值

JSON 数据格式为 键/值 对,就像 JavaScript 对象属性,键/值对包括字段名称(在双引号中),后面一个冒号,然后是值:

"name":"zijun"

JSON 对象

JSON 对象保存在大括号内,就像在 JavaScript 中, 对象可以保存多个 键/值 对:

{"name":"zijun", "url":"www.csdn.com"}

JSON 数组

JSON 数组保存在中括号内,就像在 JavaScript 中, 数组可以包含对象:

"sites":[
    {"name":"CSDN", "url":"www.csdn.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]

在以上实例中,对象 "sites" 是一个数组,包含了三个对象,每个对象为站点的信息(网站名和网站地址)。

JSON 字符串转换为 JavaScript 对象

通常我们从服务器中读取 JSON 数据,并在网页中显示数据,简单起见,我们网页中直接设置 JSON 字符串:

首先,创建 JavaScript 字符串,字符串为 JSON 格式的数据:

var text = '{ "sites" : [' +
'{"name":"CSDN", "url":"www.csdn.com"},' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

然后,使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

var obj = JSON.parse(text);

最后,在你的页面中使用新的 JavaScript 对象:

document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
函数描述
JSON.parse()用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()用于将 JavaScript 值转换为 JSON 字符串。

JS就先整理到这里,基本上学会了HTML和CSS后就可以做出很漂亮的页面了,学会JS之后就可以真正实现页面的活动,过几天应该用学到的知识做一些小案例,我们下次见👋

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值