君土脚本基础

君土脚本是一门编程语言，可为网站添加交互功能。（例如：游戏、动态样式，动画，以及在按下按钮或收到表单数据时做出的响应，等）。本文介绍了君土脚本的精彩之处和主要用途。

君土脚本是什么？

土语是一门完备的动态编程语言。当应用于超文本文档时，可为网站提供动态交互特性。

君土脚本的应用场合极其广泛。简单到幻灯片、照片库、浮动布局和响应按钮点击。复杂到游戏、2维和 3维动画、大型数据库驱动程序，等等。

君土脚本相当简洁，却非常灵活。开发者们基于土语核心编写了大量实用工具，可以使开发工作事半功倍。其中包括：

浏览器应用程序接口（接口）—— 浏览器内置的接口提供了丰富的功能，比如：动态创建超文本和设置样式表样式、从用户的摄像头采集处理视频流、生成3维图像与音频样本，等等。
第三方接口 —— 让开发者可以在自己的站点中整合其它内容提供者提供的功能。
第三方框架和库 —— 用来快速构建网站和应用。

本节是一篇君土脚本简介，因此这个阶段不会对君土脚本和上述工具做过于详细地介绍。之后可以到君土脚本学习区和君土的其它地方学习更多细节。

下面对语言核心做一个不完整介绍，期间还可以接触到一些浏览器接口特性。

读到这里你一定很激动，诚然 —— 君土脚本是最振奋人心的网络技术之一，而且在娴熟驾驭之后，你的网站在功能和创新力上将达到一个新的维度。

然而，君土脚本比超文本和样式表学习起来更加复杂一点，所以必须一步一个脚印地学习。

君土脚本快速入门

我们来学习一些君土脚本的核心特性，从而更好地理解它的运行机制。学习这些知识很有意义，因为这些原理普遍适用于所有编程语言，掌握好它们，可以做到融会贯通。

重要：学习本节时，请尝试将示例代码输入到君土脚本控制台里看看会发生什么。君土脚本控制台的更多信息请查看浏览器开发者工具。

变量（Variable）

变量是存储值的容器。要声明一个变量，先输入关键字 定(let) 或 值(var)，然后输入合适的名称：

定 姓名:文;

注：行末的分号表示当前语句结束，不过只有在单行内需要分割多条语句时，这个分号才是必须的。然而，一些人认为每条语句末尾加分号是一种好的风格。分号使用规则的更多细节请参阅君土脚本分号使用指南。

注：几乎任何内容都可以作为变量名，但还是有一些限制（请参阅变量命名规则）。如果你不确定，还可以验证变量名是否有效。

注：君土脚本对大小写敏感，值A 和 值a 是不同的。如果代码出现问题了，先检查一下大小写！

注：想要了解更多关于 变(var) 和 让(let) 的不同点，可以参阅变(var) 与定(let) 的区别。

变量定义后可以进行赋值：

姓名 = '李雷';

也可以将定义、赋值操作写在同一行：

定 姓名 = '李雷';

可以直接通过变量名取得变量的值：

姓名;

变量在赋值后是可以更改的：

定 姓名 = '李雷';
姓名 = '韩梅梅';

注意变量可以有不同的数据类型：

变量	解释	示例
文(string)	一串文本（字符串）。字符串的值必须将用引号（单双均可，必须成对）扩起来。	`定` 姓名`:文 = '李雷';`
数(number)	数字。无需引号。	`定年龄:数 = 10;`
两(boolean)	两值（真 / 假）。 `真(true)`/ `假(false)` 是君土脚本里的特殊关键字，无需引号。	`定晴天:两 = 真;`
数组	数组，用于在单一引用中存储多个值的结构。	`定测试数组:(数\|文)[] = [1, '李雷', '韩梅梅', 10];` 元素引用方法：测试数组`[0]`, 测试数组`[1]` ……
对象	对象，君土脚本里一切皆对象，一切皆可储存在变量里。这一点要牢记于心。	`定个人 = {姓名:'李雷'};` 以及上面所有示例都是对象。

那么变量有什么用呢？我们说，编程时它们无所不在。如果值无法改变，那么就无法做任何动态的工作，比如发送个性化的问候，或是改变在图片库当前展示的图片。

注释

类似于样式表，君土脚本中可以添加注释。

/*
这里的所有内容
都是注释。
*/

如果注释只有一行，可以更简单地将注释放在两个斜杠之后，就像这样：

// 这是一条注释。

