Секундомер JavaScript Часть 1

Секундомер JavaScript - Часть 1

Давайте посмотрим на реальный пример. В нем мы сделаем простую HTML-страницу и с помощью JavaScript определим время..

В этом руководстве мы представим базовую работу с jQuery, некоторые основные события и то, что такое setInterval..

Начнем с базовой разметки на пустой странице:

!DOCTYPE html>
html>
голова>
мета-кодировка = "utf-8" />
заголовок> Секундомер JavaScript / заголовок>
style type = "text / css">
* {маржа: 0; отступ: 0; } html, body {width: 100%; высота: 100%; }
тело {фон: #EEE; цвет: # 000; шрифт: обычный 12px / 1.2 Arial, Helvetica, без засечек; } / style>
тип сценария = "text / javascript" src = "http://code.jquery.com/jquery-1.8.2.min.js"> / script>
тип сценария = "текст / javascript">
/ скрипт>
/ голова>
тело>
/ body>
/ html>

Начнем с объявления HTML5 Doctype и метатега набора символов HTML5. Кроме того, мы добавили оператор стиля в тег head> страницы. В основном это будет в отдельном файле, но в этом случае я соберу все в одном месте, чтобы мы могли вместе посмотреть..

После объявления стиля я загрузил jQuery. Затем я добавил тег для JavaScript, куда мы поместим код для нашего секундомера..

HTML

Давайте также добавим разметку HTML для кнопки, которая будет запускать и останавливать секундомер. Кроме того, мы добавим span>, в котором запишем прошедшее время.

тело>
div id = "секундомер">
a href = "#"> Start> a> span> 00: 00: 00 / span>
/ div>
/ body>

Для кнопки я использовал тег>. Для него стандартно нажимать на него сверху.

CSS

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

#stopwatch {margin: 50px 0; размер шрифта: 24 пикселя; выравнивание текста: центр; } #stopwatch a, #stopwatch span {display: inline-block; отступ: 0 15 пикселей; высота строки: 1,6; } #stopwatch a {background: # 404040; цвет: #FFF; текстовое оформление: нет; } #stopwatch a: hover, #stopwatch a: focus {background: # 666; } #stopwatch span {background: # 000; цвет: #FFF; }

Читать также:  Платформа анимации GreenSock (GSAP)

JavaScript

Настала очередь JavaScript. Однако сначала мы должны указать, когда выполняется наш код JavaScript..

Ответ на этот вопрос: в тот момент, когда браузер достигает тега script>.

В нашем случае это означает, что JavaScript будет выполнен перед нашим тегом body>. Это означает, что браузер не будет знать, что находится в теле> ниже. Я бы даже предположил, что там, вероятно, есть тело> внизу.

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

На самом деле, для события JavaScript есть лучший вариант. Мы не будем искать, когда страница полностью загружена. Вместо этого мы зафиксируем событие, указывающее, что HTML-код был прочитан браузером. Это событие называется DOMContentLoaded (или DOM Ready)..

В чем разница между window.load и DOMContentLoaded?

window.load ожидает загрузки всего содержимого страницы. Это могут быть изображения, внешние файлы CSS, файлы JS и т. Д..

Наш единственный внешний файл — это jQuery. Однако мы будем использовать DOM Ready, так как это предпочтительно почти во всех случаях. Исключение составляют случаи, когда действительно нужно все загружать.

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

function onDomReady () {// это будет сделано после загрузки всей разметки}
var jQueryDocument = $ (документ); jQueryDocument.ready (onDomReady);

jQuery

jQuery на самом деле является объектом (или, точнее, функцией), который определяется именем $. Как ни странно сначала это может показаться, это допустимое имя переменной в JavaScript..

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

Читать также:  Запросы AJAX

готовы

В этом случае мы даем аргумент document, который в JavaScript относится к текущей странице. Функция возвращает значение объекта jQuery, построенного «вокруг» страницы. Сохраните этот объект в переменной jQueryDocument, затем вызовите готовый метод для этого объекта..

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

function onDomReady () {// это будет сделано после загрузки всей разметки}
$ (документ) .ready (onDomReady);

Короче, не правда ли?

Обратите внимание, что мы даем готовому методу имя функции onDomReady, которую хотим вызвать? Это очень похоже на метод addEventListener. Это потому, что он работает по тому же принципу. Готовый метод использует addEventListener для браузеров, поддерживающих DOMContentLoaded..

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

$ (document) .ready (function () {// это будет сделано после загрузки всей разметки});

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

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

$ (функция () {})

Поскольку прикрепление функции к событию DOM Ready очень распространено, создатели jQuery предлагают еще более короткую версию..

Давайте в последний раз сократим наш код (никто не любит писать длинный код):

Читать также:  Пользовательский параллакс без какихлибо библиотек

$ (function () {// это будет сделано после загрузки всей разметки});

Мы просто передаем аргумент обратного вызова функции $ (). Он разработан таким образом, что если есть единственный аргумент и это функция, прикрепите его к DOM Ready..

$ против jQuery

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

По этой причине вместо $ мы можем просто использовать переменную jQuery. По умолчанию это $. Однако «jQuery» состоит из 6 символов, а «$» — только одного. И мы не любим слишком много писать. Мы можем передать аргумент функции обратного вызова Dom Ready, которая содержит объект jQuery:

jQuery (function ($) {// это будет сделано после загрузки всей разметки});

Когда мы используем $ в качестве аргумента функции, мы фактически определяем новую переменную. Его значение установлено на jQuery и может использоваться только в данной функции..

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

После того, как мы указали, как нам нужно объявить наш JavaScript, чтобы:

  • нет проблем с другими библиотеками
  • использовать переменные с короткими именами
  • чтобы сохранить что-то еще ненужное при объявлении функций и переменных
  • наш код для запуска после анализа HTML

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

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?