һ
 ע

QQ¼

ֻһٿʼ

ƼĶ

+
̳ WEBҳǰ뿪 WEBҳܱ

[ת] ȫˣwebǰ⼯

[]
10720 websjy 2015-8-28 10:34:43
| ʾȫ¥
1F

ϵ½עᣬύѣø๦ܣϴزIJޣ

Ҫ ¼ ſػ鿴ûʺţע  

x
ǰ˿֪ʶ٣

HTML&CSSWeb׼⡢ں˲졢ԡhackCSS֡ģ͡ѡȼʹáHTML5CSS3ƶӦJavaScript ͡󡢼̳Сհ򡢿ԭģ黯Զ¼ڴй©¼ơ첽װػصģ桢NodejsJSONajaxȡ HTTPȫŻعӦʽƶˡŶЭάSEOUEDְܹҵ

1.̸̸Cookieı׶

cookieȻڳ־ñͻṩ˷㣬ֵ˷洢ĸкܶԵġһÿض20cookie
1.IE6Ͱ汾20cookie2.IE7֮İ汾50cookie3.Firefox50cookie4.chromeSafariûӲIEOpera ʹõcookieFirefoxcookie
cookieԼΪ4096ֽڣΪ˼ԣһ㲻ܳ4095ֽڡ
IE ṩһִ洢Գ־ûûݣuerDataIE5.0Ϳʼ֧֡ÿ128Kÿ1M־ûݷڻУûôһֱڡ

ŵ㣺ߵչԺͿ

1.ͨõı̣ƱcookieеsessionĴС2.ͨܺͰȫ似SSLcookieƽĿԡ3.ֻcookieдŲݣʹҲشʧ4.cookieڣʹ֮ԶЧ͵ߺܿõһڵcookie

ȱ㣺

1.`Cookie`ͳȵơÿdomainֻ20cookieÿcookieȲܳ4KBᱻص2.ȫ⡣cookieˣ˾ͿȡеsessionϢʹҲ޲Ϊ߲Ҫ֪cookie壬ֻҪԭתcookieͿԴﵽĿˡ3.Щ״̬ܱڿͻˡ磬Ϊ˷ֹظύҪڷ˱һǰڿͻˣô𲻵κá

2.ش洢

ڽϸ߰汾УjsṩsessionStorageglobalStorageHTML5ṩlocalStorageȡglobalStorage
html5еWeb Storageִ洢ʽsessionStoragelocalStorage
sessionStorageڱش洢һỰsessionеݣЩֻͬһỰеҳܷʲҵỰҲ֮١sessionStorageһֳ־ûıش洢ǻỰĴ洢
localStorageڳ־ûıش洢ɾݣԶڵġ

3.web storagecookie

Web StorageĸcookieƣΪ˸洢ġCookieĴС޵ģÿһµҳʱCookieᱻ͹ȥ˷˴cookieҪָ򣬲Կá
֮⣬Web StorageӵsetItem,getItem,removeItem,clearȷcookieҪǰ˿ԼװsetCookiegetCookie
CookieҲDzԻȱģCookieнΪHTTP淶һֶ Web StorageΪڱء洢ݶ
ֳ֧IE²֧⣬׼ȫ֧(ieFFweb)ֵһIEǰ£IE7IE6еUserDataʵjavascriptش洢Ľͨ򵥵Ĵװͳһе֧web storage
localStoragesessionStorageͬIJsetItemgetItemremoveItem

CSS display:nonevisibility:hidden

display:none  ضӦԪأĵвٸռ䣬ߵԪػ£͵ڡvisibility:hidden  ضӦԪأĵԱԭĿռ䡣

CSS link @import ǣ
A
(1) linkHTMLǩ@importCSSṩ;
(2) ҳ汻صʱlinkͬʱأ@importõCSSȵҳ汻ټ;
(3) importֻIE5ϲʶ𣬶linkHTMLǩ޼;
(4) linkʽʽȨ @importȨ.

positionabsolutefixedͬ벻ͬ

Aͬ㣺1.ıԪصijַʽdisplayΪblock2.Ԫͨռݿռ䣻3.ĬϻḲǵǶλԪBͬ㣺absoluteġԪءǿõģfixedġԪء̶ΪڡҳfixedԪ֮ľDzġ  

һCSSĺģͣ

1֣ IE ģ͡׼ W3C ģͣIEcontentְ border pading;2ģͣ (content)(padding)߽(margin) ߿(border).

