在HTML中使用JavaScript的两种方法


Posted in Javascript onDecember 24, 2020

在HTML中使用HTML需要借助<scirpt>标签,使用<script>标签的方式有两种:一种是直接在<script>标签中嵌入JavaScript代码,另一种是用<script>的src属性引入外部JavaScript文件。

直接在页面嵌入JavaScript代码

在使用<script>标签嵌入JavaScript代码时,只需为<script>指定type属性。然后,像下面这样把JavaScript代码直接放在标签内部即可:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script type="text/javascript">
    var word = "Hello, itbsl";
    alert(word);
  </script>
</head>
<body>
</body>
</html>

在HTML中使用JavaScript的两种方法

<script>的type属性可以不要,这是因为当初标准的制定者认为标签内嵌入还可能会嵌入其他语言,需要用type来指定标签内的语言,但是发展到至今大家已经知道,这里只会嵌入JavaScript,目前所有浏览器的默认值就是text/javascript。

HTML文件内可以嵌入任意多个script标签。

引入外部JavaScript文件

如果要通过<script>标签包含外部JavaScript文件,那么src属性是必须的。这个属性的值是一个指向外部JavaScript文件的链接,例如:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

  <script type="text/javascript" src="./js/example.js"></script>

</head>
<body>
</body>
</html>

在HTML中使用JavaScript的两种方法

注意:带有src属性的<script>标签不应该在其<script>和</script>标签之间再嵌入任何JavaScript代码。如果嵌入了额外的JavaScript代码,则只会下载并执行src引入的外部脚本文件,嵌入的代码会被忽略。

在HTML中使用JavaScript的两种方法

以上就是在HTML中使用JavaScript的两种方法的详细内容,更多关于HTML中使用JavaScript的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
Sep 25 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 Javascript
vue项目中openlayers绘制行政区划
Dec 24 #Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 #Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 #Vue.js
vue绑定class的三种方法
Dec 24 #Vue.js
全面解析Vue中的$nextTick
Dec 24 #Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 #Vue.js
js实现随机点名功能
Dec 23 #Javascript
You might like
Sony CFR 320 修复改造
2020/03/14 无线电
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
php自动注册登录验证机制实现代码
2011/12/20 PHP
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
javascript 解析url的search方法
2010/02/09 Javascript
jquery ui resizable bug解决方法
2010/10/26 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
python创建进程fork用法
2015/06/04 Python
python中 logging的使用详解
2017/10/25 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
django框架创建应用操作示例
2019/09/26 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
新书吧创业计划书
2014/01/31 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
街道务虚会发言材料
2014/10/20 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL