Как писать в css js

Язык документа

Определении языка и кодировки символов не является обязательным, однако рекомендуется всегда объявлять их на уровне документа, даже если они указаны в заголовках HTTP. Приоритетной кодировкой символов является UTF-8.

Эффективность

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

    
.
    
.
 

CSS

Точка с запятой

В то время как точка с запятой является чисто технически разделителем правил, CSS всегда относится к точке запятой, как к оператору завершения.

/* плохо */ div < color: red >/* хорошо */ div

Box model

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

/* плохо */ div < width: 100%; padding: 10px; box-sizing: border-box; >/* хорошо */ div

Потоки

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

/* плохо */ img < display: block; >/* хорошо */ img

Аналогично, не вытаскивайте из основного потока элементы, если вы можете обойтись без этого.

/* плохо */ div < width: 100px; position: absolute; right: 0; >/* хорошо */ div

Позиционирование

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

display: block; display: flex; position: relative; position: sticky; position: absolute; position: fixed; 

Селекторы

Минимизируйте сочетания селекторов связанных с DOM. Иногда, лучше добавить лишний класс элементу, который вы хотите найти, чем искать его через три структурных селектора: псевдо-класс, потомок, комбинатор.

/* плохо */ div:first-of-type :last-child > p ~ * /* хорошо */ div:first-of-type .info 

Избегайте перегрузку селекторов.

/* плохо */ img[src$=svg], ul > li:first-child < opacity: 0; >/* хорошо */ [src$=svg], ul > :first-child

Специфичность

Не используйте значения и селекторы, которые нельзя переопределить. Минимизируйте использование id (идентификаторов) и избегайте правило !important

/* плохо */ .bar < color: green !important; >.foo < color: red; >/* хорошо */ .foo < color: red; >.foo.bar

Переопределения

Переопределение стилей селекторов затрудняет отладку. Избегайте этого, если можете.

/* плохо */ li < visibility: hidden; >li:first-child < visibility: visible; >/* хорошо */ li + li

Наследование

Не дублируйте определения селекторов, стили которых и так могут передаваться по наследству.

/* плохо */ div h1, div p < text-shadow: 0 1px 0 #fff; >/* хорошо */ div

Лаконичность

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

/* плохо */ div < transition: all 1s; top: 50%; margin-top: -10px; padding-top: 5px; padding-right: 10px; padding-bottom: 20px; padding-left: 10px; >/* хорошо */ div

Англоязычные обозначения

Предпочтительно использовать английскую математику.

/* плохо */ :nth-child(2n + 1) < transform: rotate(360deg); >/* хорошо */ :nth-child(odd)

Вендорные префиксы

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

/* плохо */ div < transform: scale(2); -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -ms-transition: 1s; >/* хорошо */ div

Анимация

Иногда предпочтительнее использовать переходы (transitions), нежели анимацию (animations). Избегайте анимирование свойств в пользу opacity и transform.

/* плохо */ div:hover < animation: move 1s forwards; >@keyframes move < 100% < margin-left: 100px; >> /* хорошо */ div:hover

Единицы измерения

Используйте безразмерные значения. Старайтесь использовать rem, если вы рассчитываете все в относительных единицах. Предпочтительно использовать секунды, а не миллисекунды.

/* плохо */ div < margin: 0px; font-size: .9em; line-height: 22px; transition: 500ms; >/* хорошо */ div

Цветовая модель

Если нужна прозрачность, использовать rgba. В противном случае, всегда используйте шестнадцатеричный формат.

/* плохо */ div < color: hsl(103, 54%, 43%); >/* хорошо */ div

Отрисовка

Избегайте http-запросов, если ресурс легко воспроизводится с помощью CSS.

/* плохо */ div::before < content: url(white-circle.svg); >/* хорошо */ div::before

Хаки

Не используйте их.

/* плохо */ div < // position: relative; transform: translateZ(0); >/* хорошо */ div < /* position: relative; */ will-change: transform; >

JavaScript

Производительность

