JavaScript概述

JavaScript可以做什么

页面的各种动画效果

页面的点击/移入响应

对客户端数据进行验证

各种页面小游戏

用途总结

嵌入动态文本于HTML页面。

对浏览器事件做出响应(对于用户的操作给予响应)。

读写HTML元素。

在数据被提交到服务器之前验证数据(客户端数据校验)。

检测访客的浏览器信息。

控制cookies，包括创建和修改等。

基于Node.js技术进行服务器端编程。

JavaScript 发展到现在几乎无所不能。
1. 网页特效

2. 服务端开发(Node.js)

3. 命令行工具(Node.js)

4. 桌面程序(Electronjs)

5. App(Cordova)

6. 控制硬件-物联网(Ruff)

7. 游戏开发(cocos2d-js)

Why JavaScript

类似于JavaScript的语言有很多，比如: 微软推出的JScript，CEnvi推出的 ScriptEase

1、所有主流浏览器都支持JavaScript(支持程度广)。

2、目前，全世界大部分网页都使用JavaScript(用户群体广)。

3、它可以让网页呈现各种动态效果，做为一个Web开发师，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具(特点)。

4、易学性，学习环境无外不在，只要有文本编辑器，就能编写JavaScript程序。它是基于Java简化设计而来。

JavaScript基础概述

JavaScript是一种解释型或即时编译型的高级编程语言，虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

什么是脚本语言?

脚本语言是为了缩短传统的编写-编译-运行（edit-compile-run）过程而创建的计算机语言。

一个脚本通常是解释执行而非编译。脚本语言通常都有简单、易学、易用的特性，目的就是希望能让程序员快速完成程序的编写工作。

用最简单的语言总结一下，脚本语言就是，边解释边运行，非脚本语言，整体编译后，再运行。脚本语言必须运行到错误的地方，才会报错，而非脚本语言，在编译的时候，会报错。

什么是基于原型编程?

基于原型的编程是面向对象编程的一种形式，通过复制已经存在的原型对象来实现面向对象，无与基于类的编程较大的区别是没有Class关键字，但是有类的概念。基于原型的编程也可以理解成基于实例的编程。

基于原型的系统可以在程序运行时对原型进行修改，基于类(Java， C+)的语言则很难实现这一点。

什么是编程范式?

编程范式是程序语言背后的思想。代表了程序设计者认为程序应该如何被构建和执行的看法。常见的编程范式有：过程式（命令式），面向对象，函数式，泛型编程等。

和C++等语言类似，JS支持多范式（paradigms）编程。我们常常混合这些范式来完成一些大型Web项目。

JS支持3种编程范式：命令式、面向对象和函数式。

JavaScript的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

JavaScript主要用于HTML的页面，嵌入在HTML的源码中。

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。它存在于全世界所有 Web 浏览器中，能够给页面添加动态效果和动态交互。

JavaScript最初的目的是为了处理表单的验证操作。

JavaScript组成部分

JavaScript是由ECMAScript、文档对象模型（Document Object Model:DOM）、浏览器对象模型（Brower Object Model:BOM）三部分构成。

ECMAScript，描述了该语言的基础语法和基本对象(包含内置对象)，JavaScript的核心，描述了语言的基本语法(变量、运算符、表达式、流程控制语句、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义)，ECMAScript是一套标准.

文档对象模型（DOM），描述处理网页内容的方法和接口。通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性，可以对其中的内容进行修改和删除，同时也可以创建新的元素；DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。

浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。BOM提供了独立于内容而与浏览器窗口进行交互的对象，例如可以移动，调整浏览器大小的window对象，可以用于导航的location对象与history对象，可以获取浏览器，操作系统与用户屏幕信息的navigator与screen对象。

JavaScript特点

JavaScript是一种属于浏览器的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的(但写成单独的js文件有利于结构和行为的分离)。

弱类型 : 声明变量无需指定数据类型，统一使用var来声明变量；声明的变量可以存储任意类型的值；

解释性 : JavaScript是一种解释型的脚本语言，C、Java等语言先编译后执行，而JavaScrip源代码不需要经过编译，直接在浏览器上运行时被解释。

基于对象 : Javascript是一种基于对象的语言，能运用自己已经创建了的对象，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。

简单性 : JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。

事件驱动(Event Driven) 和动态性 : JavaScript是一种采用事件驱动（所谓事件驱动，指的是在页面执行了某种操作所产生的动作，此动作称为“事件”。）的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应（针对于用户在页面中的操作，都是基于事件驱动）。

跨平台性：JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提上机器上的浏览器支持JavaScript脚本语言，目前JavaScript已被大多数的浏览器所支持。

不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题：安全性。

