JavaScript学习 第 三 章

原创 2004年08月20日 15:48:00

第 三 集




曾 有 许 多 网 友 问 我 有 关JavaScript与 框 架(为 求 方 便, 以 下 均 用frame表 示)合 用 的 问 题。 事 实 上, 若 您 同 时 想 用frames和JavaScript的 功 能, 首 先 您 必 需 拥 有Netscape Navigator 2.0 (或 以 上)浏 览 器( 至 少 目 前 是 如 此)。 当 然 也 有 某 些 浏 览 器 支 援frames的 功 能--如:Oracle开 发 的PowerBrowser, 但 此 浏 览 器 还 只 是Beta版, 目 前 尚 不 支 援JavaScript。

首 先, 我 稍 微 解 释 一 下frames的 功 用。 因 为frames功 能 才 开 发 不 久, 仍 有 许 多HTML文 件 中 未 使 用 这 项 新 功 能。Frames最 主 要 功 用 是"分 割"您 的 视 窗, 使 每 个"小 视 窗"(frame)能 显 示 不 同 的HTM L文 件(译 按:这 有 点 类 似 电 视 的 子 母 画 面)。 更 妙 的 是, 不 同frame之 间 可 以 互 动(interact), 也 就 是 说 不 同frame之 间 可 以 交 换 讯 息 与 资 料(information)。 例 如:假 设 您 开 了 两 个frames, 第 一 个frame可 显 示 普 通HTML文 件, 第 二 个frame可 显 示 工 具 列(toolbar)。 此 工 具 列 中 可 包 含 浏 览 您homepage所 需 的 各 种 按 钮。 如 此 一 来, 即 使 第 一 个frame载 入 了 另 一 个HTML文 件, 您 仍 可 在 第 二 个frame中 看 到 工 具 列。

现 在 我 先 将 上 述 特 性 展 示 给 您 瞧 瞧。 请 按 一 下 下 面 的 按 钮, 看 一 看frames的 长 相。(如 果 您 是 线 上 观 看 此 文 件, 您 可 能 需 稍 候 一 下 才 看 得 到 结 果, 因 为scripts必 需 由server中 载 入 到 您 的 机 器)。

以 下 是 此frame的 写 法:

<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
    <FRAMESET ROWS="50%,50%"> 
    <FRAME SRC="frtest1.html" name="fr1"> 
    <FRAME SRC="frtest2.html" name="fr2"> 
  </FRAMESET> 
</HTML>  

首 先 您 必 须 告 诉 浏 览 器 您 要 开 几 个frame?这 是 由 <frameset...> 这 个 标 签(tag)来 宣 告。rows这 项 叁 数 是 告 诉 浏 览 器 您 想 将 视 窗 分 割 成 几 列?而 cols这 项 叁 数 是 告 诉 浏 览 器 您 想 将 视 窗 分 割 成 几 行?您 也 可 以 用 很 多 组 的 <frameset...> tags 将 视 窗 分 割 得 更 复 杂。 以 下 是 Netsacpe所 提 到 的 一 个 范 例:

<FRAMESET COLS="50%,50%"> 
  <FRAMESET ROWS="50%,50%"> 
    <FRAME SRC="cell.html"> 
    <FRAME SRC="cell.html"> 
  </FRAMESET> 
  <FRAMESET ROWS="33%,33%,33%"> 
    <FRAME SRC="cell.html"> 
    <FRAME SRC="cell.html"> 
    <FRAME SRC="cell.html"> 
  </FRAMESET> 
</FRAMESET> 

上 面 这 个 例 子 产 生 了 两 行, 而 且 第 二 行 又 分 割 成 三 列 大 小 相 等 的 空 间。 在 第 一 个 <frameset> tag 中 的 50%,50% 两 项 叁 数 是 用 来 表 是frame的 大 小。
您 可 以 给 每 个frame一 个"名 字" (name)。frame的 名 字 在JavaScript语 法 中 的 地 位 非 常 重 要。 在 本 章 的 第 一 个 范 例 中 您 已 学 到 如 何 替frame命 名。 接 下 来 您 可 以 用 <frame> tag 告 诉 浏 览 器 您 要 载 入 哪 一 个 HTML文 件。



我 想 您 已 了 解frames的 基 本 用 法, 接 下 来 我 们 再 看 一 个 有 趣 的 范 例:

上 面 的 按 钮 将 显 示 : 按 某 个frame中 的 按 钮 後, 会 在 另 一frame中 写 入 文 字。
以 下 是 此 功 能 的 原 始 码:

在 产 生frames效 果 之 前, 您 需 先 制 作 下 列 原 始 码 (frames.html):

<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
    <FRAMESET ROWS="50%,50%"> 
    <FRAME SRC="frame1.html" name="fr1" noresize> 
    <FRAME SRC="frame2.html" name="fr2"> 
  </FRAMESET> 
</HTML>

以 下 是 frame1.html 的 原 始 码:

