zoukankan      html  css  js  c++  java
  • js的引入方式

    1)直接在HTML页面中使用<script></script>标签引入,可以写在head中,也可以写在body末尾,可以实现

    <code class="language-html"><!doctype html>  
    <html lang="en">   
    <head>    
        <meta charset="UTF-8">    
         
        <meta name="Generator" content="EditPlus®">    
        <meta name="Author" content="">    
        <meta name="Keywords" content="">    
        <meta name="Description" content="">    
        <title>js引入方式实验</title>   
    </head>   
    <body>                   
    <button id="button">实验</button>          
    <script>
        button.onclick = function () {
        alert("引入方法一:直接嵌入script标签");
        }
    </script>
         
    </body>  
    </html></code>  

    2).在html中使用script的src属性引入外部js文件,可实现。

    新建一个index1.html和index1.js文件,代码如下:

    <!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>js引入方式实验</title>
     </head>
     <body>
            js的引入方式实验
            <button id="button">实验</button>
            <script src="index1.js">   
            </script>
     </body>
    </html>

    3).事件定义,直接在组件后面的事件中写javascript:js代码,可实现

    <!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>js引入方式实验</title>
     </head>
     <body>
            js的引入方式实验
            <button id="button" onclick="javascript:alert('js引入的方式3:事件定义')">实验</button>
     </body>
    </html>

    4).在一个js文件中调用另外一个js 文件,可实现。但不能直接在第一个js文件中写<script src=xx.js></script>,这样写会导致引入js文件失败

    HTML文件中引入index1-1.js

    <!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>js引入方式实验</title>
     </head>
     <body>
            js的引入方式实验
            <button id="button">实验</button>
            <script src="index1-1.js">
            </script>
     </body>
    </html>
  • 相关阅读:
    Linux 清空nohup.out(引用别人的文章)
    Nginx map模块
    Nginx 防盗链 secure_link 模块
    Nginx HTTP框架提供的其它变量
    NC 命令引用了一个高手的文章做收藏
    Nginx HTTP框架提供的请求相关变量
    6 MyISAM和InnoDB
    5.MVCC
    4 乐观锁和悲观锁
    Redis原理
  • 原文地址:https://www.cnblogs.com/journey-mk5/p/9707449.html
Copyright © 2011-2022 走看看