В этом уроке ты узнаешь, как вызывать функции JavaScript с HTML-страниц, чтобы сделать их интерактивными.
HTML и CSS могут структурировать веб страницу и сделать ее красивой. JavaScript помогает веб-странице взаимодействовать с пользователями и направлять их к нужной информации.
Ты можешь использовать функции JavaScript для создания веб-сайтов, которые реагируют на обычные события пользователя, такие как клики, нажатия клавиш, загрузка страницы, наведение курсора мыши.
Я расскажу шаг за шагом о вызове функций JavaScript в HTML, чтобы помочь тебе понять основные концепции веб-разработки с помощью простых в использовании примеров кода.
Использование функций JS с атрибутами событий HTML
Ты можешь использовать атрибуты события в элементе управления HTML для вызова функции Javascript при возникновении события.
HTML предоставляет набор таких атрибутов для охвата широкого спектра событий.
Несколько распространенных примеров — onclick , onchange , onload , onmouseover , onmouseout и onkeydown .
Игра на JavaScript с нуля для начинающих. ОЧЕНЬ ПРОСТО!
Пожалуйста, имейте в виду, что атрибуты событий HTML работают только с активными элементами управления. Кнопки и ссылки являются немногими примерами таких элементов управления.
Это, пожалуй, самый простой подход для вызова функции JavaScript из HTML-элемента.
Как вызвать функцию JavaScript с помощью атрибутов событий HTML
Давайте разработаем веб-страницу, которая будет принимать имена своих пользователей. Как только пользователь нажмет кнопку “Отправить”, на веб-сайте появится поздравительное сообщение для пользователя.
Для чего нужен и что делает Javascript. Примеры.
Если вы еще не знакомы с понятием Javascript, то об этом я писал тут.
В этой заметке хотелось рассказать о том, для чего Javascript нужен и что с его помощью можно делать.
Как и у любого язык программирования, основная задача Javascript создавать последовательность действий, которые будут приводить к определенному результату.
Это могут быть условия «если-то», циклы, которые создают определенную последовательность действий, математические вычисления и.т.д.
Самое главное в том, что все эти операции можно производить на веб-страницах, в окне браузера. Причем, javascript может работать и без подключения к сети Интернет.
Итак, давайте рассмотрим ряд примеров, которые демонстрируют те возможности, которые можно получить при использовании Javascript. Я условно отсортировал их на несколько групп, чтобы у вас появилось определенное понимание, что делает Javascript и зачем он нужен.
Все мои уроки по Javascript здесь.
1) Математические операции
На веб-страницах очень часто возникает необходимость произвести те или иные вычисления.
Например, есть два текстовых поля и нужно в третьем текстовом поле вывести сумму двух чисел, которые введены в первые два.
С помощью Javascript можно создать калькулятор и разместить его на веб-странице.
Как выучить JavaScript? Самый аху#### способ!
Вот здесь есть пример такого калькулятора:
Еще ситуация, возьмем какую-нибудь текстовую строку на веб-странице, нужно увеличить ее размер в 1,5 раза. Это тоже можно сделать с помощью математических вычислений, путем умножения текущего размера на коэффициент 1,5.
Задач, которые требуют вычислений очень и очень много на практике. Javascript позволяет все это делать.
2) Обработка и валидация данных в HTML-формах
Javascript позволяет проверять, что все требуемые поля заполнены и данные, которые в них находятся соответствуют нужному формату (например, если требуются цифры, то должны быть только цифры и не должно быть букв).
Делает это Javascript без перезагрузки страницы и даже без подключения к Интернет.
Прежде чем отправлять данные на сервер, они проходят предварительную проверку на Javascript. Это снижает нагрузку на сервер.
3) Взаимодействия с пользователем и события
На веб-странице могут появляться различные эффекты, в зависимости от того, какие действия совершает пользователь.
Выпадающее меню на сайте при наведении курсора мыши.
При клике на кнопку скрыть или показать какой-то элемент на странице.
Появления всплывающего окна, когда курсор мыши ушел за пределы окна браузера.
Затемнение заднего фона и эффекты плавного появления элемента реализуются на Javascript.
4) Взаимодействовать с HTML-элементами на странице и управлять их содержимым и стилями.
При наступлении определенного события (например, клик мыши или любого другого) можно изменять внешний вид (стили CSS) элементов на странице.
Делается это все программно.
Еще можно добавлять какие-нибудь HTML-теги или атрибуты к ним, также при наступлении определенного события.
5) Добавление анимации и различных графических эффектов на веб-страницы.
Падающие и двигающиеся объекты. Например, снег на сайт.
Плавное появление и скрытие объектов
Таймер обратного отсчета
И др. эффекты реализуются на Javascript
Я перечислил здесь лишь небольшой список возможностей Javascript. Чтобы вы могли посмотреть все наглядно и на реальных примерах, привожу здесь список сайтов, на которых опубликованы действующие примеры на языке javascript:
Возможности и сфера применения Javascript на самом деле очень обширные. Все будет ограничиваться только вашей фантазией и творчеством.
Все мои уроки по Javascript здесь.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Источник: webkyrs.info
10 полезных скриптов JavaScript
JavaScript развивается с огромной скоростью. Большая волна новых технологий накрывает камни громоздких задач, которые еще вчера казались неприступными и угрожающими.
В данном уроке мы приводим 10 полезных скриптов, которые помогут вам сохранить время при решении общих задач. Большинство из приведенных скриптов можно просто скопировать в свой проект, но лучше проделать аналитическую работу, чтобы адаптировать код наилучшим образом.
1. Максимальная высота или ширина в наборе элементов
Очень полезный скрипт для выравнивания высоты или ширины колонок.
Вариант для высоты:
var getMaxHeight = function ($elms) < var maxHeight = 0; $elms.each(function () < // В некоторых случаях можно использовать outerHeight() var height = $(this).height(); if (height >maxHeight) < maxHeight = height; >>); return maxHeight; >;
Использование:
$(elements).height( getMaxHeight($(elements)) );
Чтобы использовать скрипт для ширины нужно заменить все включения height и Height на width и Width соответственно.
Демонстрация использования кода
2. Эффективная проверка дат
Инструментарий JavaScript для работы с датами очень прост и не достаточен для форматирования дат. Хотя существует множество библиотек которые существенно облегчают обработку дат, часто нужно просто проверять дату в строке. Для такого случая отлично подходит следующий скрипт. Он позволяет проверить дату с любым разделителем и годом, указанным 4-мя цифрами.
function isValidDate(value, userFormat) < // Используем формат по умолчанию, если ничего не указано userFormat = userFormat || ‘mm/dd/yyyy’; // Находим разделитель исключая символы месяца, дня и года (в английском варианте — m, d, y) var delimiter = /[^mdy]/.exec(userFormat)[0]; // Создаем массив из месяца, дня и года, // то есть мы знаем порядок формата var theFormat = userFormat.split(delimiter); // Создаем массив из даты пользователя var theDate = value.split(delimiter); function isDate(date, format) < var m, d, y, i = 0, len = format.length, f; for (i; i < len; i++) < f = format[i]; if (/m/.test(f)) m = date[i]; if (/d/.test(f)) d = date[i]; if (/y/.test(f)) y = date[i]; >return ( m > 0 m < 13 y y.length === 4 d >0 // Проверяем правильность дня месяца d return isDate(theDate, theFormat); >
Использование:
Следующая строка вернет false, так как в ноябре 30 дней:
isValidDate(‘dd-mm-yyyy’, ’31/11/2012′)
Демонстрация использования кода
3. Устанавливаем соответствие между шириной экрана и точками излома для адаптивного дизайна
Быстрый способ связать медиа запросы CSS и код JavaScript.
function isBreakPoint(bp) < // Tочки излома, которые установлены в коде CSS var bps = [320, 480, 768, 1024]; var w = $(window).width(); var min, max; for (var i = 0, l = bps.length; i < l; i++) < if (bps[i] === bp) < min = bps[i-1] || 0; max = bps[i]; break; >> return w > min w
Использование:
if ( isBreakPoint(320) ) < // Ширина экрана меньше точки 320 >if ( isBreakPoint(480) ) < // Ширина экрана между точками излома 320 и 480 >…
Демонстрация показывает взаимодействие с медиа запросами CSS. Если нажать на прямоугольник, то будет выведено сообщение о типе устройства с текущей шириной экрана. Медиа запросы изменяют цвет прямоугольника, а скрипт формирует правильное сообщение. Очень простой пример с огромным потенциалом.
Демонстрация использования кода
4. Выделение текста
Существует много плагинов jQuery для выделения текста, но можно легко реализовать решение такой задачи без использования библиотек. Скрипт возвращает оригинальный текст, в котором найденные термины помещены в тег, и поэтому их легко стилизовать с помощью CSS.
function highlight(text, words, tag) < // Устанавливаем тег по умолчанию, если ничего не указано tag = tag || ‘span’; var i, len = words.length, re; for (i = 0; i < len; i++) < // Глобальное регульрное выражение для подсвечивания всех терминов re = new RegExp(words[i], ‘g’); if (re.test(text)) < text = text.replace(re, ‘$ > > return text; >
Также можно отменить выделение текста.
function unhighlight(text, tag) < // Устанавливаем тег по умолчанию, если ничего не указано tag = tag || ‘span’; var re = new RegExp(‘(|)’, ‘g’); return text.replace(re, »); >
Использование:
$(‘p’).html( highlight( $(‘p’).html(), // Текст [‘foo’, ‘bar’, ‘baz’, ‘hello world’], // Список терминов для выделения ‘strong’ // Пользовательский тег ));
Демонстрация использования кода
5. Анимированные текстовые эффекты
Простые, но достаточно привлекательные визуальные эффекты для анимации свойств текста. А если их использовать в сочетании с переходами CSS3, то они станут еще более интересными. Данный скрипт приводится в виде плагина jQuery (чтобы было легче использовать):
$.fn.animateText = function(delay, klass) < var text = this.text(); var letters = text.split(»); return this.each(function()< var $this = $(this); $this.html(text.replace(/./g, ‘$ $this.find(‘span.letter’).each(function(i, el)< setTimeout(function()< $(el).addClass(klass); >, delay * i); >); >); >;
Использование:
Создаем класс CSS для выделения текста и применяем плагин для элемента с текстом, например, к параграфу:
$(‘p’).animateText(15, ‘foo’);
Демонстрация использования кода
6. Проявление элементов одного за другим
Плагин jQuery для проявления элементов одного за другим.
$.fn.fadeAll = function (ops) < var o = $.extend(< delay: 500, // задержка между появлением элементов speed: 500, // скорость анимации ease: ‘swing’ // функция перехода (другие требуют подключения специального плагина) >, ops); var $el = this; for (var i=0, d=0, l=$el.length; i return $el; >
Использование:
$(elements).fadeAll(< delay: 300, speed: 300 >);
Демонстрация использования кода
7.
Подсчет нажатий кнопки мыши
Иногда требуется подсчитать, сколько раз пользователь нажал на элемент. Обычно для решения задачи создают счетчик в виде глобальной переменной, но jQuery помогает избавиться от засорения глобального пространства имен с помощью использования data() для хранения значения.
$(element) .data(‘counter’, 0) // Сбрасываем счетчик .click(function() < var counter = $(this).data(‘counter’); // Получаем значение $(this).data(‘counter’, counter + 1); // Устанавливаем значение // Выполняем нужные действия >);
Демонстрация использования кода
8. Встраивание видео Youtube из ссылки
Полезный скрипт для встраивания видео Youtube из ссылки с использованием параметров.
Код работает почти на всех форматах ссылки Youtube, так как используется специальное регулярное выражение. Также скрипт фиксирует проблему «super z-index», которая проявляется при встраивании видео Youtube.
function embedYoutube(link, ops) < var o = $.extend(< width: 480, height: 320, params: » >, ops); var return »; >
Использование:
Значения для параметров описаны в документации Youtube API
embedYoutube( ‘https://www.youtube.com/watch?v=JaAWdljhD5o’, < params: ‘theme=light);