JavaScript. Ââåäåíèå
×òî òàêîå JavaScript
Íåçàâèñèìî îò òîãî, îïûòíûé ëè âû âåáìàñòåð, èëè òîëüêî ÷òî ïðî÷ëè ó÷åáíèê ïî HTML, âû çíàåòå, ÷òî ïðè ïîìîùè HTML ìîæíî ñîçäàâàòü òîëüêî ñòàòè÷åñêèå ñòðàíèöû. Äëÿ ìíîãèõ ñëó÷àåâ ýòî ïîäõîäèò êàê íåëüçÿ ëó÷øå. Íî ÷àñòî íåêîòîðàÿ àêòèâíîñòü, èëè äèíàìèêà, òîëüêî óëó÷øèò âàøó ñòðàíèöó.
Òàêèå âåùè, êàê, íàïðèìåð, êàëåíäàðèê, êîòîðûé îòêðûâàåòñÿ ïðè êëèêå ìûøêîé, èëè ïàíåëü íàâèãàöèè, êîòîðóþ âñåãäà âèäíî, êàê áû äàëåêî âû íå ïðîêðóòèëè ñòðàíèöó – êàê ÷àñòî âû âñòðå÷àåòå ïîäîáíûå äîïîëíåíèÿ íà ñàéòàõ? À èíîãäà è ïðîñòî áåãóùàÿ ñòðî÷êà ñ íîâîñòÿìè, èëè, íàïðèìåð, ìåíþ â âèäå âûïàäàþùåãî ñïèñêà, èëè êðàñèâûé øëåéô çà êóðñîðîì ìûøêè... Óäîáíî, à èíîãäà è ïðîñòî êðàñèâî, òàê âåäü?
Âñå ýòî äèíàìè÷åñêèé HTML (èëè, ñîêðàùåííî, DHTML).
Ñðàçó íóæíî ñêàçàòü, ÷òî DHTML – ýòî íå êàêîé-òî ñïåöèàëüíûé ÿçûê ðàçìåòêè è íå ìîäèôèöèðîâàííûé HTML. Ïîíÿòèå DHTML áàçèðóåòñÿ íà òðåõ âåùàõ ñîáñòâåííî íà ÿçûêå HTML, íà êàñêàäíûõ òàáëèöàõ ñòèëåé CSS è íà âñòðîåííîì â áðàóçåð ÿçûêå – ÷àùå âñåãî ýòî JavaScript.
Îïèñûâàòü òîíêîñòè CSS è HTML ÿ íå ñòàíó – ýòîìó ïîñâÿùåíû äðóãèå ó÷åáíèêè, ÿ æå â áîëüøåé ñòåïåíè áóäó ðàññêàçûâàòü î JavaScript (èëè JS), è åãî ïðèìåíåíèè â ñâÿçêå ñ HTML è CSS.
Äëÿ íà÷àëà ñòîèò îïðåäåëèòüñÿ, ÷òî æå òàêîå JavaScript?
Íåñìîòðÿ íà òî, ÷òî ýòîìó ÿçûêó óæå áîëåå 10 ëåò, à åñëè áûòü òî÷íûì, òî ïðèäóìàí îí â 1995 ãîäó, åãî î÷åíü ÷àñòî ïóòàþò ñ ÿçûêîì Java. Íà ñàìîì äåëå ýòè ÿçûêè íå èìåþò ïðàêòè÷åñêè íè÷åãî îáùåãî. ßçûê JavaScript – ýòî âñòðàèâàåìûé êëèåíòñêèé ÿçûê, òî åñòü îáëàäàåò äâóìÿ ñâîéñòâàìè.
Ïåðâîå ñâîéñòâî – èñïîëíåíèå íà êëèåíòñêîì êîìïüþòåðå. Åñëè âû çíàåòå, êàê âîîáùå ðàáîòàåò âåñü ýòîò èíòåðíåò, òî âàì äîëæíî áûòü èçâåñòíî, ÷òî âåá-ñòðàíèöû, êîòîðûå îòîáðàæàåò áðàóçåð, ñîçäàþòñÿ (èëè ïðîñòî õðàíÿòñÿ) íà äðóãîì êîìïüþòåðå, íàçûâàåìîì ñåðâåðîì. Áðàóçåð ïîñûëàåò çàïðîñ íà ñåðâåð è ïîëó÷àåò â îòâåò HTML-êîä ñòðàíèöû.  ýòîì ñëó÷àå áðàóçåð íàçûâàåòñÿ êëèåíòîì.
Ãëàâíîå – ïîíèìàòü, ÷òî ïîñëå òîãî, êàê ñòðàíèöà îòäàíà áðàóçåðó, ñåðâåð óæå íå ìîæåò èçìåíèòü åå ñîäåðæèìîå.
 ñëó÷àå æå ñ JavaScript ïðîãðàììû, à òî÷íåå – ñêðèïòû – âûïîëíÿþòñÿ ïðÿìî â áðàóçåðå. Ýòî äàåò òàêèì ñêðèïòàì âîçìîæíîñòü ïîëó÷àòü äîñòóï ê çàãðóæåííîé ñòðàíèöå, è èçìåíÿòü åå.
