JavaScript知识点总结

1--JavaScript 显示数据

(1)使用 window.alert() 弹出警告框。

(2)使用 document.write() 方法将内容写到 HTML 文档中(ps:如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖)。

(3)使用 innerHTML 写入到 HTML 元素。

(4)使用 console.log() 写入到浏览器的控制台。

2--JavaScript 注释

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

4--JavaScript 数据类型

字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined)
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 通过对象字面量赋值
1.对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:
var person={firstname:"John", lastname:"Doe", id:5566};
对象属性有两种寻址方式:
  • 实例

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

2.Undefined 这个值表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。
3.当您声明新变量时,可以使用关键词 "new" 来声明其类型:

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

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

5--JavaScrip对象

1.对象的方法定义了一个函数,并作为对象的属性存储。

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

例如:

var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
注:如果要访问 person 对象的 fullName 属性(name = person.fullName;),它将作为一个定义函数的字符串返回。

2.你可以使用以下语法创建对象方法:
methodName : function() { code lines }
你可以使用以下语法访问对象方法:
objectName.methodName()
6--JavaScript 变量
1.局部 JavaScript 变量:在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它(该变量的作用域是局部的)。
2.全局 JavaScript 变量:在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
3.JavaScript 变量的生存期:JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
4.如果把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。
5.在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。
注:声明但未赋值的变量,其值实际上是 undefined。
注:如果重新声明 JavaScript 变量,该变量的值不会丢失。
7--JavaScript 事件
常见的HTML事件的列表:
事件                    描述
onchange          HTML 元素改变
onclick               用户点击 HTML 元素
onmouseover    用户在一个HTML元素上移动鼠标
onmouseout      用户从一个HTML元素上移开鼠标
onkeydown        用户按下键盘按键
onload               浏览器已完成页面的加载
HTML 元素中添加事件属性:
8--JavaScript 字符串
下面列举了在字符串中可以使用转义字符转义的特殊字符:
代码    输出
\'       单引号
\"      双引号
\\      反斜杠
\n     换行
\r      回车
\t      tab(制表符)
\b     退格符
\f      换页符
var x = "John";
var y = new String("John");
(x === y) // 结果为 false,因为是x是字符串,y是对象
ps:=== 为绝对相等,即数据类型与值都必须相等
字符串属性
属性               描述
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():返回某个字符串对象的原始值
规则:如果把数字与字符串相加,结果将成为字符串!
9--JavaScript 标签
如需标记 JavaScript 语句,请在语句之前加上冒号:
label:
statements
break 和 continue 语句仅仅是能够跳出代码块的语句。
语法:
break labelname;
continue labelname;
continue 语句(带有或不带标签引用)只能用在循环中。
break 语句(不带标签引用),只能用在循环或 switch 中。
通过标签引用,break 语句可用于跳出任何 JavaScript 代码块。
10--JavaScript typeof, null, 和 undefined
1.可以使用 typeof操作符来检测变量的数据类型(ps:数组是一种特殊的对象类型,如 typeof [1,2,3,4] 返回 object)。
2.null是一个只有一个值的特殊类型,表示一个空对象引用。
3.在 JavaScript 中, undefined 是一个没有设置值的变量。
Undefined 和 Null 的区别

