登录  /  注册
首页 > web前端 > js教程 > 正文

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

WBOY
发布: 2022-08-03 16:39:23
原创
2812人浏览过

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

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

【相关推荐:javascript视频教程web前端

1.行内引入方式

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

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

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

推荐:html使用双引号,js使用单引号

例:

<input>
登录后复制

注:行内引入,在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)" alt="JavaScript入门详解之三种引入方式" ></img>
    </div>
  <!--js内联写法01结束-->
  </body>
</html>
登录后复制

输出结果:

+1.gif

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

写在script标签中

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

  • script标签可以写在页面任何位置

  • script标签通常使用在body中的最后, 或者body的后面

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

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

<script>
    alert(&#39;Hello World!&#39;);
</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=&#39;yuansu&#39; alt="JavaScript入门详解之三种引入方式" ></img>
  </div>
  <!--js内联写法02结束-->
  </body>
  <script>
    //js代码
    //找到XX元素,一般给元素加id 
    yuansuojb=document.getElementById(&#39;yuansu&#39;);    
    //给xx元素加事件
    yuansuojb.onclick=function(){
      //代码段
      alert(1);
    }
    //触发事件
  </script>
</html>
登录后复制

输出结果:

+2.gif

3.外部引入方式

在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=&#39;yuansu&#39; alt="JavaScript入门详解之三种引入方式" ></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中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号