2009年8月5日

          ?HTML中<,>,&等有特殊含義(<,>,用于鏈接簽,&用于轉義),不能直接使用。這些符號是不顯示在我們最終看到的網頁里的,那如果我們希望在網頁中顯示這些符號,該怎么辦呢?

          這就要說到HTML轉義字符串(Escape Sequence)了。

          轉義字符串 (Escape Sequence)也稱字符實體(Character Entity)。在HTML中,定義轉義字符串的原因有兩個:第一個原因是像“<”和“>”這類符號已經用來表示HTML標簽,因此就不能直接當作文本中的符號來使用。為了在HTML文檔中使用這些符號,就需要定義它的轉義字符串。當解釋程序遇到這類字符串時就把它解釋為真實的字符。在輸入轉義字符串時,要嚴格遵守字母大小寫的規則。第二個原因是,有些字符在ASCII字符集中沒有定義,因此需要使用轉義字符串來表示。

          轉義字符串的組成

          轉義字符串(Escape Sequence),即字符實體(Character Entity)分成三部分:第一部分是一個&符號,英文叫ampersand;第二部分是實體(Entity)名字或者是#加上實體(Entity)編號;第三部分是一個分號。

          比如,要顯示小于號(<),就可以寫 &lt; 或者 &#60; 。

          用實體(Entity)名字的好處是比較好理解,一看lt,大概就猜出是less than的意思,但是其劣勢在于并不是所有的瀏覽器都支持最新的Entity名字。而實體(Entity)編號,各種瀏覽器都能處理。

          提示:實體名稱(Entity)是區分大小寫的。

          備注:同一個符號,可以用“實體名稱”和“實體編號”兩種方式引用,“實體名稱”的優勢在于便于記憶,但不能保證所有的瀏覽器都能順利識別它,而“實體編號”則沒有這種擔憂,但它實在不方便記憶。

          如何顯示空格?

          通常情況下,HTML會自動截去多余的空格。不管你加多少空格,都被看做一個空格。比如你在兩個字之間加了10個空格,HTML會截去9個空格,只保留一個。為了在網頁中增加空格,你可以使用&nbsp;表示空格。


          HTML特殊轉義字符列表

          最常用的字符實體
          Character Entities

          顯示 說明 實體名稱 實體編號
          半方大的空白 &ensp; &#8194;
          全方大的空白 &emsp; &#8195;
          不斷行的空白格 &nbsp; &#160;
          < 小于 &lt; &#60;
          > 大于 &gt; &#62;
          & &符號 &amp; &#38;
          " 雙引號 &quot; &#34;
          ? 版權 &copy; &#169;
          ? 已注冊商標 &reg; &#174;
          ? 商標(美國) ? &#8482;
          × 乘號 &times; &#215;
          ÷ 除號 &divide; &#247;

          ISO 8859-1 (Latin-1)字符集

          HTML 4.01 支持 ISO 8859-1 (Latin-1) 字符集。

          備注:為了方便起見,以下表格中,“實體名稱”簡稱為“名稱”,“實體編號”簡稱為“編號”

          顯示 名稱 編號 顯示 名稱 編號 顯示 名稱 編號 顯示 名稱 編號 顯示 名稱 編號
          ? &nbsp; &#160; ? &iexcl; &#161; &cent; &#162; &pound; &#163; ¤ &curren; &#164;
          &yen; &#165; | &brvbar; &#166; § &sect; &#167; ¨ &uml; &#168; ? &copy; &#169;
          a &ordf; &#170; ? &laquo; &#171; ? &not; &#172; - &shy; &#173; ? &reg; &#174;
          ˉ &macr; &#175; ° &deg; &#176; ± &plusmn; &#177; 2 &sup2; &#178; 3 &sup3; &#179;
          &acute; &#180; μ &micro; &#181; ? &para; &#182; · &middot; &#183; ? &cedil; &#184;
          1 &sup1; &#185; o &ordm; &#186; ? &raquo; &#187; ? &frac14; &#188; ? &frac12; &#189;
          ? &frac34; &#190; ? &iquest; &#191; à &Agrave; &#192; á &Aacute; &#193; ? &Acirc; &#194;
          ? &Atilde; &#195; ? &Auml; &#196; ? &Aring; &#197; ? &AElig; &#198; ? &Ccedil; &#199;
          è &Egrave; &#200; é &Eacute; &#201; ê &Ecirc; &#202; ? &Euml; &#203; ì &Igrave; &#204;
          í &Iacute; &#205; ? &Icirc; &#206; ? &Iuml; &#207; D &ETH; &#208; ? &Ntilde; &#209;
          ò &Ograve; &#210; ó &Oacute; &#211; ? &Ocirc; &#212; ? &Otilde; &#213; ? &Ouml; &#214;
          × &times; &#215; ? &Oslash; &#216; ù &Ugrave; &#217; ú &Uacute; &#218; ? &Ucirc; &#219;
          ü &Uuml; &#220; Y &Yacute; &#221; T &THORN; &#222; ? &szlig; &#223; à &agrave; &#224;
          á &aacute; &#225; a &acirc; &#226; ? &atilde; &#227; ? &auml; &#228; ? &aring; &#229;
          ? &aelig; &#230; ? &ccedil; &#231; è &egrave; &#232; é &eacute; &#233; ê &ecirc; &#234;
          ? &euml; &#235; ì &igrave; &#236; í &iacute; &#237; ? &icirc; &#238; ? &iuml; &#239;
          e &eth; &#240; ? &ntilde; &#241; ò &ograve; &#242; ó &oacute; &#243; ? &ocirc; &#244;
          ? &otilde; &#245; ? &ouml; &#246; ÷ &divide; &#247; ? &oslash; &#248; ù &ugrave; &#249;
          ú &uacute; &#250; ? &ucirc; &#251; ü &uuml; &#252; y &yacute; &#253; t &thorn; &#254;
          ? &yuml; &#255;

          數學和希臘字母標志
          symbols, mathematical symbols, and Greek letters

          顯示 名稱 編號 顯示 名稱 編號 顯示 名稱 編號 顯示 名稱 編號 顯示 名稱 編號
          ? &fnof; &#402; Α &Alpha; &#913; Β &Beta; &#914; Γ &Gamma; &#915; Δ &Delta; &#916;
          Ε &Epsilon; &#917; Ζ &Zeta; &#918; Η &Eta; &#919; Θ &Theta; &#920; Ι &Iota; &#921;
          Κ &Kappa; &#922; Λ &Lambda; &#923; Μ &Mu; &#924; Ν &Nu; &#925; Ξ &Xi; &#926;
          Ο &Omicron; &#927; Π &Pi; &#928; Ρ &Rho; &#929; Σ &Sigma; &#931; Τ &Tau; &#932;
          Υ &Upsilon; &#933; Φ &Phi; &#934; Χ &Chi; &#935; Ψ &Psi; &#936; Ω &Omega; &#937;
          α &alpha; &#945; β &beta; &#946; γ &gamma; &#947; δ &delta; &#948; ε &epsilon; &#949;
          ζ &zeta; &#950; η &eta; &#951; θ &theta; &#952; ι &iota; &#953; κ &kappa; &#954;
          λ &lambda; &#955; μ &mu; &#956; ν &nu; &#957; ξ &xi; &#958; ο &omicron; &#959;
          π &pi; &#960; ρ &rho; &#961; ? &sigmaf; &#962; σ &sigma; &#963; τ &tau; &#964;
          υ &upsilon; &#965; φ &phi; &#966; χ &chi; &#967; ψ &psi; &#968; ω &omega; &#969;
          ? &thetasym; &#977; ? &upsih; &#978; ? &piv; &#982; ? &bull; &#8226; &hellip; &#8230;
          &prime; &#8242; &Prime; &#8243; &oline; &#8254; ? &frasl; &#8260; ? &weierp; &#8472;
          ? &image; &#8465; ? &real; &#8476; ? &trade; &#8482; ? &alefsym; &#8501; &larr; &#8592;
          &uarr; &#8593; &rarr; &#8594; &darr; &#8595; ? &harr; &#8596; ? &crarr; &#8629;
          ? &lArr; &#8656; ? &uArr; &#8657; ? &rArr; &#8658; ? &dArr; &#8659; ? &hArr; &#8660;
          ? &forall; &#8704; ? &part; &#8706; ? &exist; &#8707; ? &empty; &#8709; ? &nabla; &#8711;
          &isin; &#8712; ? &notin; &#8713; ? &ni; &#8715; &prod; &#8719; &sum; &#8721;
          ? &minus; &#8722; ? &lowast; &#8727; &radic; &#8730; &prop; &#8733; &infin; &#8734;
          &ang; &#8736; &and; &#8743; &or; &#8744; &cap; &#8745; &cup; &#8746;
          &int; &#8747; &there4; &#8756; &sim; &#8764; &cong; &#8773; &asymp; &#8776;
          &ne; &#8800; &equiv; &#8801; &le; &#8804; &ge; &#8805; ? &sub; &#8834;
          ? &sup; &#8835; ? &nsub; &#8836; ? &sube; &#8838; ? &supe; &#8839; &oplus; &#8853;
          ? &otimes; &#8855; &perp; &#8869; ? &sdot; &#8901; ? &lceil; &#8968; ? &rceil; &#8969;
          ? &lfloor; &#8970; ? &rfloor; &#8971; ? &lang; &#9001; ? &rang; &#9002; ? &loz; &#9674;
          ? &spades; &#9824; ? &clubs; &#9827; ? &hearts; &#9829; ? &diams; &#9830;

          重要的國際標記
          markup-significant and internationalization characters

          顯示 名稱 編號 顯示 名稱 編號 顯示 名稱 編號 顯示 名稱 編號 顯示 名稱 編號
          " &quot; &#34; & &amp; &#38; < &lt; &#60; > &gt; &#62; ? &OElig; &#338;
          ? &oelig; &#339; ? &Scaron; &#352; ? &scaron; &#353; ? &Yuml; &#376; ? &circ; &#710;
          ? &tilde; &#732; ? &ensp; &#8194; ? &emsp; &#8195; ? &thinsp; &#8201; ? &zwnj; &#8204;
          ? &zwj; &#8205; ? &lrm; &#8206; ? &rlm; &#8207; &ndash; &#8211; &mdash; &#8212;
          &lsquo; &#8216; &rsquo; &#8217; ? &sbquo; &#8218; &ldquo; &#8220; &rdquo; &#8221;
          ? &bdquo; &#8222; ? &dagger; &#8224; ? &Dagger; &#8225; &permil; &#8240; ? &lsaquo; &#8249;
          ? &rsaquo; &#8250; &euro; &#8364;

          JavaScript轉義符

          轉義序列 字符
          \b 退格
          \f 走紙換頁
          \n 換行
          \r 回車
          \t 橫向跳格 (Ctrl-I)
          \' 單引號
          \" 雙引號
          \\ 反斜杠

          編程的時候要注意特殊字符的問題,很多運行時出現的問題都是因為特殊字符的出現而引起的。

          注意,由于反斜杠本身用作轉義符,因此不能直接在腳本中鍵入一個反斜杠。如果要產生一個反斜杠,必須一起鍵入兩個反斜杠 (\\)。


          編碼轉換(to Unicode)

          (程序代碼來源于網絡)

          Js版

          <script>
          ???? test = "你好abc"
          ???? str = ""
          ???? for( i=0;??? i<test.length; i++ )
          ???? {
          ????  temp = test.charCodeAt(i).toString(16);
          ????  str??? += "\\u"+ new Array(5-String(temp).length).join("0") +temp;
          ???? }
          ???? document.write (str)
          </script>


          vbs版


          Function Unicode(str1)
          ???? Dim str,temp
          ???? str = ""
          ???? For i=1??? to len(str1)
          ????  temp = Hex(AscW(Mid(str1,i,1)))
          ????  If len(temp) < 5 Then??? temp = right("0000" & temp, 4)
          ????  str = str & "\u" & temp
          ???? Next
          ???? Unicode = str
          End Function


          Function htmlentities(str)
          ???? For i = 1 to Len(str)
          ???????? char = mid(str, i, 1)
          ???????? If Ascw(char) > 128 then
          ???????????? htmlentities = htmlentities & "&#" & Ascw(char) & ";"
          ???????? Else
          ???????????? htmlentities = htmlentities & char
          ???????? End if
          ???? Next
          End Function

          coldfusion

          function nochaoscode(str)
          {
          ???? var new_str = “”;
          ???? for(i=1; i lte len(str);i=i+1){
          ???????? if(asc(mid(str,i,1)) lt 128){
          ???????????? new_str = new_str & mid(str,i,1);
          ???????? }else{
          ???????????? new_str = new_str & “&##” & asc(mid(str,i,1));
          ???????? }
          ???? }
          ???? return new_str;
          }


          附:

          在php中我們可以用mbstring的mb_convert_encoding函數實現這個正向及反向的轉化。 如:


          mb_convert_encoding ("你好", "HTML-ENTITIES", "gb2312"); //輸出:&#20320;&#22909;

          mb_convert_encoding ("&#20320;&#22909;", "gb2312", "HTML-ENTITIES"); //輸出:你好

          如果需要對整個頁面轉化,則只需要在php文件的頭部加上這三行代碼:

          mb_internal_encoding("gb2312"); // 這里的gb2312是你網站原來的編碼

          mb_http_output("HTML-ENTITIES");

          ob_start('mb_output_handler');

          posted @ 2009-08-05 15:32 zhuyongjp 閱讀(1847) | 評論 (0)編輯 收藏

          2009年7月23日

          keycode??? 8 = BackSpace BackSpace
          keycode??? 9 = Tab Tab
          keycode?? 12 = Clear
          keycode?? 13 = Enter
          keycode?? 16 = Shift_L
          keycode?? 17 = Control_L
          keycode?? 18 = Alt_L
          keycode?? 19 = Pause
          keycode?? 20 = Caps_Lock
          keycode?? 27 = Escape Escape
          keycode?? 32 = space space
          keycode?? 33 = Prior
          keycode?? 34 = Next
          keycode?? 35 = End
          keycode?? 36 = Home
          keycode?? 37 = Left
          keycode?? 38 = Up
          keycode?? 39 = Right
          keycode?? 40 = Down
          keycode?? 41 = Select
          keycode?? 42 = Print
          keycode?? 43 = Execute
          keycode?? 45 = Insert
          keycode?? 46 = Delete
          keycode?? 47 = Help
          keycode?? 48 = 0 equal braceright
          keycode?? 49 = 1 exclam onesuperior
          keycode?? 50 = 2 quotedbl twosuperior
          keycode?? 51 = 3 section threesuperior
          keycode?? 52 = 4 dollar
          keycode?? 53 = 5 percent
          keycode?? 54 = 6 ampersand
          keycode?? 55 = 7 slash braceleft
          keycode?? 56 = 8 parenleft bracketleft
          keycode?? 57 = 9 parenright bracketright
          keycode?? 65 = a A
          keycode?? 66 = b B
          keycode?? 67 = c C
          keycode?? 68 = d D
          keycode?? 69 = e E EuroSign
          keycode?? 70 = f F
          keycode?? 71 = g G
          keycode?? 72 = h H
          keycode?? 73 = i I
          keycode?? 74 = j J
          keycode?? 75 = k K
          keycode?? 76 = l L
          keycode?? 77 = m M mu
          keycode?? 78 = n N
          keycode?? 79 = o O
          keycode?? 80 = p P
          keycode?? 81 = q Q at
          keycode?? 82 = r R
          keycode?? 83 = s S
          keycode?? 84 = t T
          keycode?? 85 = u U
          keycode?? 86 = v V
          keycode?? 87 = w W
          keycode?? 88 = x X
          keycode?? 89 = y Y
          keycode?? 90 = z Z
          keycode?? 96 = KP_0 KP_0
          keycode?? 97 = KP_1 KP_1
          keycode?? 98 = KP_2 KP_2
          keycode?? 99 = KP_3 KP_3
          keycode 100 = KP_4 KP_4
          keycode 101 = KP_5 KP_5
          keycode 102 = KP_6 KP_6
          keycode 103 = KP_7 KP_7
          keycode 104 = KP_8 KP_8
          keycode 105 = KP_9 KP_9
          keycode 106 = KP_Multiply KP_Multiply
          keycode 107 = KP_Add KP_Add
          keycode 108 = KP_Separator KP_Separator
          keycode 109 = KP_Subtract KP_Subtract
          keycode 110 = KP_Decimal KP_Decimal
          keycode 111 = KP_Divide KP_Divide
          keycode 112 = F1
          keycode 113 = F2
          keycode 114 = F3
          keycode 115 = F4
          keycode 116 = F5
          keycode 117 = F6
          keycode 118 = F7
          keycode 119 = F8
          keycode 120 = F9
          keycode 121 = F10
          keycode 122 = F11
          keycode 123 = F12
          keycode 124 = F13
          keycode 125 = F14
          keycode 126 = F15
          keycode 127 = F16
          keycode 128 = F17
          keycode 129 = F18
          keycode 130 = F19
          keycode 131 = F20
          keycode 132 = F21
          keycode 133 = F22
          keycode 134 = F23
          keycode 135 = F24
          keycode 136 = Num_Lock
          keycode 137 = Scroll_Lock
          keycode 187 = acute grave
          keycode 188 = comma semicolon
          keycode 189 = minus underscore
          keycode 190 = period colon
          keycode 192 = numbersign apostrophe
          keycode 210 = plusminus hyphen macron
          keycode 211 =
          keycode 212 = copyright registered
          keycode 213 = guillemotleft guillemotright
          keycode 214 = masculine ordfeminine
          keycode 215 = ae AE
          keycode 216 = cent yen
          keycode 217 = questiondown exclamdown
          keycode 218 = onequarter onehalf threequarters
          keycode 220 = less greater bar
          keycode 221 = plus asterisk asciitilde
          keycode 227 = multiply division
          keycode 228 = acircumflex Acircumflex
          keycode 229 = ecircumflex Ecircumflex
          keycode 230 = icircumflex Icircumflex
          keycode 231 = ocircumflex Ocircumflex
          keycode 232 = ucircumflex Ucircumflex
          keycode 233 = ntilde Ntilde
          keycode 234 = yacute Yacute
          keycode 235 = oslash Ooblique
          keycode 236 = aring Aring
          keycode 237 = ccedilla Ccedilla
          keycode 238 = thorn THORN
          keycode 239 = eth ETH
          keycode 240 = diaeresis cedilla currency
          keycode 241 = agrave Agrave atilde Atilde
          keycode 242 = egrave Egrave
          keycode 243 = igrave Igrave
          keycode 244 = ograve Ograve otilde Otilde
          keycode 245 = ugrave Ugrave
          keycode 246 = adiaeresis Adiaeresis
          keycode 247 = ediaeresis Ediaeresis
          keycode 248 = idiaeresis Idiaeresis
          keycode 249 = odiaeresis Odiaeresis
          keycode 250 = udiaeresis Udiaeresis
          keycode 251 = ssharp question backslash
          keycode 252 = asciicircum degree
          keycode 253 = 3 sterling
          keycode 254 = Mode_switch

          字母和數字鍵的鍵碼值(keyCode)
          按鍵 鍵碼 按鍵 鍵碼 按鍵 鍵碼 按鍵 鍵碼
            A
          ?65 J 74 S 83 1 49
          B 66 K 75 T 84 2 50
          C 67 L 76 U 85 3 51
          D 68 M 77 V 86 4 52
          E 69 N 78 W 87 5 53
          F 70 O 79 X 88 6 54
          G 71 P 80 Y 89 7 55
          H 72 Q 81 Z 90 8 56
          I 73 R 82 0 48 9 57
          數字鍵盤上的鍵的鍵碼值(keyCode) 功能鍵鍵碼值(keyCode)
          按鍵 鍵碼 按鍵 鍵碼 按鍵 鍵碼 按鍵 鍵碼
            0
          ?96 8 104 F1 112 F7 118
          1 97 9 105 F2 113 F8 119
          2 98 * 106 F3 114 F9 120
          3 99 + 107 F4 115 F10 121
          4 100 Enter 108 F5 116 F11 122
          5 101 - 109 F6 117 F12 123
          6 102   .
          ?110????????
          7   103
          ?/ 111????????
          控制鍵鍵碼值(keyCode)
          按鍵 鍵碼 按鍵 鍵碼 按鍵 鍵碼 按鍵 鍵碼
          BackSpace 8 Esc 27 Right Arrow 39 -_ 189
          Tab 9 Spacebar 32 Down Arrow 40 .> 190
          Clear 12 Page Up 33 Insert 45 /? 191
          Enter 13 Page Down 34 Delete 46 `~ 192
          Shift 16 End 35 Num Lock 144 [{ 219
          Control 17 Home 36 ;: 186 \| 220
          Alt 18 Left Arrow 37 =+ 187 ]} 221
          Cape Lock 20 Up Arrow 38 ,< 188 '" 222

          posted @ 2009-07-23 17:57 zhuyongjp 閱讀(2080) | 評論 (0)編輯 收藏

          2009年7月22日

          javascript 如何創建一個 DOM 節點?





          key
          -------------------------------------------
          1、a.創建一個Element???????????? var newDiv = document.createElement("div");
          ?? b.設置它的屬性??????????????? newDiv.id = "divNew";
          ?? ??? c.如果需要,創建子節點????? var newTable = document.createElement("table");
          ?? ??? d.設置子節點屬性?????????? newTable.setAttribute("id","tableNew");
          ?? ??? e.重復步驟c和d,直到完成整個目錄樹
          ?? ??? f.創建Text節點??????????? var newText = document.createTextNode("string");
          ? g.從葉子節點往上appendChild ??? newDiv.appendChild(newTable);
          ??? ?? ?? ?? ?? ?? ?? ?? ?? ??? document.body.appendChild(newDiv);

          另一種方式
          ??? a.創建一個Element??????????? var newDiv = document.createElement("div");
          ??? b.用 innerHTML ?????????????????????? ??? ??? newDiv.innerHTML="<table><tr><th>type</th><th>value</th></tr></table>";
          posted @ 2009-07-22 15:27 zhuyongjp 閱讀(1337) | 評論 (1)編輯 收藏

          2009年7月17日

          領悟 JavaScript 中的面向對象


          JavaScript 是面向對象的。但是不少人對這一點理解得并不全面。

          在 JavaScript 中,對象分為兩種。一種可以稱為“普通對象”,就是我們所普遍理解的那些:數字、日期、用戶自定義的對象(如:{})等等。

          還有一種,稱為“方法對象”,就是我們通常定義的 function。你可能覺得奇怪:方法就是方法,怎么成了對象了?但是在 JavaScript 中,方法的確是被當成對象來處理的。下面是一個簡單的例子:

          Js代碼
          1. function ?func()?{alert( 'Hello!' );} ??
          2. alert(func.toString());??

          在這個例子中,func 雖然是作為一個方法定義的,但它自身卻包含一個 toString 方法,說明 func 在這里是被當成一個對象來處理的。更準確的說,func 是一個“方法對象”。下面是例子的繼續:

          Js代碼
          1. func.name?=?“I?am?func.”; ??
          2. alert(func.name);??

          我們可以任意的為 func 設置屬性,這更加證明了 func 就是一個對象。那么方法對象和普通對象的區別在哪里呢?首先方法對象當然是可以執行的,在它后面加上一對括號,就是執行這個方法對象了。

          Js代碼
          1. func();??

          所以,方法對象具有二重性。一方面它可以被執行,另一方面它完全可以被當成一個普通對象來使用。這意味著什么呢?這意味著方法對象是可以完全獨立于其他對象存在的。這一點我們可以同 Java 比較一下。在 Java 中,方法必須在某一個類中定義,而不能單獨存在。而 JavaScript 中就不需要。

          方法對象獨立于其他方法,就意味著它能夠被任意的引用和傳遞。下面是一個例子:

          Js代碼
          1. function?invoke(f)?{ ??
          2. ????f(); ??
          3. } ??
          4. invoke(func);??

          將一個方法對象 func 傳遞給另一個方法對象 invoke,讓后者在適當的時候執行 func。這就是所謂的“回調”了。另外,方法對象的這種特殊性,也使得 this 關鍵字不容易把握。這方面相關文章不少,這里不贅述了。

          除了可以被執行以外,方法對象還有一個特殊的功用,就是它可以通過 new 關鍵字來創建普通對象。

          話說每一個方法對象被創建時,都會自動的擁有一個叫 prototype 的屬性。這個屬性并無什么特別之處,它和其他的屬性一樣可以訪問,可以賦值。不過當我們用 new 關鍵字來創建一個對象的時候,prototype 就起作用了:它的值(也是一個對象)所包含的所有屬性,都會被復制到新創建的那個對象上去。下面是一個例子:

          Js代碼
          1. func.prototype.name=”prototype?of?func”; ??
          2. var?f?=?new?func(); ??
          3. alert(f.name);??

          執行的過程中會彈出兩個對話框,后一個對話框表示 f 這個新建的對象從 func.prototype 那里拷貝了 name 屬性。而前一個對話框則表示 func 被作為方法執行了一遍。你可能會問了,為什么這個時候要還把 func 執行一遍呢?其實這個時候執行 func,就是起“構造函數”的作用。為了形象的說明,我們重新來一遍:

          Js代碼
          1. function?func()?{ ??
          2. ????this.name=”name?has?been?changed.” ??
          3. } ??
          4. func.prototype.name=”prototype?of?func”; ??
          5. var?f?=?new?func(); ??
          6. alert(f.name);??

          你就會發現 f 的 name 屬性不再是"prototype of func",而是被替換成了"name has been changed"。這就是 func 這個對象方法所起到的“構造函數”的作用。所以,在 JavaScript 中,用 new 關鍵字創建對象是執行了下面三個步驟的:
          1. 創建一個新的普通對象;
          2. 將方法對象的 prototype 屬性的所有屬性復制到新的普通對象中去。
          3. 以新的普通對象作為上下文來執行方法對象。

          對于“new func()”這樣的語句,可以描述為“從 func 創建一個新對象”。總之,prototype 這個屬性的唯一特殊之處,就是在創建新對象的時候了。


          那么我們就可以利用這一點。比如有兩個方法對象 A 和 B,既然從 A 創建的新對象包含了所有 A.prototype 的屬性,那么我將它賦給 B.prototype,那么從 B 創建的新對象不也有同樣的屬性了?寫成代碼就是這樣:

          ?

          Js代碼
          1. A.prototype.hello?=?function(){alert('Hello!');} ??
          2. B.prototype?=?new?A(); ??
          3. new?B().hello();??

          這就是 JavaScript 的所謂“繼承”了,其實質就是屬性的拷貝,這里利用了 prototype 來實現。如果不用 prototype,那就用循環了,效果是一樣的。所謂“多重繼承”,自然就是到處拷貝了。

          JavaScript 中面向對象的原理,就是上面這些了。自始至終我都沒提到“類”的概念,因為 JavaScript 本來就沒有“類”這個東西。面向對象可以沒有類嗎?當然可以。先有類,然后再有對象,這本來就不合理,因為類本來是從對象中歸納出來的,先有對象再有類,這才合理。像下面這樣的:

          Js代碼
          1. var?o?=?{};?//?我發現了一個東西。 ??
          2. o.eat?=?function(){return?"I?am?eating."}??//?我發現它會吃; ??
          3. o.sleep?=?function(){return?"ZZZzzz..."}??//?我發現它會睡; ??
          4. o.talk?=?function(){return?"Hi!"}?//?我發現它會說話; ??
          5. o.think?=?function(){return?"Hmmm..."}?//?我發現它還會思考。 ??
          6. ??
          7. var?Human?=?new?Function();?//?我決定給它起名叫“人”。 ??
          8. Human.prototype?=?o;?//?這個東西就代表了所有“人”的概念。 ??
          9. ??
          10. var?h?=?new?Human();?//?當我發現其他同它一樣的東西, ??
          11. alert(h.talk())?//?我就知道它也是“人”了!??

          ?

          posted @ 2009-07-17 16:03 zhuyongjp 閱讀(272) | 評論 (0)編輯 收藏

          2009年7月15日

          JavaScript中的Function對象是函數,函數的用途分為3類:

          1. 作為普通邏輯代碼容器;
          2. 作為對象方法;
          3. 作為構造函數。

          1.作為普通邏輯代碼容器

          function multiply(x, y){
          return x*y;
          }

          函數multiply封裝了兩位數的乘法運算公式:

          var product = multiply(128,128); // product = 16384

          創建函數實例的方式有3種。第一種是聲明式,即像聲明變量一樣,將通過function(){}標識符創建的匿名函數直接賦值給變量,以該變量作為調用時的函數名稱:

          var multiply = function(x, y){
          return x*y;
          }

          第二種是定義式,即以function關鍵字后跟函數名稱及(){}來直接定義命名函數,前面第一個multiply函數就是通過定義式創建的。

          第三種是構造函數式,即通過new運算符調用構造函數Function來創建函數。這種方式極不常用,因此就不作介紹了。

          在創建函數的3種方式中,聲明式和定義式還存在細微的差別。比如下列代碼中的函數采用聲明式:

          var example = function(){
          return 1;
          }
          example();
          var example = function(){
          return 2;
          }
          example();

          執行結果如下:

          1
          2

          而如果采用定義式,即:

          function example(){
          return 1;
          }
          example();
          function example(){
          return 2;
          }
          example();

          那么會得到另一種結果:

          2
          2

          即,在采用定義式創建同名函數時,后創建的函數會覆蓋先創建的函數。這種差別是由于JavaScript解釋引擎的工作機制所導致的。JavaScript解釋引擎在執行任何函數調用之前,首先會在全局作用域中注冊以定義式創建的函數,然后再依次執行函數調用。由于注冊函數時,后定義的函數重寫了先定義的函數,因此無論調用語句位于何處,執行的都是后定義的函數。相反,對于聲明式創建的函數,JavaScript解釋引擎會像對待任何聲明的變量一樣,等到執行調用該變量的代碼時才會對變量求值。由于JavaScript代碼是從上到下順序執行的,因此當執行第一個example()調用時,example函數的代碼就是首先定義代碼;而當執行第二個example()調用時,example函數的代碼又變成了后來定義的代碼。

          2.作為對象方法

          JavaScript在解析代碼時,會為聲明或定義的函數指定調用對象。所謂調用對象,就是函數的執行環境。如果函數體內有以關鍵字this聲明的變量,則this引用的就是調用對象。

          事實上,在普通的函數中,也存在調用對象,只不過這個調用對象是默認的全局window對象而已。例如:

          var product = window.multiply(128,128); // product = 16384

          這說明,默認情況下,在全局作用域中定義或聲明的函數的調用對象就是window。

          在面向對象編程中,通常將作為對象成員的函數稱為方法。例如:

          var dog = {};
          dog.name = “heibao”;
          dog.age = “3 months”;
          dog.shout = function(){
          return “Hello, My name is “+ this.name + ” and I am ” + this.age + ” old!”;
          }
          dog.shout(); // “Hello, My name is heibao and I am 3 months old!”

          有意思的是,對象也可以借用其他對象的方法:

          var cat = {};
          cat.name = “xiaohua”;
          cat.age = “2 years”;
          cat.greet = dog.shout;
          cat.greet(); // “Hello, My name is xiaohua and I am 2 years old!”

          另外,使用函數對象的call和apply方法,還可以動態指定函數或方法的調用對象:

          dog.shout.call(cat); // “Hello, My name is xiaohua and I am 2 years old!”

          或者

          dog.shout.apply(cat); // “Hello, My name is xiaohua and I am 2 years old!”

          3.作為構造函數

          JavaScript是通過構造函數來模擬面向對象語言中的類的。例如:

          function Animal(sort, character){
          this.sort = sort;
          this.character = character;
          }

          以Animal作為構造函數,就可以像下面這樣創建一個新對象:

          var dog = new Animal(”mammal”,”four legs”);

          創建dog的對象的過程如下:首先,new運算符創建一個空對象({}),然后以這個空對象為調用對象調用函數Animal,為這個空對象添加兩個屬性sort和character,接著,再將這個空對象的默認constructor屬性修改為構造函數的名稱(即Animal;空對象創建時默認的constructor屬性值是Object),并且將空對象的__proto__屬性設置為指向Animal.prototype——這就是所謂的對象初始化。最后,返回初始化完畢的對象。這里將返回的新對象賦值給了變量dog。

          dog.sort; // mammal
          dog.character; // four legs
          dog.constructor; // Animal

          聰明的讀者結合前面介紹的內容,可能會認為使用new運算符調用構造函數創建對象的過程也可以像下面這樣來實現:

          var dog = {};
          Animal.call(dog, “mammal”,”four legs”);

          表面上看,這兩行代碼與var dog = new Animal(”mammal”,”four legs”);是等價的,其實卻不是。雖然通過指定函數的執行環境能夠部分達到初始化對象的目的,例如空對象dog確實獲得了sort和character這兩個屬性:

          dog.sort; // mammal
          dog.character; // four legs
          dog.constructor; // Object —— 注意,沒有修改dog對象默認的constructor屬性

          但是,最關鍵的是新創建的dog對象失去了通過Animal.prototype屬性繼承其他對象的能力。只要與前面采用new運算符調用構造函數創建對象的過程對比一下,就會發現,new運算符在初始化新對象期間,除了為新對象添加顯式聲明的屬性外,還會對新對象進行了一番“暗箱操作”——即將新對象的constructor屬性重寫為Animal,將新對象的__proto__屬性設置為指向Animal.prototype。雖然手工“初始化對象”也可以將dog.constructor重寫為Animal,但根據ECMA262規范,對象的__proto__屬性對開發人員是只讀的,對它的設置只能在通過new運算符創建對象時由JavaScript解釋引擎替我們完成。
          JavaScript是基于原型繼承的,如果不能正確設置對象的__proto__屬性,那么就意味著默認的繼承機制會失效:

          Animal.prototype.greet = “Hi, good lucky!”;
          dog.greet; // undefined

          事實上,在Firefox中,__proto__屬性也是可寫的:

          Animal.prototype.greet = “Hi, good lucky!”;
          dog.__proto__ = Animal.prototype;
          dog.greet; // Hi, good lucky!

          但這樣做只能在Firefox中行得通。考慮到在兼容多瀏覽器,必須依賴于new運算符,才能實現基于原型的繼承。

          posted @ 2009-07-15 11:31 zhuyongjp 閱讀(660) | 評論 (0)編輯 收藏

          2009年7月14日

          1.隱藏所有包含連接的段落
          $("p[a]").hide()
          2.顯示頁面中的第一個段落
          $("p:eq(0)").show()
          3.隱藏當前顯示的所有div
          $("div:visible").hide()
          4.獲取ul下所有li項
          $("ul / li") [注意這里面沒有空格,是因為QQ的那該死的表情會自己出現] 或者$("ul>li")
          5.獲取所有樣式為foo的包含連接的段落
          $("p.foo[a]")
          6.獲取無序列表項中包含"BBB"文本的所有連接
          $("li[a:contains('BBB')]")
          7.獲取那么屬性為bar的input標簽
          $("input[@name=bar]")
          8.獲取所有選中的單選按鈕
          $("input[@type=radio][@checked]")
          9.jquery 將頁面中所有的 text 文本框設為null
          $(":text").val();
          posted @ 2009-07-14 16:16 zhuyongjp 閱讀(312) | 評論 (0)編輯 收藏
           

          用法:

          <div?id="test">
          ???<span?style="color:red">test1</span>?test2
          </div>

          在JS中可以使用:

          test.innerHTML:

            也就是從對象的起始位置到終止位置的全部內容,包括Html標簽。

            上例中的test.innerHTML的值也就是“<span?style="color:red">test1</span>?test2 ”。

          test.innerText:?

            從起始位置到終止位置的內容,?但它去除Html標簽?

            上例中的text.innerTest的值也就是“test1?test2”,?其中span標簽去除了。

          test.outerHTML:

            除了包含innerHTML的全部內容外,?還包含對象標簽本身。

            上例中的text.outerHTML的值也就是<div?id="test"><span?style="color:red">test1</span>?test2</div>


          完整示例:

          <div?id="test">
          ???<span?style="color:red">test1</span>?test2
          </div>

          <a href="javascript:alert(test.innerHTML)">innerHTML內容</a>
          <a href="javascript:alert(test.innerText)">inerHTML內容</a>
          <a href="javascript:alert(test.outerHTML)">outerHTML內容</a>

          特別說明:

            innerHTML是符合W3C標準的屬性,而innerText只適用于IE瀏覽器,因此,盡可能地去使用innerHTML,而少用innerText,如果要輸出不含HTML標簽的內容,可以使用innerHTML取得包含HTML標簽的內容后,再用正則表達式去除HTML標簽,下面是一個簡單的符合W3C標準的示例:

          <a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">無HTML,符合W3C標準</a>

          -------------------------------------------------------------------------------------------------------------------------------

          <html>
          <head></head>
          <frameset frameborder="yes" frameborder="1" rows="40%,*">
          <frame name="top" src="1.html">
          <frame name="bottom" src="2.html">
          </frameset>
          </html>

          <html>
          <head>
          <script language="javascript">
          function init()
          {???
          ??? var aaa = parent.window.frames[0].document.body.innerHTML;
          ??? alert(aaa);
          }
          </script>
          </head>
          <body>
          <p align="center">nothing</p>
          <p align="center"><input type="button" onclick="init()"; value="click"></p>
          </body>
          </html>

          <html>
          <center>汽車 房產 女人</center>
          </html>

          posted @ 2009-07-14 16:12 zhuyongjp 閱讀(319) | 評論 (0)編輯 收藏

          2009年7月8日

          ?

          public ? class ?DBHelper? {????
          ????
          public ? static ?Connection?getConnection()? {????
          ????????Connection?conn?
          = ? null ;????
          ????????
          try ? {????
          ????????????Class.forName(
          " com.mysql.jdbc.Driver " );????
          ????????????conn?
          = ?DriverManager.getConnection( " jdbc:mysql://localhost/ad?useUnicode=true&characterEncoding=GBK&jdbcCompliantTruncation=false " ,????
          ????????????????????
          " root " ,? " root " );????
          ????????}
          ? catch ?(Exception?e)? {????
          ????????????e.printStackTrace();????
          ????????}
          ????
          ????????
          return ?conn;????
          ????}
          ????
          }
          ????
          ???
          ????????
          /* dao中的方法 */ ???
          ????
          public ?List < Adv > ?getAllAdvs()? {????
          ????????????
          ????????Connection?conn?
          = ? null ;????
          ????????ResultSet?rs?
          = ? null ;????
          ????????PreparedStatement?stmt?
          = ? null ;????
          ????????String?sql?
          = ? " select?*?from?adv?where?id?=?? " ;????
          ????????List
          < Adv > ?advs? = ? new ?ArrayList < Adv > ();????
          ???
          ????????conn?
          = ?DBHelper.getConnection();????
          ????????
          if ?(conn? != ? null )? {????
          ????????????
          try ? {????
          ????????????????stmt?
          = ?conn.prepareStatement(sql);????
          ????????????????????????????????stmt.setInt(
          1 ,? new ?Integer( 1 ));????
          ????????????????rs?
          = ?stmt.executeQuery();????
          ???
          ????????????????
          if ?(rs? != ? null )? {????
          ????????????????????
          while ?(rs.next())? {????
          ????????????????????????Adv?adv?
          = ? new ?Adv();????
          ????????????????????????adv.setId(rs.getLong(
          1 ));????
          ????????????????????????adv.setName(rs.getString(
          2 ));????
          ????????????????????????adv.setDesc(rs.getString(
          3 ));????
          ????????????????????????adv.setPicUrl(rs.getString(
          4 ));????
          ???
          ????????????????????????advs.add(adv);????
          ????????????????????}
          ????
          ????????????????}
          ????
          ????????????}
          ? catch ?(SQLException?e)? {????
          ????????????????e.printStackTrace();????
          ????????????}
          ? finally ? {????
          ????????????????
          try ? {????
          ????????????????????stmt.close();????
          ????????????????????conn.close();????
          ????????????????}
          ? catch ?(SQLException?e)? {????
          ????????????????????e.printStackTrace();????
          ????????????????}
          ????
          ????????????}
          ????
          ????????}
          ????
          ????????
          return ?advs;????
          ????}
          ?
          posted @ 2009-07-08 09:41 zhuyongjp 閱讀(416) | 評論 (0)編輯 收藏

          2009年7月1日

          在傳統的WINDOWS EXE程序中,模態對話框經常出現。例如,寫字板程序(WORDPAD.EXE)中的“查看/選項(O)...”菜單被點中后,跳出“選項”對話框,用戶一定要響應該對話框,如果該對話框不關閉,是無法回到主窗口的。這經常被應用于要求用戶輸入多個參數的場合。我們在瀏覽器中也可以簡單地實現該功能。 ---- 在IE瀏覽器中,要求用戶輸入可以使用VBScript的INPUTBOX函數、或者J Script的window.prompt方法,但是界面都比較單調,并且只能傳遞一個參數,而用DHTML來實現就靈活多了。 ---- 1. 基本語法 ---- window對象有一個方法稱為showModalDialog,我們可以在頁面按鈕的onclick中寫如下代碼: < BUTTON onclick="window.showModalDialog ('dialog.htm')" >Search< /BUTTON > ---- 系統會在新窗口中打開dialog.htm頁面,并且等待用戶響應,如果用戶不響應該頁面,那么主頁面將得不到光標。 ---- 在dialog.htm中設置window對象的returnValue屬性,就可以讓主頁面得到返回值。例如,在頁面的確定按鈕的onclick中寫: window.returnValue = window. document.all.iptPeopleID.value ---- 將輸入框iptPeopleID的值賦給window對象的returnValue屬性。在主頁面中就可以得到這個值: var str = showModalDialog("dialog1.htm") ---- 2. 傳遞初始化值 ---- 如果要向模態頁面中傳遞初始化值,可以在主頁面中用如下語句: var cSearchValue=showModalDialog ('dialog.htm', 'ABC') 在dialog.htm中使用window.dialogArguments 屬性可以得到'ABC'。例如: < SCRIPT FOR=window EVENT=onload LANGUAGE="JScript" > if (window.dialogArguments != null) window.document.all.iptPeopleID.value = window.dialogArguments; < /SCRIPT > ---- 3. 傳遞多個數值 ---- 如果要向模態頁面中傳遞多個參數,可以先在主頁面中定義一個對象, function myDialog() { var str1; var str2; } ---- 顯示模態頁面之前初始化該對象,然后調用showModalDialog方法。 function WelcomeYou(iniStr1,iniStr2) { myDialog.str1 = iniStr1; myDialog.str2 =iniStr2 ; if (showModalDialog("dialog2.htm", myDialog) ==false) //將對象傳入 ...... ---- 在模態頁面中,可以用這樣的代碼 window.document.all.iptID.value= window.dialogArguments.str1 來引用數值,或者用這樣的代碼對之賦值 window.dialogArguments.str1 = window.document.all.iptID.value ---- 完整例程如下: ---- 對于只傳遞一個參數的情況,見:Main1.htm和dialog1.htm。 ---- 對于傳遞多個參數的情況,見:Main2.htm和dialog2.htm。 父窗體: dim xxx '返回值 dim yyy '傳到子窗體的參數 var xxx = ShowModalDialog('xxx.asp','yyy','dialogWidth:100px;DialogHeight=290px;status:no') 子窗體: dim yyy '從父窗體傳來的參數 dim xxx '傳回父窗體的參數 yyy = window.dialogArguments xxx = window.returnValue 本文來自CSDN博客,轉載請標明出處:http://blog.csdn.net/liang4571231/archive/2009/04/29/4135316.aspx
          posted @ 2009-07-01 20:36 zhuyongjp 閱讀(2085) | 評論 (0)編輯 收藏

          2009年5月7日

          第一種方法:在tomcat中的conf目錄中,在server.xml中的,<host/>節點中添加:
          <Context path="/hello" docBase="D:\eclipse3.2.2forwebtools\workspace\hello\WebRoot" debug="0" privileged="true">
          </Context>?
          至于Context 節點屬性,可詳細見相關文檔。

          第二種方法:將web項目文件件拷貝到webapps 目錄中。

          第三種方法:很靈活,在conf目錄中,在 Catalina(注意大小寫)\localhost目錄,在該目錄中新建一個xml文件,名字可以隨意取,只要和當前文件中的文件名不重復就行了,該xml文件的內容為:
          <Context path="/hello" docBase="D:\eclipse3.2.2forwebtools\workspace\hello\WebRoot" debug="0" privileged="true">
          </Context>?

          部署路徑指向web目錄所在的路徑。

          posted @ 2009-05-07 10:02 zhuyongjp 閱讀(246) | 評論 (0)編輯 收藏
          僅列出標題  下一頁
           
          主站蜘蛛池模板: 郓城县| 宜章县| 揭阳市| 会同县| 都兰县| 清丰县| 和平县| 汉源县| 万盛区| 达孜县| 桂林市| 祁东县| 汉川市| 保靖县| 滁州市| 调兵山市| 手游| 门源| 宜章县| 平顺县| 武城县| 霍山县| 师宗县| 长丰县| 天柱县| 卢湾区| 衡阳市| 湄潭县| 门头沟区| 涟源市| 德阳市| 青海省| 凌源市| 通山县| 仁寿县| 太原市| 军事| 星座| 梁平县| 寿宁县| 澜沧|