关于js的三种使用方式(行内js、内部js、外部js)的程序代码


Posted in Javascript onMay 05, 2018

本文讲述了js的三种使用方式(行内js、内部js、外部js)的实例代码,感兴趣的小伙伴们可以参考一下,具体如下:

1、行内js:js不单独写出

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>js使用方式1:行内js</title> 
</head> 
<body> 
<input type="button" value="点击有惊喜" onclick="javascript:alert('哈哈哈哈')"> 
<!--onclick:点击触发一个事件,alert:弹出一个对话框--> 
</body> 
</html>

2、内部js:script里的程序整个页面都可以用

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>js使用方式2:内部js</title> 
 <script type="text/javascript"> 
  //声明一个函数(整个文档都可以使用) 
  function surprise() { 
   alert('恭喜你中了一百万')/*弹出框*/ 
  } 
 </script> 
</head> 
<body> 
<input type="button" value="点击有惊喜" onclick="surprise()"><!--调用函数--> 
<input type="button" value="点击" onclick="surprise()"> 
</body> 
</html>

3、外部js:很多html页面都可以调用设定的js页面

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>js使用方式3:外部js</title> 
 <!--很多html页面都可以调用js4.js页面--> 
 <script src="../../js/js4.js" type="text/javascript" charset="utf-8"> 
 </script> 
</head> 
<body> 
<input type="button" value="点击" onclick="test()"> 
</body> 
</html>

以上所述是小编给大家介绍的js的三种使用方式(行内js、内部js、外部js)的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
jQuery鼠标事件汇总
Aug 30 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
详解基于node的前端项目编译时内存溢出问题
Aug 01 Javascript
angular4自定义组件详解
Sep 28 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 Javascript
js动态引入的四种方法
May 05 #Javascript
关于HTML5的data-*自定义属性的总结
May 05 #Javascript
深入浅析Vue.js计算属性和侦听器
May 05 #Javascript
详解js跨域请求的两种方式,支持post请求
May 05 #Javascript
vue 注册组件的使用详解
May 05 #Javascript
Vue三层嵌套路由的示例代码
May 05 #Javascript
动态加载JavaScript文件的3种方式
May 05 #Javascript
You might like
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
PHP面向对象程序设计之接口用法
2014/08/20 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
Python实现单词拼写检查
2015/04/25 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
在python中求分布函数相关的包实例
2020/04/15 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
高级Java程序员面试题
2016/06/23 面试题
文明礼仪事迹材料
2014/01/09 职场文书
售后服务经理岗位职责
2014/02/25 职场文书
团队精神的演讲稿
2014/05/14 职场文书
节约用水标语
2014/06/11 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS
Go gorilla/sessions库安装使用
2022/08/14 Golang