JS的调用方式

简介: JS的调用方式

一:直接添加脚本


<!DOCTYPE html><html lang="en"><head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<meta http-equiv="X-UA-Compatible" content="ie=edge">    
<title>Document</title></head><body>    
<!-- alert就是js中的对话框 -->    
<!-- onclick被单击的动作 -->    
<input type="button" value="戳我呀给你惊喜" onclick='alert("我就是你的惊喜");' >
</body></html>


二:使用script标记插入脚本


<!DOCTYPE html><html lang="en"><head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<meta http-equiv="X-UA-Compatible" content="ie=edge">    
<title>Document</title>    
<!-- 实现js的代码 -->    
<script type="text/javascript">    
function my_button()    {        
alert("我就是你的惊吓");    
}    
</script>    </head><body>       
<input type="button" value="戳我呀给你惊喜" onclick='my_button();' >    
</body></html>


三:链接脚本文件


index.html


<!DOCTYPE html><html lang="en"><head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<meta http-equiv="X-UA-Compatible" content="ie=edge">    
<title>Document</title>    
<!-- src一定要接js文件的路径 -->    
<script type="text/javascript" src="deal.js"> </script>    
</head><body>    
<input type="button" value="戳我呀给你惊喜" onclick='my_button();' ></body></html>


deal.js


function my_button() {    
alert("我是你的小可爱");
}


相关文章
|
JavaScript 前端开发
js 数据添加方法
js 数据添加方法
78 1
|
JavaScript 前端开发
js的入口函数和作用
js的入口函数和作用
|
5月前
|
存储 JavaScript 前端开发
js之函数区别
js之函数区别
36 0
|
8月前
|
JavaScript
js的三种引用方式
js的三种引用方式
56 2
|
JavaScript 前端开发
js常用的方法函数
js常用的方法函数
54 0
|
8月前
|
JavaScript 前端开发
js定义函数的三种方式
js定义函数的三种方式
41 0
|
JSON JavaScript 前端开发
js的对象及方法
js的对象及方法
113 1
|
JavaScript 前端开发 C#
js代码如何封装
js代码如何封装
105 0
|
JavaScript 前端开发
js 处理对象的方法
js 处理对象的方法
94 0
|
存储 JavaScript 索引
JS基础- 对象
正常字符串我们使用,单引号,或者双引号包裹
106 0