脚本指导

Javascript可以很大程度地帮助你使页面看起来真的富有动态与活力。尽管如此,为了不让读者的浏览器变得老牛拉破车你应该尽量少写一些脚本。如果你还没有通读格式指导(至少是CSS部分)的话我会建议你先去读一下,因为本指南将会扩展其中涉及到的一些主题。

注: 如果你只是想要一些可以直接粘贴到你文章里的代码块,请向下滚动到“示例”部分。


就此开始

尽管Javascript可能会看起来很困难或者很复杂,但它实际上是一种十分容易学习并用于编写一些基本脚本的语言。


什么是Javascript?

Javascript是一种编程语言,经常和HTML、CSS一起用于创建动态和交互式的网站页面。


在Wikidot上使用JS(Javascript)

若要在一个Wikidot页面添加Javascript代码,其必须被包括在一个HTML元素中。如下:

[[html]]
你的文字输入到这里!
<script>
Javascript脚本输入到这两个脚本(script)的标签之间。
</script>
[[/html]]

而上面的那一段看起来会是这样的:

由于这段脚本在它自己的HTML“框架”中,其没有继承Wikidot的任何CSS样式——这就是字体会默认成Times New Roman的原因。你可以稍后对其进行格式制定使其看起来更像普通文本。

需要注意的是,如果你希望你的代码能与文章的内容进行交互,那么文章内容必须与你的Javascript脚本位于相同的HTML模块中。否则,你的代码将无法访问那段文章。


基本内容

如果你了解另一种编程语言的话,那么Javascript对你来说应该一点都不难。这些概念有许多在所有语言中都是共享的。


变量

变量是用来储存数值的东西。一个变量可以储存许多种类型的数据,其中最常见的是储存一个数字,一串字符,一个布尔值(true或false)或是一个对象(一组具有自身数值的多个属性)。

这样来创建一个变量:

var mingZi = 5;

“var”的意思是我们正在定义一个变量,“mingZi”则是变量的名字,“=”代表着我们正要为赋予其一个数值——即那个“5”。

变量的数值可在变量被创建后重新赋予,就像这样:

var bianLiang = 2;
bianLiang = 4;

同样可以在不指定数值的情况下创建一个变量,然后在晚些时候再赋予其一个数值:

var bianLiang;
bianLiang = 10;

让我们试试其他类型的数据:

  • 字符串

var bianLiang = "你好世界";

  • 布尔值

var bianLiang = true;
var bianLiang = false;

  • 对象

var duiXiang = {propertyOne: "你好", propertyTwo: "世界"};

对象会稍微复杂一些,我们会在稍后对其进行更深入的讨论。

数学

你可以用Javascript进行许多数学运算——举个例子:

var he = 2 + 2;

// 变量“he”将会有一个4的数值

你也可以用多个变量进行运算。

var shuZiYi = 10;
var shuZiEr = 5;
var chengJi = shuZiYi * shuZiEr;

// 变量“chengJi”将会有一个50的数值

你还可以像这样来使变量增量:

var shuZi = 5;
shuZi = shuZi * 5;

// 变量“shuZi”将会有一个25的数值

这也可以用在字符串上:

var ziFuYi = "你好";
var ziFuEr = "世界";
var zuHe = ziFuYi + ziFuEr;

// 变量“zuHe”将会有一个“你好世界”的值。

驼峰拼写法

在(用英语或拼音)命名你的变量时,使用驼峰拼写法会是一个很好的练习。简而言之,变量的名字开始时第一个字的拼音(或第一个词)全小写,而后每个字的拼音(或单词)的首字母都进行大写。比如:

var zheShiTuoFengPinXieFa;
var Zhebushituofengpinxie;
var ZHEGENGBUSHITUOFENG;


函数

函数在你要多次利用一个代码块的时候十分有用,但它可以让你不必每次都把代码块键入一遍。有了函数,你只需要在一开始为它们定义一次然后就可以想在之后调用几次就调用几次了。

这样来定义一个函数:

function hanShu() {
    return "你好世界!";
}

被调用时,这个函数将会输出一个“你好世界!”的值。

函数也可以拥有一组不同的参数。为了展示这一点,我们来做一个会将输入的两个数字相乘的简单函数。

function chengFa(shu1, shu2) {
    return shu1 * shu2;
}

// 这个函数在之后可以被调用于任意两个数字。比如:

chengFa(2, 2);
// 于是将输出4。

chengFa(20, 5);
// 于是将输出100。

函数的参数们被定义在圆括号内,并彼此用逗号分隔。实际上,尽管你可以创建的参数数量并没有限制,但请尽量将其保持在最小值。


数组

数组就是一组数据——例如,一份购物清单。一份购物清单看起来应该是这样的:

  • 鸡蛋
  • 牛奶
  • 麦片
  • 黄油

而在Javascript中,它看起来会是这样的:

var gouWuQingDan = ["鸡蛋", "牛奶", "麦片", "黄油"];

一旦我们创建了一个数组,我们就可以使用方括号访问存储在其中的值。现在假设我们想要找到列表中的第三项。

var gouWuQingDan = ["鸡蛋", "牛奶", "麦片", "黄油"];
var diSanGe = gouWuQingDan[2];
// thirdItem is now equal to "Cereal".

要注意在Javascript中数组以0开始计数而非从1开始,所以第三项的指数应该是2。

你可以通过使用“push()”和“unshift()”的方式来向一个数组添加项目。“push()”将会把一个或多个新项目添加到数组的尾部,而“unshift()”则会把项目添加到数组的首部。例如:

var liZi = ["三", "四"];

liZi.push("五", "六");
// 现在数组“liZi”的内容是["三", "四", "五", "六"]

