Биринчи программа

Салам дүйнө

Окутуунун бул бөлүгүндө биз JavaScriptтин өзү, тилдин өзү жөнүндө үйрөнүп жатабыз.

Бирок скрипттерди иштетүү үчүн бизге жумушчу стол керек жана бул онлайн китеп болгондуктан, браузер жакшы тандоо болмок. Бул бөлүмдө, эгер сиз башка алкактарга (Node.js сыяктуу) көңүл бурууну пландап жатсаңыз, аларга убакыт коротпоо үчүн, браузерге тиешелүү буйруктарды (мисалы, alert) минималдуу деңгээлде сактайбыз. Жана биз окуу куралынын кийинки бөлүгүндө браузерде JavaScriptти колдонууга көңүл бурабыз.

Ошентип, адегенде баракта скриптти кантип аткарууну карап көрөлү. Сервер чөйрөлөрү үчүн (Node.js сыяктуу) скриптти "node my.js" сыяктуу буйрук менен аткарсаңыз болот. Браузер үчүн нерселер бир аз башкача.

скрипт теги

JavaScript программаларын HTML документинин каалаган жерине <скрипт> теги менен киргизүүгө болот.

Мисалга:

@A@<!DOCTYPE HTML>

<html>

<body>

  <p>Сценарийден мурун...</p>

  <скрипт>

    alert( 'Салам дүйнө!' );

  </script>

  <p>...Сценарийден кийин.</p>

</body>

</html>@A@

Жогорудагы код менен блоктун жогорку оң бурчундагы "Ойнотуу" баскычын чыкылдатуу менен мисалды иштете аласыз.

<script> теги JavaScript кодун камтыйт, ал браузер аны көрсөткөндө автоматтык түрдө аткарылат.

Заманбап белгилөө

<script> теги сейрек колдонулган, бирок эски коддон дагы эле тапса боло турган бир нече атрибуттарга ээ:

type атрибуту: <скрипт түрү=…>

Эски HTML стандарты, HTML4, бул атрибутту <script> тегинде талап кылат. Ал, адатта, type = "text/javascript" маанисине ээ болгон. Бул учурда талап кылынбайт. Анын үстүнө, заманбап HTML стандартында бул атрибуттун мааниси толугу менен өзгөргөн.Эми аны JavaScript модулдары үчүн колдонсо болот. Бирок бул башталгыч деңгээлдеги тема эмес, биз бул тууралуу окуу куралынын башка бөлүгүндө сүйлөшөбүз.

тил атрибуту: <скрипт тили=…>

Бул атрибут скрипт жазылган тилди коюуга тийиш. Бирок JavaScript демейки тил болгондуктан, бул атрибуттун кереги жок.

Скриптти HTML комментарийге ороп коюу.

Абдан байыркы китептерде жана колдонмолордо <script> тегинин ичинен төмөнкүдөй комментарийлерди таба аласыз:

@A@<script type="text/javascript"><!--

    ...

//--></скрипт>@A@

Бул жорум JavaScript кодун <script> тегин кантип иштетүүнү билбеген эски браузерлерде жашырган. Акыркы 15 жылда чыгарылган бардык браузерлерде бул көйгөй жок болгондуктан, мындай комментарийлердин кереги жок. Эгер алар болсо, анда бул бизде абдан байыркы код бар экендигинин белгиси.

Тышкы скрипттер

Эгер сизде JavaScript коду көп болсо, аны өзүнчө файлга салсаңыз болот.

Скрипт файлын HTMLге src атрибуту аркылуу кошууга болот:

@A@<script src="/path/to/script.js"></script>@A@

Бул жерде /path/to/script.js - сайттын тамырынан скриптке абсолюттук жол. Сиз ошондой эле учурдагы барактан салыштырмалуу жолду көрсөтө аласыз. Мисалы, src="script.js" же src="./script.js" "script.js" файлы учурдагы папкада экенин билдирет.

Ошондой эле толук URL көрсөтсөңүз болот. Мисалы:

@A@<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>@A@

Бир нече скрипттерди кошуу үчүн бир нече тегдерди колдонуңуз:

@A@<script src="/js/script1.js"></script>

<script src="/js/script2.js"></script>

…@A@

Эскертүү боюнча:

Эреже катары, HTMLде эң жөнөкөй скрипттер гана жайгаштырылат. Татаалдары өзүнчө файлдарга бөлүнөт.

Өзүнчө файлдардын артыкчылыгы - браузер скриптти өзүнчө жүктөп алып, аны кэште сактай алат.

Ошол эле скрипт камтылган башка барактар ​​аны интернеттен кайра жүктөөнүн ордуна кэштен ала алышат. Ошентип, файл серверден бир гана жолу жүктөлөт.

Бул трафикти керектөөнү азайтат жана баракты жүктөөнү тездетет.

Эгерде src атрибуту коюлса, скрипт тегинин мазмуну этибарга алынбайт.

Ошол эле <script> тегинде сиз src атрибутун жана ичиндеги кодду бир убакта колдоно албайсыз.

Төмөндөгү мисал иштебейт:

@A@<script src="file.js">

  эскертүү(1); // мазмун этибарга алынбайт, анткени src атрибуту бар

</script>@A@

Сиз тандоо керек: же тышкы скрипт <script src="...">, же <script> тегинин ичиндеги кадимки код.

Жогорудагы мисалды эки скриптке бөлүүгө болот:

@A@<script src="file.js"></script>

<script>

  alert(1);

</script>@A@

Бардыгы

<script> теги баракка JavaScript кодун кошуу үчүн колдонулат.

Тип жана тил атрибуттары милдеттүү эмес.

Сырткы файлдагы скриптти <script src="path/to/script.js"></script> аркылуу киргизүүгө болот.

Браузердин скрипттери жана алардын баракча менен өз ара аракеттенүүсү жөнүндө бизде дагы көп нерсе бар. Бирок, жогоруда айтылгандай, окуу куралынын бул бөлүгү атайын JavaScript тилине арналган, ошондуктан бул жерде биз,Биз JavaScriptти иштетүү үчүн браузерди колдонобуз, ал онлайн демонстрациялар үчүн ыңгайлуу, бирок бул тилде иштеген платформалардын бири гана.

Тапшырма:

alertти чакыруу

"Мен JavaScriptмин!" Билдирүүсүн көрсөтө турган баракты түзүңүз.

Бул тапшырманы кумкоргондо (песочница) же катуу дискиңизде иштетиңиз, бул маанилүү эмес, эң негизгиси анын иштеп жатканын текшерүү.

Тышкы скрипт менен билдирүүнү көрсөтү

Мурунку тапшырманын чечимин кабыл алыңыз Чакыруу эскертүүсү жана аны өзгөртүңүз. Скрипттин мазмунун ошол эле папкадагы тышкы alert.js файлына чыгарып алыңыз.

Баракты ачыңыз, эскертүү иштегенин текшериңиз.

 Чечими:

Мисал