我们要用 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> 标签。
 
 
（完）

使用 JavaScript的更多相关文章

  1. JavaScript之父Brendan Eich，Clojure 创建者Rich Hickey，Python创建者Van Rossum等编程大牛对程序员的职业建议

    软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...

  2. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  3. Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收

    执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...

  4. 探究javascript对象和数组的异同，及函数变量缓存技巧

    javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...

  5. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  6. 《Web 前端面试指南》1、JavaScript 闭包深入浅出

    闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...

  7. JavaScript权威指南 - 函数

    函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...

  8. JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

    今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css ...

  9. JavaScript进阶之路（一）初学者的开始

    一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...

  10. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

  1. codevs 1206 保留两位小数

    http://codevs.cn/problem/1206/ 1206 保留两位小数  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 青铜 Bronze 题解  查看运行结果 ...

  2. Undefined index:

    $username=$_POST["username"]; 初学时发现这个错误, Undefined index: username 如果不仔细看,还以为是$username报错, ...

  3. 关于内存 GetMemory( ) 笔试分析

    1. #include<stdio.h>#include<string.h>void GetMemory(char *p){ p=(char *)malloc(100); }i ...

  4. html随笔

    <!DOCTYPE HTML> <html> <head> <meta charset = "utf-8"> <script ...

  5. u盘安装centos

    1. 下载centos系统2. 使用UltraISO制作u盘启动.制作方法:http://jingyan.baidu.com/article/a378c960630e61b329283045.html ...

  6. java 虚拟机工具

    jps 命令 可以查询开启了rmi服务的远程虚拟机进程状态. -v jvm参数. jstat -gcutil命令 [cangyue@/System/Library/Frameworks/JavaVM. ...

  7. 夺命雷公狗mongodb之----mongodb---1---的下载，安装，连接

    首先登录mongodb的官方网站即可进行下载: https://www.mongodb.com/download-center?jmp=nav#community 然后到wamp目录下创建一个mong ...

  8. 《zw版·Halcon-delphi系列原创教程》 2d照片-3d逆向建模脚本

    <zw版·Halcon-delphi系列原创教程> 2d照片-3d逆向建模脚本 3D逆向建模,是逆向工程的核心要素.       3D逆向建模,除了目前通用的3D点云模式,通过2D图像实现 ...

  9. ASP.NET 中通过Form身份验证 来模拟Windows 域服务身份验证的方法

    This step-by-step article demonstrates how an ASP.NET   application can use Forms authentication to ...

  10. oracle中清空表数据的两种方法

    1.delete from t 2 .truncate table t 区别: 1.delete是dml操作:truncate是ddl操作,ddl隐式提交不能回滚 2.delete from t可以回 ...