CSS ѡЩЩԿԼ̳Уȼ㷨μ㣿 CSS3αЩ
   *   1.idѡ # myid        2.ѡ.myclassname        3.ǩѡdiv, h1, p        4.ѡh1 + p        5.ѡul > li        6.ѡli a        7.ͨѡ *         8.ѡa[rel = "external"]        9.αѡa: hover, li:nth-child    *   ɼ̳еʽ font-size font-family color, text-indent;    *   ɼ̳еʽborder padding margin width height ;    *   ȼͽԭͬȨʽΪ׼;    *   ʽĶλΪ׼;ȼΪ:   !important >  id > class > tag     important ȼ, id ҪCSS3αp:first-of-type ѡ丸Ԫص׸ <p> Ԫصÿ <p> Ԫءp:last-of-type  ѡ丸Ԫص <p> Ԫصÿ <p> Ԫءp:only-of-type  ѡ丸ԪΨһ <p> Ԫصÿ <p> Ԫءp:only-child    ѡ丸ԪصΨһԪصÿ <p> Ԫءp:nth-child(2)  ѡ丸ԪصĵڶԪصÿ <p> Ԫء:enabled  :disabled ƱؼĽ״̬:checked        ѡѡѡС

гdisplayֵ˵ǵápositionֵ relativeabsoluteֱ˭жλģ

1.   
  block Ԫһʾ  
inline ȱʡֵԪһʾ
  inline-block ԪһʾԪһʾ
  list-item Ԫһʾʽбǡ  

2.  
*absolute         ɾԶλԪأ static λĵһԪؽжλ   
*fixed IE֧֣        ɾԶλԪأڽжλ  
*relative         ԶλԪأͨеλýжλ  
* static  ĬֵûжλԪس  * top, bottom, left, right z-index   
* inherit 涨ӸԪؼ̳ position Եֵ

CSS3Щԣ

CSS3ʵԲǣborder-radiusӰbox-shadowּЧtext-shadowԽ䣨gradientתtransformtransform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//ת,,λ,б˸CSSѡ  ౳ rgba CSS3ΨһαԪ::selection.ýѯborder-image

