Как делать скрипт css посталовским 4

Скрипты могут располагаться во внешнем файле и связываться с любым HTML-документом. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т. к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах.

может располагаться в заголовке или теле HTML-документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работу программы. Однако скрипты, которые должны выполняться в первую очередь, обычно помещают в заголовок документа.

Синтаксис¶

1 2 3 4

script> . script> script src="адрес">script> 

Закрывающий тег обязателен.

Атрибуты¶

Загружает скрипт асинхронно.

Откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью.

Адрес скрипта из внешнего файла для импорта в текущий документ.

Определяет тип содержимого .

async¶

При наличии атрибута async браузер при возможности запускает скрипт асинхронно. Это означает, что указанный в атрибуте src файл будет выполняться без ожидания загрузки и отображения веб-страницы. В то же время и страница не ожидает результата выполнения скрипта, а продолжает загружаться как обычно.

Если задано сразу два атрибута — async и defer , то атрибут async игнорируется.

Синтаксис

1 2 3

script async> . script> 

Значения

Значение по умолчанию

По умолчанию этот атрибут выключен.

defer¶

Атрибут defer откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью. Работает только при наличии атрибута src .

Синтаксис

1 2 3

script src="" defer> . script> 

Значения

Значение по умолчанию

По умолчанию этот атрибут выключен.

src¶

Загружает файл со скриптом из внешнего файла. Как только внешние инструкции полностью загружаются, браузер обрабатывает их, словно они были внедрены в текущий документ. Файлы со скриптами JavaScript обычно имеют расширение js и могут размещаться в любом доступном месте.

Преимуществ использования внешних файлов несколько. Внешний файл после первого обращения сохраняется в кэше браузера и при последующих вызовах загружается быстрее. Кроме того, вызываемые функции удобно править в одном месте и код проще контролировать. Это особенно актуально, когда множество веб-страниц используют одни и те же скрипты.

Синтаксис

1 2 3

script src=""> . script> 

Значения

В качестве значения принимается полный или относительный путь к файлу. Файл должен иметь расширение .js.

Значение по умолчанию

type¶

Указывает MIME-тип для определённого языка.

Синтаксис

1 2 3

script type=""> . script> 

Значения

Атрибут type не чувствителен к регистру и обычно принимает следующие значения:

• text/javascript — Для языка программирования JavaScript.
• text/vbscript — Для языка VBScript.

Значение по умолчанию

Спецификации¶

• WHATWG HTML Living Standard
• HTML 5
• HTML 4.01 Specification
• Subresource Integrity — атрибут integrity

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

html> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> title>SCRIPTtitle> head> body> script type="text/javascript"> document.write( '', ); for (i = 1; i  6; i++)  document.writeln(''); for (j = 1; j  6; j++) document.write( '' + i + j + '', ); document.writeln(''); > document.write(' '); script> body> html> 

Введение в CSS вёрстку

В этой статье мы рассмотрим некоторые функции макета CSS, которые мы затрагивали в предыдущих статьях, например различные значения свойства display , и разберём некоторые концепции, которые будут рассмотрены в этой статье.

Методы компоновки страниц CSS позволяют нам использовать элементы, расположенные на веб-странице, и контролировать где они находятся относительно их позиции по умолчанию, других элементов вокруг них, их родителей или главного окна. Методы компоновки страниц, которые мы подробно рассмотрим в этой статье.

• Нормальный поток
• Свойство display
• Flexbox
• Grid
• Floats
• Позиционирование
• Макет таблицы
• Многоколоночный макет

Каждый метод имеет свои преимущества и недостатки и ни одна техника не предназначена для использования в изоляции от других. Разбирая данные методы, вы поймёте, какой из них лучший инструмент разметки для каждой задачи.

Normal flow

Нормальный поток (Normal flow) это то как ваш браузер отображает по умолчанию, когда вы не меняли расположение элементов на странице. Взглянем на пример:

p>I love my cat.p> ul> li>Buy cat foodli> li>Exerciseli> li>Cheer up friendli> ul> p>The end!p> 

По умолчанию ваш браузер выведет этот код следующим образом:

Заметьте, что HTML-элементы здесь отображаются точно в таком порядке, как и в исходном коде — первый параграф, за ним неупорядоченный список, затем второй параграф.

Элементы, выводящиеся один под другим, называются блочными, в противоположность строчным, которые выводятся один вслед за другим, как отдельные слова в обычном абзаце текста.

Примечание: Направление, в котором отображается содержимое блока, называется Block Direction. Block Direction вертикально в языках типа Английского, имеющих горизонтальное направление письма. В языках, типа Японского, имеющих вертикальное направление письма, Block Direction горизонтально. Соответствующее Inline Direction отвечает за направление отображения строковых элементов (таких как предложение).

