About Teletype
Join
Сева
@codecrusader
September 14, 2024

Шпаргалка Fullstack

HTML

HTML - Hyper Text Markup Language.
HTML-элемент состоит из тегов и контента.
  • Заголовки HTML --> <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>.
Заголовки HTML
  • Абзацы HTML --> <p></p>.
  • Ссылка HTML --> <a href=""></a>.
Ссылка HTML
  • Новая страница в ссылке HTML --> target="_blank".

Один тег в другом. Родители и дети

  • Ссылка в абзаце HTML --> <p> <a href=""></a> </p>.
Ссылка в абзаце HTML.
  • Изображение HTML --> <img scr="">.
Изображение HTML

1. Для тега <img> есть атрибут --> alt="". У него сразу несколько предназначений.

Первое: текст из этого атрибута будет виден пользователю сайта, если картинка почему-то не загрузилась.
Второе: скринридер — специальная программа-помощник для людей с проблемами зрения — прочитает этот текст пользователю.
Атрибут alt

Для тега <img> есть атрибут --> width="".

Атрибут width

Структура HTML-документа

Структура HTML-документа

  • Название веб-страницы --> <title></title>. Всё это лежит внутри элемента <head>. Оно отображается на вкладке:
Название веб-страницы
  • Одиночный метатег --> <meta charset="UTF-8"> подключает к HTML-документу алфавиты всех живых языков Земли. Всё это лежит внутри элемента <head>. Без него браузер может неверно отобразить иероглифы, буквы кириллицы и вообще символы, которые не входят в базовый латинский алфавит.
Одиночный метатег <meta charset="UTF-8">
  • В <head> можно задать favicon — иконку для вкладки браузера. Для этого используется тег <link rel="icon" href="">. Он содержит ссылку на внешний файл и назначение подключаемого файла.
Иконка для вкладки браузера

Элемент <link> даёт возможность подключить не только иконку, но и файлы других типов и другого назначения, например — таблицы стилей.

Введение в стили

Чтобы придать элементу индивидуальный стиль, в тег встраивается атрибут style. Ему присваивается название свойства (что именно менять) и значение этого свойства (как это поменять).

Стиль в заголовке

Тег <style>

В первом случае внутри элемента <head></head> создаётся элемент <style>. Пространство между тегами <style></style> — это зона языка CSS.

<style></style> в HTML <head></head>

CSS-файл

Когда стили выносят в отдельный CSS-файл, HTML-страница связывается с ним тегом <link>:

Часть кода подключение css файла в html файл

Подключите JavaScript к HTML

Чтобы соединить скрипт и HTML-страницу, код можно писать:

  • внутри тегов <script></script>, которые мы рекомендуем помещать прямо перед закрывающим </body>,
  • в отдельном файле, ссылаясь на него в HTML-документе:

Очень похоже на подключение CSS внутри <head></head>, но имейте в виду вот что.

  1. Тегу <script> всегда нужен закрывающий </script>, в отличие от <link>.
  2. Путь к JavaScript-файлу задаётся атрибутом src (как с картинками), а не href (как с гиперссылками)

CSS

Правила CSS

Вот код, предписывающий всем заголовкам второго уровня небесно-голубой цвет и размер шрифта 32px. В роли селектора выступает имя тега:

Правила CSS

Вот что важно знать о правилах стиля.

  1. После селектора в фигурных скобках указывают свойства стилей.
  2. Фигурные скобки вмещают сколько угодно пар «свойство-значение».
  3. Каждую новую пару принято писать на следующей строке, а в конце — ставить точку с запятой.
  4. Селектор — не обязательно и далеко не всегда имя тега.

Размер шрифта -> font-size: 10px.

Блоки

Веб-страница и внешне, и технически, в коде, делится на блоки из HTML-элементов. Например, каждая карточка на сайте про Блока (который поэт) — это единый блок. Он состоит из картинки, названия раздела, заголовка, даты и текста.

Чтобы объединить сразу несколько HTML-элементов в один общий блок, в коде их нужно отделить от остального контента. Это делает универсальный строительный элемент <div>.

Ширина блока <div> такая же как и его родитель.

Отступы

Достаточно знать, что внешний отступ от элемента (поле) в CSS называется margin. Это свойство создаёт пустое пространство между элементом и его соседями.

Отступы можно задавать отдельно для верхней, правой, нижней или левой сторон. Тогда имя свойства обозначается не просто margin, а соответственно margin-top, margin-right, margin-bottom или margin-left.

Если написать margin: 20px, отступы в 20 пикселей появятся со всех четырёх сторон, а если margin-left: 20px — только слева.

JavaScript

Вывести фразу в консоль -> document.write('фраза');.

Числа

Данные бывают разных типов. Первый тип, с которым мы познакомимся — числа. В JavaScript тоже можно складывать, вычитать, умножать, делить и возводить в степень:

