技术论坛

 • 产品分类
 • 咱工程师的故事
 • 培训与认证答疑专区
 • 服务合作伙伴专区
本版精华和精编 本版高端推荐 本版热门 本版最高收藏

现在可以说了。IOT2K学习（六） 学习Javascrip t

作者 主题
至圣

经验值: 127317
发帖数: 22001
精华帖: 824
主题：【探讨】现在可以说了。IOT2K学习（六） 学习Javascrip t
精华帖精华帖星级5级 推荐帖


只看楼主 只看精华 楼主 2018-06-10 14:09:45
标签：

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

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

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


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


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

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

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


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

 

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

什么意思？

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

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

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


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


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


JavaScript 对象


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

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


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




学而时习之，不亦说乎？温故而知新，不亦乐乎？
精华帖版主置评： 从这里，开始，渐入佳境。 这个，是工控踏入IT的一个小桥梁。~老兵
以下网友喜欢您的帖子：
更多

  
重要声明：

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

帖子链接：https://www.ad.siemens.com.cn/club/bbs/post.aspx?a_id=1486864&b_id=114&s_id=0&num=29
至圣

经验值: 127317
发帖数: 22001
精华帖: 824
回复：现在可以说了。IOT2K学习（六） 学习Javascrip t
推荐帖


只看楼主 只看精华 楼主 1楼 2018-06-10 14:24:47

下面的另一半步。就要说到 DOM。它就是标准。


学而时习之，不亦说乎？温故而知新，不亦乐乎？
以下网友喜欢您的帖子：
更多

  
至圣

经验值: 28623
发帖数: 5906
精华帖: 61
回复：现在可以说了。IOT2K学习（六） 学习Javascrip t
推荐帖


只看楼主 只看精华 2楼 2018-06-10 15:43:28

JavaScript和Java的关系是不是就像VBScript和VB的关系


欢迎交流，QQ：2301013064 邮箱：feige6@139.com
以下网友喜欢您的帖子：
更多

  
至圣

经验值: 55266
发帖数: 9644
精华帖: 489
回复：现在可以说了。IOT2K学习（六） 学习Javascrip t
推荐帖


只看楼主 只看精华 3楼 2018-06-10 15:45:43

这个是我需要的


天生不宜做胜利者，自来没有胜利的欲望，只是不甘失败，十分十分不甘心失败。木心
以下网友喜欢您的帖子：
更多

  
至圣

经验值: 55266
发帖数: 9644
精华帖: 489
回复：现在可以说了。IOT2K学习（六） 学习Javascrip t
推荐帖


只看楼主 只看精华 4楼 2018-06-10 16:29:12
以下是引用菲戈在2018-06-10 15:43:28的发言 >2楼：

JavaScript和Java的关系是不是就像VBScript和VB的关系

你还别说，我真感觉这有点像VB


天生不宜做胜利者，自来没有胜利的欲望，只是不甘失败，十分十分不甘心失败。木心
以下网友喜欢您的帖子：
更多

  
至圣

经验值: 55266
发帖数: 9644
精华帖: 489
回复：现在可以说了。IOT2K学习（六） 学习Javascrip t
推荐帖


只看楼主 只看精华 5楼 2018-06-10 16:33:55

 人家NODE-RED的界面下，还可以用IOT2K发推-特。我现在连微博也扔了


天生不宜做胜利者，自来没有胜利的欲望，只是不甘失败，十分十分不甘心失败。木心
以下网友喜欢您的帖子：
更多

  
至圣

经验值: 35143
发帖数: 3236
精华帖: 96
回复：现在可以说了。IOT2K学习（六） 学习Javascrip t
推荐帖


只看楼主 只看精华 6楼 2018-06-10 18:37:09

真的很不错，看来要想做网页组态，是离不开这个JavaScript了，没办法，得用它写脚本呀。


http://blog.163.com/xiuzhang_2000/
以下网友喜欢您的帖子：
更多

  
至圣

经验值: 127317
发帖数: 22001
精华帖: 824
回复：现在可以说了。IOT2K学习（六） 学习Javascrip t
精华帖精华帖星级5级 推荐帖