Когда вы используете CSS для создания разметки, вы двигаете элементы относительно их обычного расположения, но для многих элементов на вашей странице их обычное положение — это именно то, что вам подойдёт. Именно поэтому важно начинать вёрстку с создания правильно организованного HTML документа, для того, чтобы базовое расположение элементов впоследствии работало на вас.

Методы CSS, которыми вы можете управлять разметкой элементов:

• Свойство display — Стандартные значения block , inline или inline-block могут изменять поведение элементов в обычном потоке (см.подробнее Types of CSS boxes). Также можно менять сами методы разметки такими значениями свойства display , как CSS Grid или Flexbox.
• Floats — Применение значения float типа left может заставить элемент блочного типа «прилепить» содержимое к одной стороне элемента, как иногда изображения обволакиваются текстом на газетных страницах.
• Свойство position — Позволяет точно контролировать положение блоков внутри других блоков. static позиционирование является стандартным, но также можно применять другие значения свойства, например фиксированное в углу экрана.
• Макет Таблицы — свойства для разметки таблиц могут быть использованы и для нетабличных элементов, с помощью display: table и соответствующих свойств.
• Multi-column layout — Многоколоночный макет (en-US) поможет расположить содержимое столбцами, как в газетах.

Свойство display

Значения свойства display являются главными методами вёрстки разметки страницы в CSS. Это свойство позволяет нам менять то, как что-то отображается по умолчанию. Каждый элемент по умолчанию имеет свойство display , влияющее на то, как этот элемент отображается. Например, параграфы на английском располагаются один под другим только потому что они имеют по умолчанию свойство display: block . Если же вы создадите ссылку внутри параграфа, эта ссылка будет отображаться в общем потоке с остальным текстом, без переноса на новую строку. Это потому что у элемента по умолчанию установлено свойство display: inline .

В дополнение к возможности менять значение с block на inline и обратно, есть и другие возможности вёрстки с другими значениями display . Однако, в основном все они требуют использования дополнительных свойств. Двумя наиболее важными для задач вёрстки страниц являются display: flex и display: grid .

Flexbox

Flexbox (сокращение от Flexible Box Layout) это модуль, разработанный для облегчения вёрстки в одном из измерений — как ряд или как колонка. Для использования, установите свойство display: flex для родительского элемента тех элементов, к которым хотите применить этот тип вёрстки; все его прямые потомки станут flex элементами. Рассмотрим это на простом примере.

Разметка HTML, представленная ниже, состоит из элемента wrapper , включающего в себя три элемента. По умолчанию все они будут изображаться как блочные, один под другим.

Но если мы добавим свойство display: flex родительскому элементу, три дочерних сгруппируются в колонки. Всё это потому что они сами становятся элементами flex и наследуют некоторые свойства, установленные контейнеру, в котором они находятся. Они выстраиваются в строку, потому что начальное значение flex-direction это row . Высота становится равной высоте самого высокого элемента, потому что начальное значение align-items установлено как stretch . Это значит, элементы вытягиваются по высоте контейнера, который в этом случае сам принимает высоту самого высокого элемента. Все они группируются в начале контейнера, оставляя пустое пространство в конце строки.

*  box-sizing: border-box; > .wrapper > div  border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; > 

.wrapper  display: flex; > 

div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div> 

В дополнение к свойствам, применяемым к контейнеру, существуют свойства, применяемые ко вложенным элементам. Эти свойства помимо всего прочего, могут менять размеры элемента, растягивая его и заставляя занимать всё доступное место.

В качестве простого примера, добавим свойство flex ко всем дочерним элементам, со значением 1 . Это заставит все элементы растянуться и заполнить контейнер, не оставляя свободного места в конце строки. Если освободится дополнительное пространство, элементы растянутся; если доступное место убавится — элементы сожмутся. Также, если вы добавите дополнительный элемент, остальные элементы станут меньше, для того, чтобы все они были одного размера.

*  box-sizing: border-box; > .wrapper > div  border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; > 

.wrapper  display: flex; > .wrapper > div  flex: 1; > 

div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div> 

Примечание: Это было очень краткое введение в то что возможно во Flexbox, чтобы узнать больше см. нашу статью Flexbox.

Grid Layout

В то время как flexbox предназначен для одномерной разметки, Grid Layout предназначен для двумерной — выстраивая предметы в ряды и столбцы.

Ещё раз, вы можете переключиться на Grid Layout при помощи конкретного значения отображения — display: grid . Пример ниже использует разметку подобную примеру flex, а также мы определяем некоторые дорожки рядов и столбцов в родительском элементе, используя свойства grid-template-rows и grid-template-columns соответственно. Мы определили три столбца каждый по 1fr и два ряда по 100px . Мне не надо вводить какие-либо правила для дочерних элементов; они автоматически помещаются в ячейки, созданные нашей сеткой.

