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>
  • 相关阅读:
    AngularJS各种'service'的区别
    js 斐波那契数列实现
    Mac下Apache+MySQL+PHP开发环境安装过程
    原生封装的js前端工具库(包含了jquery的常用功能)
    BFC 神奇背后的原理
    CSS清浮动处理(Clear与BFC)
    JavaScript实现 页面滚动图片加载(懒加载)
    CodeForce 814B
    排序算法
    uva1610
  • 原文地址:https://www.cnblogs.com/journey-mk5/p/9707449.html
Copyright © 2011-2022 走看看