在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 相关文章推荐
jQuery总体架构的理解分析
Mar 07 Javascript
javascript 事件处理程序介绍
Jun 27 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
jquery实现网页定位导航
Aug 23 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
详解vue的diff算法原理
May 20 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 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
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
python 随机数生成的代码的详细分析
2011/05/15 Python
Python实现基本线性数据结构
2016/08/22 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
python SVM 线性分类模型的实现
2019/07/19 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
Python阶乘求和的代码详解
2020/02/14 Python
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
努比亚手机官网:nubia
2016/10/06 全球购物
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
个人求职简历的自我评价
2013/10/19 职场文书
数控技术应届生求职信
2013/11/13 职场文书
简单租房协议书
2014/04/09 职场文书
植树节标语
2014/06/27 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
四风自我剖析材料
2014/09/30 职场文书