在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 事件记录使用说明
Oct 20 Javascript
阻止子元素继承父元素事件具体思路及实现
May 02 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
canvas绘制的直线动画
Jan 23 Javascript
vue component组件使用方法详解
Jul 14 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 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实现QQ空间自动回复说说的方法
2015/12/02 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
python实现bitmap数据结构详解
2014/02/17 Python
Python 数据结构之堆栈实例代码
2017/01/22 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
业务代表的岗位职责
2013/11/16 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
初中学习计划书范文
2014/09/15 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
阿甘正传观后感
2015/06/01 职场文书
党员公开承诺书2016
2016/03/24 职场文书
中国古风插画师排行榜:夏达第一,第三是阴阳师姑获鸟皮肤创作者
2022/03/18 国漫