typeof undefined 	// undefined
typeof null 	// object
null === undefined 	// false
null == undefined 		// true
11--JavaScript 类型转换
Number() 转换为数字, String() 转换为字符串, Boolean() 转化为布尔值。
5 种不同的数据类型:string、number、boolean、object、function
3 种对象类型:Object、Date、Array
2 个不包含任何值的数据类型:null、undefined
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] }
数字转换为字符串的方法:
toExponential():把对象的值转换为指数计数法。
toFixed():把数字转换为字符串,结果的小数点后有指定位数的数字。
toPrecision():把数字格式化为指定的长度。
日期转换为字符串的函数:
方法                         描述
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 日至今的毫秒数。
字符串转为数字的方法:
方法                          描述
parseFloat()             解析一个字符串,并返回一个浮点数。
parseInt()                 解析一个字符串,并返回一个整数。
全局方法 Number() 可以将字符串转换为数字。
1.字符串包含数字(如 "3.14") 转换为数字 (如 3.14).
2.空字符串转换为 0。
3.其他的字符串会转换为 NaN (不是个数字)。
一元运算符+可用于将变量转换为数字:
实例
var y = "5"; 	// y 是一个字符串
var x = + y; 	// x 是一个数字
如果变量不能转换,它仍然会是一个数字,但值为 NaN (不是一个数字):
实例
var y = "John"; 	// y 是一个字符串
var x = + y; 	// x 是一个数字 (NaN)
12--JavaScript 正则表达式
1.语法:/pattern/modifiers;
2.在 JavaScript 中,正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法 用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。
replace() 方法 用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
正则表达式修饰符:
修饰符            描述
i                     执行对大小写不敏感的匹配。
g                   执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m                  执行多行匹配。
正则表达式模式
方括号用于查找某个范围内的字符:
[abc] 查找方括号之间的任何字符。
[0-9] 查找任何从 0 至 9 的数字。
(x|y)查找任何以 | 分隔的选项。
元字符是拥有特殊含义的字符:
\d 查找数字。
\s 查找空白字符。
\b 匹配单词边界。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。
量词:
n+:匹配任何包含至少一个 n 的字符串。
n*:匹配任何包含零个或多个 n 的字符串。
n?:匹配任何包含零个或一个 n 的字符串。
在 JavaScript 中,RegExp 对象是一个预定义了属性和方法的正则表达式对象。
test() 方法是一个正则表达式方法,用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。
以下实例用于搜索字符串中的字符 "e",返回true:
var patt = /e/;
patt.test("The best things in life are free!");
exec() 方法是一个正则表达式方法,用于检索字符串中的正则表达式的匹配,该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。
以下实例用于搜索字符串中的字母 "e",返回e:
/e/.exec("The best things in life are free!");
13--JavaScript 错误 - throw、try 和 catch
try:语句测试代码块的错误。
catch:语句处理错误。
throw:语句创建自定义错误。
14--JavaScript 变量提升
hoisting(变量提升):函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。
15--JavaScript 严格模式(use strict)
"use strict" 的目的是指定代码在严格条件下执行。严格模式下你不能使用未声明的变量。
支持严格模式的浏览器: Internet Explorer 10 +、 Firefox 4+ Chrome 13+、 Safari 5.1+、 Opera 12+。
16--JavaScript 使用误区
1.JavaScript 默认是在代码的最后一行自动结束,不用对 return 语句进行断行。
2.JavaScript 不支持使用名字来索引数组,只允许使用数字索引,否则会把数组重新定义为标准对象。
3.在每个代码块中 JavaScript 不会创建一个新的作用域,一般各个代码块的作用域都是全局的
17--JavaScript JSON
JSON 是用于存储和传输数据的格式。
以下 JSON 语法定义了 employees 对象: 3 条员工记录(对象)的数组:
JSON Example
{"employees":[
{"firstName":"John", "lastName":"Doe"}, 
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}
JSON 语法规则:数据为 键/值 对; 数据由逗号分隔; 大括号保存对象; 方括号保存数组。
JSON.parse():用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify():用于将 JavaScript 值转换为 JSON 字符串。
href="#"与href="javascript:void(0)"的区别
# 包含了一个位置信息,默认的锚是#top 也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。
在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id。
命名规则
一般很多代码语言的命名规则都是类似的,例如:
变量和函数为驼峰法( camelCase)
全局变量为大写 (UPPERCASE )
常量 (如 PI) 为大写 (UPPERCASE )
HTML 和 CSS 的横杠(-)字符:
HTML5 属性可以以 data- (如:data-quantity, data-price) 作为前缀。
CSS 使用 - 来连接属性名 (font-size)。
18--JavaScript 函数
1. 在函数表达式存储在变量后,变量也可作为一个函数使用(匿名函数):
实例
var x = function (a, b) {return a * b};
var z = x(4, 3);
2.如果函数在调用时未提供隐式参数,参数会默认设置为undefined(显式参数在函数定义时列出,隐式参数是在函数调用时传递给函数真正的值)。
3.JavaScript 隐式参数通过值来传递:函数仅仅只是获取值。
JavaScript 函数调用
1.在 web 浏览器中全局对象是浏览器窗口(window 对象)。
2.JavaScript 函数有 4 种调用方式(作为一个函数调用, 函数作为方法调用, 使用构造函数调用函数, 作为函数方法调用函数(call() 和 apply()))。
闭包是可访问上一层函数作用域里变量的函数,即便上一层函数已经关闭。
19--JS HTML DOM
1.改变HTML内容:document.getElementById(id).innerHTML=新的HTML
2.改变HTML属性:document.getElementById(id).attribute=新属性值
3.改变HTML样式:document.getElementById(id).style.property=新样式
4.HTML DOM事件:onload 和 onunload 事件,onchange 事件,onmouseover 和 onmouseout 事件,onmousedown、onmouseup 以及 onclick 事件
5.事件监听:element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素。
在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件。
注:addEventListener() 方法允许向同个元素添加多个事件,且不会覆盖已存在的事件。
20--JavaScript Number 对象
1.所有 JavaScript 数字均为 64 位浮点数
2.可以使用 toString() 方法 输出16进制、8进制、2进制数字。
实例
var myNumber=128;
myNumber.toString(16); // 返回 80
myNumber.toString(8); // 返回 200
myNumber.toString(2); // 返回 10000000
3.无穷大(Infinity),NaN - 非数字值(可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值)。
21--JavaScript 字符串(String) 对象
1.使用长度属性length来计算字符串的长度。
2.使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置(lastIndexOf() 方法在字符串末尾开始查找字符串出现的位置)。
3.match()函数用来查找字符串中特定的字符,并且如果找到的话,则返回这个字符。
4.replace() 方法在字符串中用某些字符替换另一些字符。
5.字符串大小写转换使用函数 toUpperCase() / toLowerCase()。
6.字符串使用split()函数转为数组。
22--JavaScript Array(数组) 对象
1.所有的JavaScript变量都是对象,因此,可以在数组中有不同的变量类型。
23--JavaScript RegExp 对象
1.语法
var patt=new RegExp(pattern,modifiers);
或更简单的方法
var patt=/pattern/modifiers;
模式描述了一个表达式模型。
修饰符(modifiers)描述了检索是否是全局,区分大小写等。
i - 修饰符是用来执行不区分大小写的匹配。
g - 修饰符是用于执行全文的搜索(而不是在找到第一个就停止查找,而是找到所有的匹配)。
2. test()方法搜索字符串指定的值,根据结果并返回真或假。
3.exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。
24--JavaScript浏览器BOM
1.浏览器窗口的内部高度(Internet Explorer、Chrome、Firefox、Opera 以及 Safari),document.documentElement.clientHeight / document.body.clientHeight(Internet Explorer 8、7、6、5)。
2.window.screen 对象包含有关用户屏幕的信息,screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏。
3.window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
location.href 属性返回当前页面的 URL。
location.pathname 属性返回 URL 的路径名。
location.assign() 方法加载新的文档。
4.window.history 对象包含浏览器的历史。
history.back() 方法加载历史列表中的前一个 URL,这与在浏览器中点击后退按钮是相同的。
history forward() 方法加载历史列表中的下一个 URL,这与在浏览器中点击前进按钮是相同的。
5.window.navigator 对象包含有关访问者浏览器的信息(警告:来自 navigator 对象的信息具有误导性,不应该被用于检测浏览器版本)。
6. JavaScript 中创建三种消息框:警告框、确认框、提示框。
alert()方法;
confirm()方法,点击 "确认", 确认框返回 true, 点击 "取消", 确认框返回 false;
prompt()方法,当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵,确认返回值为输入的值,取消返回值为 null。
7.JavaScript 计时事件。
setInterval() - 间隔指定的毫秒数不停地执行指定的代码(clearInterval() 方法用于停止 setInterval() 方法执行的函数代码)。
setTimeout() - 暂停指定的毫秒数后执行指定的代码(clearTimeout() 方法用于停止执行setTimeout()方法的函数代码)。
8.Cookies 用于存储 客户端web 页面的用户信息。
使用 document.cookie 属性来创建、读取、及删除 cookies(设置 expires 参数为以前的时间),Cookies 以名/值对形式存储。


你可能感兴趣的:(JavaScript)