怎么做自己的网站后台教程,软件工程主修课程,宁波网站建设团队,番禺建设网站开发引言 将JavaScript引入网页#xff0c;首先要解决它与网页的主导语言HTML的关系问题 script元素
将JavaScript插入HTML的主要方法是使用script元素#xff0c;script有8个可选属性
async#xff1a;表示异步加载js文件内容#xff0c;他们之间的顺序不一定按照html顺序ch…引言 将JavaScript引入网页首先要解决它与网页的主导语言HTML的关系问题 script元素
将JavaScript插入HTML的主要方法是使用script元素script有8个可选属性
async表示异步加载js文件内容他们之间的顺序不一定按照html顺序charset指定js文件字符集crossorigin默认为anonymous配置文件请求不必设置凭据标志。use-credentials设置凭据标志defer表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效integrity你可以确保所引用的外部资源在下载和使用时没有被篡改。异常会报错src加载外部资源的路径type默认为text/javascript表示代码块中脚本语言的内容类型
使用方式一
直接写在script标签内部js代码会从下自下以此执行。js代码被计算完毕之前其他元素不会执行也不会显示
scriptfunction sayHi() {console.log(Hi! );}
/script在使用script标签内嵌js代码的使用js代码中不能使用/ script字符串
scriptfunction sayScript() {console.log(/script); // errorconsole.log(\/script); // 使用转移字符可以正常运行}
/script使用方式二
要包含外部文件中的JavaScript就必须使用src属性。与解释行内JavaScript一样在解释外部JavaScript文件时页面也会阻塞。
注意使用了外部资源就不能再在script标签中内嵌js
script srcexample.js/scriptscr除了可以是本地的文件外还可以是url。浏览器在解析这个资源时会向src属性指定的路径发送一个GET请求以取得相应资源
在包含外部域的JavaScript文件时要确保该域是自己所有的或者该域是一个可信的来源。
script srchttp://www.somewhere.com/afile.js/script不管包含的是什么代码浏览器都会按照script在页面中出现的顺序依次解释它们前提是它们没有使用defer和async属性。
标签位置
早期script元素都是写在head元素中但这会造成页面延迟加载
htmlhead...script srchttp://www.somewhere.com/afile.js/script/head
/html最好的做法是写在body元素最后这样就不会因为先加载js造成的延迟
htmlbody...script srchttp://www.somewhere.com/afile.js/script
/body
/html推迟执行脚本
写在head上是最好加上defer属性推迟js加载顺序。等待html加载完毕后会加载 defer属性只能用于外部的js并且如果多个script添加defer会自上而下的js加载顺序
htmlhead...script defer srchttp://www.somewhere.com/afile.js/script/head
/html异步执行脚本
和defer用法类似最大的区别是async是那个js先加载完毕会优先加载那个js。
htmlhead...script async srchttp://www.somewhere.com/afile.js/script/head
/html动态加载脚本
在把HTMLElement元素添加到DOM且执行到这段代码之前不会发送请求 let script document.createElement(script);script.src gibberish.js;document.head.appendChild(script);以这种方式获取的资源对浏览器预加载器是不可见的。这会严重影响它们在资源获取队列中的优先级 要想让预加载器知道这些动态请求文件的存在可以在文档头部显式声明它们
link relpreload hrefgibberish.js行内代码与外部文件
推荐使用外部文件引入js原因如下
更好的可维护性缓存浏览器会根据特定的设置缓存所有外部链接的JavaScript文件多个页面只用下载一次适应未来
多个js文件引入最好统一放到一个单独的js引入
scriptsrcmainB.js/script
scriptsrccomponent3.js/script
scriptsrccomponent4.js/script
scriptsrccomponent5.js/script
...文档模式
文档模式有三种混杂模式标准模式准标准模式 三种模式的区别主要体现在css的使用结果上
标准模式声明
! -- HTML 4.01 Strict --
! DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd
! -- XHTML 1.0 Strict --
! DOCTYPE html PUBLIC
-//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
! -- HTML5--
! DOCTYPE html非标准模式声明
! -- HTML 4.01 Transitional --
! DOCTYPE HTML PUBLIC
-//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd
! -- HTML 4.01 Frameset --
! DOCTYPE HTML PUBLIC
-//W3C//DTD HTML 4.01 Frameset//EN
http://www.w3.org/TR/html4/frameset.dtd
! -- XHTML 1.0 Transitional --
! DOCTYPE html PUBLIC
-//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
! -- XHTML 1.0 Frameset --
! DOCTYPE html PUBLIC
-//W3C//DTD XHTML 1.0 Frameset//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtdnoscript元素
主要为了解决游览器不支持/禁用script而出现被用于给不支持JavaScript的浏览器提供替代内容
当游览器不支持或者禁用scriptnoscript会被加载可以放在任意位置
! DOCTYPE html
htmlheadtitleExample HTML Page/titlescript deferdefer srcexample1.js/scriptscript deferdefer srcexample2.js/script/headbodynoscript// 游览器将会展现这句话pThis page requires a JavaScript-enabled browser./p/noscript/body
/html