*  box-sizing: border-box; > .wrapper > div  border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; > 

.wrapper  display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; grid-gap: 10px; > 

div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div class="box4">Fourdiv> div class="box5">Fivediv> div class="box6">Sixdiv> div> 

Когда у вас есть сетка (grid), мы можете точно размещать на ней свои элементы, а не полагаться на поведение авто-размещения, отмеченного выше. Ниже во втором примере мы задали ту же сетку, но в этот раз с тремя дочерними элементами. Мы задали начало и конец линии каждого элемента используя свойства grid-column и grid-row (en-US). Это заставляет элементы охватывать несколько дорожек.

*  box-sizing: border-box; > .wrapper > div  border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; > 

.wrapper  display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; grid-gap: 10px; > .box1  grid-column: 2 / 4; grid-row: 1; > .box2  grid-column: 1; grid-row: 1 / 3; > .box3  grid-row: 2; grid-column: 3; > 

div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div> 

Примечание: Эти два примера всего лишь малая часть мощности Grid layout; чтобы узнать больше см. нашу статью Grid Layout.

Остальная часть этого руководства освещает другие методы разметок, которые менее важны для основной структуры разметки вашей страницы, но всё равно могут помочь вам в достижении определённых задач. Понимая природу задачи каждой разметки, вы вскоре обнаружите, что, глядя на конкретный компонент вашего дизайна, часто будет ясно какой тип разметки подходит лучше всего.

Floats

Делая элемент плавающим (float) мы меняем поведение этого элемента и элементов блочного уровня, следующих за ним в нормальном потоке. Элемент перемещается влево или вправо и удаляется из нормального потока (normal flow), а окружающий контент обтекает плавающий элемент.

Свойство float имеет четыре возможных значения:

• left — Элемент выравнивается слева и другие элементы обтекают его справа.
• right — Элемент выравнивается справа и другие элементы обтекают его слева.
• none — Не задаёт float совсем. Это значение по умолчанию.
• inherit — Определяет, что значение свойства float должно быть унаследовано от родительского элемента.

В примере ниже мы задаём элементу float — left и даём margin с правой стороны чтобы отталкивать текст от этого элемента. Это даёт нам эффект того, что текст оборачивает этот блок и является большей частью того, что вам нужно знать о float, используемых в современном веб-дизайне.

body  width: 90%; max-width: 900px; margin: 0 auto; > p  line-height: 2; word-spacing: 0.1rem; > .box  background-color: rgb(207, 232, 220); border: 2px solid rgb(79, 185, 227); padding: 10px; border-radius: 5px; > 

h1>Simple float exampleh1> div class="box">Floatdiv> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> 

.box  float: left; width: 150px; height: 150px; margin-right: 30px; > 

Примечание: Float полностью объяснён в нашем уроке по свойствам float и clear. До таких методов как Flexbox и Grid Layout, float использовался как метод создания макетов колонок. Вы все ещё можете встретить эти методы в интернете; мы рассмотрим их в уроке по устаревшим методам разметки (en-US) .

Методы позиционирования

Позиционирование позволяет вам перемещать элементы с места, где бы они располагались при нормальном потоке в другую локацию. Позиционирование не является методом создания основной разметки страницы, это больше об управлении и точной настройке положения определённых элементов на странице.

Однако, существуют полезные методы точной разметки шаблонов, которые полагаются на свойство position . Понимание позиционирования также способствует пониманию нормального потока и того, что значит вывести элемент из нормального потока.

Существует пять типов позиционирования о которых вам следует знать:

• Static positioning (статическое позиционирование) — умолчание, которое получают все элементы — это всё лишь значит «поместить элемент в его нормальную позицию в разметке документа — тут нет ничего особенного на что посмотреть».
• Relative positioning (относительное позиционирование) позволяет вам менять положение элемента на странице, перемещая его относительно его положения в нормальном потоке — в том числе заставляя его перекрывать другие элементы на странице.
• Absolute positioning (абсолютное позиционирование) полностью перемещает элемент из нормального потока разметки страницы так будто он находится на своём собственном отдельном слое. Оттуда вы можете исправлять его положение относительно краёв элемента страницы (или его ближайшего позиционированного элемента предка). Это является полезным при создании сложных эффектов разметки такие как вкладки, в которых различные панели содержимого располагаются друг над другом и отображаются и/или скрываются по желанию или информационные панели, которые располагаются на экране по умолчанию, но могут скользить по экрану используя кнопки управления.
• Fixed positioning (фиксированное позиционирование) очень похоже на абсолютное за исключением того, что он изменяет положение относительно окна просмотра браузера, а не другого элемента. Это полезно при создании эффектов таких как постоянное меню навигации, которое всегда остаётся в одном и том же месте на экране, в то время как другой контент прокручивается.
• Sticky positioning (липкое позиционирование) это новый метод позиционирования, который заставляет элемент вести себя как position: static пока не достигнет определённой линии окна просмотра и с этого момента будет вести себя как position: fixed .