console.log(2 + 2); // выведет в консоль 4
console.log(2 * 2); // выведет в консоль 4
console.log(2 - 2); // выведет в консоль 0
console.log(2 / 2); // выведет в консоль 1
console.log(2 ** 3); // возведение в степень. выведет в консоль 8

А можно использовать скобки и составлять целые примеры:

console.log((2 + 2) / 2); // выведет в консоль 2

Строки

Другой тип данных — это строки. Они позволяют работать с текстом. Вы уже сталкивались со строками:

alert('В чём сила?');
// 'В чём сила?' в этом коде — строка

Обратите внимание, что строки нужно заключать в кавычки. Они могут быть одинарными или двойными:

'роман' // строка в одинарных кавычках
"Джорджа Оруэлла" // строка в двойных кавычках
'1984' // число в кавычках тоже становится строкой

"абыр" + "валг" = "абырвалг" точно не "абыр""валг" или "главрыба".

"3" + "3" = "33" точно не будет равен 6 или 33.

21 + "2" = "212" точно не будет равен 23 или 21"2".

Переменные

Переменная работает как подписанная коробка или ячейка, куда можно что-то положить и не потерять. Создают переменную словом let:

После ключевого слова let следует название коробки, то есть имя переменной. Тут есть ограничение: имя нельзя написать на русском или с пробелами.

Вернёмся к чтению. Отложив программирование и ночной сон, вы прочли 210 страниц. Теперь можно сказать:

В созданную ранее коробку pages вы положили значение 210. Писать let не потребовалось, ведь переменная уже была создана раньше.

Задачка 1:

Вывод в консоль числа 34 ни о чём не говорит. Сделаем его более человечным и понятным, применив арифметику строк из предыдущего урока — конкатенацию. Соедините текст и значение переменной. Внутри скобок для console.log напишите 'Старт поездки. Осталось минут: ' + time. Кавычки важны, не потеряйте их.

Ответ:

let time;
time = 34;
console.log('Старт поездки. Осталось минут: ' + time)

Массивы

В массиве элементы перечисляются через запятую, все они заключены в общие квадратные скобки:

let aliExpress = ['Лазерная указка Xiaomi', 'Гарнитура в виде телефонной трубки', 'Форма для льда «Титаник»'];

Каждый элемент массива имеет свой порядковый номер — индекс:

console.log(aliExpress[1]); // "Гарнитура в виде телефонной трубки"

Хм, индекс 1 выдал не первый элемент массива, а второй. Ошибки здесь нет: счёт в массивах начинается с нуля. У первого элемента индекс нулевой:

console.log(aliExpress[0]); // "Лазерная указка Xiaomi"

Случайные числа

Для генерации случайных чисел есть команда Math.random(). Она возвращает случайное число между 0 и 1, включая ноль:

let randomNumber = Math.random();
console.log(randomNumber); // например, 0.9752705074780903

Да, числа в JavaScript необязательно целые. К дробям применимы все те же арифметические операции:

console.log(0.12 + 0.34); // 0.46

Но вернёмся к случайности. Мы выяснили, что промежуток, в котором работает Math.random(), — от 0 до 1. Но что, если нужно случайное число от 0 до 10? Придётся вспомнить арифметику.

Чтобы получить случайное число от 0 до 10 -> Math.random() * 10.

Math.random() генерирует число от 0 до 0.99999999999. Получается, что самое маленькое число, которое может быть сгенерировано, — ноль, самое большое — почти 1, но не 1. Поэтому Math.random() * 10 генерирует числа от 0 до 9.9999999999.

Функции

Вот код, приветствующий пользователя по имени:

alert('Привет, Андрей');

С помощью команды alert можно вывести сообщение на страницу. Используйте её в разработке, как альтернативу console.log. В реальных проектах её лучше избегать.

Если такое приветствие понадобится один раз, можно поместить этот код там, где он нужен. Но если здороваться нужно неоднократно, лучше создать функцию.

Функция — это блок кода, который можно переиспользовать. Создают функцию ключевым словом function:

function sayHello() {

}

Здесь sayHello — это имя функции. Его придумываем мы оно может быть любым. Между фигурными скобками пишут код функции, или «тело функции»:

Тренажер, который познакомит с основами Git. https://githowto.com/ru

Изучение селекторов https://flukeout.github.io/

Изучение флексбоксов https://flexboxfroggy.com/#ru

Изучение гридов https://cssgridgarden.com/#ru

Изучение Git https://learngitbranching.js.org/?locale=ru_RU

Друзья , если у кого-то есть сложности с js предлагаю ознакомиться с учебником https://learn.javascript.ru

Сева
September 14, 2024, 17:02
0 views
0 reactions
0 replies
0 reposts