1. 主页
  2. 文档
  3. 网站入门
  4. 君土脚本基础

君土脚本基础

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

君土脚本是什么?

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

君土脚本的应用场合极其广泛。简单到幻灯片、照片库、浮动布局和响应按钮点击。复杂到游戏、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: 数): 数 {
  定 结果 = 数1 * 数2;
  回 结果;
}

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

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

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

事件

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

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

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

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

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

完善示例网页

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

添加一个图像切换器

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

  1. 首先,找到另一张你想要在你的页面上展示的图片,且尺寸与第一张图片尽可能相同。
  2. 将这张图片储存在你的公开/图像目录下。
  3. 将图片重命名为’学习2.png’(去掉引号)。
  4. 打开 7.2.脚本换图 文件,输入下面的 脚本 代码:
引 * 作 回应 自 '回应';
引 { 用参 } 自 '回应';
引 样式 自 '样式-组件';

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

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

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

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

出 默 应用;
  1. 编译项目,并用浏览器打开 。点击图片可以发现它能够切换了!

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

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

添加个性化欢迎信息

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

  1. 打开 7.3.应用.程, 将在页面底部显示一个“切换用户”字样的按钮:<按钮 当点={切换用户}>切换用户</按钮>
  2. 将以下代码将获取新按钮和标题的引用,并保存至变量中:
  常 图片参考 = 用参<标语图像元素>();
  常 标题参考 = 用参<标语标题元素>();

      <标题 参考={标题参考}>{标题内容}</标题>
      <图像 源='./图像/学习.png' 当点={更换图片} 参考={图片参考} />
  1. 然后添加以下函数来设置个性化欢迎信息。(函数暂时不起作用,稍后修复)
  务 设置用户名() {
    定 用户名 = 提示输入('请输入你的名字。');
    若 (用户名) {
      本地存储.置项('用户名', 用户名);
      若 (标题参考?.当前) {
        标题参考.当前.文本内容 = '编程太好了,' + 用户名 + '!';
      }
    }
  }
  1. 该函数首先调用了 提示输入() 函数, 与 警告() 类似会弹出一个对话框。但是这里需要用户输入数据,并在确定后将数据存储在 用户名 变量里。接下来将调用 本地存储接口 ,它可以将数据存储在浏览器中供后续获取。这里用 本地存储 的 置项() 函数来创建一个'用户名' 数据项,并把 用户名 变量复制给它。最后将 文本内容 属性设置为一个欢迎字符串加上这个新设置的名字。
  2. 接下来,添加以下的 若 ... 别 块。我们可以称之为初始化代码,因为它在页面初次读取时进行构造工作:
  定 标题内容: 文;

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

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

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

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

  1. 最后,为按钮设置 当点 事件处理器。按钮按下时运行 切换用户() 函数。这样用户就可以通过按这个按钮来自由设置新名字了:
      <按钮 当点={切换用户}>切换用户</按钮>

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

用户名为 空(null)?

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

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

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

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

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

小结

如果你按部就班完成本文的实践,那么最终可以得到以下页面 (可以 查看我们的版本):

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

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