Можливості JavaScript, мова складання скриптів, для чого це потрібно, як навчиться користуватися мовою

Можливості JavaScript, мова складання скриптів, для чого це потрібно, як навчиться користуватися мовою JavaScript

Частина 1: Перші кроки

Що таке JavaScript

JavaScript – нова мова для складання скриптів, розроблений фірмою Netscape. За допомогою JavaScript Ви можете легко створювати інтерактивні Web-сторінки. У цьому посібнику Ви побачите, що можна зробити за допомогою JavaScript, і навіть більш того – побачите, як це зроблено.

JavaScript – це не Java!

Багато людей вважають, що JavaScript – це те ж саме, що і Java, лише тому, що ці мови мають схожі назви. Насправді це не так. Я вважаю, що зараз буде зайво показувати Вам всі відмінності між цими мовами – так що запам’ятайте лише те, що JavaScript – це не Java.

Щоб отримати додаткову інформацію з порушеної теми, зверніться будь ласка до введення, опублікованим на сайті Netscape

Запуск JavaScript

Що необхідно зробити, щоб запускати скрипти, написані на мові JavaScript? Вам знадобиться браузер, здатний працювати з JavaScript – наприклад Netscape Navigator (починаючи з версії 2.0) або Microsoft Internet Explorer (MSIE – починаючи з версії 3.0). З тих пір, як обидва цих браузера стали широко поширеними, безліч людей отримали можливість працювати з скриптами, написаними на мові JavaScript. Безсумнівно, це важливий аргумент на користь вибору мови JavaScript, як засоби поліпшення ваших Web-сторінок.

Звичайно ж, перед читанням даного керівництва Ви повинні познайомитися з основами іншої мови – HTML. При цьому, можливо, Ви виявите, що багато хороших засобів діалогу можна створити, користуючись лише командами HTML. Щоб отримати додаткову інформацію про мову HTML, найкраще ініціювати пошук за ключовим словом ‘html’ на пошуковому сервері Yahoo.

Розміщення JavaScript на HTML-сторінці

Код скрипта JavaScript размещется безпосередньо на HTML-сторінці. Щоб побачити, як це робиться, давайте розглянемо наступний простий приклад:

З першого погляду приклад нагадує звичайний файл HTML. Єдине нововведення тут – конструкція:

Це дійсно код JavaScript. Щоб бачити, як цей скрипт працює, запишіть даний приклад як звичайний файл HTML і завантажте його в браузер, що має підтримку мови JavaScript.

А це результат виконання цього файлу (якщо Ви використовуєте браузер, який має підтримку JavaScript, то у Вас буде 3 рядки):

Це звичайний HTML документ.

Знову документ HTML.

Я повинен визнати, що даний скрипт не настільки корисний – те ж саме і більш просто можна було б написати на “чистому” мовою HTML. Я всього лише хотів продемонструвати Вам тег ознаки & lt; script>. Все, що стоїть між тегами & lt; script> і & lt; / script>, інтерпретується як код на мові JavaScript. Тут Ви також бачите приклад використання інструкції document. write () – однієї з найбільш важливих команд, використовуваних при програмуванні на мові JavaScript. Команда document. write () використовується, коли необхідно що-небудь написати в поточному документі (в даному випадку такому є наш HTML-документ). Так наша невелика програма на JavaScript в HTML-документі пише фразу “А це JavaScript!” .

Браузери без підтримки JavaScript

А як виглядатиме наша сторінка, якщо браузер не сприймає JavaScript? Браузери, що не мають підтримки JavaScript, “не знають” і тега & lt; script>. Вони ігнорують його і друкують усі виклики, які слідом за ним коди як звичайний текст. Іншими словами, читач побачить, як код JavaScript, наведений в нашій програмі, виявиться вписаний відкритим текстом прямо посеред HTML-документа. Зрозуміло, це не входило в наші наміри. На цей випадок є спеціальний спосіб приховати вихідний код скрипта від старих версій браузерів – ми будемо використовувати для цього тег коментарю з HTML – & lt;! – -> . В результаті новий варіант нашого вихідного коду буде виглядати як: В цьому випадку браузер без підтримки JavaScript буде друкувати: А без HTML-тега коментаря браузер без підтримки JavaScript надрукував би: Будь ласка зверніть увагу, що Ви не можете повністю приховати вихідний код JavaScript. Те, що ми тут робите, має на меті запобігти роздруківку коду скрипта на старих браузерах – однак тим не менше читач зможе побачити цьому код за допомогою пункту меню ‘View document source’. Не існує також способу приховати що-небудь від перегляду у вашому вихідному коді (і побачити, як виконаний той чи інший трюк).

Події

Події та обробники подій є дуже важливою частиною для програмування на мові JavaScript. Події, головним чином, ініціюються тими чи іншими діями користувача. Якщо він клацає за деякою кнопці, відбувається подія “Click” . Якщо покажчик миші перетинає яке-небудь посилання гіпертексту – відбувається подія MouseOver . Існує кілька різних типів подій.

Ми можемо змусити нашу JavaScript-програму реагувати на деякі з них. І це може бути виконано за допомогою спеціальних програм обробки подій. Так, в результаті клацання по кнопці може створюватися випадає вікно. Це означає, що створення вікна повинна бути реакцією на подію щілинка – Click . Програма – оброблювач подій, яку ми повинні використовувати в даному випадку, називається onClick . І вона повідомляє комп’ютера, що потрібно робити, якщо відбудеться дана подія. Наведений нижче код представляє простий приклад програми обробки події onClick :