ΪʲôҪʼCSSʽ

    Ϊļ⣬ͬЩǩĬֵDzͬģûCSSʼ֮ҳʾ졣    ȻʼʽSEOһӰ죬ƲɼãӰС³ʼ*򵥵ijʼǣ * {padding: 0; margin: 0;} 飩    Աʽʼ   
  1. body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
  2. body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
  3. h1, h2, h3, h4, h5, h6{ font-size:100%; }
  4.    
  5. address, cite, dfn, em, var { font-style:normal; }
  6. code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
  7.    
  8. small{ font-size:12px; }

  9.     ul, ol { list-style:none; }
  10.    
  11. a { text-decoration:none; }
  12. a:hover { text-decoration:underline; }

  13.     sup { vertical-align:text-top; }
  14.    
  15. sub{ vertical-align:text-bottom; }

  16.     legend { color:#000; }
  17. fieldset, img { border:0; }
  18. button, input, select, textarea { font-size:100%; }
  19. table { border-collaPSe:collapse; border-spacing:0; }
ƴ

BFC淶⣿
      BFC鼶ʽģһµBFCĺǶֵģԪصʽӰ쵽ԪءͬһBFCеڵĿ鼶ڴֱ򣨺Ͳַйϵmarginᷢ۵    W3C CSS 2.1 淶еһԪζݽв֣ԼԪصĹϵ໥á

CSS spritesԼҪҳվʹ

CSS SpritesʵǰҳһЩͼƬϵһͼƬļУCSSġbackground-imagebackground- repeatbackground-positionϽбλbackground-positionܾȷĶλͼƬλáԼٺܶͼƬĿΪʱȽϳȻԲҲƣһ6δԣͲҪˣΪ`http2`html

˵˵廯⣿

1ȥ߶ʧʽʱܹҳֳĽṹ
2SEO潨ùͨץȡЧϢڱǩȷĺ͸ؼֵȨأ
3豸ĻĶäĶƶ豸ķʽȾҳ
4Ŷӿά廯߿ɶԣһҳҪѭW3C׼ŶӶѭ׼Լٲ컯

Doctype? ϸģʽģʽ֣к?

1<!DOCTYPE> λĵеǰ棬 <html> ǩ֮ǰ֪ԺģʽȾĵ
2ϸģʽŰ JS ģʽ  Ըֵ֧߱׼С
3ڻģʽУҳԿɵݵķʽʾģʽΪԷֹվ޷
4DOCTYPEڻʽȷᵼĵԻģʽ֡   

֪Doctypeĵͣ

ñǩ DTD ֱͣʾϸ汾ɰ汾Լڿܵ HTML ĵ HTML 4.01 涨ĵͣStrictTransitional Լ Frameset XHTML 1.0 涨 XML ĵͣStrictTransitional Լ FramesetStandards ׼ģʽҲϸģʽڳѭ±׼ҳ Quirks ݣģʽҲɢģʽ߼ģʽڳΪͳƵҳ

HTMLXHTMLʲô
1.еıǶҪһӦĽ
2.бǩԪغԵֶʹСд
3.еXMLǶǶ
4.еԱ""
5.<&ñʾ
6.Ըһֵ
7.Ҫעʹ--
8.ͼƬ˵



* png24λͼƬiE6ϳֱPNG8.Ҳһνű.
* ĬϵmarginpaddingͬǼһȫֵ*{margin:0;padding:0;}ͳһ
* IE6˫߾bug:Աǩfloatкеmargin£ie6ʾmarginõĴ
* ie˫루IE6˫߾⣺IE6£Ԫ˸ͬʱmargin-leftmargin-rightmarginֵӱ  
#box{ float:left; width:10px; margin:0 0 0 100px;}  ֮IE20pxľ룬floatıǩʽм _display:inline;תΪԡ(_ֻie6ʶ)
*  ʶķʽųֲ  
ȣʹá\9һǣIEз   ţٴʹá+IE8IE7IE6뿪IE8Ѿʶ  css      .bb{       background-color:#f1ee18;/*ʶ*/      .background-color:#00deff\9; /*IE678ʶ*/      +background-color:#a200ff;/*IE67ʶ*/      _background-color:#1e0bd1;/*IE6ʶ*/       } *  IE,ʹûȡԵķȡԶ,   ҲʹgetAttribute()ȡԶ;   Firefox,ֻʹgetAttribute()ȡԶ.    :ͳһͨgetAttribute()ȡԶ.* IE,eventx,y,ûpageX,pageY;   Firefox,eventpageX,pageY,ûx,y.* עͣȱIE¿ܻӶHTTP* Chrome ĽĬϻὫС 12px ıǿư 12px ʾ,   ͨ CSS -webkit-text-size-adjust: none; .* ӷʹhoverʽͲ ʹijʽھhoveractive˽ǸıCSSԵ˳:L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}* ģʽ⣺©дDTDFirefoxȻᰴձ׼ģʽҳIEлᴥģʽΪģʽǴҪ鷳дDTDĺϰߡڿʹ[html5](http://www.w3.org/TR/html5/single-page.html)Ƽд`<doctype html>`* marginغieffڣڵdivmargin-leftmargin-rightغϣmargin-topmargin-bottomȴᷢغϡõĴдϰߣͬʱmargin-topͬʱmargin-bottom* ie6pngͼƬʽֲ֧(һνű)

¸Ĺԭļ


Ԫĵռݿռ䡣Ԫı߿߸Ԫصı߿ͣ
1.ʹÿձǩ   ַиǩһձǩ css clear:both. ׶˾ǩ
2.ʹoverflow   Ԫصĸǩcss overflow:auto; zoom:1; zoom:1ڼIE6
3.ʹafterα   ÷ֻڷIEдɲʾ
ʹע¼㡣
һ÷бΪҪԪصα height:0Ԫػʵʸ߳أ

Ԫͽ취

Ԫ⣺
1Ԫصĸ߶޷ſӰ븸ԪͬԪ
2븡ԪͬķǸԪػ
3ǵһԪظԪ֮ǰԪҲҪӰҳʾĽṹʹCSSеclear:both;Ԫصĸɽ23⣬1ʽԪclearfixʽ

  1. .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}.clearfix{display: inline-block;} /* for IE/Mac */
ƴ



ļַ
1ǩ<div style="clear:both;"></div>ȱ㣺취ӶıǩʹHTMLṹࡣ

2ʹafterα#parent:after{    content:".";    height:0;    visibility:hidden;    display:block;    clear:both;    }
3,ⲿԪ4,`overflow`Ϊ`hidden`auto

IE 8°汾еĺģʲôͬ

IE8ĺģжԪصĿ߲ڱ߾ͱ߿

DOMӡƳƶơͲҽڵ㡣

1½ڵ      createDocumentFragment()    //һDOMƬ      createElement()   //һԪ      createTextNode()   //һıڵ
2ӡƳ滻      appendChild()      removeChild()      replaceChild()      insertBefore() //еӽڵǰһµӽڵ
3      getElementsByTagName()    //ͨǩ      getElementsByName()    //ͨԪصNameԵֵ(IEݴǿõһ飬аidnameֵ)      getElementById()    //ͨԪIdΨһ

html5ЩԡƳЩԪأ

δHTML5±ǩ⣿ HTML HTML5

* HTML5 Ѿ SGML ӼҪǹͼλã洢ȹܵӡ* קͷ(Drag and drop) API   廯õݱǩheader,nav,footer,aside,article,section  ƵƵAPI(audio,video)  (Canvas) API  (Geolocation) API  ߴ洢 localStorage ڴ洢ݣرպݲʧ  sessionStorage رպԶɾ  ؼcalendardatetimeemailurlsearch    µļwebworker, websocket, Geolocation* ƳԪشֵԪأbasefontbigcenterfont, sstrikettuԿԲӰԪأframeframesetnoframes֧HTML5±ǩ* IE8/IE7/IE6֧ͨdocument.createElementıǩ  һЩ֧HTML5±ǩ  ֧±ǩ󣬻ҪӱǩĬϵʽ* ȻõķʽֱʹóĿܡʹhtml5shim   <!--[if lt IE 9]>    <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>    <![endif]--> ֣ DOCTYPE\ĽṹԪ\Ԫ

iframeȱ㣿
1.<iframe>ŵ㣺    ػĵͼ͹ȵļ    Security sandbox    мؽű
2.<iframe>ȱ㣺    *iframeҳOnload¼    *ʱΪգҲҪʱ    *û

ʵڶǩҳ֮ͨ?


localstorgecookiesȱش洢ʽ

webSocketμݵ

Adobe Flash Socket ActiveX HTMLFile (IE) multipart 뷢 XHR ڳѯ XHR̵߳һһ,һһ߳. ̵߳Ļֳ߶Сڽ̣ʹö̳߳IJԸߡ ⣬ִйӵжڴ浥Ԫ̹߳ڴ棬Ӷ˳Чʡ ִ߳й̻ġÿ߳һеڡ˳ִкͳijڡִ̲ܹ߳УӦУӦóṩִ߳пơ ߼Ƕ̵߳һӦóУжִвֿͬʱִСϵͳûн߳̿Ӧãʵ̵ֽĵȺ͹ԼԴ䡣ǽ̵̺߳Ҫ

ζվļԴŻ

ڴĽ ļϲ ļС/ļѹ ʹ CDN й ʹãṩ棩

˵ּҳʱķ
1.ŻͼƬ  
2.ͼʽѡGIFṩɫ٣һЩɫҪ󲻸ߵĵط
3.ŻCSSѹϲcssmargin-top,margin-left...)  
4.ַбܣwww.campr.com/Ŀ¼жĿ¼ʲôļͣĿ¼  
5.߶ȺͿȣûҵҪһͼƬһ߼СͼƬܶ࣬Ҫϵصҳ档ⲻӰٶȣҲӰ顣 ֪˸߶ȺͿȲ󣬼ʹͼƬʱ޷ʾҳҲڳͼƬĿλȻغݡӶʱˣҲˡ
6.http󣨺ϲļϲͼƬ

