ΠΊΠ°ΠΊ ΡΠ·Π½Π°ΡΡ ΠΊΠ°ΠΊΠΎΠΉ js Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅
ΠΠ°ΠΊ ΠΎΡΡΠ»Π΅Π΄ΠΈΡΡ ΠΊΠ°ΠΊΠΈΠ΅ js ΡΡΠ½ΠΊΡΠΈΠΈ Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡ Π½Π° ΡΠ°ΠΉΡΠ΅?
ΠΠΎΠΌΠΎΡΡ Π² Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠΈ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΡ , ΠΊΡΡΡΠΎΠ²ΡΡ ΠΈ Π΄ΠΈΠΏΠ»ΠΎΠΌΠ½ΡΡ ΡΠ°Π±ΠΎΡ Π·Π΄Π΅ΡΡ.
ΠΠ°ΠΊ ΠΎΡΡΠ»Π΅Π΄ΠΈΡΡ ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π° ΡΠ°ΠΉΡΠ΅?
ΠΠΎΠ±ΡΡΠΉ Π΄Π΅Π½Ρ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π»ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ JavaScript ΠΎΡΡΠ»Π΅Π΄ΠΈΡΡ Π½Π°ΠΆΠ°ΡΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ ctrl+c ΠΈ ΠΏΡΠ°Π²ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΡΡΠΈ.
ΠΠ°ΠΊ ΠΎΡΡΠ»Π΅Π΄ΠΈΡΡ Π½Π°ΠΆΠ°ΡΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° ΡΠ°ΠΉΡΠ΅?
ΠΡΠ΅ΠΌ ΠΏΡΠΈΠ²Π΅Ρ! ΠΠ½ΡΠ΅ΡΠ΅ΡΡΠ΅Ρ Π²ΠΎΠΏΡΠΎΡ ΠΊΠ°ΠΊ ΠΎΡΡΠ»Π΅Π΄ΠΈΡΡ Π½Π°ΠΆΠ°ΡΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° ΡΠ°ΠΉΡΠ΅? ΠΠ°ΠΆΠ°ΡΡ Π΅Π΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ.
ΠΠ°ΠΊ ΠΎΡΡΠ»Π΅Π΄ΠΈΡΡ, ΠΊΠ°ΠΊΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΡΠ°ΠΉΡΠ΅ Π·Π°ΠΏΡΠ°ΡΠΈΠ²Π°Π΅Ρ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ ΡΠ°ΠΉΡΠ°?
ΠΠ΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅! ΠΠΎΠ΄ΡΠΊΠ°ΠΆΠΈΡΠ΅, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΡΠ»Π΅Π΄ΠΈΡΡ, ΠΊΠ°ΠΊΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΡΠ°ΠΉΡΠ΅ Π·Π°ΠΏΡΠ°ΡΠΈΠ²Π°Π΅Ρ.
ΠΠ°ΠΊΠΈΠ΅ ΡΡΠΈ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΈ Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡ ΠΏΡΠΈ while(*str++)?
#include using namespace std; int strLength(const char* str)< int size=1; while.
ΠΡΠ»ΠΈ ΠΈΠΌΠ΅Π΅ΡΡΡ Π² Π²ΠΈΠ΄Ρ ΠΎΡΡΠ»Π΅Π΄ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΊΡΠΈΠΏΡΠ°, ΡΠΎ Π·Π°ΡΡΡΠ΄Π½ΡΡΡΡ ΠΎΡΠ²Π΅ΡΠΈΡΡ
ΠΡΠ»ΠΈ ΠΈΠΌΠ΅Π΅ΡΡΡ Π² Π²ΠΈΠ΄Ρ Π²ΡΡΡΠ½ΡΡ, ΡΠΎ ΠΎΡΠΊΡΡΠ²Π°Π΅ΡΡ DevTools Π² Ρ ΡΠΎΠΌΠ΅ (F12), Π²ΡΠ±ΠΈΡΠ°Π΅ΡΡ Π²ΠΊΠ»Π°Π΄ΠΊΡ Source ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΡΡ Π½Π° Π·Π½Π°ΡΠΎΠΊ ΠΏΠ°ΡΠ·Ρ (Pause script execution)
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΈ ΡΡΡΠ»ΠΊΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ
ΠΡΠ»ΠΈ ΠΆΠ΅ Π² Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ ΡΡΠ½ΠΊΡΠΈΡ Π½Π΅ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΈ ΡΠΊΡΠΈΠΏΡ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΠΏΠ°ΡΠ·Ρ Π½Π΅ ΠΎΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ, ΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ:
ΠΡΠΊΡΡΠ²Π°Π΅ΡΡ Π² ΡΡΠΎΠΌ ΠΆΠ΅ DevTools Π²ΠΊΠ»Π°Π΄ΠΊΡ Elements, ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ Π½Π°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ body, Π²ΡΠ±ΠΈΡΠ°Π΅ΡΡ Brake on->Subtree modifications
Π ΡΠΎΠ³Π΄Π° ΠΊΠΎΠ΄ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ ΠΎΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΏΡΠΈ ΠΊΠ°ΠΊΠΎΠΌ-Π»ΠΈΠ±ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΊΠΎΠ΄Π° ΡΡΡΠ°Π½ΠΈΡΡ
JavaScript | ΠΠ°ΠΊ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΈΠ½Π΄Π΅ΠΊΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΌΠ°ΡΡΠΈΠ²Π΅?
ΠΠ»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π²ΠΎΠ·ΡΠΌΡΠΌ ΠΌΠ°ΡΡΠΈΠ² ΠΈΠ· ΡΡΡΠΎΠΊ, ΡΡΠΎΠ±Ρ ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡ Π±ΡΠΊΠ²Ρ, Π° Π½Π΅ ΡΠΈΡΠ»Π°. Π’Π°ΠΊ Π»Π΅Π³ΡΠ΅ ΠΏΠΎΠ½ΡΡΡ. ΠΡΠ΅Π³ΠΎ 10 ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΠΌΠ°ΡΡΠΈΠ²Π΅.
ΠΠ΅ΡΡΡΡ ΡΡΡΠΎΠΊ Π² ΠΌΠ°ΡΡΠΈΠ²Π΅ β JavaScript
ΠΠ°ΠΊ ΡΠ·Π½Π°ΡΡ ΠΏΠΎΠ΄ ΠΊΠ°ΠΊΠΈΠΌ ΠΈΠ½Π΄Π΅ΠΊΡΠΎΠΌ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΌΠ°ΡΡΠΈΠ²Π΅?
Π ΡΡΠΎΠΌ Π½Π°ΠΌ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΠΌΠ΅ΡΠΎΠ΄ ΠΏΡΠΎΡΠΎΡΠΈΠΏΠΎΠ² ΠΎΠ±ΡΠ΅ΠΊΡΠ° Array β findIndex(). ΠΠ½ ΠΏΡΠΎΠ²Π΅ΡΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠ°ΡΡΠΈΠ²Π° ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΌΡ-ΡΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠΌΡ ΡΡΠ»ΠΎΠ²ΠΈΡ. ΠΡΠ»ΠΈ Β« ΡΡΠ»ΠΎΠ²ΠΈΠ΅ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ Β«(true) ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΠΌΠ°ΡΡΠΈΠ²Π΅, ΡΠΎΠ³Π΄Π° Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΡΡΡ Π΅Π³ΠΎ ΠΈΠ½Π΄Π΅ΠΊΡ (ΡΠ΅Π»ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ ΠΈΠ»ΠΈ 0). ΠΡΠ»ΠΈ Β« ΡΡΠ»ΠΎΠ²ΠΈΠ΅ ΠΠ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ Β«(false) ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ Π½Π°ΠΉΠ΄Π΅Π½ Π² ΠΌΠ°ΡΡΠΈΠ²Π΅, ΡΠΎΠ³Π΄Π° Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΡΡΡ Β«-1Β».
ΠΠ°ΠΆΠ½ΠΎ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π΅ΡΠ»ΠΈ Π² ΠΌΠ°ΡΡΠΈΠ²Π΅ Π±ΡΠ΄Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Ρ ΡΠ°Π·Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΠΎ ΠΌΠ΅ΡΠΎΠ΄ findIndex() Π΄ΠΎΡΡΠ°Π½Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΌΡΠΉ ΠΏΠ΅ΡΠ²ΡΠΉ ΠΈΠ· Π½ΠΈΡ .
Π Π΅ΡΡ, ΠΌΠ΅ΡΠΎΠ΄ findIndex() ΡΠΎΠ·Π΄Π°ΡΡ Π½ΠΎΠ²ΡΠΉ ΠΌΠ°ΡΡΠΈΠ² ΠΈ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠΎΡ, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ. ΠΡΠΎ Π²Π°ΠΆΠ½ΠΎ Π΄Π»Ρ ΡΠΎΡ ΡΠ°Π½Π½ΠΎΡΡΠΈ Π΄Π°Π½Π½ΡΡ .
Π Π΅ΡΠ°Π΅ΠΌ Π²ΠΎΠΏΡΠΎΡ
ΠΡΠΎΠ±ΡΠ΅ΠΌ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΈΠ½Π΄Π΅ΠΊΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Β«zxΒ»
ΠΠ»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° i ΠΌΡ ΠΏΡΠΎΠ²Π΅ΡΠΈΠ»ΠΈ ΡΡΠ»ΠΎΠ²ΠΈΠ΅, ΡΡΠΎ i ΡΠ°Π²Π½ΡΠ΅ΡΡΡ ΡΡΡΠΎΠΊΠΎΠ²ΠΎΠΌΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. ΠΠΎΠ³Π΄Π° ΠΌΠ΅ΡΠΎΠ΄ Π½Π°Ρ ΠΎΠ΄ΠΈΠ» ΡΠΎΠ²ΠΏΠ°Π΄Π΅Π½ΠΈΡ, ΡΠΎΠ³Π΄Π° ΠΎΠ½ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π» Π½ΠΎΠΌΠ΅Ρ ΠΈΠ½Π΄Π΅ΠΊΡΠ°, ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ΅ΡΠΎΠ΄ findIndex Π²Π΅ΡΠ½ΡΠ» ΠΈΠ½Π΄Π΅ΠΊΡΡ β JavaScript
ΠΡΠΎΠ±ΡΠ΅ΠΌ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΈΠ½Π΄Π΅ΠΊΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π½Π΅Ρ Π² ΠΌΠ°ΡΡΠΈΠ²Π΅
ΠΠ΅ΡΠΎΠ΄ findIndex Π½Π΅ Π½Π°ΡΡΠ» ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ β JavaScript
ΠΡΠ»ΠΈ Π² ΠΌΠ°ΡΡΠΈΠ²Π΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ?
ΠΠΎΠ±Π°Π²ΠΈΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΠΌΠ°ΡΡΠΈΠ²:
12 ΡΡΡΠΎΠΊ Π² ΠΌΠ°ΡΡΠΈΠ²Π΅ β JavaScript
Π’ΠΎΠ»ΡΠΊΠΎ ΠΈΠ½Π΄Π΅ΠΊΡ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΠΎΠ²ΠΏΠ°Π΄Π΅Π½ΠΈΡ β JavaScript
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ
findIndex() β ΠΌΠ΅ΡΠΎΠ΄ ΠΏΡΠΎΡΠΎΡΠΈΠΏΠΎΠ² ΠΎΠ±ΡΠ΅ΠΊΡΠ° Array
JavaScript-Π΄Π²ΠΈΠΆΠΊΠΈ: ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ? ΠΡ ΡΡΠ΅ΠΊΠ° Π²ΡΠ·ΠΎΠ²ΠΎΠ² Π΄ΠΎ ΠΏΡΠΎΠΌΠΈΡΠΎΠ² β (ΠΏΠΎΡΡΠΈ) Π²ΡΡ, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π·Π½Π°ΡΡ
ΠΡ ΠΊΠΎΠ³Π΄Π°-Π½ΠΈΠ±ΡΠ΄Ρ Π·Π°Π΄ΡΠΌΡΠ²Π°Π»ΠΈΡΡ, ΠΊΠ°ΠΊ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΡΠΈΡΠ°ΡΡ ΠΈ ΠΈΡΠΏΠΎΠ»Π½ΡΡΡ JavaScript-ΠΊΠΎΠ΄? ΠΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎ, Π½ΠΎ Π² ΡΡΠΎΠΌ ΠΏΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅, ΡΡΠΎ ΠΆΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΠΎΠ΄ ΠΊΠ°ΠΏΠΎΡΠΎΠΌ.
ΠΠ°ΡΠ½ΡΠΌ Π½Π°ΡΠ΅ ΠΏΡΡΠ΅ΡΠ΅ΡΡΠ²ΠΈΠ΅ Π² ΡΠ·ΡΠΊ Ρ ΡΠΊΡΠΊΡΡΡΠΈΠΈ Π² ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΌΠΈΡ JavaScript-Π΄Π²ΠΈΠΆΠΊΠΎΠ².
ΠΡΠΊΡΠΎΠΉΡΠ΅ ΠΊΠΎΠ½ΡΠΎΠ»Ρ Π² Chrome ΠΈ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡ Sources. ΠΡ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π΄Π΅Π»ΠΎΠ², ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ°ΠΌΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ Call Stack (Π² Firefox Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Call Stack, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΡΡΠ°Π²ΠΈΡΠ΅ Π±ΡΠ΅ΠΉΠΊΠΏΠΎΠΈΠ½Ρ Π² ΠΊΠΎΠ΄Π΅):
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Call Stack? ΠΠΎΡ ΠΎΠΆΠ΅, ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ, Π΄Π°ΠΆΠ΅ ΡΠ°Π΄ΠΈ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΏΠ°ΡΡ ΡΡΡΠΎΠΊ ΠΊΠΎΠ΄Π°. ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ JavaScript Π½Π΅ ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π² ΠΊΠΎΡΠΎΠ±ΠΊΠ΅ Ρ ΠΊΠ°ΠΆΠ΄ΡΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ. Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΡΠ΅Ρ ΠΈ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΡΠ΅Ρ Π½Π°Ρ JavaScript-ΠΊΠΎΠ΄ β ΡΡΠΎ JavaScript-Π΄Π²ΠΈΠΆΠΎΠΊ. Π‘Π°ΠΌΡΠΌΠΈ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌΠΈ ΡΠ²Π»ΡΡΡΡΡ V8, ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² Google Chrome ΠΈ Node.js, SpiderMonkey Π² Firefox, JavaScriptCore Π² Safari/WebKit.
Π‘Π΅Π³ΠΎΠ΄Π½Ρ JavaScript-Π΄Π²ΠΈΠΆΠΊΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ±ΠΎΠΉ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΡΠ΅ ΠΎΠ±ΡΠ°Π·ΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠΉ ΠΈΠ½ΠΆΠ΅Π½Π΅ΡΠΈΠΈ, ΠΈ Π±ΡΠ΄Π΅Ρ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΡΡΠΊΠ°Π·Π°ΡΡ ΠΎΠ±ΠΎ Π²ΡΠ΅Ρ Π°ΡΠΏΠ΅ΠΊΡΠ°Ρ . ΠΠ΄Π½Π°ΠΊΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΠ°Π±ΠΎΡΡ ΠΏΠΎ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΊΠΎΠ΄Π° Π΄Π΅Π»Π°ΡΡ Π΄Π»Ρ Π½Π°Ρ Π»ΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π΄Π²ΠΈΠΆΠΊΠΎΠ²: Call Stack (ΡΡΠ΅ΠΊ Π²ΡΠ·ΠΎΠ²ΠΎΠ²), Global Memory (Π³Π»ΠΎΠ±Π°Π»ΡΠ½Π°Ρ ΠΏΠ°ΠΌΡΡΡ) ΠΈ Execution Context (ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ). ΠΠΎΡΠΎΠ²Ρ Ρ Π½ΠΈΠΌΠΈ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ?
1. JavaScript-Π΄Π²ΠΈΠΆΠΊΠΈ ΠΈ Π³Π»ΠΎΠ±Π°Π»ΡΠ½Π°Ρ ΠΏΠ°ΠΌΡΡΡ
Π― Π³ΠΎΠ²ΠΎΡΠΈΠ», ΡΡΠΎ JavaScript ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΡΠ΅ΠΌΡΠΌ ΠΈ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΡΠ΅ΠΌΡΠΌ ΡΠ·ΡΠΊΠΎΠΌ. Π₯ΠΎΡΠΈΡΠ΅ Π²Π΅ΡΡΡΠ΅, Ρ ΠΎΡΠΈΡΠ΅ Π½Π΅Ρ, Π½ΠΎ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ JavaScript-Π΄Π²ΠΈΠΆΠΊΠΈ ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΡΡΡ Π²Π°Ρ ΠΊΠΎΠ΄ Π·Π° ΠΌΠΈΠΊΡΠΎΡΠ΅ΠΊΡΠ½Π΄Ρ Π΄ΠΎ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ.
ΠΠΎΠ»ΡΠ΅Π±ΡΡΠ²ΠΎ ΠΊΠ°ΠΊΠΎΠ΅-ΡΠΎ, Π΄Π°? ΠΡΠΎ Π²ΠΎΠ»ΡΠ΅Π±ΡΡΠ²ΠΎ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ JIT (Just in time compilation). ΠΠ½Π° ΡΠ°ΠΌΠ° ΠΏΠΎ ΡΠ΅Π±Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠ΅ΠΌΠΎΠΉ Π΄Π»Ρ ΠΎΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΡ, Π΄Π°ΠΆΠ΅ ΠΊΠ½ΠΈΠ³ΠΈ Π±ΡΠ΄Π΅Ρ ΠΌΠ°Π»ΠΎ, ΡΡΠΎΠ±Ρ ΠΎΠΏΠΈΡΠ°ΡΡ ΡΠ°Π±ΠΎΡΡ JIT. ΠΠΎ ΠΏΠΎΠΊΠ° ΡΡΠΎ ΠΌΡ ΠΏΡΠΎΠΏΡΡΡΠΈΠΌ ΡΠ΅ΠΎΡΠΈΡ ΠΈ ΡΠΎΡΡΠ΅Π΄ΠΎΡΠΎΡΠΈΠΌΡΡ Π½Π° ΡΠ°Π·Π΅ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½Π°.
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΡΡΠΎΡ ΠΊΠΎΠ΄:
ΠΠΎΠΏΡΡΡΠΈΠΌ, Ρ ΡΠΏΡΠΎΡΡ Π²Π°Ρ, ΠΊΠ°ΠΊ ΡΡΠΎΡ ΠΊΠΎΠ΄ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΡΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅? Π§ΡΠΎ Π²Ρ ΠΎΡΠ²Π΅ΡΠΈΡΠ΅? ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ: Β«Π±ΡΠ°ΡΠ·Π΅Ρ ΡΠΈΡΠ°Π΅Ρ ΠΊΠΎΠ΄Β» ΠΈΠ»ΠΈ Β«Π±ΡΠ°ΡΠ·Π΅Ρ ΠΈΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΠΊΠΎΠ΄Β». Π ΡΠ΅Π°Π»ΡΠ½ΠΎΡΡΠΈ Π²ΡΡ Π½Π΅ ΡΠ°ΠΊ ΠΏΡΠΎΡΡΠΎ. ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , ΠΊΠΎΠ΄ ΡΡΠΈΡΡΠ²Π°Π΅Ρ Π½Π΅ Π±ΡΠ°ΡΠ·Π΅Ρ, Π° Π΄Π²ΠΈΠΆΠΎΠΊ. JavaScript-Π΄Π²ΠΈΠΆΠΎΠΊ ΡΡΠΈΡΡΠ²Π°Π΅Ρ ΠΊΠΎΠ΄, ΠΈ ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ½ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΠ΅ΡΠ²ΡΡ ΡΡΡΠΎΠΊΡ, ΡΠΎ ΠΊΠ»Π°Π΄ΡΡ ΠΏΠ°ΡΡ ΡΡΡΠ»ΠΎΠΊ Π² Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΡ ΠΏΠ°ΠΌΡΡΡ.
ΠΠ»ΠΎΠ±Π°Π»ΡΠ½Π°Ρ ΠΏΠ°ΠΌΡΡΡ (ΠΊΠΎΡΠΎΡΡΡ ΡΠ°ΠΊΠΆΠ΅ Π½Π°Π·ΡΠ²Π°ΡΡ ΠΊΡΡΠ΅ΠΉ (heap)) β ΡΡΠΎ ΠΎΠ±Π»Π°ΡΡΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ JavaScript-Π΄Π²ΠΈΠΆΠΎΠΊ Ρ ΡΠ°Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΈ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ ΡΡΠ½ΠΊΡΠΈΠΉ. Π ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ ΠΏΡΠΎΡΠΈΡΠ°Π΅Ρ ΠΏΡΠΈΠ²Π΅Π΄ΡΠ½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΊΠΎΠ΄, ΡΠΎ Π² Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠΉ ΠΏΠ°ΠΌΡΡΠΈ ΠΏΠΎΡΠ²ΡΡΡΡ Π΄Π²Π° Π±ΠΈΠ½Π΄ΠΈΠ½Π³Π°:
Π Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΠΈΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»Π½ΠΈΡΡ Π½Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΡ:
Π§ΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄ΡΡ? Π ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄ΡΡ ΠΊΠΎΠ΅-ΡΡΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅. ΠΡΠΈ Π²ΡΠ·ΠΎΠ²Π΅ ΡΡΠ½ΠΊΡΠΈΠΈ JavaScript-Π΄Π²ΠΈΠΆΠΎΠΊ Π²ΡΠ΄Π΅Π»ΠΈΡ Π΄Π²Π° ΡΠ°Π·Π΄Π΅Π»Π°:
2. JavaScript-Π΄Π²ΠΈΠΆΠΊΠΈ: ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ? ΠΠ»ΠΎΠ±Π°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΈ ΡΡΠ΅ΠΊ Π²ΡΠ·ΠΎΠ²ΠΎΠ²
ΠΡ ΡΠ·Π½Π°Π»ΠΈ, ΠΊΠ°ΠΊ JavaScript-Π΄Π²ΠΈΠΆΠΎΠΊ ΡΠΈΡΠ°Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΈ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ ΡΡΠ½ΠΊΡΠΈΠΉ. ΠΠ½ΠΈ ΠΏΠΎΠΏΠ°Π΄Π°ΡΡ Π² Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΡ ΠΏΠ°ΠΌΡΡΡ (ΠΊΡΡΡ).
ΠΠΎ ΡΠ΅ΠΏΠ΅ΡΡ ΠΌΡ ΠΈΡΠΏΠΎΠ»Π½ΡΠ΅ΠΌ JavaScript-ΡΡΠ½ΠΊΡΠΈΡ, ΠΈ Π΄Π²ΠΈΠΆΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΠ± ΡΡΠΎΠΌ ΠΏΠΎΠ·Π°Π±ΠΎΡΠΈΡΡΡΡ. ΠΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ? Π£ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ JavaScript-Π΄Π²ΠΈΠΆΠΊΠ° Π΅ΡΡΡ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΡΡΠ΅ΠΊ Π²ΡΠ·ΠΎΠ²ΠΎΠ².
ΠΡΠΎ ΡΡΠ΅ΠΊΠΎΠ²Π°Ρ ΡΡΡΡΠΊΡΡΡΠ° Π΄Π°Π½Π½ΡΡ : ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠ³ΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ Π² Π½Π΅Ρ ΡΠ²Π΅ΡΡ Ρ, Π½ΠΎ ΠΎΠ½ΠΈ Π½Π΅ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΊΠ»ΡΡΠ°ΡΡΡΡ ΠΈΠ· ΡΡΡΡΠΊΡΡΡΡ, ΠΏΠΎΠΊΠ° Π½Π°Π΄ Π½ΠΈΠΌΠΈ Π΅ΡΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΊ ΡΡΡΡΠΎΠ΅Π½Ρ JavaScript-ΡΡΠ½ΠΊΡΠΈΠΈ. ΠΡΠΈ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ ΠΎΠ½ΠΈ Π½Π΅ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠΊΠΈΠ½ΡΡΡ ΡΡΠ΅ΠΊ Π²ΡΠ·ΠΎΠ²ΠΎΠ², Π΅ΡΠ»ΠΈ Π² Π½ΡΠΌ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ Π΄ΡΡΠ³Π°Ρ ΡΡΠ½ΠΊΡΠΈΡ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π½Π° ΡΡΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠ° ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΏΠΎΠ½ΡΡΡ ΡΡΠ²Π΅ΡΠΆΠ΄Π΅Π½ΠΈΠ΅ Β«JavaScript ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ΄Π½ΠΎΠΏΠΎΡΠΎΡΠ½ΡΠΌΒ».
ΠΠΎ Π²Π΅ΡΠ½ΡΠΌΡΡ ΠΊ Π½Π°ΡΠ΅ΠΌΡ ΠΏΡΠΈΠΌΠ΅ΡΡ. ΠΡΠΈ Π²ΡΠ·ΠΎΠ²Π΅ ΡΡΠ½ΠΊΡΠΈΠΈ Π΄Π²ΠΈΠΆΠΎΠΊ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π΅Ρ Π² ΡΡΠ΅ΠΊ Π²ΡΠ·ΠΎΠ²ΠΎΠ²:
ΠΠ½Π΅ Π½ΡΠ°Π²ΠΈΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΡΠ΅ΠΊ Π²ΡΠ·ΠΎΠ²ΠΎΠ² Π² Π²ΠΈΠ΄Π΅ ΡΡΠΎΠΏΠΊΠΈ ΡΠΈΠΏΡΠΎΠ² Pringles. ΠΡ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ ΡΡΠ΅ΡΡΡ ΡΠΈΠΏΡ ΡΠ½ΠΈΠ·Ρ ΡΡΠΎΠΏΠΊΠΈ, ΠΏΠΎΠΊΠ° Π½Π΅ ΡΡΠ΅Π΄ΠΈΠΌ ΡΠ΅, ΡΡΠΎ Π»Π΅ΠΆΠ°Ρ ΡΠ²Π΅ΡΡ Ρ. Π ΡΡΠ°ΡΡΡΡ, Π½Π°ΡΠ° ΡΡΠ½ΠΊΡΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎΠΉ: ΡΡΠΎ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΡΠΌΠ½ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΡΡΡΠΎ Π²ΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ.
Π ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ Π²ΡΠ΅ΠΌΡ Π΄Π²ΠΈΠΆΠΎΠΊ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅Ρ Π² ΠΏΠ°ΠΌΡΡΠΈ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, ΡΡΠΎ Π³Π»ΠΎΠ±Π°Π»ΡΠ½Π°Ρ ΡΡΠ΅Π΄Π°, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΈΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ JavaScript-ΠΊΠΎΠ΄. ΠΠΎΡ ΠΊΠ°ΠΊ ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ:
ΠΡΠ΅Π΄ΡΡΠ°Π²ΡΡΠ΅ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π² Π²ΠΈΠ΄Π΅ ΠΌΠΎΡΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΠ΅ JavaScript-ΡΡΠ½ΠΊΡΠΈΠΈ ΠΏΠ»Π°Π²Π°ΡΡ, ΡΠ»ΠΎΠ²Π½ΠΎ ΡΡΠ±Ρ. ΠΠ°ΠΊ ΠΌΠΈΠ»ΠΎ! ΠΠΎ ΡΡΠΎ Π»ΠΈΡΡ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π° Π²ΡΠ΅ΠΉ ΠΈΡΡΠΎΡΠΈΠΈ. Π§ΡΠΎ, Π΅ΡΠ»ΠΈ Π½Π°ΡΠ° ΡΡΠ½ΠΊΡΠΈΡ ΠΈΠΌΠ΅Π΅Ρ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΈΠ»ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ?
ΠΠ°ΠΆΠ΅ Π² ΠΏΡΠΎΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅, JavaScript-Π΄Π²ΠΈΠΆΠΎΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ:
Π ΡΠ΄ΠΎΠΌ Ρ pow ΠΏΠΎΡΠ²ΠΈΡΡΡ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, Π²Π½ΡΡΡΠΈ Π·Π΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·Π΄Π΅Π»Π°-ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ°, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ Π²Π½ΡΡΡΠΈ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ. ΠΡΠ΅Π΄ΡΡΠ°Π²ΡΡΠ΅ ΡΠ°ΠΊΠΆΠ΅, ΠΊΠ°ΠΊ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ Π²Π½ΡΡΡΠΈ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ Π΄Π²ΠΈΠΆΠΎΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ. ΠΡΠ΅ ΡΡΠΈ ΡΠ°Π·Π΄Π΅Π»Ρ-ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΈ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΠΎΡΠ΅Π½Ρ Π±ΡΡΡΡΠΎ! ΠΠ°ΠΊ ΠΌΠ°ΡΡΡΡΠΊΠ°!
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ΅ΠΏΠ΅ΡΡ Π²Π΅ΡΠ½ΡΠΌΡΡ ΠΊ ΠΈΡΡΠΎΡΠΈΠΈ Ρ ΠΎΠ΄Π½ΠΎΠΏΠΎΡΠΎΡΠ½ΠΎΡΡΡΡ. Π§ΡΠΎ ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ?
3. JavaScript ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ΄Π½ΠΎΠΏΠΎΡΠΎΡΠ½ΡΠΌ, ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π·Π°Π±Π°Π²Π½ΡΠ΅ ΠΈΡΡΠΎΡΠΈΠΈ
ΠΡ Π³ΠΎΠ²ΠΎΡΠΈΠΌ, ΡΡΠΎ JavaScript ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ΄Π½ΠΎΠΏΠΎΡΠΎΡΠ½ΡΠΌ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π½Π°ΡΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ Π»ΠΈΡΡ ΠΎΠ΄ΠΈΠ½ ΡΡΠ΅ΠΊ Π²ΡΠ·ΠΎΠ²ΠΎΠ². ΠΠ°ΠΏΠΎΠΌΠ½Ρ, ΡΡΠΎ ΡΡΠ½ΠΊΡΠΈΠΈ Π½Π΅ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠΊΠΈΠ½ΡΡΡ ΡΡΠ΅ΠΊ Π²ΡΠ·ΠΎΠ²ΠΎΠ², Π΅ΡΠ»ΠΈ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΎΠΆΠΈΠ΄Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ.
ΠΡΠΎ Π½Π΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°, Π΅ΡΠ»ΠΈ ΠΌΡ ΡΠ°Π±ΠΎΡΠ°Π΅ΠΌ Ρ ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ. Π ΠΏΡΠΈΠΌΠ΅ΡΡ, ΡΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄Π²ΡΡ ΡΠΈΡΠ΅Π» ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΠΌ ΠΈ Π²ΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ Π·Π° ΠΌΠΈΠΊΡΠΎΡΠ΅ΠΊΡΠ½Π΄Ρ. Π ΡΡΠΎ Π½Π°ΡΡΡΡ ΡΠ΅ΡΠ΅Π²ΡΡ Π²ΡΠ·ΠΎΠ²ΠΎΠ² ΠΈ Π΄ΡΡΠ³ΠΈΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠΉ Ρ Π²Π½Π΅ΡΠ½ΠΈΠΌ ΠΌΠΈΡΠΎΠΌ?
Π ΡΡΠ°ΡΡΡΡ, JavaScript-Π΄Π²ΠΈΠΆΠΊΠΈ ΡΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°Π½Ρ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎ. ΠΠ°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»Π½ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ Π·Π° ΡΠ°Π·, Π±ΠΎΠ»Π΅Π΅ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»Π½ΡΡΡΡΡ Π²Π½Π΅ΡΠ½Π΅ΠΉ ΡΡΡΠ½ΠΎΡΡΡΡ β Π² Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΡΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ. ΠΠ± ΡΡΠΎΠΌ ΠΌΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ Π½ΠΈΠΆΠ΅.
Π ΡΠΎ ΠΆΠ΅ Π²ΡΠ΅ΠΌΡ Π²Ρ Π·Π½Π°Π΅ΡΠ΅, ΡΡΠΎ ΠΊΠΎΠ³Π΄Π° Π±ΡΠ°ΡΠ·Π΅Ρ Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ JavaScript-ΠΊΠΎΠ΄, Π΄Π²ΠΈΠΆΠΎΠΊ ΡΡΠΈΡΡΠ²Π°Π΅Ρ ΡΡΠΎΡ ΠΊΠΎΠ΄ ΡΡΡΠΎΠΊΠ° Π·Π° ΡΡΡΠΎΠΊΠΎΠΉ ΠΈ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ°Π³ΠΈ:
4. ΠΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΠΉ JavaScript, ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΠΎΠ±ΡΠ°ΡΠ½ΡΡ Π²ΡΠ·ΠΎΠ²ΠΎΠ² ΠΈ ΡΠΈΠΊΠ» ΡΠΎΠ±ΡΡΠΈΠΉ
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠΉ ΠΏΠ°ΠΌΡΡΠΈ, ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΈ ΡΡΠ΅ΠΊΡ Π²ΡΠ·ΠΎΠ²ΠΎΠ² ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΠΉ JavaScript-ΠΊΠΎΠ΄ ΠΈΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ Π² Π½Π°ΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . ΠΠΎ ΠΌΡ ΠΊΠΎΠ΅ ΠΎ ΡΡΠΌ Π·Π°Π±ΡΠ»ΠΈ. Π§ΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ, Π΅ΡΠ»ΠΈ Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»Π½ΠΈΡΡ ΠΊΠ°ΠΊΡΡ-Π½ΠΈΠ±ΡΠ΄Ρ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΡ ΡΡΠ½ΠΊΡΠΈΡ?
ΠΠΎΠ΄ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ Ρ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ Π²Π½Π΅ΡΠ½ΠΈΠΌ ΠΌΠΈΡΠΎΠΌ, Π΄Π»Ρ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡΡΡ ΠΊΠ°ΠΊΠΎΠ΅-ΡΠΎ Π²ΡΠ΅ΠΌΡ. ΠΡΠ·ΠΎΠ² REST API ΠΈΠ»ΠΈ ΡΠ°ΠΉΠΌΠ΅ΡΠ° β Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½Ρ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π½Π° ΠΈΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΌΠΎΠ³ΡΡ ΡΠΉΡΠΈ ΡΠ΅ΠΊΡΠ½Π΄Ρ. ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΈΠΌΠ΅ΡΡΠΈΠΌΡΡ Π² Π΄Π²ΠΈΠΆΠΊΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΡΠ°ΠΊΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ Π±Π΅Π· Π±Π»ΠΎΠΊΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΡΠ΅ΠΊΠ° Π²ΡΠ·ΠΎΠ²ΠΎΠ² ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠ΅ Π·Π°Π±ΡΠ²Π°ΠΉΡΠ΅, ΡΡΠ΅ΠΊ Π²ΡΠ·ΠΎΠ²ΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»Π½ΡΡΡ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½Ρ ΡΡΠ½ΠΊΡΠΈΡ, ΠΈ Π΄Π°ΠΆΠ΅ ΠΎΠ΄Π½Π° Π±Π»ΠΎΠΊΠΈΡΡΡΡΠ°Ρ ΡΡΠ½ΠΊΡΠΈΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΠΊΠ²Π°Π»ΡΠ½ΠΎ ΠΎΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅Ρ. Π ΡΡΠ°ΡΡΡΡ, JavaScript-Π΄Π²ΠΈΠΆΠΊΠΈ Β«ΡΠΌΠ½ΡΒ», ΠΈ Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΏΠΎΠΌΠΎΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΌΠΎΠ³ΡΡ ΡΠ°ΠΊΠΈΠ΅ Π²Π΅ΡΠΈ ΠΎΡΡΠΎΡΡΠΈΡΠΎΠ²ΡΠ²Π°ΡΡ.
ΠΠΎΠ³Π΄Π° ΠΌΡ ΠΈΡΠΏΠΎΠ»Π½ΡΠ΅ΠΌ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΡ ΡΡΠ½ΠΊΡΠΈΡ, Π±ΡΠ°ΡΠ·Π΅Ρ Π±Π΅ΡΡΡ Π΅Ρ ΠΈ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ Π΄Π»Ρ Π½Π°Ρ. ΠΠΎΠ·ΡΠΌΡΠΌ ΡΠ°ΠΊΠΎΠΉ ΡΠ°ΠΉΠΌΠ΅Ρ:
Π§Π΅ΡΠ΅Π· 10 ΡΠ΅ΠΊΡΠ½Π΄ Π±ΡΠ°ΡΠ·Π΅Ρ Π±Π΅ΡΡΡ callback-ΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΡΡ ΠΌΡ Π΅ΠΌΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π»ΠΈ, ΠΈ ΠΊΠ»Π°Π΄ΡΡ Π΅Ρ Π² ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΠΎΠ±ΡΠ°ΡΠ½ΡΡ Π²ΡΠ·ΠΎΠ²ΠΎΠ². Π Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π² JavaScript-Π΄Π²ΠΈΠΆΠΊΠ΅ ΠΏΠΎΡΠ²ΠΈΠ»ΠΎΡΡ Π΅ΡΡ Π΄Π²Π° ΡΠ°Π·Π΄Π΅Π»Π°-ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ°. ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΡΡΠΎΡ ΠΊΠΎΠ΄:
Π’Π΅ΠΏΠ΅ΡΡ Π½Π°ΡΠ° ΡΡ Π΅ΠΌΠ° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊ:
setTimeout ΠΈΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. Π§Π΅ΡΠ΅Π· 10 ΡΠ΅ΠΊΡΠ½Π΄ ΡΠ°ΠΉΠΌΠ΅Ρ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΠΈ callback-ΡΡΠ½ΠΊΡΠΈΡ Π³ΠΎΡΠΎΠ²Π° ΠΊ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ. ΠΠΎ Π΄Π»Ρ Π½Π°ΡΠ°Π»Π° ΠΎΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Π° ΠΏΡΠΎΠΉΡΠΈ ΡΠ΅ΡΠ΅Π· ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΠΎΠ±ΡΠ°ΡΠ½ΡΡ Π²ΡΠ·ΠΎΠ²ΠΎΠ². ΠΡΠΎ ΡΡΡΡΠΊΡΡΡΠ° Π΄Π°Π½Π½ΡΡ Π² Π²ΠΈΠ΄Π΅ ΠΎΡΠ΅ΡΠ΅Π΄ΠΈ, ΠΈ, ΠΊΠ°ΠΊ ΡΠ²ΠΈΠ΄Π΅ΡΠ΅Π»ΡΡΡΠ²ΡΠ΅Ρ Π΅Ρ Π½Π°Π·Π²Π°Π½ΠΈΠ΅, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ΅Π½Π½ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΠΈΠ· ΡΡΠ½ΠΊΡΠΈΠΉ.
ΠΠ°ΠΆΠ΄Π°Ρ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½Π°Ρ ΡΡΠ½ΠΊΡΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΏΡΠΎΠΉΡΠΈ ΡΠ΅ΡΠ΅Π· ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΠΎΠ±ΡΠ°ΡΠ½ΡΡ Π²ΡΠ·ΠΎΠ²ΠΎΠ², ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΏΠΎΠΏΠ°ΡΡΡ Π² ΡΡΠ΅ΠΊ Π²ΡΠ·ΠΎΠ²ΠΎΠ². ΠΠΎ ΠΊΡΠΎ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ ΡΡΠ½ΠΊΡΠΈΠΈ Π΄Π°Π»ΡΡΠ΅? ΠΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ ΡΠΈΠΊΠ» ΡΠΎΠ±ΡΡΠΈΠΉ.
ΠΠΎΠΊΠ° ΡΡΠΎ ΡΠΈΠΊΠ» ΡΠΎΠ±ΡΡΠΈΠΉ Π·Π°Π½ΠΈΠΌΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΈΠΌ: ΠΏΡΠΎΠ²Π΅ΡΡΠ΅Ρ, ΠΏΡΡΡ Π»ΠΈ ΡΡΠ΅ΠΊ Π²ΡΠ·ΠΎΠ²ΠΎΠ². ΠΡΠ»ΠΈ Π² ΠΎΡΠ΅ΡΠ΅Π΄ΠΈ ΠΎΠ±ΡΠ°ΡΠ½ΡΡ Π²ΡΠ·ΠΎΠ²ΠΎΠ² Π΅ΡΡΡ ΠΊΠ°ΠΊΠ°Ρ-Π½ΠΈΠ±ΡΠ΄Ρ ΡΡΠ½ΠΊΡΠΈΡ ΠΈ Π΅ΡΠ»ΠΈ ΡΡΠ΅ΠΊ Π²ΡΠ·ΠΎΠ²ΠΎΠ² ΡΠ²ΠΎΠ±ΠΎΠ΄Π΅Π½, ΡΠΎΠ³Π΄Π° ΠΏΠΎΡΠ° ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡ callback Π² ΡΡΠ΅ΠΊ Π²ΡΠ·ΠΎΠ²ΠΎΠ².
ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΡΡΠ½ΠΊΡΠΈΡ ΡΡΠΈΡΠ°Π΅ΡΡΡ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠΉ. Π’Π°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΎΠ±ΡΠ°Ρ ΡΡ Π΅ΠΌΠ° ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΈ ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° JavaScript-Π΄Π²ΠΈΠΆΠΊΠΎΠΌ:
ΠΠΎΠΌΠ½ΠΈΡΠ΅: Π±ΡΠ°ΡΠ·Π΅ΡΠ½ΡΠ΅ API, ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΠΎΠ±ΡΠ°ΡΠ½ΡΡ Π²ΡΠ·ΠΎΠ²ΠΎΠ² ΠΈ ΡΠΈΠΊΠ» ΡΠΎΠ±ΡΡΠΈΠΉ ΡΠ²Π»ΡΡΡΡΡ ΡΡΠΎΠ»ΠΏΠ°ΠΌΠΈ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎΠ³ΠΎ JavaScript.
Π Π΅ΡΠ»ΠΈ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π»ΡΠ±ΠΎΠΏΡΡΠ½ΠΎΠ΅ Π²ΠΈΠ΄Π΅ΠΎ Β«What the heck is the event loop anywayΒ» Π€ΠΈΠ»ΠΈΠΏΠ° Π ΠΎΠ±Π΅ΡΡΡΠ°. ΠΡΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π»ΡΡΡΠΈΡ ΠΎΠ±ΡΡΡΠ½Π΅Π½ΠΈΠΉ ΡΠΈΠΊΠ»Π° ΡΠΎΠ±ΡΡΠΈΠΉ.
ΠΠΎ ΠΌΡ Π΅ΡΡ Π½Π΅ Π·Π°ΠΊΠΎΠ½ΡΠΈΠ»ΠΈ Ρ ΡΠ΅ΠΌΠΎΠΉ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎΠ³ΠΎ JavaScript. Π ΡΠ»Π΅Π΄ΡΡΡΠΈΡ Π³Π»Π°Π²Π°Ρ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ES6-ΠΏΡΠΎΠΌΠΈΡΡ.
5. Callback hell ΠΈ ES6-ΠΏΡΠΎΠΌΠΈΡΡ
Callback-ΡΡΠ½ΠΊΡΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π² JavaScript Π²Π΅Π·Π΄Π΅, ΠΈ Π² ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎΠΌ, ΠΈ Π² Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄:
Π’Π΅ΡΠΌΠΈΠ½ Callback hell Π² JavaScript ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΊ Β«ΡΡΠΈΠ»ΡΒ» ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΌ callbackβΠΈ Π²ΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡ Π² Π΄ΡΡΠ³ΠΈΠ΅ callbackβΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π»ΠΎΠΆΠ΅Π½Ρ Π² Π΄ΡΡΠ³ΠΈΠ΅ callbackβΠΈβ¦ ΠΠ·-Π·Π° Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎΠΉ ΠΏΡΠΈΡΠΎΠ΄Ρ JavaScript-ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΡ ΡΠΆΠ΅ Π΄Π°Π²Π½ΠΎ ΠΏΠΎΠΏΠ°Π΄Π°ΡΡ Π² ΡΡΡ Π»ΠΎΠ²ΡΡΠΊΡ.
ΠΡΠ»ΠΈ ΡΠ΅ΡΡΠ½ΠΎ, Ρ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Π» Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΏΠΈΡΠ°ΠΌΠΈΠ΄Ρ callbackβΠΎΠ². ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Ρ ΡΠ΅Π½Ρ ΡΠΈΡΠ°Π±Π΅Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ΄ ΠΈ Π²ΡΠ΅Π³Π΄Π° ΡΡΠ°ΡΠ°ΡΡΡ ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π΅Π³ΠΎ ΠΏΡΠΈΠ½ΡΠΈΠΏΠΎΠ². ΠΡΠ»ΠΈ Π²Ρ ΠΏΠΎΠΏΠ°Π»ΠΈ Π² callback hell, ΡΡΠΎ Π³ΠΎΠ²ΠΎΡΠΈΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ Π²Π°ΡΠ° ΡΡΠ½ΠΊΡΠΈΡ Π΄Π΅Π»Π°Π΅Ρ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΌΠ½ΠΎΠ³ΠΎ.
Π― Π½Π΅ Π±ΡΠ΄Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ Π³ΠΎΠ²ΠΎΡΠΈΡΡ ΠΎ callback hell, Π΅ΡΠ»ΠΈ Π²Π°ΠΌ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, ΡΠΎ ΡΡ ΠΎΠ΄ΠΈΡΠ΅ Π½Π° ΡΠ°ΠΉΡ callbackhell.com, ΡΠ°ΠΌ ΡΡΠ° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Π½Π° ΠΈ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½Ρ ΡΠ°Π·Π½ΡΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ. Π ΠΌΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ ES6-ΠΏΡΠΎΠΌΠΈΡΠ°Ρ . ΠΡΠΎ Π°Π΄Π΄ΠΎΠ½ ΠΊ JavaScript, ΠΏΡΠΈΠ·Π²Π°Π½Π½ΠΎΠ΅ ΡΠ΅ΡΠΈΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π°Π΄Π° ΠΎΠ±ΡΠ°ΡΠ½ΡΡ Π²ΡΠ·ΠΎΠ²ΠΎΠ². ΠΠΎ ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Β«ΠΏΡΠΎΠΌΠΈΡΡΒ»?
ΠΡΠΎΠΌΠΈΡ Π² JavaScript β ΡΡΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π±ΡΠ΄ΡΡΠ΅Π³ΠΎ ΡΠΎΠ±ΡΡΠΈΡ. ΠΡΠΎΠΌΠΈΡ ΠΌΠΎΠΆΠ΅Ρ Π·Π°Π²Π΅ΡΡΠΈΡΡΡΡ ΡΡΠΏΠ΅ΡΠ½ΠΎ, ΠΈΠ»ΠΈ Π½Π° ΠΆΠ°ΡΠ³ΠΎΠ½Π΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΠΎΠ² ΠΏΡΠΎΠΌΠΈΡ Π±ΡΠ΄Π΅Ρ Β«ΡΠ°Π·ΡΠ΅ΡΡΠ½Β» (resolved, ΠΈΡΠΏΠΎΠ»Π½Π΅Π½). ΠΠΎ Π΅ΡΠ»ΠΈ ΠΏΡΠΎΠΌΠΈΡ Π·Π°Π²Π΅ΡΡΠ°Π΅ΡΡΡ Ρ ΠΎΡΠΈΠ±ΠΊΠΎΠΉ, ΡΠΎ ΠΌΡ Π³ΠΎΠ²ΠΎΡΠΈΠΌ, ΡΡΠΎ ΠΎΠ½ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Β«ΠΎΡΠΊΠ»ΠΎΠ½ΡΠ½Β» (rejected). Π’Π°ΠΊΠΆΠ΅ Ρ ΠΏΡΠΎΠΌΠΈΡΠΎΠ² Π΅ΡΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: ΠΊΠ°ΠΆΠ΄ΡΠΉ Π½ΠΎΠ²ΡΠΉ ΠΏΡΠΎΠΌΠΈΡ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Β«ΠΎΠΆΠΈΠ΄Π°Π½ΠΈΡ ΡΠ΅ΡΠ΅Π½ΠΈΡΒ» (pending). ΠΠΎΠΆΠ½ΠΎ Π»ΠΈ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΏΡΠΎΠΌΠΈΡ? ΠΠ°. ΠΠ± ΡΡΠΎΠΌ ΠΌΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ Π³Π»Π°Π²Π΅.
6. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈ ΡΠ°Π±ΠΎΡΠ° Ρ JavaScript-ΠΏΡΠΎΠΌΠΈΡΠ°ΠΌΠΈ
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, resolve β ΡΡΠΎ ΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΡΡ ΠΌΡ Π²ΡΠ·ΡΠ²Π°Π΅ΠΌ, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠΌΠΈΡ ΡΡΠΏΠ΅ΡΠ½ΠΎ Π·Π°Π²Π΅ΡΡΠΈΠ»ΡΡ. Π reject ΡΠΎΠ·Π΄Π°ΡΡ ΠΎΡΠΊΠ»ΠΎΠ½ΡΠ½Π½ΡΠΉ ΠΏΡΠΎΠΌΠΈΡ:
Π‘Π΅ΠΉΡΠ°Ρ ΠΏΡΠΎΠΌΠΈΡΡ Π½Π΅ Π²ΡΠ³Π»ΡΠ΄ΡΡ ΡΠ°ΠΊΠΈΠΌΠΈ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌΠΈ, Π²Π΅ΡΠ½ΠΎ? ΠΡΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ Π²ΡΠ²ΠΎΠ΄ΡΡ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΊΠΎΠ΅-ΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ. Π ΡΠ°Π·ΡΠ΅ΡΡΠ½Π½ΡΠ΅, ΠΎΡ ΠΎΡΠΊΠ»ΠΎΠ½ΡΠ½Π½ΡΠ΅ ΠΏΡΠΎΠΌΠΈΡΡ ΠΌΠΎΠ³ΡΡ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡ Π΄Π°Π½Π½ΡΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΠ°ΠΊ JavaScript-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΈ ΠΏΠΎΡΡΠ΅Π±ΠΈΡΠ΅Π»Ρ ΡΡΠΆΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° Π²Ρ ΠΏΠΎ Π±ΠΎΠ»ΡΡΠ΅ΠΉ ΡΠ°ΡΡΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΡΠ΅ΡΠ΅ Ρ Π²Π½Π΅ΡΠ½ΠΈΠΌΠΈ ΠΏΡΠΎΠΌΠΈΡΠ°ΠΌΠΈ. Π‘ΠΎΠ·Π΄Π°ΡΠ΅Π»ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΎΠ±ΡΡΡΡΠ²Π°ΡΡ legacy-ΠΊΠΎΠ΄ Π² ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΎΡ ΠΏΡΠΎΠΌΠΈΡΠΎΠ², ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
Π ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΌΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°ΡΡ ΠΈ ΡΠ°Π·ΡΠ΅ΡΠΈΡΡ ΠΏΡΠΎΠΌΠΈΡ, Π²ΡΠ·Π²Π°Π² Promise.resolve() :
7. ΠΠ±ΡΠ°Π±ΠΎΡΠΊΠ° ΠΎΡΠΈΠ±ΠΎΠΊ Π² ES6-ΠΏΡΠΎΠΌΠΈΡΠ°Ρ
ΠΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΠΎΡΠΈΠ±ΠΊΠΈ Π² JavaScript Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ»ΠΎ ΠΏΡΠΎΡΡΠΎ, ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ Π² ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅. ΠΠ·Π³Π»ΡΠ½ΠΈΡΠ΅ Π½Π° ΠΏΡΠΈΠΌΠ΅Ρ:
Π ΡΡΠ°ΡΡΡΡ, Ρ ΠΏΡΠΎΠΌΠΈΡΠ°ΠΌΠΈ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ, ΡΠ»ΠΎΠ²Π½ΠΎ ΠΎΠ½ΠΈ ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΠ΅. Π ΠΏΡΠΎΡΠ»ΠΎΠΉ Π³Π»Π°Π²Π΅ Ρ Π³ΠΎΠ²ΠΎΡΠΈΠ», ΡΡΠΎ Π²ΡΠ·ΠΎΠ² reject ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΠΎΡΠΊΠ»ΠΎΠ½Π΅Π½ΠΈΡ ΠΏΡΠΎΠΌΠΈΡΠ°:
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈ ΠΎΡΠΊΠ»ΠΎΠ½Π΅Π½ΠΈΡ ΠΏΡΠΎΠΌΠΈΡΠ° Π² Π½ΡΠΆΠ½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠ·ΡΠ²Π°ΡΡ Promise.reject() :
8. ΠΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΎΡΡ ES6-ΠΏΡΠΎΠΌΠΈΡΠΎΠ²: Promise.all, Promise.allSettled, Promise.any ΠΈ Π΄ΡΡΠ³ΠΈΠ΅
ΠΡΠΎΠΌΠΈΡΡ Π½Π΅ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Ρ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ ΠΏΠΎ ΠΎΠ΄ΠΈΠ½ΠΎΡΠΊΠ΅. Promise API ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΡΡΠ΄ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² Π΄Π»Ρ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠΎΠΌΠΈΡΠΎΠ². ΠΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ°ΠΌΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ β Promise.all, ΠΎΠ½ Π±Π΅ΡΡΡ ΠΌΠ°ΡΡΠΈΠ² ΠΈΠ· ΠΏΡΠΎΠΌΠΈΡΠΎΠ² ΠΈ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ ΠΎΠ΄ΠΈΠ½ ΠΏΡΠΎΠΌΠΈΡ. Π’ΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Π² ΡΠΎΠΌ, ΡΡΠΎ Promise.all ΠΎΡΠΊΠ»ΠΎΠ½ΡΠ΅ΡΡΡ, Π΅ΡΠ»ΠΈ ΠΎΡΠΊΠ»ΠΎΠ½Π΅Π½ Ρ ΠΎΡΡ Π±Ρ ΠΎΠ΄ΠΈΠ½ ΠΏΡΠΎΠΌΠΈΡ Π² ΠΌΠ°ΡΡΠΈΠ²Π΅.
Promise.race ΡΠ°Π·ΡΠ΅ΡΠ°Π΅Ρ ΠΈΠ»ΠΈ ΠΎΡΠΊΠ»ΠΎΠ½ΡΠ΅Ρ, ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΏΡΠΎΠΌΠΈΡΠΎΠ² Π² ΠΌΠ°ΡΡΠΈΠ²Π΅ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΡΡΠ°ΡΡΡ.
9. ES6-ΠΏΡΠΎΠΌΠΈΡΡ ΠΈ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΠΌΠΈΠΊΡΠΎΠ·Π°Π΄Π°Ρ
ΠΡΠ»ΠΈ ΠΏΠΎΠΌΠ½ΠΈΡΠ΅ ΠΈΠ· ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΉ Π³Π»Π°Π²Ρ, ΠΊΠ°ΠΆΠ΄Π°Ρ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½Π°Ρ callback-ΡΡΠ½ΠΊΡΠΈΡ Π² JavaScript ΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ Π² ΠΎΡΠ΅ΡΠ΅Π΄ΠΈ ΠΎΠ±ΡΠ°ΡΠ½ΡΡ Π²ΡΠ·ΠΎΠ²ΠΎΠ², ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΏΠΎΠΏΠ°Π΄Π°Π΅Ρ Π² ΡΡΠ΅ΠΊ Π²ΡΠ·ΠΎΠ²ΠΎΠ². ΠΠΎ Ρ callback-ΡΡΠ½ΠΊΡΠΈΠΉ, ΠΏΠ΅ΡΠ΅Π΄Π°Π½Π½ΡΡ Π² ΠΏΡΠΎΠΌΠΈΡ, ΠΈΠ½Π°Ρ ΡΡΠ΄ΡΠ±Π°: ΠΎΠ½ΠΈ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡΡΡ ΠΎΡΠ΅ΡΠ΅Π΄ΡΡ ΠΌΠΈΠΊΡΠΎΠ·Π°Π΄Π°Ρ (Microtask Queue), Π° Π½Π΅ ΠΎΡΠ΅ΡΠ΅Π΄ΡΡ Π·Π°Π΄Π°Ρ.
Π Π·Π΄Π΅ΡΡ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΡΡ Π²Π½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ: ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΠΌΠΈΠΊΡΠΎΠ·Π°Π΄Π°Ρ ΠΏΡΠ΅Π΄ΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΎΡΠ΅ΡΠ΅Π΄ΠΈ Π²ΡΠ·ΠΎΠ²ΠΎΠ². ΠΠ±ΡΠ°ΡΠ½ΡΠ΅ Π²ΡΠ·ΠΎΠ²Ρ ΠΈΠ· ΠΎΡΠ΅ΡΠ΅Π΄ΠΈ ΠΌΠΈΠΊΡΠΎΠ·Π°Π΄Π°Ρ ΠΈΠΌΠ΅ΡΡ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ, ΠΊΠΎΠ³Π΄Π° ΡΠΈΠΊΠ» ΡΠΎΠ±ΡΡΠΈΠΉ ΠΏΡΠΎΠ²Π΅ΡΡΠ΅Ρ, Π³ΠΎΡΠΎΠ²Ρ Π»ΠΈ Π½ΠΎΠ²ΡΠ΅ callbackβΠΈ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ Π² ΡΡΠ΅ΠΊ Π²ΡΠ·ΠΎΠ²ΠΎΠ².
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΡΡΠ° ΠΌΠ΅Ρ Π°Π½ΠΈΠΊΠ° ΠΎΠΏΠΈΡΠ°Π½Π° ΠΠΆΠ΅ΠΉΠΊΠΎΠΌ ΠΡΡΠΈΠ±Π°Π»ΡΠ΄ΠΎΠΌ Π² Tasks, microtasks, queues and schedules, Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΡΠΈΠ²ΠΎ.
10. JavaScript-Π΄Π²ΠΈΠΆΠΊΠΈ: ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ? ΠΡΠΈΠ½Ρ ΡΠΎΠ½Π½Π°Ρ ΡΠ²ΠΎΠ»ΡΡΠΈΡ: ΠΎΡ ΠΏΡΠΎΠΌΠΈΡΠΎΠ² Π΄ΠΎ async/await
async/await β Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΡΡΠΈΠ»ΠΈΡΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΡΠ»ΡΡΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ Π½Π°Π·ΡΠ²Π°Π΅ΠΌ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΡΠ°Ρ Π°ΡΠΎΠΌ. async/await Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅Ρ JavaScript (Π½Π΅ Π·Π°Π±ΡΠ²Π°ΠΉΡΠ΅, ΡΠ·ΡΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΎΠ±ΡΠ°ΡΠ½ΠΎ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌ ΡΠΎ ΡΡΠ°ΡΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ ΠΈ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π»ΠΎΠΌΠ°ΡΡ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄). ΠΡΠΎ Π»ΠΈΡΡ Π½ΠΎΠ²ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΏΡΠΎΠΌΠΈΡΠΎΠ². Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅Ρ. ΠΡΡΠ΅ ΠΌΡ ΡΠΆΠ΅ ΡΠΎΡ ΡΠ°Π½ΠΈΠ»ΠΈ ΠΏΡΠΎΠΌΠΈΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΌ then :
ΠΡΠ³Π»ΡΠ΄ΠΈΡ Π·Π΄ΡΠ°Π²ΠΎ, Π²Π΅ΡΠ½ΠΎ? ΠΠ°Π±Π°Π²Π½ΠΎ, ΡΡΠΎ async-ΡΡΠ½ΠΊΡΠΈΡ Π²ΡΠ΅Π³Π΄Π° Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ ΠΏΡΠΎΠΌΠΈΡ, ΠΈ Π½ΠΈΠΊΡΠΎ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π΅ΠΉ Π² ΡΡΠΎΠΌ ΠΏΠΎΠΌΠ΅ΡΠ°ΡΡ:
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ½ΠΎΠ²Π° Π²Π·Π³Π»ΡΠ½Π΅ΠΌ Π½Π° ΠΏΡΠΎΠΌΠΈΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΌΡ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΠΌ ΠΎΡΠΈΠ±ΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° catch :
Π‘ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΠΌΠΈ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΡΡΠ΅ΡΠ°ΠΊΡΠΎΡΠΈΡΡ Π²ΠΎΡ ΡΠ°ΠΊ:
ΠΠ΄Π½Π°ΠΊΠΎ Π΅ΡΡ Π½Π΅ Π²ΡΠ΅ ΠΏΠ΅ΡΠ΅ΡΠ»ΠΈ Π½Π° ΡΡΠΎΡ ΡΡΠΈΠ»Ρ. try/catch ΠΌΠΎΠΆΠ΅Ρ ΡΡΠ»ΠΎΠΆΠ½ΠΈΡΡ Π²Π°Ρ ΠΊΠΎΠ΄. ΠΡΠΈ ΡΡΠΎΠΌ Π½ΡΠΆΠ½ΠΎ ΡΡΠΈΡΡΠ²Π°ΡΡ Π΅ΡΡ ΠΊΠΎΠ΅-ΡΡΠΎ. ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅, ΠΊΠ°ΠΊ Π² ΡΡΠΎΠΌ ΠΊΠΎΠ΄Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ ΠΎΡΠΈΠ±ΠΊΠ° Π²Π½ΡΡΡΠΈ Π±Π»ΠΎΠΊΠ° try :
ΠΠΎΠΌΠΈΠΌΠΎ ΡΡΠΎΠ³ΠΎ async/await Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π»ΡΡΡΠΈΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ ΡΡΡΡΠΊΡΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° Π² JavaScript. ΠΡ Π»ΡΡΡΠ΅ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΎΠΉ ΠΎΡΠΈΠ±ΠΎΠΊ ΠΈ ΠΊΠΎΠ΄ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠΈΡΠ΅.
11. JavaScript-Π΄Π²ΠΈΠΆΠΊΠΈ: ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ? ΠΡΠΎΠ³ΠΈ
JavaScript β ΡΡΠΎ ΡΠΊΡΠΈΠΏΡΠΎΠ²ΡΠΉ ΡΠ·ΡΠΊ Π΄Π»Ρ Π²Π΅Π±Π°, ΠΎΠ½ ΡΠ½Π°ΡΠ°Π»Π° ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΡΠ΅ΡΡΡ, Π° Π·Π°ΡΠ΅ΠΌ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΡΠ΅ΡΡΡ Π΄Π²ΠΈΠΆΠΊΠΎΠΌ. Π‘Π°ΠΌΡΠ΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ JS-Π΄Π²ΠΈΠΆΠΊΠΈ: V8, ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π² Google Chrome ΠΈ Node.js; SpiderMonkey, ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½ Π΄Π»Ρ Firefox; JavaScriptCore, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² Safari.
JavaScript-Π΄Π²ΠΈΠΆΠΊΠΈ ΠΈΠΌΠ΅ΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Β«Π΄Π²ΠΈΠΆΡΡΠΈΡ ΡΡΒ» ΡΠ°ΡΡΠ΅ΠΉ: ΡΡΠ΅ΠΊ Π²ΡΠ·ΠΎΠ²ΠΎΠ², Π³Π»ΠΎΠ±Π°Π»ΡΠ½Π°Ρ ΠΏΠ°ΠΌΡΡΡ, ΡΠΈΠΊΠ» ΡΠΎΠ±ΡΡΠΈΠΉ, ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΠΎΠ±ΡΠ°ΡΠ½ΡΡ Π²ΡΠ·ΠΎΠ²ΠΎΠ². ΠΡΠ΅ ΡΡΠΈ ΡΠ°ΡΡΠΈ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π²ΠΌΠ΅ΡΡΠ΅, ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΡ ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΈ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°.
JavaScript-Π΄Π²ΠΈΠΆΠΊΠΈ ΡΠ²Π»ΡΡΡΡΡ ΠΎΠ΄Π½ΠΎΠΏΠΎΡΠΎΡΠ½ΡΠΌΠΈ, ΡΠΎ Π΅ΡΡΡ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΡΠ½ΠΊΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΡΠ΅ΠΊ Π²ΡΠ·ΠΎΠ²ΠΎΠ². ΠΡΠΎ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠ΅ Π»Π΅ΠΆΠΈΡ Π² ΠΎΡΠ½ΠΎΠ²Π΅ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎΠΉ ΠΏΡΠΈΡΠΎΠ΄Ρ JavaScript: Π²ΡΠ΅ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΈ, Π΄Π»Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΊΠΎΡΠΎΡΡΡ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊΠΎΠ΅-ΡΠΎ Π²ΡΠ΅ΠΌΡ, Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΏΡΠ°Π²Π»ΡΡΡΡΡ Π²Π½Π΅ΡΠ½Π΅ΠΉ ΡΡΡΠ½ΠΎΡΡΡΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ) ΠΈΠ»ΠΈ ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ·ΠΎΠ²Π°.
ΠΠ»Ρ ΡΠΏΡΠΎΡΠ΅Π½ΠΈΡ ΡΠ°Π±ΠΎΡΡ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° Π² ECMAScript 2015 Π±ΡΠ»ΠΈ Π²Π½Π΅Π΄ΡΠ΅Π½Ρ ΠΏΡΠΎΠΌΠΈΡΡ. ΠΡΠΎΠΌΠΈΡ β ΡΡΠΎ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ Π΄Π»Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΡΠΏΠ΅ΡΠ½ΠΎΡΡΠΈ ΠΈΠ»ΠΈ Π½Π΅ΡΡΠΏΠ΅ΡΠ½ΠΎΡΡΠΈ Π»ΡΠ±ΠΎΠΉ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎΠΉ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΈ. ΠΠΎ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ Π½Π° ΡΡΠΎΠΌ Π½Π΅ ΠΏΡΠ΅ΠΊΡΠ°ΡΠΈΠ»ΠΈΡΡ. Π 2017-ΠΌ ΠΏΠΎΡΠ²ΠΈΠ»ΠΈΡΡ async/await : ΡΡΠΈΠ»ΠΈΡΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΡΠ»ΡΡΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΏΡΠΎΠΌΠΈΡΠΎΠ², ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠ΅Π΅ ΠΏΠΈΡΠ°ΡΡ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΠΉ ΠΊΠΎΠ΄, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ ΠΎΠ½ Π±ΡΠ» ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΠΌ.
Π Π°Π±ΠΎΡΠ° Ρ Π°ΡΡΠΈΠ±ΡΡΠ°ΠΌΠΈ ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² JavaScript
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΠΌΡΡ DOM-ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΠΈ Π°ΡΡΠΈΠ±ΡΡΠ°ΠΌΠΈ, ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ, ΡΠ΅ΠΌ ΠΎΠ½ΠΈ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ ΠΈ ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Ρ Π½ΠΈΠΌΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ. Π Π°Π·Π±Π΅ΡΡΠΌ ΠΊΠ°ΠΊΠΈΠ΅ Π² JavaScript Π΅ΡΡΡ ΠΌΠ΅ΡΠΎΠ΄Ρ Π΄Π»Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΉ Π½Π°Π΄ Π°ΡΡΠΈΠ±ΡΡΠ°ΠΌΠΈ.
Π§Π΅ΠΌ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ Π°ΡΡΠΈΠ±ΡΡ ΠΎΡ DOM-ΡΠ²ΠΎΠΉΡΡΠ²Π°
ΠΡΡΠΈΠ±ΡΡΡ β ΡΡΠΎ HTML-ΡΡΡΠ½ΠΎΡΡΠΈ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΡΡ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π² HTML-ΠΊΠΎΠ΄Π΅.
ΠΠ±ΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΠΊ ΡΡΠΈΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌ Π² ΠΊΠΎΠ΄Π΅ JavaScript Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ ΠΊ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌ ΠΎΠ±ΡΠ΅ΠΊΡΠ°. ΠΠ±ΡΠ΅ΠΊΡΠΎΠΌ Π·Π΄Π΅ΡΡ Π²ΡΡΡΡΠΏΠ°Π΅Ρ ΡΠ·Π΅Π» (ΡΠ»Π΅ΠΌΠ΅Π½Ρ) DOM.
ΠΡΠΈΠΌΠ΅Ρ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΠΎΠ»ΡΡΠΈΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΡ DOM-ΡΠ²ΠΎΠΉΡΡΠ² Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΏΡΠΈΠ²Π΅Π΄ΡΠ½Π½ΠΎΠ³ΠΎ Π²ΡΡΠ΅, ΠΈ Π²ΡΠ²Π΅Π΄Π΅ΠΌ ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π² ΠΊΠΎΠ½ΡΠΎΠ»Ρ:
ΠΡΡ ΠΎΠ΄ΠΈΠ½ Π½ΡΠ°Π½Ρ ΡΠ²ΡΠ·Π°Π½ Ρ ΡΠ΅ΠΌ, ΡΡΠΎ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ HTML-Π°ΡΡΠΈΠ±ΡΡΠΎΠ², Π·Π°Π΄Π°Π½Π½ΡΡ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, Π² DOM-ΡΠ²ΠΎΠΉΡΡΠ²Π° Π½Π΅ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡ.
ΠΡΠΎΠΌΠ΅ ΡΡΠΎΠ³ΠΎ, JavaScript ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ°ΠΊΠΆΠ΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ Π°ΡΡΠΈΠ±ΡΡΠ°ΠΌΠΈ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π² DOM API ΠΈΠΌΠ΅ΡΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ. ΠΠΎ ΠΈΡ ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΡΠΆΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ Π΄Π°Π½Π½ΡΠΌΠΈ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΊ.
ΠΡΠΈ ΡΡΠΎΠΌ Π½ΡΠΆΠ½ΠΎ Π·Π½Π°ΡΡ, ΡΡΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌ DOM-ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ Π΅ΠΌΡ Π°ΡΡΠΈΠ±ΡΡ, ΠΈ Π½Π°ΠΎΠ±ΠΎΡΠΎΡ. ΠΠΎ ΡΡΠΎ ΠΏΡΠΎΡΠ΅ΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡ Π½Π΅ Π²ΡΠ΅Π³Π΄Π° ΠΎΠ΄ΠΈΠ½ ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡ.
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΎΡΠ»ΠΈΡΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ DOM-ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΠΈ Π°ΡΡΠΈΠ±ΡΡΠ°ΠΌΠΈ:
Π Π°Π±ΠΎΡΠ° Ρ DOM-ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
Π Π°Π±ΠΎΡΠ° ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² JavaScript ΠΊΠ°ΠΊ ΡΠΆΠ΅ Π±ΡΠ»ΠΎ ΠΎΡΠΌΠ΅ΡΠ΅Π½ΠΎ Π²ΡΡΠ΅ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ².
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ HTML-ΡΠ»Π΅ΠΌΠ΅Π½Ρ:
ΠΠ° Π±Π°Π·Π΅ Π½Π΅Π³ΠΎ ΡΠ°Π·Π±Π΅ΡΡΠΌ ΠΊΠ°ΠΊ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΠ΅ DOM-ΡΠ²ΠΎΠΉΡΡΠ², ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½ΠΎΠ²ΡΡ .
Π§ΡΠ΅Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ DOM-ΡΠ²ΠΎΠΉΡΡΠ²:
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ DOM-ΡΠ²ΠΎΠΉΡΡΠ²:
ΠΡΠΈΠΌΠ΅Ρ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π²ΡΠ²Π΅Π΄Π΅ΠΌ Π² ΠΊΠΎΠ½ΡΠΎΠ»Ρ Π²ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π΅ΡΡΡ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² p Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅:
ΠΡΠΈΠΌΠ΅Ρ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ content ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ lang ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ «ru»:
ΠΡΡΠΈΠ±ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΠΌΠ΅ΡΠΎΠ΄Ρ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ Π½ΠΈΠΌΠΈ
ΠΡΡΠΈΠ±ΡΡΡ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π·Π°Π΄Π°ΡΡΡΡ Π² HTML-ΠΊΠΎΠ΄Π΅. ΠΠ½ΠΈ Ρ ΠΎΡΡ ΠΈ ΡΠ²ΡΠ·Π°Π½Ρ, Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ, Π½ΠΎ ΡΡΠΎ Π½Π΅ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎΠΆΠ΅. Π Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π² ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ, Π° ΠΊ Π°ΡΡΠΈΠ±ΡΡΠ°ΠΌ ΠΎΠ±ΡΠ°ΡΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΡΠΆΠ½ΠΎ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ², Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ DOM-ΡΠ²ΠΎΠΉΡΡΠ², ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠΆΠ΅ Π±ΡΠ»ΠΎ ΠΎΡΠΌΠ΅ΡΠ΅Π½ΠΎ Π²ΡΡΠ΅ Π²ΡΠ΅Π³Π΄Π° ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΡΠΎΠΊΠΎΠΉ.
Π JavaScript Π΄Π»Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΉ, ΡΠ²ΡΠ·Π°Π½Π½ΡΡ Ρ Π°ΡΡΠΈΠ±ΡΡΠ°ΠΌΠΈ, ΠΈΠΌΠ΅Π΅ΡΡΡ ΡΠ΅ΡΡΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Π°:
ΠΡΠΈΠΌΠ΅Ρ Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ value
ΠΠΎΠ»ΡΡΠΈΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° value ΠΈ DOM-ΡΠ²ΠΎΠΉΡΡΠ²Π° value :
Π’Π΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΡΠΎΠ΄Π΅Π»Π°Π΅ΠΌ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, Π½Π°ΠΎΠ±ΠΎΡΠΎΡ, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ DOM-ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΈ ΠΏΡΠΎΠ²Π΅ΡΠΈΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ Π»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ°:
ΠΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π²ΡΠ΅Π³Π΄Π° Ρ DOM-ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ, Π° ΠΎΠ±ΡΠ°ΡΠ°ΡΡΡΡ ΠΊ Π°ΡΡΠΈΠ±ΡΡΡ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ.
ΠΡΡ ΠΎΠ΄ΠΈΠ½ ΠΎΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, Π½ΠΎ ΡΠ΅ΠΏΠ΅ΡΡ Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ href.
ΠΡΠΈΠΌΠ΅Ρ Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ href
ΠΡΠΈΠΌΠ΅Ρ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΡΠ»ΠΊΠΈ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΎ Π±ΡΠ»ΠΎ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π² HTML.
ΠΠΎΡΡΠΎΠΌΡ Π΅ΡΠ»ΠΈ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠΎ, ΡΡΠΎ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅, ΡΠΎ Π±Π΅Π· ΠΌΠ΅ΡΠΎΠ΄Π° getAttribute Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π½Π΅ ΠΎΠ±ΠΎΠΉΡΠΈΡΡ.
ΠΡΠΈΠΌΠ΅Ρ Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ selected
ΠΡΠΈΠΌΠ΅Ρ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠΉ ΠΎΠΏΡΠΈΠΈ select :
ΠΡΠΈΠΌΠ΅Ρ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π²ΡΠ±ΡΠ°Π½Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΎΠΏΡΠΈΠΉ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ select :
ΠΡΡ ΠΎΠ΄ΠΈΠ½ ΡΠΏΠΎΡΠΎΠ± ΡΠ°Π±ΠΎΡΡ Ρ Π°ΡΡΠΈΠ±ΡΡΠ°ΠΌΠΈ (ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ attributes)
ΠΠ°Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΌΠΎΠΆΠ΅Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΠ΅ΡΠ΅Π±ΡΠ°ΡΡ Π²ΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΡΠ²Π΅Π΄Π΅ΠΌ Π² ΠΊΠΎΠ½ΡΠΎΠ»Ρ Π²ΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°:
ΠΡΠΎΠΌΠ΅ ΡΡΠΎΠ³ΠΎ, ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΡΡΠΎΠΉ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠ΅ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² :
ΠΡΠΈΠΌΠ΅Ρ, ΡΠ°Π±ΠΎΡΡ Ρ Π°ΡΡΠΈΠ±ΡΡΠ°ΠΌΠΈ ΡΠ΅ΡΠ΅Π· ΠΌΠ΅ΡΠΎΠ΄Ρ getNamedItem, setNamedItem ΠΈ removeNamedItem:
ΠΠΎΠΈΡΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° Π² JavaScript
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΊΠ°ΠΊΠΈΠ΅ Π² JavaScript ΡΡΡΠ΅ΡΡΠ²ΡΡΡ ΠΌΠ΅ΡΠΎΠ΄Ρ Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΈ ΠΊΠ°ΠΊ Ρ Π½ΠΈΠΌΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ.
ΠΠ΅ΡΠΎΠ΄Ρ JavaScript Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ° DOM ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
Π Π°Π±ΠΎΡΠ° ΡΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅ΠΉ ΡΠ°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°ΡΠ΅ ΡΠ²ΡΠ·Π°Π½Π° Ρ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ DOM ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. ΠΠΎ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ ΠΈΡ ΡΠ½Π°ΡΠ°Π»Π° Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ.
ΠΡ ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΡΠ²ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠ°Π·Π»ΠΈΡΠΈΠΈ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌΡΡ DOM ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ΅ΡΠ²ΡΠΉ ( querySelectorAll ) Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ Π²ΡΠ΅ Π½Π°ΠΉΠ΄Π΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π° Π²ΡΠΎΡΠΎΠΉ ( querySelector ) β ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠ΅ΡΠ²ΡΠΉ ΠΈΠ· Π½ΠΈΡ .
querySelectorAll β ΠΏΠΎΠΈΡΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ
querySelectorAll β ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° Π½ΡΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ Π²Π½ΡΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π ΠΏΡΠΈΠ²Π΅Π΄ΡΠ½Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅ css_selector β ΡΡΠΎ ΡΡΡΠΎΠΊΠ°, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ°Ρ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡ, Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΊΠΎΡΠΎΡΡΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡΡΡΠ΅ΡΡΠ²ΠΈΡΡ ΠΏΠΎΠΈΡΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
Π£Π·Π½Π°ΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° length :
ΠΠ±ΡΠ°ΡΠΈΡΡΡΡ ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎ Π΅Π³ΠΎ ΠΈΠ½Π΄Π΅ΠΊΡΡ. ΠΠ½Π΄Π΅ΠΊΡΡ Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ Ρ 0.
ΠΠ΅ΡΠ΅Π±ΡΠ°ΡΡ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ Π²ΡΠ±ΡΠ°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΈΠΊΠ»Π° for:
ΠΠ΅ΡΠ΅Π±ΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ ΡΠΈΠΊΠ»Π° for. of:
ΠΡΠΈΠΌΠ΅ΡΡ
1. ΠΡΠΏΠΎΠ»Π½ΠΈΠΌ ΠΏΡΠΎΠ²Π΅ΡΠΊΡ ΡΡΡΠ΅ΡΡΠ²ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ data-toggle=»modal» :
querySelector β Π²ΡΠ±ΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ
Π ΠΏΡΠΈΠ²Π΅Π΄ΡΠ½Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅ selector β ΡΡΠΎ ΡΡΡΠΎΠΊΠ°, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ°Ρ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡ, Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΊΠΎΡΠΎΡΡΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π½Π°ΠΉΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ° ΠΌΠ΅ΡΠΎΠ΄ querySelector Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ ΡΡΡΠ»ΠΊΡ Π½Π° ΠΎΠ±ΡΠ΅ΠΊΡ ΡΠΈΠΏΠ° Element ΠΈΠ»ΠΈ null (Π΅ΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ Π½Π°ΠΉΠ΄Π΅Π½).
ΠΡΠΈΠΌΠ΅ΡΡ
2. ΠΡΠΏΠΎΠ»Π½ΠΈΡΡ ΠΏΠΎΠΈΡΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎ ΠΊΠ»Π°ΡΡΡ nav :
3. ΠΠ±ΡΠ°ΡΠΈΡΡΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
, Π½Π°Ρ ΠΎΠ΄ΡΡΠ΅ΠΌΡΡΡ Π² ΡΠ΅Π³Π΅
4. ΠΡΠΎΠ²Π΅ΡΠΈΡΡ Π½Π°Π»ΠΈΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ modal Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅:
Β«Π‘ΡΠ°ΡΡΠ΅Β» ΠΌΠ΅ΡΠΎΠ΄Ρ Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
Π Π΄Π°Π½Π½ΠΎΠΉ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΈ ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΌΠ΅ΡΠΎΠ΄Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ΅ΠΉΡΠ°Ρ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Π΄Π»Ρ ΠΏΠΎΠΈΡΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΡ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡΡΠ΅ΡΠΈΡΡ Π² Β«ΡΡΠ°ΡΠΎΠΌΒ» ΠΊΠΎΠ΄Π΅.
getElementById β ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ id
Π£ΠΊΠ°Π·Π°Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ id Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ Ρ ΡΡΡΡΠΎΠΌ ΡΠ΅Π³ΠΈΡΡΡΠ°, Ρ.ΠΊ., Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, main ΠΈ Main β ΡΡΠΎ ΡΠ°Π·Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΠ»ΡΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΈΠΌΠ΅ΡΡΠΈΠΉ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ id Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ pagetitle :
ΠΠ΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΌΠ΅ΡΠΎΠ΄Π° getElementById ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ querySelector :
getElementsByClassName β ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΠΏΠΈΡΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎ ΠΈΠΌΠ΅Π½Π°ΠΌ ΠΊΠ»Π°ΡΡΠΎΠ²
ΠΠ΅ΡΠΎΠ΄ getElementsByClassName ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΡΠΊΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΌΡ ΠΈΠΌΠ΅Π½ΠΈ ΠΊΠ»Π°ΡΡΠ°, Π½ΠΎ ΠΈ ΠΏΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΡΠ±Π΅ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Ρ ΠΊΠΎΡΠΎΡΡΡ ΠΈΠΌΠ΅ΡΡΡΡ ΠΊΠ»Π°ΡΡΡ btn ΠΈ btn-danger :
Π€ΡΠ½ΠΊΡΠΈΡ getElementsByClassName ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΡΠΊΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π²Π½ΡΡΡΠΈ Π²ΡΠ΅Π³ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, Π½ΠΎ ΠΈ Π² ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅.
ΠΡΠΏΠΎΠ»Π½ΠΈΡΡ ΡΡΡ Π·Π°Π΄Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ querySelectorAll ΠΌΠΎΠΆΠ½ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ:
getElementsByTagName β ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎ ΠΈΠΌΠ΅Π½ΠΈ ΡΠ΅Π³Π°
ΠΠ΅ΡΠΎΠ΄ getElementsByTagName ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎ ΠΈΠΌΠ΅Π½ΠΈ ΡΠ΅Π³Π°.
ΠΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ΅ΡΠ΅Π· querySelectorAll ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅ΡΠΈΡΡ ΡΠ°ΠΊ:
getElementsByName β ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π°ΡΡΠΈΠ±ΡΡΠ° name
ΠΠ΅ΡΠΎΠ΄ getElementsByName ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π²ΡΠ±ΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΈΠΌΠ΅ΡΡΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡ name Ρ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΡΠ±ΡΠ°ΡΡ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Ρ name=»phone» :
Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎ Ρ querySelectorAll ΠΌΠΎΠΆΠ½ΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
getElementsBy* ΠΈ ΠΆΠΈΠ²ΡΠ΅ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ li Π½Π°Ρ ΠΎΠ΄ΡΡΠΈΠ΅ΡΡ Π² #list ΠΈ Π²ΡΠ²Π΅Π΄Π΅ΠΌ ΠΈΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π² ΠΊΠΎΠ½ΡΠΎΠ»Ρ. ΠΠ°ΡΠ΅ΠΌ ΡΠ΅ΡΠ΅Π· 5 ΡΠ΅ΠΊΡΠ½Π΄ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π΅ΡΡ ΠΎΠ΄ΠΈΠ½ ΡΠ»Π΅ΠΌΠ΅Π½Ρ li Π² #list ΠΈ Π΅ΡΡ ΡΠ°Π· Π²ΠΎΠ·Π²ΡΠ°ΡΠΈΠΌ ΠΈΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π² ΠΊΠΎΠ½ΡΠΎΠ»Ρ.
ΠΠ°ΠΊ Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠ° ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΆΠΈΠ²ΠΎΠΉ, Ρ.Π΅. ΠΎΠ½Π° Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ. Π‘Π½Π°ΡΠ°Π»Π° Π² Π½Π΅ΠΉ Π±ΡΠ»ΠΎ 2 ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π° ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Π΅ΡΡ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π² Π½Π΅ΠΉ ΠΈΡ ΡΡΠ°Π»ΠΎ 3.
ΠΠ°ΠΊ Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΎΡΡ.
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΡΡ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΡΠ»Π΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ DOM, ΡΠΎ ΠΌΠ΅ΡΠΎΠ΄ querySelectorAll Π½ΡΠΆΠ½ΠΎ Π²ΡΠ·Π²Π°ΡΡ Π΅ΡΡ ΡΠ°Π·.
ΠΡΠΎΠ³ΠΎ
Π JavaScript ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠ΄Π΅Π»ΠΈΡΡ 6 ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ
matches β ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° Π½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ
Π§ΡΠΎΠ±Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΌΠ΅ΡΠΎΠ΄Π° Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΏΠΎΠ»ΠΈΡΠΈΠ»Π»:
closest β ΠΏΠΎΠΈΡΠΊ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° ΠΏΠΎ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ
closest β ΡΡΠΎ ΠΌΠ΅ΡΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΉΡΠΈ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠΌ. ΠΡΠΈ ΡΡΠΎΠΌ ΠΏΠΎΠΈΡΠΊ ΠΏΡΠ΅Π΄ΠΊΠΎΠ² Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π΄Π°Π½Π½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΈ Π΅ΡΠ»ΠΈ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ Π΅ΠΌΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ, ΡΠΎ closest Π²Π΅ΡΠ½ΡΡ ΡΠ°ΠΌ ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ° ΠΌΠ΅ΡΠΎΠ΄ closest Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ Π½Π°ΠΉΠ΄Π΅Π½Π½ΡΠΉ DOM-ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ»ΠΈ null (Π΅ΡΠ»ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°ΠΉΠ΄Π΅Π½ Π½Π΅ Π±ΡΠ»).
contains β ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° Π½Π°Π»ΠΈΡΠΈΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²Π½ΡΡΡΠΈ Π΄ΡΡΠ³ΠΎΠ³ΠΎ
contains β ΡΡΠΎ ΠΌΠ΅ΡΠΎΠ΄, ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΡΡΡΠ΅ΡΡΠ²ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²Π½ΡΡΡΠΈ Π΄ΡΡΠ³ΠΎΠ³ΠΎ.
ΠΠ°Π΄Π°ΡΠΈ
ΠΠΌΠ΅Π΅ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΠ°. Π Π½Π΅ΠΉ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π²ΡΠ±ΡΠ°ΡΡ: