Javascript Char Codes (Key Codes)

From: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Javascript is often used on the browser client side to perform simple tasks that would otherwise require a full postback to the server. Many of those simple tasks involve processing text or characters entered into a form element on a web page, and it is often necessary to know the javascript keycode associated with a character. Here is a reference.

Key Code
backspace 8
tab 9
enter 13
shift 16
ctrl 17
alt 18
pause/break 19
caps lock 20
escape 27
page up 33
page down 34
end 35
home 36
left arrow 37
up arrow 38
right arrow 39
down arrow 40
insert 45
delete 46
0 48
1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57
a 65
b 66
c 67
d 68
Key Code
e 69
f 70
g 71
h 72
i 73
j 74
k 75
l 76
m 77
n 78
o 79
p 80
q 81
r 82
s 83
t 84
u 85
v 86
w 87
x 88
y 89
z 90
left window key 91
right window key 92
select key 93
numpad 0 96
numpad 1 97
numpad 2 98
numpad 3 99
numpad 4 100
numpad 5 101
numpad 6 102
numpad 7 103
Key Code
numpad 8 104
numpad 9 105
multiply 106
add 107
subtract 109
decimal point 110
divide 111
f1 112
f2 113
f3 114
f4 115
f5 116
f6 117
f7 118
f8 119
f9 120
f10 121
f11 122
f12 123
num lock 144
scroll lock 145
semi-colon 186
equal sign 187
comma 188
dash 189
period 190
forward slash 191
grave accent 192
open bracket 219
back slash 220
close braket 221
single quote 222

javascript Array 索引 僅能用數值型態,物件的索引才能用字串型態的。

From: http://stackoverflow.com/questions/9526860/why-does-a-string-index-in-a-javascript-array-not-increase-the-length-size

Javascript arrays cannot have “string indexes". A Javascript Array is exclusively numerically indexed. When you set a “string index", you’re setting a property of the object. These are equivalent:

array.a = ‘foo’;
array[‘a’] = ‘foo’;

Those properties are not part of the “data storage" of the array.

If you want “associative arrays", you need to use an object:

var obj = {};
obj[‘a’] = ‘foo’;

Maybe the simplest visualization is using the literal notation instead of new Array:

// numerically indexed Array
var array = [‘foo’, ‘bar’, ‘baz’];

// associative Object
var dict = { foo : 42, bar : ‘baz’ };

[轉貼] 如何取得網頁元素的 “scrollbar" 右移最大值 ,scrollWidth、clientWidth 定義

來源:http://www.360doc.com/content/11/1025/09/432969_158877433.shtml ,http://stackoverflow.com/questions/5138373/how-do-i-get-the-max-value-of-scrollleft

如何取得網頁元素的 “scrollbar" 右移最大值

下面這行就可得知元素的 “scrollbar" 右移的最大值。

var maxScrollLeft = element.scrollWidth – element.clientWidth;

scrollHeight: 獲取對象的滾動高度。
scrollLeft: 設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop: 設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth: 獲取對象的滾動寬度

offsetHeight: 獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的高度
offsetLeft: 獲取對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop: 獲取對象相對於版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
offsetWidth: 是對象的可見寬度,包滾動條等邊線,會隨窗口的顯示大小改變

event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
clientWidth: 是對象可見的寬度,不包滾動條等邊線,會隨窗口的顯示大小改變。
clientHeight: 都認為是內容可視區域的高度,也就是說頁面瀏覽器中可以看到內容的這個區域的高度,一般是最後一個工具條以下到狀態欄以上的這個區域,與頁面內容無關。 內容來自17jquery

event.offsetX 相對容器的水平坐標
event.offsetY 相對容器的垂直坐標
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量 一起

以上主要指IE之中,FireFox差異如下:
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width – border
clientHeight = height – border
offsetWidth = width
offsetHeight = height