㶼ʹЩԴܣ

Profiler, JSPerfhttp://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout, Dromaeo

ʲô FOUCʽ˸ FOUC

FOUC - Flash Of Unstyled Content ĵʽ˸ <style type="text/css" media="all">@import "../fouc.css";</style> CSSļ@importסIEȼHTMLĵDOMȻȥⲿCSSļˣҳDOMɵCSSмһʱҳϵûʽģʱij̸٣ٶȶйϵ

򵥵ij棬ֻҪ<head>֮һ<link><script>ԪؾͿˡ

nullundefined

nullһʾ""ĶתΪֵʱΪ0undefinedһʾ""ԭʼֵתΪֵʱΪNaN  
ıδʼʱĬֵΪundefinednullʾδڵĶ󣬳ʾͼһڵĶ
undefinedʾ"ȱֵ"Ǵ˴Ӧһֵǻûж塣÷ǣ
1ˣûиֵʱ͵undefined2) úʱӦṩIJûṩòundefined3ûиֵԣԵֵΪundefined4ûзֵʱĬϷundefinednullʾ"ûж"ôӦֵ÷ǣ
1 ΪIJʾúIJǶ󡣣2 Ϊԭյ㡣

newʲô?   
1һն󣬲 this øöͬʱ̳˸úԭ͡   

2Ժͷ뵽 this õĶС   3´Ķ this ãʽķ this var obj  = {};obj.__proto__ = Base.prototype;Base.call(obj);

JSON ˽⣿

JSON(JavaScript Object Notation) һݽʽǻJavaScriptһӼݸʽ, ڶд, ռôС{'age':'12', 'name':'back'}

jsӳټصķʽЩ

deferasync̬DOMʽscript뵽DOMУϺcallBack첽js

ν?  

  jsonp document.domain+iframewindow.namewindow.postMessageôҳjsonpԭǶ̬scriptǩμjs
documen.write innerHTML

document.writeֻػҳinnerHTMLػҳһ

.call() .apply() ã

ã̬ıijijлμJavaScriptѧϰܽᣨģfunction


Щڴй©

ڴй©ָκζӵлҪ֮Ȼڡɨ󣬲ÿһΪ 0ûùö󣩣ԸöΩһѭģôöڴ漴ɻաsetTimeout ĵһʹַǺĻڴй©հ̨־ѭ˴ұ˴˱ʱͻһѭjsڴ

JavaScriptе

JavaScriptģʽ

жϵǰűnodeУ

ͨжGlobalǷΪwindowΪwindowǰűû



Ƚѵļǣ

νģ
ʹõĿЩ
õǰ˿ߣ
ʲôӦû

оIE һԣ
99%վҪعDZдģ

* վعӦweb׼ƣ2棩

ʲôŽͽǿ


ŽWebվʽжûʹõʽȷǷIEصĺģͲ⣬Բͬ汾IEhackʵŽ,ΪЩ޷ֹ֧ܵӺѡʹ֮ھʽijʽȴȫʧЧ.ǿӱֵ֧Ļܿʼ𲽵Щֻʽֵ֧Ĺ,ҳ޺ڻĶʽ͹ܵġ֧ʱǻԶسֳácssѧϰܽᣨһ

WEBӦôӷDataͻЩʽNodeŵȱԼĿ

