重学 JS 之在 HTML 中使用 JavaScript

简介: 重学 JS 之在 HTML 中使用 JavaScript

1. 如何在页面中使用JavaScript

现在在HTML中使用JS 的方法主要是通过在页面插入

元素内部使用方法:

<script type="text/javascript">
    alert('abc')    
</script>

注意事项:

1、包含在 script 中的代码将依次从上往下依次执行

2、值得注意的是在js代码解析的过程中页面中其他内容将不会被加载和解析,直到该段js执行完成。

3、在书写的过程要注意,在script代码块中,不能在代码闭合标签 之前在出现闭合标签,这样会导致代码产生错误。

4、外部引用js的时候闭合标签可以省略,但是为了在IE中正确执行,建议不省略

5、如果你使用的是src引入外部js,那么在script标签之间不能再有内嵌js块

6、src引用外域js文件的时候要注意安全,因为这样可能会被替换js文件而导致安全问题。

7、js 代码块在页面中是顺序执行的,只有第一个全部执行完成之后才会顺序执行后面的。

2. 标签的位置

一般按照惯例js代码的引入应该放在 之中,但是由于 js 代码在执行的时候页面其他元素将不能被加载这样会导致页面的交互性很差,所以现在一般将js代码放在闭合标签之前,所有页面html 之后,这样可以不会因为js的加载而影响页面的加载。

<html>
<head>
<title>demo</title>
</head>
<body>
<script type="text/javascript" src="a.js"></script>
</body>
</html

3. 延迟脚本 defer async

defer: 脚本在执行的时候不会影响页面的构造,因为js的执行会被延迟到页面全部加载之后才运行

async: 脚本和页面的加载将同步执行。

4. 总结

在页面中使用Javascript有两种方式,一种通过src引入外部脚本,一种是在script标签之间插入js代码。

1、 使用这两种方式都需要把 type 设置 为 text/javascript

2、 在包含外部js文件的时候,必须将src 设置为指向相应文件的url

3、 所有 script 代码会按照他们在页面的顺序按序执行,只有之前的被执行完成后续的才会被执行

4、 浏览器在呈现内容之前,必须先解析html之前的script代码,所以一定要将script代码放在页面的最后

相关文章
|
17天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
4天前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
19 2
|
20天前
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
|
24天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
104 1
|
29天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
41 3
|
1月前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
55 0
html5+three.js公路开车小游戏源码
|
20天前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API
使用JavaScript和Node.js构建简单的RESTful API
|
存储 JavaScript 前端开发
JavaScript与PHP中正则
有个在线调试正则的工具,点击查看工具。下面的所有示例代码,都可以在codepen上查看到。
JavaScript与PHP中正则
|
JavaScript 前端开发 PHP
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
101 2