Javascript概述和基础语法

昨天学完CSS了也总结完成了,
让我们从今天开始来学习 JavaScript吧 。
一起努力吧！加油啊！！
小常说一下：
为了自己想过的生活，勇于放弃一些东西。这个世界没有公正之处，你也永远得不到两全之法。若要自由，就得牺牲安全。若要闲散，就不能获得别人评价中的成就。若要愉悦，就无需计较身边人给予的态度。若要前行，就得离开你现在停留的地方。 ​​​
今天先跟我一起了解Javascript概述和他的基础语法吧！
1、JS概述
首先，来简单的说一下，JS是啥，JS是JavaScript的简写，是

基于浏览器的
基于对象的
事件驱动
脚本语言
·那么JS有什么用呢？ta可以实现：

表单验证

添加动画效果

动态更改页面内容

Ajax网络请求

·那么怎么在网页中使用它呢？

可以有三种方式：

1.Html中内嵌

屠龙宝刀点击就送！

2.在Html页面中直接使用JS

【注意事项】页面中JS代码与引用JS代码可以嵌入到Html中任意位置，但是位置不同会影响到JS代码的执行顺序。例如script标签在body前边会在页面加载之前执行JS；

②引用外部JS文件，使用

引用外部JS文件的script标签必须成对出现，且内部不能有任何代码
JavaScript 最初的目的是为了“赋予网页生命”。

这种编程语言我们称之为脚本。它们可以写在 HTML 中，在页面加载的时候会自动执行。

脚本作为纯文本存在和执行。它们不需要特殊的准备或编译即可运行。

这方面，JavaScript 和 Java 有很大的区别。

为什么叫 JavaScript？
JavaScript 在刚诞生的时候，它的名字叫 “LiveScript”。但是因为当时 Java 很流行，所以决定将一种新语言定位为 Java 的“弟弟”会有助于它的流行。

随着 JavaScript 的发展，它已经变成了一门独立的语言，同时也有了自己的语言规范 ECMAScript。现在，它和 Java 之间没有任何关系。

现在，JavaScript 不仅仅是在浏览器内执行，也可以在服务端执行，甚至还能在任意搭载了 JavaScript 引擎 的设备中都可以执行。

浏览器中嵌入了 JavaScript 引擎，有时也称作 JavaScript 虚拟机。

不同的引擎有不同的“代号”，例如：

V8 —— Chrome 和 Opera 中的 JavaScript 引擎。
SpiderMonkey —— Firefox 中的 JavaScript 引擎。
……还有其他一些代号，像“Trident”，“Chakra”用于不同版本的 IE，“ChakraCore”用于 Microsoft Edge，“Nitro”和“SquirrelFish”用于 Safari，等等。
上面这些名称很容易记忆，因为经常出现在网上开发者的文章中。我们也会用到这些名称。例如：某个新的功能，如果“JavaScript 引擎 V8 是支持的”，那么我们可以认为这个功能大概能在 Chrome 和 Opera 中正常运行。

引擎是如何工作的？
引擎很复杂，但是基本原理很简单。

引擎（通常嵌入在浏览器中）读取（“解析”）脚本。
然后将脚本转化（“编译”）为机器语言。
然后这机器语言代码快速地运行。
引擎会对流程中的每个阶段都进行优化。它甚至可以在运行时监视编译的脚本，分析数据流并根据这些对机器代码应用优化。最后，脚本会执行地非常快。

浏览器中的 JavaScript 能做什么？
现代的 JavaScript 是一种“安全”语言。它不提供对内存或 CPU 的底层访问，因为它最初是为浏览器创建的，不需要这些功能。

JavaScript 的能力很大程度上依赖于它执行的环境。例如：Node.js 允许 JavaScript 读写任意文件、执行网络请求等。

浏览器中的 JavaScript 可以做与网页操作、用户交互和 Web 服务器相关的所有事情。

例如，浏览器中的 JavaScript 可以完成下面这些事：

