Archive for the ‘JavaScript’ Category

25 05 2011

placeholder

bigCat Posted in JavaScript - 41 Comments
function placeholderSupport(){\r\nvar inp = document.createElement('input');\r\nreturn 'placeholder' in inp;\r\n}\r\nif(!placeholderSupport()){\r\nvar inputId = document.getElementById('inputID');\r\nvar placeholderWords = 'plz write sth.';\r\ninputId.setAttribute('value',placeholderWords);\r\ninputId.className = 'inp_txt inp_nofocus';\r\ninputId.onfocus = (function(){\r\nif(this.value === placeholderWords){\r\nthis.value = '';\r\n}\r\n});\r\ninputId.onblur = (function(){\r\nif(this.value === ''){\r\nthis.value = placeholderWords;\r\n}\r\n});\r\n}
9 01 2011

fso.ReadAll 脚本错误: 输入超出了文件尾

bigCat Posted in JavaScript - 0 Comment
if(!strOpenTextFile.AtEndOfStream){\r\n	strFileRead = strOpenTextFile.ReadAll();\r\n}

\r\n\r\nReadAll() 弱人,无法判断是否到文件菊花了...\r\n要用AtEndOfStream做个判断

16 12 2010

Programmer's Guide to Regular Expressions

bigCat Posted in JavaScript - 0 Comment

http://www.javascriptkit.com/javatutors/redev.shtml\r\n

\r\n

Programmer's Guide to Regular Expressions

\r\nCredits: This tutorial is written by David Andersson (Liorean). Please see footnote for more information on author.\r\n

What is a regular expression?

\r\nRegular expressions is a form of pattern matching that you can apply on textual content. Take for example the DOS wildcards ? and * which you can use when you're searching for a file. That is a kind of very limited subset of RegExp. For instance, if you want to find all files beginning with "fn", followed by 1 to 4 random characters, and ending with "ht.txt", you can't do that with the usual DOS wildcards. RegExp, on the other hand, could handle that and much more complicated patterns.\r\n\r\nRegular expressions are, in short, a way to effectively handle data, search and replace strings, and provide extended string handling. Often a regular expression can in itself provide string handling that other functionalities such as the built-in string methods and properties can only do if you use them in a complicated function or loop.\r\n

RegExp Syntax

\r\nThere are two ways of defining regular expressions in JavaScript — one through an object constructor and one through a literal. The object can be changed at runtime, but the literal is compiled at load of the script, and provides better performance. The literal is the best to use with known regular expressions, while the constructor is better for dynamically constructed regular expressions such as those from user input. In almost all cases you can use either way to define a regular expression, and they will be handled in exactly the same way no matter how you declare them.\r\n

Declaration

\r\nHere are the ways to declare a regular expression in JavaScript. While other languages such as PHP or VBScript use other delimiters, in JavaScript you use forward slash (/) when you declare RegExp literals.\r\n

\r\n \r\n
\r\n

\r\n

\r\n

\r\n

\r\n

\r\n
\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

Syntax Example
RegExp Literal
/pattern/flags; var re = /mac/i;
RegExp Object Constructor
new RegExp("pattern","flags"); var re = new RegExp(window.prompt("Please input a regex.","yes|yeah"),"g");

\r\n

Flags

\r\nThere are three flags that you may use on a RegExp. The multiline flag is supported only in JavaScript1.5+, but the other two are supported in pretty much every browser that can handle RegExp (JavaScript.1.2+). These flags can be used in any order or combination, and are an integral part of the RegExp.\r\n

\r\n \r\n
\r\n

\r\n

\r\n

\r\n

\r\n

\r\n
\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

Flag Description
Global Search
g The global search flag makes the RegExp search for a pattern throughout the string, creating an array of all occurrences it can find matching the given pattern.
Ignore Case
i The ignore case flag makes a regular expression case insensitive. For international coders, note that this might not work on extended characters such as å, ü, ñ, æ.
Multiline Input
m This flag makes the beginning of input (^) and end of input ($) codes also catch beginning and end of line respectively. JavaScript1.5+ only.

