目录
1前言
暂无
2 JavaScript简介
了解或接触过前端开发的同事应该都清楚，前端的三大基础为HTML、CSS、JavaScript，这三大基础在前端中分别起到如下的作用：
- HTML：网页的内容主体，内容的来源
- CSS：控制网页的样式和布局
- JavaScript：增强交互，增强用户体验，让网页“动”起来
2.1概念及作用
JavaScript是一门脚本语言，运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎，不需要编译，直接就可以被浏览器解析执行。主要作用是可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。
2.2发展史
-
-
- 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C--，后来更名为：ScriptEase
- 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
- 1996年，微软
抄袭借鉴JavaScript开发出JScript语言 - 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。
-
结合上述的发展史，其实可以简单的理解JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)。而本次需要分享的内容，也就是ECMAScript。
3 JavaScript语法
3.1学习准备
IDE选择：在学习阶段根据个人需要，可以直接使用文本编辑器如记事本、notepad++等，也可以使用WebStorm（比较臃肿，不推荐使用）、Visual Studio Code（推荐）。
参考资料：推荐w3cchool，链接为：https://www.w3school.com.cn/js/index.asp
前置知识：建议自行在w3cchool了解关于HTML的基础知识，预计耗时为60分钟左右。如果具备一定基础，请忽略。
3.2 JavaScript与HTML结合
- 内部JS：定义<script>，标签体内容就是js代码
| <!DOCTYPE html> <html> <body> <h1>A Web Page</h1> <p id="demo">一个段落</p> <button type="button" οnclick="myFunction()">试一试</button> <script> function myFunction() { document.getElementById("demo").innerHTML = "段落被更改。"; } </script> </body> </html> |
- 外部JS：定义<script>，通过src属性引入外部的js文件
| <script src="myScript.js"></script> |
注意： <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序；<script>可以定义多个。
3.3 JavaScript注释及命名规则
- 单行注释：//注释内容 多行注释：/*注释内容*/
- 分号用于一行语句的结束，如果一行只有一条语句则可以省略，但是不推荐省略分号
- { } 用于包裹代码块
- JavaScript中大小写敏感
- 推荐命名规则：
可包含字母、数字、下划线和美元符号
名称也可以 $ 和 _ 开头（但是不推荐）
推荐命名为小驼峰命名，如：firstName, lastName, masterCard, interCity
3.4 JavaScript中原始数据类型
- number：数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
- string：字符串。 字符串 "abc" "a" 'abc'
- boolean: true和false
- null：一个对象为空的占位符
- undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
- 引用数据类型：即对象
3.5 JavaScript中变量
变量是指一小块存储数据的内存空间，java是强类型语言，JavaScript是弱类型语言。强类型语言：在开辟变量存储空间时，定义了空间将来的数据的数据类型，只能存储固定类型的数据；弱类型语言：在开辟变量存储空间时，不定义空间将来 数据的数据类型。能存储任意类型的数据；JavaScript中可以使用typeof运算符返回变量的类型。
变量定义的语法：
| var 变量名=变量值； |
3.6 JavaScript中运算符
1）一元运算符：只有一个运算数的运算符
++，-- ， +(正号)
++ --: 自增(自减)
++(--) 在前，先自增(自减)，再运算
++(--) 在后，先运算，再自增(自减)
+(-)：正负号
注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换。string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）；boolean转number：true转为1，false转为0
2）. 算数运算符
+ 加
- 减
* 乘
/ 除
% 求余
3）赋值运算符
=
+=
4）比较运算符
> 大于
< > 不等于
<= 小于等于
>= 大于等于
== 等于：类型相同：直接比较；字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。类型不同：先进行类型转换，再比较。
=== 全等于：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
5）逻辑运算符
&& 与
|| 或
! 非
注意：其他类型转boolean： number：0或NaN为假，其他为真； string：除了空字符串("")，其他都是true；null&undefined:都是false；对象：所有对象都为true。
6）三元运算符
语法：表达式? 值1:值2;
判断表达式的值，如果是true则取值1，如果是false则取值，使用示例如下：
| var c = a > b ? 1:0; |
3.7 JavaScript常见的输出语法
-
-
- 使用 window.alert() 写入警告框
- 使用 document.write() 写入 HTML 输出
- 使用 innerHTML 写入 HTML 元素
- 使用 console.log() 写入浏览器控制台
-
3.7 JavaScript的关键字
| 关键词 | 描述 |
| break | 终止 switch 或循环。 |
| continue | 跳出循环并在顶端开始。 |
| debugger | 停止执行 JavaScript，并调用调试函数（如果可用）。 |
| do ... while | 执行语句块，并在条件为真时重复代码块。 |
| for | 标记需被执行的语句块，只要条件为真。 |
| function | 声明函数。 |
| if ... else | 标记需被执行的语句块，根据某个条件。 |
| return | 退出函数。 |
| switch | 标记需被执行的语句块，根据不同的情况。 |
| try ... catch | 对语句块实现错误处理。 |
| var | 声明变量。 |
3.8 JavaScript的流程控制语句
- if...else...
语法：
| if (条件 1) { 条件 1 为 true 时执行的代码块 } else if (条件 2) { 条件 1 为 false 而条件 2 为 true 时执行的代码块 } else { 条件 1 和条件 2 同时为 false 时执行的代码块 } |
- Switch
如果 JavaScript 遇到 break 关键词，它会跳出 switch 代码块。此举将停止代码块中更多代码的执行以及 case 测试。如果找到匹配，并完成任务，则随机中断执行（break）。无需更多测试。break 能够节省大量执行时间，因为它会“忽略” switch 代码块中的其他代码的执行。不必中断 switch 代码块中的最后一个 case。代码块在此处会自然结束。
语法：
| switch(表达式) { case n: 代码块 break; case n: 代码块 break; default: 默认代码块 } |
- While
while 循环会一直循环代码块，只要指定的条件为 true。
语法：
| while (条件) { 要执行的代码块 } |
注意：如果while (条件)中的条件永远是true，那么这个循环则永远不会结束，请不要在rhapsody使用类似语法。
- do...while
do/while 循环是 while 循环的变体。在检查条件是否为真之前，这种循环会执行一次代码块，然后只要条件为真就会重复循环。
语法：
| do { 要执行的代码块 }
while (条件); |
- for
语法：
| for (语句 1; 语句 2; 语句 3) { 要执行的代码块 } |
综合使用示例，打印九九乘法表：
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>99乘法表</title> <style> td{ border: 1px solid; } </style> <script> document.write("<table align='center'>"); //1.完成基本的for循环嵌套，展示乘法表 for (var i = 1; i <= 9 ; i++) { document.write("<tr>"); for (var j = 1; j <=i ; j++) { document.write("<td>"); //输出 1 * 1 = 1 document.write(i + " * " + j + " = " + ( i*j) +" "); document.write("</td>"); } /*//输出换行 document.write("<br>");*/ document.write("</tr>"); } //2.完成表格嵌套 document.write("</table>"); </script> </head> <body> </body> </html> |
4 rhapsody中的JavaScript
引擎中对于消息、过滤器等内置了大量的JavaScript属性和方法。
4.1 常见的消息属性
- text：字符类型的消息内容，如果消息体是xml格式时，其字符集为UTF-8，否将使用缺省的字符集
- body：字节数组类型，消息的内容。
- bodyEncoding：消息体的字符集，如果设置了不存在的字符集，那么将消息将使用系统缺省字符集。
- xml：消息的xml对象
4.2 常见的消息方法
- setText(string body, string encoding)：设置消息体，第一个参数为消息内容的字符串，第二个参数为字符集。第二个参数可以省略，但是通常我们执行为UTF8
- addError(string error)：为消息设置一个错误，这样会使消息进入错误队列
- setProperty(string propertyName, string value)：设置消息的属性，第一个参数为消息的属性名称，第二个参数为属性值。
- getProperty(string propertyName)：获取指定属性名的属性值。
- getField(string fieldPath)：获取指定路径的消息内容，通常用于xml消息指定xpath解析内容
- getText(string encoding)：以指定的字符集获取消息体
- getErrors()：获取错误描述信息
- getBodySize()：获取消息大小，单位为bytes
4.3 常见的公共方法
- generateUuid()：获取UUID
- dateChangeFormat(string dateTimeString, string oldFormat, string newFormat)：对日期时间字符串格式化
- getVariable(variableName[, decryptVariable]):获取公共变量的值
- decodeBase64(base64encodedString)：对base64编码的字符串解码
- decodeBase64(value[, encoding])：对base64编码的字符串以指定的字符集解码
- encodeBase64(value[, chunked[, encoding]])：对字符串以指定的字符集编码
4.4综合案例
需求：需要将xml消息按时间相同拆分
输入消息如下：
| <INPUT> <LIST> <OccurrenceDT>2020-05-18 07:00:00</OccurrenceDT> <Names>体温</Names> </LIST> <LIST> <OccurrenceDT>2020-05-18 07:00:00</OccurrenceDT> <Names>心率（HR）</Names> </LIST> <LIST> <OccurrenceDT>2020-05-18 08:00:00</OccurrenceDT> <Names>血氧饱和度(SPO2)</Names> </LIST> <LIST> <OccurrenceDT>2020-05-18 08:00:00</OccurrenceDT> <Names>呼吸(R)</Names> </LIST> <LIST> <OccurrenceDT>2020-05-18 09:00:00</OccurrenceDT> <Names>心率（HR）</Names> </LIST> <LIST> <OccurrenceDT>2020-05-18 09:00:00</OccurrenceDT> <Names>呼吸(R)</Names> </LIST> </INPUT>
|
要求输出消息为如下三条：
| <INPUT> <Names>体温</Names> <OccurrenceDT>2020-05-18 07:00:00</OccurrenceDT> <Names>心率（HR）</Names> <OccurrenceDT>2020-05-18 07:00:00</OccurrenceDT> </INPUT> |
| <INPUT> <Names>血氧饱和度(SPO2)</Names> <OccurrenceDT>2020-05-18 08:00:00</OccurrenceDT> <Names>呼吸(R)</Names> <OccurrenceDT>2020-05-18 08:00:00</OccurrenceDT> </INPUT> |
| <INPUT> <Names>心率（HR）</Names> <OccurrenceDT>2020-05-18 09:00:00</OccurrenceDT> <Names>呼吸(R)</Names> <OccurrenceDT>2020-05-18 09:00:00</OccurrenceDT> </INPUT> |
JavaScript过滤器中的实现如下：
| var count=input[0].getRepeatCount("/INPUT/LIST/OccurrenceDT");//取LIST循环次数 var tempDate=''; //临时变量，记录上一次的发生时间 var body=''; //临时变量，缓存消息体 for(i=0;i<count;i++) { var OccurrenceDT = input[0].getField("/INPUT/LIST["+(i+1)+"]/OccurrenceDT"); var Names = input[0].getField("/INPUT/LIST["+(i+1)+"]/Names");
if (i==0) { //第一次循环，初始化时间临时变量，并缓存消息体，但是不需要生成一次消息，下一次循环判断后处理 tempDate=OccurrenceDT; body='<Names>'+Names+'</Names><OccurrenceDT>'+OccurrenceDT+'</OccurrenceDT>';
} else{ //非第一次循环 //一共两种情况，要么和上一次时间相等，要么不等 //如果相等，就继续拼接消息体，但是不生成新的消息 if (OccurrenceDT==tempDate){ body=body+'<Names>'+Names+'</Names><OccurrenceDT>'+OccurrenceDT+'</OccurrenceDT>'; //如果是最后一次，那么直接返回 if(i==count-1){ var next = output.append(input[0]); next.setText('<INPUT>'+body+'</INPUT>','UTF8'); } } //如果不相等，生成新的消息，并重置缓存的消息体，并重置缓存的时间 else{ var next = output.append(input[0]); next.setText('<INPUT>'+body+'</INPUT>','UTF8'); body='<Names>'+Names+'</Names><OccurrenceDT>'+OccurrenceDT+'</OccurrenceDT>'; tempDate=OccurrenceDT; //如果是最后一次，那么直接返回 if(i==count-1){ var next = output.append(input[0]); next.setText('<INPUT>'+body+'</INPUT>','UTF8'); } }
}
} |
962
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