(需要提一下:CSS中的margin屬性,與clientWidth、offsetWidth、clientHeight、offsetHeight均無關) 1

[轉貼] a:link / a:visited / a:hover / a:active 使用上的順序

來源:http://www.dotblogs.com.tw/joysdw12/archive/2011/01/07/20651.aspx

在網站超連結效果使用上常常用到 a:link / a:visited / a:hover / a:active 這幾個css屬性。但是在使用上必須注意到的是這些屬性是有順序的。

使用上的順序如下:

        /* 未連結 */
        a:link
        {
            color: #000000;
        }
        /* 已連結過 */
        a:visited
        {
            color: #FF0000;
        }
        /* 滑鼠移至連結 */
        a:hover
        {
            color: #00FF00;
        }
        /* 選擇的連結 */
        a:active
        {
            color: #0000FF;
        }
 

a:hover 需放置在 a:link 跟 a:visited 之後,則 a:active 放置在 a:hover 之後。

jquery plugin 在 input 內顯示輸入說明文字 範例

# jQuery Plugin Code

  $.fn.description_inside_input_field = function(){
        return this.each(function(){
            $(this).val($(this).prop('title'));
            $(this).focus(function(){
                if($(this).val()==$(this).prop('title')){
                    $(this).val('');
                }
            }).focusout(function(){
                if($(this).val()==''){
                    $(this).val($(this).prop('title'));
                }
            });
        });
    }

# Document Ready

$("tr.add_row input[type='text']").description_inside_input_field();

# Html Code

<table id="table_add_data">
<tbody>
<tr class="add_row">
<td><input class="year" title="年度" type="text" value="" /></td>
<td><input class="electric" title="電力" type="text" value="" /></td>
<td><input class="derv" title="柴油" type="text" value="" /></td>
<td><input class="natural_gas" title="天然氣" type="text" value="" /></td>
<td><input class="gas" title="汽油" type="text" value="" /></td>
<td><input class="lpg" title="液化石油氣" type="text" value="" /></td>
<td><input class="tap_water" title="自來水" type="text" value="" /></td>
<td><input class="add_button" type="button" value="新增" /><input class="cancel_button" type="button" value="取消 " /><input class="submit" type="button" value="送出" /></td>
</tr>
</tbody>
</table>

轉貼:PHP抓取網頁和分析

有些網頁的內容是常常變動的,但是又不可能一直盯著看,所以研究看看怎麼用 PHP 抓取網頁內容。

From:http://my.opera.com/kmgocc/blog/show.dml/322416

http://272586.blogspot.com/2007/05/php.html

http://www.fantxi.com/blog/show-618-1.html

http://www.inote.tw/2009/04/php-curl.html

譯者:limodou

抓取和分析一個文件是非常簡單的事。這個教程將通過一個例子帶領你一步一步地去實現它。讓我們開始吧!

首先,首先必須決定我們將抓取的URL地址。可以通過在腳本中設定或通過$QUERY_STRING傳遞。為了簡單起見,讓我們將變量直接設在腳本中。

<?
$url = 'http://www.php.net';
?>

第二步,我們抓取指定文件,並且通過file()函數將它存在一個數組裡。

<?
$url = 'http://www.php.net';
$lines_array = file($url);
?>

好了,現在在數組裡已經有了文件了。但是,我們想分析的文本可能不全在一行裡面。為瞭解決這個文件,我們可以簡單地將數組$lines_array轉化成一個字符串。我們可以使用implode(x,y)函數來實現它。如果在後面你想用explode(將字符串變量數組),將x設成"|"或"!"或其它類似的分隔符可能會更好。但是出於我們的目的,最好將x設成空格。y是另一個必要的參數,因為它是你想用implode()處理的數組。

<?
$url = 'http://www.php.net';
$lines_array = file($url);
$lines_string = implode('', $lines_array);
?>

現在,抓取工作就做完了,下面該進行分析了。出於這個例子的目的,我們想得在<head>到</head>之間的所有東西。為了分析出字符串,我們還需要叫做正規表達式的東西。