liZi.unshift("一", "二");
// 现在数组“liZi”的内容是["一", "二", "三", "四", "五", "六"]


对象

我们之前简要地介绍了一下对象,现在我们将更深入地了解它们。对象将数据存储在键值对中,类似于字典。例如:

var xiaoQiChe = {
  color: "blue",
  horsepower: 400,
  brand: "Audi"
}

如果你想要访问对象的属性,可以使用点符号括号符号

var colorA = xiaoQiChe.color;
// 这是使用了点符号。colorA(颜色A)将会等于"blue"(蓝色)。

var colorB = xiaoQiChe['color'];
// 这是使用了括号符号。colorB(颜色B)将会同样等于"blue"(蓝色)。

也可以很容易地对对象的属性进行更改。

xiaoQiChe.color = "green";

构造函数

现在假设你想要创建多个“qiChe”对象,而它们都遵循相同的模板并具有着相同的属性。这种情况下你就可以使用所谓的对象构造函数

function Che(color, horsepower, brand) {
  this.color = color;
  this.horsepower = horsepower;
  this.brand = brand;
}

此构造函数接受三个参数并会使用这些参数创建一个对象。现在我们可以像这样使用构造函数:

var carTwo = xin Che("yellow", 510, "Ferrari");
var carThree = xin Che("white", 395, "Ford");


条件

在编写代码时,你可能常常会想要检查某件事是否正确。如果真是这样的话,则需要执行特定的操作。使用“if”(如果)语句就可以做到这一点。

if (5 > 4) {
  return "对的";
}

这是一个简单的if语句,它总是会因为5大于4而回复“对的”。如果我们像这样改变代码,它将不再执行:

if (5 > 6) {
  return "对的";
}

如果你想要检查一个次要条件,你可以使用“else If”(或者如果)语句:

if (5 > 6) {
  return "对的";
} else if (5 > 4) {
  return "可能吧";
}

在这里,它将输出“可能吧”。注意,可以有多个“else if”条件,但是如果多个条件为真,则只执行第一个true(真)条件。例如:

if (5 > 6) {
  return "对的";
} else if (5 > 4) {
  return "可能吧";
} else if (5 == 5) {
  return "可能口巴";
}

这里即使两个“else if”条件都为真,也只会执行第一个条件。

最后,如果所有条件都为假的话,你可以选择用“else”(或者)语句来执行另一个动作。

if (5 > 6) {
  return "对的";
} else if (5 == 6) {
  return "可能吧";
} else {
  return "呸";
}

由于此时上述条件无一为真,“呸”将会成为输出项。


文档对象

我们已经有了Javascript的一些基本知识,现在需要将它与HTML结合起来。而这就是文档对象的亮点所在。若要访问一个元素,你就需要它的ID。而一旦你有了它的ID,你就可以用:

document.getElementByld('元素的ID');

操纵HTML元素的方法有很多,我们现在只讲几个。如果你想改变一个元素的内容,你可以使用:

document.getElementById('元素的ID').innerHTML = '新内容';

注意,这将用新内容替换元素的所有内容。如果只是想添加一些内容,你可以使用'+='运算符。

document.getElementById('元素的ID').innerHTML += '要添加的内容';

现在,你想添加的内容就只会被添加到元素已有内容的后面了。

你也可以更改一个元素的风格,就像这样:

document.getElementById('元素的ID').style.attribute;

如果你想改变元素的边框,你可以输入:

document.getElementById('元素的ID').style.border = '3px dashed white';

现在假设你想完全删除一个元素。这是我喜欢用的方法:

document.getElementById('元素的ID').parentNode.removeChild(document.getElementById('元素的ID'));


杂项

这是其他一些有用的方程之类的。我觉得你应该了解一下。

  • setTimeout(hanShu, 延迟的时间) - 这将在延迟之后执行函数“hanShu”。延迟的计算单位是毫秒,所以1000 = 1秒。

setTimeout(hanShu(){document.write("你好世界!");}, 5000);

这将会在5秒后显示出“你好世界!”


示例

如果有必要的话,你可以在你的文章中随意使用这些示例。

跳入元素

[[html]]
<head>
<style>
@keyframes popin {
    from {opacity: 0; transform: scale(0.5);}
    to {opacity: 1; transform: scale(1);}
}

.popin-box {
    animation: popin 0.3s ease-out;
    background-color: #060606;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 1% 3% 1% 3%;
    border: 1px solid #eee;
    border-radius: 3px;
}
</style>
</head>

<body style="color: #eee; text-align: center;">
<button id="add-button" onclick="addPopinBox();">按钮上的字样</button>

<script>
function addPopinBox() {
    var boxElement = document.createElement('div');
    boxElement.className = 'popin-box';
    boxElement.innerHTML = '这是弹出来的字样';
    document.getElementById('add-button').parentNode.replaceChild(boxElement, document.getElementById('add-button'));
}
</script>
</body>
[[/html]]

这段代码将在按下按钮时创建一个具有弹出效果的新元素。


智能文本输入

[[html]]
<body style="color: #eee; text-align: center;">
<form id="name-form" onsubmit="getName();">
<input type="text" id="name-input" name="name" ><input type="submit" value="确认">
</form>

<script>
var userName;

function getName() {
    userName = document.getElementById('name-input').value;
    var welcomeBlock = document.createElement('span');
    welcomeBlock.innerHTML = '<em>欢迎,' + userName + '.</em>';
    document.getElementById('name-form').parentNode.replaceChild(welcomeBlock, document.getElementById('name-form'));
}
</script>
</body>
[[/html]]

这段代码会接受一个输入的用户名并将其显示在页面上。你可以在下面看到它的作用:

除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License