JavaScript(简称“JS”) 是一种具有函数优先的轻量级、解释型或即时编译型的编程语言。虽然它是作为开发Web页面的浏览器脚本语言而出名的(所以需要浏览器支持,相当于浏览器开放的API,不同浏览器的支持程度不同),但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式风格。
JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
JavaScript的标准是ECMAScript 。截至 2012 年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日,ECMA国际组织发布了ECMAScript 的第六版,该版本正式名称为 ECMAScript 2015,但通常被称为ECMAScript 6 或者ES6。
组成部分ECMAScript,描述了该语言的语法和基本对象。
文档对象模型(DOM),描述处理网页内容的方法和接口。
浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。
日常用途-
嵌入动态文本于HTML页面。
-
对浏览器事件做出响应。
-
读写HTML元素。
-
在数据被提交到服务器之前验证数据。
-
检测访客的浏览器信息。
-
控制cookies,包括创建和修改等。
-
基于Node.js技术进行服务器端编程。
HTML 中的脚本必须位于 与 标签之间。
脚本可被放置在 HTML 页面的 和 部分中。
标签如需在 HTML 页面中插入 JavaScript,请使用 标签。
和 会告诉 JavaScript 在何处开始和结束。
和 之间的代码行包含了 JavaScript:
alert("我的第一个 JavaScript");
JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据:
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时,请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样,变量 myVariable 与 MyVariable 也是不同的。
JavaScript 字符集JavaScript 使用 Unicode 字符集。
Unicode 覆盖了所有的字符,包含标点等字符。
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 对象:
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue",
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
JavaScript 对象是属性变量的容器,你可以通过两种方式访问对象属性:
(1)person.lastName;
(2)person["lastName"];
对象方法对象的方法定义了一个函数,并作为对象的属性存储。
对象方法通过添加 () 调用 (作为一个函数)。,你可以通过两种方式访问对象方法:
(1)person.fullName();
(2)person["fullName"]();//其中以数字作为方法名的
注:对于以数字命名的属性和方法,只能通过中括号去访问,如下图所示:
b = { 1: 5,
12: function ()
{
return this[1];
}
};
console.log(b[1]);//5
console.log(b[12]());//5
console.log(b["1"]);//5
console.log(b["12"]());//5
JavaScript 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
JavaScript 事件HTML 事件是发生在 HTML 元素上的事情。HTML 事件可以是浏览器行为,也可以是用户行为。
当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。
主要浏览器的调试工具通常,浏览器启用调试工具一般是按下 F12 键,并在调试菜单中选择 "Console" 。
JavaScript let 和 const ECMAScript 2015(ECMAScript 6)ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量,一旦声明,常量的值就不能改变。
在 ES6 之前,JavaScript 只有两种作用域: 全局变量 与 函数内的局部变量。
Internet Explorer 11 及更早版本的浏览器不支持 let 关键字。
JavaScript JSONJSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据 。
JSON 语法规则- 数据为 键/值 对。
- 数据由逗号分隔。
- 大括号保存对象
- 方括号保存数组
函数同样可以通过内置的 JavaScript 函数构造器(Function())定义。
var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);
上述方式等价于如下方式:
var myFunction = function (a, b) {return a * b};
var x = myFunction(4, 3);
JavaScript HTML DOM
通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
通常,通过 JavaScript,您需要操作 HTML 元素。
为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:
- 通过 id 找到 HTML 元素:getElementById()
- 通过标签名找到 HTML 元素:getElementsByTagName()
- 通过类名找到 HTML 元素:getElementsByClassName()
如需改变 HTML 元素的样式,请使用这个语法:
document.getElementById(id).style.property=新样式
JavaScript HTML DOM EventListener addEventListener() 方法在用户点击按钮时触发监听事件:
document.getElementById("myBtn").addEventListener("click", displayDate);
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
传递参数当传递参数值时,使用"匿名函数"调用带参数的函数:
element.addEventListener("click", function(){ myFunction(p1, p2); });
Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法,,Opera 7.0 及 Opera 更早版本也不支持。 但是,对于这些不支持该函数的浏览器,你可以使用 attachEvent() 方法来添加事件句柄
removeEventListener()使用 removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
JavaScript Window - 浏览器对象模型浏览器对象模型 (Browser Object Model,BOM) 使 JavaScript 有能力与浏览器"对话"。
Window 对象所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一:
window.document.getElementById("header");
与此相同:
document.getElementById("header");
更多js参考https://www.runoob.com/jsref/dom-obj-text.html