HTML5的出现更是突出了JavaScript的重要性，例如HTML5的绘图支持、本地存储、离线应用、客户端通信等，都大量使用了JavaScript。

而随着服务器的强壮，虽然程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时，有些特殊功能（如AJAX）必须依赖Javascript在客户端进行支持。随着引擎如V8和框架如Node.js的发展，及其事件驱动及异步IO等特性，JavaScript逐渐被用来编写服务器端程序。

JavaScript历史

在1995年时，由Netscape(网景)公司的Brendan Eich(布兰登·艾奇)，在网景导航者浏览器上首次设计实现而成。JavaScript是甲骨文公司的注册商标。

Netscape在最初将其脚本语言命名为LiveScript，后来因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。

JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。

为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。为了互用性，Ecma国际（前身为欧洲计算机制造商协会）创建了ECMA-262标准（ECMAScript）。两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言，而非作为给程序人员的脚本语言来推广和宣传，但是JavaScript具有非常丰富的特性。

发展初期，JavaScript的标准并未确定，同期有Netscape的JavaScript，微软的JScript和CEnvi的ScriptEase三足鼎立。1997年，在ECMA（欧洲计算机制造商协会）的协调下，由Netscape、Sun、微软、Borland组成的工作组确定统一标准：ECMA-262。

JavaScript 已经由 ECMA（欧洲电脑制造商协会）通过 ECMAScript 实现语言的标准化。

ECMA这个组织的目标是评估，开发和认可电信和计算机标准。

年份	名称	描述
1997	ECMAScript 1	第一个版本
1998	ECMAScript 2	版本变更
1999	ECMAScript 3	添加正则表达式添加 try/catch
	ECMAScript 4	没有发布
2009	ECMAScript 5	添加 "strict mode"，严格模式添加 JSON 支持
2011	ECMAScript 5.1	版本变更
2015	ECMAScript 6	添加类和模块
2016	ECMAScript 7	增加指数运算符 (**) 增加 Array.prototype.includes

ECMAScript 6 也称为 ECMAScript 2015。

ECMAScript 7 也称为 ECMAScript 2016。

JavaScript的引入方式

HTML 中的脚本必须位于 <script>与</script> 标签之间。

脚本可被放置在 HTML 页面的<body> 和 <head> 部分中。

引入JavaScript需要使用script标签：

<script>标签用于定义客户端脚本，script 元素即可包含脚本语句，又可通过 src 属性指向外部脚本文件。

如果想在页面上使用JavaScript，必须使用<script>标签，把JavaScript源码放入<script>和</script>之间。

<script>标签属性:

type：指定脚本的类型。

src：指定外部脚本的url。

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

<script> 和 </script> 之间的代码行包含了 JavaScript:

<script>//定义JS代码
</script>//引入外部JS文件
<script src="url"></script>

浏览器会解释并执行位于<script> 和 </script>之间的 JavaScript 代码。

那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。

JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

行内引入JavaScript

在标签事件属性中填写JavaScript代码或调用函数时，调用函数时不是事件=函数名，而是事件=函数名+()

<button onclick="alert('我是一个警告框')" type="button">点击这里</button>

<head><script>function myfunction(){document.getElementById("demo").innerHTML="onclick事件触发";}</script>
</head>
<body><h1 id="demo">一个段落</h1><button onclick="myfunction()" type="button">点击这里</button>
</body>

内部引入JavaScript

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的<body> 或 <head> 部分中，或者同时存在于两个部分中。

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