<?
$url = 'http://www.php.net';
$lines_array = file($url);
$lines_string = implode('', $lines_array);
eregi("<head>(.*)</head>", $lines_string, $head);
?>

讓我們看一下代碼。正如你所見,eregi()函數按下面的格式執行:

eregi("<head>(.*)</head>", $lines_string, $head);

“(.*)"表示所有東西,可以解釋為,"分析在<head>和</head>間的所以東西"。$lines_string是我們正在分析的字符串,$head是分析後的結果存放的數組。

最後,我們可以輸數據。因為僅在<head>和</head>間存在一個實例,我們可以安全的假設數組中僅存在著一個元素,而且就是我們想要的。讓我們把它打印出來吧。

<?
$url = 'http://www.php.net';
$lines_array = file($url);
$lines_string = implode('', $lines_array);
eregi("<head>(.*)</head>", $lines_string, $head);
echo $head[0];
?>

轉自WeberDev.com

如何抓取網站的內容,並解析其內容

<?
$http="http://272586.blogspot.com"; //您想抓取的網址
$buffer = file($http); //將網址讀入buffer變數
for($i=0;$i<sizeof($buffer);$i++) //將每段文字讀出來,以換行為單位,sizeof會傳回共有幾筆
{
$n1=strpos(" ".$buffer[$i],"<title>"); //檢查你要找的字,是否存在,假設我想找<title>中的內容為何,為什麼前面要加空白,因為如果找到位置如果是第一個位置是0,0跟找不到在判斷會有問題
if($n1>0)
{
$n2=strrpos($buffer[$i],"</title>"); //找出</title>的位置
$title=substr($buffer[$i],$n1+6,$n2-$n1-6); //+6的意思是<title>的長度減掉前面的一個空白,-6的話是把長度減掉
//utf-8 轉 big5
$title=iconv("UTF-8","big5",$title);
echo $title."<br>n"; //將title的內容值印出n代表顯示原始碼的時候會換行,<BR>是brower顯示會換行
}
}
?>

PHP抓網頁內容

1.file_get_contents

<?
$url = http://www.xxx.com/;
$contents = file_get_contents($url);
//如果出現中文亂碼使用下面代碼
//$getcontent = iconv("gb2312", "utf-8",file_get_contents($url));
//echo $getcontent;
echo $contents;
?>

2.curl
我們必須先建立一個「curl」的連線,也因此,必須使用到「$ch = curl_init()」這個函式。而為了怕建立連線忘了關閉。因此,必須先寫好關閉的函式,「curl_close($ch)」。

接下來,你可以設定他截取網頁的選項,一般來說常用的有「CURLOPT_RETURNTRANSFER」、「CURLOPT_URL」、「CURLOPT_HEADER」、「CURLOPT_FOLLOWLOCATION」、「CURLOPT_USERAGENT」這幾個選項。而這幾個選項分別代表「將結果回傳成字串」、「設定截取網址」、 「是否截取header的資訊」、「是否抓取轉址」及「瀏覽器的user agent」。最後,再執行「curl_exec($ch)」以取出結果就可以了。

<?
$url = "http://www.xxx.com/";
$ch = curl_init();
$timeout = 5;
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
//在需要用戶檢測的網頁裡需要增加下面兩行
//curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_ANY);
//curl_setopt($ch, CURLOPT_USERPWD, US_NAME.":".US_PWD);
$contents = curl_exec($ch);
curl_close($ch);
echo $contents;
?>

以抓取yahoo為例,若我們要偽裝成google bot去抓取,那麼我們可以寫成下列的樣子:

$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL, "www.yahoo.com.tw");
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_USERAGENT, "Google Bot");
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
$output = curl_exec($ch);
curl_close($ch);
echo $output;

也可以將選項們設定一個陣列,以增加設定時的閱讀度。這時就得動用「curl_setopt_array()」這個函式了:

