JavaScript ææ¯æ¦è§
HTML å®ä¹ç½é¡µçç»æä¸å 容ï¼CSS å®ä¹å ¶æ ¼å¼ä¸æ ·å¼ï¼è JavaScript å为ç½é¡µå¢å äº¤äºæ§ï¼åä½åè½ä¸°å¯ç Web åºç¨ã
使¯ï¼å¦æä»æµè§å¨çèç´å»çè§£âJavaScriptâè¿ä¸ªæ¯è¯ï¼å®å å«äºæªç¶ä¸åç两个æ¹é¢ã䏿¹é¢æ¯ JavaScript çæ ¸å¿è¯è¨ï¼ECMAScriptï¼ï¼å¦ä¸æ¹é¢æ¯å¤§éç Web APIï¼å æ¬ DOMï¼ææ¡£å¯¹è±¡æ¨¡åï¼ã
JavaScript æ ¸å¿è¯è¨ï¼ECMAScriptï¼
JavaScript çæ ¸å¿è¯è¨ç± ECMA TC39 å§å伿 ååä¸ºç§°ä½ ECMAScript çè¯è¨ãâECMAScriptâæ¯è¡¨ç¤ºè¯è¨æ åçæ¯è¯ï¼ä½âECMAScriptâåâJavaScriptâæ¯å¯ä»¥äºæ¢ä½¿ç¨çã
è¯¥æ ¸å¿è¯è¨åæ ·å¯ä»¥è¢«ç¨å¨éæµè§å¨ç¯å¢ä¹ä¸ï¼ä¾å¦ Node.jsã
åªäºå å®¹è¢«çº³å ¥ ECMAScript èç´ä¹ä¸ï¼
é¤å´ä¸äºå ¶ä»å ç´ ï¼ECMAScript å®ä¹äºï¼
- è¯æ³ï¼è§£æè§åãå ³é®åãæµç¨æ§å¶ã对象åé¢éåå§åï¼ççï¼
- é误å¤çæºå¶ï¼
throwãtry...catchï¼ä»¥ååå»ºç¨æ·èªå®ä¹Errorç±»åçè½åï¼ - ç±»åï¼å¸å°ãæ°åãå符串ã彿°ã对象ï¼ççï¼
- åºäºååçç»§æ¿æºå¶
- å
置对象å彿°ï¼
JSONãMathãæ°ç»æ¹æ³ãparseIntãdecodeURIï¼ççï¼ - ä¸¥æ ¼æ¨¡å¼
- 模åç³»ç»
- åºæ¬å 忍¡å
æ ååæµç¨
ECMAScript çæ¬ç±æ¯å¹´ç ECMA 大伿¹åå¹¶ä½ä¸ºæ ååå¸ãææçè¿å±é½å¨ Ecma TC39 GitHub ç»ç»ä¸å ¬å¼ï¼è¯¥ç»ç»æç®¡ææ¡ã宿¹è§èææ¬åä¼è®®è®°å½ã
å¨ ECMAScript 第 6 çï¼ç§°ä¸º ES6ï¼ä¹åï¼è§èæ¯å å¹´åå¸ä¸æ¬¡ï¼é常ç¨å®ä»¬ç主è¦çæ¬å·æ¥æä»£ï¼ES3ãES5 çï¼ãå¨ ES6 ä¹åï¼è§è以åå¸å¹´ä»½å½åï¼ES2017ãES2018 çï¼ãES6 æ¯ ES2015 ç代åè¯ãESNext æ¯ä¸ä¸ªå¨æåç§°ï¼æçæ¯æ°åæ¬ææ¶çä¸ä¸ä¸ªçæ¬ãESNext ä¸çç¹æ§æ´åç¡®å°ç§°ä¸ºææ¡ï¼å ä¸ºæ ¹æ®å®ä¹ï¼è§èå°æªæç»ç¡®å®ã
ç®åå§å伿¹åç ECMA-262 çå¿«ç §ä½äº Ecma International ç ECMA-262 è¯è¨è§è页é¢ï¼æ PDF å HTML ä¸¤ä¸ªæ ¼å¼å¯ç¨ãECMA-262 å ECMA-402 æ£å¤äºç»´æ¤ç¶æï¼ä»å¨ç±è§èç¼è¾è æ´æ°ï¼TC39 ç½ç«æç®¡äºææ°çæ¬ç ECMA-262 å ECMA-402ã
æ°çè¯è¨ç¹æ§ï¼å æ¬æ°çè¯æ³å API çå¼å ¥ä»¥åç°æè¡ä¸ºç修订ï¼é½ä»¥ææ¡çå½¢å¼è¿è¡è®¨è®ºãæ¯ä¸ªææ¡é½éè¦ç»è¿ 4 ä¸ªé¶æ®µçè¿ç¨ï¼é常å¨ç¬¬ 3 æç¬¬ 4 é¶æ®µæ¶ï¼JavaScript 弿ä¼å®ç°è¿äºææ¡ï¼ä»¥ä¾å ¬ä¼ä½¿ç¨ã
æå ³ ECMAScript åå²çæ´å¤ä¿¡æ¯ï¼è¯·åé ç»´åºç¾ç§ä¸ç ECMAScript æ¡ç®ã
å½é å API
ç± ECMA TC39 è¿è¡æ ååç ECMAScript å½é
å API è§èæ¯å¨ ECMAScript è¯è¨è§èä¹ä¸é¢å¤å¢å çãå½é
å API 为 JavaScript åºç¨ç¨åºæä¾äºå½é
åçè§åæåºï¼å符串æ¯è¾ï¼ãæ°åæ ¼å¼åãæ¥ææ¶é´æ ¼å¼åçåè½ï¼è½å¤è®©åºç¨éæ©è¯è¨ï¼å¹¶æ ¹æ®å®é
éè¦éç¨åè½ãåå§æ åå¨ 2012 å¹´ 12 æå®¡æ¹éè¿ï¼å¯ä»¥å¨ Intl å¯¹è±¡çææ¡£ä¸æ¥çå个æµè§å¨çå®ç°ç¶æãå¦ä»ï¼å½é
åè§èæ¯å¹´é½ä¼å¾å°æ¹åï¼æµè§å¨ä¹ä¼ä¸ææ¹è¿å
¶å®ç°ã
ç¸å ³èµæº
ä½ å¯ä»¥éè¿å¤ç§æ¹å¼å䏿è·è¸ª ECMAScript è¯è¨è§èå ECMAScript å½é å API è§èåç¸å ³èµæºçç®åçå·¥ä½ï¼
DOM API
>WebIDL
WebIDL è§èå®ä¹äº ECMAScript å DOM ææ¯ä¹é´ç交äºè§èã
DOM çæ ¸å¿
ææ¡£å¯¹è±¡æ¨¡åï¼DOMï¼æ¯ä¸ç§è·¨å¹³å°ä»¥åç¼ç¨è¯è¨æ å ³ç约å®ï¼ç¨äºè¡¨ç¤º HTMLãXHTML å XML ææ¡£ä¸ç对象并ä¸ä¹äº¤äºãéè¿è°ç¨ DOM æ ä¸çå¯¹è±¡çæ¹æ³å¯¹å ¶è¿è¡å®ä½åæçºµãW3C å°æ ¸å¿ææ¡£å¯¹è±¡æ¨¡åæ ååï¼è¯¥æ¨¡åå®ä¹äºä¸è¯è¨æ å ³çæ¥å£ï¼å° HTML å XML ææ¡£æ½è±¡ä¸ºå¯¹è±¡ï¼è¿å®ä¹äºæä½è¿ç§æ½è±¡çæºå¶ãå¨ç± DOM å®ä¹çäºç©ä¸ï¼æä»¬å¯ä»¥åç°ï¼
- DOM æ ¸å¿ä¸çææ¡£ç»æãæ æ¨¡åï¼ä»¥å DOM äºä»¶æ¶æï¼å
æ¬ï¼
NodeãElementãDocumentFragmentãDocumentãDOMImplementationãEventãEventTargetï¼ççã - DOM äºä»¶ä¸çä¸ä¸ªä¸å¤ªä¸¥è°¨ç DOM äºä»¶æ¶æçå®ä¹ï¼ä»¥åä¸äºç¹æ®äºä»¶ã
- DOM éå以å DOM èå´çå ¶ä»å 容ã
ä» ECMAScript çè§åº¦æ¥çï¼DOM è§èä¸å®ä¹ç对象称ä½â宿主对象âã
HTML DOM
HTMLï¼Web çæ è®°è¯è¨ï¼æ¯ä»¥ DOM çå½¢å¼å®ä¹çï¼ä½äº DOM æ ¸å¿æ½è±¡æ¦å¿µä¹ä¸ãHTML è¿å®ä¹äºå
ç´ çæä¹ãHTML DOM å
æ¬ï¼å
ç´ ç className 屿§ä»¥å Document.body APIï¼ççã
HTML è§èåæ¶è¿çº¦æäºå
ç´ ä¹é´çå
³ç³»ï¼ä¾å¦æ åºå表 <ul> å
ç´ ä¸ï¼åªè½ä»¥ <li> å
ç´ ä½ä¸ºåå
ç´ æ¥è¡¨è¾¾å表项ãè¿æå°±æ¯ç¦æ¢ä½¿ç¨æ å䏿ªå®ä¹çå
ç´ å屿§ã
æ³äºè§£æ´å¤å
³äº Document 对象ãWindow 对象以åå
¶ä» DOM å
ç´ çä¿¡æ¯ï¼é
读 DOM ææ¡£ã
å ¶ä»å¼å¾å ³æ³¨ç API
setTimeout()åsetInterval()彿°ææ©è¢«å®ä¹å¨ HTML æ åçWindowæ¥å£ä¸ã- XMLHttpRequest 使å¾åèµ·å¼æ¥ HTTP è¯·æ±æä¸ºå¯è½ã
- Fetch API 为ç½ç»è¯·æ±æä¾äºæ´ç¬¦å人ä½å·¥ç¨å¦çæ½è±¡ã
- CSS 对象模å å° CSS è§åæ½è±¡æå¯¹è±¡ã
- WebWorker å 许è¿è¡å¹¶è¡è®¡ç®ã
- WebSocket å 许è¿è¡åºå±ååéä¿¡ã
- Canvas 2D Context æ¯
<canvas>å ç´ çç»å¾ APIã - WebAssembly æ¥å£ä¸º JavaScript 代ç å WebAssembly 模åä¹é´æä¾éä¿¡å·¥å ·ã
éæµè§å¨ç¯å¢ï¼å¦ Node.jsï¼éå¸¸ä¸æä¾ DOM APIââå 为å®ä»¬ä¸ä¸ææ¡£è¿è¡äº¤äºï¼ä½å®ä»¬ä»ç¶ä¼å®ç°å¾å¤ Web APIï¼ä¾å¦ fetch() å setTimeout()ã
æåªäº JavaScript çå®ç°ï¼
æä¸ä¸ªä¸»è¦çç¨äºæµè§å¨ç¯å¢åå ¶ä»ç¯å¢ç JavaScript å®ç°ï¼
- Mozilla ç SpiderMonkeyï¼ç¨äº Firefoxã宿¯é¦æ¬¾ JavaScript 弿ï¼ç± Netscape å ¬å¸ç Brendan Eich å建ã
- Google ç V8ï¼ç¨äº Google ChromeãOperaãEdgeãNode.jsãDenoãElectronï¼ççã
- Apple ç JavaScriptCoreï¼ä¹ç§°ä¸º SquirrelFish/Nitroï¼ï¼ç¨äº WebKit æµè§å¨ï¼å¦ Apple Safariï¼å Bunã
é¤äºä»¥ä¸å®ç°ï¼è¿æå ¶ä»æµè¡ç JavaScript 弿ï¼å¦ï¼
- Carakanï¼ç¨äºæ©æçæ¬ç Operaã
- Microsoft ç Chakra 弿ï¼ç¨äº Internet Explorerï¼å°½ç®¡å®å®ç°çè¯è¨æ£å¼å称为âJScriptâï¼ä¸ºäºé¿å åæ é®é¢ï¼ãæ©æçæ¬ç Edge 使ç¨çæ° JavaScript 弿ï¼ä»¤äººå°æçæ¯ï¼å®ä¹å«ä½ Chakraã
- LibJSï¼ç¨äº SerenityOS çæµè§å¨å®ç°ã
- Mozilla ç Rhino 弿ï¼ç¨ Java è¯è¨å®ç°ç JavaScript 弿ï¼ä¸»è¦ç± Norris Boydï¼ä¹æ¾å¨ Netscapeï¼å建ã
è¿æä¸äºå¼ææ¯ä¸é¨ä¸ºéæµè§å¨ç¨éå®å¶çï¼
- Engine262ï¼ç¨ JavaScript å®ç°ç JavaScript 弿ãå建çç®çæ¯ä¸º JavaScript å¼åè æ¢ç´¢è§èä¸çæ°è¯è¨ç¹æ§åæ¥æ¾è§èä¸çé®é¢ã
- Moddable XSï¼ç¨äºåµå ¥å¼ç³»ç»ï¼å¦ IoTã
- QuickJSï¼ä¸ä¸ªå°åãåµå ¥å¼ç JavaScript 弿ã
- Meta ç Hermes 弿ï¼ä¸º React Native è¿è¡ä¼åç弿ã
- Oracle ç GraalJSï¼ç± Oracle Labs å¨ GraalVM ä¸æå»ºç髿§è½å¼æã
JavaScript 弿æ´é²äºåºç¨ç¨åºå¼åè ç¨äºå° JavaScript æ´åå°è½¯ä»¶ä¸çå ¬å ± APIï¼JavaScript 大夿°å¸¸è§ç宿主ç¯å¢æ¯ Web æµè§å¨ãWeb æµè§å¨ä¸è¬ä½¿ç¨å ¬å ±ç API å建ç¨äºå° DOM åå°å° JavaScript ç宿主对象ã
JavaScript å¦ä¸ä¸ªå¸¸è§çåºç¨æ¯ä½ä¸ºï¼Webï¼æå¡å¨ç«¯èæ¬è¯è¨ãJavaScript Web æå¡å¨éè¿æ´é²è¡¨ç¤º HTTP 请æ±åååºç宿主对象ï¼ç¶å JavaScript ç¨åºå°±è½æä½è¿äºå¯¹è±¡å¨æå°çæ Web 页é¢ãNode.js æ¯æµè¡çæå¡å¨ç«¯èæ¬è¯è¨ç宿主ç¯å¢ã
Shell
JavaScript shell å è®¸ä½ å¿«éæµè¯ JavaScript 代ç çæ®µï¼èæ ééè½½ Web 页é¢ãå ¶å¨å¼åå代ç è°è¯ä¸é常æç¨ã
ç¬ç«ç JavaScript shell
ä»¥ä¸ JavaScript shell æ¯ä¸ Perl æ Python 类似çç¬ç«çç¯å¢ï¼
åºäºæµè§å¨ç JavaScript shell
ä»¥ä¸ JavaScript shell éè¿æµè§å¨ç JavaScript 弿è¿è¡ä»£ç ï¼
- Firefox æä¸ä¸ªå ç½®ç JavaScript æ§å¶å°ï¼æ¯æå¤è¡ç¼è¾ã
- Babel 交äºå¼è§£éå¨ââä¸ä¸ªåºäºæµè§å¨çãç¨äºè¯éªä¸ä¸ä»£ JavaScript ç¹æ§ç交äºå¼è§£éå¨ã
- TypeScript playgroundââä¸ä¸ªåºäºæµè§å¨çå¨çº¿è¿è¡ç¯å¢ï¼ç¨äºè¯éªæ°ç JavaScript ç¹æ§ï¼éè¿ tsc ç¼è¯å¨ï¼å TypeScript è¯æ³ã
å·¥å ·åèµæº
ç¨äºç¼ååè°è¯ JavaScript 代ç çå®ç¨å·¥å ·ã
- Firefox å¼åè å·¥å ·
-
å æ¬ Web æ§å¶å°ãJavaScript æ§è½åæãè°è¯å¨çã
- å¦ä¹ JavaScript
-
为æè¿åå¿ç Web å¼å人ååå¤çä¼ç§èµæºââå¨äº¤äºå¼ç¯å¢ä¸éè¿èªå¨è¯ä¼°å¼å¯¼çç课ç¨å交äºå¼æµè¯å¦ä¹ JavaScriptãå 40 è课为å 费课ç¨ï¼è宿´ç课ç¨ä» é䏿¬¡æ§æ¯ä»å°éè´¹ç¨ã
- TogetherJS
-
æ·»å TogetherJS å°ä½ çç½ç«ï¼è®©ç¨æ·å®æ¶äºå©ï¼å使´ç®åã
- Stack Overflow
-
ä½ å¯ä»¥å¨ StackOverflow æ¥çæè åå¸å¸¦æ JavaScript æ ç¾çé®é¢ã
- JSFiddle
-
ç¼è¾ JavaScriptãCSS å HTML å¹¶è·å¾å®æ¶ç»æã使ç¨å¤ç½®èµæºï¼å¹¶åä½ çå¢éå¨çº¿åä½ã
- Plunker
-
Plunker æ¯ä¸ä¸ªå¨çº¿ç¤¾åºï¼ç¨äºå建ãåä½åå ±äº«ä½ ç Web å¼ååæãç¼è¾ä½ ç JavaScriptãCSS å HTML æä»¶å¹¶è·å宿¶ç»æåæä»¶ç»æã
- JSBin
-
JS Bin æ¯ä¸ä¸ªå¼æºçåä½å¼ç Web å¼åè°è¯å·¥å ·ã
- Codepen
-
Codepen 乿¯ä¸ä¸ª Web å¼ååä½å·¥å ·ï¼å¯ç¨ä½å±ç¤ºå®æ¶ç»æç playgroundã
- StackBlitz
-
StackBlitz åæ ·æ¯ä¸ä¸ªæ¯æè°è¯çå¨çº¿ playgroundï¼å®æ¯ææç®¡åé¨ç½²ä½¿ç¨äº ReactãAngular çææ¯çå ¨æ åºç¨ã
- RunJS
-
RunJS æ¯ä¸ä¸ªæ¡é¢ç«¯ä¾¿ç¬ºå¼ playgroundï¼å¯æä¾å®æ¶æ§è¡ç»æå¹¶æ¯æè°ç¨ Node 䏿µè§å¨ APIã