\r\n

\r\n
\r\n
\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

Regular Expressions patterns

\r\nThe patterns used in RegExp can be very simple, or very complicated, depending on what you're trying to accomplish. To match a simple string like "Hello World!" is no harder then actually writing the string, but if you want to match an e-mail address or html tag, you might end up with a very complicated pattern that will use most of the syntax presented in the table below.\r\n

\r\n \r\n
\r\n

\r\n

\r\n

\r\n

\r\n

\r\n
\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

Pattern Description
Escaping
\ Escapes special characters to literal and literal characters to special.\r\n\r\nE.g: /\(s\)/ matches '(s)' while /(\s)/ matches any whitespace and captures the match.
Quantifiers
{n}, {n,}, {n,m}, *, +, ? Quantifiers match the preceding subpattern a certain number of times. The subpattern can be a single character, an escape sequence, a pattern enclosed by parentheses or a character set.\r\n\r\n{n} matches exactly n times.\r\n{n,} matches n or more times.\r\n{n,m} matches n to m times.\r\n* is short for {0,}. Matches zero or more times.\r\n+ is short for {1,}. Matches one or more times.\r\n? is short for {0,1}. Matches zero or one time.\r\n\r\nE.g: /o{1,3}/ matches 'oo' in "tooth" and 'o' in "nose".
Pattern delimiters
(pattern), (?:pattern) Matches entire contained pattern.\r\n\r\n(pattern) captures match.\r\n(?:pattern) doesn't capture match\r\n\r\nE.g: /(d).\1/ matches and captures 'dad' in "abcdadef" while /(?:.d){2}/ matches but doesn't capture 'cdad'.\r\n\r\nNote: (?:pattern) is a JavaScript 1.5 feature.
Lookaheads
(?=pattern), (?!pattern) A lookahead matches only if the preceding subexpression is followed by the pattern, but the pattern is not part of the match. The subexpression is the part of the regular expression which will be matched.\r\n\r\n(?=pattern) matches only if there is a following pattern in input.\r\n(?!pattern) matches only if there is not a following pattern in input.\r\n\r\nE.g: /Win(?=98)/ matches 'Win' only if 'Win' is followed by '98'.\r\n\r\nNote: Lookahead is a JavaScript1.5 feature.
Alternation
| Alternation matches content on either side of the alternation character.\r\n\r\nE.g: /(a|b)a/ matches 'aa' in "dseaas" and 'ba' in "acbab".
Character sets
[characters], [^characters] Matches any of the contained characters. A range of characters may be defined by using a hyphen.\r\n\r\n[characters] matches any of the contained characters.\r\n[^characters] negates the character set and matches all but the contained characters\r\n\r\nE.g: /[abcd]/ matches any of the characters 'a', 'b', 'c', 'd' and may be abbreviated to /[a-d]/. Ranges must be in ascending order, otherwise they will throw an error. (E.g: /[d-a]/ will throw an error.)\r\n/[^0-9]/ matches all characters but digits.\r\n\r\nNote: Most special characters are automatically escaped to their literal meaning in character sets.
Special characters
^, $, ., ? and all the highlighted characters above in the table. Special characters are characters that match something else than what they appear as.\r\n\r\n^ matches beginning of input (or new line with m flag).\r\n$ matches end of input (or end of line with m flag).\r\n. matches any character except a newline.\r\n? directly following a quantifier makes the quantifier non-greedy (makes it match minimum instead of maximum of the interval defined).\r\n\r\nE.g: /(.)*?/ matches nothing or '' in all strings.\r\n\r\nNote: Non-greedy matches are not supported in older browsers such as Netscape Navigator 4 or Microsoft Internet Explorer 5.0.
Literal characters
All characters except those with special meaning. Mapped directly to the corresponding character.\r\n\r\nE.g: /a/ matches 'a' in "Any ancestor".
Backreferences
\n Backreferences are references to the same thing as a previously captured match. n is a positive nonzero integer telling the browser which captured match to reference to.\r\n\r\n/(\S)\1(\1)+/g matches all occurrences of three equal non-whitespace characters following each other.\r\n/<(\S+).*>(.*)<\/\1>/ matches any tag.\r\n\r\nE.g: /<(\S+).*>(.*)<\/\1>/ matches '<div id="me">text</div>' in "text<div id=\"me\">text</div>text".
Character Escapes
\f, \r, \n, \t, \v, \0, [\b], \s, \S, \w, \W, \d, \D, \b, \B, \cX, \xhh, \uhhhh \f matches form-feed.\r\n\r matches carriage return.\r\n\n matches linefeed.\r\n\t matches horizontal tab.\r\n\v matches vertical tab.\r\n\0 matches NUL character.\r\n[\b] matches backspace.\r\n\s matches whitespace (short for [\f\n\r\t\v\u00A0\u2028\u2029]).\r\n\S matches anything but a whitespace (short for [^\f\n\r\t\v\u00A0\u2028\u2029]).\r\n\w matches any alphanumerical character (word characters) including underscore (short for [a-zA-Z0-9_]).\r\n\W matches any non-word characters (short for [^a-zA-Z0-9_]).\r\n\d matches any digit (short for [0-9]).\r\n\D matches any non-digit (short for [^0-9]).\r\n\b matches a word boundary (the position between a word and a space).\r\n\B matches a non-word boundary (short for [^\b]).\r\n\cX matches a control character. E.g: \cm matches control-M.\r\n\xhh matches the character with two characters of hexadecimal code hh.\r\n\uhhhh matches the Unicode character with four characters of hexadecimal code hhhh.

