学习君土脚本

  2. 主页
  4. 文档
  6. 学习君土脚本
  8. 君土脚本 第一步
  10. 什么是君土脚本？

什么是君土脚本？

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

什么是君土母语编程？

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

什么是君土脚本语言？

君土脚本语言是君土母语编程对类型脚本（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像素 黑;
`;


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

  定 标题内容: 文;
  定 显示图片序号  = 0;

  务 更换图片() {
    若 (显示图片序号 === 0) {
      图片参考.当前.源 = './图像/学习2.png'
      显示图片序号 = 1;
    } 别 {
      图片参考.当前.源 = './图像/学习.png'
      显示图片序号 = 0;
    }
  }

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

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

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

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

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

      <按钮 当点={切换用户}>切换用户</按钮>
      <换行 />
      <锚 链接="https://git.jtu.net.cn/xuexi/qibu">
        项目地址
      </锚>
    </分区>
  )
};

出 默 应用;

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

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

它到底可以做什么？

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

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

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

应用程序接口（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

小结

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

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