$ch = curl_init();
$options = array(CURLOPT_URL => 'www.yahoo.com.tw',
                 CURLOPT_HEADER => false,
   CURLOPT_RETURNTRANSFER => true,
   CURLOPT_USERAGENT => "Google Bot",
   CURLOPT_FOLLOWLOCATION => true
           );
curl_setopt_array($ch, $options);
$output = curl_exec($ch);
curl_close($ch);
echo $output;

3.fopen->fread->fclose

<?
$handle = fopen ("http://www.xxx.com/", "rb");
$contents = "";
do {
   $data = fread($handle, 8192);
   if (strlen($data) == 0) {
   break;
   }
   $contents .= $data;
} while(true);
fclose ($handle);
echo $contents;
?>

Css 如何讓 div 與父容器等高、div 與body等高

將父容器的「height」屬性設定為固定高度,再將子容器的「height」設定為100%。

<div style="height: 150px; border: 1px solid red;">
<div style="height: 100%;background-color:lightsteelblue;"></div>
</div>

同樣的方法可以套用在「body、html」的標籤上讓它的「height」屬性為 100%。如此在body下的div子容器只要將「height」設定為100%,它的高度會自動延申與body等高。

<style type='text/css'>
body,html {height:100%;}
.div_under_body {height:100%;}
</style>

HTML Escape Characters List

HTML Escape characters List

!! 逗號前面的空白記的去掉