\r\n

\r\n

\r\n
\r\n
\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

Regular Expressions methods and usage

\r\nNow, knowing how a RegExp is written is only half the game. To gain anything from them you have to know how to use them too. There are a number of ways to implement a RegExp, some through methods belonging to the String object, some through methods belonging to the RegExp object. Whether the regular expression is declared through an object constructor or a literal makes no difference as to the usage.\r\n

\r\n \r\n
\r\n

\r\n

\r\n

\r\n

\r\n

\r\n
\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

Description Example
RegExp.exec(string)
Applies the RegExp to the given string, and returns the match information. var match = /s(amp)le/i.exec("Sample text")\r\n\r\nmatch then contains ["Sample","amp"]
RegExp.test(string)
Tests if the given string matches the Regexp, and returns true if matching, false if not. var match = /sample/.test("Sample text")\r\n\r\nmatch then contains false
String.match(pattern)
Matches given string with the RegExp. With g flag returns an array containing the matches, without g flag returns just the first match or if no match is found returns null. var str = "Watch out for the rock!".match(/r?or?/g)\r\n\r\nstr then contains ["o","or","ro"]
String.search(pattern)
Matches RegExp with string and returns the index of the beginning of the match if found, -1 if not. var ndx = "Watch out for the rock!".search(/for/)\r\n\r\nndx then contains 10
String.replace(pattern,string)
Replaces matches with the given string, and returns the edited string. var str = "Liorean said: My name is Liorean!".replace(/Liorean/g,'Big Fat Dork')\r\n\r\nstr then contains "Big Fat Dork said: My name is Big Fat Dork!"
String.split(pattern)
Cuts a string into an array, making cuts at matches. var str = "I am confused".split(/\s/g)\r\n\r\nstr then contains ["I","am","confused"]

\r\n

\r\n

\r\n
\r\n
\r\n
\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

Regular Expressions methods and usage

\r\nNow, knowing how a RegExp is written is only half the game. To gain anything from them you have to know how to use them too. There are a number of ways to implement a RegExp, some through methods belonging to the String object, some through methods belonging to the RegExp object. Whether the regular expression is declared through an object constructor or a literal makes no difference as to the usage.\r\n

\r\n \r\n
\r\n

\r\n

\r\n

\r\n

\r\n

\r\n
\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

