Javascript основні елементи
Доброго дня початківці програмісти.
У цьому уроці познайомимося з основними елементами Javascript і напишемо перші скрипти.
Зубрить тут нічого не треба, треба лише уважно прочитати, щоб відклалося в думці - які елементи є в цій мові програмування, як вони виглядають (пишуться), і які події виконують.
Цього спочатку буде достатньо, тому що відразу "в'їхати" в те, для чого і навіщо, все одно не вийде, та й не треба
Спробувати пограти зі значеннями, тобто попрактикуватися для кращого закріплення та розуміння матеріалу.
Урок, однак, буде великий, тому не варто намагатися освоїти його з ходу. Краще взяти в закладку, і просуватися в міру розуміння.
Щоб подивитися, що і як працює, треба зробити деякі приготування.
По-перше, треба створити на комп'ютері директорію (папку), наприклад, у бібліотеці Документи, в якій ми будемо зберігати, а потім відкривати написані файли.
У цій директорії створимо ще дві папки:
1. images в яку треба буде покласти хоча б одну картинку для використання під час тестування.
2. js в яку будемо поміщати файли зі скриптами, щоб протестувати їхнє зовнішнє підключення.
Додаю, що наведені нижче скрипти можна розміщувати як у тезі head, так і в тезі body. Поки що без різниці.
document.write
Об'єкт document з методом write просто виведе на екран все, що ви в ньому оголосите, чи то просто рядок з текстом, чи html теги зі стилями.
Цей скрипт виведе велике заголовок червоного кольору.
Взагалі стилі в jvascript задаються інакше, і ми це розглянемо в наступному уроці, але поки до нього не дійшли, зробимо так як робиться в html.
До того ж, ценаочний приклад того, що jvascript сумісний із html.
Привіт javascript
Виведе заголовок і з нового рядка картинку.
Тепер трохи зупинимося на структурі коду, саме на тих моментах, які є актуальними для всіх елементів.
1. Все, що виводиться на екран, полягає в круглі дужки.
2. Рядок полягає в лапки, числа без лапок. Якщо в рядку є внутрішні лапки, то вони виконуються апострофами. Якщо внутрішніх лапок немає, то й основні можна виконати апострофами.
3. Рядок закінчується крапкою з комою, хоча в більшості випадків код працюватиме і без них, оскільки інтерпретатор сприймає перенесення рядка як закінчення. Але не завжди.
Тому, щоб не шукати надалі дрібну помилку, краще закінчувати рядок крапкою з комою завжди.
Коментарі
Коментарі необхідні в коді для покращення його розуміння.
Команда alert відноситься до функцій взаємодії з користувачем. Вона виводить модальне вікно з повідомленням, і призупиняє виконання скрипту, поки користувач не натисне ОК.
prompt також функція взаємодії, але, на відміну від alert, виводить модальне вікно з полем для введення тексту і кнопками ОК і CANCEL.
Користувачеві задається питання і пропонується ввести відповідь, після чого натиснути ОК, або нічого не вводити і натиснути CANCEL (скасування)
Виконання сценарію припиняється до відповіді користувача.
confirm ще одна функція взаємодії. Вона виводить модальне вікно з питанням і двома кнопками ОК і CANCEL, і чекає на відповідь користувача.
Ці три функції є вбудованими, тому зовнішній вигляд та точка виведення модальних вікон у різних браузерах можуть відрізнятися.
Змінні
Змінні вjavascript оголошено ключовим словом var
Ім'я змінної може складатися з будь-яких літер латиниці, цифр та символів $ та _. Інші символи не допустимі.
Не допускається початок імені із цифри.
Регістр літер на ім'я має значення. Так W і w будуть два різні назви.
Оператор присвоєння = надає змінної той обсяг даних, що до неї внесе програміст.
Строкові дані полягають у лапки, числові без лапок. Якщо число буде укладено в лапки, воно буде інтерпретуватися як рядок.
До даних можна вносити не лише літери та цифри, а й html розмітку зі стилями.
Виведе велике заголовок.
Константа – це змінна, яка ніколи не змінюється.
Використовуються вони для зручності написання та читання коду. Зазвичай до них вносяться дані, що не змінюються протягом всієї програми, але до яких не раз доводиться звертатися.
Пишеться константа великими літерами, тому добре помітна в коді.
Функція – це певний обсяг коду, який виконується у певному місці, або кількох місцях програми.
Причому код достатньо написати один раз, а потім як завгодно викликати його на ім'я функції.
Функції бувають вбудовані та користувальницькі. Приклади вбудованих функцій ми розглянули вище (alert, prompt, confirm).
Як ви вже напевно здогадалися, вносити в них якийсь код не треба, тому що він закладений за замовчуванням, і програміст не може втрутитися в нього і щось змінити.
Вбудовану функцію досить викликати, тобто написати її ім'я, і закладене у ній дію буде виконано.
Функції користувача створює і оголошує програміст, тобто ми з вами.
Оголошується функція ключовим словом function, після якого пишеться ім'я функції такруглі дужки, в які вставляють параметри, але про них трохи нижче.
Потім ставляться фігурні дужки, в яких і знаходиться код, який буде виконуватися при виклику даної функції.
Бажано, щоб ім'я функції хоч якось відображало дію, яке вона виконує.
Ім'я функції у цьому прикладі написано з підкресленням, оскільки перше слово з однієї літери.
А взагалі-то в jvascrip всі назви, що складаються з двох і більше слів, пишуться наступним чином: перше слово з маленької літери, а решта з великої і все разом.
Тобто якщо додати одну літеру до першого слова нашої назви, то вона виглядатиме так: iaAmLearningJs.
Ім'я функції може складатися з будь-яких літер, цифр та символів $ та _. Інші символи неприпустимі, а кирилиця небажана.
Ім'я функції може складатися з однієї літери або символу, але не цифри і не може починатися цифрою.
Ну і давайте створимо функцію, яка виводитиме на екран ці слова в тих місцях коду, де буде записано її ім'я.
Я вчу яваскрипт
Параметри функції
Параметр вноситься в круглі дужки наступні за назвою функції. Він додає дані до наявних і може змінюватися при кожному виклику функції.
Під час наступного дзвінка можна змінити параметр на 6 днів, потім на 9 днів і т.д.
У цьому прикладі зверніть увагу на синтаксис. У рядку Я вчу яваскрипт, між останнім словом і лапкою, що закриває, є пробіл.
Цей пробіл відображається на екрані. Без нього слова рядка і параметра виведуть разом.
Рядок і параметр з'єднуються оператором +, так само з пробілами до і після плюсу, але цих прогалин на екрані не видно.
Це означає, що на початку треба тільки вказати, що у функції є параметр, назва не важливо, а вже вНаприкінці написати точне значення цього параметра.
Глобальні та локальні змінні
Змінні бувають глобальними та локальними.
Змінна локальна, якщо вона розташована в тілі функції.
Змінна є глобальною, якщо вона розташована поза функцією.
Основні терміни та поняття:
Оператор - символ визначальний дію після якого виходить результат.
Операнд — те, до чого застосовується оператор
Бінарний оператор — оператор, що застосовується до двох операндів. Типовий приклад - додавання: два доданки (операнди), між ними символ + (оператор).
Унарний оператор — оператор, що застосовується до одного операнда. Типовий приклад - від'ємне число: символ - (оператор), саме число (операнд).
Деякі оператори нам уже знайомі із середньоосвітньої школи.
Це додавання «+», віднімання «-«, множення «*», розподіл «/», так само «=», більше «>», менше « var one = 5;
Задаємо початкову умову програми: якщо у змінній цифра 5, то відкривається сторінка, на яку Ви хочете потрапити.
Оператор порівняння в if читається як: строго одно.
В цьому випадку Ви потрапляєте куди треба, але спробуйте змінити цифру в змінній, і на екрані нічого не відобразиться.
Тобто оператор визначить невідповідність та програма не працюватиме.
Тепер введемо продовження умови - else, в якому вказується варіант роботи програми, якщо перший виявиться неправильним.
Введемо в змінну цифру 4 і додамо блок else
Оператор порівняння в блоці else читається як: не рівне.
Тут перша умова буде не правильною, і на екран виведеться попередження з блоку else.
В основному if - else використовується в роботі функцій.
Цикл використовується для того, щобпровести неодноразово якусь однотипну дію.
Вигляд циклу або його синтаксис дуже схожий на синтаксис функції або оператора if
Спочатку пишеться ключове слово for, потім у круглих дужках вказується умова циклу, після чого у фігурних дужках прописується завдання циклу.
Наприклад за умови циклу внесемо змінну, значення якої має збільшуватися протягом циклу на одиницю.
В умові зазначено, що змінна i спочатку дорівнює нулю, цикл виконуватиметься доки значення змінної буде менше 13, при кожному кроці значення змінної буде збільшуватися на одиницю.
У заданні циклу або в тілі циклу пропишемо виведення змінної i на екран.
А щоб результат на екрані виглядав краще, тобто щоб цифри не злилися, на висновок на екран додамо спецсимвол html (нерозривний пробіл)
for (var i = 0; i
Цикл while
Взагалі по суті це такий же цикл, але синтаксис у нього трохи інший, що в деяких випадках має значення.
В результаті те ж саме
Масив - це теж змінна, але якщо в простій змінній міститься один блок даних, то в масиві їх декілька.
Тобто, якщо в змінну додати ще хоча б одне значення, то це вже масив.
Синтаксис масиву відрізняється тим, що дані, що надаються змінною, полягають у квадратні дужки і розділяються між собою комами.
За замовчуванням кожен елемент масиву має порядковий номер, до якого до цього елемента можна звернутися. Відлік починається з нуля й надалі по порядку.
Звичайно те, що перший елемент нуль, а не одиниця, трохи не зручно, але така воля творців JavaScript.
Об'єкт - це як і масив, інструмент для роботи з багатьма даними. У чому відмінність ви зараззрозумієте.
Допустимо є кілька змінних з будь-якими значеннями:
У всіх цих змінних містяться дані про якийсь об'єкт, будь то людина, автомобіль або організація.
Щоб все це впорядкувати і створюється об'єкт.
По суті - це теж змінна, яка поєднує в собі всі ті змінні, що були на початку, але в об'єкті вони називаються властивостями об'єкта.
Властивості об'єкта поділяються між собою комами.
На цьому, мабуть, поки що достатньо, хоча це лише мала частина, але всю інформацію відразу не те що освоїти, але навіть просто сприйняти неможливо.
Але хочу пояснити ще одне поняття, яке для новачка може становити складне становище, але роз'яснювати його ніхто не вважає за потрібне.
Це поняття "повертає", і воно як повітря є у всіх операціях. У програмуванні майже всі елементи щось повертають. Що це означає?
Допустимо є певний обсяг даних (змінна масив) з яким проводиться операція, тобто застосовується певний оператор.
Це може бути функція, метод, властивість циклу.
Після дій оператора з обсягом даних утворюється певний результат, і це вже нові дані, які і повертає оператор.
Причому початкові дані після операції можуть залишатися незмінними, а можуть змінюватися, але вони теж нікуди не подіються, тобто залишаються в незмінному або зміненому вигляді.
Надалі можуть використовуватися як початкові, і повернуті, залежно від цього, що буде потрібно програмісту.