只看楼主 只看精华 楼主 7楼 2018-06-10 19:58:37
以下是引用老兵在2018-06-10 16:33:55的发言 >：

 人家NODE-RED的界面下，还可以用IOT2K发推-特。我现在连微博也扔了

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

DOM 是啥？

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

为啥要知道DOM?

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

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

DOM是做什么的？

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

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

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

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

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


HTML DOM


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


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


学而时习之，不亦说乎？温故而知新，不亦乐乎？
精华帖版主置评： 嗯，有点明白了，DOM就是为了适应不同的浏览器而制定的一种标准。~老兵
以下网友喜欢您的帖子：
更多

  
至圣

经验值: 127317
发帖数: 22001
精华帖: 824
回复：现在可以说了。IOT2K学习（六） 学习Javascrip t
推荐帖


只看楼主 只看精华 楼主 8楼 2018-06-10 21:22:25
以下是引用高山孤影在2018-06-10 18:37:09的发言 >6楼：

真的很不错，看来要想做网页组态，是离不开这个JavaScript了，没办法，得用它写脚本呀。

要是想用浏览器去替代 HMI 肯定要用 JavaScript 呀。否则，你做的HTML 网页就是个：什么数据变化都没有的静态界面。跟贴张图片没啥两样了。

那肯定没法子替代呀。



学而时习之，不亦说乎？温故而知新，不亦乐乎？
以下网友喜欢您的帖子：
更多

  
至圣

经验值: 37446
发帖数: 5133
精华帖: 47
回复：现在可以说了。IOT2K学习（六） 学习Javascrip t
推荐帖


只看楼主 只看精华 9楼 2018-06-10 21:29:16

Y版厉害了！！！

自动化&IT技术融合才可以走的更远


工业起重机防摇摆 QQ:404136820 AntiSwayControl
以下网友喜欢您的帖子：
更多

  
至圣

经验值: 127317
发帖数: 22001
精华帖: 824
回复：现在可以说了。IOT2K学习（六） 学习Javascrip t


只看楼主 只看精华 楼主 10楼 2018-06-10 21:32:08

嘿嘿，其实后半步来说DOM，是为了给 IOT2K 的 DashBoard UI界面做准备呢。

尽管 我还不会用这个 UI界面。


学而时习之，不亦说乎？温故而知新，不亦乐乎？
以下网友喜欢您的帖子：
更多

  
至圣

经验值: 55266
发帖数: 9644
精华帖: 489
回复：现在可以说了。IOT2K学习（六） 学习Javascrip t


只看楼主 只看精华 11楼 2018-06-10 21:38:43
以下是引用威师爷在2018-06-10 21:29:16的发言 >9楼：

Y版厉害了！！！

自动化&IT技术融合才可以走的更远

从这个帖子开始吧，我已经开始慢慢跟着了


天生不宜做胜利者，自来没有胜利的欲望，只是不甘失败，十分十分不甘心失败。木心
以下网友喜欢您的帖子：
更多

  
至圣

经验值: 37446
发帖数: 5133
精华帖: 47
回复：现在可以说了。IOT2K学习（六） 学习Javascrip t


只看楼主 只看精华 12楼 2018-06-10 21:42:19
以下是引用老兵在2018-06-10 21:38:43的发言 >：

从这个帖子开始吧，我已经开始慢慢跟着了

不知道学这个有没有仿真软件？


工业起重机防摇摆 QQ:404136820 AntiSwayControl
以下网友喜欢您的帖子：
更多

  
至圣

经验值: 55266
发帖数: 9644
精华帖: 489
回复：现在可以说了。IOT2K学习（六） 学习Javascrip t


只看楼主 只看精华 13楼 2018-06-10 21:44:52
以下是引用威师爷在2018-06-10 21:42:19的发言 >：

不知道学这个有没有仿真软件？

乐版一楼给出的链接中那个网页是可以在线测试代码的。


天生不宜做胜利者，自来没有胜利的欲望，只是不甘失败，十分十分不甘心失败。木心
以下网友喜欢您的帖子：
更多

  
至圣