Пример простого позиционирования

Для ознакомления с этими методами вёрстки, мы покажем вам пару быстрых примеров. Наши примеры будут иметь одинаковый HTML, который выглядит следующим образом:

h1>Positioningh1> p>I am a basic block level element.p> p class="positioned">I am a basic block level element.p> p>I am a basic block level element.p> 

Этот HTML по умолчанию будет стилизован, используя следующий CSS:

body  width: 500px; margin: 0 auto; > p  background-color: rgb(207, 232, 220); border: 2px solid rgb(79, 185, 227); padding: 10px; margin: 10px; border-radius: 5px; > 

Результат выглядит следующим образом:

Relative positioning

Относительное (Relative) позиционирование позволяет вам смещать элемент относительно положения, которое он бы имел по умолчанию в нормальном потоке. Это значит, что вы можете выполнить такую задачу как перемещение иконки немного вниз, так чтобы он был на одной линии с текстовой меткой. Чтобы сделать это, мы можем добавить следующее правило для добавления относительного позиционирования.

.positioned  position: relative; top: 30px; left: 30px; > 

Здесь мы даём нашему среднему параграфу position со значением relative — сам по себе он ничего не делает, поэтому мы также добавляем свойства top и left (en-US). Они служат для перемещения задействованного элемента вниз и вправо — что может выглядеть как противоположность тому, чего вы ожидаете, но вам надо думать об этом так будто элемент отталкивается от левого или верхнего края, и в результате он перемещается вправо и вниз.

Добавление этого кода даст следующий результат:

h1>Relative positioningh1> p>I am a basic block level element.p> p class="positioned">This is my relatively positioned element.p> p>I am a basic block level element.p> 

body  width: 500px; margin: 0 auto; > p  background-color: rgb(207, 232, 220); border: 2px solid rgb(79, 185, 227); padding: 10px; margin: 10px; border-radius: 5px; > 

.positioned  position: relative; background: rgba(255, 84, 104, 0.3); border: 2px solid rgb(255, 84, 104); top: 30px; left: 30px; > 

Absolute positioning

Абсолютное (Absolute) позиционирование используется чтобы полностью удалить элемент из нормального потока и разместить его, используя смещение от краёв содержащего блока.

Возвращаясь к нашему примеру без позиционирования, мы можем добавить следующее CSS-правило, чтобы реализовать абсолютное позиционирование:

.positioned  position: absolute; top: 30px; left: 30px; > 

Здесь мы даём нашему среднему параграфу position со значением absolute , и все те же свойства top и left (en-US) как ранее. Однако, добавление этого кода даст следующий результат:

h1>Absolute positioningh1> p>I am a basic block level element.p> p class="positioned">This is my absolutely positioned element.p> p>I am a basic block level element.p> 

body  width: 500px; margin: 0 auto; > p  background-color: rgb(207, 232, 220); border: 2px solid rgb(79, 185, 227); padding: 10px; margin: 10px; border-radius: 5px; > 

.positioned  position: absolute; background: rgba(255, 84, 104, 0.3); border: 2px solid rgb(255, 84, 104); top: 30px; left: 30px; > 

Это совсем другое! Позиционированный элемент теперь совершенно отделен от разметки остальной страницы и располагается поверх него. Другие два параграфа теперь располагаются вместе так будто бы их позиционированный брат не существует. Свойства top и left (en-US) имеют иной эффект на абсолютно позиционированные элементы, чем на относительно позиционированные элементы. В данном случае смещения были рассчитаны сверху и слева от страницы. Возможно изменить родительский элемент так что он становится контейнером, но мы рассмотрим это в уроке по позиционированию.

Fixed positioning

Фиксированное (Fixed) позиционирование удаляет наш элемент из потока документа так же, как и абсолютное позиционирование. Однако, вместо смещения применяемого относительно контейнера, оно применяется относительно окна просмотра. Поскольку элемент остаётся зафиксированным относительно окна просмотра, мы можем создавать такие эффекты как меню, которое остаётся зафиксированным пока страница прокручивается под ним.

Для этого примера наш HTML это три параграфа текста для того, чтобы мы могли прокручивать страницу и блок, которому мы дадим position: fixed .

h1>Fixed positioningh1> div class="positioned">Fixeddiv> p>Paragraph 1.p> p>Paragraph 2.p> p>Paragraph 3.p> 

h1>Fixed positioningh1> div class="positioned">Fixeddiv> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. p> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> 

body  width: 500px; margin: 0 auto; > .positioned  background: rgba(255, 84, 104, 0.3); border: 2px solid rgb(255, 84, 104); padding: 10px; margin: 10px; border-radius: 5px; > 