*ŵ㣩ΪNodeǻ¼ģԷdzʺϴ  ˹NodeϵĴʵ֣RubyķҪõöࡣ  ⣬NodeĿͻ˴javascriptԱдģ  ˿ͻ˺ͷ˶ͬһԱдǷdz顣*ȱ㣩NodeһµĿԴĿԲ̫ȶһֱڱ䣬  ȱ㹻ĵ֧֡Ruby/Railsӡ

ǰ⻹˽ʲôôļʲô㳣õĿʲôΪʲôǰ˽湤ʦְλôģǰô

ǰûijԱȺˡݿ⡢ƷӪȫ    1ʵֽ潻    2û    3Node.jsǰ˿ʵַ˵һЩǰûijԱǰ˵òƷ 90ֽ 100 ֣ã ĿٸʵЧͼȷ1px ŶӳԱUIƣƷĹͨ õҳṹҳعû飻 hackݡдĴʽ ԷŻӵǰ˼

ڵŶӴʲôĽɫʲôԵã
Ϊȫ˹ʦFull Stack developerһƷɣĿʲô⣿νŵʲôȱʲôιǰŶ?ѧʲô̸̸δ35ԼĹ滮ЩŻķ뿴Ż14Żԭ

  1 httpCSS Sprites, JSCSSԴѹͼƬСƺʣҳGzipCDNйܣdata ͼƬ  2 ǰģ JS+ݣHTMLǩµĴ˷ѣǰñAJAXÿβر󣬼  3 innerHTMLDOMDOMŻjavascriptܡ  4 ҪõʽܶʱclassNameֱӲstyle  5 ȫֱDOMڵҵĽIOȡ  6 ʹCSS Expressioncssʽ)ֳDynamic properties(̬)  7 ͼƬԤأʽڶűڵײ  ʱ

http״̬Щֱʲô˼

100-199 ָͻӦӦijЩ 200-299 ڱʾɹ 300-399 ѾƶļҳڶλͷϢָµĵַϢ 400-499 ָͻ˵Ĵ400    1󣬵ǰ޷⡣401   ǰҪû֤ 403  Ѿ󣬵Ǿִܾ500-599 ַ֧ 503 C 񲻿飺http://segmentfault.com/blog/trigkit4/1190000000691919

һҳ URL ҳʾɣжʲô
   

Ϊ4裺  
  1һURLʱURLWebҳURLWebҳÿԴURLῪһ߳ͬʱԶDNSһDNSѯʹӦIPַ   
2 ԶWebͨTCPЭһTCP/IPӡְһͬģһͬ-ӦĺһӦģ ͷ֮䴫ݡɿͻ˳ԽͨţӦ𲢽ܿͻ˵ɿͻ˷Ѿܵıġ   
3һTCP/IPӽͨԶ̷HTTPGETԶ̷ҵԴʹHTTPӦظԴֵΪ200HTTPӦ״̬ʾһȷӦ   
4ʱWebṩԴ񣬿ͻ˿ʼԴ󷵻غ󣬱ǹעǰģ˵HTMLDOM TreeλCSSCSS Rule TreejavascriptֿԸDOM APIDOM飺 URL յĹзʲô飿


ƽʱιĿ


Ŷӱȷȫʽglobe.cssģʽ(utf-8) ȣ
       дϰ߱һ£綼Dzü̳ʽдʽдһУ
        עʽдˣģ鶼ʱעעؼʽõĵط  
      ҳбע ҳ ģ ʼͽ
       CSSHTML ļвдţͳһstyle.css
        JS ļд ԸJSΪ׼Ӣķ롣
        ͼƬϵ images.png png8 ʽļʹ һʹ÷㽫Ĺ

˵˵еһЩɣȥЩվ

Node.jsMongodbnpmMVVMMEANthree.js,React վw3cfuns,sf,hacknews,CSDN,ĽΣ԰InfoQ,w3cplus

javascriptļִʽ

1ģʽ
2캯ģʽ
3ԭģʽ
4Ϲ캯ԭģʽ
5̬ԭģʽ
6캯ģʽ
7׹캯ģʽ

javascript̳е6ַ

1ԭ̳
2ù캯̳
3ϼ̳(ԭ+ù)
4ԭʽ̳
5ʽ̳
6ʽ̳飺JavaScript̳зʽ

ajax

(1)XMLHttpRequest,ҲǴһ첽ö
(2)һµHTTP,ָHTTPķURL֤Ϣ.
(3)ӦHTTP״̬仯ĺ.(4)HTTP.(5)ȡ첽÷ص.(6)ʹJavaScriptDOMʵ־ֲˢ.飺JavaScriptѧϰܽᣨߣAjaxHttp״̬


첽غӳټ

1.첽صķ ̬scriptǩ
2.ͨajaxȥȡjs룬Ȼͨevalִ
3.scriptǩdeferasync
4.iframe첽ִjs
5.ӳټأЩ js 벢ҳʼʱҪģԺijЩҪġ

