Complie info
ExecutableCreationTime:
7/26/2023 4:39:08AM
ExecutableLastWriteTime:
7/26/2023 4:39:08AM
ExecutableHashSHA256:
9EB15669EDDE760F5D70D9B03E70DA4F6D7668A070469BD5193B79FBA70920E5
SettingsHashSHA256:
B5736D12DBE9C0F7B10339229BD1ABE1D1C8BD0B7331973D5DF752D8B033293A
AppStartDate:
2023-07-27 03:08:49.174
StylesHash:
D874A857C9AE35986454587CF15ED802E0DA670AA6BCBF2B7311FA7D0367145E
ScriptsHash:
B2860447F9AF448ED6C9353FCAD64AB324ABFB5D42697A9CA3F1A2C9535129E8
AdditionalHeadContentHash:
CDB97F7F404FBF14B9786071235C8E643776E7B3C78B6A356497F4AFAF322B64
InfoMaterialThemeConfigStringHash:
50833A50DB15048D2E5B2FC1002C2EAC4E9E4B01CC62C54A96694D6E9C5A54FE
HtmlTextFormaterStringHash:
F4F3FA9ECDDB0532DDFE186B99E1C4ECF67EB64A68BB4C81A3E2182174BA87FB
HeaderHash:
32E97CCC90A1B0F0D42F16969725B3B6609EA18492A6CF6B8A43E824FA2D8EB7
FooterHash:
B8EA0644585A6D27C6B10FD167809CF1F1884EDC0374A494362B16876CE98B96
AdditionalMainDivContentHash:
D05224365F5F8632B8AC84C4032E59B7F61910A18D95DEB5F1C54140777D314C
Початок вивчення мови програмування JavaScript
Що таке VSCode і чому ми його використовуємо? Та як його встановити?
VSCode - це безкоштовне відкрите інтегроване середовище розробки, яке може використовуватися для розробки програмного забезпечення на різних мовах програмування, включаючи HTML/CSS, JavaScript, Python, Java, C++ та інші.
Однією з головних переваг VSCode є його розширюваність. Завдяки великій кількості розширень та плагінів, які розробляються в співпраці з спільнотою, користувачі можуть додавати нові функції та підтримку для різних мов програмування безпосередньо у своє робоче середовище. Крім того, VSCode має вбудовану підтримку Git, що дозволяє зручно працювати з системою контролю версій.
Іншою перевагою VSCode є його висока продуктивність. Він має швидкий час запуску та низький рівень використання пам'яті, що дозволяє розробникам працювати з великими проектами без затримок чи перерв.
Загалом, VSCode є потужним та зручним інструментом для розробки програмного забезпечення, який може значно полегшити роботу розробників та підвищити їх продуктивність.
Звантаження та встановлення:
Щоб звантажити VSCode перейдіть за цим посиланням code.visualstudio.com.
Консоль браузера - що це таке та як її використовувати?
Консоль браузера - це інструмент для розробки, що забезпечує можливість взаємодії з JavaScript кодом на стороні клієнта в браузері. Вона забезпечує зручний спосіб для налагодження коду, виявлення помилок та тестування різних функцій.
Консоль браузера має декілька корисних функцій. Наприклад, вона може виводити повідомлення для допомоги налагодження коду, дозволяє відстежувати змінні і об'єкти в реальному часі, а також надає доступ до методів браузера, таких як завантаження файлів або маніпулювання DOM.
Крім того, консоль може бути використана для тестування коду. Наприклад, можна перевірити, чи працює певна функція або метод, викликаючи їх безпосередньо з консолі.
Консоль браузера є незамінним інструментом для налагодження та тестування JavaScript коду, що використовується на стороні клієнта в браузері. Вона дозволяє швидко виявляти помилки, перевіряти різні функції та методи, що зменшує час, потрібний для розробки та підтримки веб-додатків.
Щоб відкрити консоль браузера натисніть 'F12' або правою кнопкою мишки на любий елемент сайту та натисніть 'перевірити'.
Відкривання через 'перевірити':
Після цього нам відкриється 'панель розробника':
Але нам потрібна саме 'консоль', якщо ви її успішно відкриєте, то побачите щось схоже на це:
Що таке програмування?
Що таке програмування? Що важливо про нього знати та яку мову ми будемо вивчати?
Програмування - це чудовий спосіб розвивати своє мислення та створювати різні речі на комп'ютері. Якщо ти хочеш навчитися програмувати, тобі знадобиться знати про так звані 'рівні мов програмування'.
Існує кілька рівнів мов програмування. Давай розглянемо кожен з них:
- Рівень машинного коду - це найнижчий рівень програмування. Машинний код - це набір інструкцій, які безпосередньо виконує процесор комп'ютера. Такі команди надзвичайно складні для людини, оскільки представлені у двійковому форматі. Для програмування на цьому рівні потрібні спеціальні знання та досвід.
- Рівень асемблера - це наступний рівень програмування. Асемблер - це мова програмування, яка дозволяє писати програми відразу на машинному коді, але використовуючи для цього певні мнемоніки (наприклад, ADD для додавання). Це значно легше, ніж програмування на машинному коді, але все ще дуже складно.
- Рівень низькорівневих мов - це мови програмування, які дозволяють працювати з комп'ютером на дуже низькому рівні. Низькорівневі мови, наприклад C або Pascal, використовуються для програмування операційних систем та вбудованих систем, але вони також можуть бути використані для написання звичайних програм.
- Рівень високорівневих мов - це найбільш поширений рівень програмування. Високорівневі мови, такі як Python, JavaScript або Scratch, дозволяють програмістам писати код на зрозумілій людській мові, використовуючи вже готові функції та бібліотеки.
Ви будете вивчати мову програмування яка називається 'JavaScript'.
JavaScript, також відомий як JS, - це високорівнева мова програмування, яка використовується для розробки динамічних веб-сайтів, додатків та інших програм, які працюють в інтернеті.
JS дозволяє додавати інтерактивність на веб-сторінки, наприклад, рухомі елементи, кнопки, показувати та приховувати вміст, створювати форми для збору даних та інші функції, що полегшують взаємодію користувачів з веб-сайтом.
JS є однією з найбільш популярних мов програмування, що використовуються на веб-сайтах. Крім того, JS може використовуватись для розробки додатків, які працюють на різних платформах, таких як комп'ютери, мобільні телефони та планшети.
Початок роботи з JavaScript
Як почати працювати з JS? Що нам потрібно додати в наш HTML файл?
Щоб почати роботу з JavaScript, потрібно створити файл з розширенням .js і підключити його до HTML-сторінки або писати JS код напряму в нашому .html файлі. Для обох варіантів використовується тег
В як це виглядатиме в HTML-файлі:
Внутрішній скрипт:
<html>
<head>
<title>Моя HTML-сторінка</title>
<script>
// JavaScript код
</script>
</head>
<body>
<!-- тут можна розмістити вміст сторінки -->
</body>
</html>Тут ми створили тег script у тезі head (тут ми і будемо писати наш JS код).
Зовнішній скрипт:
<html>
<head>
<title>Моя HTML-сторінка</title>
<script src='myscript.js' defer></script>
</head>
<body>
<!-- тут можна розмістити вміст сторінки -->
</body>
</html>У цьому випадку файл з JavaScript кодом з назвою myscript.js знаходитися в тій же директорії, що і HTML-файл (так само як src у HTML елементу 'img').
А 'defer' робить так що наш код виконується після завантаження сторінки.
Змінні та їх вивід
Що таке змінні як їх створювати та як їх виводити?
Змінні (variables) в програмуванні є по суті просто назвами, коробками, які ми призначаємо для зберігання значень у пам'яті комп'ютера. За допомогою змінних ми можемо зберігати та отримувати дані у нашому коді, а також використовувати їх для обчислень.
У JavaScript можна створити змінну за допомогою ключового слова let, за яким слідує назва змінної та її значення.
Наприклад:
let a = 5; // Створюємо змінну 'a' зі значенням 5
let b = 'Hello'; // Створюємо змінну 'b' зі значенням 'Hello'
let c = true; // Створюємо змінну 'c' зі значенням trueТакож ми можемо створювати змінні без значення:
var d; // Оголошуємо змінну 'd' без присвоєння значенняІ присвоїти його потім:
b = 'Hello world'; // Встановлюємо значення змінної 'b' на 'Hello world'Або просто змінити його на нове:
b = 54; // Змінюємо значення змінної 'b' на 54 Важливо: ви могли вже помітити що Hello world написаний в лапках ('') тоді як 54 та true - ні, все це через те що вони мають різні 'типи данних', більше ви дізнаєтесь на наступному занятті.
Но якщо коротко: використовуючи лапки ми кажемо JS що ми передаємо строкове(тексове) начення, а не назву змінної(a(5), b('Hello'), c(true)) чи цифру, наприклад:
a = 54; //змінна з числом її можна дадавати та віднімати
b = '54' //змінна-словоОскільки змінні - це контейнери в яких ми можемо зберігання якісь значення, які ми можемо використовувати пізніше, змінна може містити наш вік, нашу вагу чи ім'я або любі інші потрібні нам дані.
Але що ми можемо з ними робити? Як дізнатись яке значення зберігається в нашій змінні? Нам потрібно їх 'вивести' в нас є багато можливих варіантів як це можна зробити, але для початку ми розглянемо тільки два, а саме: alert() та console.log().
Щоб вивести змінну з допомогою alert(), ми повинні використати наступний код:
var name = 'Максим';
alert(name);У цьому коді ми спочатку створили змінну name і присвоїли їй значення 'Максим'. Потім ми використали функцію (Функція це - фрагмет коду створений кимось (нами або якимось іншим розробником) який виконує певні завдання) alert(), щоб вивести значення змінної name. Коли ми запустимо цей код, ми побачимо вікно повідомлення зі значенням змінної name.
А тепер давайте дізнаємося, як вивести змінну з допомогою console.log(). Ми можемо використати такий код:
var age = 10;
console.log(age);У цьому коді ми створили змінну age та присвоїли їй значення 10. Потім ми використали функцію console.log(), щоб вивести значення змінної age в консоль. Коли ми запустимо цей код, ми побачимо значення змінної age в консолі нашого браузера.
Але важливо зауважити що ми можемо виводити значення на пряму без змінних так:
console.log(54);
console.log('hello!!');
alert(54);
alert('hello!!');