与原生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)
结束 事件