Ниже приведен небольшой отрывок из нашей новой книги « JavaScript: новичок для ниндзя», второе издание , написанной Дарреном Джонсом. Это руководство для начинающих по JavaScript. Члены SitePoint Premium получают доступ к своему членству, или вы можете купить копию в магазинах по всему миру.
При изучении языков программирования принято начинать с программы «Здравствуй, мир!». Это простая программа, которая выводит фразу «Hello world!», Чтобы объявить о вашем прибытии в мир программирования. Мы собираемся придерживаться этой традиции и писать программы такого типа на JavaScript. Это будет один оператор, который записывает фразу «Hello, world!» На консоль.
Для начала вам нужно открыть предпочитаемую консоль (либо узел REPL, либо консоль браузера, либо консоль ES6 в Интернете). Когда консоль откроется, все, что вам нужно сделать, это ввести следующий код:
console.log('Hello world!');
Затем нажмите Enter . если все идет по плану, вы должны увидеть вывод «Hello, world!»; похож на скриншот ниже.
Поздравляем, вы только что написали свою первую программу на JavaScript! Это может показаться немного, но один мудрый человек однажды сказал, что путешествие каждого ниндзя-программиста начинается с одной строки кода (или что-то в этом роде!).
JavaScript в браузере
JavaScript — это интерпретируемый язык, для работы которого требуется среда хоста. Из-за своего происхождения основная среда, в которой работает JavaScript, — это браузер, хотя его можно запускать и в других средах; например, наша первая программа, которую мы только что написали, работала в узле REPL. Узел также можно использовать для запуска JavaScript на сервере. Безусловно, наиболее распространенное использование JavaScript по-прежнему заключается в создании интерактивных веб-страниц. Из-за этого мы должны взглянуть на то, что составляет веб-страницу, прежде чем идти дальше.
Три Слоя Сети
Почти все веб-страницы состоят из трех ключевых компонентов — HTML, CSS и JavaScript. HTML используется для разметки контента. CSS — это уровень представления, а JavaScript добавляет интерактивность.
Каждый слой основывается на последнем. Веб-страница должна функционировать только с HTML-слоем — на самом деле, многие веб-сайты отмечают « голый день », когда они удаляют CSS-слой со своего сайта. Веб-сайт, использующий только слой HTML, будет в чистом виде и выглядеть очень старомодно, но все же должен быть полностью функциональным.
Держите эти слои отдельно
Широко считается лучшей практикой разделять проблемы каждого слоя, поэтому каждый слой отвечает только за одну вещь. Совокупность их может привести к очень сложным страницам, где весь код смешан в одном файле, вызывая «суп-тег» или «спагетти кода». Раньше это был стандартный способ создания веб-сайта, и в Интернете все еще есть множество примеров, которые делают это.
Ненавязчивый JavaScript
Когда JavaScript изначально использовался, он был разработан для вставки непосредственно в HTML-код, как видно из этого примера, который будет отображать сообщение при нажатии кнопки:
<button id='button' href='#' onclick='alert("Hello World")'>Click Me</a>
Это затрудняло понимание того, что происходит, поскольку код JavaScript был перепутан с HTML. Это также означало, что код был тесно связан с HTML, поэтому любые изменения в HTML требовали также изменения кода JavaScript, чтобы он не ломался.
Можно сохранить код JavaScript подальше от остальной части HTML, поместив его в собственные теги <script> Следующий код даст тот же результат, что и выше:
<script>
const btn = document.getElementById('button');
btn.addEventListener('click', function() {
alert('Hello World!');
});
</script>
Это лучше, потому что весь JavaScript находится в одном месте, между двумя тегами сценария, а не смешан с тегами HTML.
Мы можем пойти еще дальше и полностью отделить код JavaScript от HTML и CSS в своем собственном файле. Это может быть связано с использованием атрибута srcscript
<script src='main.js'></script>
Затем код JavaScript будет помещен в файл с именем main.js Эта концепция полного разделения кода JavaScript является одним из основных принципов ненавязчивого JavaScript .
Аналогичным образом, CSS также следует хранить в отдельном файле, поэтому единственным кодом на веб-странице является фактический HTML-код со ссылками на файлы CSS и JavaScript. Это обычно считается лучшей практикой и является подходом, который мы будем использовать в книге.
Самозакрывающиеся метки
Если вы использовали XML или XHTML, вы могли встретить самозакрывающиеся теги, такие как тег сценария:
<script src='main.js' />
Они не будут работать в HTML5, поэтому их следует избегать.
Вы можете увидеть некоторый устаревший код, который использует атрибут языка:
<script src='main.js' language='javascript'></script>
Это не нужно в HTML5, но все равно будет работать.
Изящная деградация и прогрессивное улучшение
Изящная деградация — это процесс создания веб-сайта, поэтому он лучше всего работает в современном браузере, который использует JavaScript, но все еще работает на приемлемом уровне в старых браузерах, или если JavaScript или некоторые его функции недоступны. Примером этого являются программы, которые транслируются в формате высокой четкости (HD) — они лучше всего работают на телевизорах высокой четкости, но все еще работают на стандартном телевизоре; просто картинка будет менее качественной. Программы будут работать даже на черно-белом телевидении.
Прогрессивное улучшение — это процесс создания веб-страницы с нуля с базовым уровнем функциональности, а затем добавление дополнительных улучшений, если они доступны в браузере. Это должно быть естественным, если вы следуете принципу трех слоев, причем слой JavaScript расширяет веб-страницу, а не является важным элементом, без которого страница не может существовать. Примером могут служить телефонные компании, которые предлагают базовый уровень телефонных звонков, но предоставляют дополнительные услуги, такие как ожидание вызова и идентификация звонящего, если ваш телефон поддерживает это.
Всякий раз, когда вы добавляете JavaScript на веб-страницу, вы всегда должны думать о подходе, который хотите использовать. Хотите ли вы начать с множества удивительных эффектов, которые раздвигают границы, а затем убедитесь, что опыт изящно ухудшается для тех, кто может не иметь последних и лучших браузеров? Или вы хотите начать с создания функционального веб-сайта, который работает в большинстве браузеров, а затем расширить возможности использования JavaScript? Эти два подхода похожи, но немного отличаются.
Ваша вторая программа JavaScript
Мы собираемся закончить главу второй программой JavaScript, которая будет работать в браузере. Этот пример более сложный, чем предыдущий, и включает в себя множество концепций, которые будут более подробно рассмотрены в последующих главах, поэтому не беспокойтесь, если вы не все понимаете на этом этапе! Идея состоит в том, чтобы показать вам, на что способен JavaScript, и представить некоторые важные концепции, которые будут рассмотрены в следующих главах.
Мы будем следовать практике ненавязчивого JavaScript, упомянутой ранее, и сохраним наш код JavaScript в отдельном файле. Начните с создания папки под названием rainbow Внутри этой папки создайте файл с именем rainbow.htmlmain.js
Давайте начнем с HTML. Откройте rainbow.html
<head>
<meta charset='utf-8'>
<title>I Can Click A Rainbow</title>
</head>
<body>
<button id='button'>click me</button>
<script src='main.js'></script>
</body>
</html>
Этот файл представляет собой стандартную страницу HTML5, которая содержит кнопку с идентификатором button Атрибут ID очень полезен для использования JavaScript в качестве ловушки для доступа к различным элементам страницы. Внизу есть тег script
Теперь о JavaScript. Откройте main.js
const btn = document.getElementById('button');
const rainbow = ['red','orange','yellow','green','blue','rebeccapurple','violet'];
function change() {
document.body.style.background = rainbow[Math.floor(7*Math.random())];
}
btn.addEventListener('click', change);
Наша первая задача в коде JavaScript — создать переменную с именем btn
Затем мы используем функцию document.getElementByIdbtn Затем это присваивается переменной btn
Теперь мы создадим еще одну переменную под названием rainbow Массив, содержащий список строк разных цветов, затем присваивается переменной rainbow
Затем мы создаем функцию с именем change Это устанавливает цвет фона элемента body на один из цветов радуги (об изменении стиля страницы будет рассказано в главе 6). Это включает в себя выбор случайного числа с использованием встроенного объекта Mathrainbow
И наконец, мы создаем обработчик событий , который проверяет, когда нажата кнопка. Когда это происходит, он вызывает функцию change
Откройте rainbow.html Если все работает правильно, фон должен измениться на каждый цвет радуги, как на скриншоте ниже.
Если вы хотите попробовать это быстро, вы можете проверить код на CodePen . Однако, чтобы немного попрактиковаться, я бы порекомендовал вам также потратить время на создание этих файлов, написать код вручную и попробовать запустить его в браузере.
Не ломай сеть
Важной концепцией в развитии языка JavaScript является то, что он должен быть обратно совместимым . То есть весь старый код должен работать одинаково при интерпретации движком, работающим с новой спецификацией (это все равно, что сказать, что PlayStation 4 по-прежнему может запускать игры, созданные для PlayStation 1, 2 и 3). Это сделано для того, чтобы не допустить «взлома сети» JavaScript путем внесения радикальных изменений, которые означали бы, что устаревший код на некоторых веб-сайтах не работает должным образом в современных браузерах.
Поэтому новые версии JavaScript не могут делать ничего, что уже было невозможно в предыдущих версиях языка. Все эти изменения — это обозначения, используемые для реализации конкретной функции, чтобы ее было легче писать. Это называется синтаксическим сахаром , так как позволяет писать существующий фрагмент кода более приятным и лаконичным способом.
Тот факт, что все версии JavaScript имеют обратную совместимость, означает, что мы можем использовать транспортеры для преобразования кода из одной версии JavaScript в другую. Например, вы можете написать свой код, используя самую последнюю версию JavaScript, а затем преобразовать его в код версии 5, который будет работать практически в любом браузере.
Новая версия ECMAScript каждый год означает, что вполне вероятно, что браузеры всегда будут немного слабее, когда дело доходит до реализации новейших функций (они делают это быстрее, но большинству браузеров все еще требуется два года для поддержки модулей ES6). Это означает, что если вы хотите использовать самые современные методы кодирования, вам, вероятно, придется в какой-то момент полагаться на использование транспилятора, такого как Babel .
Если вы обнаружите, что какой-то код не работает в вашем браузере, вы можете добавить следующую ссылку в ваш HTML-документ:
<script src='https://unpkg.com/babel-standalone@6/babel.min.js'></script>
Обратите внимание, что эта ссылка должна идти перед любым JavaScript, который нужно перенести.
Вы также должны изменить атрибут typetext/babel Например, ссылка на файл JavaScript в приведенном выше примере изменится на:
<script type='text/babel' src='main.js'></script>
Это не лучшее долгосрочное решение, поскольку оно требует, чтобы браузер передавал весь код во время выполнения, хотя это хорошо для экспериментов с кодом. Лучшее решение состоит в том, чтобы передать ваш код как часть процесса сборки, который описан в главе 15.
Ряд онлайн-редакторов, таких как CodePen , Babel REPL и JS Fiddle, позволяют переносить код в браузере. Таблица совместимости ECMAScript 6 также содержит актуальную информацию о том, какие функции были реализованы в различных транспортерах.