 |
Отладчики веб-страниц
|
|
|
|
Знакомство с JavaScript
С помощью JavaScript Вы сможете создавать интерактивные веб-страницы.
Интерактивные страницы могут взаимодействовать с пользователем (выводить сообщения, изменять содержимое после определенных действий и т.д.)
JavaScript встраивается прямо в веб-страницы и исполняется браузером во время их загрузки.
JavaScript был создан в 1995 году как инструмент предоставляющий веб-дизайнерам возможности программирования. JavaScript обладает простым синтаксисом и его очень легко изучить.
Все современные браузеры имеют поддержку JavaScript.
Пример
function fun1(){
alert("Данное сообщение было выведено с помощью JavaScript.");
}
function fun2(){
document.getElementById("par1").innerHTML="Содержимое данного элемента "+
"было изменено с помощью JavaScript.";
}
Что можно делать с помощью JavaScript?
С помощью JavaScript можно:
- Динамически изменять содержимое веб-страниц;
- Привязывать к элементам обработчики событий (функции которые выполнят свой код только после того, как совершатся определенные действия);
- Выполнять код через заданные промежутки времени;
- Управлять поведением браузера (открывать новые окна, загружать указанные документы и т.д.);
- Создавать и считывать cookies;
- Определять, какой браузер использует пользователь (также можно определить ОС, разрешение экрана, предыдущие страницы, которые посещал пользователь и т.д.);
- Проверять данные форм перед отправкой их на сервер и многое другое.
Что связывает Java и JavaScript?
Из-за похожего названия многие по ошибке считают JavaScript и Java одним и тем же языком программирования, но это не так.
Java и JavaScript являются двумя совершенно разными языками программирования!
Java - это язык программирования, предназначенный для создания отдельных компилируемых приложений. JavaScriptпредназначен для написания скриптов, которые выполняются в браузере и встраиваются в HTML страницы.
|
|
|
Добавление JavaScript на веб-страницы
JavaScript добавляется на веб-страницы с помощью тэга <script>.
Пример
<scripttype="text/javascript">
document.write("Данный текст выведен на страницу с помощью JavaScript.");
</script>
Объяснение примера:
- Атрибут type тэга <script> указывает браузеру какой скриптовый язык мы встраиваем. В случае если это JavaScript атрибут type должен иметь значение text/javascript;
- document.write() - это команда JavaScript позволяющая выводить произвольное содержимое на страницу;
- Разместив document.write() между тэгами <script> и </script> мы сообщаем браузеру обрабатывать ее как команду JavaScript, поэтому после загрузки страницы браузер выведет: "Данный текст выведен на страницу с помощью JavaScript."
Обратите внимание: если команда document.writeбудет вставлена за пределами <script> она будет обрабатываться браузером как обычный текст.
Отладчики веб-страниц
Отладчики веб-страниц упрощают разработку веб-сайтов и написание JavaScript кода. Отладчики доступны для всех современных браузеров.
В Chrome, Safari, Opera и InternetExplorer 8+ имеются встроенные отладчики, которые можно вызвать с помощью нажатия клавиши F12 (Chrome, Safari и IE) или Ctrl+Shift+I (Opera) при просмотре страниц.
В последней версии Firefox был добавлен встроенный отладчик, который нам показался неудобным, так что мы рекомендуем Вам скачать Firebug (данный отладчик доступен в виде дополнения).
Сделайте сами
Обратите внимание: при выполнении этого и следующих упражнений рекомендуем Вам выключить отладчики (такие как Firebug), которые могут выдавать подсказки. В ходе выполнения заданий Вы сами должны находить и исправлять ошибки в учебных целях.
Задание 1. Выведите следующие строчки текста на страницу с помощью JavaScript:
1. Лес — часть поверхности Земного шара, покрытая древесными растениями.
2. В настоящее время леса занимают около трети площади суши.
3. Площадь леса в России составляет 8 млнкв.км.
|
|
|
Задание 1
<html>
<body>
<scripttype="text/javascript">
//Пишите код здесь
</script>
</body>
</html>
JavaScript в <head>
Если Вы хотите, чтобы JavaScript код не смешивался с HTML разметкой размещайте его в секции head.
Пример
<html><head><scripttype='text/javascript'>functionexample(){alert('Если Вы видите это сообщение, значит страница была полностью загружена.');}</script></head><bodyonload='example()'></body></html>|
|
|