Symbol Code Entity Name
&#8482 ;
&euro ;
Space &#32 ; &nbsp ;
! &#33 ;
&#34 ; &quot ;
# &#35 ;
$ &#36 ;
% &#37 ;
& &#38 ; &amp ;
&#39 ;
( &#40 ;
) &#41 ;
* &#42 ;
+ &#43 ;
, &#44 ;
&#45 ;
. &#46 ;
/ &#47 ;
0 &#48 ;
1 &#49 ;
2 &#50 ;
3 &#51 ;
4 &#52 ;
5 &#53 ;
6 &#54 ;
7 &#55 ;
8 &#56 ;
9 &#57 ;
: &#58 ;
; &#59 ;
&lt ; &#60 ; &lt ;
= &#61 ;
&gt ; &#62 ; &gt ;
? &#63 ;
@ &#64 ;
A &#65 ;
B &#66 ;
C &#67 ;
D &#68 ;
E &#69 ;
F &#70 ;
G &#71 ;
H &#72 ;
I &#73 ;
J &#74 ;
K &#75 ;
L &#76 ;
M &#77 ;
N &#78 ;
O &#79 ;
P &#80 ;
Q &#81 ;
R &#82 ;
S &#83 ;
T &#84 ;
U &#85 ;
V &#86 ;
W &#87 ;
X &#88 ;
Y &#89 ;
Z &#90 ;
[ &#91 ;
\ &#92 ;
] &#93 ;
^ &#94 ;
_ &#95 ;
` &#96 ;
a &#97 ;
b &#98 ;
c &#99 ;
d &#100 ;
e &#101 ;
f &#102 ;
g &#103 ;
h &#104 ;
i &#105 ;
j &#106 ;
k &#107 ;
l &#108 ;
m &#109 ;
n &#110 ;
o &#111 ;
p &#112 ;
q &#113 ;
r &#114 ;
s &#115 ;
t &#116 ;
u &#117 ;
v &#118 ;
w &#119 ;
x &#120 ;
y &#121 ;
z &#122 ;
{ &#123 ;
| &#124 ;
} &#125 ;
~ &#126 ;
Non-breaking space &#160 ; &nbsp ;
¡ &#161 ; &iexcl ;
¢ &#162 ; &cent ;
£ &#163 ; &pound ;
¤ &#164 ; &curren ;
¥ &#165 ; &yen ;
¦ &#166 ; &brvbar ;
§ &#167 ; &sect ;
¨ &#168 ; &uml ;
© &#169 ; &copy ;
ª &#170 ; &ordf ;
« &#171 ;
¬ &#172 ; &not ;
­ &#173 ; &shy ;
® &#174 ; &reg ;
¯ &#175 ; &macr ;
° &#176 ; &deg ;
± &#177 ; &plusmn ;
² &#178 ; &sup2 ;
³ &#179 ; &sup3 ;
´ &#180 ; &acute ;
µ &#181 ; &micro ;
&#182 ; &para ;
· &#183 ; &middot ;
¸ &#184 ; &cedil ;
¹ &#185 ; &sup1 ;
º &#186 ; &ordm ;
» &#187 ; &raquo ;
¼ &#188 ; &frac14 ;
½ &#189 ; &frac12 ;
¾ &#190 ; &frac34 ;
¿ &#191 ; &iquest ;
À &#192 ; &Agrave ;
Á &#193 ; &Aacute ;
 &#194 ; &Acirc ;
à &#195 ; &Atilde ;
Ä &#196 ; &Auml ;
Å &#197 &Aring ;
Æ &#198 ; &AElig ;
Ç &#199 ; &Ccedil ;
È &#200 ; &Egrave ;
É &#201 ; &Eacute ;
Ê &#202 ; &Ecirc ;
Ë &#203 ; &Euml ;
Ì &#204 ; &Igrave ;
Í &#205 ; &Iacute ;
Î &#206 ; &Icirc ;
Ï &#207 ; &Iuml ;
Ð &#208 ; &ETH ;
Ñ &#209 ; &Ntilde ;
Ò &#210 ; &Ograve ;
Ó &#211 ; &Oacute ;
Ô &#212 ; &Ocirc ;
Õ &#213 ; &Otilde ;
Ö &#214 ; &Ouml ;
× &#215 ; &times ;
Ø &#216 ; &Oslash ;
Ù &#217 ; &Ugrave ;
Ú &#218 ; &Uacute ;
Û &#219 ; &Ucirc ;
Ü &#220 ; &Uuml ;
Ý &#221 ; &Yacute ;
Þ &#222 ; &THORN ;
ß &#223 ; &szlig ;
à &#224 ; &agrave ;
á &#225 ; &aacute ;
â &#226 ; &acirc ;
ã &#227 ; &atilde ;
ä &#228 ; &auml ;
å &#229 ; &aring ;
æ &#230 ; &aelig ;
ç &#231 ; &ccedil ;
è &#232 ; &egrave ;
é &#233 ; &eacute ;
ê &#234 ; &ecirc ;
ë &#235 ; &euml ;
ì &#236 ; &igrave ;
í &#237 &iacute ;
î &#238 ; &icirc ;
ï &#239 ; &iuml ;
ð &#240 ; &eth ;
ñ &#241 ; &ntilde ;
ò &#242 ; &ograve ;
ó &#243 ; &oacute ;
ô &#244 ; &ocirc ;
õ &#245 ; &otilde ;
ö &#246 ; &ouml ;
÷ &#247 ; &divide ;
ø &#248 ; &oslash ;
ù &#249 ; &ugrave ;
ú &#250 ; &uacute ;
û &#251 ; &ucirc ;
ü &#252 ; &uuml ;
ý &#253 ; &yacute ;
þ &#254 ; &thorn ;
ÿ &#255 ;
Ā &#256 ;
ā &#257 ;
Ă &#258 ;
ă &#259 ;
Ą &#260 ;
ą &#261 ;
Ć &#262 ;
ć &#263 ;
Ĉ &#264 ;
ĉ &#265 ;
Ċ &#266 ;
ċ &#267 ;
Č &#268 ;
č &#269 ;
Ď &#270 ;
ď &#271 ;
Đ &#272 ;
đ &#273 ;
Ē &#274 ;
ē &#275 ;
Ĕ &#276 ;
ĕ &#277
Ė &#278 ;
ė &#279 ;
Ę &#280 ;
ę &#281 ;
Ě &#282 ;
ě &#283 ;
Ĝ &#284 ;
ĝ &#285 ;
Ğ &#286 ;
ğ &#287 ;
Ġ &#288 ;
ġ &#289 ;
Ģ &#290 ;
ģ &#291 ;
Ĥ &#292 ;
ĥ &#293 ;
Ħ &#294 ;
ħ &#295 ;
Ĩ &#296 ;
ĩ &#297 ;
Ī &#298 ;
ī &#299 ;
Ĭ &#300 ;
ĭ &#301 ;
Į &#302 ;
į &#303 ;
İ &#304 ;
ı &#305 ;
IJ &#306 ;
ij &#307 ;
Ĵ &#308 ;
ĵ &#309 ;
Ķ &#310 ;
ķ &#311 ;
ĸ &#312 ;
Ĺ &#313 ;
ĺ &#314 ;
Ļ &#315 ;
ļ &#316 ;
Ľ &#317
ľ &#318 ;
Ŀ &#319 ;
ŀ &#320 ;
Ł &#321 ;
ł &#322 ;
Ń &#323 ;
ń &#324 ;
Ņ &#325 ;
ņ &#326 ;
Ň &#327 ;
ň &#328 ;
ʼn &#329 ;
Ŋ &#330 ;
ŋ &#331 ;
Ō &#332 ;
ō &#333 ;
Ŏ &#334 ;
ŏ &#335 ;
Ő &#336 ;
ő &#337 ;
Π&#338 ;
œ &#339 ;
Ŕ &#340 ;
ŕ &#341 ;
Ŗ &#342 ;
ŗ &#343 ;
Ř &#344 ;
ř &#345 ;
Ś &#346 ;
ś &#347 ;
Ŝ &#348 ;
ŝ &#349 ;
Ş &#350 ;
ş &#351 ;
Š &#352 ;
š &#353 ;
Ţ &#354 ;
ţ &#355 ;
Ť &#356 ;
ť &#357
Ŧ &#358 ;
ŧ &#359 ;
Ũ &#360 ;
ũ &#361 ;
Ū &#362 ;
ū &#363 ;
Ŭ &#364 ;
ŭ &#365 ;
Ů &#366 ;
ů &#367 ;
Ű &#368 ;
ű &#369 ;
Ų &#370 ;
ų &#371 ;
Ŵ &#372 ;
ŵ &#373 ;
Ŷ &#374 ;
ŷ &#375 ;
Ÿ &#376 ;
Ź &#377 ;
ź &#378 ;
Ż &#379 ;
ż &#380 ;
Ž &#381 ;
ž &#382 ;
ſ &#383 ;
Ŕ &#340 ;
ŕ &#341 ;
Ŗ &#342 ;
ŗ &#343 ;
Ř &#344 ;
ř &#345 ;
Ś &#346 ;
ś &#347 ;
Ŝ &#348 ;
ŝ &#349 ;
Ş &#350 ;
ş &#351 ;
Š &#352 ;
š &#353 ;
Ţ &#354 ;
ţ &#355 ;
Ť &#356 ;
ť &#577 ;
Ŧ &#358 ;
ŧ &#359 ;
Ũ &#360 ;
ũ &#361 ;
Ū &#362 ;
ū &#363 ;
Ŭ &#364 ;
ŭ &#365 ;
Ů &#366 ;
ů &#367 ;
Ű &#368 ;
ű &#369 ;
Ų &#370 ;
ų &#371 ;
Ŵ &#372 ;
ŵ &#373 ;
Ŷ &#374 ;
ŷ &#375 ;
Ÿ &#376 ;
Ź &#377 ;
ź &#378 ;
Ż &#379 ;
ż &#380 ;
Ž &#381 ;
ž &#382 ;
ſ &#383 ;