2008-05
07

学习计划

生活 ，，， 75次浏览 7

下个学期即将找工作，该好好学习一下了，暂且列一个小计划以作督促。

至于以后的工作方向，我把自己定位于 Web 前端开发。对于这个定位我考虑过很久，对 Web 前端技术的浓厚兴趣，是我做出这个选择最主要的原因，也是最大的学习动力所在；而且我认为一个具体的定位会让自己学习方向更加专一。希望经过一段时间的学习，使我的能力得到一定的提高，将来能找到满意的工作。

具体的计划如下（优先级从高到低）：

1、JavaScript

目前在读《JavaScript 权威指南》和《Ajax 实战》，读完之后准备继续读《JavaScript 高级程序设计》和 Realazy 翻译的《精通 JavaScript》。学习目标是深入理解 JavaScript 的各种基本特性，包括对象的构建、继承、闭包等等。

若除书读完还有多余时间，准备学习 prototype 和 jQuery 等框架的源代码。

2、程序设计和算法

《数据结构》以前只是粗略地看过，现在必须认真学习，貌似在计算机类招聘的笔试和面试中数据结构是最常考的。尽管比较头大，但是不学不行啊（莫非这是此生最后一次应试学习？呵呵）不过在数据结构中确实能学到很多东西。

Java：我认为一个前端开发人员必须至少熟悉一种服务器端语言，Java 我也学了不短的时间了，需要复习一下。

如果还有多余的时间，简要看一下设计模式。

3、其他

CSS：暂时不读此方面的书了，主要是平时在互联网上看一看，重点还是放在 JS 上。

Web 标准：同上，主要还是从理念上深化 Web 语义化、可访问性等概念。

英语：不用多说了，一辈子都在学。

————分割线————

如果还有什么疏忽遗漏的地方，请各位朋友指教。回过头一看，感觉任务好重啊，尽量努力吧，为自己加油。

2008-04
09

JavaScript下拉菜单

Web ，， 384次浏览 2

去年我曾经写过一篇 CSS 下拉菜单，其中完全只使用 CSS 实现了导航条鼠标悬停下拉菜单的效果（演示地址）。但是只用 CSS 实现起来比较麻烦，代码较多，而且为了浏览器的兼容性不得不使用了两个 CSS 文件，所以我把它叫做“探究”，实用性并不强。

最近我从 blog 的流量统计中发现，很多网友通过搜索“JS 下拉菜单”关键字访问到了我的那篇文章。不过很遗憾，那篇文章和 JavaScript 一点关系都没有，有误导网友之嫌。所以，昨天我花了一点时间把原来的代码做了一点修改，搞了一个 JS 版下拉菜单。其实用 JS 实现下拉菜单比 CSS 简单多了，因为各个浏览器之间对 JS 支持的差异相比 CSS 来说要小一些，不需要花那么多心思用在对付浏览器上。如果 HTML 的结构良好，只需要很少的 JS 代码即可实现，而且可以实现多级下拉菜单的效果（我的示例中给出了二级下拉菜单，可以根据需要按照原来的 HTML 结构逐级添加）。

演示地址

页面源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JavaScript下拉菜单</title>
    <style type="text/css">
        * {
            padding:0;
            margin:0;
        }
        body {
            font-family:verdana, sans-serif;
            font-size:small;
        }
        #navigation, #navigation li ul {
            list-style-type:none;
        }
        #navigation {
            margin:20px;
        }
        #navigation li {
            float:left;
            text-align:center;
            position:relative;
        }
        #navigation li a:link, #navigation li a:visited {
            display:block;
            text-decoration:none;
            color:#000;
            width:120px;
            height:40px;
            line-height:40px;
            border:1px solid #fff;
            border-width:1px 1px 0 0;
            background:#c5dbf2;
            padding-left:10px;
        }
        #navigation li a:hover {
            color:#fff;
            background:#2687eb;
        }
        #navigation li ul li a:hover {
            color:#fff;
            background:#6b839c;
        }
        #navigation li ul {
            display:none;
            position:absolute;
            top:40px;
            left:0;
            margin-top:1px;
            width:120px;
        }
        #navigation li ul li ul {
            display:none;
            position:absolute;
            top:0px;
            left:130px;
            margin-top:0;
            margin-left:1px;
            width:120px;
        }
    </style>
    <script type="text/javascript">
        function displaySubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "block";
        }
        function hideSubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "none";
        }
    </script>
