JavaScript不关心HTML如何放置自己的代码,js代码可以混合在HTML代码里面,也可以像CSS代码一样,通过引入外部文件的的方式来引用js代码。在绝大部分情况下,我们选择外部引入文件的方式来引入js代码,理由和引入CSS文件一样,至于如何在HTML里面引入js代码,还是有必要学习的,所以让我们开始吧。
就如同你知道的,HTML代码的顺序很重要,因为它决定了页面元素的摆放位置。如果你要页面元素的标题(heading)出现在文本(text)的前面,那么在写HTML代码的时候,就要把标题写在文本的前面。但是JavaScript可不是这样的,例如,所有的function函数,都会在页面加载的时候,加入到内存里面去。不管js代码放在哪里,浏览器在加载的过程中,都会找到它,然后存储它。一旦页面加载完毕,只要页面显示出来,所有的js代码都已经保存在内存中,随时可以执行。
在HTML代码中,你基本可以把JavaScript代码放在任意位置,放到head部分,在body区域内的前面、中间或者最后面都可以,如果你愿意,你可以不按规矩办事,把JavaScript代码零散的分布在HTML代码的不同部位,浏览器会自动把所有的js代码整理分类出来。
通常,都是把js代码放在body区域内的最后面,这样可以优先保障CSS样式和图片展示,不会因为js代码的加载而受到影响,就是CSS样式和图片先显示出来,再加载js代码。
当你准备在HTML里面直接写js代码(另一种是引用js文件),你必须把js代码写在标签之间,下面展示了在标签之间写两个js函数。
在标签之间,你可以放任意数量的代码,也包括任意数量的function函数,而且我之前提过,如果你愿意,你可以把js代码放在HTML任意位置,但是每个js代码都要在标签之间。
在很多场合,码农更喜欢把大部分js代码,或者所有的js代码都放在独立的文件,然后浏览器在加载HTML页面的时候,也同时加载这个独立的js文件。
js文件就如同HTML文件或者css文件,只是一个简单的文本,里面内容不要标题,也不要任何其他说明区域,甚至不用标签,它只是纯粹的js代码,上面示例中,我们用js文件的方式再来表述下:
如何判断js文件是js文件呢,答案是文件名后缀:.js,前端的具体命名规则取决于你,只要合法就可以,例如,下面命名都是合法的。
HTML引入js文件的方式和引入CSS文件一样,需要闭合标签。
同样的理由,把js代码放到body区域内最后面是最好的,所以把包含js代码的外部文件标签最好也放到body区域内最后面。
只要你愿意,你可以引入任意数量的js文件。
你既可以在html文件里面,引入js文件,也可以在HTML里面直接写js代码。
本篇的代码习题,可以去下面这个地址练习: http://www.asmarterwaytolearn.com/js/43.html
读书笔记:
all the javascript code stays in memory, ready to execute, for as long as the page is displayed 只要页面显示出来,所有的javascript代码都会保存在内存中,随时可以执行。
perverse 不正当的,堕落的; 执拗的,刚愎的; 故意作对的; 有悖常情的
sprinkle 洒,撒;用…点缀;下小雨,小雨;少量
sort out 整理;解决;分类;把…安排妥当;(从…中)区分出来,辨别出来;整顿
get held up 受阻无法前进;因交通阻碍或延误某人
scattered 分散的; 零散的; 疏落的; 到处都是…的
for most purposes 对大多数(实用)场合来说,在很多(实际)场合
领取专属 10元无门槛券
私享最新 技术干货