6. Кістяк проекту
Досить зберігати змінні в консолі, настав час створити наш проект і почати працювати з реальними файлами!
Для початку створи нову папку у вибраному місці (наприклад, на робочому столі). Сюди ми будемо зберігати файли з нашого проекту. Нам знадобляться три файли: перший — з HTML-кодом, другий — з CSS-кодом і третій — з JavaScript-кодом. Ми можемо додати ці файли з редактора — або відкрити папку, яку створили в редакторі, і додати нові файли, або ти можеш створити файли безпосередньо в обраному місці. Тільки не забудь додати до них відповідні розширення.
HTML-файл
Спочатку створи файл index.html і встав у нього наступний код:
<!DOCTYPE html>
<html>
<head>
<title>Girls.JS - Poznan</title>
</head>
<body>
<h1>Let's make some magic here!</h1>
</body>
</html>
Тепер двічі клацни на файлі index.html, збереженому в папці. Він повинен автоматично відкритися у браузері. Ти маєш побачити напис Let’s make some magic here! і зможеш перейти в консоль. У тебе все вийшло? Чудово! Тепер настав час додати стилі.
Файл CSS
У цій же папці створи ще одну папку з назвою css, а в ній — файл style.css. Тепер нам потрібно вказати браузеру, звідки брати стилі для нашого HTML-коду. Для цього ми додамо наступний рядок до HTML-коду в тег <head>:
<link rel="stylesheet" href="css/style.css">.
Встав цей код у файл style.css:
h1 {
color: red;
}
Збережи файл style.css і онови попередній перегляд файлу index.html у браузері. Напис “Let’s make some magic here!” тепер має стати червоним. Це свідчить про те, що файл стилів правильно пов’язаний з файлом html. Тепер настав час для найважливішого — файлу JavaScript.
Файл JavaScript
У папці з проектом створи ще одну папку, цього разу з назвою js. У ній створи файл app.js. Це місце, де ми будемо зберігати весь наш JavaScript код, який буде творити магію на нашій сторінці ;) Щоб підключити наш скрипт до HTML-сторінки, встав наступний рядок перед закриттям тегу </body>:
<script src="js/app.js"></script>
Але як ми дізнаємося, що наш JS-файл дійсно правильно підключений?
Нам потрібно перевірити консоль!
У файлі app.js додай код:
console.log('Працює!');
Тепер збережи JS-файл, онови попередній перегляд файлу index.html у твоєму браузері і перейди до консолі. Ви повинні побачити там напис “Працює!”. Це значить, що з вашим JS-файлом все гаразд і можна переходити до виконання інших завдань :)