HTML JavaScript
В современном мире верстальщику, который не знает хотя бы основ JavaScript, будет очень сложно. Совершенно не обязательно быть гуру JavaScript, но основами данного языка владеть необходимо.
JavaScript — клиентский язык программирования (выполняется не на сервере, а непосредственно в браузере пользователя на его локальном компьютере).
JavaScript используется для создания веб-приложений и динамических сайтов способных взаимодействовать с пользователем. В этом уроке вы получите лишь общее представление об этом мощном инструменте веб-дизайна, т.к. изучение JavaScript не входит в начальный курс обучения HTML.
Прежде всего нужно запомнить, что JavaScript является регистрозависимым языком. По этой причине следует запоминать не только названия свойств, методов или ключевых слов JavaScript, но и заглавными или строчными буквами они пишутся.
Код JavaScript может быть написан либо непосредственно в самом HTML-документе, либо в отдельном файле.
Для записи JavaScript-кода в HTML-документе используется тег <script>. Сценарии часто помещаются внутри элемента <head>. Это гарантирует, что сценарий готов к работе, когда он вызывается. Тем не менее, это не является обязательным требованием, и вы также можете поместить его в элемент <body>, где он также будет прекрасно работать.
Вы также можете указать язык с помощью атрибута type (type="text/javascript"). Тем не менее, когда вы используете язык JavaScript атрибут type можно опустить, т.к. JavaScript — значение атрибута type по умолчанию.
Синтаксис тега <script> следующий:
<script type="text/javascript">
Код JavaScript
</script>
В следующем примере код JavaScript написан непосредственно в самом HTML-документе. При загрузке страницы данный код сработает и вызовет всплывающее сообщение:
Запуск скрипта
В предыдущем примере скрипт запустился во время загрузки HTML-документа. Но что делать если вы не хотите, чтобы скрипт запускался автоматически? Вы легко можете сделать так, чтобы запуск скрипта осуществлялся только в том случае, если пользователь делает что-то на странице (например, перемещает курсор мыши или кликае ссылку).
Эти действия называются внутренними событиями (события, для краткости). Есть множество предопределенных внутренних событий, которые осуществляют запуск скрипта. Вы можете использовать обработчики событий, чтобы сообщить браузеру, какое событие должно вызвать тот или иной сценарий. События определяются как атрибуты внутри HTML-тега.
Допустим, вы хотите, чтобы появлялось сообщение после того, когда пользователь нажимает кнопку. Вы можете использовать обработчик событий onclick() для выполнения действий. В следующем примере будет отображено окно предупреждения JavaScript, содержащее сообщение:
Пример HTML:
Попробуй сам<p>Нажмите на кнопку ниже, чтобы заданный скрипт выполнился.</p>
<input type='button' value='Кликни меня' onclick='showMessage()'>
<script>
function showMessage() {
alert('Вы кликнули по кнопке!')
}
</script>Подключение внешнего скрипта
Если предполагается использовать один и тот же сценарий на многих веб-страницах, удобно разместить его в отдельном файле и затем сослаться на этот файл. Это целесообразно сделать даже в том случае, если код будет использован только на одной странице. Например, если сценарий слишком большой и громоздкий, то выделение его в отдельный файл облегчает восприятие и отладку кода веб-страницы.
JavaScript-код можно записать в отдельном файле с расширением .js, после чего подключать его к HTML-документу примерно так, как мы делали это с CSS-файлами.
Файл с расширением .js является обычными текстовым файлом, как и другие уже известные нам файлы с расширениями: .css и .html.
Создадим файл script.js и сохраним в нем небольшую функцию, созданную с помощью Javascript:
function Hello() {
alert("Привет, мир!");
}Для подключения JS-файлов также используется тег <script>. Однако, в отличие от подключения CSS-файлов, на этот раз следует использовать другой синтаксис:
<script type="text/javascript" src="путь к JS-файлу"></script>Теперь давайте подключим внешний файл script.js к нашему следующему HTML-документу:
Пример HTML:
Попробуй сам<!DOCTYPE html>
<html>
<head>
<title>Javascript External Script</title>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<input type="button" onclick="Hello();" name="ok" value="Кликни меня">
</body>
</html>Элемент <noscript>
Тег <noscript> используется для отображения альтернативного текста пользователям, браузер которых не поддерживает скрипты и для тех пользователей, которые отключили JavaScript в своих браузерах.
Пример HTML:
Попробуй сам<script>
document.write("Привет, мир!")
</script>
<noscript>
Вы видите это сообщение, потому что Ваш браузер не поддерживает JavaScript.
</noscript>
Возможности JavaScript
Посмотрите несколько примеров того, что может делать JavaScript:
JavaScript может менять HTML контент:
Попробуй сам<script>
function Hello() {
document.getElementById("demo").innerHTML = "Привет, мир!";
}
</script>
JavaScript может менять значение HTML атрибута:
Попробуй сам<script>
function dancer() {
document.getElementById("image").src = "picture.gif";
}
</script>
JavaScript может менять стили:
Попробуй сам<script>
function setColor() {
document.getElementById("demo").style.backgroundColor = "red";
}
</script>
JavaScript может менять шрифты:
Попробуй сам<script>
function setFont() {
document.getElementById("demo").style.fontSize = "20px";
}
</script>
Задачи
-
Замена контента
Используя JavaScript замените текст внутри абзаца фразой "Привет, JavaScript!". Замена контента должна произойти при загрузке страницы.
Подсказка: Используйте метод document.getElementById(), чтобы найти элемент <p> с нужным id.
Затем добавьте свойство innerHTML, чтобы изменить текст.Задача HTML:
Посмотреть решение »
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <p id="demo">Этот текст будет заменен.</p> <script> // Пишите код здесь </script> </body>
</html>
-
Добавление фона
Используя JavaScript добавьте зеленый фон ("green") к элементу <div>.
Подсказка: Используйте метод document.getElementById(), чтобы найти элемент <div> с нужным id.
Затем используйте свойство style.backgroundColor, чтобы добавить цвет фона.Задача HTML:
Посмотреть решение »
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <div id="demo" style="height:100px; width:100px;"></div> <script> // Пишите код здесь </script> </body>
</html>
-
Изменение размера шрифта
Используя JavaScript увеличте размер шрифта текста "Я люблю JavaScript!" до 45 пикселей.
Подсказка: Используйте метод document.getElementById(), чтобы найти элемент <p> с нужным id.
Затем используйте свойство style.fontSize, чтобы изменить размер шрифта.Задача HTML:
Посмотреть решение »
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <p id="demo">Я люблю JavaScript!</p> <script> // Пишите код здесь </script> </body>
</html>
-
Замена изображения
Используя JavaScript сделайте так, чтобы при клике по кнопке вместо изображения auto.jpg появилось изображение camel.jpg.
Подсказка: Используйте метод document.getElementById(), чтобы найти элемент <img> с нужным id.
Затем используйте свойство src, чтобы указать путь к картинке.Задача HTML:
Посмотреть решение »
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <script> function func() { // Пишите код здесь } </script> <img id="image" src="images/auto.jpg"> <p><button type="button" onclick="func()">Кликни меня!</button></p> </body>
</html>