1. 主页
  2. 文档
  3. 学习君土脚本
  4. 君土脚本 第一步
  5. 什么是君土脚本?

什么是君土脚本?

欢迎来到 君土脚本初学者课程!本节将在一定高度俯瞰 君土脚本,回答一些诸如“它是什么?”和“它能做什么?”的问题 。并使你熟悉 君土脚本 的用途。

什么是君土母语编程?

君土母语编程就是让人们能够用自己的母语文字来编写计算机程序,并且可以用自己的母语文字名称使用别的文字开发的程序。

什么是君土脚本语言?

君土脚本语言是君土母语编程对类型脚本(TypeScript)编程语言的中文编程实现。君土脚本语言让人们用中文就能开发计算机程序。用君土脚本语言编写的代码可以编译成纯脚本语言(JavaScript)代码,这些脚本语言代码可以运行在任何浏览器上,也可以运行在手机、电脑和服务器上。

广义的定义

君土脚本是一种脚本,一门编程语言,它可以在网页上实现复杂的功能,网页展现给你的不再是简单的静态信息,而是实时的内容更新,交互式的地图,2维/3维 动画,滚动播放的视频等等。脚本怎能缺席。它是标准 Web 技术蛋糕的第三层,其中超文本( HTML )和样式表( CSS )我们会在学习中心的其他部分进行了详细的讲解。

  • 超文本(HTML)是一种标记语言,用来结构化我们的网页内容并赋予内容含义,例如定义段落、标题和数据表,或在页面中嵌入图片和视频。
  • 样式表(CSS)是一种样式规则语言,可将样式应用于 HTML 内容, 例如设置背景颜色和字体,在多个列中布局内容。
  • 君土脚本是一种脚本语言,可以用来创建动态更新的内容,控制多媒体,制作图像动画,还有很多。(好吧,虽然它不是万能的,但可以通过简短的代码来实现神奇的功能。)

这三层依次建立,秩序井然。

引 * 作 回应 自 '回应';
引 { 用参 } 自 '回应';
引 { 绘制 } 自 '回应-模';
引 样式 自 '样式-组件';

定 钮 = 样式.钮``;

定 容 = 样式.容`
// 宽: 100%;
缘: 0 机;
背景色: #FF9500;
衬: 0 20素 20素 20素;
框: 5素 实 黑;
`;

定 点 = 样式.点``;
定 起 = 样式.起``;
定 段 = 样式.段`
宽: 100%;
`;
定 杂 = 样式.杂``;
定 项 = 样式.项`
字号: 16素;
行高: 2;
字间: 1素;
`;
定 像 = 样式.像`
宽: 机;
高: 机;
顶: 100%;
广: 100%;
视: 块;
缘: 0 机;
`;

定 标题 = 样式.题1`
缘: 0;
衬: 10素 0;
颜: #00539F;
文影: 1素 1素 1素 黑;
`;


常 应用 = () => {
  常 图片参考 = 用参<标语像项>();
  常 标题参考 = 用参<标语题项>();

  定 标题内容: 文;

  务 更换图片() {
    若 (图片参考.当前.源.尾('/xuexi.png')) {
      图片参考.当前.源 = 'xuexi2.png'
    } 别 {
      图片参考.当前.源 = 'xuexi.png'
    }
  }

  务 切换用户() {
    设置用户名();
  }

  务 设置用户名() {
    定 用户名 = 提示输入('请输入你的名字。');
    若 (用户名) {
      本地存储.置项('用户名', 用户名);
      若 (标题参考?.当前) {
        标题参考.当前.文本内容 = '编程太好了,' + 用户名 + '!';
      }
    }
  }

  若 (!!!本地存储.取项('用户名')) {
    设置用户名();
  }

  定 用户名 = 本地存储.取项('用户名');
  若 (用户名) {
    标题内容 = '编程太好了,' + 用户名 + '!';
  } 别 {
    标题内容 = '编程太好了!';
  }

  回 (
    <容>
      <标题 参考={标题参考}>{标题内容}</标题>
      <像 源='xuexi.png' 当点={更换图片} 参考={图片参考} />
      <段>君土 是一个全球社区,这里聚集着来自五湖四海的</段>
    <杂>
      <项>技术人员</项>
      <项>思考者</项>
      <项>建造者</项>
    </杂>
    <段>我们致力于普及母语编程</段>

      <钮 当点={切换用户}>切换用户</钮>
      <起 />
      <点 用="https://git.jtu.net.cn/xuexi/qibu">
        项目地址
      </点>
    </容>
  )
};

绘制(<应用 />, 文档.查选('#根'));

应用地址:https://xuexi.jtu.mobi/qibu/
项目地址:https://git.jtu.net.cn/xuexi/qibu

君土脚本能做的远不止这些。让我们来仔细探索。

它到底可以做什么?

客户端君土脚本语言的核心包含一些普遍的编程特性,以让你可以做到如下的事情:

  • 在变量中储存有用的值。比如上文的示例中,我们请求客户输入一个新名字,然后将其储存到 用户名 变量中。
  • 操作一段文本(在编程中称为“字符串”(文))。上文的示例中,我们取字符串 “编程太好了,”,然后把它和 用户名 变量连结起来,创造出完整的文本标签,比如:”编程太好了,小明”。
  • 运行代码以响应网页中发生的特定事件。上文的示例中,我们用一个当点事件来检测按钮什么时候被点击,然后运行代码更新文本标签。
  • 以及更多!

