Ruthenia.Info

» Мої сторінки
» записи
» новий запис
Публічні сторінки
» Збирач даних
» джерела даних
» потоки новин
Автор: pavlo
публічний запис
 
Програмування для новачків — 2. Знайомство з JavaScript
1.0 Віртуальна машина (ВМ) JavaScript (спрощено)
2.0 Константи
2.1 Змінні, операція присвоювання
2.2 Вирази, порядок виконання операцій, результат
2.3 Функції, операції вводу-виводу, виклик браузерного JS
2.4 Послідовне виконання команд
1.1 Елементи стилю програмування
1.2 Елементи технології програмування
1.3 Домашнє завдання
2.0
2.1
2.2

 

JavaScript (або JS) — це мова, яка масово використовується при створенні WWW-сторінок (так званий браузерний JS) і, відтак, володіння нею необхідне практично кожному web-програмісту. Ця ж мова віднедавна пристосована і для створення WWW-серверів (система node.js), а дуже близький її варіянт під назвою ActionScript застосовується для програмування AdobeFlash.

Корисна мова, словом — почнемо з неї. Зауважу, що JavaScript в дечому схожий на мову Java, але це зовсім, зовсім різні системи програмування.

1.0 Віртуальна машина (ВМ) JavaScript (спрощено)

А шо таке віртуальна машина??? А прочитайте вступний допис: http://ruthenia.info/c/r.pl?c_=not&c_=!6051

2.0 Константи

Предмети, до яких має доступ ВМ JavaScript звуться об’єктами. На початках ми матимемо справу тільки з невеликою їх частиною:

- цілі числа (так звані ’’’цілочисельні константи’’’); - %25%254undefined%25%25%25 ("невідомо що", теж константа).

Взагалі, ’’’константами’’’ в програмуванні звуться предмети, які ми не можемо змінити. Коли, скажімо, ми додаємо два числа, вони самі по собі залишаються такими ж, як і були, але після додавання у нас з’являється ще одне число, рівне їх сумі (і теж ніяким чином не може бути змінене).

Константа %25%254undefined%25%25%25 необхідна для того, зокрема, щоб показувати значення операцій, які ВМ не годна виконати. Точнісінько так само, як і в житті: "Порахуй чайники на столі? — Два (число, результат успішно виконаного підрахунку) — А тепер порахуй зірки на небі? — Тишо, дебіл? (%25%254undefined%25%25%25, результат невдалого підрахунку)".

Синім кольором надалі виділятимуться елементи реального програмного коду. Чорні вставки в фігурних дужках — це неформальний опис того, що повинно бути вписане у відповідне місце коду. Наприклад: {число} %25%254+%25%25%25 {число} — це додавання двох чисел, як то %25%254 0 + 1125%25%25%25 або %25%25450 + -333%25%25%25.

2.1 Змінні, операція присвоювання

В програмуванні можна двома способами вказувати на предмети.

Один спосіб — це безпосередньо описати в програмі предмет, як такий (такого роду звертання звуться ’’’звертаннямм за значенням’’’). Наприклад, можна включати в текст програми константи, як то %25%2541%25%25%25, %25%254-2%25%25%25, %25%254undefined%25%25%25.

Другий спосіб — вказати на місце, в якому знаходиться потрібний предмет (такого роду звертання звуться ’’’звертаннями за посиланням’’’). Кожне таке місце зветься ’’’змінною’’’. В JS, як і в багатьох инших мовах програмування, кожна змінна позначається власним іменем, яке може складатись з латинських літер, цифр та знаків підкреслювання і повинно починатись не з цифри. Великі і малі літери при цьому вважаються відмінними. Ось, наприклад, три різних правильних імени змінних в JS: %25%254Oh_%25%25%25, %25%254oh_%25%25%25, %25%254ni_khrina_sobi%25%25%25.

Можна уявляти собі нашу ВМ як величезну шафу, яка складається з ’’’комірок пам’яти’’’, на кожній з яких написане її ім’я (ім’я змінної). Справа програміста — брати предмети з комірок, проводити різні операції з ними і, по потребі, складати предмети в шафу на зберігання.

