为什么我们要学JavaScript？
尤其当dalao已能信手拈来Java、C++...
简单粗暴的回答就是：
因为你没有选择。
在Web世界里，只有JavaScript
能跨平台、跨浏览器驱动网页，
与用户实现交互。
-------------------------------------
“即刻”讲坛新版块 - 实训空间
终于和大家见面啦！
本期带来JavaScript入门指南
欢迎小伙伴们在评论区留言感兴趣的技术方向
更多精彩内容，敬请期待
01
什么是JavaScript?
JavaScript 是一门跨平台、面向对象的脚本语言，它能使网页可交互（例如拥有通俗的菜单、可点击的按钮、复杂的动画等）。
另外JS（即JavaScript）还有高级的服务端版本，例如Node.js，它可以让你在网页上添加更多功能，而不仅限于下载文件（例如在多台电脑之间的协同合作）。
在宿主环境（如 web 浏览器）中， JS能够通过其所连接的环境提供的编程接口进行相关控制。 这意味着，在浏览器中，JS可以改变网站（DOM）的外观与样式。同样地，在服务器上，Node.js 中的 JS可以对浏览器上编写的代码发出的客户端请求做出响应。
02
JavaScript和Java的关系
JavaScript
VS
Java
_
面向对象。不区分对象类型。通过原型机制继承，任何对象的属性和方法均可以被动态添加。
基于类系统。分为类和实例，通过类层级的定义实现继承。不能动态增加对象或类的属性或方法。
变量类型不需要提前声明。
(动态类型)
变量类型必须提前声明。
(静态类型)
不能直接自动写入硬盘。
可以直接自动写入硬盘。
新手甲
不能说一模一样，只能说毫不相关（？）。
小计
盲生，你发现了华点。
为什么叫 JavaScript？
JS在刚诞生的时候，它的名字叫 “LiveScript”。但是因为当时 Java 很流行，所以决定将一种新语言定位为 Java 的“弟弟”会有助于它的流行。（1995年5月，网景公司做出决策，未来的网页脚本语言必须"看上去与Java足够相似"，但是比Java简单，使得非专业的网页作者也能很快上手。）
随着 JavaScript 的发展，它已经变成了一门独立的语言，同时也有了自己的语言规范 ECMAScript。现在，它和 Java 之间没有任何关系。
03
JavaScript入门——实现hello world
JS是一门用于前端编写的脚本语言。而若想实现一个完整的前端项目，除学习JS之外，还需要学习HTML（超文本标记语言）与CSS（Cascading Style Sheets），即前端工程师常称的“前端三件套”。
对于HTML，顾名思义，超文本，就是不止于文本，视频、音频、等等都可以，即一种特殊的文档。HTML 构建了一个网页的基本骨架，是用来描述网页的一种语言。
CSS主要用于实现页面渲染，即动画效果与网页美化。最终实现的效果是HTML专注做结构呈现，而CSS实现样式分离，最终只需要在HTML中嵌入编写好的JS与CSS文件即可。
学习JS，首先需要对图论中的树形结构有较好理解：对于整个网页，我们可以将其页面内容理解为一棵“树”——将HTML中的不同标签嵌入网页，就是向“树”结构中添加结点；在编写代码时通过设计标签的嵌入逻辑关系，就是在添加结点的过程中形成了父结点与孩子结点的逻辑关系。
下面介绍如何通过HTML与JS实现hello world。
开始之前，必须具备HTML的知识，哪怕只是基础认识（知道html、head、body标签）：
html标签称是放在文档最开始，用于声明此文件是HTML文件。
head标签又称为文件头标签，这个标签里面放的是一些与网页有关的信息，一般不显示给用户。
body标签又称为文件体标签，是HTML文件的主体，里面用于存放显示给用户的文本信息、、视频和音频等。
我们的JS是内嵌到html内运行的。内嵌的方式有两种：
第一种是直接内嵌到HTML文档中；
第二种是JS写成js代码文件，后通过script标签的src属性加载js代码文件。
笔者以第一种方式为例，内嵌JS的方式如下：
script标签写法有很多种：
严格的写法：
其实这些都可以省略：包括type、language和<!-- -->注释，省略后代码一样可以被浏览器运行。原因就是我们默认JS作为脚本语言。
JS实现hello world
04
JavaScript进阶——关于TypeScript与基于React/Vue框架的前端开发
在实际开发过程中，开发人员往往不会选择完全依赖JS语言构造页面：因为在进行相关DOM操作时，若需要页面展现新的渲染效果，整个页面的“树形结构”都将会被重新加载，这对整个网页的加载时间并不友好，并且在HTML文件中不断嵌入标签也过于臃肿。
为使得前端开发者能够方便地对网页实现渲染效果，React与Vue应运而生。例如，在React中，原先的JS基础语法被优化形成JSX语言，这种语言允许将原本只存在于HTML文件中的标签直接嵌入在JS文件中，最简单的例子即函数的返回值可以是一个子标签结构，即当在HTML中引入该JS文件时，会直接将刚才返回的结构嵌入页面中。这样的机制带来的好处主要有，
（1）代码编写更加简洁方便；
（2）当页面的某部分需要展现新的效果时，不需要对整个网页进行重新加载，而只需要对相应的“子树”结构重新加载即可。
Vue是另一个知名度非常高的JS开发脚手架，感兴趣的读者可以去GitHub上进行参考：
https://github.com/vuejs/vue
同时提供React项目的仓库链接：
https://github.com/facebook/react/
在JS基础上，添加类型系统又诞生了TypeScript，事实上，在ES6规范以后的JS语言同样引入了类继承的概念。那么TS语言的诞生有什么意义呢？
从 TypeScript 其名观之，类型是其最核心的特性。
我们知道，JS 是一门非常灵活的编程语言：
（1） 它没有类型约束，一个变量可能初始化时是字符串，过一会儿又被赋值为数字。
（2） 由于隐式类型转换的存在，有的变量的类型很难在运行前就确定。
（3） 基于原型的面向对象编程，使得原型上的属性或方法可以在运行时被修改。
（4） 函数是 JS 中的“强势存在”，可赋值给变量，也可当作参数或返回值。
这种灵活性就像一把双刃剑，一方面使得 JS蓬勃发展，无所不能，从 2013 年开始就一直蝉联最普遍使用的编程语言排行榜冠军；另一方面也使得它的代码质量参差不齐，维护成本高，运行时错误多。而 TS 的类型系统，很大程度上弥补了 JS 的缺点。
React，Vue脚手架与TypeScript的安装都在npm包中进行，感兴趣的读者可以自行查阅资料实现。
下面给出笔者在本学期大一立项中通过TypeScript以及React框架进行前端构建实现的可视化插件，并提供部分关键代码以展示React的具体实现过程。
（限于目前水平，整个插件的集成度不是很高）
首先在创建的TS文件中导入React包，“react-dom”包是剥离React用来进行相关DOM操作的。规范数据格式等函数限于篇幅不作展示.
将后端组件渲染到页面结点中。
这里后端笔者使用了google的一个开源项目facets，同样给出GitHub的仓库链接，感兴趣的读者可以参考：
https://github.com/PAIR-code/facets
最终在Jupyter为IDE的环境中展示处理过的数据，可以发现最终经过特征值分析的数据集以图表可视化的形式在浏览器（chrome）页面中展示出来。
关于JSX语法，下面给出一个简易的例子，方便直观的解释如何在JS文件中嵌入标签。例如，对于windows用户，进入CMD并执行如下命令以运行React组件：
首先创建一个用于引入的文件，可以命名为index.js
需要注意的是在导入React组件时，需要先确保自己已经在npm包中安装了整个React脚手架工程。
这里的demo是对一张简单图形的绘制，采用React中的第三方包react-vis（import处的第四行），熟悉HTML的小伙伴可能已经发现了，代码的最后一行是嵌入标签到树结构中的操作，但是通过React，我们十分方便地直接在JS文件中就实现了这一过程。
再新建一个文件，这里将是我们进行代码编写的主文件。由于笔者的文件命名为Vis.js，所以可以发现在上一张index.js中，导入部分的第四行‘import Vis form…’其实就是将这个外部文件导入，而下方的标签<Vis/>中一定要保证内容名字和导入的文件一致，否则运行时将会报错。
回到主文件Vis.js中，第一行首先导入React中的component组件，这是进行页面渲染的主要组件，而Fragment标签将会在下面介绍，主要是用于强调整个标签结构的起始部分，以便让代码结构更加清晰。
App.js是外部文件，直接导入；最后一行引入坐标组件与折线图组（LineSeries）
可以发现主函数中有了类的概念，直接在 render部分绘制出最终想要的图形效果（数据是随机赋值的，没有实际意义）
最后将该标签结构作为返回值以渲染到页面中。此时发现<Fragment></Fragment>标签将整个结构嵌入其内部，体现了标签间的逻辑关系。注意最后需要进行export以传入index文件中。浏览器端效果如下：
如果将LineSeries改为MarkSeries，效果变为：
05
结语
在实际前端开发的过程中，React与Vue的应用是十分广泛的，关于两者的优缺点对比，只能说是仁者见仁，智者见智；读者可以自行查阅官方文档进行阅读，并结合自己的实际开发经历去感受比较。
由于笔者也是刚接触JS不久（而且实际主要是负责后端的，捂脸），因此对于这门语言的掌握也只能说是略有涉猎而已，欢迎感兴趣的读者与dalao们分享自己的学习心得。
感谢您的阅读与支持。
发表评论 取消回复