与原生JS文件混合开发
在轻语言网页开发中,可以与原生JS文件混合开发,也可以直接使用原生JS函数、即浏览器支持的任意API函数。
使用原生JS文件
代码示例:
事件 页面加载完毕()
' 这里以加载 lunar.js 库为例
' 注意:需要添加 “./static/” 资源文件夹的路径前缀,添加网络CDN地址不需要
' 该函数添加JS文件成功后、将执行“JS文件添加完毕”这个自定义函数、在该函数中返回添加成功的JS文件地址
添加JS文件("./static/js/lunar.min.js","UTF-8",JS文件添加完毕)
' 添加并引用网络地址的 jquery
添加JS文件("https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js","UTF-8",JS文件添加完毕)
结束 事件
函数 JS文件添加完毕(文件地址)
调试输出("添加成功的外部JS文件:" + 文件地址)
' 添加完毕后,在这里可以开始正常使用JS文件中的函数或功能
如果(寻找文本(文件地址,"lunar.min.js",0) != -1)
变量 局_时间 = Solar.fromDate(创建 Date())
调试输出("星期(数字):" + 局_时间.getWeek())
调试输出("星期:" + 局_时间.getWeekInChinese())
结束 如果
结束 函数
事件 按钮1.被单击(源对象,事件源)
变量 局_Solar = Solar.fromDate(创建 Date())
调试输出(局_Solar)
' 转阴历
变量 局_阴历 = 局_Solar.getLunar()
调试输出(局_阴历.toString())
调试输出(局_阴历.toFullString())
结束 事件
事件 按钮2.被单击(源对象,事件源)
' 注意:这里由于同源策略的安全限制,请求地址只能为同一个IP或域名的地址
' 如果直接访问非本源地址,会报跨域错误 Access-Control-Allow-Origin
$.get("http://www.vcnstudio.com/",(请求结果)=>{
调试输出(请求结果)
})
结束 事件
使用JS原生函数
代码示例:
事件 按钮3.被单击(源对象,事件源)
' 轻舟网站开发支持直接与原生JS代码混合开发,以及直接使用原生JS函数
' 例如:
' 网页开发中常见的内置函数,console.log()、alert() 等等
alert("我是原生Js函数调用的信息框")
console.log("我是原生js函数调用的控制台输出信息")
结束 事件
事件 按钮4.被单击(源对象,事件源)
' 使用纯JS代码创建网页元素
变量 mBtn = document.createElement("button")
' 通过 style 属性设置元素样式
mBtn.style.width = "200px"
mBtn.style.height = "100px"
mBtn.style.backgroundColor = "lightblue"
mBtn.style.border = "1px solid black"
mBtn.style.textAlign = "center"
mBtn.style.lineHeight = "100px"
mBtn.style.position = "absolute"
mBtn.style.top = "300px"
mBtn.style.left = "300px"
' 注册组件被单击事件
mBtn.addEventListener("click",()=>{
mBtn.textContent = "你点击了这个 div!"
' 改变背景颜色
mBtn.style.backgroundColor = "lightgreen"
})
' 设置元素文本(这里我们创建的是一个按钮)
mBtn.textContent = "这是一个使用JS创建的按钮"
' 将组件添加到页面根布局中
根布局.添加组件(mBtn)
结束 事件