浅析如何在HTML中使用JavaScript脚本及注意问题

注意点:

1. 使用script元素
2. 嵌入脚本与外部脚本
3. 文档模式对js脚本的影响有哪些
4. 如果禁用js脚本的场景 <noscript>就可以了

1、向页面插入javascript主要方法,大家都知道使用script元素,但是它究竟具有哪些属性呢?

常用属性有4个:如下
1)async: 可选属性

立即下载脚本,不会影响页面中的其他操作(加载资源、加载其他js脚本);
有一点,它只对外部脚本文件生效

异步脚本:不保证js文件的先后执行顺序

2)defer: 可选属性

表示脚本可以延迟到文档完全解析和显示之后再执行。也就是当页面完全渲染完并显示后再执行的js文件
同理,它同样只针对外部脚本文件生效

延迟脚本:通知浏览器立即下载,延迟执行

3)src: 可选属性

引入要执行代码的外部js文件

4)type: 可选属性

替代language属性,表示编写代码使用的脚本语言的内容类型(MIME类型)

text/javascript: 属性非必需的,不写,默认值还是它
text/ecmascript
application/x-javascript: 可能会导致脚本被忽略
application/javascript: 非IE浏览器
application/ecmascript: 非IE浏览器


不太常用的属性也有2个:
1)charset: 可选属性

表示通过src属性指定的代码的字符集(这里提出了字符集概念)

什么是字符集? 这里不再详细描述,
百度百科:https://baike.baidu.com/item/%E5%AD%97%E7%AC%A6%E9%9B%86/946585
维基百科:https://zh.wikipedia.org/

2)language: 可选属性 (注:已废弃)

了解一下,之前表示编写代码所使用的脚本语言(javaScript、vbscript、JScript、etc..)


2、<script>使用方式:

1.页面中嵌入js代码

代码从上至下依次解释,嵌入式的js代码,要注意一个问题,不允许出现"</script>"字符串
浏览器会认为那是结束标签。如果这样写,需要使用转义字符"\"解决它。

2.引入外部js文件

src属性是必需,src='外部链接'

注意问题:

1. 如果使用引入外部js方式,那么'<script></script>'标签之间不要写任何嵌入式的js代码,
因为,只会下载并执行外部js代码文件,嵌入式js代码会被浏览器忽略

2.<script>元素的src属性可以加载外部域的js文件(跨域)

<script>与<img>元素的src属性可以指向当前页面所在域之外的某个域中的url
通常可以解决跨域问题,(前提确保安全性,防止恶意攻击,篡改文件)


3、<script>标签使用的位置

传统方式:放在<head>标签元素中,这样会存在问题:

必须等所有全部js代码文件被下载、解析和执行完成之后,才开始呈现页面内容
(浏览器渲染遇到<body>标签才开始展现内容哦)

弊端:如果js文件过多,会导致页面出现延迟,期间浏览器窗口会是一片空白。

正确做法:将<script>标签放在<body>标签里面,先渲染展现页面内容,从而加快页面打开的速度

 

。。。 文档模式有哪些? 文档类型doctype

混杂模式和标准模式,通知浏览器使用哪种模式来加载文档

标准下: 严格型、过渡型、框架集型 哪些区别?后续待补充吧,不枣了,洗洗睡吧

 

posted @ 2018-08-17 01:23  加勒比大橙子  阅读(2314)  评论(0编辑  收藏  举报