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

Вводимо Javascript до коду HTML


    Для чого потрібен JavaScript

    Не буду "тягнути Бога за бороду", бо розумію вашу жагу до знань і нетерпіння, з яким Ви очікуєте на чергову порцію інформації, але я не можу не втриматися і сказати кілька слів про JavaScript. JavaScript вважається найбільш популярною мовою програмування в світі. Завдяки JavaScript наші HTML та CSS сторінки можуть стати інтерактивними - виводити на екран різноманітні повідомлення, зберігати інформацію, захищати інформацію паролем і так далі!

    Синтаксис JavaScript

    Ми повинні розуміти, що JavaScript має свій синтаксис. Синтаксис - правила, відповідно яких пишеться код. Наш JavaScript потрібно додати до нашого існуючого HTML коду і це має відбуватися за певних правил. Браузеру потрібно повідомити, що він має перемкнутися на виконання JavaScript коду і це ми зробимо за допомогою тега <script>. Цей тег парний, ми можемо його називати блоком <script>  і складається він із відкриваючого і закриваючого тегів.
    <script></script>
    До HTML документа Ви можете додавати скільки потрібно тегів <script>, тобто кількість їх не обмежена, але існують певні правила, які стосуються місця додавання даного тегу. Вводити їх можна до тегів <head> або <body>.
    Взагалі, скрипти краще намагатися ставити все після завантаження DOM і стилів. Так у всіх фреймворках рекомендують. Хоча є й такі, які ви будете змушені розмістити в <head>. Але про це поговоримо пізніше.

    Приклад Javascript в коді HTML

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

    Практичне завдання: 

    Практичне завдання складається з двох етапів, які мають на меті закріпити компетенції двох типів: 
    • Компетенція роботи з онлайн редактором Practice.
    • Компетенція роботи з браузером, програмою блокнот Notepad++, з буфером обміну.

    1 етап

    • Перейдіть за посиланням Practice. У Вас відкриється нова вкладка з редактором Practice.
    • Не закриваючи браузера перейдіть до вкладки з даною сторінкою і скопіюйте до буферу обміну код з прикладу.
    • Перейдіть на вкладку з редактором Practice і вставте скопійований код в текстову область редактора.
    • У правому вікні редактора Ви маєте отримати результат виконання коду.

    2 етап

    • Згорніть дану сторінку разом з браузером. Не закривайте повністю, бо вона нам знадобиться для виконання цього практичного завдання. 
    • Запустіть програму блокнот Notepad++
    • Згорніть програму блокнот Notepad++, не закриваючи її, бо вона нам теж знадобиться при виконанні практичного завдання.
    • Розгорніть браузер з цією сторінкою.
    • Скопіюйте до буферу пам'яті код, який наведено у нашому прикладі.
    • Згорніть знову браузер.
    • Розгорніть програму блокнот Notepad++
    • Вставте скопійований раніше до буферу обміну код в робоче вікно програми блокнот Notepad++
    • Збережіть файл за допомогою команди "Зберегти Як" під іменем 2166.html у свою робочу папку.
    • Перейдіть у свою робочу папку і подвійним натисканням на назву файлу запустіть на виконання код, прописаний у збереженій сторінці.
    Ви маєте отримати на екрані наступний результат:


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

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

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

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