Коли потрібно покласти предмет в комірку пам’яти, застосовується ’’’операція присвоювання’’’, яка в JS позначається знаком %25%254=%25%25%25. Наприклад: %25%254oh_ = 555%25%25%25 — команда, згідно якої в комірку з іменем %25%254oh_%25%25%25 кладеться число %25%254555%25%25%25. Фахово ця операція зветься так: ’’’змінній %25%254oh_%25%25%25 присвоюється значення %25%254555%25%25%25’’’.

Коли ж потрібно взяти предмет з комірки, ми просто пишемо в програмі відповідне ім’я змінної. Наприклад, після виконання присвоювання з попереднього абзацу, ми можемо записати операцію додавання %25%254oh_ + 1%25%25%25, результатом якої буде число %25%254556%25%25%25 (звертаємось за посиланням до змінної %25%254oh_%25%25%25 — там знаходимо покладене раніше число %25%254555%25%25%25, потім звертаємось за значенням до числа %25%2541%25%25%25, потім додаємо два отриманих числа і – ура!)

Важливий приклад:

%25%254b = a%25%25%25 — ця команда бере значення з комірки (змінної) %25%254a%25%25%25 і кладе це значення в комірку (змінну) %25%254b%25%25%25. На відміну від звичної математичної нотації, ніяке порівння значень тут не робиться.  

2.2 Вирази, порядок виконання операцій, результат