<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
     function hi() {
       document.write("嗨!<br>");
     }
     function yo() {
       document.write(" !<br>");
     }
     function bla() {
       document.write("啦 啦 啦<br>");
     }
// -->
</script>
</HEAD>
<BODY>
这 是 第 一 个 frame!
</BODY>
</HTML>

以 下 是 frame2.html 的 原 始 码:

<HTML>
<body>
这 是 第 二 个 frame!
<p>
<FORM NAME="buttonbar">
     <INPUT TYPE="button" VALUE="嗨" onClick="parent.fr1.hi()">
     <INPUT TYPE="button" VALUE=" " onClick="parent.fr1.yo()">
     <INPUT TYPE="button" VALUE="啦" onCLick="parent.fr1.bla()">
</FORM>
</BODY>
</HTML>

哇!这 些 语 法 越 来 越 长 了!上 述 的 语 法 是 如 何 运 作 的 呢?当 使 用 者 载 入 第 一 个 档 案 (frames.html)後 , 将 会 产 生 两 个frame, 并 且 在 第 一 个frame(命 名 为 'fr1')中 载 入frame1.html, 而 在 第 二 个frame ( 命 名 为 'fr2')中 载 入frame2.html。 到 目 前 为 止 都 只 是 普 通 的 HTML 语 法。 或 许 您 已 发 现 在 frame1.html中 包 含 了JavaScript语 法, 但 此JavaScript并 没 有 马 上 被 执 行。 难 到 这 些 函 式(functions) 是 不 必 要 的?亦 或 是 我   得 删 除 这 些 不 必 要 的 函 式?虽 然 我 是   散 惯 的 人, 但 这 些 函 式 确 实 是 必 须 的。 它 们 是 被 位 於frame2.html中 之JavaScript语 法 所 呼 叫 而 执 行 的。 我 在frame2.html中 利 用Java Script语 法 制 作 了 三 个 按 钮, 制 作 按 钮 来 呼 叫 函 式 的 方 法 我 已 在 第 一 章 提 过, 相 信 您 对onClick的 用 法 已 相 当 熟 悉。 但 是...... parent.fr1 是 干 嘛 用 的?

若 您 对 物 件 观 念 已 相 当 了 解, 相 信 它 对 您 不 是 甚 麽 新 鲜 事。 您 可 以 看 到frames.html同 时 呼 叫 frame1.html 与 frame2.html两 个 档 案, 所 以frames.html称 为frame1.html与frame2.html的 parent (请 恕 我 直 接 用 英 文)。 同 理, 这 两 个 新 的frame就 称 为frames.html的 child- frames。 您 可 将 这 种 复 杂 的 关 系 想 像 成 阶 层 式 架 构(hierarchy)。 以 下 我 借 助 一 个 小 '图' 来 厘 清 这 种 关 系:

              frames.html                parent
               /      /
              /        /
             /          /
  fr1(frame1.html)     fr2(frame2.html)   children

当 然 您 可 依 此 类 推, 产 生 一 些 'grandchildren' frames。 (当 然, 这 并 不 是 正 式 的 名 称):

              frames.html                parent
               /      /
              /        /
             /          /
  fr1(frame1.html)     fr2(frame2.html)   children
          /  /
         /    /
        /      /
    gchild1  gchild2                    'grandchildren'      

若 您 想 由frame2.html呼 叫parent- frame中 的 任 何 函 数, 您 只 要 将 parent 放 在 您 欲 呼 叫 函 数 名 称 之 前 即 可。 同 理, 若 由parent- frame呼 叫 位 於frame1.html中 的 函 数, 您 只 需 将 fr1 放 在 被 呼 叫 函 数 名 称 之 前。 为 什 麽 用 fr1 呢?原 因 是 我 们 在frames.html中 开 了 两 个frame, 而 且 将 它 们 分 别 命 名 为 fr1fr2。 所 以 我 用 fr1 代 表 第 一 个frame (frame1.html)。 接 下 来 的 步 骤 就 相 当 容 易 了。 当 我 们 欲 由frame2.html ( 命 名 为 fr2)呼 叫 第 一 个frame中 的 函 式 时 该 怎 麽 做?由 上 面 的"小 图"您 可 以 发 现, frame1.html 和frame2.html之 间 并 无 直 接 关 连 (connection), 因 此 您 不 可 以"直 接"由frame2.html呼 叫 位 於 frame1.html中 的 函 式。 您 必 须 透 过parent- frame来 呼 叫 它, 所 以 正 确 指 标(index)应 为 parent.fr1。 例 如 若 您 想 由frame2.html呼 叫 hi(), 您 必 须 写 成 parent.fr1.hi()。 这 也 就 是 为 什 麽 frame2.html中 的 onClick要 写 成 那 种 样 子 的 原 因 了。