</head>
<body>
    <ul id="navigation">
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
            <a href="#">栏目1</a>   
            <ul>
                <li><a href="#">栏目1->菜单1</a></li>
                <li><a href="#">栏目1->菜单2</a></li>
                <li><a href="#">栏目1->菜单3</a></li>
                <li><a href="#">栏目1->菜单4</a></li>
            </ul>
        </li>
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
            <a href="#">栏目2</a>   
            <ul>
                <li><a href="#">栏目2->菜单1</a></li>
                <li><a href="#">栏目2->菜单2</a></li>
                <li><a href="#">栏目2->菜单3</a></li>
                <li><a href="#">栏目2->菜单4</a></li>
                <li><a href="#">栏目2->菜单5</a></li>
            </ul>
        </li>
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
            <a href="#">栏目3</a>   
            <ul>
                <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
                    <a href="#">栏目3->菜单1</a>
                    <ul>
                        <li><a href="#">菜单1->子菜单1</a></li>
                        <li><a href="#">菜单1->子菜单2</a></li>
                        <li><a href="#">菜单1->子菜单3</a></li>
                        <li><a href="#">菜单1->子菜单4</a></li>
                    </ul>
                </li>
                <li><a href="#">栏目3->菜单2</a></li>
                <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
                    <a href="#">栏目3->菜单3</a>
                    <ul>
                        <li><a href="#">菜单3->子菜单1</a></li>
                        <li><a href="#">菜单3->子菜单2</a></li>
                        <li><a href="#">菜单3->子菜单3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>
2007-11
29

SWFobject：使用Javascript操作Flash

Web ，， 766次浏览 6

一位同学今天找我帮他做一个页面，静态的 html 页面，要求在页面中放入多个 Flash 小游戏的链接和一个游戏区域，通过 Javascript 操作 flash，点击小游戏的链接之后在游戏区域中显示所选的 flash，无需刷新页面实现 flash 的更换。

熟悉 javascript 的朋友都知道，用这种方法操作图片是非常简单的，只需要通过 DOM 修改 img 标签的 src 属性即可实现图片的更换。而我们常见的页面中的 flash 都是使用 object、embed 等标签，这些标签并不是标准的 xhtml 标签，所以不能通过 DOM 来操作。

这个问题把我难住了，于是马上到 google 寻找答案，结果一不小心来到了 aw 的这篇文章：SWFObject：基于Javascript的Flash媒体版本检测与嵌入模块。文章中详细的介绍了 SWFObject，使用它可以方便地在 html 中使用 javascript 插入 flash（.swf文件），方法如下：

1、在 html 中包含 swfobject.js 文件，并为 swf 文件预留一个 html 结点（这个 html 结点内的所有内容都会在客户端被 flash 资源替换，当客户端没有安装 flash播放器的时候，这些内容会显示出来。这一特色在 SEO 以及对用户体验方面非常有必要）。

<script type="text/javascript" src="swfobject.js"></script>
        
<div id="flashcontent">
  This text is replaced by the Flash movie.
</div>

2、在 js 中创建一个新的 SWFObject 实例，设置参数，写入 html 中预留的节点中。

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
   so.write("flashcontent");
</script>

这6个参数的意义：

  • swf - SWF文件路径
  • id - 您为这个SWF文件分配的id值，它将用于给embed与object标签设定name属性，以便于可以支持swliveconnect的功能，如动态传入变量
  • width - 宽度
  • height - 高度
  • version - FlashPlayer需要的版本号，它可以详细到 ‘主版本号.小版本号.细节’，例如：”6.0.65″。一般地，我们只需传入主版本即可，例如：”6″。
  • background-color - Flash资源的背景色，16进制格式

（以上代码和说明均摘自 aw 的原文，swfobject.js 的下载地址也请参看原文。原文中还有很多细节的东西，由于我基本不懂 flash，而且前面的这些对我已经够用了，所以就不再引用。感兴趣的朋友可以查看原文，感谢 aw 的文章。）

这样就好了，我只需要在链接中把 flash 的文件路径传递给 javascript 即可，这样就可以在一个页面中切换多个 flash 的显示，具体的代码很简单，就不再写了。