JavaScript 与 Java 是两种完全不同的语言,无论在概念上还是设计上。
DOM(Document Object Model):JavaScript操作网页上的元素(标签)的API
BOM(Browser Object Model):JavaScript操作浏览器的部分功能的API
2015 ECMAScript 6 添加类和模块
2016 ECMAScript 7 增加指数运算符 (**)
增加 Array.prototype.includes
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
<script src="myScript.js"></script>
B-S架构就是浏览器和服务器之间的通讯,服务器负责处理一个个的api,浏览器负责处理页面的效果。前端一个项目,后端一个项目,两个项目之间通过api通信。
this 指向问题:
- 有对象就指向调用对象(obj)
- 没调用对象就指向全局对象(window)
- 用new构造就指向新对象
- 通过 apply 或 call 或 bind 来改变 this 的所指。
JavaScript 代码规范
变量名推荐使用驼峰法来命名(camelCase),三种变量命名规则:
var firstName='king';//小驼峰
var FirstName='queen';//大驼峰
var first_name='maizi';//下划线法
- 变量和函数为驼峰法( camelCase)
- 全局变量为大写 (UPPERCASE )
- 常量 (如 PI) 为大写 (UPPERCASE )
- 通常运算符 ( = + - * / ) 前后需要添加空格.
- 通常使用 4 个空格符号来缩进代码块.
- 一条语句通常以分号作为结束符。
- JavaScript 关键字必须以字母、下划线(_)或美元符($)开始。
- JavaScript 对大小写是敏感的。常见的是驼峰法的命名规则。
对象定义的规则:
- 冒号与属性值间有个空格。
- 字符串使用双引号,数字不需要。
- 最后一个属性-值对后面不要添加逗号。
- 将右花括号独立放在一行,并以分号作为结束符号。
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
对象只是一种特殊的数据。对象拥有属性和方法。
方法只不过是附加在对象上的函数。
单行注释以 // 开头。 多行注释以 /* 开始,以 */ 结尾。
数组可以用一个变量名存储所有的值,并且可以用变量名访问任何一个值。
数组中的每个元素都有自己的的ID,以便它可以很容易地被访问到。
http://www.runoob.com/js/js-obj-array.html 点击查看数组实例常量使用方法: Math.PI Math.SQRT2
JavaScript 可以通过不同的方式来输出数据:
- 使用 window.alert() 弹出警告框。 window.alert(5 + 6);
- 使用 document.write() 方法将内容写到 HTML 文档中。
document.write(Date());
- 使用 innerHTML 写入到 HTML 元素。
document.getElementById("demo").innerHTML = "段落已修改";
- 使用 console.log() 写入到浏览器的控制台。
c = 5; console.log(c);
在编程语言中,一般固定值称为字面量,如 3.14。
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 通过对象字面量赋值
JavaScript 变量
变量是用于存储信息的"容器"。
一个好的编程习惯是,在代码开始处,统一对需要的变量进行声明。
未使用值来声明的变量,其值实际上是 undefined。
JavaScript 数据类型
字符串(String)、数字(Number)、布尔(Boolean)、
数组(Array)、对象(Object)、空(Null)、未定义(Undefined)
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:
var x; // x 为 undefined
var x = 5; // 现在 x 为数字
var x = "John"; // 现在 x 为字符串
- 字符串是存储字符(比如 "Bill Gates")的变量。
- 字符串可以是引号中的任意文本。您可以使用单引号或双引号:
- JavaScript 只有一种数字类型。数字可以带小数点,也可以不带
- 布尔(逻辑)只能有两个值:true 或 false
- 对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔
- Undefined 这个值表示变量不含有值。
- 可以通过将变量的值设置为 null 来清空变量。
var arr2 = ['a', 'b',' 'c' ]; //同样是在创建时初始化,但是这种创建更为边界直观
- 对象的创建,一般推荐使用
var perple = {name : 'Tom', age : 21 , eat : function(){ } }
JavaScript 对象
JavaScript 对象是拥有属性和方法的数据。
对象的方法定义了一个函数,并作为对象的属性存储。
对象方法通过添加 () 调用 (作为一个函数)。
使用以下语法创建对象方法:
methodName : function() { code lines }
经常可以看到
JavaScript 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。
在使用 return 语句时,函数会停止执行,并返回指定的值。
函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。
函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
carname="Volvo";
将声明一个全局变量 carname,即使它在函数内执行。
JavaScript 作用域
在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。
在 ES6 中,提供了 let 关键字和 const 关键字。
let 的声明方式与 var 相同,用 let 来代替 var 来声明变量,就可以把变量限制在当前代码块中。使用 const 声明的是常量,其值一旦被设定便不可被更改。
注意是指向的物理地址不可更改。
事件
HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载
事件可以用于处理表单验证,用户输入,用户行为及浏览器动作
字符串的索引从 0 开始,这意味着第一个字符索引值为 [0],第二个为 [1], 以此类推。这样我们就可以使用内置属性 length 来计算字符串的长度。
=== 为绝对相等,即数据类型与值都必须相等。
!= 为 == 的非运算,!== 为 === 的非运算
个人认为常用的字符串方法:
- concat() 连接两个或多个字符串,返回连接后的字符串
- indexOf() 返回字符串中检索指定字符第一次出现的位置
- match() 找到一个或多个正则表达式的匹配
- replace() 替换与正则表达式匹配的子串
- slice() 提取字符串的片断,并在新的字符串中返回被提取的部分,即切片
- split() 把字符串分割为子字符串数组
- toLowerCase() 把字符串转换为小写
- toString() 返回字符串对象值
- toUpperCase() 把字符串转换为大写
- trim() 移除字符串首尾空白
首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
default 关键词来规定匹配不存在时做的事情
case 10:
case 11:alert("10或者11"); //number = 10 或者 = 11执行相同的操作
for/in 语句循环遍历对象的属性
var person={fname:"John",lname:"Doe",age:25};
for (x in person) // x 为属性名
{
txt=txt + person[x];
}
// 还可以遍历数组
var x;
var nums = [1, 3, 5];
for (x in nums)
{
document.write(x+ "<br />");
}
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。会继续执行该循环之后的代码.
数组是一种特殊的对象类型。 因此 typeof [1,2,3,4] 返回 object。
null是一个只有一个值的特殊类型。表示一个空对象引用。
你可以设置为 null 来清空对象:
null 和 undefined 的值相等,但类型不等
null === undefined // false
null == undefined // true
NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined
全局方法 String() 可以将数字转换为字符串 String(123) 将数字 123 转换为字符串并返回
toString() 也是有同样的效果。 (123).toString()
日期
getFullYear() 从 Date 对象以四位数字返回年份。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。 需要加一
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
parseInt() 解析一个字符串,并返回一个整数。
JavaScript 正则表达式
正则表达式是由一个字符序列形成的搜索模式。可用于所有文本搜索和文本替换的操作。
语法:
/正则表达式主体/修饰符(可选)
i 执行对大小写不敏感的匹配。
g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m 执行多行匹配。
[abc] 查找方括号之间的任何字符。
[0-9] 查找任何从 0 至 9 的数字。
(x|y) 查找任何以 | 分隔的选项。
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。
RegExp 对象是一个预定义了属性和方法的正则表达式对象
test() 方法是一个正则表达式方法。用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。
var patt = /e/;
patt.test("The best things in life are free!"); //true
exec() 方法用于检索字符串中的正则表达式的匹配。该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null.
/e/.exec("The best things in life are free!"); // e
http://www.runoob.com/js/js-regexp.html 页面最底下的实例值得一看
JavaScript 错误
try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。
try {
//在这里运行代码
} catch(err) {
//在这里处理错误
}
JavaScript 中,函数及变量的声明都将被提升到函数的最顶部。
JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明。
JavaScript 严格模式(strict mode)不允许使用未声明的变量。
严格模式通过在脚本或函数的头部添加 "use strict"; 表达式来声明。
严格模式下你不能使用未声明的变量。
消除代码运行的一些不安全之处,提高编译器效率,增加运行速度;
典型的数据验证有:
必需字段是否有输入?
用户是否输入了合法的数据?
在数字字段是否输入了文本?
http://www.runoob.com/js/js-reserved.html Javascript保留关键字
JSON 是用于存储和传输数据的格式。JSON 通常用于服务端向网页传递数据 。
键/值对包括字段名称(在双引号中),后面一个冒号,然后是值:"name":"Runoob"
JSON 对象保存在大括号内。对象可以保存多个 键/值 对
json对象和JavaScript对象的区别:
json中没有变量的概念,不用声明变量
json没有末尾的分号
json中对象的属性名任何时候都必须加双引号。
JSON.parse() 用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify() 用于将 JavaScript 值转换为 JSON 字符串。
json.stringify() 输出的json字符串不包含任何空格字符或缩进。
函数表达式
匿名函数:函数存储在变量中,不需要函数名称,通常通过变量名来调用。
var x = function (a, b) {return a * b};
函数提升(Hoisting)函数可以在声明之前调用
自调用表达式会自动调用。如果表达式后面紧跟 () ,则会自动调用。
(function () {
var x = "Hello!!"; // 我将调用自己
})();
toString() 方法将函数作为一个字符串返回:
一般而言,在Javascript中,this指向 函数执行时的当前对象。
注意 this 是保留关键字,你不能修改 this 的值。
在 web 浏览器中全局对象是浏览器窗口(window 对象)。
- 在函数中只有return this; // 返回 window 对象
- 在对象方法中return this; // this 的值为 myObject 对象
如果函数调用前使用了 new 关键字, 则是调用了构造函数。
- 构造函数中 this 关键字没有任何的值。
- call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。第二个参数call传入的是参数列表,apply传入的是数组。通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。 http://www.runoob.com/js/js-function-invocation.html
JavaScript 闭包
JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。
该实例中,内嵌函数 plus() 可以访问父函数的 counter 变量:
function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
// 函数自我调用也可以作为闭包的做法:
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
add(); add(); add(); // 计数器为 3
闭包就是一个函数引用另一个函数的变量,因为变量被引用着所以不会被回收,因此可以用来封装一个私有变量。这是优点也是缺点,不必要的闭包只会增加内存消耗。或者说闭包就是子函数可以使用父函数的局部变量,还有父函数的参数。
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。
在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
CDN (Content Delivery Network) 解决了这个问题。CDN 是包含可分享代码库的服务器网络。 通过将内容发布到靠近用户的边缘节点,使不同地域的用户在访问相同网页时可以就近获取。不仅可以减轻服务器的负担,也可以提高用户的访问速度。
函数的名字仅仅是一个包涵指针的变量而已。