经验值: 37446
发帖数: 5133
精华帖: 47
回复：现在可以说了。IOT2K学习（六） 学习Javascrip t


只看楼主 只看精华 14楼 2018-06-10 21:48:42
以下是引用老兵在2018-06-10 21:44:52的发言 >13楼：

乐版一楼给出的链接中那个网页是可以在线测试代码的。

以下是引用威师爷在2018-06-10 21:42:19的发言 >：不知道学这个有没有...

引用详细内容：

不知道学这个有没有仿真软件？

看了一下的确是的！看来日后有的忙了。。


从今天开始学习IT技术


工业起重机防摇摆 QQ:404136820 AntiSwayControl
以下网友喜欢您的帖子：
更多

  
至圣

经验值: 127317
发帖数: 22001
精华帖: 824
回复：现在可以说了。IOT2K学习（六） 学习Javascrip t
推荐帖


只看楼主 只看精华 楼主 15楼 2018-06-10 22:08:12
以下是引用老兵在2018-06-10 21:38:43的发言 >11楼：

从这个帖子开始吧，我已经开始慢慢跟着了

以下是引用威师爷在2018-06-10 21:29:16的发言 >9楼：Y版厉害了！！！自...

引用9楼详细内容：

Y版厉害了！！！

自动化&IT技术融合才可以走的更远

学习JavaScript 本身不需要任何特殊的软件！因为它就是个脚本，HTML也是脚本。所以，你只需要一个最最普通的文本编辑器（就是Windows 中的 text 记事本）就够了。而它的执行器就是浏览器（IE、Chrome、Safari、360 都行！）

当然，你能下载个 JavaScript 编辑器，有一定的语法检查更方便些。但对于我们初学者，还是就用 记事本算了。

 另外，为此，我回头帖个测试用的 HTML 和 JS 、这样就随便学习、测试JS的语句、语法。


在 W3School 上面，还有一些 如 JSON、jQuery、AJAX之类的，都是对 JavaScript 更加简化的编程方法和人家写好的JS库。实际应用中，就像 Node-Red 一样，给你做好了，直接“拽”过来就能用。

但是，如果基础知识没掌握，后面的应用出了错都不知道是啥问题。

所以，我们还是先从比较LOW的层开始吧。




学而时习之，不亦说乎？温故而知新，不亦乐乎？
以下网友喜欢您的帖子：
更多

  
至圣

经验值: 127317
发帖数: 22001
精华帖: 824
回复：现在可以说了。IOT2K学习（六） 学习Javascrip t
推荐帖


只看楼主 只看精华 楼主 16楼 2018-06-10 22:39:11
以下是引用老兵在2018-06-10 21:44:52的发言 >13楼：

乐版一楼给出的链接中那个网页是可以在线测试代码的。

以下是引用威师爷在2018-06-10 21:42:19的发言 >：不知道学这个有没有...

引用详细内容：

不知道学这个有没有仿真软件？

注意：在那个W3School 在线教程中，那个 JS Windows 实际上指的是 “宿主对象”，指的是与你用的那种浏览器窗口对象的“交互对话”。

如果我们使用 DOM （窗口内部）基本与这个BOM (浏览器对象模型) 无关。


我这也算“深入浅出”吧。先说后边的，再说中间的，最前边的语句、语法，自己做练习就可以了。

反正我清楚： 没有人能完全记住具体的所有语句、语法（我们使用 Step 7、TIA 博图；驱动几千个参数，也是一样）。我们要的就是编程思路和方法（如同 功能图 ）。具体的细节，有这个网站，随时去查就好了。

对吧？



学而时习之，不亦说乎？温故而知新，不亦乐乎？
以下网友喜欢您的帖子：
更多

  
至圣

经验值: 127317
发帖数: 22001
精华帖: 824
回复：现在可以说了。IOT2K学习（六） 学习Javascrip t
推荐帖


只看楼主 只看精华 楼主 17楼 2018-06-11 00:20:28

虚线下面的是个测试用的 HTML 文档。直接拷贝到 Windows 附件中的 记事本中，然后另存为 Test.html 文档放在桌面上。

================================================

