23 листопада 2022 р.

Створення першої програми на Javascript Частина 1


    Сьогодні наше заняття призначене для початківців, які роблять перші кроки в JavaScript програмуванні, але вже мають певне уявлення про HTML та CSS.
    Хоча  можна спробувати все і відразу, уважно дочитавши до краю цю публікацію. Отже наберіться терпіння і дочитайте цей матеріал повністю.
    Ми спробуємо створити першу програму і спробуємо зрозуміти як вона виконується.
    Ми використаємо на даному етапі програму Brackets, з огляду на те, що вона має український інтерфейс на відміну від Visual Studio Code.
    Отже переходимо до конкретних дій:

    Готуємо структуру нашого проекту.

    У нашому робочому просторі розробника, який ми підготували з Вами раніше створюємо нову теку під назвою "Перша JavaScript програма"
    Запускаємо Brackets
    Відкриваємо теку з нашим робочим проектом.
    Brackets - відкрити теку

    Вибираємо теку під назвою "Перша JavaScript програма"
    В сайдбарі прогами (лівій бічній панелі) тиснемо правою кнопкою миші і  створюємо новий файл index.html. 
    Це загально прийнята назва для головного файлу Вашого сайту, який на сервері автоматично завантажується першим при переході на Ваш сайт за url адресою. 
    Вибираємо пункт "Новий файл"

    Створюємо файл index.html
    Нам також потрібно створити теку "js". Для цього ми таким же чином - за допомогою правої кнопки миші, натиснутої в сайдбарі викликаємо меню, в якому вибираємо пункт "Нова тека".
    Вибираємо пункт "Нова тека"

    Називаємо її "js" - назву теки пишемо всю повністю з маленької букви.

    Тека "js"
    Один раз тиснемо на значок теки лівою кнопкою миші і він покаже, що тека відкрита.
    Тека "js" відкрита
    Далі за аналогією в теці "js" створюємо файл javascript.js, натиснувши на значку відкритої теки правою кнопкою миші, вибираємо у контекстному меню пункт "Новий файл" і даємо йому назву javascript.js. 

    Що означає розширення файлу js?

    Розширення js означає, що файл міститиме код JavaScript, хоча він насправді являє собою звичайний текстовий файл. 
    Те ж саме можна сказати і про файли з розширенням html та css - відповідно текстовий файл з розширенням html міститиме html код, а розширення css означає, що текстовий файл містить css код .
    У теці "js" має бути файл javascript.js 
    Далі ми по аналогії створимо теку "css" і в ній створимо файл style.css.
    Структура нашого першого проекту повинна виглядати наступним чином - дивіться на малюнок нижче:
     
    Структура проекту

    Отже тепер структура нашого проекту сформована, переходимо до написання коду.
    Починаємо писати нашу першу програму з заповнення html файлу, тому вибираємо саме його.
    Вибрати файл для редагування у Brackets можна двома способами:
    Вибираючи необхідний файл на боковій панелі, та вибираючи файл на верхній панелі робочого вікна редактора.

    Повернемося до нашого index.html файлу і створимо його стандартну структуру.

    Найпростіша структура коду HTML виглядає наступним чином:

    <!DOCTYPE html>
    html lang="en">
    <head>
    <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>
    
    Звичайно, що можна набрати цей невеличкий об'єм коду не складно, але Brackets нам за допомогою розширення Emmet допоможе швидко виконувати подібну операцію. Для цього нам потрібно надрукувати знак оклику і після цього натиснути клавішу tab.
    Brackets автоматично створить структуру html файлу

    Brackets у базовій комплектації має можливість переглядати Вашу сторінку в реальному часі за допомогою опції Live Preview, яку можна вибрати в меню "Файл".
    Опція Live Preview

    Але краще, поки що, зайти в теку вашого проекту і запустити на перегляд наш файл index.html, двічі натиснувши на нього лівою кнопкою миші. Чому саме так? Це потрібно зробити для того, щоб побачити на вкладці браузера вміст тегу <title>.
    На вкладці браузера вміст тегу <title>.
    Тепер переходимо до підключення нашого javascript.js файлу. Перед закриваючим тегом </body>
    пишемо тег слово script без кутових дужок, після чого також скористаємося послугою Emmet, і натиснувши клавішу tab отримаємо закриваючий тег і кутові дужки і закриваючий тег  </script>.
    Emmet створює пару тегів зі слова script 


    Перед правою кутовою дужкою відкриваючого тегу <script> пишемо атрибут src, у якому вказуємо шлях до файлу, який ми бажаємо підключити.

    <body><script src="js/javascript.js"></script></body>
    
    Після процедури підключення зовнішнього javascript.js файлу спробуємо його на працездатність.
    Переходимо до файлу javascript.js в редакторі Brackets  і вписуємо коротенький код 
    console.log('Привіт, друже!');
    Після збереження файлу і оновлення вікна браузера ми нічого не побачимо на екрані і це вірно, адже метод console.log() виводить повідомлення на веб-консоль, а щоб побачити консоль нам потрібно переключити браузер в режим розробника, або такий режим називається інструменти розробника.

    Три способи включити режим "інструменти розробника" в Chrome.

    Переключити браузер в режим розробника можна кількома способами:
    1. З меню браузера.
    2. Викликавши контекстне меню у браузері.
    3. Відкрити поєднанням клавіш.

    З меню браузера.

    Натиснути кнопку з трьома крапками, перейти в Інші інструменти -> Інструменти розробника
    Підключити інструменти розробника через меню браузера

    Викликавши контекстне меню у браузері.

    Правою кнопкою миші клацніть на елементі сайту і виберіть «Перевірити».

    Переключити браузер в режим розробника за допомогою контекстного меню.

    Відкрити поєднанням клавіш

    Ви можете відкрити консоль розробника наступними поєднаннями клавіш:
    Mac: Cmd + Opt + I
    Windows: F12 або Ctrl+Shift+I

    Після включення режиму інструментів розробника ми побачимо результат виконання нашої першої команди, прописаної у файлі javascript.js
    Результат виконання нашої першої команди, прописаної у файлі javascript.js
    Ми таким чином перевірили, що наш зовнішній файл javascript.js підключився правильно, і прописаний у ньому код працює нормально.

    Але нам цікаво таки отримати реальний результат прямо на екрані браузера.

    Тоді будемо писати наш урок далі!
    До index.html файлу напишемо наступний код:
    До коду файлу index.html додаємо заголовок першого рівня

    Тепер за допомогою JavaScript коду спробуємо змінити зміст заголовка першого рівня і вивести його на екран.
    Змінений текст заголовка першого рівня

    Код, представлений нижче ви можете скопіювати до буферу обміну і вставити в ваш javascript.js файл, щоб пришвидшити процес створення нашої першої програми.
    document.querySelector('h1').innerHTML = 'Змінений текст заголовка першого рівня';
    Наш матеріал вийшов доволі об'ємним, тому дану тему ми розділяємо на дві частини. У наступній частині ми спробуємо додати кнопки і запропонуємо їм виконати якісь дії, прив'язавши до них певні події.

    З повагою, Юрій Чернієвський! Керівник гуртка "WEB-Miditaur" науково – технічного напряму «WEB технології» ЦДЮТ Краснопільської селищної ради. Бакалавр, прикладна математика за спеціальним напрямом інформатика, Спеціаліст - інформатика, математик - програміст.

    Підтримайте
    Блог
    Якщо Вам сподобалася публікація і Ви вважаєте її корисною для інших, поділіться нею у соціальних мережах за допомогою кнопок, розміщених нижче та підпишіться на блог, щоб першими отримувати нові публікації корисного навчального контенту!
    Коментуйте публікацію, пишіть Ваші враження, залишайте питання в коментарях, якщо якісь моменти з публікації Вам залишилися не зрозумілими!


    0 Коментарів Підписатися на цей блог

    Поділитися цим