ǰ˰ȫ⣿

   XSSsqlע룬CSRFCSRFǿվα죬ԸݸոյĽͣĺҲα죬ͨαύPOSTGETпĹ**CSRFҪ裺**1.½εվAڱCOOKIE2.ڲdzA£߱COOKIEûйڵ£ΣվB

ie汾chromeԲضٸԴ

IE6 iE7֮6֮汾Ҳ6FirefoxchromeҲ6

javascriptļ̳ôʵ֣αԭĶ

ù캯ԭĻģʽȥʵּ̳УԲοextend()ܶǰ˿ܶзװģһպмgrunt YUI compressor google clojureдѹ÷

YUI Compressor һѹ JS CSS ļĹߣJavaʹ÷//ѹJSjava -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js//ѹCSSjava -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.cssҪյǰ˴Ż


FlashAjaxԵȱ㣬ʹȡ᣿

Flash ajaxԱFlashʺϴý塢ʸͼΡʻCSSıϲ㣬ױAjaxCSSıֺ֧ܺã֧ý塢ʸͼΡʲ㡣ͬ㣺ˢ´Ϣûߺ״̬DOM

һ JavaScript ͬԴԡ

:ͬԴǿͻ˽űJavascriptҪİȫ׼Netscape Navigator2.0ĿǷֹijĵűӶͬԴװء

ͬԴָǣЭ飬˿ͬͬԴһְȫЭ顣ָһνűֻܶȡͬһԴĴںĵԡ

ΪʲôҪͬԴƣ

Ǿ˵һڿͳIframeе¼ҳǶҳϣʹʵû¼ʱҳͿͨJavascriptȡıinputеݣûɵˡ

ʲô "use strict"; ? ʹĺôͻֱʲô

ECMAscript 5˵ڶģʽ"ϸģʽ"strict mode˼壬ģʽʹJavascriptڸϸС

"ϸģʽ"ĿģҪ¼
- Javascript﷨һЩϽ֮һЩΪ;- еһЩȫ֤֮еİȫ- ߱Чʣٶȣ- Ϊδ°汾Javascript̵档עIE6,7,8,9֧ϸģʽ
ȱ㣺վJS ѹһЩļϸģʽһЩûСʱЩϸģʽļ merge ͵ļм䣬ûָʾϸģʽѹ˷ֽڡ

GETPOST𣬺ʱʹPOST   

GETһϢȡʹURLݲϢҲƣһ2000ַ    POSTһ޸ķϵԴ͵Ϣûơ    GETʽҪʹRequest.QueryStringȡñֵPOSTʽͨRequest.Formȡֵ    Ҳ˵GetֵַͨPostͨύֵȻУʹ POST ޷ʹûļ·ϵļݿ⣩ʹݣPOST ûƣͰδַ֪ûʱPOST GET ȶҲɿ

ЩطcssЩطjs

jsԣJSʱ򣬻ֹһԴأݵijֵȵȡֱJSءִϺſʼԴݡΪû飬һֲ֧JSJSȻԴأ.ͼƬcssļȣ

Ϊ˷ֹJS޸DOMҪ¹DOMԾͻغͳ֡