<!DOCTYPE html >
<html>
<head>
<title> A Test </title>
<script type="text/javascript" src="example.js"></script>
</head>
<body>
 </body>
</html>

================================================

（这个页面将调用名为 example.js的 JS脚本），这也就是构建了一个 JS的 运行环境。



下面就是写你要学习测试的JS语句、语法、操作符、函数等等。结果是通过借用 报警提示 alert() 显示出来的。

把横线中的复制到 记事本中，另存为 example.js 扩展名的文件，也放在桌面上。

-----------------------------------------------------------------------------

// 数字转成二进制代码字串
var n=60352;
var  binary_value = n.toString(2);
var  m_len = binary_value.length;
var m_bit=binary_value[3];
alert (m_len );
alert (binary_value);
alert (m_bit);


-----------------------------------------------------------------------------

双击 上面那个 html 文档。就会分别出现三个报警提示：

1、字符串长度

2、二进制值

3、位3的值 

从此之后，你只需要在修改 example.js 内容，即可学习，测试所有语句、语法、函数等等了。

（指定打开它的文件为 记事本！）



学而时习之，不亦说乎？温故而知新，不亦乐乎？
以下网友喜欢您的帖子：
更多

  
至圣

经验值: 127317
发帖数: 22001
精华帖: 824
回复：现在可以说了。IOT2K学习（六） 学习Javascrip t
推荐帖


只看楼主 只看精华 楼主 18楼 2018-06-11 09:32:46

一些JavaScript 编程在 IT 工程师中的约定：

这些如同我们在 TIA博图中编程一样，JavaScript并没有规定你如何取名称，而且它是对大小写敏感的。

如果自己遵守一定命名规则，那么很容易区分哪个是变量、哪些是函数。

变量名：全部用小写。词之间用下划线连接。

如：var binary_value = "";

函数：首字母小写，从第二个词开始用大写分割。

如： function pzdToStr ( pzd ) {


}

这样，就和方法一样，一看就知道它是什么了。




学而时习之，不亦说乎？温故而知新，不亦乐乎？
以下网友喜欢您的帖子：
更多

  
至圣

经验值: 55266
发帖数: 9644
精华帖: 489
回复：现在可以说了。IOT2K学习（六） 学习Javascrip t


只看楼主 只看精华 19楼 2018-06-11 11:05:49
以下是引用yming在2018-06-10 22:08:12的发言 >15楼：

学习Javas cript 本身不需要任何特殊的软件！因为它就是个脚本，HTML也是脚本。所以，你只需要一个最最普通的文本编辑器（就是Windows 中的 text 记事本）就够了。而它的执行器就是浏览器（IE、Chrome、Safari、360 都行！）

当然，你能下载个 Javas cript 编辑器，有一定的语法检查更方便些。但对于我们初学者，还是就用 记事本算了。

 另外，为此，我回头帖个测试用的 HTML 和 JS 、这样就随便学习、测试JS的语句、语法。


在 W3School 上面，还有一些 如 JSON、jQuery、AJAX之类的，都是对 Javas cript 更加简化的编程方法和人家写好的JS库。实际应用中，就像 Node-Red 一样，给你做好了，直接“拽”过来就能用。

但是，如果基础知识没掌握，后面的应用出了错都不知道是啥问题。

所以，我们还是先从比较LOW的层开始吧。



以下是引用老兵在2018-06-10 21:38:43的发言 >11楼：从这个帖子开始吧，...

引用11楼详细内容：

从这个帖子开始吧，我已经开始慢慢跟着了

以下是引用威师爷在2018-06-10 21:29:16的发言 >9楼：Y版厉害了！！！自...

引用9楼详细内容：

Y版厉害了！！！

自动化&IT技术融合才可以走的更远

必须从low开始。而且，其实，我认为，low比high还high
天生不宜做胜利者，自来没有胜利的欲望，只是不甘失败，十分十分不甘心失败。木心
以下网友喜欢您的帖子：
更多

  
收起
现在可以说了。IOT2K学习（六） 学习JavaScript
您收到0封站内信：
×
×
信息提示
很抱歉！您所访问的页面不存在，或网址发生了变化，请稍后再试。