Легкочитаемый, выразительный и правильный код важнее производительности. На самом деле, JavaScript никогда не будет вашим узким местом в расчете на производительность. Лучше уделять внимание таким вещам, как сжатие изображений, оптимизация http-запросов и доступа к сети, перерасчет DOM-дерева. Если вы запомните хотя бы одну из рекомендаций в данной статье, опирайтесь на нее.

/* плохо (хотя и намного быстрее) */ const arr = [1, 2, 3, 4]; const len = arr.length; var i = -1; var result = []; while (++i < len) < var n = arr[i]; if (n % 2 >0) continue; result.push(n * n); > /* хорошо */ const arr = [1, 2, 3, 4]; const isEven = n => n % 2 == 0; // инициализация анонимной стрелочной функции const square = n => n * n; // синтаксис: (param1, param2, …, paramN) => expression const result = arr.filter(isEven).map(square); 

Независимость от внешнего состояния

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

/* плохо */ const merge = (target, . sources) => Object.assign(target, . sources); merge(< foo: "foo" >, < bar: "bar" >); // => < foo: "foo", bar: "bar" >/* хорошо */ const merge = (. sources) => Object.assign(<>, . sources); merge(< foo: "foo" >, < bar: "bar" >); // =>

К прочтению:
1. Babeljs (пример в ES5): плохо vs хорошо
2. Остаточные параметры

Нативность

Полагайтесь на стандартные методы, как можно больше.

/* плохо */ const toArray = obj => [].slice.call(obj); /* хорошо */ const toArray = (() => Array.from ? Array.from : obj => [].slice.call(obj) )(); 

Принудительное сравнение

Лишние сравнения не имеют смысл, избегайте их.

/* плохо */ if (x === undefined || x === null) < /* . */ >/* хорошо */ if (x == undefined) < /* . */ >

Циклы

Не используйте циклы, так как они заставляют вас использовать изменяемые объекты. Полагайтесь на методы Array.prototype.

/* плохо */ const sum = arr => < var sum = 0; var i = -1; for (;arr[++i];) < sum += arr[i]; >return sum; >; sum([1, 2, 3]); // => 6 /* хорошо */ const sum = arr => arr.reduce((x, y) => x + y); sum([1, 2, 3]); // => 6 

Если вы не можете использовать методы Array.prototype, используйте рекурсию.

/* плохо */ const createDivs = howMany => "); > >; createDivs(5); /* плохо */ const createDivs = howMany => [. Array(howMany)].forEach(() => document.body.insertAdjacentHTML("beforeend", " ") ); createDivs(5); /* хорошо */ const createDivs = howMany => "); return createDivs(howMany - 1); >; createDivs(5); 

Вот общая функция Loop, делающая рекурсию проще в использовании.

Аргументы

Забудьте об arguments как об объекте. Остаточные параметры это всегда лучший вариант, потому что:
1. Передаваемое имя дает лучшее представление о том, что ожидает функция на входе
2. Остаточный параметр — это массив и он легок в использовании

/* плохо */ const sortNumbers = () => Array.prototype.slice.call(arguments).sort(); /* хорошо */ const sortNumbers = (. numbers) => numbers.sort(); 

К прочтению:
1. Babeljs (пример в ES5): плохо vs хорошо
2. Доступ к аргументам

Использование метода apply

Забудьте метода apply(). Вместо этого используйте оператор распространения (вызова функции).

const greet = (first, last) => `Hi $ $`; const person = ["John", "Doe"]; /* плохо */ greet.apply(null, person); /* хорошо */ greet(. person); 

Использование метода bind

Не используйте bind(), когда есть более идиоматические подходы.

/* плохо */ ["foo", "bar"].forEach(func.bind(this)); /* хорошо */ ["foo", "bar"].forEach(func, this); 

/* плохо */ const person = < first: "John", last: "Doe", greet() < const full = function() < return `$$`; >.bind(this); return `Hello $`; > > /* хорошо */ const person = < first: "John", last: "Doe", greet() < const full = () =>`$ $`; return `Hello $`; > > 

