HTML, Excel, Word, SEOОсновы JavaScript ⇒ Введение

ОСНОВЫ JavaScript

Учебник JavaScript
·Знакомство с JS. Переменные, операторы, операции
·Функции
·Модель HTML документа
·Иерархия документов в бразуере
·Формы
·Окна и фреймы
·Ссылки, заголовок, статус
·События
·События клавиатуры и мыши
·События. Таймер
·Стили. Управление стилями
·Слои и блоки. Управление видимостью
·Объекты JS
·Внешние объекты
·Внутренние объекты
·Массивы
·Регулярные выражения
·Математика в JS
·Пример простого калькулятора
·Дата и время
·Cookies и хранение состояния
·Немного об AJAX
·Работа с WebMoney



JavaScript. Введение

Что такое JS

Примеры JS, простые и сложные


Что такое JavaScript

Независимо от того, опытный ли вы вебмастер, или только что прочли учебник по HTML, вы знаете, что при помощи HTML можно создавать только статические страницы. Для многих случаев это подходит как нельзя лучше. Но часто некоторая активность, или динамика, только улучшит вашу страницу.

Такие вещи, как, например, календарик, который открывается при клике мышкой, или панель навигации, которую всегда видно, как бы далеко вы не прокрутили страницу – как часто вы встречаете подобные дополнения на сайтах? А иногда и просто бегущая строчка с новостями, или, например, меню в виде выпадающего списка, или красивый шлейф за курсором мышки... Удобно, а иногда и просто красиво, так ведь?


Все это динамический HTML (или, сокращенно, DHTML).


Сразу нужно сказать, что DHTML – это не какой-то специальный язык разметки и не модифицированный HTML. Понятие DHTML базируется на трех вещах собственно на языке HTML, на каскадных таблицах стилей CSS и на встроенном в браузер языке – чаще всего это JavaScript.


Описывать тонкости CSS и HTML я не стану – этому посвящены другие учебники, я же в большей степени буду рассказывать о JavaScript (или JS), и его применении в связке с HTML и CSS.


Для начала стоит определиться, что же такое JavaScript?


Несмотря на то, что этому языку уже более 10 лет, а если быть точным, то придуман он в 1995 году, его очень часто путают с языком Java. На самом деле эти языки не имеют практически ничего общего. Язык JavaScript – это встраиваемый клиентский язык, то есть обладает двумя свойствами.

Первое свойство – исполнение на клиентском компьютере. Если вы знаете, как вообще работает весь этот интернет, то вам должно быть известно, что веб-страницы, которые отображает браузер, создаются (или просто хранятся) на другом компьютере, называемом сервером. Браузер посылает запрос на сервер и получает в ответ HTML-код страницы. В этом случае браузер называется клиентом.

Главное – понимать, что после того, как страница отдана браузеру, сервер уже не может изменить ее содержимое.

В случае же с JavaScript программы, а точнее – скрипты – выполняются прямо в браузере. Это дает таким скриптам возможность получать доступ к загруженной странице, и изменять ее.


Второе свойство – встраиваемость. Для того чтобы выполнять скрипты, написанные на языке JavaScript, не требуется никаких дополнительных программ – все необходимое для работы скрипта уже имеется в браузере (если, конечно, это не браузер пятнадцатилетней давности).


Сразу нужно сказать, что в разных браузерах JavaScript ведет себя немного по-разному. Это не касается самого языка – одни и те же конструкции будут выполняться одинаково. Все дело в средствах, которые браузер предоставляет скрипту – так, например, многие скрипты работают в браузере Mozilla FireFox, но выдают ошибки в других браузерах, например, в Apple Safari.


Поэтому одним из требований к качественным скриптам является обязательная работоспособность как минимум в FireFox и Internet Explorer.


Все примеры скриптов, которые вы найдете в этом учебнике, будут соответствовать данному требованию.


И, напоследок, разгадка странного названия.


Дело в том, что при создании этого языка, инженеры Netscape решили сделать ему дополнительную рекламу. А одним из самых популярных, перспективных и подающих надежды языков на то время считался Java. Долго раздумывать не пришлось.

Примеры простые и сложные.

Несмотря на то, что язык JS чаще всего используется для небольших вставок в страницы, это язык достаточно мощный. Он практически не уступает уже упомянутому языку Java. Так, например, на этом языке можно создавать (конечно, не без участия браузера) программы, мало чем отличающиеся от привычных, так называемых десктопных.


Чтобы не быть голословным, я приведу примеры:

  • Google.com. Эта фирма использует язык JavaScript во множестве своих продуктов. Так, например, известная почта Gmail практически полностью построена на JS. А такие проекты, как Google Maps или Google Docs вообще невозможны без применения JavaScript
  • ExtJS.com. Здесь можно посмотреть, на что способен JS – лучшим примером будет Web Desktop, целиком написанный на этом языке. Об ExtJS я еще расскажу, но значительно позже
  • Кроме приведенных сайтов, можно было бы назвать еще тысячи, которые в той или иной степени используют JS. Но, я думаю, стоит добавить к этим тысячам еще один – это будет ваш сайт.


    По исторически сложившейся традиции изучение любого языка начинают с так называемого «HelloWorld»'а, то есть программы, которая не делает ничего, кроме вывода простого сообщения. Я не буду отступать от этой традиции.


    Но для начала стоит обзавестись некоторыми инструментами. Они очень сильно облегчат разработку на JavaScript.


    Для начала, вам потребуется редактор с подсветкой синтаксиса. Выбор его – дело вкуса. Я, например, в крупных проектах использую Eclipse IDE, а в проектах поменьше – NotePad++. Вы можете использовать тот редактор, который вам больше нравится (хотя, честно говоря, «Блокнот» из стандартной поставки Windows я бы не рекомендовал).


    Второй инструмент, без которого очень сложно обойтись, – это отладчик. Пока что я не встречал отладчика лучшего, чем FireBug, который поставляется как модуль к FireFox'у. Для ярых любителей Internet Explorer можно порекомендовать Microsoft Script Debugger, но на мой взгляд он не так удобен.


    Тем же, кто предпочитает Opera, Safary и еще более экзотические браузеры, я, к сожалению, ничего посоветовать не могу.


    Теперь, когда вы вооружены и готовы действовать, вам понадобится веб-страница.


    Достаточно будет простого каркаса, без содержимого. Например:


     

    Если вы откроете ее в браузере, то, как и следовало ожидать, ничего не увидите.

    Но мы можем указать браузеру, что внутрь этой страницы нужно вывести текст.

    Для этого к исходному коду страницы нужно подключить скрипт.

    Сделать это можно двумя способами, и оба эти способа используют тег <script>

    Например, можно написать так:


     

    Попробуйте теперь открыть эту страницу в браузере. Вы увидите симпатичное окошко с надписью «Здесь был JavaScript» сразу после загрузки страницы (в настройках браузера должны быть разрешены всплывающие окна).


    Конечно, до настоящего скрипта еще далеко. Но это ваша первая программа на языке JavaScript, и это первый успех в изучении языка.



    В начало страницы



    В начало страницы