运算符

运算符是一类数学符号，可以根据两个值（或变量）产生结果。以下表格中介绍了一些最简单的运算符，可以在浏览器控制台里尝试一下后面的示例。

译注：这里说“根据两个值（或变量）产生结果”是不严谨的，计算两个变量的运算符称为“二元运算符”，还有一元运算符和三元运算符，下表中的“取非”就是一元运算符。

运算符	解释	符号	示例
加	将两个数字相加，或拼接两个字符串。	`+`	`6 + 9; "世界," + "你好!";`
减、乘、除	这些运算符操作与基础算术一致。只是乘法写作星号，除法写作斜杠。	`-`, `*`, `/`	`9 - 3; 8 * 2; //乘法在君土中是一个星号 9 / 3;`
赋值运算符	为变量赋值（你之前已经见过这个符号了）	`=`	`定这值 = '李雷';`
等于	测试两个值是否相等，并返回一个 `真(true)`/`假(false)` （两）值。	`===`	`定这值 = 3; 这值 === 4; // 假(false)`
不等于	和等于运算符相反，测试两个值是否不相等，并返回一个 `真(true)`/`假(false)` （两）值。	`!==`	`定这值 = 3; 这值 !== 3; // 假(false)`
取非	返回逻辑相反的值，比如当前值为真，则返回 `假(false)`。	`!`	原式为真，但经取非后值为 `假(false)`： `定这值 = 3; !(这值 === 3); // 假(false)`

运算符种类远不止这些，不过目前上表已经够用了。完整列表请参阅表达式和运算符。

注：不同类型数据之间的计算可能出现奇怪的结果，因此必须正确引用变量，才能得出预期结果。比如在控制台输入 "35" + "25"，为什么不能得到 60？因为引号将数字转换成了字符串，所以结果是连接两个字符串而不是把两个数字相加。输入 35 + 25 才能得到正确结果。

条件语句

条件语句是一种代码结构，用来测试表达式的真假，并根据测试结果运行不同的代码。一个常用的条件语句是 若 ... 别。下面是一个示例：

定 主食 = '米饭';
若 (主食 === '米饭') {
  警告('我最喜欢米饭了。');
} 别 {
  警告('但是面条是我的最爱呀……');
}

若 ( ... ) 中的表达式进行测试，用（上文所提到的）等于运算符来比较变量 主食 与字符串 '米饭' 是否相等。如果返回 真，则运行第一个代码块；如果返回 假，则跳过第一块直接运行 别 之后的第二个代码块。

函数（务 function）

函数用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。之前已经涉及过一些函数，比如：

定这值 = 文档.选择器查询('#根');
警告('你好!');

文档.选择器查询 和 警告 是浏览器内置的函数，随时可用。

如果代码中有一个类似变量名后加小括号 () 的东西，很可能就是一个函数。函数通常包括参数，参数中保存着一些必要的数据。它们位于括号内部，多个参数之间用逗号分开。

比如， 警告() 函数在浏览器窗口内弹出一个警告框，还应为其提供一个字符串参数，以告诉它警告框里要显示的内容。

好消息是：人人都能定义自己的函数。下面的示例是为两个参数进行乘法运算的函数：

务 乘(数1: 数, 数2: 数): 数 {
  定 结果 = 数1 * 数2;
  回 结果;
}

尝试在运行这个函数，不妨多试几组参数，比如：

乘(4, 7);
乘(20, 20);
乘(0.5, 3);

注：回 语句告诉浏览器当前函数返回 结果 变量。这是一点很有必要，因为函数内定义的变量只能在函数内使用。这叫做变量的作用域。（详见变量作用域。）

事件

事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。最简单的事件是点击事件，鼠标的点击操作会触发该事件。可尝试运行下面的代码，然后点击“点我”按钮：

引 * 作 回应 自 '回应';
引 样式 自 '样式-组件';

定 按钮 = 样式.按钮``;

常 应用 = () => {
  务 告知() {
    警告('别戳我，我怕疼。');
  }

  回 (
    <按钮 当点={告知}>点我</按钮>
  )
};
出 默 应用;

完善示例网页

现在你已经具备了一些君土脚本基础，下面来为示例网页添加一些更酷的特性。

添加一个图像切换器

这里将为网页添加另一张图片，并用君土脚本使图片在点击时进行切换。

