在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 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
json 定义
Jun 10 Javascript
JS刷新当前页面的几种方法总结
Dec 24 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
jQuery命名空间与闭包用法示例
Jan 12 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
详解vue使用$http服务端收不到参数
Apr 19 Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 Javascript
javascript实现滚动条效果
Mar 24 Javascript
js实现简单贪吃蛇游戏
May 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删除二维数组中的重复值方法
2018/03/12 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
js 对象是否存在判断
2009/07/15 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
jQuery实现获取table表格第一列值的方法
2016/03/01 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
python代码过长的换行方法
2018/07/19 Python
对python调用RPC接口的实例详解
2019/01/03 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
Python中最大递归深度值的探讨
2019/03/05 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
艺术学院毕业生自我评价
2014/03/02 职场文书
构建高效课堂实施方案
2014/03/13 职场文书
派出所所长先进事迹
2014/05/19 职场文书
工程承诺书怎么写
2014/05/24 职场文书
单独二胎证明
2015/06/24 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
团结友爱主题班会
2015/08/13 职场文书