JavaScript的引入方式
JavaScript文件的引入方式与CSS引入方式类似,主要也是分为三种:标签内联、内部写入、外部引入。
标签内联
顾名思义就是在HTML标签的内部书写JS的功能,此方法与CSS的标签内联书写类似,只需要为标签书写相应的JS功能即可,如下:
function show(){
alert("点击我了~");
}
内部书写
此方法针对JS的书写位置有一定的要求,因为页面的加载是从上往下进行,所以我们需要把JS代码使用script包含起来写在标签结构的下方,保证结构的加载之后,JS能够获取到结构并执行功能,如下:
var btn = document.getElementById("con");
con.onclick = function(){
alert("点击我了~");
}
往往有时候我们会希望JS能够像CSS一样写在页面的头部,但是如上把JS直接放到头部,页面就不会有JS功能,而一定写在头部就必须对JS功能块加上window.onload方法,即可把JS写在头部并让JS能够顺利执行。
外部引入
此方法需要再外部创建一个JS文件,然后书写JS功能,之后通过script标签的src属性来做文件的引入。但是需要注意一点,如果此script标签用于文件的引入,那在script标签之间就不允许存放任何内容(空格也不行)。
JavaScript的不同引入方式的优势与劣势
标签内联
优缺点:用得比较少,代码多,加载慢,不利于维护。
内部书写
优缺点:使用也比较多,加载速度快,一般用于访问量较大的网站或首页,但是整站代码较多,不利于维护。
外部引入
优缺点:使用最广泛,一个JS文件可控制多个页面,从整站来讲,减少代码数量,提高加载速度,便于维护。