在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的将桌面应用程序引入浏览器
Nov 19 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
用jquery写的菜单从左往右滑动出现
Apr 11 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
this.$toast() 了解一下?
Apr 18 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
深入了解php4(1)--回到未来
2006/10/09 PHP
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
php中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
实现PHP搜索加分页
2016/10/12 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
非常好的js代码
2006/06/27 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
jquery+css实现Tab栏切换的代码实例
2019/05/14 jQuery
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
python求素数示例分享
2014/02/16 Python
Python多线程编程简单介绍
2015/04/13 Python
在Django框架中编写Contact表单的教程
2015/07/17 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
Python 如何提高元组的可读性
2019/08/26 Python
使用Python实现分别输出每个数组
2019/12/06 Python
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
Java程序员综合测试题
2014/04/25 面试题
超市国庆节促销方案
2014/02/20 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
科学发展观活动总结
2014/08/28 职场文书
幼儿园家长心得体会
2016/01/21 职场文书
python元组打包和解包过程详解
2021/08/02 Python
Java 超详细讲解hashCode方法
2022/04/07 Java/Android