js如何引入js文件

在前端页面制作中,有时候我们需要触发某个功能才会引入js文件,那如何在触发功能时引入这个js文件呢?要引入js文件首先需要思路清晰,接下来会使用一个案例来讲解如何引入js如何js文件。
思路:
1.创建一个script的节点;
2.设置script的文件类型;
3.设置引入js文件的路径;
4.把新建的script放到页面上。

操作方法

  • 01

    创建一个文件夹,这个文件夹有一个js文件夹和一个html文件。js文件夹用来存放需要引入的js文件。如图:

  • 02

    打开html文件,在html文件上找到<body>,在<body>标签里创建一个按钮标签,然后给这个标签添加一个点击addJs事件。如图

  • 03

    在js文件夹下创建一个js文件为addJs.js。

  • 04

    在addJs.js文件上输入一个alert弹出框并保存,当引入js文件成功就会执行alert弹出框。

  • 05

    回到html文件,在按钮输入框后面创建一个script标签,然后添加用来引入addJs.js文件的addJs事件。在addJs事件执行以下几个步骤: 1.使用document.createElement("script")创建script节点; 2.使用type设置类型; 3.使用src设置引入js文件的路径; 4.给新建的节点设置存放的位置。

  • 06

    保存html文件后使用浏览器打开,点击按钮即可看到出现一个弹出,表示引入js文件成功。

  • 07

    所有代码。所有代码分文html代码和js代码,只需把所有代码复制到新建的 html和js文件上,保存后运行即可看到效果。 htm页面l代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>引入js文件</title> </head> <body> <input type="button" onclick="addJs()" value="点击按钮" /> <script type="text/javascript"> function addJs(){ var newScript=document.createElement("script"); newScript.type="text/javascript"; newScript.src="js/addJs.js"; var head=document.getElementsByTagName("head")[0]; head.appendChild(newScript); } </script> </body> </html> js页面代码: alert("恭喜你,成功引入了js文件!");

(0)

相关推荐

  • node.js怎样运行JS文件呢

    Node给JS提供了一个运行环境,所以就有了nodeJS,今天咪咪我就来给大家分享一下node.js怎样运行JS文件,一起来看看吧! 操作方法 01 首先,安装nodeJS,安装过程没啥特殊的地方.安 ...

  • js如何上传文件

    在软件开发或网站建站过程中,文件上传是必不可少的一项,不管是上传到服务器还是上传到本地,上传控件的包装如何,上传验证用js或jquery都是最简便实用的技术. 一起来学习,js上传文件以及验证文件格式 ...

  • 如何在js中动态引入或加载js文件?

    一个网页加载时,js文件一般是通过html中的标签加载的,但有时也会有通过js代码动态引入js文件的需求.下面介绍具体做法. 原理 01 在js中动态引入js文件的核心原理是使用js在html界面上增 ...

  • html中如何引入外部css文件和外部js文件(4)

    单独的写一个css外部样式文件和js外部文件,一来可以提高浏览的体验效果, 二来也可以便于我们后期的维护和修改,那么我就来给大家讲一下,在html文件 中如何引入css外部样式表和js外部文件. 操作 ...

  • HTML中引入css和js的方法

    我们在HTML中经常需要引入CSS和JS文件,那么如何引入呢?下面小编给大家演示一下. 操作方法 01 首先新建一个文件夹,在文件夹下面建立如下图所示的文件 02 接下来用Sublime Text打开 ...

  • 合并多个js,css文件的方法

    操作方法 01 在Web项目的开发中,js,css文件会随着项目的开发变得越来越多,越来越大,这就给给性能方面带来一些问题,如,页面引入的的js,css越多的话,那么对就增加了http请求数,解决该问 ...

  • node.js怎样向文件写入内容呢

    node.js除了可以读取文件,还可以向文件写入内容.今天咪咪我就来教教大家node.js怎样向文件写入内容,一起来看看吧! 操作方法 01 第一步,先在Hbuilder里面新建JS文件和一个文本文件 ...

  • vue如何引用其他组件(css和js)

    vue如何引用其他组件(css和js)

  • YUI Compressor使用配置方法 JS/CSS压缩工具

    YUI Compressor 是一个用来压缩 JS 和 CSS 文件的工具,采用Java开发。 YUI Compressor下载地址:http://www./softs/25860.html 使用方法 ...