js002-在HTML中使用JavaScript
js002-在HTML中使用JavaScript
2.1 <script>元素
定义了以下6个属性
async: 可选。表示应该立即下载脚本,但不妨碍页面中的其他操作,比如下载其他资源或者等待加载其他脚本。只对外部脚本文件有效。(异步的) |
charset:可选。表示通过src属性指定的代码的字符集。 |
defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行,只对外部脚本有效。IE7及其更早的版本也支持这个属性。(延迟,延期) |
src:可选。表示包含要执行代码的外部文件。 |
type:可选。可以看成是language的替代属性,表示编写代码使用的脚本语言的内同类型 |
<script type="text/javascript"></script>
使用<script>元素的方法有两种在:直接嵌入Javascript代码和包含外部Javascript文件
2.1.1直接嵌入Javascript代码:
<script type="text/javascript"> function sayhi(){ alert("hi~"); } </script> |
直接嵌入Javascript代码时,不要再代码中出现</script>,否则浏览器会认为那是一个结束标签,通过转义符可以解决这个问题
有问题: <script type="text/javascript"> function sayhi(){ alert("</script>"); } </script> |
解决问题: <script type="text/javascript"> function sayhi(){ alert("<\/script>"); } </script> |
2.1.2 引入外部Javascript文件
必须包含src属性,这个属性值是一个指向外部Javascript文件的链接。
<script type="text/javascript" src="example.js"> function sayhi(){ alert("hi~"); } </script> |
2.1.3标签的位置
一般放在页面的<head>元素里面
<!DOCTYPE html> <html> <head> <title>example page</title> <script type="text/javascript" src="example1.js"></script> <script type="text/javascript" src="example2.js"></script> </head> <body> (内容) </body> </html> |
放在所有内容的后面,这样浏览器在解析Javascript代码之前就把整个页面展示出来了,这样加快了打开速度。
<!DOCTYPE html> <html> <head> <title>example page</title> </head> <body> (内容) <script type="text/javascript" src="example1.js"></script> <script type="text/javascript" src="example2.js"></script> </body> </html> |
2.1.4延迟脚本 defer属性 (只适用于外部文件)
在<script>元素中使用defer属性,相当于告诉浏览器立即下载,单延迟执行。(在遇到</html>元素后才执行)
<!DOCTYPE html> <html> <head> <title>example page</title> <script type="text/javascript" defer="defer" src="example1.js"></script> <script type="text/javascript" defer="defer" src="example2.js"></script> </head> <body> (内容) </body> </html> |
在html文档中,要把defer属性设置为defer="defer"。
2.1.5异步脚本 async属性,用来改变处理脚本的行为,只适用于外部脚本
<!DOCTYPE html> <html> <head> <title>example page</title> <script type="text/javascript" async="async" src="example1.js"></script> <script type="text/javascript" async="async" src="example2.js"></script> </head> <body> </body> </html> |
第二个脚本可能会在第一个脚本之前执行,所以保证两个脚本的不相关性很重要。
在html文档中,要把sync属性设置为async="async"
2.1.6在xhtml中的用法
<script type="text/javascript"> function compare(a, b){ if (a < b) { alert("A is less than B"); }else if (a > b) { alert("A is greater than B"); }else{ alert("A is equal to B"); } } </script> |
用(<) 替换代码中的小于号(<)
如:if (a < b) |
2.2 嵌入代码与外部文件
最好适用外部文件,外部文件有以下优点:
可维护性:维护代码比较轻松 |
可缓存:浏览器能根据具体的设置缓存连接的所有外部Javascript文件 |
适应未来: |
2.3 文档模式
混杂模式和标准模式
2.4 <noscript>元素
在以下集中情况中会显示出来(一般放在body中)
浏览器不支持脚本 |
浏览器支持脚本,但是脚本被禁用 |
2.5
版权声明:未经作者同意,不得私自转载。http://www.cnblogs.com/lal-fighting/
转载于:https://www.cnblogs.com/lal-fighting/p/5139996.html
js002-在HTML中使用JavaScript相关推荐
- js如何运行python代码_python中执行javascript代码
python中执行javascript代码: 1.安装相应的库,我使用的是PyV8 2.import PyV8 ctxt = PyV8.JSContext() ctxt.enter() func = ...
- 攻下《JavaScript高级程序设计》——第二章 在HTML中使用JavaScript
从上一章我们知道了,JavaScript是一种专门为网页交互而设计的脚本语言,那么,它就免不了和HTML打交道,所以在设计JavaScript的时候,Netscape首要面临的就是,怎么让HTML和J ...
- [译] ES6+ 中的 JavaScript 工厂函数(第八部分)
本文讲的是[译] ES6+ 中的 JavaScript 工厂函数(第八部分), 原文地址:JavaScript Factory Functions with ES6+ 原文作者:Eric Elliot ...
- 在js中加html_在HTML文档中嵌入JavaScript的四种方法
在HTML里嵌入JavaScript 在HTML文档里嵌入客户端JavaScript代码有4中方法: 1.内嵌,放置在标签之间 (少): 2.放置在有 3.放置自HTML事件处理程序中,该事件处理程 ...
- 如何在html中写javascript代码,如何在本地html代码中使用javascript脚本
我在jsfiddle中的代码正在工作,但是当我尝试在本地使用它时没有. 我不知道如何解决它,因为我认为代码是正确的. 我也尝试下载Jquery文件,并将其链接到代码中,但它不起作用.我确信这是一个愚蠢 ...
- 通过属性值从对象数组中获取JavaScript对象[重复]
本文翻译自:Get JavaScript object from array of objects by value of property [duplicate] This question alr ...
- 第二章 在HTML中使用JavaScript
2.1 <script> 元素 向HTML中插入JavaScript的主要方法就是使用 <script> 标签 <script>// 嵌入式 </script ...
- ASP.NET中前台javascript与后台代码调用
1.如何在JavaScript访问C#函数? 2.如何在JavaScript访问C#变量? 3.如何在C#中访问JavaScript的已有变量? 4.如何在C#中访问JavaScript函数? 问题1 ...
- 【转】完美解决Asp.Net的MasterPage中添加JavaScript路径问题
问题描述: 需要在最顶端的MasterPage中注册JavaScript脚本文件,在Head中用Script标记无效,原因可能是此MasterPage被多层次继承使用,且最终使用这些MasterPag ...
- VS集成环境中的JavaScript脚本语法检查
集成在Visual Studio环境中的JavaScript脚本语法检查. 1.可以直接检验js文件,也可以检验html和aspx页面上的脚本语法. 2.集成环境中直接使用,双击定位到语法错误处. 3 ...
最新文章
- 字符串、指针、引用、数组基础
- figma下载_Figma重新构想的团队库
- 三星电子第二季芯片需求大增 但手机销售疲软
- 函数c语言表示_C语言定义无参数的函数时,f()和f(void)有什么区别?
- 《完美软件》读书笔记10:有关测试的主要误区
- Prometheus入门简介
- linux tensorflow例子,基于Docker的TensorFlow机器学习框架搭建和实例源码解读
- 莫烦python博客_莫烦Python 4
- 税盘的批量抄报税和批量清卡--支持金税盘,税控盘,税务UKey
- 计算机基础知识(面试),新人面试计算机基础知识试题
- Redo和Undo的区别
- 四色定理java_四色定理中公理的证明
- VMC(VMware on AWS)分析
- mac搭建IPV6网络环境
- 企业微信批量操作工具1.0
- 好用的语音转文字的软件
- APP代码打包成apk文件
- Python 检测PE所启用保护方式
- 做到30条业绩翻十倍
- 前端移动端刻度尺实现