JavaScript入门详解之三种引入方式-js教程-PHP中文网

首页

web前端

js教程

JavaScript入门详解之三种引入方式

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 03, 2022 pm 04:39 PM

javascript

本篇文章给大家带来了关于javascript的相关知识，其中详细介绍了javaScript三种引入方式行内式，嵌入样式、外部样式及其使用方式；下面一起来看一下，希望对大家有帮助。

JavaScript入门详解之三种引入方式

【相关推荐：javascript视频教程、web前端】

1.行内引入方式

写在行内，每个标签里面单独设置

通过在开标签中的事件属性引用js的函数

(1)写在标签的事件属性当中（以on开头的属性），如onclick【on+事件类型】

推荐：html使用双引号，js使用单引号

例：

a84d3ea23ac1ccb9e5b8520cb7748355

注：行内引入，在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>

输出结果：

+1.gif

2.内嵌引入方式(内部引入)

写在script标签中

内部引用: 通过在script标签中编写js代码使用

script标签可以写在页面任何位置
script标签通常使用在body中的最后, 或者body的后面

(1)可以写在任意地方；

当需要我们在头部引用脚本就放在头部，否则则放在底部，因为放在头部可能会影响浏览器渲染。

3f1c4e4b6b16bbbd69b2ee476dc4f83a
    alert('Hello World!');
2cacc6d41bbb37262a98f745aa00fbf0

注：一般在自己写练习的时候，想偷懒不想设置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=&#39;yuansu&#39;></img>
  </div>
  <!--js内联写法02结束-->
  </body>
  <script>
    //js代码
    //找到XX元素，一般给元素加id 
    yuansuojb=document.getElementById(&#39;yuansu&#39;);    
    //给xx元素加事件
    yuansuojb.onclick=function(){
      //代码段
      alert(1);
    }
    //触发事件
  </script>
</html>

输出结果：

3.外部引入方式

在script标签中使用src引入外部文件

步骤:

编写独立的js文件
在页面中通过script标签引用

(1)引入外部JS文件的script中不可以写代码

(2)利用HTML页面代码结构化，把多段JS代码独立至HTML页面外面，美观，且方便文件复用

50e729cfa6fafea108a3f369242982cb2cacc6d41bbb37262a98f745aa00fbf0

注：和行内样式一样放在底部和头部需要分情况考虑[经常使用]

使用的是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=&#39;yuansu&#39;></img>
  </div>
  </body>
  <script src=&#39;js/index.js&#39;></script>
</html>

.js文件内容如下：

//js代码

//找到XX元素，一般给元素加id 
yuansuojb=document.getElementById(&#39;yuansu&#39;);    
//给xx元素加事件
yuansuojb.onclick=function(){
  //代码段
  var str="hello world !!!";
  alert(str);
}

输出结果：

+3.gif

【相关推荐：javascript视频教程、web前端】

以上是JavaScript入门详解之三种引入方式的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

C和JavaScript：连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。