джава скрипты для сайта html

HTML JavaScript

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

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

Для записи JavaScript-кода в HTML-документе используется тег

В следующем примере код JavaScript написан непосредственно в самом HTML-документе. При загрузке страницы данный код сработает и вызовет всплывающее сообщение:

Запуск скрипта

В предыдущем примере скрипт запустился во время загрузки HTML-документа. Но что делать если вы не хотите, чтобы скрипт запускался автоматически? Вы легко можете сделать так, чтобы запуск скрипта осуществлялся только в том случае, если пользователь делает что-то на странице (например, перемещает курсор мыши или кликае ссылку).
Эти действия называются внутренними событиями (события, для краткости). Есть множество предопределенных внутренних событий, которые осуществляют запуск скрипта. Вы можете использовать обработчики событий, чтобы сообщить браузеру, какое событие должно вызвать тот или иной сценарий. События определяются как атрибуты внутри HTML-тега.
Допустим, вы хотите, чтобы появлялось сообщение после того, когда пользователь нажимает кнопку. Вы можете использовать обработчик событий onclick() для выполнения действий. В следующем примере будет отображено окно предупреждения JavaScript, содержащее сообщение:

Подключение внешнего скрипта

Для подключения JS-файлов также используется тег

Источник

Джава скрипты для сайта html

Плагин адаптивной навигации без зависимостей от каких-либо библиотек и с быстрой поддержкой touch устройств.

Релиз jQuery 2.0

Эффект написания письма

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

PopUp окно

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

Простая реализация вкладок на jаvascript без подключения сторонних java библиотек.

Падающий снег на сайт

Всех с 1 декабря и наступлением зимы. Добавим падающий снег на ваш сайт используя jаvascript и файлы со шрифтами-снежинками.

Вкладки Easy Tabs

jаvascript для создания вкладок EasyTabs. Компактный и совместим со всеми браузерами. Не требуется дополнительных jаvascript библиотек (jQuery, Mootools и т.д.)

Сжатие javascript файлов

В этой статье рассмотрим online способы сжатия js (jаvascript) файлов для уменьшения их размеров. Сейчас очень много веб-ресурсов используют, как сторонние java скрипты (например, таже jQuery библиотека и многочисленные плагины к ней), так и собственной разработки. Сжатие позволит уменьшить размер загружаемой страницы сайта, а соответсвенно и время его загрузки. Это один из этапов оптимизации, который желательно проделать всем.

И третий вариант слайдшоу на sliderman.js. Отсутствуют кнопки навигации; 4 эффекта: top, right, bottom, left; а также «Rain», «Stairs», «Fade». Может использоваться в качестве простого промослайдера.

Небольшое и полностью автономное ответвление от TinySlider реализующее слайдшоу с эффектом растворения (fade).

Источник

Руководство по JavaScript, часть 1: первая программа, особенности языка, стандарты

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

Это руководство, по замыслу автора, рассчитано на тех, кто уже немного знаком JavaScript и хочет привести свои знания в порядок а также узнать о языке что-то новое. Мы решили немного расширить аудиторию этого материала, включить в неё тех, кто совершенно ничего не знает о JS, и начать его с написания нескольких вариантов «Hello, world!».

Hello, world!

Программа, которую по традиции называют «Hello, world!», очень проста. Она выводит куда-либо фразу «Hello, world!», или другую подобную, средствами некоего языка.

JavaScript — это язык, программы на котором можно выполнять в разных средах. В нашем случае речь идёт о браузерах и о серверной платформе Node.js. Если до сих пор вы не написали ни строчки кода на JS и читаете этот текст в браузере, на настольном компьютере, это значит, что вы буквально в считанных секундах от своей первой JavaScript-программы.

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

Первая программа в консоли браузера — вывод сообщения в консоль

Ещё один вариант браузерного «Hello, world!» заключается в выводе окна с сообщением. Делается это так:

Вот результат выполнения этой программы.

Вывод сообщения в окне

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

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

Источник

Руководство по HTML/CSS/JavaScript

Frontend Guidelines

Правила и руководства оформления, форматирования HTML, СSS и JavaScript кода. Его цель — повысить качество кода и облегчить совместную работу и поддержку инфраструктуры.

От переводчика

Приветствую всех снова, меня зовут Максим Иванов, и сегодня я подготовил перевод, который, возможно, окажется для вас полезным. Бенджамин Де Кук (Benjamin De Cock), разработчик из Бельгии, собрал некоторые указания по оформлению кода, которые позиционируют себя как лучшие практики по написанию HTML, CSS, JS. Конечно, существует множество рекомендаций, например, есть хороший гайдлайн от Google, наверное, есть еще что-то, однако, если следовать хотя бы некоторым из них, то можно надеяться, что ваш код станет лучше. В отдельных случаях следование этим гайдлайнам не полезно, а совсем наоборот. В общем и целом, все зависит от вашего опыта и виденья дела, если вы новичок, то скорее вам будет полезно оценить то, что пишут другие и в обществе считается верным, если вы гуру, то наверное вам и не нужны гайдлайны, которые написаны непонятно кем на ваш взгляд. Итак, приступим.