К прочтению:
1. Babeljs (пример в ES5): плохо vs хорошо
2. bind(), а также итераторы в JavaScript

Методы высшего порядка

Избегайте вложенных функций там где это не нужно.

/* плохо */ const result = [1, 2, 3].map(num => String(num)); // => ["1", "2", "3"] /* хорошо */ const result = [1, 2, 3].map(String); // Приведение всех элементов к типу string 

Композиции

Избегайте несколько вложенных вызовов функций. Используйте вместо них композицию.

const plus1 = a => a + 1; const mult2 = a => a * 2; /* плохо */ mult2(plus1(5)); // => 12 /* хорошо */ const pipeline = (. funcs) => val => funcs.reduce((a, b) => b(a), val); const addThenMult = pipeline(plus1, mult2); addThenMult(5); // => 12 

К прочтению:
1. Babeljs (пример в ES5): плохо vs хорошо

Кеширование

Дорогостоящие операции с большими структурами данных непростительны, если вы не кешируете их.

/* плохо */ const contains = (arr, value) => Array.prototype.includes ? arr.includes(value) : arr.some(el => el === value); contains(["foo", "bar"], "baz"); // => false /* хорошо */ const contains = (() => Array.prototype.includes ? (arr, value) => arr.includes(value) : (arr, value) => arr.some(el => el === value) )(); contains(["foo", "bar"], "baz"); // => false 

Переменные

Используйте const вместо let и let вместо var.

/* плохо */ var me = new Map(); me.set("name", "Ben").set("country", "Belgium"); /* хорошо */ const me = new Map(); me.set("name", "Ben").set("country", "Belgium"); 

Условия

Будьте привержены концепции IIFE’s (немедленно выполняемый функтор), используйте возвращаемые значения в условиях (if, else if, else и switch).

/* плохо */ var grade, result = 50; if (result < 50) grade = "bad"; else if (result < 90) grade = "good"; else grade = "excellent"; // grade = "good"; /* хорошо */ let result = 50; const grade = (() =>< if (result < 50) return "bad"; if (result < 90) return "good"; return "excellent"; >)(); // grade = "good"; 

Итераторы

Избегайте цикл перебора for. in

const shared = < foo: "foo" >; const obj = Object.create(shared, < bar: < value: "bar", enumerable: true >>); /* плохо */ for (var prop in obj) < if (obj.hasOwnProperty(prop)) console.log(prop); // =>bar > /* хорошо */ Object.keys(obj).forEach(prop => console.log(prop)); 

Разница между циклом и методом в том, что цикл перечисляет свойства и из цепочки прототипов.

Объект как ассоциативный массив

В то время как объекты можно законно использовать, как правило, ассоциативный массив (Map) лучше и мощнее. Если сомневаетесь, тогда точно используйте Map.

/* плохо */ const me = < name: "Ben", age: 30 >; var meSize = Object.keys(me).length; meSize; // => 2 me.country = "Belgium"; // можно meSize++; meSize; // => 3 /* хорошо */ const me = new Map(); me.set("name", "Ben"); me.set("age", 30); me.size; // => 2 me.set("country", "Belgium"); me.size; // => 3 

Каррирование

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

/* плохо */ const sum = a => b => a + b; sum(5)(3); // => 8 /* хорошо */ const sum = (a, b) => a + b; sum(5, 3); // => 8 

К прочтению:
1. Babeljs (пример в ES5): плохо vs хорошо
2. Каррирование и примеры

Читабельность

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

/* плохо */ foo || doSomething(); /* плохо */ void function() < /* IIFE */ >(); /* плохо */ const n = ~~3.14; /* хорошо */ if (!foo) doSomething(); /* хорошо */ (function() < /* IIFE */ >()); /* хорошо */ const n = Math.floor(3.14); 

Повторное использование кода

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

/* плохо */ let last = arr[arr.length - 1]; /* плохо */ const product = (a, b) => a * b; const triple = n => n * 3; /* хорошо */ const first = arr => arr[0]; // => first(arr); const last = arr => first(arr.slice(-1)); // => last(arr); /* хорошо */ const product = (a, b) => a * b; const triple = product.bind(null, 3); 

