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

Що таке JavaScript

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

JavaScript - це ніяк не Java!

Багато людей вважають, що JavaScript - це те ж саме, що також Java, лише тільки тому, що дані мови мають схожі назви. На самому занятті це не так. Я вважаю, що зараз стане надмірно ілюструвати Вам все відмінності між цими мовами - так що запам'ятайте лише тільки те, що JavaScript - це ніяк не Java.
Щоб отримати додаткову інформацію з порушеної теми, зверніться будь ласка до введення, опублікованому на сайті Netscape Smile happy

запуск 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><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> document.write("А это JavaScript!") </script><br>Опять акт HTML. </body></html> <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> document.write("А это JavaScript!") </script><br>Опять акт HTML. </body></html> З головного погляду зразок підказує звичайний файл HTML. Єдине нововведення тут - система:
<script language="JavaScript"> document.write("А это JavaScript!") </script> Це істинно код JavaScript. Щоб спостерігати, як цей скрипт працює, запишіть цей зразок як звичайний файл HTML також завантажте його в браузер, який має підтримку мови JavaScript.
А це результат виконання цього файлу (якщо Ви використовуєте браузер, який має підтримку JavaScript, то у Вас стане 3 рядки):

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

Знову акт HTML.

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

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

А як стане виглядати наша сторінка, якщо браузер не приймає JavaScript? Браузери, ніяк не мають підтримки JavaScript, "не знають" також тега <script>. Вони ігнорують його також друкують усі виклики, які слідом за ним коди як звичайний текст. Іншими словами, читець побачить, як код JavaScript, наведений в нашій програмі, виявиться вписаний відкритим текстом безпосередньо посеред HTML-документа. Зрозуміло, це ніяк не вступало в наші задуму. На цей пригода є спеціалізований засіб приховати вихідний код скрипта від старих версій браузерів - ми будемо використовувати для цього тег коментаря з HTML - <! - ->. В результаті новоспечений варіація нашого вихідного коду стане виглядати як: <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> <!-- hide from old browsers document.write("А это JavaScript!") // --> </script><br>Опять акт HTML. </body></html> <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> <!-- hide from old browsers document.write("А это JavaScript!") // --> </script><br>Опять акт HTML. </body></html> <html><body><br>Это обычный HTML документ. <br> <script language="JavaScript"> <!-- hide from old browsers document.write("А это JavaScript!") // --> </script><br>Опять акт HTML. </body></html> У цьому випадку браузер без підтримки JavaScript стане друкувати: Это обычный HTML документ. Опять акт HTML. Это обычный HTML документ. Опять акт HTML. А без HTML-тега коментаря браузер без підтримки JavaScript надрукував би: Это обычный HTML документ. document.write("А это JavaScript!") Опять акт HTML. Это обычный HTML документ. document.write("А это JavaScript!") Опять акт HTML. Будь ласка, зверніть увагу, що Ви ніяк не можете повністю приховати вихідний код JavaScript. Те, що ми тут робите, володіє метою запобігти роздруківку коду скрипта на старих браузерах - але тим не менше читець зможе побачити цьому код за допомогою пункту меню 'View document source'. Не існує схоже способу приховати що-небудь від перегляду в вашому вихідному коді (і побачити, як виконаний той або інший трюк).

події

Події також обробники подій є дуже важливою частиною для програмування на мові JavaScript. Події, першим чином, ініціюються тими чи іншими діями користувача. Якщо він клацає за деякою кнопці, виникає подія "Click". Якщо покажчик миші перетинає будь-яку посилання гіпертексту - виникає подія MouseOver. Існує кілька різних типів подій.
Ми можемо змусити нашу JavaScript-програму реагувати на деякі з них. Додатково це може бути виконано за допомогою спеціальних програм обробки подій. Так, в результаті клацання по кнопці може створюватися випадає вікно. Це означає, що створення вікна повинна бути реакцією на подію щілинка - Click. Програма - оброблювач подій, яку ми повинні використовувати в даному випадку, іменується onClick. Додатково вона повідомляє комп'ютера, що потрібно робити, якщо станеться ця подія. Наведений нижче код представляє нехитрий зразок програми обробки події onClick: <form><input type="button" value="Click me" onClick="alert('Yo')"></form>