对 了!附 带 提 一 点 小 东 西。 您 或 许 已 发 现 本 章 中 都 用<script language="JavaScript">代 替 前 两 章 用 的<script language="LiveScript">。 其 实 此 二 者 间 并 没 什 麽 差 别。 但 起 初JavaScript被 植 入Netscape 浏 览 器 时, 您 只 能 用LiveScript语 法。(这 是 一 种 由Netscape发 展 的 旧 语 法, 和JavaScript极 为 类 似 )。 我 想 既 然 我 们 讨 论 的 是JavaScript函 式, 就 应 使 用JavaScript语 法。 (这 只 是 我 的 一 己 之 见, 在 'JavaScript- society'中 有 许 多 关 於LiveScript的 讨 论, 目 前 也 是 众 说 纷 纭....)


在 此 我 要 花 一 点 时 间 讨 论 一 个 很 多 人 关 心 的 问 题。 当 您 观 赏 一 个 拥 有 数 个frame的 网 页 时, 若 您 想link至internet其 它 网 页, 这 些frame并 不 会 消 失 而 且 会 带 来 视 觉 上 的 干 扰。 这 些 讨 厌 的frame应 该 如 何 消 除 呢?

您 只 要 在 您 的<a href...> tag中 加 入TARGET="_top" 就 可 解 决 这 个 困 扰。 方 法 如 下:

<a href="goaway.html" TARGET="_top">如 果 您 不 想 观 赏 我 的 网 页 了</a>

当 然, 您 必 须 在 您 想 要 获 得 此 效 果 的link中 都 加 入TARGET="_top" 。 若 想 要 整 个 网 页 中 的link 都 有 此 效 果, 您 可 在 此 网 页 的head中 加 入<base target="_top">较 方 便。 如 此 一 来 每 个link被 按 下 後 都 可 将frame消 除。


Android编程权威指南(第二版)学习笔记(十六)—— 第16章 使用 intent 拍照

本章主要讲了如何使用 intent 拍照,存储照片和展示照片
  • kniost
  • kniost
  • 2017年01月12日 17:55
  • 393

跟我学《JavaScript高程3》,开讲啦……

他们都推荐讲一讲《JavaScript高级程序设计第三版》,这本书特别厚,群里的同学也提了很多次,自学很难坚持看完。所以,接下来将按照这本书的目录结构,依次录制一整套视频教程,用最贴近初学者的方式,与...
  • guxing820
  • guxing820
  • 2016年05月25日 01:44
  • 1183

Nature:Hinton、LeCun、Bengio三巨头权威科普深度学习

Hinton、LeCun、Bengio 是深度学习的最权威的科学家。文中介绍的网络是深度学习中最为成熟,经典的部分。读这篇文章可以对深度学习的核心模块有一个最快的认识。    背景 ...
  • Richard_More
  • Richard_More
  • 2016年08月27日 12:00
  • 2533

阿朴橡皮章教程——进阶版[套色]【转侵删】

个人比较喜欢做手工类的东西  所以转两篇橡皮章教程上来  原作者阿朴  用手机在《约绘》上扫描下来的 并非用作商业用途  如有侵权请告知  会马上删掉...
  • goblinlq
  • goblinlq
  • 2015年03月23日 23:54
  • 982

章文嵩:怎样做开源才有意义?

大家好,我是InfoQ的主持人,现在在架构师峰会现场。今天我们很高兴邀请到阿里云的技术负责人章文嵩博士来接受我们的采访。第一个问题是有关淘宝-阿里系的开源进程,我们从外面看起来似乎是有三个比较明显的阶...
  • robertsong2004
  • robertsong2004
  • 2014年08月20日 14:47
  • 1211

JavaScript的三大组成部分

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现...
  • qq_29134495
  • qq_29134495
  • 2016年07月22日 12:58
  • 4281

在2016年如何学习JavaScript?

在2016年如何学习JavaScript?原文链接 Want to learn JavaScript in 2016?作者:Vincent O译者:相信有不少人已经读过在 2016 年学 JavaSc...
  • xllily_11
  • xllily_11
  • 2016年11月04日 11:08
  • 3352

如何理解区分"人工智能"、“机器学习”、“深度学习”三大巨星

如何理解区分"人工智能"、“机器学习”、“深度学习”三大巨星
  • lzrtutu
  • lzrtutu
  • 2017年10月20日 15:40
  • 188

一个治愈 JavaScript 疲劳的学习计划

网络埋伏纪事 · 2016-11-12翻译 5706阅读 原文链接  像其他人一样,我最近偶然看到 Jose Aguinaga 的文章《在 2016 年学 JavaScript ...
  • dj0379
  • dj0379
  • 2016年11月26日 12:42
  • 885

javascript学习心得

不论你是想学各种前端框架还是nodejs,都需要深入理解javascript的工作原理以及特性,只有这样才能以不变应万变。最近看了一些js的教学视频与NC的《JS的高级程序设计》这本书,在这里总结一下...
  • freestyle4568
  • freestyle4568
  • 2017年04月24日 22:18
  • 546
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript学习 第 三 章
举报原因:
原因补充:

(最多只允许输入30个字)