【JS】JavaScript 脚本的三种使用形式:行内脚本、内部脚本、外部脚本
时间:2020-05-20
本文章向大家介绍【JS】JavaScript 脚本的三种使用形式:行内脚本、内部脚本、外部脚本,主要包括【JS】JavaScript 脚本的三种使用形式:行内脚本、内部脚本、外部脚本使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
img{
height:300px;
}
</style>
</head>
<body>
<h1>校园评选活动</h1>
<img alt="选手1" src="images/1.jpg" onclick="alert('你选择了1号选手')"/>
<img alt="选手2" src="images/2.jpg" onclick="alert('你选择了2号选手')"/>
<img alt="选手3" src="images/3.jpg" onclick="alert('你选择了3号选手')"/><br />
<a href="javascript:alert('请等待评选结果,谢谢!')">查看结果</a>
</body>
</html>
效果演示
将 JavaScript 脚本提取出来统一放在 <script></script> 标签中。
<script> 标签位于 <head> 或 <body> 标签内。
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script type="text/javascript">
function addOnclickEvents(){
alert("onclick事件添加成功");
var imgs=document.getElementsByTagName("img");
imgs[0].onclick=function(){alert("你选择了1号选手");}
imgs[1].onclick=function(){alert("你选择了2号选手");}
imgs[2].onclick=function(){alert("你选择了3号选手");}
}
</script>
<style type="text/css">
img{
height:300px;
}
</style>
</head>
<body>
<h1>校园评选活动</h1>
<input type="button" onclick="addOnclickEvents()" value="为 <img>添加 onclick事件" /><br />
<br />
<img id="img1" alt="选手1" src="images/1.jpg"/>
<img id="img2" alt="选手2" src="images/2.jpg"/>
<img id="img3" alt="选手3" src="images/3.jpg"/><br />
<a id="a1">查看结果</a>
<script type="text/javascript">
var a1 = document.getElementById("a1");
a1.href="javascript:alert('请等待评选结果,谢谢!')";
</script>
</body>
</html>
效果演示
注意
<head>
...
<script type="text/javascript">
var imgs=document.getElementsByTagName("img");
imgs[0].onclick=function(){alert("你选择了1号选手");}
imgs[1].onclick=function(){alert("你选择了2号选手");}
imgs[2].onclick=function(){alert("你选择了3号选手");}
</script>
...
</head>
直接这么写是不行的,因为 HTML 文档是自上而下执行的,此时还没有 <img> 元素。
代码示例
addOnclickEvents.js 文件
/**
* 为 <img> 添加 onclick 事件
*/
function addOnclickEvents(){
alert("onclick事件添加成功");
var imgs=document.getElementsByTagName("img");
imgs[0].onclick=function(){alert("你选择了1号选手");}
imgs[1].onclick=function(){alert("你选择了2号选手");}
imgs[2].onclick=function(){alert("你选择了3号选手");}
}
var a1 = document.getElementById("a1");
a1.href="javascript:alert('请等待评选结果,谢谢!')";
test.html 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
img{
height:300px;
}
</style>
</head>
<body>
<h1>校园评选活动</h1>
<input type="button" onclick="addOnclickEvents()" value="为 <img>添加 onclick事件" /><br />
<br />
<img id="img1" alt="选手1" src="images/1.jpg"/>
<img id="img2" alt="选手2" src="images/2.jpg"/>
<img id="img3" alt="选手3" src="images/3.jpg"/><br />
<a id="a1">查看结果</a>
<script type="text/javascript" src="addOnclickEvents.js"></script>
</body>
</html>
文档结构
原文地址:https://www.cnblogs.com/bjxqmy/p/12922649.html
- Linux下恶意文件大规模共性分析探讨
- 虚拟时钟
- 线上服务 CPU 100%?一键定位 so easy!
- 设置输出延迟
- 设置输入延时约束
- MySQL 死锁与日志二三事
- 一千个不用 Null 的理由
- TensorFlow强化学习入门(1.5)——上下文赌博机
- 以太坊·代币开发详解
- JSON Web Token - 在Web应用间安全地传递信息
- TensorFlow强化学习入门(2)——基于策略的Agents
- 用ABAP 生成二维码 QR Code
- CDS view注解解析 - @Environment.systemField
- Document flow API in SAP CRM and C4C
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android自定义控件实现带文本与数字的圆形进度条
- 云函数Python依赖包安装,应用启动超时问题排查
- Android Volley扩展实现支持进度条的文件上传功能
- Android自定义控件实现球赛比分条效果
- rxjs里concat operators的用法
- rxjs里merge operators的用法
- Android实现多参数文件和数据上传
- 解决pyPdf和pyPdf2在合并pdf时出现异常的问题
- rxjs里scan operators的用法
- rxjs里switchMap operators的用法
- rxjs里concatMap operators的用法
- rxjs里takeWhile operators的用法
- Python sql注入 过滤字符串的非法字符实例
- rxjs里combineLatest operators的用法
- rxjs里withLatestFrom operators的用法