JavaScript

Семантика

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

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

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

Старайтесь кратко писать код. Забудьте о своих старых привычках, перетекающих из XHTML.

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

Читабельность вашего кода не должна иметь второстепенный характер. Конечно, вы не обязаны быть экспертом по оптимизации (WCAG) для того, чтобы наверняка улучшить свой сайт, однако, уже прямо сейчас вы можете начать немедленно исправлять мелочи, которые в итоге помогут сделать ваш код лучше, например:

— использовать атрибут alt правильно
— связывайте имена (links) и элементы (buttons) и называйте их по смыслу (

— это зверство)
— не полагайтесь на название цветов, в качестве информации
— явно связывайте определенной меткой и элемент формы

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

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

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

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

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

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

Box model

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

Потоки

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

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

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

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

Селекторы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Анимация

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

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

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

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

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

Отрисовка

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

JavaScript

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

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

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

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

Нативность

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

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

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

Циклы

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

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

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

Аргументы

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

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

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

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

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

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

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

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

Композиции

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

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

Кеширование

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

Переменные

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

Условия

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

Итераторы

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

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

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

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

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

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

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

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

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

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

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

Зависимости

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

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

Источник

Трюки CSS и JavaScript, которые вдохнут жизнь в ваш статический сайт

Последние несколько недель я работал над своим сайтом и хотел придать ему некоторый динамизм. Эта статья не о создании веб-страницы. Я покажу готовые сниппеты с объяснениями.

3D-анимация на JS

Первый трюк — замечательный трёхмерный эффект на JS.

Как видите, когда указатель мыши проходит по этой «карточке», элементы внутри нее обретают трёхмерность.

Как это делается

Сначала создаётся HTML div:

Здесь у нас есть основной класс (card) и два других класса внутри card (header and info). Header будет классом, содержащим изображение (в нашем примере — логотип Medium), а info будет содержать текст в карточке. Теперь давайте добавим CSS, чтобы карта выглядела лучше.

Здесь я объявил высоту, ширину, границу, отступ и тень. Обновите страницу, и вы увидите результаты. Последний шаг — добиться 3D-эффекта при наведении курсора мыши на карту. Для этого я воспользовался JS:

Откройте для себя Vanta.js для анимации фона

Устали от статичных цветов и изображений на фоне веб-страницы? VantaJs разработана, чтобы оживить фон:

Как это делается

Это довольно просто. Добавьте в HTML такой код:

Это установит фон Vanta.js Globe для идентификатора htmlid.

Чтобы переключаться между ними, измените VANTA.GLOBE на VANTA.[Backgroundname]. Конечно, перед этим нужно добавить соответствующий cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.[backgroundname].min.js.

ScrollReveal

Для тех, кто не знал об этой фантастической библиотеке JS, ScrollReveal может отображать элементы при прокрутке веб-страницы:

Как это делается

Изменение размера и цвета букв

Этот небольшой трюк с CSS действительно впечатляет при правильном использовании:

Как это делается

Создайте несколько новых HTML-элементов span и укажите их класс:

3. Применяя CSS :hover, мы изменяем размер букв и их цвет:

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

Свойство animation

Дополнили материал описанием свойства из статьи Криса Койера.

Свойство animation в CSS можно использовать для анимации многих других свойств CSS, таких как color, background-color, height, или width. Каждая анимация должна быть определена с помощью @keyframes, которое затем вызывается с помощью свойства animation, например:

Каждое правило @keyframes определяет, что должно происходить в определённые моменты анимации. Например, 0 % — это начало анимации, а 100 % — её конец. Этими ключевыми кадрами можно управлять либо с помощью сокращённого свойства animation, либо с помощью его восьми подсвойств, чтобы обеспечить больший контроль над ключевыми кадрами.

Подсвойства

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

Несколько шагов

Если анимация имеет одинаковые начальные и конечные свойства, полезно разделять запятыми значения 0 и 100 % внутри @keyframes:

Несколько анимаций

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

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

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

Какие свойства можно анимировать?

Поддержка браузерами

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

Настольные

Префиксы

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

Такие трюки подойдут для того, чтобы вдохнуть жизнь в ваш сайт-визитку или сайт пет-проекта, над которым вы работаете. Если у вас есть какие-то свои трюки — призываю делиться ими в комментах. И не забывайте о промокоде HABR, который дает дополнительную скидку 10% к той, что указана на баннере.

Источник