Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Это моя первая публикация в рубрике Заметки о JavaScript. Хочу сказать, что мои скромный ресурс не претендовал, не претендует и не будет претендовать на всесторонность, а сам автор никогда не был и не будет web гуру. На страницах своего блога я совершаю попытку простым и понятным для людей языком рассказать об основах различных web технологий. И эта рубрика будет посвящена интерпретируемому языку программирования с объектно-ориентированными возможностями JavaScript.
Помимо выше сказанного, JavaScript является алгоритмическим языком (то есть, при помощи JavaScript мы как бы даем указание браузеру, как ему реагировать на определенные действия пользователя). В рубрики Заметки о HTML, а конкретно в статье, про структуру HTML-документа, мы с вами уже поговорили, из каких трех базовых элементов состоят наши страницы: HTML, HEAD и BODY.
Но простые статичные HTML страницы это же так скучно и не интересно, а нам бы хотелось добавить немного динамики и увеличить количество способов взаимодействия с посетителями наших сайтов.
Думаю, что вы знаете общую схему взаимодействия браузера с сервером, и каких-то особых пояснений не требуется. Простые HTML-страницы, это грубо говоря, обычный набор HTML элементов нарисованных для нас браузером, а ведь иногда требуется взаимодействие с клиентом и причем такое взаимодействие, которое не несло бы нагрузку на сервер нашего хостинг провайдера, когда какие-то изменения в HTML страницу пользователь может вносить не делая запрос к серверу, а прямо со своего компьютера.
И в основном для таких задач используется язык JavaScript, который встраивается в HTML-страницы, первый браузер, который поддерживал JavaScript, был Netscape Navigator, собственно программисты Netscape и придумали этот язык.
Из всего выше сказанного понятно, что для того что бы начать программировать на JavaScript достаточно web-браузера, и простого текстового редактора(желательно с подсветкой синтаксиса, такой как Notepad++). То есть для программирования на JavaScript, нам не нужны ни сервера типа Apache, MySQL, ни готовые сборки типа Denwer. Так же хочу сказать, что JavaScript используется не только с клиентской стороны, но и со стороны серверных приложений, в различных Java-приложения, но на страницах своего проекта, я буду говорить только о клиентском JavaScript.
Если же вы захотите понять все нюансы и тонкости написания сценариев на JavaScript – то я рекомендовал бы приобрести себе книгу «JavaScript подробное руководство», автор Дэвид Флэнаган, издательство O’Reilly (у самого имеется 5-ое издание этой книги). Полезнее этой книги для понимания сути происходящего может быть только постоянная практика написания JavaScript сценариев.
Содержание статьи:
JavaScript — это алгоритмический язык программирования. Что же такое алгоритм? Если дать простое и понятное определение, то алгоритм это ни что иное, как порядок выполняемых действий. Грубо говоря, мы сообщаем компьютеру последовательность действий, которые он должен выполнить.
Например, мы можем дать задание вывести на экран окно, в котором пользователь может ввести свое имя, а затем дать указание, если пользователь ввел свое имя поприветствовать его, если пользователь ничего не ввел – ничего не делать.
Это и есть алгоритм. Давайте теперь зададимся вопросом, зачем же в браузер потребовалось вводить какой-то алгоритмический язык программирования? Разве нам недостаточно языка программирования PHP и языка разметки гипертекста(HTML)?
Что бы это понять, достаточно в общих чертах вспомнить принцип работы клиент-сервер. Когда мы вводим в адресную строку браузера какой-то адрес, браузер устанавливает соединение с удаленным компьютером(сервером) и посылает запрос – «выдай мне такую-то страницу», если на сервере хранятся HTML страницы сервер их просто отдает браузеру, если на сервере хранится PHP код удаленный компьютер формирует HTML страницу и отдает ее браузеру.
Это всё хорошо до тех пор, пока нам не требуется вносить какие-нибудь изменения в HTML-документ. Ну например, изменить размер шрифта на странице, цвет фона страницы, и многое другое, согласитесь не очень разумно делать повторный запрос к серверу для того, чтобы изменить размер или цвет шрифта в документе, во-первых это лишняя нагрузка на сервер, во-вторых это займет гораздо больше времени.
И так перед нами стоит задача, сделать такую HTML страницу, которая бы практически мгновенно реагировала на действия пользователя без обращения к серверу. HTML таких возможностей не имеет вовсе, используя PHP мы будем обращаться к серверу, в этом случае нам поможет JavaScript, интерпретатор JavaScript встроен в браузер и все действия с полученным документом буду производиться не на стороне сервера, а на стороне клиента, то есть изменения будут происходить на вашем компьютере без обращения к серверу.
С назначение JavaScript мы разобрались – модификация HTML страниц без запросов к серверу. JavaScript, как и PHP это встраиваемый язык, встраивают его естественно в HTML страницы.
Надеюсь, теперь понятно, что такое JavaScript, более-менее определились с областью применения JavaScript и для чего используется JavaScript.
Собственно, перед тем как встраивать куда-то сценарии JavaScript, нужно создать то куда мы будем встраивать JavaScript-код. А именно HTML-страницу. Достаточно открыть текстовый редактор и написать три парных тэга <html>, <head> и <body>, те кто совсем формалисты могут написать еще и открывающий тэг <title> и закрывающий тэг </title>, а между ними написать какое-нибудь название своего документа, которое будет отображаться на вкладке в браузере. И естественно, что JavaScript-код нужно встраивать в заголовок HTML документа, то есть между тэгами <head>…</head>. Есть несколько способов вставить JavaScript сценарий в код HTML страницы.
Пример HTML страницы:
[php]
Пример HTML страницы
[/php]
И так как я уже говорил, способов того как вставить код JavaScript в HTML страницу несколько и начнем мы с правильного способа вставки JavaScript кода. Правда, на страницах своего блога я еще не писал про HTML атрибуты и их параметры, ну да ладно.
Как было сказано выше, вставлять JavaScript нужно между тэгами <head>…</head>. Но это еще не все, сам сценарий нужно писать между парными тэгами <script>…</script>, у тэга <script> обязательным указываем атрибут type со значением “text/javascript”(по стандарту), все дело в том, что в стандарте HTML есть правило, которое гласит, что если содержимым какого-то тэга является код отличный от HTML, то у этого тэга обязательно указывается атрибут type, параметром которого является язык который вставляется.
Пример вставки JavaScript-кода в HTML страницу, при помощи тэга скрипт:
[php]
Как встроить JavaScript-код в HTML-страницу
<!--Вычисляем факториал -->
<script type="text/javascript">// <!
|
1 |
]></script>
[/php]
Внутри тегов <script>...</script> написана программа на языке JavaScript, которая вычисляет факториалы чисел от 1 до 9 и выводит результат на экран. Можете попробовать скопировать данный пример в свой текстовый редактор, сохранить его в формате HTML и посмотреть результат работы в браузере.
Для самых ленивых привожу скрин результата работы программы:
Тут стоит немного пояснить, как вы знаете, факториал нуля равен единице. Но интерпретатору JavaScript это неизвестно, поэтому считать факториалы я начал с единицы.
Данный способ встраивания JavaScript кода в HTML страницы считается устаревшим, потому что по нынешним стандартам HTML, атрибут language считается нежелательным. И принципиальных отличий от первого способа тут нет, точно так же мы помещаем парные тэги <script>…<script>, в заголовок HTML-страницы, только вместо атрибута type, указываем атрибут language, параметром которому служит “javascript”. Если же вы хотите быть уверенным на 100%, что осел вас поймет, то вместо “javascript” следует написать “JScript”(это майкрософтовская разновидность JavaScript). А между открывающим тэгом <script> и закрывающим тэгом </script> размещайте свой код написанный на JavaScript. Я бы не советовал использовать вам такой способ вставки, хотя в принципе работать он должен.
За нас уже все придумали и особо размышлять тут не над чем, для ситуаций, когда у пользователя в настройках браузера отключена поддержка JavaScript, или браузер не поддерживает JavaScript, существует парный тэг <noscript>, в него не надо помещать никаких сценариев, а вот написать, между открывающим тэгом <noscript> и закрывающим тэгом </noscript>, что-нибудь типа «Мужик, в настройках твоего браузера отключены скрипты или он не поддерживает их вовсе» стоит.
Все дело в том, что содержимое элемента NOSCRIPT, будет отображаться только тогда, когда браузер не поддерживает работу со скриптами или их поддержка отключена. Думаю, что на некоторых страницах сайтов было бы неплохо размещать этот тэг, с пояснениями, что будет доступно посетителю после того как он включит поддержку JavaScript сценариев например.
Естественно, что для вставки в HTML страницы нужно использовать первый способ вставки JavaScript-кода в HTML-документы, так же вы можете использовать просто тэг <script> и вставлять код без указания атрибута type, современные браузеры вас поймут. А не современные могут и не понять. Но стандартом HTML рекомендован именно первый способ, который я описал.
После того, как мы поговорили о способах встраивания JavaScript кода в HTML-страницы, неплохо было бы посмотреть, какие средства есть у JavaScript, для вывода на экран результатов своей работы. А этих средств не так уж и много, всего-то два.
Если быть совсем уж точным, то следует сказать, что document это объект JavaScript, причем для web разработчика самый важный из встроенных JavaScript объектов, а write (), это метод объекта document, который грубо говоря, предназначен для внесение изменений в код HTML-документа, то есть для добавления новых элементов и текстовых строк в открытую HTML страницу. Но обо всех этих вопросах, я планирую поговорить в других публикациях рубрики «Заметки о JavaScript».
Ну и конечно, я не буду оригинален и мы с вами посмотрим, как при помощи метода write (), объекта document вывести строку «Привет, мир!»
[php]
Метод write () объекта document
</pre>
<h2>Какой-то заголовок</h2>
<pre>
<script type="text/javascript">// <!
|
1 |
]></script>
[/php]
Результатом данного примера будет вывод надписи Hello, world! в открытом окне браузера. Синтаксис очень простой, строка, заключенная в парный тэг <p>…</p> берется в двойные кавычки вместе с открывающим и закрывающим тэгом. После выполнения сценария, браузер создает новый элемент P, содержанием которого является строка “Hello, world!”. Если же мы захотим вывести на экран содержание переменной, то ее в кавычки брать не надо. А достаточно просто передать методу write () объекта document.
Обратите внимание, что исходный код HTML-страницы после выполнения JavaScript сценария не изменяется, а вот код HTML элементов изменится, на страницу, формируемую браузером, добавляются новые элементы, которые опять же, грубо говоря, мы передаем методу write (). И так document.write () вносит изменения в HTML документ.
Метод alert () – это метод JavaScript объекта window, он выводит нам окно предупреждение с текстовым сообщением и кнопкой OK. То есть никаких новых элементов на странице, как в случае с document.write (), метод alert () не создает. Но переменную, которая будет хранить строковые, либо числовые типы данных метод alert () выведет без проблем.
[php]
Метод write () объекта document
</pre>
<h2>Какой-то заголовок</h2>
<pre>
<script type="text/javascript">// <!
|
1 |
]></script>
[/php]
В этом примере мы объявили, то есть создали переменную “a”, а затем инициализировали её (присвоили ей значение - «Джигурда»). После выполнения кода, браузер выводит окно с кнопкой OK. Причем на странице не создается никаких новых элементов. Исходный код и код элементов после выполнения сценария будут одинаковыми.
Метод confirm () — метод JavaScript объекта window, он выводит нам диалоговое окно, с двумя кнопками «ОК» и «Отмена». Так же как и в случае с методом alert (), метод confirm () может работать, только с элементарными типами данных, то есть со строками, числами и логическими значениями.
[php]
Метод write () объекта document
</pre>
<h2>Какой-то заголовок</h2>
<pre>
<script type="text/javascript">// <!
|
1 |
]></script>
[/php]
В примере, переменной “a” я присвоил значение “ZamrtkiNaPolyah.ru?”, и передал её методу confirm () так же я передал этому методу две строки «Нравится ли Вам мой блог » и «??», а так же соединил все это вместе при помощи оператора конкатенации + (склейки строк). После чего в окне браузера появилось диалоговое окно, с переданной строкой и двумя кнопками “Ok” и «Отмена».
Предлагаю теперь посмотреть, изменится ли что-нибудь в отображение нашего документа, от того, где мы поместим сценарий JavaScript, внутрь элемента BODY или внутрь элемента HEAD. А так же посмотрим, что произойдет со страницей, если мы напишем сначала document.write, а затем alert или confirm и наоборот.
И так давайте сделаем пример, в котором мы разместим наш скрипт между тэгами <head>…</head>, где сначала будет идти метод alert () объекта window, а затем document.write.
[php]
Вывод данных в JavaScript
<script type="text/javascript">// <!
|
1 |
]></script>
</pre>
<h2>Какой-то заголовок</h2>
<pre>
[/php]
Если вы скопируете и сохраните этот пример в своем текстовом редакторе с расширение .html, я использую бесплатный редактор с подсветкой синтаксиса Notepad++, то увидите, что сначала у Вас появится окно с текстом-предупреждением.
А только после того как Вы нажмете на кнопку “OK”, начнется исполнение оставшегося кода, то есть посчитается факториал и document.write создаст новые элементы в открытой HTML страницы.
Теперь давайте изменим пример и напишем, тот код, который находился ниже метода alert () над ним и посмотрим, что у нас получится.
[php]
Вывод данных в JavaScript
<script type="text/javascript">// <!
|
1 |
]></script>
</pre>
<h2>Какой-то заголовок</h2>
<pre>
[/php]
А получится у нас следующее:
Так же как и в прошлый раз у нас появляется окно с предупреждением, но на HTML-страницы уже отображены результаты вычисления факториала, которые мы вывели, с помощью document.write. Из всего вышесказанного и увиденного следует несколько интересных особенностей, метод alert () или confirm останавливает выполнение JavaScript кода, до того момента, пока окно не будет закрыто или не нажато ОК, в случае с методом confirm (), если не будет соответствующих инструкций «Отмена» тоже можно жать. А вот document.write () ничего не останавливает, а дописывает нужную строчку. Что бы разобраться, куда document.write дописывает строчку, нужно попробовать разместить JavaScript-код внутрь элемента BODY. Но перед этим давайте создадим на нашей HTML странице какой-нибудь заголовок. В итоге у нас получится следующее:
[php]
Вывод данных в JavaScript
</pre>
<h2>Какой-то заголовок</h2>
<pre>
<script type="text/javascript">// <!
|
1 |
]></script>
[/php]
И видим, что вначале у нас появилось окно с предупреждением, которое остановило выполнение JavaScript кода, но вместе с окном на странице появился заголовок (т.к. заголовок прописан в коде HTML страницы и браузер его обрабатывает отдельно от сценария JavaScript), а затем уже выполнилась оставшаяся часть скрипта, и document.write () вывел результаты вычисления факториала, сразу после заголовка H2. То есть при размещение document.write () внутри элемента BODY, строки будут дописываться именно в том место HTML-страницы, в котором расположен document.write. А в случае, когда JavaScript код, а точнее document.write расположен внутри элемента HEAD, метод write () новые строчки дописывает сразу после открывающего тэга <body>:
Можете в этом убедиться, просто скопировав данный пример в текстовый редактор и сохранив его в формате HTML, после чего откройте его в браузере и посмотрите код элементов HTML-страницы, если вы используете Mozilla FireFox, то для просмотра кода элементов страницы используйте плагин для верстальщика FireBug.
Как мы видим, возможности document.write сильно ограничены(можно дописывать только строчки и то в строго указанное место), а confirm () и alert () вовсе имеют свое специальное узконаправленное предназначение. Поэтому я предлагаю использовать метод write () объекта document, только для проверки работоспособности наших JavaScript программ, в последствии я расскажу о том какие все-таки методы используются для динамического изменения HTML-страницы при помощи JavaScript.
После того, как мы поговорили о способах встраивания JavaScript кода в HTML-страницы, неплохо было бы посмотреть, какие средства есть у JavaScript, для вывода на экран результатов своей работы. А этих средств не так уж и много, всего-то два.
Если быть совсем уж точным, то следует сказать, что document это объект JavaScript, причем для web разработчика самый важный из встроенных JavaScript объектов, а write (), это метод объекта document, который грубо говоря, предназначен для внесение изменений в код HTML-документа, то есть для добавления новых элементов и текстовых строк в открытую HTML страницу. Но обо всех этих вопросах, я планирую поговорить в других публикациях рубрики «Заметки о JavaScript».
Ну и конечно, я не буду оригинален и мы с вами посмотрим, как при помощи метода write (), объекта document вывести строку «Привет, мир!»(пример)
Результатом данного примера будет вывод надписи Hello, world! в открытом окне браузера. Синтаксис очень простой, строка, заключенная в парный тэг
…
берется в двойные кавычки вместе с открывающим и закрывающим тэгом. После выполнения сценария, браузер создает новый элемент P, содержанием которого является строка “Hello, world!”. Если же мы захотим вывести на экран содержание переменной, то ее в кавычки брать не надо. А достаточно просто передать методу write () объекта document. Обратите внимание, что исходный код HTML-страницы после выполнения JavaScript сценария не изменяется, а вот код HTML элементов изменится, на страницу, формируемую браузером, добавляются новые элементы, которые опять же, грубо говоря, мы передаем методу write (). И так document.write () вносит изменения в открытый HTML документ.
Метод alert () – это метод JavaScript объекта window, он выводит нам окно предупреждение с текстовым сообщением и кнопкой OK. То есть никаких новых элементов на странице, как в случае с document.write (), метод alert () не создает. Но переменную, которая будет хранить строковые, либо числовые типы данных метод alert () выведет без проблем. ()
В этом примере мы объявили, то есть создали переменную “a”, а затем инициализировали её (присвоили ей значение — «Джигурда»). После выполнения кода, браузер выводит окно с кнопкой OK. Причем на странице не создается никаких новых элементов. Исходный код и код элементов после выполнения сценария будут одинаковыми.
Третий способ в JavaScript вывести информацию в окно браузера – метод confirm ().
Метод confirm () — метод JavaScript объекта window, он выводит нам диалоговое окно, с двумя кнопками «ОК» и «Отмена». Так же как и в случае с методом alert (), метод confirm () может работать, только с элементарными типами данных, то есть со строками, числами и логическими значениями.
В примере, я переменной “a” присвоил значение “ZamrtkiNaPolyah.ru?”, и передал её методу confirm () так же я передал этому методу две строки «Нравится ли Вам мой блог » и «??», а так же соединил все это вместе при помощи оператора конкатенации + (склейки строк). После чего в окне браузера появилось диалоговое окно, с переданной строкой и двумя кнопками “Ok” и «Отмена».
Предлагаю теперь посмотреть, изменится ли что-нибудь в отображение нашего документа, от того, где мы поместим сценарий JavaScript, внутрь элемента BODY или внутрь элемента HEAD. А так же посмотрим, что произойдет со страницей, если мы напишем сначала document.write, а затем alert или confirm и наоборот.
И так давайте сделаем пример, в котором мы разместим наш скрипт между тэгами …, где сначала будет идти метод alert () объекта window, а затем document.write.
(sample)
Если вы скопируете и сохраните этот пример в своем текстовом редакторе с расширение .html, я использую бесплатный редактор с подсветкой синтаксиса Notepad++, то увидите, что сначала у Вас появится окно с текстом-предупреждением, а только после того как Вы нажмете на кнопку “OK”, начнется исполнение оставшегося кода, то есть посчитается факториал и document.write создаст новые элементы в открытой HTML страницы.
Теперь давайте изменим пример и напишем, тот код, который находился ниже метода alert () над ним и посмотрим, что у нас получится.
(пример)
А получится у нас следующее:
(картинка)
Так же как и в прошлый раз у нас появляется окно с предупреждением, но на HTML-страницы уже отображены результаты вычисления факториала, которые мы вывели, с помощью document.write. Из всего вышесказанного и увиденного следует несколько интересных особенностей, метод alert () или confirm останавливает выполнение JavaScript кода, до того момента, пока окно не будет закрыто или не нажато ОК, в случае с методом confirm (), если не будет соответствующих инструкций «Отмена» тоже можно жать. А вот document.write () ничего не останавливает, а дописывает нужную строчку. Что бы разобраться, куда document.write дописывает строчку, нужно попробовать разместить JavaScript-код внутрь элемента BODY. Но перед этим давайте создадим на нашей HTML странице какой-нибудь заголовок. В итоге у нас получится следующее:
(пример)
И видим, что вначале у нас появилось окно с предупреждением, которое остановило выполнение JavaScript кода, но вместе с окном на странице появился заголовок (т.к. заголовок прописан в коде HTML страницы и браузер его обрабатывает отдельно от сценария JavaScript), а затем уже выполнилась оставшаяся часть скрипта, и document.write () вывел результаты вычисления факториала, сразу после заголовка H2. То есть при размещение document.write () внутри элемента BODY, строки будут дописываться именно в том место HTML-страницы, в котором расположен document.write. А в случае, когда JavaScript код, а точнее document.write расположен внутри элемента HEAD, метод write () новые строчки дописывает сразу после открывающего тэга :
(пример)
можете в этом убедиться, просто скопировав данный пример в текстовый редактор и сохранив его в формате HTML, после чего откройте его в браузере и посмотрите код элементов HTML-страницы, если вы используете Mozilla FireFox, то для просмотра кода элементов страницы используйте плагин для верстальщика FireBug.
Как мы видим, возможности document.write сильно ограничены(можно дописывать только строчки и то в строго указанное место), а confirm () и alert () вовсе имеют свое специальное узконаправленное предназначение. Поэтому я предлагаю использовать метод write () объекта document, только для проверки работоспособности наших JavaScript программ, в последствии я расскажу о том какие все-таки методы используются для динамического изменения HTML-страницы при помощи JavaScript.
На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru
Когда логическое продолжение этой статьи будет? И планируете ли вы писать что-нибудь с реальными примерами написанными на JavaScript, чтобы их реально у себя на сайте применить можно было???
СпасибоЗа простой язык изложения. Сразу видно, что автор статьи владеет знаниями. Истинно знать — это догматично усвоить, чтоб потом при постижении суметь выдать это по своему. Язык изложения не догматичен, а просто своими словами. В сети в основном копипасты
Продолжайте. Буду периодически захаживать
Вам спасибо!)
На мой взгляд очень профессионально
Спасибо! Стараемся!