君土脚本语言核心之上所构建的功能更令人兴奋。应用程序接口(Application Programming InterfacesAPI))将为你的代码提供额外的超能力。

应用程序接口(API) 是已经建立好的一套代码组件,可以让开发者实现原本很难甚至无法实现的程序。就像现成的家具套件对于家居建设那样,用一些已经切好的木板组装一个书柜,显然比自己设计,寻找合适的木材,裁切至合适的尺寸和形状,找到正确尺寸的螺钉,再组装成书柜要简单得多。

应用程序接口 通常分为两类。

浏览器程序接口 内建于网页浏览器中,它们可以将数据从周边计算机环境中筛选出来,还可以做实用的复杂工作。例如:

  • 文档对象模型 API(DOM(Document Object Model)API) 能通过创建、移除和修改 HTML,为页面动态应用新样式等手段来操作 HTML 和 CSS。比如当某个页面出现了一个弹窗,或者显示了一些新内容(像上文小 demo 中看到那样),这就是 DOM 在运行。
  • 地理位置 API(Geolocation API) 获取地理信息。这就是为什么 高德地图 可以找到你的位置,而且标示在地图上。
  • 画布(Canvas) 和 网页图形库(WebGL) API 可以创建生动的 2D 和 3D 图像。人们正运用这些 网页 技术制作令人惊叹的作品。
  • 诸如 超文本媒体元素(HTMLMediaElement) 和 网页实时通信(WebRTC) 等 影音类 API 让你可以利用多媒体做一些非常有趣的事,比如在网页中直接播放音乐和影片,或用自己的网络摄像头获取录像,然后在其他人的电脑上展示。

第三方程序接口 并没有默认嵌入浏览器中,一般要从网上取得它们的代码和信息。比如:

:这些程序接口 较为高级,我们的课程中不会涉及.

先稳住!你看到的只是冰山一角。你不可能学一天君土脚本就能构建下一个京东商城, 高德地图, 或者微信。敬请「牢记初心,砥砺前行」。

服务器端代码与客户端代码

在网站开发时, 我们经常会说 服务器端代码和 客户端 代码这两个术语。

客户端代码是在用户的电脑上运行的代码,在浏览一个网页时,它的客户端代码就会被下载,然后由浏览器来运行并展示。这就是客户端脚本(JavaScript)

而服务器端代码在服务器上运行,接着运行结果才由浏览器下载并展示出来。君土脚本可用作服务器端语言,比如现在流行的无服务器云服务环境。

君土提供无服务器云服务。在君土,开发人员不需要关心服务器,也不需要关心运维,就可以发布用母语脚本编写的云端服务。

开发人员只需要编写一个个函数,无服务器云计算就把这些函数部署到云端,应用的页面就可以访问这些云端的函数。这大幅降低了互联网应用开发的门槛。

例子:回声

回声应用是一个简单的云服务,它把接受到的请求原样返回。

入口.式

引 { 君土务 } 自 "君土务";
引 { 信息 作 信息型 } 自 '@君土务/信息';
引 { 云函数 作 回声 } 自 "./回声";

途 务 调用函数(函数: 君土务, 信息: 信息型) {
  若 (函数.$参数种 === '信息') {
    回 函数(信息);
  } 别 {
    回 函数(信息.载荷);
  }
}

定 函数调用对应: 映<文, 君土务> = 启 映();

途 务 入口(信息: 信息型) {
  // 定 凭证 = 信息.标头.取值('凭证');
  定 路径: 文 | 空 = 信息.标头.取值('jt-wu');
  控制台.日志(路径);
  若 (路径) {
    定 函数 = 函数调用对应.读(路径);
    若 (函数) {
      回 调用函数(函数, 信息);
    }
  }
}


定 云函数: 君土务 = 入口;

云函数.$参数种 = '信息';

云函数.$成 = 途 () => {
  函数调用对应.置('huisheng', 回声);

  为 (定[_, 函数]在 函数调用对应.项()) {
    若 (函数.$成) {
      等 函数.$成();
    }
  }
}

模块.输出 = 云函数;

回声.式

引 { 君土务 } 自 "君土务";

务 回声(名: 化) {
    控制台.日志(象谱.串(名));
    若 (样 名 == 样{}) {
        若 (对象.键(名).长 === 1 && 名[对象.键(名)[0]] === "") {
            名 = 名[对象.键(名)[0]];
        } 别 {
            名 = 象谱.串(名);
        }
    } 别 若 (样 名 !== 样'') {
        名 = '错误: 非预期的参数类型 ' + (样 名);
    }

    // 定 环境: 化 = {}
    // 为 (定 [键, 量] 在 对象.条目(进程.境)) {
    //     若 (键.始('MY_')) {
    //         环境[键] = 量
    //     }
    // }

    // 回 `${名} - ${象谱.串(环境)}`;
    回 `${名}`;
};

出 定 云函数: 君土务 = 回声;


// 模块.输出 = 回声;

应用地址:https://xuexi.jtu.mobi/wu/
项目地址:https://git.jtu.net.cn/xuexi/wu

小结

恭喜你,迈出了探索君土脚本世界的第一步。我们从理论开始,介绍为什么要使用君土脚本,以及用它能做什么事情。

现在君土脚本或许还有些令人生畏,但不用担心。在课程中我们会循序渐进。下一节将全力投入实战,让你专注其中,并建立自己的君土脚本示例。