ǶJSݵij֣ⲿJSֻݵʾ2ַʽԴءҲ˵ⲿʽⲿűļأⲿűִС
CSSôˣCSSǿԲصģʲô»(ڲԹ۲УIE6CSSأ

CSSǶJSʱ򣬸CSSͻԴصǶJSŵCSSǰ棬Ͳˡ

ԭΪάhtmlcssjs˳ʽǶJSִǰȼءꡣǶJSԴأԾͻCSSص
ǶJSӦ÷ʲôλã

   1ڵײȻڵײг֣Դء   2ǶJSheadУǶJSCSSͷ   3ʹdeferֻ֧IE   4ҪǶJSеʱϳĺһҪã`setTimeout`

Javascriptؾ巽ʽ


  • űڵײ<link>ǷheadУԱ֤jsǰܼسʾҳ档<script>ǩ</body>ǰ
  • űÿ<script>ǩʱҳ̣ҳ<script>ҲԸܡűⲿű
  • űҳɼغټjs롣Ҳǣwindow.onload¼ʼش롣1deferԣ֧IE4fierfox3.5߰汾2̬űԪأĵģͣDOMʹjs̬HTMLļȫĵݡ£

  1. <script>var script=document.createElement("script");script.type="text/javascript";script.src="file.js";document.getElementsByTagName("head")[0].appendChild(script);</script>
ƴ



˼صڣںδأļغжҳ洦̡ʹheadļhttpӣ   

հ⣿

jsհ


js¼⣿

JavaScriptѧϰܽᣨţ¼

evalʲôģ


ĹǰѶӦַJS벢УӦñʹevalȫdzܣ2Σһνjs䣬һִУ

дһͨõ¼?

// event(¼)߼Դgithub.com/markyun   

markyun.Event = {        // ҳɺ        readyEvent : function(fn) {            if (fn==null) {                fn=document;            }            var oldonload = window.onload;            if (typeof window.onload != 'function') {                window.onload = fn;            } else {                window.onload = function() {                    oldonload();                    fn();                };            }        },        // ֱʹdom0||dom2||IEʽ ¼        // Ԫ,¼ ,¼        addEvent : function(element, type, handler) {            if (element.addEventListener) {                //¼͡ҪִеĺǷ׽                element.addEventListener(type, handler, false);            } else if (element.attachEvent) {                element.attachEvent('on' + type, function() {                    handler.call(element);                });            } else {                element['on' + type] = handler;            }        },        // Ƴ¼        removeEvent : function(element, type, handler) {            if (element.removeEnentListener) {                element.removeEnentListener(type, handler, false);            } else if (element.datachEvent) {                element.detachEvent('on' + type, handler);            } else {                element['on' + type] = null;            }        },         // ֹ¼ (Ҫ¼ðݣΪIE֧¼)        stopPropagation : function(ev) {            if (ev.stopPropagation) {                ev.stopPropagation();            } else {                ev.cancelBubble = true;            }        },        // ȡ¼ĬΪ        preventDefault : function(event) {            if (event.preventDefault) {                event.preventDefault();            } else {                event.returnValue = false;            }        },        // ȡ¼Ŀ        getTarget : function(event) {            return event.target || event.srcElement;        },        // ȡeventãȡ¼Ϣȷʱʹevent        getEvent : function(e) {            var ev = e || window.event;            if (!ev) {                var c = this.getEvent.caller;                while (c) {                    ev = c.arguments[0];                    if (ev && Event == ev.constructor) {                        break;                    }                    c = c.caller;                }            }            return ev;        }    };

Node.jsó

߲졢ʵʱϢ   

JavaScriptԭͣԭ ? ʲôص㣿

*  ԭͶҲͨĶǶһԴʽ __proto__ ԣԭҲпԼԭͣһԭͶԭͲΪnullĻǾͳ֮Ϊԭ*  ԭһЩ̳к͹ԵĶɵģ޵ģ

ҳعô

д CSSҳṹû飬ʵõҳЧܡ

WEBӦôӷDataͻЩʽ

html5 websoket    WebSocketͨFlash    XHRʱ    XHR Multipart Streaming    ɼIframe    <script>ǩijʱ(ɿ)

¼IE¼ʲô ֹðݣ


1. ҳеijеIJӦ¼磺ǵһťͻһ¼ǿԱ JavaScript ⵽Ϊ   
2. ¼ƣIE¼ðݡfirefoxͬʱ֧¼ģͣҲǣ¼ð¼
3.  ev.stopPropagation();עieķ ev.cancelBubble = true;

ajax ʲô?ajax Ľģ?ͬ첽?ν?

JavaScriptѧϰܽᣨߣAjaxHttp״̬


1. ͨ첽ģʽû  
2. Żͷ֮Ĵ䣬ٲҪ˴ռ  
3. AjaxڿͻУеһֱɷеĹ˴ûµķء  
2. Ajaxصʲô  
Ajaxʵֶ̬ˢ£ֲˢ£  
readyState ״̬ 5ȡֵ 0=δʼ 1= 2=ͣ3=գ4=ajaxȱ

1ajax֧backť
2ȫ AJAX¶ϸڡ  
3ֱ֧Ƚ  
4ƻ˳쳣ơ
5׵ԡ jsonp iframewindow.namewindow.postMessageôҳ

jsȿ¡

  1. function clone(Obj) {           
  2. var buf;         
  3. if (Obj instanceof Array) {              
  4. buf = [];  //һյ            
  5. var i = Obj.length;               
  6. while (i--) {                  
  7. buf = clone(Obj);               
  8. }              
  9. return buf;         
  10. }else if (Obj instanceof Object){               
  11. buf = {};  //һն            
  12. for (var k in Obj) {  //Ϊµ               
  13. buf[k] = clone(Obj[k]);              
  14. }               
  15. return buf;         
  16. }else{               
  17. return Obj;         
  18. }      
  19. }  
ƴ


AMDCMD 淶


JavaScriptģ黯վع⣿
վعڲıⲿΪǰ£򻯽ṹӿɶԣվǰ˱һµΪҲ˵ڲıUI£վŻչͬʱһµUIڴͳվ˵عͨǣ(table)ָΪDIV+CSSʹվǰ˼ִ(ڲϹ淶CSSIE6Ч)ƶƽ̨ŻSEOŻεվعӦÿǵķٴô뱣ֵϸ񰴹淶дƿչAPIеĿܡ(VB)ǿûͨ˵ٶȵŻҲعѹJSCSSimageǰԴ(ͨɷ)Ż(ݶд)CDNԴضJS DOMŻHTTPļλȡUA
  1. <script>   
  2. function whatBrowser() {         
  3. document.Browser.Name.value=navigator.appName;         
  4. document.Browser.Version.value=navigator.appVersion;         
  5. document.Browser.Code.value=navigator.appCodeName;        
  6. document.Browser.Agent.value=navigator.userAgent;   
  7. }  
  8. </script>
ƴ

j

ȥصַ

  1. Array.prototype.unique1 = function () {
  2.   var n = []; //һµʱ
  3.   for (var i = 0; i < this.length; i++) //ǰ
  4.   {
  5.     //ǰĵiѾʱ飬ô
  6.     //ѵǰpushʱ
  7.     if (n.indexOf(this[i]) == -1) n.push(this[i]);
  8.   }
  9.   return n;
  10. }

  11. Array.prototype.unique2 = function()
  12. {
  13.     var n = {},r=[]; //nΪhashrΪʱ
  14.     for(var i = 0; i < this.length; i++) //ǰ
  15.     {
  16.         if (!n[this[i]]) //hashûеǰ
  17.         {
  18.             n[this[i]] = true; //hash
  19.             r.push(this[i]); //ѵǰĵǰpushʱ
  20.         }
  21.     }
  22.     return r;
  23. }

  24. Array.prototype.unique3 = function()
  25. {
  26.     var n = [this[0]]; //
  27.     for(var i = 1; i < this.length; i++) //ӵڶʼ
  28.     {
  29.         //ǰĵiڵǰеһγֵλòi
  30.         //ôʾiظģԵ
  31.         if (this.indexOf(this[i]) == i) n.push(this[i]);
  32.     }
  33.     return n;
  34. }
ƴ


HTTP״̬

100  Continue  һڷpostʱѷhttp header֮˽شϢʾȷϣ֮;Ϣ
200  OK   Ϣ
201  Created  ɹҷµԴ
202  Accepted  ѽ󣬵δ
301  Moved Permanently  ҳƶλá
302 Found  ʱض
303 See Other  ʱضʹ GET µ URI
304  Not Modified  Դϴҳδ޸Ĺ

400 Bad Request  ޷ĸʽͻ˲Ӧٴʹͬݷ
401 Unauthorized  δȨ
403 Forbidden  ֹʡ
404 Not Found  Ҳ URI ƥԴ

500 Internal Server Error  ķ˴
503 Service Unavailable ʱ޷󣨿ǹػά

cache-control

ҳĻHTTPϢͷеġCache-controlƵģȡֵprivateno-cachemax-agemust-revalidateȣĬΪprivate
Expires ͷֶṩһںʱ䣬ӦڸںʱΪʧЧͻʱ֮ǰȥ飨󣩣ͬmax-ageЧͬʱڣCache-Controlmax-ageǡ
Expires = "Expires" ":" HTTP-date
Expires: Thu, 01 Dec 1994 16:00:00 GMT GMTʽΪ-1ʾ
Expiresmax-ageָĵĹʱ䣬ǶһЩϸ΢
1.ExpiresHTTP/1.0Ѿ壬Cache-Control:max-ageHTTP/1.1вж壬Ϊ¼ݣʹmax-age2.ExpiresָһԵĹʱ(GMTʽ),ôᵼ2⣺1)ͻ˺ͷʱ䲻ͬExpiresó⡣ 2úǾĹʱ䣬¹ٳӿ3.max-age ָǴĵʺĴʱ䣬ʱǸֵ(:3600s),Եĵһαʱ¼Request_time(ʱ)4.Expiresָʱļʱ(Atime)޸ʱ(MTime),max-ageԶԵĵʱ(Atime)ֵΪno-cache,ôÿζʷֵΪmax-age,ڹ֮ǰظʷ

jsȡcookie

  1. //cookie
  2. function setCookie(name, value, expires, path, domain, secure) {
  3.     var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
  4.     if (expires instanceof Date) {
  5.         cookieText += '; expires=' + expires;
  6.     }
  7.     if (path) {
  8.         cookieText += '; expires=' + expires;
  9.     }
  10.     if (domain) {
  11.         cookieText += '; domain=' + domain;
  12.     }
  13.     if (secure) {
  14.         cookieText += '; secure';
  15.     }
  16.     document.cookie = cookieText;
  17. }

  18. //ȡcookie
  19. function getCookie(name) {
  20.     var cookieName = encodeURIComponent(name) + '=';
  21.     var cookieStart = document.cookie.indexOf(cookieName);
  22.     var cookieValue = null;
  23.     if (cookieStart > -1) {
  24.         var cookieEnd = document.cookie.indexOf(';', cookieStart);
  25.         if (cookieEnd == -1) {
  26.             cookieEnd = document.cookie.length;
  27.         }
  28.         cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
  29.     }
  30.     return cookieValue;
  31. }

  32. //ɾcookie
  33. function unsetCookie(name) {
  34.     document.cookie = name + "= ; expires=" + new Date(0);
  35. }
ƴ


Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ
б

ֹ

²

̳¡ͼƬѷϴվԭתԻ,µİȨԭ
վַİȨ֪ͨǵĹԱ,Ա(Email:admin@websjy.com)ʱȡȨɾ
ܾκκʽڱ̳л񹲺͹ִ!

QQ| 42011102000510|Archiver|ֻ|Դ ( ICP14013341-1

GMT+8, 2018-1-21 16:44

Powered by Discuz! X3.2

ԴԴվ  ԴAPPӦ֮

ٻظ ض б