Âòîðîå ñâîéñòâî – âñòðàèâàåìîñòü. Äëÿ òîãî ÷òîáû âûïîëíÿòü ñêðèïòû, íàïèñàííûå íà ÿçûêå JavaScript, íå òðåáóåòñÿ íèêàêèõ äîïîëíèòåëüíûõ ïðîãðàìì – âñå íåîáõîäèìîå äëÿ ðàáîòû ñêðèïòà óæå èìååòñÿ â áðàóçåðå (åñëè, êîíå÷íî, ýòî íå áðàóçåð ïÿòíàäöàòèëåòíåé äàâíîñòè).
Ñðàçó íóæíî ñêàçàòü, ÷òî â ðàçíûõ áðàóçåðàõ JavaScript âåäåò ñåáÿ íåìíîãî ïî-ðàçíîìó. Ýòî íå êàñàåòñÿ ñàìîãî ÿçûêà – îäíè è òå æå êîíñòðóêöèè áóäóò âûïîëíÿòüñÿ îäèíàêîâî. Âñå äåëî â ñðåäñòâàõ, êîòîðûå áðàóçåð ïðåäîñòàâëÿåò ñêðèïòó – òàê, íàïðèìåð, ìíîãèå ñêðèïòû ðàáîòàþò â áðàóçåðå Mozilla FireFox, íî âûäàþò îøèáêè â äðóãèõ áðàóçåðàõ, íàïðèìåð, â Apple Safari.
Ïîýòîìó îäíèì èç òðåáîâàíèé ê êà÷åñòâåííûì ñêðèïòàì ÿâëÿåòñÿ îáÿçàòåëüíàÿ ðàáîòîñïîñîáíîñòü êàê ìèíèìóì â FireFox è Internet Explorer.
Âñå ïðèìåðû ñêðèïòîâ, êîòîðûå âû íàéäåòå â ýòîì ó÷åáíèêå, áóäóò ñîîòâåòñòâîâàòü äàííîìó òðåáîâàíèþ.
È, íàïîñëåäîê, ðàçãàäêà ñòðàííîãî íàçâàíèÿ.
Äåëî â òîì, ÷òî ïðè ñîçäàíèè ýòîãî ÿçûêà, èíæåíåðû Netscape ðåøèëè ñäåëàòü åìó äîïîëíèòåëüíóþ ðåêëàìó. À îäíèì èç ñàìûõ ïîïóëÿðíûõ, ïåðñïåêòèâíûõ è ïîäàþùèõ íàäåæäû ÿçûêîâ íà òî âðåìÿ ñ÷èòàëñÿ Java. Äîëãî ðàçäóìûâàòü íå ïðèøëîñü.
Ïðèìåðû ïðîñòûå è ñëîæíûå.
Íåñìîòðÿ íà òî, ÷òî ÿçûê JS ÷àùå âñåãî èñïîëüçóåòñÿ äëÿ íåáîëüøèõ âñòàâîê â ñòðàíèöû, ýòî ÿçûê äîñòàòî÷íî ìîùíûé. Îí ïðàêòè÷åñêè íå óñòóïàåò óæå óïîìÿíóòîìó ÿçûêó Java. Òàê, íàïðèìåð, íà ýòîì ÿçûêå ìîæíî ñîçäàâàòü (êîíå÷íî, íå áåç ó÷àñòèÿ áðàóçåðà) ïðîãðàììû, ìàëî ÷åì îòëè÷àþùèåñÿ îò ïðèâû÷íûõ, òàê íàçûâàåìûõ äåñêòîïíûõ.
×òîáû íå áûòü ãîëîñëîâíûì, ÿ ïðèâåäó ïðèìåðû:
Êðîìå ïðèâåäåííûõ ñàéòîâ, ìîæíî áûëî áû íàçâàòü åùå òûñÿ÷è, êîòîðûå â òîé èëè èíîé ñòåïåíè èñïîëüçóþò JS. Íî, ÿ äóìàþ, ñòîèò äîáàâèòü ê ýòèì òûñÿ÷àì åùå îäèí – ýòî áóäåò âàø ñàéò.
Ïî èñòîðè÷åñêè ñëîæèâøåéñÿ òðàäèöèè èçó÷åíèå ëþáîãî ÿçûêà íà÷èíàþò ñ òàê íàçûâàåìîãî «HelloWorld»'à, òî åñòü ïðîãðàììû, êîòîðàÿ íå äåëàåò íè÷åãî, êðîìå âûâîäà ïðîñòîãî ñîîáùåíèÿ. ß íå áóäó îòñòóïàòü îò ýòîé òðàäèöèè.
Íî äëÿ íà÷àëà ñòîèò îáçàâåñòèñü íåêîòîðûìè èíñòðóìåíòàìè. Îíè î÷åíü ñèëüíî îáëåã÷àò ðàçðàáîòêó íà JavaScript.
Äëÿ íà÷àëà, âàì ïîòðåáóåòñÿ ðåäàêòîð ñ ïîäñâåòêîé ñèíòàêñèñà. Âûáîð åãî – äåëî âêóñà. ß, íàïðèìåð, â êðóïíûõ ïðîåêòàõ èñïîëüçóþ Eclipse IDE, à â ïðîåêòàõ ïîìåíüøå – NotePad++. Âû ìîæåòå èñïîëüçîâàòü òîò ðåäàêòîð, êîòîðûé âàì áîëüøå íðàâèòñÿ (õîòÿ, ÷åñòíî ãîâîðÿ, «Áëîêíîò» èç ñòàíäàðòíîé ïîñòàâêè Windows ÿ áû íå ðåêîìåíäîâàë).
Âòîðîé èíñòðóìåíò, áåç êîòîðîãî î÷åíü ñëîæíî îáîéòèñü, – ýòî îòëàä÷èê. Ïîêà ÷òî ÿ íå âñòðå÷àë îòëàä÷èêà ëó÷øåãî, ÷åì FireBug, êîòîðûé ïîñòàâëÿåòñÿ êàê ìîäóëü ê FireFox'ó. Äëÿ ÿðûõ ëþáèòåëåé Internet Explorer ìîæíî ïîðåêîìåíäîâàòü Microsoft Script Debugger, íî íà ìîé âçãëÿä îí íå òàê óäîáåí.
Òåì æå, êòî ïðåäïî÷èòàåò Opera, Safary è åùå áîëåå ýêçîòè÷åñêèå áðàóçåðû, ÿ, ê ñîæàëåíèþ, íè÷åãî ïîñîâåòîâàòü íå ìîãó.
Òåïåðü, êîãäà âû âîîðóæåíû è ãîòîâû äåéñòâîâàòü, âàì ïîíàäîáèòñÿ âåá-ñòðàíèöà.
Äîñòàòî÷íî áóäåò ïðîñòîãî êàðêàñà, áåç ñîäåðæèìîãî. Íàïðèìåð:
Åñëè âû îòêðîåòå åå â áðàóçåðå, òî, êàê è ñëåäîâàëî îæèäàòü, íè÷åãî íå óâèäèòå.
Íî ìû ìîæåì óêàçàòü áðàóçåðó, ÷òî âíóòðü ýòîé ñòðàíèöû íóæíî âûâåñòè òåêñò.
Äëÿ ýòîãî ê èñõîäíîìó êîäó ñòðàíèöû íóæíî ïîäêëþ÷èòü ñêðèïò.
Ñäåëàòü ýòî ìîæíî äâóìÿ ñïîñîáàìè, è îáà ýòè ñïîñîáà èñïîëüçóþò òåã <script>
Íàïðèìåð, ìîæíî íàïèñàòü òàê:
Ïîïðîáóéòå òåïåðü îòêðûòü ýòó ñòðàíèöó â áðàóçåðå. Âû óâèäèòå ñèìïàòè÷íîå îêîøêî ñ íàäïèñüþ «Çäåñü áûë JavaScript» ñðàçó ïîñëå çàãðóçêè ñòðàíèöû (â íàñòðîéêàõ áðàóçåðà äîëæíû áûòü ðàçðåøåíû âñïëûâàþùèå îêíà).
Êîíå÷íî, äî íàñòîÿùåãî ñêðèïòà åùå äàëåêî. Íî ýòî âàøà ïåðâàÿ ïðîãðàììà íà ÿçûêå JavaScript, è ýòî ïåðâûé óñïåõ â èçó÷åíèè ÿçûêà.
