Фронтенд ( англ. Front-end ) - клієнтська сторона призначеного для користувача інтерфейсу до програмно-апаратної частини сервісу.
Бекенд ( англ. Back-end ) - програмно-апаратна частина сервісу. Бекенд відповідає за здійснення функціонування внутрішньої частини веб-сайту.
Фронт і бекенд - це варіант архітектури програмного забезпечення .
Терміни з'явилися в програмної інженерії внаслідок розвитку принципу поділу відповідальності між зовнішнім поданням і внутрішньої реалізацією.
Backend для надання своєї функції реалізує API , які використовує front-end. Таким чином front-end розробнику не потрібно знати особливостей реалізації сервера, а back-end розробнику - реалізацію front-end.
Технології Front-end
До технологій розробки front-end ставляться html , css , javascript .
До технологій back-end розробки відноситься php , java , python , javascript ( node.js ) та інші.
СSS. Варіанти підключення СSS
Види селекторів. Важливість селекторів. Пріоритети селекторів.
Основи JavaScript. Основні поняття
Підключення JavaScript
Основи JavaScript. Базові принципи, змінні, арифметика.
Основи JavaScript.Типи даних.
Арифметика та присвоювання.
Основні поняття. Практична робота №1
1.
<script type="application/javascript">
alert('Hello, World!');
</script>
2.
<script type="application/javascript">
var st1="Веб-програмування";
var st2=" учням";
var st3=st1+st2;
alert(st3);
</script>
3. Інструменти розробника.
<script type="application/javascript">
var a=5;
var b=10;
var s=a+b;
alert(s);
</script>
4.
Виведення у консоль. (Інструменти розробника)
<script type="application/javascript">
var a=5
var b=6
console.log(a/b)
</script>
5.
Виведення у консоль. (Інструменти розробника)
<script type="application/javascript">
console.log(1+2)
</script>
6.
Виведення у консоль. (Інструменти розробника)
<script type="application/javascript">
console.log('1'+'2')
</script>
7. Інкремент.
<script type="application/javascript">
var i=2
i++
console.log(i)
</script>
8. Декремент.
<script type="application/javascript">
var i=2
i--
console.log(i)
</script>
9. Умова
<script type="application/javascript">
var num = 15;
if (num > 10)
alert("число " + num + " більше 10");
else
alert("число " + num + " менше 10");
</script>
10.
<script type="application/javascript">
var name = prompt('Як вас звати?');
alert('Привіт, ' + name);
var a = prompt('Введіть число a');
var b = prompt('Введіть число b');
var c=a+b;
alert('Cума '+c);
</script>
Практична робота 2.
Для виконання одного із фрагментів програмного коду у випадку, якщо умова не істинна, використовується else if.
Приклад.
if (n == 1) {
// Виконуємо блок кода 1
}
else if (n == 2) {
// Виконуємо блок кода 2
}
else if (n == 3) {
// Виконуємо блок кода 3
}
else {
// Якщо всі інші else не виконуємося, виконуємо блок кода 4
}
Замість умовного оператора можна використовувати тернарну операцію. Її синтаксис:
умова ? оператор 1 : оператор 2
Приклад.
if (a==true) then b=1 else b=0; //умовний оператор
var b=a?1:0; //тернарна операція
Оператор Switch
switch(умова)
{
оператори
}
Приклад.
switch(n) {
case 1: //Виконується, якщо n == 1
// Виконуємо блок кода 1.
break; // Зупиняємося
case 2: // Виконується, якщо n == 2
// Виконуємо блок кода 2.
break; // Зупиняємося
case 3: // Виконується, якщо n == 3
// Виконуємо блок кода 3.
break; // Зупиняємося
default: // Якщо n не дорівнює 1,2 або 3
// Виконуємо блок кода 4.
break; //Зупиняємося
}
Оператори циклу:
Дві форми оператора while:
1. while
/ умова перевіріється перед виконанням тіла циклу
while(i<5) { … }
2. do while
// умова перевіряється після виконання тіла циклу
do { … } while (i<5)
Дві форми оператора for.
1. Цикл for
for (var i=0;i<10;i++)
{
...
}
2. Цикл for/in
for(key in obj)
{
... obj[key]
}
Приклад. Цикл for/in друкує імена і значення всіх властивостей об'єкта:
for (var prop in my_object) {
document.write("имя: " + prop + "; значение: " + my_object[prop], "<br>");
}
Оператор break:
Виконує негайний вихід із циклу
Оператор continue:
Запускає наступну ітерацію циклу
Оператор return:
Розташовується лише в тілі функції. Повертає результат виконання функції.
Взаємодія з користувачем.
Масиви.
Практична робота. Основи позицiювання. Сiтка розмiщення елементiв на сторiнцi.
https://tproger.ru/translations/how-css-flexbox-works/