zoukankan      html  css  js  c++  java
  • 使用 JavaScript

    我们要用 JavaScript,但是把它写在哪里呢?
     
    这里 ↘
     
    1. HTML 页面中 。
     
    2. 单独的一个文件中,文件后缀名是“.js”。
     
     
    —————————————————————————
     
    我们先讨论第一种情况 —— 在 HTML 页面中使用 JavaScript
     
    这时 JavaScript 代码:
     
    1) 必须位于 <script> 与 </script> 标签之间。
     
    2) 可以被放在 HTML 页面的 <body> 和 <head> 部分中。
     
    下面是三个小例子:
     
    小例一:
    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
        <meta charset="UTF-8">
        <title>在 HTML 页面中使用 JavaScript</title>
    </head>
    
    <body>
    
        <script>
            // JavaScript 代码在 HTML 文档的 <body> 部分中,而且
            // 在 <script> 与 </script> 标签之间
            document.write("<h1>海明威说</h1>");
            document.write("<p>任何初稿,都是一堆臭狗屎。</p>");
        </script>
    
    </body>
    
    </html>
     
    有时我们会看到在 <script> 标签中使用“type="text/javascript"”。现在已经完全没必要了,JavaScript 是所有现代浏览器以及 HTML5 中默认使用的脚本语言。
     
    上面“小例一”中的 JavaScript 代码,会在页面加载时执行。通常,我们不会这么做。
     
    我们用 JavaScript 代码写出一个函数,当 HTML 页面中出现某个事件时(比如点击事件),调用这个函数。
     
    你现在可能听不太懂,没关系,你会在稍后的文章里学习到函数和事件的知识。
     
    小例二:
    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
        <meta charset="UTF-8">
        <title>在 HTML 页面中使用 JavaScript</title>
    
        <script>
            // JavaScript 代码在 HTML 文档的 <head> 部分中,而且
            // 也在(必然的) <script> 与 </script> 标签之间
            function myRespondToHit() {
                document.getElementById("yesID").innerHTML = "Oops!!";
            }
        </script>
    
    </head>
    
    <body>
    
        <h1>A day so happy :)</h1>
    
        <p>A:<span id="yesID">Yes, once I was the same.</span></p>
    
        <button type="button" onclick="myRespondToHit()">Hit you!</button>
    
    </body>
    
    </html>
     
    我们将一个 JavaScript 函数放置到了 HTML 文档的 <head> 部分。
     
    小例三:
    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
        <meta charset="UTF-8">
        <title>在 HTML 页面中使用 JavaScript</title>
    </head>
    
    <body>
    
        <h1>A day so happy :)</h1>
    
        <p>A:<span id="yesID">Yes, once I was the same.</span>
        </p>
    
        <button type="button" onclick="myRespondToHit()">Hit you!</button>
    
        <script>
            // JavaScript 代码在 HTML 文档的 <head> 部分中,而且
            // 也在(必然的) <script> 与 </script> 标签之间
            function myRespondToHit() {
                document.getElementById("yesID").innerHTML = "Oops!!";
            }
        </script>
    
    </body>
    
    </html>
    这里只是将“小例二”中的 JavaScript 函数改变至 <body> 部分中,这样确保在 <p> 元素创建之后再执行脚本。
     
    <head> 和 <body> 中的 JavaScript
     
    你可以在 HTML 页面中放入任意多个 JavaScript 代码(或者说成“脚本”)。
     
    脚本可以位于 HTML 文档的 <body> 或 <head> 部分中,又或者同时存在于两个部分中。
     
    通常做法是,把函数都放在 <head> 部分中,或者都放在页面底部。这样 脚本在一块了,就不会干扰页面内容了。
     
     
    —————————————————————————
     
    第二种情况:外部的 JavaScript 代码
     
    也可以把 JavaScript 代码写在外部文件中。这样做可以:让脚本与页面代码分离;有时,这个脚本,可能会被多个页面同时使用,这样乐意提高代码的重用性。
     
    外部的脚本文件的扩展名是“.js”。
     
    如果要使用外部文件,请在 <script> 标签的 “src”属性中引入这个“.js”文件。
     
    小例四: 
    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
        <meta charset="UTF-8">
        <title>引入外部的 JavaScript 代码</title>
    
        <script src="js/helloScript.js"></script>
    
    </head>
    
    <body>
    
        <h1>A day so happy :)</h1>
    
        <p>A:<span id="yesID">Yes, once I was the same.</span></p>
    
        <button type="button" onclick="myRespondToHit()">Hit you!</button>
    
    </body>
    
    </html>
     
    在 <head> 和 <body> 中引用脚本文件都是可以的。实际运行效果与您在 <script> 标签中编写脚本完全一致。 
     
    还有,外部脚本不能包含 <script> 标签。
     
     
    (完)
  • 相关阅读:
    Could not transfer artifact org.apache.maven.plugins:maven-resources-plugin:pom:2.6 from/to central
    SpringMVC详解
    数据库连接池
    事务的隔离级别
    数据库四大特性
    Eclipse自动编码提示设置
    RequestDispatcher.forward转发与HttpServletResponse.sendRedirect重定向
    c#代码混淆
    java反射机制
    (转)redis是什么
  • 原文地址:https://www.cnblogs.com/zhangbao/p/5668635.html
Copyright © 2011-2022 走看看