<!DOCTYPE html>
<html>
<head>
<script>function myFunction(){document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";}
</script>
</head>
<body><h1>我的 Web 页面</h1><p id="demo">一个段落</p><button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>

<!DOCTYPE html>
<html>
<body><h1>我的 Web 页面</h1><p id="demo">一个段落</p><button type="button" onclick="myFunction()">尝试一下</button><script>function myFunction(){document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";}</script>
</body>
</html>

外部引入JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 <script>标签的 "src" 属性中设置该 .js 文件：

<!DOCTYPE html>
<html>
<body><script src="myScript.js"></script>
</body>
</html>

如果把JS源代码直接写在某个具体的页面上时(通常放在<head>标签下)，这样的成为内部的JavaScript。

但是当JS 代码越来越庞大的时候，我们最好把它独立另存为一个JS文件，扩展名为.js，然后在页面上引入即可，这样的称为外部的JS文件，它具有维护性高、可缓存(加载一次，无需加载)、方便未来扩展、复用性高等特点。

注：引用外部js文件的script标签中不可以写JavaScript代码

扩展知识点

document.write() 的常用操作:

除了直接输出文字外，它还支持带有HTML标签的输出内容。比如直接输出一个标题比如在输出内容中加入br换行标签比如输入一张图片 ......等等

<!DOCTYPE html>
<html>
<body><h1>我的第一个 Web 页面</h1><p>我的第一个段落。</p><script>document.write("<h1>我是H1的内容</h1>");
</script></body>
</html>

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

<!DOCTYPE html>
<html>
<body><h1>我的第一个 Web 页面</h1><p>我的第一个段落。</p><button onclick="myFunction()">点我</button><script>
function myFunction() {document.write(Date());
}
</script></body>
</html>

alert()方法:

alert()方法会弹出警告框。可以添加多个alert();他们会按照顺序依次执行。

<!DOCTYPE html>
<html>
<body><h1>我的第一个页面</h1>
<p>我的第一个段落。</p><script>window.alert(5 + 6);
</script></body>
</html>

console.log():

写入到浏览器的控制台

如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

浏览器中使用 F12 来启用调试模式，在调试窗口中点击 "Console" 菜单。

<!DOCTYPE html>
<html>
<body><h1>我的第一个 Web 页面</h1><script>a = 5;b = 6;c = a + b;console.log(c);
</script></body>
</html>

innerHTML:

写入内容到 HTML 元素

<!DOCTYPE html>
<html>
<body><h1>我的第一个 Web 页面</h1><p id="demo">我的第一个段落</p><script>//需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。document.getElementById("demo").innerHTML = "段落已修改。";//document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。//innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
</script></body>
</html>

click事件的基本用法:

click事件是最常用的事件之一，所谓事件可以简单理解为用户的操作。为了方便之后的学习，你应该先掌握着个简单事件的基本用法。

JavaScript注释及注意事项

单行注释:

// 单行注释内容
var name = 'hm';

多行注释:

/* 多行注释内容 */
/*var age = 18;var name = 'zs';console.log(name, age);
*/

文档注释：

/**  文档注释内容 */

注意事项：

1、字母的大小写，Name和name是两个不同的标识符。

2、空格和换行。这一点和CSS代码规则类似:多余的空格会被忽略，可以将一行代码分成多行写。

3、分号作为一个语句的结束标志，分号之后是新语句的开始。虽然省略不写通常也是没有问题的，但还是建议大家写上。

【前端系列教程之JavaScript】01_JavaScript概述和引入方式相关推荐

【前端系列教程之JavaScript】08_BOM编程
一.BOM概述 1.1.Web API API的概念 API(Application Programming Interface,应用程序接口)是一些预先定义的函数,或指软件系统不同组成部分衔接的约定 ...
【前端系列教程之JavaScript】15_JavaScript面向对象编程
JavaScript面向对象编程面向对象概述什么是对象 Everything is object (万物皆对象) 对象到底是什么,我们可以从两次层次来理解. (1) 对象是单个事物的抽象. 一本书 ...
【前端系列教程之JavaScript】16_JavaScript函数进阶
函数进阶函数回顾函数的定义方式函数声明 function foo () {} 函数表达式 var foo = function () {} 函数声明与函数表达式的区别函数声明必须有名字函数声 ...
【前端系列教程之HTML5】01_HTML概述
一.Web前端开发工具 1.1.常用前端开发工具介绍软件开发工具是用于辅助软件生命周期过程的基于计算机的工具.通常可以设计并实现工具来支持特定的软件工程方法,减少手工方式管理的负担. 作为一个前端开 ...
【前端系列教程之CSS3】01_CSS概述、引入规则和三大机制
前言最准确的网页设计思路是把网页分成三个层次,即:结构层.表示层.行为层. HTML:结构层,Hyper Text Markup Language,超文本标记语言 CSS:表现层,Cascading ...
【前端系列教程之CSS3】04_CSS定位和浮动详解
一.CSS 定位(重点) 1.1 CSS 定位属性 position 属性指定了元素的定位类型. position 属性的五个值: static 静态定位,无特殊定位,对象遵循正常文档流.top,ri ...
【前端系列教程之HTML5】06_HTML5新标签
一.HTML5新布局标签许多现有网站都包含以下HTML代码: <div id="nav">, <div class="header"> ...
【前端系列教程之CSS3】06_CSS3边框、渐变、文本效果等
一.CSS3边框(重要) 用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop. 1.1 CSS3边框圆角在 CSS2 中添加圆角棘手.我们不得不在 ...
【前端系列教程之HTML5】02_HTML文档结构
一.HTML文件(文档)定义试想:我们上网访问到底做了什么? 上一节提到URL问题,组成部分由HTTP,服务器地址,端口号,资源路径;这些东西组成了我们上网访问所谓的网址,其中有服务器地址和路径,从 ...

【前端系列教程之JavaScript】01_JavaScript概述和引入方式