’’’Вираз’’’ в програмуванні — це цілковитий аналог відомого з середньої школи математичного виразу, як то %25%254555 + 2 * (3 + 555)%25%25%25, або %25%254oh_ + 2 * (3 + oh_)%25%25%25 — такі ж основні операції %25%254+%25%25%25, %25%254-%25%25%25, %25%254*%25%25%25 (поки що обійдемось без ділення), такий же порядок виконання (спершу множимо, а потім додаємо-віднімаємо(, такі ж можливості розстановки скобок.

Як і в математиці, у виразах можна використовувати функції, але займатимемось ними дещо згодом.

Результати виразів обчислюються практично так само, як в математиці, але слід звернути увагк на те, що обчислений результат виразу, як правило, сдід одразу ж куди-небудь записати (теж як в математиці, між иншим). Для цього використовується присвоювання, наприклад:

%25%254lalalala = 555 + 2 * (3 + 555)%25%25%25 — змінній %25%254lalalala%25%25%25 таким чином присвоюється значення %25%2541671%25%25%25.

Якщо у виразі з арифметичними операціями трапиться значення %25%254undefined%25%25%25 (приклад такого виразу: %25%254undefined + 7%25%25%25), результатом буде константа %25%254NaN%25%25%25 ("Not a Number"). Ми ніколи не будемо її використовувати, але не лякайтесь, коли таке випадково вискочить на екран. В програмуванні буває ще й не таке.

Операція присвоювання також дає результат — це значення, присвоєне змінній. Отже, можна записати отак от: %25%254b = 2 + (a = 1)%25%25%25 — при цьому змінінй %25%254a%25%25%25 буде присвоєне значення %25%2541%25%25%25, результат цього (%25%2541%25%25%25) буде додано до числа %25%2542%25%25%25, а отримане число %25%2543%25%25%25 буде присвоєно змінній %25%254b%25%25%25.

2.3 Функції, операції вводу-виводу, виклик браузерного JS

Не спеши делать выводы, проверь вводы (Бек)

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

Фнкція %25%254alert(%25%25%25{вираз}%25%254)%25%25%25 при виконанні в браузерному JS створює попап-вікно, в якому записане обчислене значення виразу (ще виводиться заголовок і пропозиція заборонити такі вікна надалі — іґноруємо все це). При цьому результатом виконання функції завжди є %25%254undefined%25%25%25 (яке ніде далі не потрібне, але якщо програміст хоче, його також можна використовувати у виразах).

Такого роду функції в програмуванні звуться ’’’операціями вводу-виводу’’’ і призначені для комунікації між комп’ютером і людиною (або иншим комп’ютером). %25%254alert()%25%25%25 — це ’’’вивід даних’’’, операції ж вводу освоюватимемо пізніше.

Отже, для того, щоб виконати JS-програму на комп’ютері за допомогою браузерного JS, слід зробити наступне (поки без пояснень, просто зробіть так):

  • створіть файл з розширенням .htm або .html і запишіть в нього наступний текст (це робиться за допомогою довільного текстового редактора, наприклад, в notepad.exe):
  • %25%254<html> <script> %25%25%25{код_програми}%25%254 </script> </html>%25%25%25;
  • запустіть інтернет-браузер і відкрийте в ньому створений файл;
  • enjoj!
  • Ось приклад файлу, за допомогою якого можна вивести значення наведеного вище виразу: %25%254<html> <script> alert(555 + 2 * (3 + 555)) </script> </html>%25%25%25

    Або — ось цей файл в мережі: http://ruthenia.info/txt/pavlo/pr/1.htm

    Всі свої приклади я перевіряю за допомогою браузера Chrome під Windows XP. В инших браузерах деякі з прикладів можуть виконуватись инакше — це прикро, але така вже є сувора реальність. В практичному програмуванні, звісно, доводиться перевіряти коди в усіх можливих системах (в даному випадку — в усіх популярних браузерах), але поки ми не витрачатимемо час на це. Отже — все має працювати під Chrome, а якщо ні — звертайтесь :-)

    2.4 Послідовне виконання команд

    Програма, в більшості випадків, складається з послідовності команд (приклад вище — виняток з цього правила, в ньому є єдина команда %25%254alert(555 + 2 * (3 + 555))%25%25%25). Послідовні команди при цьому повинні розділятись крапками-комами. Ось, наприклад:

    %25%254 oh_ = 555; alert(oh_ + 2 * (3 + oh_)); oh_ = 1; alert(oh_ + 2 * (3 + oh_)) %25%25%25

    Ця програма робить наступне: - присвоює значення змінній; - обчислює вираз, беручи присвоєне значення, і виводить результат; - в цей момент браузер чекатиме, поки Ви закриєте віконце виводу; - присвоює инше значення тій же змінній; - обчислює той же вираз, беручи присвоєне значення, і виводить результат;

    Оскільки значення у змінній перед першим і другим обчисленням виразу різні — значення виразу теж не співпадуть.

    Спробуйте у браузері!

    1.1 Елементи стилю програмування

    Є різні стилі запису імен змінних. Особисто я використовую наступний:

    - тільки маленькі літери; - окремі слова і імені розділяються знаком підкреслювання.

    Дотримуюсь думки, що ’’’відмова від великих літер в іменах’’’ застерігає від зайвих проблем типу "забув, чи великими буквами пишеться це слово в імені". Часом це дрібна морока — досить просто глянути в програму, як там правильно написано, часом же — велика проблема, коли змінні, записані з відмінністю одної літери, виявляються різними і програма тупо не працює (при цьому — жодної діяґностики, програма може залишатись правильною по формі). А найкраще, по-моєму, обходитись і без зайвих морок, і без зайвих проблем.

    Крапка з комою, яко роздільик команд, не обов’язкова після останньої команди в програмі. Але не буде жодної шкоди, якщо її туди записати (в деяких мовах це навіть є обов’язковим). Більше того, такий запис застереже від помилки, коли після останньої команди пишеться ще одна, крапка з комою забувається, система матюкається, час згаяно. Отже, раджу: ’’’завершуйте кожну команду крапкою-комою’’’, будь вона навіть остання.

    1.2 Елементи технології програмування

    Прочитайте ще раз, уважно і по-серйозному: http://ruthenia.info/c/r.pl?c_=not&c_=!6051#5

    Це важливо.

    1.3 Домашнє завдання

    2.0

    Обрахувати і вивести суму чисел від 1 до 10.

    2.1

    Виконати в своїй голові (це також ВМ) наступну програму (всі без винятку правила виконання описані вище):

    %25%254 a = 5; b = 3; alert(b); a = -5; alert(a); alert(a + b - 10); c = alert(5); alert(c); alert(a + c); %25%25%25

    2.2

    Написати на JavaScript "програму для чайників з попереднього домашнього завдання" — http://ruthenia.info/c/r.pl?c_=not&c_=!6051#6. Тобто присвоїти змінним %25%254live_misce%25%25%25 і %25%254prave_misce%25%25%25 якісь значення (тут же вивести їх для перевірки), а потім поміняти ці значення місцями (і знову вивести для перевірки).


     

     
    про цей сервер
    правила публікацій

    dumaj.org.ua
    Відкрито: 27.01.2017