JavaScript 是互联网上最流行的脚本语言。

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。<script> 和 </script> 之间的代码行包含了 JavaScript代码。也可使用外部JS文件，如

<script src="myScript.js"></script>

JavaScript 显示数据

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

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

JavaScript 操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法

请使用 "id" 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容

<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

JavaScript 语法

JavaScript 字面常量

数字（Number）字面量可以是整数或者是小数，或者是科学计数(e)。

字符串（String）字面量可以使用单引号或双引号:

    "John Doe" 
   
'John Doe'

数组（Array）字面量定义一个数组：

    [40, 100, 1, 5, 25, 10] 
  

对象（Object）字面量定义一个对象：我们通常认为 "JavaScript 对象是键值对的容器"。

    {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"} 
  

函数（Function）字面量定义一个函数：

    function myFunction(a, b) { return a * b;} 
  

JavaScript 变量

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

    var x, length=9 
   
x = 5

JavaScript 变量声明未定义，则值将是 undefined。若重复声明不重复定义，则值将不变。

JavaScript 操作符

类型	实例	描述
赋值，算术和位运算符	= + - * /	在 JS 运算符中描述
条件，比较及逻辑运算符	== != < >	在 JS 比较运算符中描述

JavaScript 注释

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

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

    // 我不会执行 
  

常见的HTML事件

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

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 == 与 === 区别

1、对于 string、number 等基础类型，== 和 === 是有区别的

a）不同类型间比较，== 之比较 "转化成同一类型后的值" 看 "值" 是否相等，=== 如果类型不同，其结果就是不等。
b）同类型比较，直接进行 "值" 比较，两者结果一样。

2、对于 Array,Object 等高级类型，== 和 === 是没有区别的

进行 "指针地址" 比较

3、基础类型与高级类型，== 和 === 是有区别的

a）对于 ==，将高级转化为基础类型，进行 "值" 比较
b）因为类型不同，=== 结果为 false

4、!= 为 == 的非运算，!== 为 === 的非运算

typeof 操作符

你可以使用 typeof 操作符来检测变量的数据类型。可通过 instanceof 操作符来判断对象的具体类型，语法格式:

var result = objectName instanceof objectType

实例

 
   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是一个只有一个值的特殊类型。表示一个空对象引用。

用 typeof 检测 null 返回是object。

undefined

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

typeof 一个没有值的变量会返回 undefined。

undefined 和 null 的区别

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

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

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

constructor 属性

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

使用 constructor 属性来查看对象是否为数组 (包含字符串 "Array"):

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

使用 constructor 属性来查看对象是否为日期 (包含字符串 "Date"):

 
   function isDate(myDate) { 
   
   return myDate.constructor.toString().indexOf( 
   "Date") >  
   -1; 
   
}

将数字转换为字符串

全局方法 String() 可以将数字转换为字符串。String(x)

Number 方法 toString() 也是有同样的效果。x.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) 
  

将字符串转换为数字

全局方法 Number() 可以将字符串转换为数字。

字符串包含数字(如 "3.14") 转换为数字 (如 3.14).

空字符串转换为 0。

其他的字符串会转换为 NaN (不是个数字)。

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

将布尔值转换为数字

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

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

将日期转换为数字

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

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

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

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

JavaScript 正则表达式

使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

语法

/正则表达式主体/修饰符(可选)

其中修饰符是可选的。

    var patt = /runoob/i 
  

实例解析：

/runoob/i 是一个正则表达式。

runoob 是一个正则表达式主体 (用于检索)。

i 是一个修饰符 (搜索不区分大小写)。

方法

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

使用正则表达式搜索 "Runoob" 字符串，且不区分大小写：

 
    var 
      
    str 
     =  
    " 
    Visit Runoob! 
    " 
    ;  
    var 
      
    n 
     =  
    str 
    . 
    search 
    ( 
    / 
    Runoob 
    / 
    i 
    ) 
    ; 
   

输出结果为：

6

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

使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob :

 
    var 
      
    str 
     =  
    document 
    . 
    getElementById 
    ( 
    " 
    demo 
    " 
    ) 
    . 
    innerHTML 
    ;  
    var 
      
    txt 
     =  
    str 
    . 
    replace 
    ( 
    / 
    microsoft 
    / 
    i 
    , 
    " 
    Runoob 
    " 
    ) 
    ; 
   

结果输出为:

    Visit Runoob! 
  

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

以下实例用于搜索字符串中的字符 "e"：

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

字符串中含有 "e"，所以该实例输出为：

    true 
  

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

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

以下实例用于搜索字符串中的字母 "e":

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

字符串中含有 "e"，所以该实例输出为:

e

正则表达式修饰符

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

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

正则表达式模式

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

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

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

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

量词:

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

JavaScript 错误 - throw、try 和 catch

实例

 
    function 
      
    myFunction 
    ( 
    ) 
      
    { 
      
    var 
      
    message 
    ,  
    x 
    ;  
    message 
     =  
    document 
    . 
    getElementById 
    ( 
    " 
    message 
    " 
    ) 
    ;  
    message 
    . 
    innerHTML 
     =  
    " 
    " 
    ;  
    x 
     =  
    document 
    . 
    getElementById 
    ( 
    " 
    demo 
    " 
    ) 
    . 
    value 
    ;  
    try 
      
    { 
      
    if 
    ( 
    x 
     ==  
    " 
    " 
    ) 
      
    throw 
      
    " 
    值为空 
    " 
    ;  
    if 
    ( 
    isNaN 
    ( 
    x 
    ) 
    ) 
      
    throw 
      
    " 
    不是数字 
    " 
    ;  
    x 
     =  
    Number 
    ( 
    x 
    ) 
    ;  
    if 
    ( 
    x 
     <  
    5 
    ) 
      
    throw 
      
    " 
    太小 
    " 
    ;  
    if 
    ( 
    x 
     >  
    10 
    ) 
      
    throw 
      
    " 
    太大 
    " 
    ;  
    } 
      
    catch 
    ( 
    err 
    ) 
      
    { 
      
    message 
    . 
    innerHTML 
     =  
    " 
    错误:  
    " 
     +  
    err 
    ;  
    } 
     
    } 
   

JSON?

JSON 英文全称 JavaScript Object Notation, 是一种轻量级的数据交换格式。JSON 是用于存储和传输数据的格式。JSON 通常用于服务端向网页传递数据。

JSON 数据格式为键/值对，就像 JavaScript 对象属性。键/值对包括字段名称（在双引号中），后面一个冒号，然后是值：

    "name":"Runoob" 
  

JSON 对象保存在大括号内。

    {"name":"Runoob", "url":"www.runoob.com"} 
  

JSON 数组保存在中括号内。

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

函数	描述
JSON.parse()	用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()	用于将 JavaScript 值转换为 JSON 字符串。

javascript:void(0) 含义

void()仅仅是代表不返回任何值，但是括号内的表达式还是要运行

href="#"与href="javascript:void(0)"的区别

# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。

如果你要定义一个死链接请使用 javascript:void(0) 。

Web前端学习——JavaScript知识点