Description Example
RegExp.exec(string)
Applies the RegExp to the given string, and returns the match information. var match = /s(amp)le/i.exec("Sample text")\r\n\r\nmatch then contains ["Sample","amp"]
RegExp.test(string)
Tests if the given string matches the Regexp, and returns true if matching, false if not. var match = /sample/.test("Sample text")\r\n\r\nmatch then contains false
String.match(pattern)
Matches given string with the RegExp. With g flag returns an array containing the matches, without g flag returns just the first match or if no match is found returns null. var str = "Watch out for the rock!".match(/r?or?/g)\r\n\r\nstr then contains ["o","or","ro"]
String.search(pattern)
Matches RegExp with string and returns the index of the beginning of the match if found, -1 if not. var ndx = "Watch out for the rock!".search(/for/)\r\n\r\nndx then contains 10
String.replace(pattern,string)
Replaces matches with the given string, and returns the edited string. var str = "Liorean said: My name is Liorean!".replace(/Liorean/g,'Big Fat Dork')\r\n\r\nstr then contains "Big Fat Dork said: My name is Big Fat Dork!"
String.split(pattern)
Cuts a string into an array, making cuts at matches. var str = "I am confused".split(/\s/g)\r\n\r\nstr then contains ["I","am","confused"]

\r\n

\r\n

14 12 2010

WebDev:FrontendCodeStandards

bigCat Posted in JavaScript - 0 Comment

\r\n

\r\n

\r\n

\r\n

\r\n\r\nWebDev:FrontendCodeStandards\r\n
\r\n
\r\n
\r\n

\r\n

\r\n

\r\n

Contents\r\n\r\n[hide]\r\n
    \r\n
  1. 1 Browser Requirements
  2. \r\n

\r\n

    \r\n
  1. 1.1 Support Levels
  2. \r\n

  3. 1.2 Mobile Devices
  4. \r\n

  5. 1.3 Internal Tools
  6. \r\n

  7. 1.4 Minimum Browser Support
  8. \r\n

  9. 1.5 Other Support
  10. \r\n

\r\n

    \r\n
  1. 2 QA Requirements
  2. \r\n

  3. 3 Accessibility Requirements
  4. \r\n

  5. 4 Code Standards
  6. \r\n

  7. 5 Performance Standards
  8. \r\n

\r\n

    \r\n
  1. 5.1 Page requirements
  2. \r\n

  3. 5.2 Recommendations
  4. \r\n

\r\n

    \r\n
  1. 6 Security Standards
  2. \r\n

  3. 7 Video Standards
  4. \r\n

\r\n

\r\n \r\n\r\nBrowser Requirements\r\n\r\nSupport Levels\r\n

    \r\n
  1. A grade:
  2. \r\n

\r\n

    \r\n
  1. Roughly 90% or more of functionality and design is supported and functional
  2. \r\n

  3. 大約 90% 的功能和版面要能正確運作
  4. \r\n

  5. Variations between browsers is acceptable
  6. \r\n

  7. 不同瀏覽器的表現可以有差異
  8. \r\n

  9. 'Advanced' browsers can receive a higher fidelity experience with other browsers receiving a lower fidelity
  10. \r\n

  11. 使用較好的瀏覽器可以得到比較好的使用體驗
  12. \r\n

\r\n

    \r\n
  1. B grade:
  2. \r\n

\r\n

    \r\n
  1. Larger rendering issues allowed
  2. \r\n

  3. 允許較難處理的問題存在
  4. \r\n

  5. Core functionality and content should still be accessible
  6. \r\n

  7. 主要的功能和內容仍需要可以使用
  8. \r\n

  9. Fallback to basic html from dhtml/ajax where necessary
  10. \r\n

  11. 需要時降到純 HTML 而不使用 DHTML/AJAX
  12. \r\n

\r\nIf it's not on the chart, we don't support it.\r\n\r\n不在表上的表示不支援\r\n\r\nMobile Devices\r\n

\r\n
\r\n
\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

Support Level
Mobile IE A-Grade
Fennec A-Grade
Opera Mobile A-Grade

\r\nInternal Tools\r\n

\r\n
\r\n
\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

Linux Win XP Vista OS 10.5 OS 10.6
Fx 3.5 A-Grade A-Grade A-Grade A-Grade A-Grade
Fx 3 B-Grade B-Grade B-Grade B-Grade B-Grade