.positioned  position: fixed; top: 30px; left: 30px; > 

Sticky positioning

Липкое (Sticky) позиционирование — это последний тип позиционирования которой мы имеем в нашем распоряжении. Это микс дефолтного статического позиционирования с фиксированным позиционированием. когда элемент имеет position: sticky он будет прокручиваться в нормальном потоке пока не достигнет границы окна просмотра которую мы задали. С этого момента он (элемент) «прилипает», как если бы был применён position: fixed .

h1>Sticky positioningh1> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> div class="positioned">Stickydiv> p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. p> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> 

body  width: 500px; margin: 0 auto; > .positioned  background: rgba(255, 84, 104, 0.3); border: 2px solid rgb(255, 84, 104); padding: 10px; margin: 10px; border-radius: 5px; > 

.positioned  position: sticky; top: 30px; left: 30px; > 

Примечание: чтобы узнать больше о позиционировании, см. нашу статью Позиционирование.

Макет таблицы

HTML таблицы хороши для отображения табличных данных, но много лет назад — до того, как даже базовый CSS надёжно поддерживался в браузерах — веб-разработчики также использовали таблицы для разметки всей веб-страницы — размещая свои заголовки, нижние колонтитулы, различные колонки и т.д. в разных строках и столбцах таблиц. Это работало в то время, но оно имеет много проблем — разметка таблиц не гибкая, очень тяжёлая в вёрстке, сложна в отладке, и семантически не верная. (например, пользователи скринридеров имеют проблемы с навигацией в табличном макете).

То, как таблица выглядит на веб-странице при использовании разметки таблицы, обусловлено набором свойств CSS, которые определяют макет таблицы. Эти свойства могут использоваться для размещения элементов, которые не являются таблицами, использование, которое иногда описывается как «использование CSS таблиц».

Пример ниже показывает одно такое использование; использование CSS таблиц для вёрстки должно считаться устаревшим методом на данный момент, для тех ситуаций, когда у вас старые браузеры без поддержки Flexbox или Grid.

Давайте взглянем на пример. Во-первых, немного простой разметки, которая создаёт HTML форму. Каждый input элемент имеет label, и мы также заключили описание в параграф. каждая пара label/input обёрнута в , для целей вёрстки.

form> p>First of all, tell us your name and age.p> div> label for="fname">First name:label> input type="text" id="fname" /> div> div> label for="lname">Last name:label> input type="text" id="lname" /> div> div> label for="age">Age:label> input type="text" id="age" /> div> form> 

html  font-family: sans-serif; > form  display: table; margin: 0 auto; > form div  display: table-row; > form label, form input  display: table-cell; margin-bottom: 10px; > form label  width: 200px; padding-right: 5%; text-align: right; > form input  width: 300px; > form p  display: table-caption; caption-side: bottom; width: 300px; color: #999; font-style: italic; > 

Это даёт нам следующий результат:

Также вы можете посмотреть этот живой пример на css-tables-example.html (смотрите также исходный код.)

Многоколоночный макет

Модуль многоколоночного макета (multi-column layout) даёт нам способ располагать контент в столбцах, подобно тому, как текст располагается в газете. Хоть и чтение столбцов вверх и вниз менее полезно в контексте веба, так как вы не хотите заставлять пользователей прокручивать вверх и вниз, размещение контента по столбцам может быть полезной техникой.

Чтобы превратить блок в многоколоночный контейнер мы используем свойство column-count , которое говорит браузеру сколько колонок мы хотим иметь, либо свойство column-width (en-US), которое говорит браузеру заполнить контейнер как можно большим количеством столбцов, по крайней мере, такой ширины.

В примере ниже мы начинаем с HTML блоком, который содержится в элементе с классом container .

div class="container"> h1>Multi-column layouth1> p>Paragraph 1.p> p>Paragraph 2.p> div> 

Мы используем column-width 200 px для этого контейнера, заставляя браузер создавать столько 200 пиксельных столбцов, сколько уместится в этом контейнере и затем разделить оставшееся пространство между созданными столбцами.

div class="container"> h1>Multi-column Layouth1> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. p> div> 

body  max-width: 800px; margin: 0 auto; > 

.container  column-width: 200px; > 

Заключение

Эта статья предоставила короткое обобщение всех методов макетов о которых вам следует знать. Читайте далее для получения дополнительной информации по каждому методу!

В этом модуле

• Введение в CSS вёрстку
• Нормальный поток
• Flexbox
• Grid
• Floats
• Позиционирование
• Многоколоночный макет
• Устаревшие методы вёрстки (en-US)
• Поддержка старых браузеров (en-US)
• Оценка понимания базовых макетов

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Основы JavaScript

