在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 相关文章推荐
通过身份证号得到出生日期和性别的js代码
Nov 23 Javascript
js 数据类型转换总结笔记
Jan 17 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
Jul 26 Javascript
JavaScript声明变量名的语法规则
Jul 10 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
vue.js todolist实现代码
Oct 29 Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
微信小程序自定义多选事件的实现代码
May 17 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 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读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
ES6 十大特性简介
2020/12/09 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
Python3中的2to3转换工具使用示例
2015/06/12 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
保安的辞职报告怎么写
2014/01/20 职场文书
乡下人家教学反思
2014/02/01 职场文书
教师考核材料
2014/05/21 职场文书
南京青奥会口号
2014/06/12 职场文书
2014年服务员工作总结
2014/11/18 职场文书
投标邀请书范本
2015/02/02 职场文书
小学教师见习总结
2015/06/23 职场文书
国庆节新闻稿
2015/07/17 职场文书
离职告别感言
2015/08/04 职场文书