\r\nMinimum Browser Support\r\n\r\nSupport of other browsers is left to each product team.\r\n\r\n其餘的瀏覽器支援交給各產品團隊決定\r\n

\r\n
\r\n
\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

\r\n

Linux Win7 Win XP Vista OS 10.5 OS 10.6
IE 8 A-Grade A-Grade A-Grade
IE 7 A-Grade A-Grade
Fx 3.5 A-Grade A-Grade A-Grade A-Grade A-Grade A-Grade
Fx 3 A-Grade A-Grade A-Grade A-Grade A-Grade A-Grade
Safari 4 A-Grade A-Grade A-Grade A-Grade A-Grade
Opera 10 A-Grade A-Grade A-Grade A-Grade A-Grade A-Grade
Chrome A-Grade A-Grade A-Grade
Gecko based B-Grade B-Grade B-Grade B-Grade B-Grade B-Grade

\r\nOther Support\r\n

    \r\n
  1. New Sites/Projects: Progressive enhancement for advanced functionality
  2. \r\n

  3. 新網站/計畫:進階功能使用漸進增強方式加上
  4. \r\n

  5. Current Sites: make new functionality degrade, don't rewrite current code
  6. \r\n

  7. 現有網站:不要修改現有的程式,讓新功能?
  8. \r\n

  9. Need to work on accessibility! (ex: AMO Control Panel)
  10. \r\n

  11. 需要關注親和力問題
  12. \r\n

\r\nQA Requirements\r\n\r\nQA should test and file bugs appropriately for the browser support chart that applies to each site.\r\n\r\nAccessibility Requirements\r\n

    \r\n
  1. Add basic ARIA support where appropriate
  2. \r\n

  3. 加入基本的 ARIA 支援(包括 landmark role, required, invalid, live region)
  4. \r\n

\r\nCode Standards\r\n

    \r\n
  1. Layered semantic markup
  2. \r\n

\r\n

    \r\n
  1. Semantic class/id names and appropriate HTML tags for content
  2. \r\n

  3. 有語意的 class/id 名稱和適當的 HTML 標籤
  4. \r\n

  5. No inline CSS & JS unless absolutely necessary
  6. \r\n

  7. 非必要不使用行內 CSS/JS
  8. \r\n

  9. Progressive enhancement (see bolded QA requirements)
  10. \r\n

  11. 漸進增強
  12. \r\n

\r\n

    \r\n
  1. HTML:
  2. \r\n

\r\n

    \r\n
  1. HTML5 doctype. Safe to use for all browsers.
  2. \r\n

  3. 使用 HTML5 doctype 宣告,對所有瀏覽器都適用
  4. \r\n

  5. Pages should validate. Not a strict requirement. Some layouts can't be achieved without a few errors.
  6. \r\n

  7. 頁面需要盡量通過標準檢測,此項要求並非絕對需要遵守,因為部分版面設計無法在完全遵守標準的狀況下實作
  8. \r\n

  9. Use most meaningful tags for content
  10. \r\n

  11. 使用最能表現物件內容意義的標籤
  12. \r\n

  13. Images/bg images with text in them must have alternate textual representation (alt text or text positioned offscreen for screenreaders). Avoid these due to L10n difficulties anyway.
  14. \r\n

  15. 圖片或背景圖有文字時,需要加上文字資訊(例如替代文字或讓文字出現在版面範圍之外)
  16. \r\n

\r\n

    \r\n
  1. CSS:
  2. \r\n

\r\n

    \r\n
  1. Separate stylesheets for other browsers (IE) are ok
  2. \r\n

  3. 可以為特定瀏覽器獨立 CSS 檔案
  4. \r\n

\r\n

    \r\n
  1. If only 1 or 2 properties are changed, keeping them in the original stylesheet is ok
  2. \r\n

  3. 如果只有意兩個屬性的修改,可以不必分到不同檔案
  4. \r\n