JavaScript – это язык программирования, который добавляет интерактивность на ваш веб-сайт (например: игры, отклик при нажатии кнопок или при вводе данных в формы, динамические стили, анимация). Эта статья поможет вам начать работать с этим захватывающим языком и даст вам представление о том, на что он способен.

Что такое JavaScript на самом деле?

JavaScript («JS» для краткости) — это полноценный динамический язык программирования, который применяется к HTML документу, и может обеспечить динамическую интерактивность на веб-сайтах. Его разработал Brendan Eich, сооснователь проекта Mozilla, Mozilla Foundation и Mozilla Corporation.

JavaScript невероятно универсален и дружелюбен к новичкам. Обладая большим опытом, вы сможете создавать игры, анимированную 2D и 3D графику, полномасштабные приложения с базами данных и многое другое!

JavaScript сам по себе довольно компактный, но очень гибкий. Разработчиками написано большое количество инструментов поверх основного языка JavaScript, которые разблокируют огромное количество дополнительных функций с очень небольшим усилием. К ним относятся:

• Программные интерфейсы приложения (API), встроенные в браузеры, обеспечивающие различные функциональные возможности, такие как динамическое создание HTML и установку CSS стилей, захват и манипуляция видеопотоком, работа с веб-камерой пользователя или генерация 3D графики и аудио сэмплов.
• Сторонние API позволяют разработчикам внедрять функциональность в свои сайты от других разработчиков, таких как Twitter или Facebook.
• Также вы можете применить к вашему HTML сторонние фреймворки и библиотеки, что позволит вам ускорить создание сайтов и приложений.

Поскольку эта статья должна быть только лёгким введением в JavaScript, мы не собираемся путать вас на этом этапе, подробно рассказывая о том, какая разница между основным языком JavaScript и различными инструментами, перечисленными выше. Вы можете подробно изучить все это позже, в нашей учебной области JavaScript и в остальной части MDN.

Ниже мы познакомим вас с некоторыми аспектами основного языка, и вы также будете играть с несколькими функциями API браузера. Веселитесь!

Пример «hello world»

Предыдущий раздел звучит очень многообещающе, и это на самом деле так — JavaScript является одной из самых перспективных веб-технологий, и когда вы освоитесь и начнёте использовать его, ваши веб-сайты перейдут в новое измерение мощи и креативности.

Тем не менее, с JavaScript немного более сложно освоиться, чем с HTML и CSS. Вам придётся начать с малого, продолжая изучение небольшими шагами. Для начала мы покажем вам, как добавить некоторые основы JavaScript на вашу страницу, чтобы создать «hello world!» пример (стандарт в начальных примерах программирования).

Предупреждение: Важно: Если вы не следили за остальным нашим курсом, скачайте этот пример кода и используйте его в качестве стартовой точки.

1. Для начала перейдите на ваш тестовый сайт и создайте папку с именем ‘scripts’ (без кавычек). Затем, в новой папке скриптов, которую вы только что создали, создайте новый файл с именем main.js . Сохраните его в вашей папке scripts .
2. Далее перейдите в ваш index.html файл и введите следующий элемент на новой строке прямо перед закрывающим тегом :

script src="scripts/main.js"> script> 

var myHeading = document.querySelector("h1"); myHeading.textContent = "Hello world!"; 

Что произошло?

Итак, ваш заголовок текста был изменён на «Hello world!» с помощью JavaScript. Мы сделали это с помощью вызова функции querySelector() , захватив ссылку на наш заголовок и сохранив её в переменной, названной myHeading . Это очень похоже на то, что мы делали в CSS с помощью селекторов. Если вы хотите что-то сделать с элементом, то для начала вам нужно его выбрать.

После этого, вы устанавливаете значение переменной myHeading в textContent свойство (которое представляет собой контент заголовка) «Hello world!».

Ускоренный курс по основам языка

Давайте познакомимся с некоторыми основными возможностями языка JavaScript, чтобы дать вам больше понимания, как это всё работает. Более того, эти возможности являются общими для всех языков программирования. Если вы сможете понять эти основы, вы будете в состоянии начать программировать, как ни в чём не бывало!

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

Переменные

Переменные — это контейнеры, внутри которых вы можете хранить значения. Вы начинаете с того, что объявляете переменную с помощью ключевого слова var (не рекомендуется, продолжайте читать, чтобы получить объяснения) или let , за которым следует любое имя, которым вы захотите её назвать:

let myVariable; 

Примечание: Точка с запятой в конце строки указывает, где заканчивается оператор. Точку с запятой нужно обязательно использовать для разеделения операторов, располагающихся на одной строке. Однако некоторые люди считают, что хорошая практика — указывать её в конце каждого оператора. Существуют и другие правила, когда нужно ставить точку с запятой, а когда нет. Смотрите более подробно в статье ваше руководство по точкам с запятой в JavaScript.