К прочтению:
1. Babeljs (пример в ES5): плохо vs хорошо

Зависимости

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

/* плохо */ var _ = require("underscore"); _.compact(["foo", 0])); _.unique(["foo", "foo"]); _.union(["foo"], ["bar"], ["foo"]); /* хорошо */ const compact = arr => arr.filter(el => el); const unique = arr => [. Set(arr)]; const union = (. arr) => unique([].concat(. arr)); compact(["foo", 0]); unique(["foo", "foo"]); union(["foo"], ["bar"], ["foo"]); 

К прочтению:
1. Babeljs (пример в ES5): плохо vs хорошо
2. Путь JavaScript модуля и документация по библиотеке Underscore

JavaScript

JavaScript — это язык программирования, который даёт возможность реализовывать сложное поведение веб-страницы. Каждый раз, когда вы видите веб-страницу, она не только отображает статическое содержимое, но и делает большее — своевременно отображает обновление контента, выводит интерактивные карты, 2D/3D анимацию, прокручивает видео и т.д. — будьте уверены, здесь не обошлось без JavaScript.

Учебный план

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

• Начало работы с Веб
• Введение в HTML
• Введение в CSS

Имеющийся опыт программирования на других языках также может помочь в обучении.

После изучения основ JavaScript вы будете готовы к ознакомлению с более сложными темами, например:

• Углублённый курс JavaScript, изложенный в нашем Руководстве по JavaScript
• Программный интерфейс WebAPI

Модули

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

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

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

Практически всё, что встречается в JavaScript, является объектом. Начиная с таких ключевых конструкций, как строки и массивы, и заканчивая интерфейсом взаимодействия с браузером, который построен поверх JavaScript. Вы даже можете создавать собственные объекты, заключая взаимосвязанные функции и переменные в готовые пакеты. Если вы хотите продолжить изучение языка и писать более эффективный код, то очень важно понять объектно-ориентированную природу JavaScript. Чтобы помочь вам в этом, мы представляем этот модуль. В нем мы подробно рассматриваем основы и синтаксис ООП (объектно-ориентированного программирования), показываем, как создавать свои объекты, и объясняем, что такое данные в формате JSON и как с ними работать.

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

Решение общих проблем на JavaScript

Статья Использование JavaScript для решения общих проблем предоставляет ссылки к секциям контента, раскрывающих суть того, как использовать JavaScript для решения очень часто встречающихся проблем при создании веб-страницы.

Смотрите также

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

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

Изучайте JavaScript бесплатно с курсом с открытым исходным кодом EXLskills, который знакомит вас со всем необходимым, чтобы начать создавать приложения в JS.

Великолепная серия видеоуроков по математике от Keith Peters, которую необходимо понимать каждому эффективному программисту

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.

Как писать в css js

Вставляет код JavaScript на страницу или подключает внешние файлы скриптов.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

