初识JavaScript

初识JavaScript

一、JavaScript 历史

1、它的创始人是：布兰登·艾奇（Brendan Eich，1961年~ ）。
2、这位厉害的大叔在1995年利用10天的时间完成了对JavaScript的设计。
3、他一开始实在网景公司工作，所以，最初的命名为LiveScript，后来他与Sun合作就把这个软件改名为JavaScript。

二、JavaScript是什么

1、JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script 是脚本的意思）。
2、脚本语言：不需要编译，运行过程中由js解释器逐行来进行解释并执行。
3、现在也可以基于Node.js技术来进行服务器端的编程。
来个图加以理解：

三、JavaScript 的作用

本来JavaScript发明的目的就是用来做表单动态校验的(密码强度检测)
没想到越来越好，能做到事越来越多。
1、网页特效
2、服务端开发(Node.js)
3、桌面程序(Electron)
4、App(Cordova)
5、控制硬件 物联网(Ruff)
6、游戏开发(cocos2d-js)

四、HTML/CSS/JS的关系

1、HTML/CSS标记语言–描述类语言：
（1）、HTML决定网页结构和内容(决定看到什么) ，相当于人的身体。
（2）、CSS决定网页呈现给用户的模样(决定好不好看)，相当于给人穿衣服、化妆。
2、JS脚本语言–编程类语言：
实现业务逻辑和页面控制(决定功能) ，相当于人的各种动作。

五、浏览器执行JS简介

浏览器分成两部分：渲染引擎和JS引擎
1、渲染引擎：用来解析HTML与CSS，俗称内核，比如：chrome浏览器的blink ，还有老版本的webkit。
2、JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如：chrome浏览器的V8。
注意：浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码。JS 引擎执行代码时逐行解释。
每一句源码(转换为机器语言) ，然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。
上个图：

六、JS的组成

话不多说先上图（主要是懒…）：

我们一开始的重点是ECMAScript，先了解一下它吧。
1、ECMAScript：
ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMAScript语言的实现和扩展。

ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
2、DOM——文档对象模型
文档对象模型( Document Object Model，简称DOM)，是W3C组织推荐的处理可打展标记语言的标准编程接口。
通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
3、BOM——浏览器对象模型
BOM (Browser Object Model ，简称BOM)是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

体验JS

JS有3种书写位置：分别为行内、内嵌和外部。

一、行内式JS

效果图：

1、可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性)，如：onclick
2、注意：单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号
3、它的缺点为：可读性差，引号易错，引号多层嵌套匹配时，非常容易弄混；
在html中编写JS大量代码时，方便阅读；
4、特殊情况下使用，一般情况下不建议使用。

二、内嵌式JS

效果图：

1、可以将多行JS代码写到<script>标签中。
2、内嵌JS是学习时常用的方式

3、外部式JS

先创一个以.js结尾的文件格式，然后在里面直接写命令就可以了，如：


效果图：

1、作用：利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
2、注意：
（1）、引用外部JS文件的script标签中间不可以写代码。
（2）、script是双标签。
它适合于JS代码量比较大的情况。

JavaScript输入输出语句

为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：
方法：
1、alert(msg)
作用：浏览器弹出警示框。
归属：浏览器
比如：

效果图：

2、console.log(msg)
作用：浏览器控制台打印输出信息。
归属：浏览器
比如：

效果图：

3、prompt(info)
作用：浏览器弹出输入框，用户可以输入。
归属：浏览器
如：

效果图为：

[^1]：好了，这就是关于JS一些基础的相关信息希望对你有所帮助，最后让我们一起努力吧！