神奇的CSS形状
【感谢 Neo 投递本文 – 微博帐号:@_锟_ 】
在StackOverflow上有这么一个问题,有位同学在http://css-tricks.com/examples/ShapesOfCSS/ 找到一些使用CSS做的形状,其中一位同学对下面的这个形状充满了疑问。
形状是:
代码是:
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
这位同学就提问啦,为啥这么这么几句就能画出一个三角形呢?
于是呢,有高人出现,这个高人图文并茂的解释了这个三角的成因
首先呢,我们需要了解HTML标记的Box Model(盒模型),这个例子中呢我们将content,padding都看作content。忽略掉margin。那么一个盒模型就是下图
中间是内容,然后是4条边。每一条边都有宽度。
根据上面CSS的定义,没有border-to ...
理解Javascript的闭包
【感谢 Neo 投递本文 – 微博帐号:_锟_ 】
前言:还是一篇入门文章。Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包对于那些使用传统静态语言C/C++的程序员来说是一个新的语言特性。本文将以例子入手来介绍Javascript闭包的语言特性,并结合一点ECMAScript语言规范来使读者可以更深入的理解闭包。
注:本文是入门文章,例子素材整理于网络,如果你是高手,欢迎针对文章提出技术性建议和意见。本文讨论的是Javascript,不想做语言对比,如果您对Javascript天生不适,请自行绕道。
目录
什么是闭包
ECMAScript闭包模型
闭包的样列
闭包的应用
什么是闭包
闭包是什么?闭包是Closure,这是静态语言所不具有的一个新特性。但是闭包也不是什么复杂到不可理解的东西,简而言之,闭包就是:
闭包就是函数的局部变量集合,只是这些局部变量在函数返回后会继续存在。
闭包就是就是函数的“堆栈”在函数返回后并不释放,我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配
...
再谈javascript面向对象编程
前言:虽有陈皓《Javascript 面向对象编程》珠玉在前,但是我还是忍不住再画蛇添足的补上一篇文章,主要是因为javascript这门语言魅力。另外这篇文章是一篇入门文章,我也是才开始学习Javascript,有一点心得,才想写一篇这样文章,文章中难免有错误的地方,还请各位不吝吐槽指正
目录
吐槽Javascript
__proto__成员
函数对象prototype成员
new 操作符
Pseudoclassical 继承
Prototypal继承
参考:
题外话:
吐槽Javascript
初次接触Javascript,这门语言的确会让很多正规军感到诸多的不适,这种不适来自于Javascript的语法的简练和不严谨,这种不适也来自Javascript这个悲催的名称,我在想网景公司的Javascript设计者在给他起名称那天一定是脑壳进水了,让Javascript这么多年来受了这么多不白之冤,人们都认为他是Java的附属物,一个WEB玩具语言。因此才会有些人会对Javascript不屑,认为Ja ...
Javascript 面向对象编程
Javascript是一个类C的语言,他的面向对象的东西相对于C++/Java比较奇怪,但是其的确相当的强大,在 Todd 同学的“对象的消息模型”一文中我们已经可以看到一些端倪了。这两天有个前同事总在问我Javascript面向对象的东西,所以,索性写篇文章让他看去吧,这里这篇文章主要想从一个整体的角度来说明一下Javascript的面向对象的编程。(成文比较仓促,应该有不准确或是有误的地方,请大家批评指正)
另,这篇文章主要基于 ECMAScript 5, 旨在介绍新技术。关于兼容性的东西,请看最后一节。
目录
初探
属性配置 – Object.defineProperty
Get/Set 访问器
查看对象属性配置
call,apply, bind 和 this
继承 和 重载
组合
Prototype 和 继承
兼容性
Object.create()函数
defineProperty()函数
keys()函数
Object.getP ...
Web程序的最佳测试数据
这里有一篇Matthias写的关于转义字符文章-“The art of escaping”,这篇文章告诉你有一些比较特殊的字符需要你去认真的处理,不然,你的网站程序轻则出错,重则被人黑了。这些物殊的字符是[<"@%'&_\?/:;,>কী €] ,你可以使用这个字符串到任意一个可以输入的Web程序上去做测试。
下面这个表格告诉你为什么这些字符很特殊。这个列表不会是完整的,而且也永远不会完整。
相关领域
转义字符
HTML
< , > , &
JSON
“
SQL in mySql
字符串 “, ‘, 通配符 %, _
rfc 1738 for URL-parameter
;, /, ?, :, “, @, =, & 空格
把这些转义字符放在一起,然后再整些 utf-8 的一些特殊字符。这些utf-8的字符你可以参看本站的 ...
Web中的省略号
在Web开发中,对于一种情况很常见。那就是,文本太长,而放置文本的容器不够长,而我们又不想让文本换行,所以,我们想使用省略号来解决这个问题。但是,在今天HTML的标准中并没有相关的标识或属性让你可以简单地完成这个事。但是我们可以使用CSS样式表来完成这个事,在IE,Safari,Chrome,Opera中都可以。但在Firefox中却不行,但我们可以使用jQuery来解决Firefox不兼容的问题。下面是相关的代码示例。
使用CSS设置省略号
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
overflow 属性是必需的,并且属性要是hidden。
white-space: nowrap 也是必需的。如果文本可以自动换行,就算是不可见,也不会有省略号的。因为文本换行了,所以没有超过容器的尺寸,所以也就不会有省略号了。
width 属性仅在需要支持IE6时设置。 设置成100%仅是为了解决I ...
如何检测浏览器是否支持CSS3
如何检测用户的浏览器是否支持CSS3,我们需要使用HTML,CSS和JavaScript来完成这件事情。下面是步骤。
1)先制作下面的HTML
<span id="check" rel="Detect"></span>
2)然后书写下面的CSS
#check {
display: none;
width: 0;
height: 0;
}
#check[rel^="D"] {
display: block;
width: 0;
height: 0;
}
3)下面是JavaScripts的检测脚本
请确保下面的代码放在HTML文件头。
[javascript]
<script type="text/javascript">
var obj = document.getElementById("check");
var file="special.css";
if (window.getComputedStyle)
&n ...
如何自己写一个网络爬虫
这里是维基百科对网络爬虫的词条页面。网络爬虫以叫网络蜘蛛,网络机器人,这是一个程序,其会自动的通过网络抓取互联网上的网页,这种技术一般可能用来检查你的站点上所有的链接是否是都是有效的。当然,更为高级的技术是把网页中的相关数据保存下来,可以成为搜索引擎。
从技相来说,实现抓取网页可能并不是一件很困难的事情,困难的事情是对网页的分析和整理,那是一件需要有轻量智能,需要大量数学计算的程序才能做的事情。下面一个简单的流程:
在这里,我们只是说一下如何写一个网页抓取程序。
首先我们先看一下,如何使用命令行的方式来找开网页。
telnet somesite.com 80
GET /index.html HTTP/1.0
按回车两次
使用telnet就是告诉你其实这是一个socket的技术,并且使用HTTP的协议,如GET方法来获得网页,当然,接下来的事你就需要解析HTML文法,甚至还需要解析Javascript,因为现在的网页使用Ajax的越来越多了,而很多网页内容都是通过Ajax技术加载的,因为,只是简单地解析HTML文件在未来会远远不够。当然,在这里,只是展示一个非常简单的抓取, ...