1. Кратко
2. Пример
3. Как понять
4. Как пишется
5. Атрибуты
6. Подсказки
7. Ещё примеры
8. На практике
   1. Алёна Батицкая советует
   1. Почему принято размещать со стилями внутри , а перед закрывающим тегом ? Когда можно нарушить это правило?
   2. Объясните разницу между , и .

   Контрибьюторы:

   • Алёна Батицкая ,
   • Светлана Коробцева

   Обновлено 8 сентября 2022

   Кратко

   Скопировать ссылку «Кратко» Скопировано

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

   Как и CSS-стили, скрипты можно прописать внутри кода страницы, либо добавить как внешний документ по ссылке.

   Теги можно располагать в любом месте в заголовке . . . < / head> или теле . . . < / body> HTML-документа. Но лучше всего добавлять их в самый конец перед закрывающим тегом < / body>.

   Пример

   Скопировать ссылку «Пример» Скопировано

   В этом примере мы подключим скрипты из внешнего файла с расширением .js . Лучше делать именно так, вместо того, чтобы прописывать код скрипта в структуре страницы. Атрибут src указывает путь к файлу.

    script src="external.js"> script>    Скопировать Скопировано Не удалось скопировать   

   Как понять

   Скопировать ссылку «Как понять» Скопировано

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

   Скрипты пишут на разных языках, самый популярный из которых — JavaScript.

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

   Как пишется

   Скопировать ссылку «Как пишется» Скопировано

   Тег — парный, его всегда нужно закрывать с помощью < / script>. Если ты подключаешь внешние скрипты по ссылке, то внутри тега ничего писать не надо. Но закрыть тег всё равно придётся.

   Если добавить скрипты в код, то выглядеть это будет так:

      window.alert("Добавили вот какой-то JavaScript-код")  script> window.alert("Добавили вот какой-то JavaScript-код") script>    Скопировать Скопировано Не удалось скопировать   

   Атрибуты

   Скопировать ссылку «Атрибуты» Скопировано

   • async — браузер запускает скрипт асинхронно, то есть не дожидаясь загрузки веб-страницы. Впрочем, и сама страница не будет ждать запуска скрипта и продолжит загружаться, как обычно. Если async не указать, то скрипты будут грузиться по очереди. Этот атрибут работает только когда скрипт задаётся внешним файлом.
   • defer — откладывает запуск скрипта, пока веб-страница не загрузится целиком.
   • src — указывает путь к файлу со скриптами. Это может быть полный URL-адрес файла или относительный адрес, например, src = » / scripts / browser . js» . Файл должен иметь расширение .js . Когда указываешь src , не пиши ничего внутри . . . < / script>.

   Подсказки

   Скопировать ссылку «Подсказки» Скопировано

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

   Ещё примеры

   Скопировать ссылку «Ещё примеры» Скопировано

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

           
   Подключение скриптов  Скрипты можно подключить разными способами. Например, описать их прямо внутри HTML-страницы. Но лучше всё же в отдельном файле.   const p = document.getElementById("blinking") setInterval(function ()  if (p.style.fontSize !== "10px")  p.style.fontSize = "10px" > else  p.style.fontSize = "20px" > >, 2000)    DOCTYPE html> html> head> meta charset="utf-8"> title>Подключение скриптовtitle> link rel="stylesheet" href="style.css"> head> body> h1>Подключение скриптовh1> p id="blinking"> Скрипты можно подключить разными способами. Например, описать их прямо внутри HTML-страницы. Но лучше всё же в отдельном файле. p> script> const p = document.getElementById("blinking") setInterval(function ()  if (p.style.fontSize !== "10px")  p.style.fontSize = "10px" > else  p.style.fontSize = "20px" > >, 2000) script> body> html>    Скопировать Скопировано Не удалось скопировать   

   На практике

   Скопировать ссылку «На практике» Скопировано

   Алёна Батицкая советует

   Скопировать ссылку «Алёна Батицкая советует» Скопировано

   �� Почему нужно писать в конце разметки, перед < / body>?

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

   По этой причине принято ставить теги в самом конце разметки, перед закрывающим тегом < / body>. Тогда браузер, дойдя до скриптов, уже загрузит всю страницу и пользователь сможет взаимодействовать с контентом.

   Размещение в других частях разметки без очевидной надобности считается плохой практикой.

   �� Один скрипт — один .

   Нельзя одновременно написать код внутри тега и в нём же указать атрибут src со ссылкой на внешний файл. Браузер пойдёт по ссылке за кодом, а то, что написано внутри проигнорирует.

      console.log("Hello, world!"); // Этот код будет проигнорирован   script src="./js/main.js"> console.log("Hello, world!"); // Этот код будет проигнорирован script>   Скопировать Скопировано Не удалось скопировать   

   Поэтому если нужно и подключить внешний файл и написать код внутри разметки — используй два отдельных тега.

   �� Порядок имеет значение.

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

   Обычно достаточно в точности скопировать код из инструкции по работе с библиотекой.

   Начинающие разработчики частенько игнорируют порядок подключения и потом ищут причины почему у них не работает то, что работать должно ��

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

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

   На собеседовании

   Скопировать ссылку «На собеседовании» Скопировано

   Почему принято размещать со стилями внутри , а перед закрывающим тегом < / body>? Когда можно нарушить это правило?

   Скопировать ссылку «Почему принято размещать link со стилями внутри head, а script перед закрывающим тегом /body? Когда можно нарушить это правило?» Скопировано

   Скопировать ссылку «Марина Дорошук отвечает» Скопировано

   Когда мы размещаем стили внутри тега , браузер понимает как и с какими стилями отрисовывать контент при первом рендере. То есть, чтобы отобразить страницу, браузеру нужно знать какой контент нарисовать (HTML) и как должны выглядеть элементы (CSS). Если браузер не получит CSS заранее, то HTML-элементы сначала отобразятся со стилями по умолчанию, а после загрузки CSS применяться новые стили. Это вызовет мигание контента. Добавление тега co стилями в начало документа предотвращает повторную перерисовку.

   Тег обычно идёт перед закрывающимся тегом < / body>. Это даёт уверенность, что элементы, к которым идёт обращение в скрипте, существуют на странице.

   Мы можем размещать скрипт в , если он должен выполнится первым и не полагается на то, существует ли элемент на странице. Или если добавляем атрибуты async или defer к тегу . Про их отличия можно почитать подробнее в доке про .

   defer сообщает браузеру, что скрипт нужно загружать в фоновом режиме и запустить его, как только DOM-дерево будет полностью построено.

   Ещё один способ — указать атрибут , который говорит браузеру, что скрипт нужно запустить как модульный. Модульные скрипты по дефолту являются отложенными, то есть равносильно , и указание defer не будет иметь никакого эффекта.

   Скопировать ссылку «Объясните разницу между script, script async и script defer.» Скопировано

   Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.

   Как писать код и сразу видеть результат

   Когда только начинаешь программировать и делать сайты, важно понимать, что вообще происходит. Вот изменил ты параметр объекта — а правильно или нет? Заработало это или нет? Красиво вышло или ужасно?

   Чтобы разработчик сразу видел результат труда, боги создали для него IDE — integrated development environment, по-русски — среду разработки. Это программа, в которой программист пишет код, ловит ошибки и наблюдает результат.

   Чисто технически работать можно и без IDE: писать код в блокноте и просматривать его в специальных программах или браузере. Но это бывает медленно и требует дополнительных телодвижений. Лучше научиться пользоваться IDE и писать в сто раз быстрее.

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

   Visual Studio Code

   Программу можно скачать с официального сайта. Несмотря на то, что VS Code делает Микрософт, это бесплатный продукт с открытым исходным кодом, доступный на всех платформах. Благодаря этому и своим возможностям VS Code стал одной из самых популярных сред для разработки в мире.

   

   VS Code распознаёт почти все существующие языки программирования, самостоятельно или с помощью плагинов, и форматирует их соответствующим образом. Кроме этого, у него глубокая поддержка HTML, CSS, JavaScript и PHP — он проследит за парными тегами, закрытыми скобками и ошибками в командах.

   Вот самые интересные возможности VS Code.

   Умное автодополнение. Программа анализирует, какую команду вы хотите ввести, и предлагает закончить фразу за вас, с подсказками и объяснением. Удобно, если вы забыли порядок следования переменных или как точно звучит нужная команда:

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

   Множественное выделение и поиск. Чтобы поменять много одинаковых значений переменных или найти все одинаковые слова или команды, VS Code использует свой алгоритм обработки. Благодаря этому редактировать код становится проще, а замена функций или переменных происходит быстрее.

   Мультикурсор помогает вводить одинаковые значения сразу на нескольких строках

   Найденные одинаковые слова и команды можно тут же заменить на другие

   Навигация по коду и описания функций. Когда пишешь большую программу, легко забыть то, что делал в начале — как работает функция или какого типа переменная используется в этом месте. Чтобы этого избежать, VS Code может показывать саму функцию, описание переменной или какие параметры передаются при вызове команды. Ещё это пригодится, если код достался вам по наследству от прошлого разработчика и нужно быстро понять, какие куски кода за что отвечают и как работают:

   

   Сразу после установки VS Code не умеет показывать результаты работы кода, когда мы делаем веб-страницы. Это можно исправить с помощью расширения Live HTML Previewer. Для этого заходим в раздел «Extensions», щёлкая на последнем значке на панели слева или нажимая Ctrl+Shift+X, и начинаем писать «Live HTML Previewer» в строке поиска.

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

   WebStorm

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

   

   Автоподстановка. Некоторые IDE с автоподстановкой тормозят и не предлагают сразу все варианты переменных или команд — но не WebStorm. Здесь всё работает с первой буквы и понимает, когда надо предложить переменную, а когда команду или служебное слово:

   

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

   

   Проверка ошибок. WebStorm умеет сам проверять код на ошибки и пояснять каждую из них. Не всегда это работает идеально, но когда работает — экономит кучу времени:

   

   Чтобы сразу видеть, что получается на странице, нам понадобится плагин LiveEdit. По умолчанию он выключен, но его можно включить или поставить отдельно в любое время. После активации нужно будет в настройках плагина поставить галочку «Update application in Chrome on changes in» — она как раз отвечает за обновление информации в браузере Chrome. Теперь можно писать код и сразу видеть результат:

   

   Sublime Text 3

   Бесплатный редактор, который назойливо предлагает занести денег разработчикам. Про Sublime Text у нас есть отдельная и более подробная статья — почитайте, там тоже интересно.

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

   

   Вот что ещё умеет программа сразу после установки:

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

   Вторая суперспособность, которая превращает Sublime Text из простого текстового редактора в универсальное решение, — плагины. По принципу действия они такие же, как и в других программах из обзора, но они совершенно не влияют на скорость работы. Когда начинаешь плотно работать с Sublime Text, может показаться, что у него есть плагины для всего. Нужно редактировать одновременно один и тот же код, но в разных панелях — пожалуйста, написать быстро HTML-код — само собой, проверить код на ошибки и недочёты — без проблем.

   Emmet сокращает время на написание кода, подставляя вместо стандартных команд целые куски готового кода

   JavaScript & NodeJS Snippets упрощает написание кода на JavaScript и работает по тому же принципу, что и Emmet

   SublimeCodeIntel помогает быстро разобраться в коде со множеством функций. Если щёлкнуть на название любой функции, плагин сразу покажет вам её описание.

   Так как эта статья — для начинающих программистов, которым важно сразу видеть изменения в коде, то посмотрим, как это делает Sublime Text.

   Сразу после установки он этого делать не умеет, но нам поможет плагин LiveReload. Он показывает все изменения в браузере, как только мы сохраняем рабочий файл с кодом. Это не так изящно, как в VS Code, но в случае с Sublime Text простительно. Дело в том, что привыкнув однажды писать в нём код, сложно пересесть на что-то другое, что работает с той же скоростью. Установка LiveReload состоит из двух компонентов — плагин для Sublime Text и расширение для браузера.

   После установки давайте посмотрим, что у нас получилось. Создадим файл tested.html в Sublime Text, разметим его внутри стандартным шаблоном как HTML-документ, а рядом откроем окно браузера.

   В реальном времени мы не увидим на странице те изменения, которые вносим в код, как это было в VS Code. Но если нажать Ctrl+S, чтобы сохранить все данные, то браузер моментально показывает то, что мы сделали.

   Если вы серьёзно настроены программировать, присмотритесь к Visual Studio Code. Почти со всем он справляется сам или с плагинами, не нужно подключать дополнительно браузеры или сторонний софт.

   Любите, чтобы после установки были доступны почти все нужные функции? Попробуйте WebStorm — платную, но мощную среду разработки.

   Если вам важна скорость работы в любых ситуациях, то Sublime Text — лучший выбор. Он очень быстрый, и для него есть плагины почти на все случаи жизни.

   Получите ИТ-профессию

   В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.

   Читать:

   Как изменить расположение каталога в lightroom