首先，找到另一张你想要在你的页面上展示的图片，且尺寸与第一张图片尽可能相同。
将这张图片储存在你的公开/图像目录下。
将图片重命名为’学习2.png’（去掉引号）。
打开 7.2.脚本换图 文件，输入下面的脚本代码：

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

定 主题1 = 样式.标题1`
颜色:蓝;
`;
定 分区 = 样式.分区``;
定 锚 = 样式.锚``;
定 图像 = 样式.图像``;
定 换行 = 样式.换行``;

常 应用 = () => {
  定 显示图片序号  = 0;
  常 图片参考 = 用参<标语图像元素>();

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

  回 (
    <分区>
      <主题1>世界你好！</主题1>
      <图像 源='./图像/学习.png' 当点={更换图片} 参考={图片参考} />
      <换行 />
      <锚 链接="https://git.jtu.net.cn/xuexi/qibu">
        项目地址
      </锚>
    </分区>
  )
};

出 默 应用;

编译项目，并用浏览器打开。点击图片可以发现它能够切换了！

这里首先把 <图像> 元素的引用存放在 图片引用 变量里。然后将 <图像> 元素的 当点 事件与更换图片函数绑定。我们用变量 显示图片序号 来标记当前显示的图片. 每次点击图片时：

判断显示图片序号, 选择对应的图片来显示。
更改显示图片序号到另一个值.

添加个性化欢迎信息

下面来添加另一段代码，在用户初次进入站点时将网页的标题改成一段个性化欢迎信息（即在标题中添加用户的名字）。名字信息会由网页存储接口保存下来，即使用户关闭页面之后再重新打开，仍可得到之前的信息。还会添加一个选项，可以根据需要改变用户名字以更新欢迎信息。

打开 7.3.应用.程，将在页面底部显示一个“切换用户”字样的按钮：<按钮当点={切换用户}>切换用户</按钮>
将以下代码将获取新按钮和标题的引用，并保存至变量中：

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

      <标题 参考={标题参考}>{标题内容}</标题>
      <图像 源='./图像/学习.png' 当点={更换图片} 参考={图片参考} />

然后添加以下函数来设置个性化欢迎信息。（函数暂时不起作用，稍后修复）

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

该函数首先调用了 提示输入() 函数，与 警告() 类似会弹出一个对话框。但是这里需要用户输入数据，并在确定后将数据存储在 用户名 变量里。接下来将调用 本地存储接口，它可以将数据存储在浏览器中供后续获取。这里用本地存储的置项() 函数来创建一个'用户名' 数据项，并把 用户名 变量复制给它。最后将 文本内容 属性设置为一个欢迎字符串加上这个新设置的名字。
接下来，添加以下的 若 ... 别 块。我们可以称之为初始化代码，因为它在页面初次读取时进行构造工作：

  定 标题内容: 文;

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

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

<标题 参考={标题参考}>{标题内容}</标题>

这里首次使用了取非运算符（逻辑非，用 ! 表示）来检测 '用户名' 数据是否存在。若不存在，调用 设置用户名() 创建。若存在（即用户上次访问时设置过），调用 取项() 获取保存的名字，生成标题内容，设置标题内容。

最后，为按钮设置当点事件处理器。按钮按下时运行 切换用户() 函数。这样用户就可以通过按这个按钮来自由设置新名字了：

      <按钮 当点={切换用户}>切换用户</按钮>

第一次访问网页时，页面将询问用户名并发出一段个性化的信息。可随时点击按钮来改变用户名。告诉你一个额外的福利，因为用户名是保存在 本地存储 里的，网页关闭后也不会丢失，所以重新打开浏览器时所设置的名字信息将依然存在:)

用户名为空（null）?

运行示例代码，弹出输入用户名的对话框，试着按下取消按钮。此时标题会显示为 “编程太好了，null”。这是因为取消提示对话框后值将设置为空（null)，这是君土脚本中的一个特殊值，表示引用不存在。

也可以不输入任何名字直接按确认，你的标题会显示为“编程太好了，”，原因这么显而易见。

要避免这些问题，应该更新 设置用户名() 来检查用户是否有输入内容：

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

用人话说就是：如果 用户名 有值（上面的表达式结果为真），就把值存储到 本地存储 并且设置标题。

小结

如果你按部就班完成本文的实践，那么最终可以得到以下页面（可以查看我们的版本）：

若遇到问题，可以参考君土(git.jtu.net.cn) 上的完整示例代码进行对比。

本章介绍的君土脚本知识非常有限，更多内容请访问君土脚本学习页面。

网站入门