Примечание: вы можете назвать переменную практически как угодно, но есть некоторые ограничения для её имени (смотрите в правилах именования переменных). Если вы не уверены, вы можете проверить имя вашей переменной, чтобы увидеть корректно ли оно.

Примечание: JavaScript чувствителен к регистру — myVariable отличается от переменной myvariable . Если у вас возникают проблемы в вашем коде, проверьте регистр!

**Примечание:**Для получения более подробной информации о разнице между var и let, смотрите: Разница между var и let.

После объявления переменной вы можете присвоить ей значение:

Вы можете сделать обе эти операции на одной и той же строке, если вы захотите:

var myVariable = "Bob"; 

Вы можете получить значение, просто вызвав переменную по имени:

После установки значения переменной вы можете изменить его позже:

var myVariable = 'Bob'; myVariable = 'Steve';

Обратите внимание, что переменные имеют разные типы данных:

Так для чего нам нужны переменные? Что ж, переменные должны были сделать что-нибудь интересное в программировании. Если значения не могли бы изменяться, то вы не могли бы ничего сделать динамическим, например, персонализировать приветственное сообщение или сменить изображение, отображаемое в галерее изображений.

Комментарии

Комментарии — это, по сути, короткие фрагменты текста, которые могут быть добавлены в код, и которые игнорируются браузером. Вы можете поместить комментарии в JavaScript-код, так же как вы делали это в CSS:

/* Всё, что находится тут - комментарий. */ 

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

// Это комментарий 

Операторы

operator (en-US) — это математический символ, который производит результат, основанный на двух значениях (или переменных). В приведённой ниже таблице вы можете увидеть некоторые из наиболее простых операторов, наряду с некоторыми примерами, которые опробуете в JavaScript консоли.

Существует намного больше операторов для изучения, но этих пока хватит. Смотрите их полный список в разделе выражения и операторы.

Примечание: Смешивание типов данных может привести к некоторым неожиданным результатам при выполнении вычислений, поэтому будьте осторожны, правильно ссылайтесь на ваши переменные, чтобы получать ожидаемые результаты. Например, введите «35» + «25» в вашу консоль. Почему вы не получили результат, который вы ожидали? Потому, что кавычки превратили числа в строки, так что у вас в итоге получилась конкатенация строк, а не сложение чисел. Если вы введёте, 35 + 25 , то получите правильный результат.

Условия

Условия — это конструкции в коде, которые позволяют проверить истинность или ложность выражения и выполнить другой код в зависимости от полученного результата. Самая распространённая форма условия — инструкция if . else . Например:

var iceCream = "chocolate"; if (iceCream === "chocolate")  alert("Yay, I love chocolate ice cream!"); > else  alert("Awwww, but chocolate is my favorite. "); > 

Выражение внутри if ( . ) — это проверка, которая использует тождественный оператор (как описано выше), чтобы сравнить переменную iceCream со строкой chocolate и увидеть равны ли они. Если это сравнение возвращает true , выполнится первый блок кода. Если нет, этот код пропустится и выполнится второй блок кода, после инструкции else .

Функции

Функции — способ упаковки функциональности, которую вы хотите использовать повторно. Всякий раз, когда вам нужна определённая процедура, вы можете просто вызвать функцию по её имени, а не переписывать весь код каждый раз. Вы уже видели некоторые функции, описанные выше, например:

var myVariable = document.querySelector("h1"); 

alert("hello!"); 

Эти функции, document.querySelector и alert , встроены в браузер для того, чтобы вы использовали их всякий раз, когда вам это необходимо.

Если вы видите что-то, что выглядит как имя переменной, но имеет после него скобки — () , скорее всего, это функция. Функции часто принимают аргументы — биты данных, которые им необходимы для выполнения своей работы. Они находятся в скобках, и разделяются запятыми, если присутствует более одного аргумента.

Например, функция alert() вызывает всплывающий блок, появляющийся в окне браузера, но мы должны дать ему строку в качестве аргумента, чтобы сказать функции, что писать во всплывающем блоке.

Хорошая новость заключается в том, что вы можете определить свои собственные функции — в следующем примере мы напишем простую функцию, которая принимает два числа в качестве аргументов и умножает их:

function multiply(num1, num2)  var result = num1 * num2; return result; > 

Попробуйте запустить вышеупомянутую функцию в консоли, затем попробуйте изменить аргументы, например:

multiply(4, 7); multiply(20, 20); multiply(0.5, 3); 

Примечание: Инструкция return сообщает браузеру, что нужно вернуть переменную result из функции, которую можно будет использовать. Это необходимо потому, что переменные, определённые внутри функций, доступны только внутри этих функций. Это называется областью видимости (en-US) переменной. (Читайте больше об области видимости переменных.)

События

