在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-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
JavaScript原型继承之基础机制分析
Aug 26 Javascript
jQuery实现的经典滑动门效果
Sep 22 Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
微信小程序实现文字跑马灯
May 26 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
Angular4.0动画操作实例详解
May 10 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
axios如何取消重复无用的请求详解
Dec 15 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
用php+mysql一个名片库程序
2006/10/09 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
python的dict,set,list,tuple应用详解
2014/07/24 Python
Python三级菜单的实例
2017/09/13 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
python组合无重复三位数的实例
2018/11/13 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
python数据化运营的重要意义
2019/11/25 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
英语专业推荐信
2013/11/16 职场文书
大学三年的自我评价
2013/12/25 职场文书
烹饪自我鉴定
2014/03/01 职场文书
母亲节感恩活动记录
2014/03/16 职场文书
责任书格式范文
2014/07/28 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
2016教师国培研修感言
2015/12/08 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
Python实现8种常用抽样方法
2021/06/27 Python