在网页中插入新的 HTML，修改现有的网页内容和网页的样式。
响应用户的行为，响应鼠标的点击或移动、键盘的敲击。
向远程服务器发送网络请求，下载或上传文件（所谓 AJAX 和 COMET 技术）。
获取或修改 cookie，向访问者提出问题、发送消息。
记住客户端的数据（本地存储）。
浏览器中的 JavaScript 不能做什么？
为了用户的（信息）安全，在浏览器中的 JavaScript 的能力是有限的。这样主要是为了阻止邪恶的网站获得或修改用户的私人数据。

这些限制的例子有：

网页中的 JavaScript 不能读、写、复制及执行用户磁盘上的文件或程序。它没有直接访问操作系统的功能。

现代浏览器允许 JavaScript 做一些文件相关的操作，但是这个操作是受到限制的。仅当用户使用某个特定的动作，JavaScript 才能操作这个文件。例如，把文件“拖”到浏览器中，或者通过 标签选择文件。

JavaScript 有很多方式和照相机/麦克风或者其他设备进行交互，但是这些都需要提前获得用户的授权许可。所以，启用了 JavaScript 的网页应该不会偷偷地启动网络摄像头观察你，并把你的信息发送到美国国家安全局。

不同的浏览器标签页之间基本彼此不相关。有时候，也会有一些关系。例如，一个标签页通过 JavaScript 打开另外一个新的标签页。但即使在这种情况下，如果两个标签页打开的不是同一个网站（域名、协议或者端口任一不相同的网站），他们都不能够相互通信。

这就是“同源策略”。为了解决“同源策略”问题，两个标签页必须都包含一些处理这个问题的特殊的 JavaScript 代码，并均允许数据交换，这样才能够实现两个同源标签页的数据交换。本教程会讲到这部分相关的知识。

这个限制也是为了用户的信息安全。例如，用户打开的 http://anysite.com 网页的 JavaScript 肯定不能访问 http://gmail.com（另外一个标签页打开的网页）也不能从那里窃取信息。

JavaScript 通过互联网可以轻松地和当前网页域名的服务器进行通讯。但是从其他网站/域名的服务器中获取数据的能力是受限的。尽管这可以实现，但是需要来自远程服务器的明确协议（在 HTTP 头中）。这也是为了用户的数据安全。

浏览器环境外的 JavaScript 一般没有这些限制。例如服务端的 JavaScript 就没有这些限制。现代浏览器还允许安装可能会要求扩展权限的插件或扩展。

1、什么是JS

	JS是一种运行于JS解释器/引擎中的解释型脚本语言
	编译型语言：程序在运行前会进行编译
	解释型语言：运行之前不会编译，直接执行，出错则停止

JS解释器/引擎：是JS脚本的运行环境
1、独立安装的JS解释器(NodeJS)
2、嵌入在浏览器内核中的JS解释器
PC,平板，手机，电视 … 全部都支持JS
2、JS的发展史
1、1992年 Nombas 为自己的软件开发了一款脚本语言C Minus Minus(C–)后更名为 ScriptEase,可以嵌入在网页中。
2、1995年 Netscape为自己的Navigator2.0 开发了另一种客户端脚本语言-LiveScript,为了借助Java势头，所以更名为 Javascript
3、1996年Microsoft为了进军浏览器市场，在IE3.0 中 发布了Javascript的克隆版，称为JScript
4、1997年，Javascript1.1作为草案提交给了ECMA(欧洲计算机制造商联合会),Javascript的核心 被更名成 ECMAScript

完整的JS语言是由三部分组成：
1、核心(ECMAScript)
2、文档对象模型(DOM)
Document Object Model
让JS有能力与页面进行对话(操作页面内容)
3、浏览器对象模型(BOM)
Browser Object Mode
让JS有能力与浏览器进行对话(操作浏览器)

	JS语言的特点和用途
	1、特点
		1、任何文本工具都可以开发JS
		2、无需编译，直接由JS引擎来执行
		3、弱类型语言
			由数据来决定数据类型
		4、面向对象的语言
	2、用于
		1、客户端的JS
			1、客户端数据计算
			2、表单输入验证
			3、浏览器事件的触发和处理
			4、网页特效制作
			5、服务器端的异步数据提交(AJAX)
		2、服务器端的JS
			1、分布式运算
			2、实时服务器
			3、窗口应用
			4、网络应用

2、JS基础语法
1、使用JS(重点)
1、浏览器内核
内核作用：负责页面内容的渲染
组成：
1、内容排版引擎-解析HTML/CSS
2、脚本解释引擎-解析JS
浏览器 内核名 排版引擎 脚本引擎
IE Trident - Chakra
Firefox Gecko - Monkey
Safari Webkit Webcore Nitro
Chrome Webkit Webcore V8
Opera Presto - Carakan
Opera Webkit Webcore V8
(2013~今)
2、第一个JS程序
1、搭建JS运行环境
1、使用独立安装的JS解释器(NodeJS)
console.log(“Hello World”);
2、使用浏览器内核中的JS解释器
1、直接在Console中输入脚本并执行
2、将JS脚本嵌入在html页面中执行
1、html元素事件编写脚本
事件：onclick

2、在

document.write(“被排版引擎所解析的内容”);
3、使用外部脚本文件编写JS脚本
1、创建一个 **.js 文件
在文件中编写JS脚本
2、在使用的页面上进行引用

练习：
实例如下：

<!DOCTYPE html>
<html>
    <head>
		<title>标题</title>
		<meta charset="utf-8">
    </head>
    <body>
		<button onclick="console.log('让你点你就点啊!!!!');">点我一下</button>
		<div onclick="console.log('点击div');">点击一下</div>
		<!-- script 元素中嵌入 JS脚本 -->
		<script>
			document.write("<h1>被排版引擎所执行的内容</h1>");
		</script><h1>被排版引擎所执行的内容</h1>

		<!-- 引入外部JS文件 -->
		<script src="js_1.js"></script>
	
</body>
</html>

2、JS调试(重要)
console -> consloe
console -> Console
console.log("");–> console.log（“”）；

1、代码错误
解释型语言，若某行代码出现错误，解释器则终止此次执行。但不会影响后续块和后续的HTML执行

		<script></script>

练习：
实例如下：
JS代码调试：

<!DOCTYPE html>
<html>
    <head>
		<title>标题</title>
		<meta charset="utf-8">
    </head>
    <body>
		<script>
			console.log("Hello World");
			/*该行代码出现错误，浏览器终止此块的运行*/
			consloe.log("Hello World");
			console.log("Hello World");
		</script>

		<script>
			console.log("你好，中国!");
			console.log("你好，中国!");
		</script>
	
</body>
</html>

3、语法
1、编写JS代码
1、语句-会被JS解释器所执行的代码
console.log();
document.write();

由表达式、关键字、运算符组成
大小写敏感
由分号或换行表示结束
2、注释-不会被JS解释器所执行的内容
单行注释：//
多行注释：/* */

是什么使得 JavaScript 与众不同？
至少有 3 件事值得一提：

和 HTML/CSS 完全的集成。
使用简单的工具完成简单的任务。
被所有的主流浏览器支持，并且默认开启。
满足这三条的浏览器技术也只有 JavaScript 了。

这就是为什么 JavaScript 与众不同！这也是为什么它是创建浏览器界面的最普遍的工具。

此外，JavaScript 还支持创建服务器，移动端应用程序等。
作为一个前端开发人员，JS是我们行走江湖吃饭的家伙。基本上一个前端人员能值多少大洋，就看JS了。虽然各种框架层出不穷，但是归根结底学好原生JS才是硬道理。

我们老师曾经提过学习任何新东西其实都遵循 10000 小时成才定律，只要付出时间，就会有收获。人与人的不同只是收获的多少不同。关于天赋问题，我们确实要承认某些人在某些领域确实比其他人厉害。但大部分人其实都是普通人，不需要天赋，只需要通过时间的简单堆积就可以混口饭吃。