编程开发 类目

学会编程我们能够和计算机沟通

Javascript DOM 笔记

HTML文档可以看成由各种 DOM 节点组成的文档树,例如:整篇文档是一个文档节点;第个标签都是一个元素节点;文本内容可以看成文本节点;标签属性是属性节点,甚至注释也是注释节点。

nodeType

元素节点的类型可以通过node.nodeType访问,例如:

document.nodeType           # 9

主要的节点类型如下所示:

Element Type Node Type
Element 1
Attribute 2
Text 3
Comment 8
Document 9

继续阅读

Browser detect 脚本分析

目前浏览器检测 (Browser detect) 一般有两种方法:

  • 基于userAgent的值的检测;
  • 基于对象的检测,即object detection;

而第一种方法,一般来说效果并不是非常理想,因为许多浏览器都允许用户更改userAgent的值,起因要追究于第一次浏览器大战(PPK on Javascript p57)。因此,这一类的检测都不是万能的,无论是基于navigator.userAgent还是navigator.vendor等,浏览器总有办法绕过这一层检测。

PPK 在他的一篇文章中提供的检测脚本其实也是基于navigator的,但是他在整个脚本的设计上非常细致,覆盖了许多细节,看了之后收获很大。首先使用了下ppk的检测脚本,博客首页右方检测浏览器的功能正是使用ppk的脚本。

例子

当时看脚本的时候还是有点迷糊,因为脑子里面对各个浏览器的userAgent内容非常模糊,其实自己就用过Firefox、Chrome、IE、Opera等几个浏览器,没试过Safari、Konqueror、iCab等等。回头看完了脚本,我就把自己电脑上有的浏览器的userAgent都看了一遍并列了出来:

Opera/9.80 (Windows NT 6.1; U; Edition IBIS; en) Presto/2.6.30 Version/10.60
Mozilla/5.0 (Windows NT 6.1; rv:2.0b8pre) Gecko/20101029 Firefox/4.0b8pre
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.7 (KHTML, like Gecko) Chrome/7.0.517.41 Safari/534.7
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; Tablet PC 2.0; AskTB5.6)

然后是脚本检测的结果分别是:

You're using Opera 9.8 on Windows !
You're using Firefox 4 on Windows !
You're using Chrome 7 on Windows !
You're using Explorer 9 on Windows !

继续阅读

简洁的 Bash Programming 技巧(三)

这是简洁的 Bash Programming 技巧系列的第三篇文章,这一系列的文章专门介绍Bash编程中一些简洁的技巧,帮助大家提高平时 Bash 编程的效率。有兴趣的同学可以回顾下之前的两篇文章(一)续篇

1. 替换语法${parameter/pattern/string}的妙用

${parameter/pattern/string}将parameter中匹配pattern的部分替换成string,例如下面的例子将字符串中的e替换成x:

$ str="three"
$ echo "${str/e/x}"   # thrxe

如果pattern部分以/开头,表示替换parameter中所有匹配的内容,例如:

$ str="three"
$ echo "${str//e/x}"  # thrxx

如果pattern部分以#开头,表示仅当parameter开始处匹配pattern的时候替换,例如:

str="three"
$ echo "${str/#e/x}" # three
$ echo "${str/#t/x}" # xhree

与此对应地是,如果pattern部分以%开头,表示仅当parameter结尾处匹配pattern的时候替换,例如:

$ str="three"
$ echo "${str/%e/x}" # threx

如果string部分为空,匹配pattern的部分被删除(替换为空),例如:

$ str="three"
$ echo "${str/h/}"  # tree

继续阅读

Bash Pitfalls: 编程易犯的错误(一)

Bash Pitfalls 文章介绍了40多条日常 Bash 编程中,老手和新手都容易忽略的错误编程习惯。每条作者在给出错误的范例上,详细分析与解释错误的原因,同时给出正确的改写建议。文中有不少引用的文章,也值得大家仔细阅读。仔细阅读了这篇文章后,收获很多,不感独享,把这篇文章以半翻译半笔记的形式分享给大家。

本篇翻译一共分成四篇文章,以下是索引:

1. for i in $(ls *.mp3)

Bash写循环代码的时候,确实比较容易犯下面的错误:

for i in $(ls *.mp3); do    # 错误!
    some command $i         # 错误!
done

for i in $(ls)              # 错误!
for i in `ls`               # 错误!

for i in $(find . -type f)  # 错误!
for i in `find . -type f`   # 错误!

files=($(find . -type f))   # 错误!
for i in ${files[@]}        # 错误!

这里主要两个问题:

我们不能避免某些文件名中包含空格,Shell会对$(ls *.mp3)展开的结果会被做单词拆分(WordSplitting)的处理。假设有一个文件,名字为01 - Don't Eat the Yellow Snow.mp3,for循环处理的时候,会今次遍历文件名中的每个单词:01, -, Don't, Eat等等:
继续阅读

学习Perl笔记(一)

Perl闻名已久,这次终于下定决心好好学习一番。前两天从晓攀那里搜刮了一堆Perl的文档,不过仔细一看全是动辄三、四百页的大块头,感觉还真不适合像我这样想最短时间内能够了解这门语言的人看。我比较喜欢简短精炼的教程,比如我是通过A Byte of Python入门学习Python,通过A Byte of Vim入门学习Vim,通过Shell十三问对Shell的熟悉与理解更上一层楼的。

所幸地是,像我这样的人不在少数,我从StackOverflow网站的一个回答上找到一些教程,从中我挑了Learning Perl the Hard Way作为入门读物(从主页上下载了PDF版本,好像更新日期是2003年,不知道是不是过旧了?)。

继续阅读

WordPress 使用阿里云 OSS 作为图床

我一般很少在博客中放置图片,主要原因是没有一个合适的图床。昨天浏览阿里云论坛的时候,无意间看到有oss4wordpress的插件,欣喜之下就决定试试,试用下来效果还是不错的。

独乐乐不如众乐乐,我把昨天折腾的过程记录下来给有需要的人。

OSS 收费情况

OSS 对于新开通的用户有半年的试用时间,试用期间的服务套餐为:

继续阅读

博客侧栏显示文章目录

有些博客文章很长,像我又不喜欢给文章分页,这样一篇博客读下来鼠标要拖很久,读者比较难定位到关心的内容。解决这个问题有很多措施,一种是在文章拖到底部的时候显示一个返回顶部的按钮(做法参考博客添加回到顶部按钮),另外一种是做一个文章目录,这样就比较直观了。

TOC+插件

我之前用Table of Contents Plus插件来实现这个功能,这个插件设置还很多,我之所以选择它,是因为这个插件提供一个文章目录小工具,可以放到侧栏。其它同类的插件或者实现,都是把目录显示在文章内部,比如开头或者结尾,但是在阅读过程中,这其实还是跟没有一样。

继续阅读

WordPress 使用 WP-Emmet 插件

WordPress自带的文章编辑框实在是弱爆了,曾经想换成MarkDown编辑器,但是换上它之后担心以后迁移比较麻烦,毕竟保存在数据库中的内容都是markdown文本,而不是渲染后的HTML文本。

前两天在网上无意间看到一篇讲ZenCoding的新闻,突然想起这个几年前折腾过的神器,想都不想就开始在Wordpress主页上搜索有没有相关的插件了。

ZenCoding现在貌似改成Emmet了,主页为这Emmet — the essential toolkit for web-developers。WP上搜索到一款插件,叫做WP-Emment,这款插件貌似下载的人不多。

继续阅读