Лекція: Основи HTML, CSS та JavaScript для мобільних додатків
1. Вступ
Для розробки мобільних додатків на основі Ionic, необхідно мати базові знання HTML, CSS та JavaScript. Ці технології є фундаментальними для створення інтерфейсів, стилізації та інтерактивності. У цій лекції ми розглянемо основи цих трьох технологій та як їх можна застосовувати в мобільних додатках.
2. Основи HTML (HyperText Markup Language)
HTML — це мова розмітки, яка використовується для створення структури веб-сторінок і мобільних додатків. HTML визначає, як інформація буде організована та відображена у браузері.
Основні елементи HTML:
Теги: HTML-код складається з тегів, наприклад <div>, <h1>, <p>.
Атрибути: Допоміжна інформація для тегів, наприклад, id, class, href.
Структура HTML-документа:
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<h1>Welcome to My App</h1>
<p>This is a simple paragraph.</p>
</body>
</html>
Основні теги для мобільних додатків:
<ion-header>: заголовок сторінки.
<ion-content>: основний контейнер для вмісту.
<ion-button>: створення кнопок.
<ion-card>: для карток зі стилізованим контентом.
Приклад використання Ionic компонентів:
<ion-header>
<ion-toolbar>
<ion-title>My Ionic App</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-button expand="block" color="primary">Click Me</ion-button>
</ion-content>
3. Основи CSS (Cascading Style Sheets)
CSS — це мова стилів, яка використовується для оформлення HTML-елементів. З допомогою CSS ви можете контролювати колір, шрифт, відступи, розміри та інші властивості елементів на сторінці.
Основні концепції CSS:
Селектори: дозволяють вибирати елементи для стилізації (наприклад, p, .class, #id).
Властивості та значення: визначають, як елемент буде виглядати.
h1 {
color: blue;
font-size: 24px;
}
.button-primary {
background-color: #3880ff;
color: white;
padding: 10px;
}
Використання CSS у мобільних додатках:
Змінні: у Ionic можна використовувати змінні для налаштування теми.
:root {
--ion-color-primary: #3880ff;
--ion-color-secondary: #3dc2ff;
}
Медіа-запити: дозволяють адаптувати інтерфейс під різні екрани.
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
Приклад стилізації компонентів Ionic:
ion-header {
background-color: var(--ion-color-primary);
}
ion-button {
margin-top: 20px;
border-radius: 5px;
}
4. Основи JavaScript
JavaScript (JS) — це мова програмування, яка дозволяє створювати інтерактивність на веб-сторінках. У мобільних додатках JavaScript використовується для обробки подій, динамічної зміни контенту та роботи з API.
Основні можливості JavaScript:
Змінні: для зберігання даних.
let message = "Hello, World!";
const count = 10;
Функції: для створення повторюваного коду.
function greetUser(name) {
console.log("Hello, " + name);
}
greetUser("John");
Умовні оператори: для прийняття рішень у коді.
if (count > 5) {
console.log("Count is greater than 5");
} else {
console.log("Count is less than or equal to 5");
}
Цикли: для повторення дій.
for (let i = 0; i < 5; i++) {
console.log(i);
}
Використання JavaScript у мобільних додатках:
Обробка подій:
<ion-button onclick="showAlert()">Click Me</ion-button>
<script>
function showAlert() {
alert("Button Clicked!");
}
</script>
Робота з API:
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
Приклад використання JavaScript у Angular:
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
greetUser() {
alert('Hello from Angular!');
}
}
5. Підсумок
HTML надає структуру вашому мобільному додатку.
CSS відповідає за стилізацію та візуальне оформлення.
JavaScript додає інтерактивність та логіку для роботи з користувачем.
У поєднанні з Ionic ці технології дозволяють створювати кросплатформні мобільні додатки з нативним інтерфейсом.
Питання для вихідного контролю
Що таке HTML і для чого він використовується?
Яка різниця між тегами <div> та <ion-content>?
Як додати стиль для кнопки за допомогою CSS?
Що таке медіа-запити в CSS і для чого вони потрібні?
Напишіть приклад JavaScript-функції, яка виводить у консоль текст "Hello, World!".
Як підключити JavaScript-функцію до кнопки у HTML?
Які основні переваги використання CSS змінних?
Що таке Angular і як він пов’язаний з Ionic?
Яка структура базового HTML-документа?
Як можна отримати дані з API за допомогою JavaScript?