Даний зразок володіє кілька нових особливостей - розглянемо їх за розпорядком. Ви можете тут спостерігати, що ми створюємо якусь форму з кнопкою (як це діяти - проблема мови HTML, так що розглядати це тут ми ніяк не буду). Перша нова особливість - onClick = "alert ( 'Yo')" в тезі <input>. Як ми вже говорили, цей властивість визначає, що відбувається, в який час натискають на кнопку. Таким чином, якщо володіє приміщення подія Click, комп'ютер змушений здійснити телефонний дзвінок alert ( 'Yo'). Це також є зразок коду на мові JavaScript (Зверніть увагу, що в цьому випадку ми навіть ніяк не використовуємо тегом <script>).
Функція alert () дозволяє Вам створювати випадають вікна. При її виклику Ви повинні в дужках поставити якусь рядок. У нашому випадку це 'Yo'. Додатково це як раз стане той текст, що з'явиться в випадаючому вікні. Таким чином, в який час читець в який час клацає на кнопці, наш скрипт створює вікно, що містить текст 'Yo'.
Деяке замішання може викликати ще одна особливість даного зразка: в команді document.write () ми використовували подвійні лапки ( "), тільки в системи alert () - тільки одинарні. Чому? У більшості випадків Ви можете використовувати обидва типи лапок. Все ж в завершальному зразку ми написали onClick = "alert ( 'Yo')" - тобто ми використовували також подвійні, також одинарні лапки. Якби ми написали onClick = "alert (" Yo ")", то комп'ютер ніяк не зміг би розібратися в нашому скрипті, оскільки робиться неясно, до якої з елементів системи володіє відношення функція обробки подій onClick, тільки до якої - ні. Тому Ви також змушені в даному випадку перемежовувати обидва типи лапок. Чи не володіє значення, в якому порядку Ви використовували лапки - спершу подвійні, тільки потім одинарні або навпаки. тобто Ви можете точно так же написати також onClick = 'alert ( "Yo")'.

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

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

функції

У більшості наших програм на мові JavaScript ми будемо використовувати функціями. Тому вже нині мені необхідно розповісти про це важливий елемент мови.
У більшості випадків функції являють собою лише тільки засіб зв'язати разом кількох команд. Давайте, приміром, напишемо скрипт, що друкує якийсь текст три рази поспіль. Для витоку розглянемо нехитрий підхід: <html><script language="JavaScript"><!-- hide document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); // --></script></html> <html><script language="JavaScript"><!-- hide document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); // --></script></html> <html><script language="JavaScript"><!-- hide document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); // --></script></html> І такий скрипт напише наступний текст Доброе дело пожаловать на мою страницу! Это JavaScript! Доброе дело пожаловать на мою страницу! Это JavaScript! три рази. Якщо подивитися на вихідний код скрипта, то видно, що для отримання необхідного результату певна частка його коду була повторена три рази. Невже це ефективно? Ні, ми можемо вирішити ту ж задачу ще краще. Як щодо такого скрипта для вирішення того ж самого завдання ?: <html><script language="JavaScript"><!-- hide function myFunction() { document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); } myFunction(); myFunction(); myFunction(); // --></script></html> <html><script language="JavaScript"><!-- hide function myFunction() { document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); } myFunction(); myFunction(); myFunction(); // --></script></html> <html><script language="JavaScript"><!-- hide function myFunction() { document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); } myFunction(); myFunction(); myFunction(); // --></script></html> У цьому скрипті ми визначили певну функцію, що складається з наступних рядків: function myFunction() { document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); } function myFunction() { document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); } function myFunction() { document.write("Добро пожаловать на мою страницу!<br>"); document.write("Это JavaScript!<br>"); } Всі команди скрипта, що знаходяться всередині фігурних дужок - {} - належать функції myFunction (). Це означає, що обидві команди document.write () нині пов'язані разом також можуть бути виконані при виклику зазначеної функції. Додатково дійсно, нашому зразку є три виклики цієї функції - Можна побачити, що ми написали рядок myFunction () три рази разом пізніше того, як дали визначення самої функції. Те естькак одного разу також зробили три виклики. У свою чергу, це означає, що вміст цієї функції (команди, вказані в фігурних дужках) було виконано тричі.
Оскільки це досить нехитрий зразок використання функції, то у Вас міг виникнути завдання, тільки чому власне ці функції настільки важливі в JavaScript. Після прочитання даного опису Ви звичайно ж зрозумієте їх користь. Саме можливість передачі змінних при виконанні функції надає нашим скриптам справжню гнучкість - що це таке, ми побачимо пізніше.

Функції можуть схоже використовуватися в спільно з процедурами обробки подій. Розглянемо наступний приклад: <html><head><script language="JavaScript"><!-- hide function calculation() { var x= 12; var y= 5; var result= x + y; alert(result); } // --></script></head><body><form><input type="button" value="Calculate" onClick="calculation()"></form></body></html> <html><head><script language="JavaScript"><!-- hide function calculation() { var x= 12; var y= 5; var result= x + y; alert(result); } // --></script></head><body><form><input type="button" value="Calculate" onClick="calculation()"></form></body></html> <html><head><script language="JavaScript"><!-- hide function calculation() { var x= 12; var y= 5; var result= x + y; alert(result); } // --></script></head><body><form><input type="button" value="Calculate" onClick="calculation()"></form></body></html> 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.