看来工控工程师要接受IT的挑战，这个Javas cript是需要入门的。

Javas cript是一种编程语言，和其他编程语言一样，有规定的语句、语法；变量、数组、操作符、条件/循环、函数、对象。

工控工程师掌握了一些Javas cript 知识，那么就有了与 IT 工程师交流的基础。

但是，如果你上来就学Javas cript 语言而没有遵守一些标准、规则，就会遇到许多莫名其妙的错误。而你去先学习那些规则、标准；结果就是“一个头两个大”，从入门到放弃。

那么怎么理解学习 JS 呢？我觉得有几个重要的事实需要清楚：

1、JS 只能在浏览器（Browser）中工作。这句话的意思就是：浏览器是一个虚拟机，不管是当今哪种浏览器，都可以解释/执行 JS。之所以Node-Red可用，它就是在浏览器中运行，不管你是用IE、Chrome 还是 Safiri。

2、JS 只能嵌入在一份HTML文档中间才能执行。如果是做网页、或是测试自己写的JS脚本，需要清楚这点（搭建一个JS的运行环境 HTML）。而在Node-Red这类使用浏览器的高级编程界面中，人家已经给你做好了编程环境工作。左边一个个的节点都是Javas cript对象节点。

基于上述两点在 Node-Red 中成立，那么就可以直接使用JS，在Node-Red中做一些应用，因此，我们直接跳到Javas cript学习了。

学习Javas cript 最重要是要明白，它是一种面对对象的编程语言。在JS”眼中”，所有的事物都是对象。

什么意思？

这意思就是：当你声明一个具体（内建）变量（比如：字串类型的）时，它就（自动）具有了（字串的）属性（比如：长度属性length），并可以使用其（针对字串的）方法(比如：提取字符串片段 slice())。

反过来说，当声明的变量为数值时，那它就具有数值的属性，对它就用数值的特定方法。数组呢？答案也一样，都是针对具体的对象。

这些与我们PLC编程操作有点儿像，对字符串就得用字符串的操作方法。

怎么使用呢？其实，很简单。所有的引用，就是用“.”英文句号。

是不是只有内建对象和方法？当然不是！你可以自建对象，自定义其属性。这些就点像PLC编程的 UDT（用户自定义的数据类型）；当你构建一个自定义对象的属性时，其对应每一个属性的方法就可以应用了。如果你注意到在Javas cript中函数也是对象。那么，针对这个自定义对象的函数，也是它的方法。

Javas cript 对象

如果理解了上述的这些基本的概念（重点是 JS 对象）。那么学习Javas cript 的门槛就一下迈进半步了。

具体的语句、语法自己慢慢看、试着用 TIY (你自己一个一个测试它)。

好了。上述链接页面左侧有教程。

下面我们来说另一半步。这就是 DOM。

DOM 是啥？

 DOM的全名是Document Object Model（文档对象模型）

为啥要知道DOM?

因为，使用JavaScriipt所面对的浏览器，不像我们用的Step7、TIA 博图是绑定在 微软的 WINDOWS操作系统上。它会面对各式各样厂商开发的浏览器（虚拟机）。如果这些浏览器对Javas cript脚本解释执行是各式各样的，那么开发者就得针对每一种浏览器，写一次程序，否则就错误百出。甚至导致浏览器“死机”。

这里的意思就是：当我们今后要用浏览器替代当前的HMI时，就要使用到DOM。

DOM是做什么的？

很明显，当使用Javas cript去操作某个浏览器界面中的HTML内容时，DOM就是能被各种浏览器支持的标准方法。在DOM眼中，把整个HTML文档看作是个对象的树；其中各层都是由元素构成的。

根据你要操作的每个对象，要预先定义对象的节点，这样你就可以很方便地找到要操作的元素了。

比如：浏览器呈现的界面是几张表格（驱动的转速、电压、电流），你需要对其内容操作时，就要在HTML 定义它们不同的元素节点（通常是 < [div] id=“xxx”）之类; 然后就可以在 Javas cript 中，通过 document.getElementById(“xxx”) 找到它，并操作它了（改变值等等）；

又比如：我们需要在浏览器界面上显示个柱图，那其中的绿、红黄“柱体”实际上是个image图像，当我们获得驱动侧电流变化时，需要使用JavaScriput将电流值变换成柱状的相对高度。然后通过document.getElementById(“xxx”) 找到它，改变其图像相对窗体的位置，不就可以了么？

在这里也很明显，这个Javas cript 应该是个可以被多次调用的函数。用它就可以去操作窗体内的各个驱动单元的（速度、电流、电压等等）柱状图。

HTML DOM

小结：DOM是一种适应不同浏览器、 呈现动态界面、快速操作对象的一种标准方法。

在Node-Red中，它也照样用到。当你在调试窗口中，鼠标指向 那些 id 时，立刻检索到这个节点。（红色虚框围绕），对吧？