我们知道了如何在网页中引入 JS,下面就该实际写一下了。不过别说复杂的,就是基础的我们也还不会写呀,否则我们还看教程做什么呢?虽然如此,可我们还是希望能够写一点,立刻就看到效果的东西。

那我们就写个输出语句吧,简单的说就是把一定的内容显示出来,这很简单:

alert('Hello World!');

差不多是每一个 JS 教程的第一个程序了。大家按照上节课的引入方法去试着写一下,看看能否成功,预期的效果就是打开页面的时候会弹出一个提示框,像下面这样:

提示框

这是一个最简单直观的输出,太明显了,明显到我们不确认一下就不能对页面进行其他交互了。嗯,这种霸道的东东叫做“模态框”。

那现在有几个问题我们要解释一下:

语句

语句是代码的一个基本单位。差不多进行一个基本操作就是一个语句,这和我们自然语言中的一句话很类似,具体的我们慢慢体会。

然后每一个语句后面用分号分隔,并不一定要换行,不过我们会用换行来使代码变得容易阅读。

按着最新标准,如果进行了换行,那么分号是可以省略的。但是,我觉得作为初学者,最好还是先写上。等你真的理解了,再省略掉分号,这很容易做到。但是如果上来就不写,等到自己搞混乱了再想理清楚,就比较麻烦了。

控制台(Console)

这么一句 JS,我们想看看效果,还要写个网页(哪怕是空白网页),真让人觉得十分麻烦。(我就是这么懒,而且理直气壮!

那我们来学习一个简单的方法,这对于我们前期的一些测试还是很方便的。就是在开发者工具里,切换到 Console (控制台)选项卡,在那个 > 图标后面就可以输入你的 JS 代码了,回车即可运行,如果需要换行,则使用 Shift+Enter

如果我们真的随便使用一个网页,也许控制台里面乱七八糟的已经有了一些东西,而且网页的某些设置,也有可能影响到我们代码的结果,这就不方便我们探索了。所以你可以打开这个地址:about:blank,一般的,浏览器里这个页面就是一个空白页,啥都没有那种。

那么我们试着在里面运行一下刚刚学过的语句吧~

控制台

日志

很多新人喜欢使用 alert 进行输出,因为这很直观。但是这个方法无论是在体验上,还是对于程序的运行,都是“打断式”的,但是我们多数时间并不需要如此(需要的时候也还有更好的方法),所以我们再来学习一个控制台输出:

console.log('Hello World!');

我们知道 console 是控制台了,那么 log 在这里是日志的意思。连起来就是在控制台输出日志。大家去控制台测试一下效果吧~

控制台输出

这次页面没有任何的反应,只是在控制台里显示出了一行字:Hello world!。这就很安静,无打扰,静悄悄的躲在这里,只有当你需要的时候,来这里看,才会找到它。

引号

引号表示把某些内容标记为一个整体,我们主要是对字符串(就是一串文字)使用。然后可以嵌套,外面使用双引号,里面使用单引号。这些在后面我们也会遇到,现在先知道有这么回事,用的时候我们再慢慢理解。

按着我们的正常习惯,那么第一次使用(最外层),肯定会先选择双引号,这样是没有任何问题的;但是你可能注意到了,我选用的是单引号,这也没有什么问题,可以认为单纯的习惯。不过,在某些情况下,你会发现最外层使用单引号会减少好多麻烦。这个习惯似乎也就对 JS 有用,因为它要操作页面中的内容,而页面代码里似乎有很多双引号了……所以用起来就知道方便了。

【本章助记卡片:卡片 for 第九十一章