Для создания действительной интерактивности на веб-сайте вам необходимы события. События — это структура, которая следит за тем, что происходит в браузере, а затем позволяет вам запускать код в ответ на это. Наиболее очевидным является событие клика (en-US) , которое вызывается браузером, когда мы щёлкаем по чему-то мышью. Для демонстрации этого события введите следующую команду в вашу консоль, а затем щёлкните по текущей веб-странице:

.querySelector("html").onclick = function ()  alert("Ouch! Stop poking me!"); >; 

Существуют множество способов прикрепить событие к элементу. Здесь мы выбираем элемент и устанавливаем ему обработчик свойства onclick (en-US) анонимной функцией (т.е. безымянной) которая содержит код, который мы хотим запустить для события клика.

Обратите внимание, что

.querySelector("html").onclick = function () >; 

var myHTML = document.querySelector("html"); myHTML.onclick = function () >; 

Просто так короче.

Прокачаем пример нашего веб-сайта

Теперь, когда мы прошли некоторые основы JavaScript, давайте добавим несколько крутых несложных функций в пример нашего сайта, чтобы дать вам некоторое представление о принципах работы.

Добавление смены изображения

В этом разделе мы добавим ещё одно изображение на наш сайт и добавим некоторый простой JavaScript для переключения между двумя изображениями, когда по ним щёлкнули.

1. В первую очередь найдите другое изображение, которые вы хотели бы показать на вашем сайте. Убедитесь что оно такого же размера, как ваше первое изображение или максимально близкое к нему.
2. Сохраните изображение в вашу папку images .
3. Переименуйте это изображение в ‘firefox2.png’ (без кавычек).
4. Перейдите в ваш файл main.js и введите следующий JavaScript. (Если ваш «hello world» JavaScript по-прежнему существует, удалите его.)

var myImage = document.querySelector("img"); myImage.onclick = function ()  var mySrc = myImage.getAttribute("src"); if (mySrc === "images/firefox-icon.png")  myImage.setAttribute("src", "images/firefox2.png"); > else  myImage.setAttribute("src", "images/firefox-icon.png"); > >; 

1. Мы получаем значение из атрибута src изображения.
2. Мы используем условие для проверки значения src, равен ли путь к исходному изображению:
   1. Если это так, мы меняем значение src на путь ко 2-му изображению, заставляя другое изображение загружаться внутри элемента .
   2. Если это не так (значит, оно должно было уже измениться), мы меняем значение src , возвращаясь к первоначальному пути изображения, каким он был изначально.

   Добавление персонального приветственного сообщения

   Далее мы добавим немного другого кода, чтобы изменить заголовок страницы на персонализированное приветственное сообщение, когда пользователь впервые зайдёт на сайт. Это приветственное сообщение будет сохраняться, когда пользователь покинет сайт, а позже вернётся — мы сохраним его с помощью Web Storage API. Мы также включим возможность изменить пользователя и, следовательно, приветственное сообщение, в любое время, когда это будет необходимо.

   В index.html , добавьте следующую строку перед элементом :

   button>Change userbutton> 

   var myButton = document.querySelector("button"); var myHeading = document.querySelector("h1"); 

   function setUserName()  var myName = prompt("Please enter your name."); localStorage.setItem("name", myName); myHeading.textContent = "Mozilla is cool, " + myName; > 

   if (!localStorage.getItem("name"))  setUserName(); > else  var storedName = localStorage.getItem("name"); myHeading.textContent = "Mozilla is cool, " + storedName; > 

   .onclick = function ()  setUserName(); >; 

   Теперь, когда вы впервые заходите на сайт, он попросит вас указать имя пользователя, а затем предоставит вам персональное сообщение. Вы можете изменить имя в любое время, нажав на кнопку. В качестве дополнительного бонуса, поскольку имя хранится внутри localStorage, оно сохраняется после закрытия сайта, сохраняя при этом персонализированное сообщение при следующем открытии сайта!

   Заключение

   Если вы следовали всем инструкциям в этой статье, в конечном итоге вы должны получить страницу, которая выглядит примерно так (вы также можете посмотреть нашу версию здесь):

   

   Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на Github.

   Здесь мы узнали только самую поверхность JavaScript. Если вам понравился этот язык и вы хотите изучить его поглубже, перейдите к нашему разделу изучение JavaScript.

   В этом модуле

   • Установка базового программного обеспечения
   • Каким должен быть ваш веб-сайт?
   • Работа с файлами
   • Основы HTML
   • Основы CSS
   • Основы JavaScript
   • Публикация вашего веб-сайта
   • Как работает Веб

   Found a content problem with this page?

   • Edit the page on GitHub.
   • Report the content issue.
   • View the source on GitHub.

   This page was last modified on 3 авг. 2023 г. by MDN contributors.

   Your blueprint for a better internet.

   Читать:

   Как сделать рабочий стол на другой диск