Следующий документ будет обработан так же, как и предыдущий.
<!doctype html>
<title>Моя домашняя страничка</title>
<h1> Моя домашняя страничка </h1>
<p>Привет, я Марейн и это моя домашняя страничка.
<p>А ещё я книжку написал! Читайте её
<a href=http://eloquentjavascript.net>here</a>.
Отсутствуют теги <html>
, <head>
и <body>
. Браузер знает, что <title>
должен быть в <head>
, а <h1>
— в <body>
. Кроме того, параграфы не закрыты, поскольку открытие нового параграфа или конец документа означают их принудительное закрытие. Также адрес не заключён в кавычки.
В этой книге мы опустим теги <html>
, <head>
и <body>
для краткости. Но я буду закрывать теги, и заключать атрибуты в кавычки.
Также обычно я буду опускать doctype
. Я не советую делать это вам – браузеры иногда могут творить странные вещи, когда вы их опускаете. Считайте, что они присутствуют в примерах по умолчанию.
HTML и JavaScript
В контексте нашей книги самый главный тег HTML — <script>
. Он позволяет включать в документ программу на JavaScript.
<h1>Внимание, тест.</h1>
<script>alert("Привет!");</script>
Такой скрипт запустится сразу, как только браузер встретит тег <script>
при разборе HTML. На странице появится диалог-предупреждение.
Включать большие программы в HTML непрактично. У тега <script>
есть атрибут src
, чтобы запрашивать файл со скриптом (текст, содержащий программу на JavaScript) с адреса URL.
<h1>Внимание, тест.</h1>
<script src="code/hello.js"></script>
В файле code/hello.js содержится та же простая программа alert('Привет!');
. Когда страница ссылается на другой URL и включает его в себя, браузер подгружает этот файл и включает их в страницу.
Тег script
всегда надо закрывать при помощи </script>
, даже если он не содержит кода и ссылается на файл скрипта. Если вы забудете это сделать, оставшаяся часть страницы будет обработана как скрипт.
Некоторые атрибуты тоже могут содержать программу JavaScript. У тега (на странице он выглядит как кнопка) есть атрибут onClick
, и его содержимое будет запущено, когда по кнопке щёлкнут мышкой.
<button onclick="alert('Бабах!');">НЕ ЖМИ</button>
Заметьте, что я использовал одинарные кавычки для строки в атрибуте onclick
, поскольку двойные кавычки уже используются в самом атрибуте. Можно было бы использовать "
, но это бы затруднило чтение.
Песочница
Запуск скачанных из интернета программ небезопасен. Вы не знаете ничего о тех людях, которые делали посещаемые вами сайты, и они не всегда доброжелательны. Запуская программы злых людей, вы можете заразить компьютер вирусами, потерять свои данные или дать доступ к своим аккаунтам третьим лицам.
Но привлекательность веба в том, что по нему можно сёрфить без обязательного доверия всем посещаемым страницам. Поэтому браузеры сильно ограничивают то, что может сделать программа JavaScript. Она не может открывать файлы на компьютере, или менять что-либо, не связанное со страницей, в которую она встроена.
Изолированное таким образом окружение называется песочницей – в том смысле, что программа безобидно играется в песочнице. Представляйте, однако, эту песочницу как клетку из толстых стальных прутьев.
Сложность в создании песочницы – позволять программам делать достаточно много, чтобы они были полезными, при этом ограничивая их от совершения опасных действий. Много из того, что делает пользователь, например общение с другими серверами или чтение содержимого буфера обмена, можно использовать для нарушения приватности.
Время от времени кто-то придумывает способ обойти ограничения браузера и сделать что-то вредное, от утечки некоей приватной информации до полного контроля над компьютером, где запущен скрипт. Разработчики исправляют эту дырку в браузере, и снова всё хорошо – до появления следующей проблемы, которая, можно надеяться, будет опубликована, и не тайно использоваться правительством или мафией.
Совместимость и браузерные войны
На ранних стадиях развития Веба браузер по имени Mosaic занимал большую часть рынка. Через несколько лет баланс сместился в сторону Netscape, который затем был сильно потеснён браузером Internet Explorer от Microsoft. В любой момент превосходства одного из браузеров его разработчики позволяли себе в одностороннем порядке изобретать новые свойства веба. Так как большинство людей использовали один и тот же браузер, сайты просто начинали использовать эти свойства, не обращая внимания на остальные браузеры.