在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与iframe交互实现代码
Dec 24 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
javascript使用onclick事件改变选中行的颜色
Dec 30 Javascript
jQuery预加载图片常用方法
Jun 15 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
微信小程序 实例应用(记账)详解
Sep 28 Javascript
vue实现tab切换外加样式切换方法
Mar 16 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 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与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
php实现文件预览功能
2017/05/23 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
javascript学习之json入门
2016/12/22 Javascript
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
解析Python中的二进制位运算符
2015/05/13 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
python tornado使用流生成图片的例子
2019/11/18 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
公务员培训自我鉴定
2014/02/01 职场文书
公关活动策划方案
2014/05/25 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
放弃遗产继承公证书
2015/01/26 职场文书