这篇文章主要介绍“JavaScript入门之三种引入方式怎么使用”，在日常操作中，相信很多人在JavaScript入门之三种引入方式怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JavaScript入门之三种引入方式怎么使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
写在行内，每个标签里面单独设置
通过在开标签中的事件属性引用js的函数
(1)写在标签的事件属性当中（以on开头的属性），如onclick【on+事件类型】
推荐：html使用双引号，js使用单引号
例：
<input type="button" value="点我打开世界" onclick="alert('Hello World')" />注：行内引入，在JS中没用提升权重的概念，所以其不常用[基本不用]
示例如下：
<html> <title>js样式内联写法</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <body> <!--js内联写法01开始--> <!--当鼠标点击图片时跳出弹窗显示1223--> <div class="img"> 单击事件： <img src="images/001.jpg" onclick="alert(1223)"></img> </div> <!--js内联写法01结束--> </body> </html>
输出结果：
写在script标签中
内部引用: 通过在script标签中编写js代码使用
script标签可以写在页面任何位置
script标签通常使用在body中的最后, 或者body的后面
(1)可以写在任意地方；
当需要我们在头部引用脚本就放在头部，否则则放在底部，因为放在头部可能会影响浏览器渲染。
<script>
alert('Hello World!');
</script>注：一般在自己写练习的时候，想偷懒不想设置js文件时使用 [练习使用]
通常自己做项目的时候放在底部，不影响加载顺序又可以和CSS文件进行区分，并且不会影响浏览器渲染；若放在其他处最好用onload套起来用
示例如下：
<html>
<title>js样式内联写法</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<body>
<!--js内联写法02开始-->
<div class="img">
单击事件：
<img src="images/002.jpg" id='yuansu'></img>
</div>
<!--js内联写法02结束-->
</body>
<script>
//js代码
//找到XX元素，一般给元素加id
yuansuojb=document.getElementById('yuansu');
//给xx元素加事件
yuansuojb.onclick=function(){
//代码段
alert(1);
}
//触发事件
</script>
</html>输出结果：
在script标签中使用src引入外部文件
步骤:
编写独立的js文件
在页面中通过script标签引用
(1)引入外部JS文件的script中不可以写代码
(2)利用HTML页面代码结构化，把多段JS代码独立至HTML页面外面，美观，且方便文件复用
<script src="main.js"></script>
注：和行内样式一样放在底部和头部需要分情况考虑[经常使用]
使用的是src不是href
示例如下：
将js的代码写到.js的文件中，并在HTML中引用
.html文件内容如下：
<html> <title>js样式外联写法</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <body> <div class="img"> 外联写法--单击事件： <img src="images/003.jpg" id='yuansu'></img> </div> </body> <script src='js/index.js'></script> </html>
.js文件内容如下：
//js代码
//找到XX元素，一般给元素加id
yuansuojb=document.getElementById('yuansu');
//给xx元素加事件
yuansuojb.onclick=function(){
//代码段
var str="hello world !!!";
alert(str);
}输出结果：
到此，关于“JavaScript入门之三种引入方式怎么使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