\r\n

    \r\n
  1. For new sites, look into YUI Fonts & Reset, this will reduce browser layout differences
  2. \r\n

  3. 新網站可以參考 YUI Fonts 和 Reset ,這會幫助減少花在處理不同瀏覽器的版面差異的時間
  4. \r\n

  5. Semantic classnames
  6. \r\n

  7. 有語意的 class 名稱
  8. \r\n

  9. Don't use position: absolute unless absolutely necessary
  10. \r\n

  11. 非必要不使用 absolute
  12. \r\n

  13. Use least amount of selectors possible to allow for overriding
  14. \r\n

  15. 近可以能減少 selector 的使用,讓他比較容易被覆蓋
  16. \r\n

  17. Don't use !important (see above)
  18. \r\n

  19. 不要使用 !importanr
  20. \r\n

  21. Specify font sizes in EMs or %
  22. \r\n

  23. 使用 EM 或 % 指定字型大小
  24. \r\n

  25. Clear floats with zoom:1 & content:after
  26. \r\n

  27. 使用 zoom:1 和 content:after 來 clear float
  28. \r\n

  29. Hide content for screen readers with position:absolute and position offscreen. Display:none hides content from screen readers.
  30. \r\n

  31. 如果要隱藏部分訊息,使用 position: absolute ,並把位置移到畫面外,使用 display: none 的話,會讓螢幕報讀器也看不到這些內容
  32. \r\n

  33. Design layouts to stretch according to their contents (good for localization and good for font-resizing)
  34. \r\n

  35. \r\n

  36. Avoid selectors that are native element names (i.e. don't style on "div" or "p") except when resetting.
  37. \r\n

  38. 避免只使用標籤名稱做 selector ,除非要重設
  39. \r\n

  40. Specify in comments the scope of generic sounding class names (what does .block mean and where is it applied? one page or multiple pages?)
  41. \r\n

  42. \r\n

\r\n

    \r\n
  1. Try avoiding generic class names altogether
  2. \r\n

\r\n

    \r\n
  1. JS
  2. \r\n

\r\n

    \r\n
  1. Don't pollute the global namespace (put all functions into objects/closures)
  2. \r\n

  3. 別使用全域變數
  4. \r\n

  5. Use Module pattern for singletons? (http://yuiblog.com/blog/2007/06/12/module-pattern/)
  6. \r\n

  7. Use .prototype for objects
  8. \r\n

  9. 物件可以使用 .prototype
  10. \r\n

  11. Use jQuery
  12. \r\n

  13. 使用 jQuery
  14. \r\n

\r\n

    \r\n
  1. Very fast & light
  2. \r\n

  3. 非常快且輕量
  4. \r\n

  5. If you need another library, please concatenate & use as little as possible
  6. \r\n

  7. 如果需要使用其他函式庫,盡可能減少使用
  8. \r\n

\r\n

    \r\n
  1. Make JS reusable as best as possible.
  2. \r\n

  3. 盡量讓 JS 可以重複利用
  4. \r\n

  5. var your variables
  6. \r\n

  7. 變數都用 var 宣告
  8. \r\n

  9. Use JSlint : http://www.jslint.com/
  10. \r\n

  11. 使用 JSLint
  12. \r\n

\r\nPerformance Standards\r\n\r\nPage requirements\r\n

    \r\n
  1. Min score of B on homepage and 1 other 'major' page
  2. \r\n

  3. ~400k max page size
  4. \r\n

  5. 頁面最大不要超過 400k
  6. \r\n

\r\nRecommendations\r\n

    \r\n
  1. Follow Yahoo!'s 34 rules
  2. \r\n

  3. 遵守 Yahoo 的 34 條規範
  4. \r\n

  5. http://developer.yahoo.com/performance/rules.html
  6. \r\n

  7. Follow these best practices:
  8. \r\n

  9. 遵守這些最佳實踐
  10. \r\n

  11. http://developer.yahoo.net/blog/archives/2008/01/the_7_habits_fo.html
  12. \r\n

  13. Sprite images
  14. \r\n

  15. 使用 Sprite images 技巧(多長小圖放在一張大圖內)
  16. \r\n

  17. Concat and minify JS & CSS with
  18. \r\n

  19. 串皆並最小化 JS 和 CSS
  20. \r\n

\r\n

    \r\n
  1. YUI Compressor (http://www.julienlecomte.net/blog/2007/08/13/)
  2. \r\n

  3. or Minify (http://code.google.com/p/minify/)
  4. \r\n

\r\n

    \r\n
  1. Max 3s load time for all pages (tracked via Gomez)
  2. \r\n

  3. 頁面讀取時間不超過 3 秒
  4. \r\n

  5. Use YSlow to see where pages can be improved
  6. \r\n

  7. 使用 YSlow 檢查頁面是否還有可以加強的地方
  8. \r\n

\r\n(see Webtools:Scalability for an overview of tools/infrastructure)\r\n\r\nSecurity Standards\r\n\r\nTo be branched off into separate document\r\n\r\nAlso IT's responsibility, we should work with them together on this\r\n

    \r\n
  1. Protect against cross-site request forgeries with crumbs (http://developer.yahoo.com/security/)
  2. \r\n

  3. \r\n

  4. Filter all input (SQL, HTML, JS, CSS)
  5. \r\n

  6. 所有的使用者輸入都要過濾
  7. \r\n

  8. Verify user has permissions on content they are editing/deleting
  9. \r\n

  10. Don't include JS from 3rd party domains
  11. \r\n

  12. 不要從其它網域讀取 JS 檔案
  13. \r\n

  14. Read http://phpsec.org/projects/guide/
  15. \r\n

  16. More?
  17. \r\n

\r\nVideo Standards\r\n

    \r\n
  1. Players, in order of degradation...
  2. \r\n

  3. 播放器採用以下的優先順序
  4. \r\n

\r\n

    \r\n
  1. <video>, obviously the first choice
  2. \r\n

  3. <video> 當然是第一優先
  4. \r\n

\r\n

    \r\n
  1. Supported by FF 3.5+, Safari 3+, Chrome
  2. \r\n

  3. FF 3.5+, Safari 3+, Chrome 都支援
  4. \r\n

\r\n

    \r\n
  1. Quicktime
  2. \r\n

\r\n

    \r\n
  1. IE w/ quicktime installed, iPhone
  2. \r\n

  3. IE 且有安裝 Quicktime, iPhone
  4. \r\n

\r\n

    \r\n
  1. Flash
  2. \r\n

\r\n

    \r\n
  1. Check out open source JW-FLV player
  2. \r\n

  3. 先使用開放原碼的播放器
  4. \r\n

  5. YouTube, DailyMotion, etc are also options
  6. \r\n

  7. 也可以使用 YouTube, 或 DailyMotion 來放置影片
  8. \r\n

\r\n

    \r\n
  1. Download links
  2. \r\n

\r\n

    \r\n
  1. If all else fails, at least let the user download easily
  2. \r\n

  3. 如果以上都不可行,那就讓訪客可以簡單下載檔案
  4. \r\n

\r\n

    \r\n
  1. Formats
  2. \r\n

\r\n

    \r\n
  1. OGG - Firefox
  2. \r\n

  3. MP4 / H.264 - everything else
  4. \r\n

  5. Consider high vs. low vs. audio-only formats?
  6. \r\n

\r\n

    \r\n
  1. Resources
  2. \r\n

\r\n

    \r\n
  1. Video For Everybody - excellent page detailing complete setup, from codecs to HTML
  2. \r\n

  3. Open source flash player
  4. \r\n

\r\n

    \r\n
  1. Hosting
  2. \r\n

\r\n

    \r\n
  1. Currently, file a bug with IT (mozilla.org:server ops) and host at videos.mozilla.org
  2. \r\n

  3. https://intranet.mozilla.org/Uploading_Videos
  4. \r\n

  5. Link to videos should use CDN (videos-cdn.mozilla.net)
  6. \r\n

\r\n

12 12 2010

javascript 获取图片原始高/宽度

bigCat Posted in JavaScript - 0 Comment

img.naturalWidth;\r\n\r\nimg.naturalHeight;

Host: (miao) | Word: Press | Code: HTML5