Даний приклад має декілька нових особливостей – розглянемо їх по порядку. Ви можете тут бачити, що ми створюємо якусь форму з кнопкою (як це робити – проблема мови HTML, так що розглядати це тут я не буду). Перша нова особливість – в тегу & lt; input>. Як ми вже говорили, цей атрибут визначає, що відбувається, коли натискають на кнопку. Таким чином, якщо має місце подія Click . комп’ютер повинен виконати виклик alert (‘Yo’) . Це і є приклад коду на мові JavaScript (Зверніть увагу, що в цьому випадку ми навіть не користуємося тегом & lt; script>).

Функція alert () дозволяє Вам створювати випадають вікна. При її виклику Ви повинні в дужках задати якусь рядок. У нашому випадку це ‘Yo’ . І це якраз буде той текст, що з’явиться у випадаючому вікні. Таким чином, коли читач коли клацає на кнопці, наш скрипт створює вікно, що містить текст ‘Yo’ .

Деякий замішання може викликати ще одна особливість даного прикладу: в команді document. write () ми використовували подвійні лапки (“), а в конструкції alert () – тільки одинарні. Чому? У більшості випадків Ви можете використовувати обидва типи лапок. Однак в останньому прикладі ми написали – тобто ми використовували і подвійні, і одинарні лапки. Якби ми написали Yo “)” . то комп’ютер не зміг би розібратися в нашому скрипті, оскільки стає неясно, до якої з частин конструкції має відношення функція обробки подій onClick, а до якої – ні. Тому Ви і змушені в даному випадку перемежати обидва типи лапок. Не має значення, в якому порядку Ви використовували лапки – спершу подвійні, а потім одинарні або навпаки. Тобто Ви можете точно так же написати і.

Ви можете використовувати в скрипті безліч різних типів функцій обробки подій. Відомості про деякі з них ми отримаємо в даному описі, однак не про всіх. Тому звертайтеся будь ласка до відповідного довідника, якщо Ви хочете дізнатися, які обробники подій ще існують.

Отже, якщо Ви використовуєте браузер Netscape Navigator, то випадає вікно містить текст, що був переданий функції JavaScript alert . Таке обмеження накладається з міркувань безпеки. Таке ж випадає вікно Ви можете створити і за допомогою методу prompt (). Однак у цьому випадку вікно буде відтворювати текст, введений читачем. А тому, скрипт, написаний зловмисником, може прийняти вигляд системного повідомлення і попросити читача ввести якийсь пароль. А якщо текст поміщається в випадаюче вікно, то тим самим читачеві дається зрозуміти, що дане вікно було створено web-браузером, а не вашою операційною системою. І оскільки дане обмеження накладено з міркувань безпеки, Ви не можете взяти і просто так видалити повідомлення, що з’явилося.

Функції

У більшості наших програм на мові JavaScript ми будемо користуватися функціями. Тому вже тепер мені необхідно розповісти про цю важливу елементі мови.

У більшості випадків функції являють собою лише спосіб зв’язати разом кількох команд. Давайте, наприклад, напишемо скрипт, що друкує якийсь текст три рази поспіль. Для початку розглянемо простий підхід: І такий скрипт напише наступний текст три рази. Якщо подивитися на вихідний код скрипта, то видно, що для отримання необхідного результату певна частина його коду була повторена три рази. Хіба це ефективно? Ні, ми можемо вирішити ту ж задачу ще краще. Як щодо такого скрипта для вирішення того ж самого завдання. У цьому скрипті ми визначили якусь функцію, що складається з наступних рядків: Усі команди скрипта, що знаходяться всередині фігурних дужок – <> – належать функції myFunction () . Це означає, що обидві команди document. write () тепер пов’язані воєдино і можуть бути виконані при виклику зазначеної функції. І дійсно, нашому прикладі є три виклики цієї функції – Можна побачити, що ми написали рядок myFunction () три рази відразу після того, як дали визначення самої функції. Те естькак раз і зробили три виклики. В свою чергу, це означає, що вміст цієї функції (команди, вказані в фігурних дужках) було виконано тричі.

Оскільки це досить простий приклад використання функції, то у Вас міг виникнути питання, а чому власне ці функції настільки важливі в JavaScript. По прочитанні даного опису Ви звичайно ж зрозумієте їх користь. Саме можливість передачі змінних при виконанні функції надає нашим скриптам справжню гнучкість – що це таке, ми побачимо пізніше.

Функції можуть також використовуватися в спільно з процедурами обробки подій. Розглянемо наступний приклад: Here you can test this example:

Тут при натисненні на кнопку здійснюється виклик функції calculation () . Як можна помітити, ця функція виконує якісь обчислення, користуючись змінними x . y і result . Змінну ми можемо визначити за допомогою ключового слова var . Змінні можуть використовуватися для зберігання різних величин – чисел, рядків тексту і т. д. Так рядок скрипта var result = x + y; повідомляє браузеру про те, що необхідно створити змінну result і помістити туди результат виконання арифметичної операції x + y (тобто 5 + 12). Після цього в змінний result буде розміщено число 17 . В даному випадку команда alert (result) виконує те ж саме, що і alert (17) . Іншими словами, ми отримуємо що випадає вікно, в якому написано число 17.

Incoming search terms:

  • javascript- що це
  • можливості javascript
  • розмiщення коду javascript на сторiнцi
  • розміщення скрипту в html