Основы JavaScript

Лекция 15. Основы JavaScript

Оглавление

Лекция 15. Основы JavaScript

Что такое javascript?

Что умеет javascript?

Подключение и выполнение javascript

Подключение в любом месте

Вынос скриптов в заголовок HEAD

Внешние скрипты

Что такое javascript?

- скриптовый язык, предназначенный для создания интерактивных веб-страниц. не требуется компилировать, он подключается к HTML-странице и работает "как есть". - НЕ java, а совсем другой язык. Он похоже называется, но не более того. У javascript есть свой стандарт: ECMAScript, спецификация которого находится на сайте в разделе стандарт языка.

Кто-то говорит, что javascript похож на Python, кто-то говорит о схожести с языками Ruby, Self. Правда заключается в том, что javascript сам по себе. Это действительно особенный язык.

Что умеет javascript?

Изменять страницу, писать на ней текст, добавлять и удалять теги, менять стили элементов.

Реагировать на события: скрипт может ждать, когда что-нибудь случиться (клик мыши, окончание загрузки страницы) и реагировать на это выполнением функции.

Выполнять запросы к серверу и загружать данные без перезагрузки страницы. Это иногда называют "AJAX".

Устанавливать и считывать cookie, валидировать данные, выводить сообщения и многое другое.

Уникальность javascript

Прелесть и соль Javascript заключаются всего в нескольких пунктах.

·Полная интеграция с браузером

·Простые вещи делаются просто

·Поддерживается почти везде

Этот компот преимуществ нельзя найти ни в одной из других технологий.

Например, такие технологии как ActiveX, VBScript, XUL - поддерживаются не в каждом браузере (не кросс-браузерны). Такие технологии как Flash, Silverlight, Java - не полностью интегрированы с браузером, работают в своем окружении.

Поэтому Javascript - уникальная технология, и таковой останется. Сейчас она развивается, создается язык Javascript 2 и новый интерпретатор.

Другие технологии. Альтернативы javascript.

Возможности javascript в некоторых областях, к сожалению, ограничены.

Поэтому используются альтернативные технологии.

- по сравнению с javascript, java-applet'ы тяжелые, долго загружаются, но могут все. Они, как правило, используются там, где требуется почти-десктоп приложение. Очень сильно java'у потеснила технология Flash.- один из наиболее распространенных в мире языков. На нем существует громадное количество библиотек, с помощью которых можно описывать сложные интерфейсы и алгоритмы. Но на интернет-сайтах это нужно редко.

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

Мощные средства для создания сетевых соединений(сокеты)

Объекты для работы с мультимедиа: изображениями, аудио, видео

Внутреннее хранилище объектов, которые не посылаются на сервер при каждом запросе, как куки.

javascript страница интерактивный браузер

Удобные графические средства разработки для Flash

Ну и для баланса - недостатки, по сравнению с javascript.

Отдельный контейнер. Например, нельзя выделить участок текста, частично находящегося в контейнере Flash.

Плохо индексируется поисковиками. Поисковики ходят по HTML-ссылкам, но(пока?) не кликают по ссылкам внутри Flash-приложения.

Из Flash можно легко вызвать javascript. Наоборот - сложнее, но тоже возможно, поэтому целесообразно знать обе технологии и применять их вместе.

, Silverlight, XUL, vbscript

Эти технологии призваны дополнять javascript в области коммуникации и построения интерфейсов.

Пока они все далеки по распространенности от javascript и flash. - "легкая" надстройка над Java, будет работать только с Java на компьютере клиента.- язык описания интерфейсов, удобен если писать планируете только под Mozilla. Также используется для написания десктоп-приложений. - конкурент Flash от Microsoft на основе .NET. Другими OS, кроме Windows, поддерживается слабо. Не имеет широкого распространения. - попытка Microsoft сделать подобие javascript на основе Visual Basic. Не развивается, сильно уступает по возможностям, и, как следствие - практически не используется в современном веб-программировании.

Подключение и выполнение javascript

подключается напрямую в HTML-файл. Самый простой способ - это написать javascript-команды внутрь тега <script> где-нибудь в теле страницы.

Подключение в любом месте

<html>

<body>

<h1>Считаем кроликов</h1>

<script type="text/javascript">

for(var i=1; i<=3; i++) {

alert("Из шляпы достали "+i+" кролика!")

}

</script>

<h1>...Посчитали</h1>

</body>

</html>

Когда браузер читает HTML-страничку, и видит <script> - он первым делом читает и выполняет код, а только потом продолжает читать страницу дальше.

Так, в этом примере будет показано начало страницы, затем три раза выполнится функция alert, которая выводит окошко с информацией, а только потом появится остальная часть страницы.

В этом примере использовались следующие элементы.

<script type="text/javascript"> ... </script>

Тег <script> сообщает браузеру о том, что внутри находится исполняемый скрипт. Атрибут type говорит о том, что это javascript. Вообще говоря, атрибут может отсутствовать - разницы нет, но с точки зрения стандарта его следует указать.

Конструкция for

Обычный цикл, по синтаксису аналогичный другим языкам программирования.

Объявление var i

Объявление переменной внутри цикла: i - локальная переменная.

Функция alert

Выводит сообщение на экран и ждет, пока посетитель не нажмет ОК

Вынос скриптов в заголовок HEAD

Обычно javascript стараются отделить от собственно документа.

Для этого его помещают внутрь тега HEAD, а в теле страницы по возможности оставляется чистая верстка.

В следующем примере javascript-код только описывает функцию count_rabbits, а ее вызов осуществляется по нажатию на кнопку input.

<html>

<head>

<script type="text/javascript">

function count_rabbits() {

for(var i=1; i<=3; i++) {

// оператор + соединяет строки

alert("Из шляпы достали "+i+" кролика!")

}

}

</script>

</head>

<body>

<input type="button" onclick="count_rabbits()" value="Считать кролей!"/>

</body>

</html>

Для указания запускаемой по клику функции в input был использован атрибут onclick. Это лишь вершина мощного айсберга javascript-событий.

Внешние скрипты

Обычно javascript-код вообще не пишут в HTML, а подключают отдельный файл со скриптом, вот так:

<script src="/my/script.js"></script>

При этом файл /my/script.js содержит javascript-код, который иначе мог бы находиться внутри тега <script>.

Это очень удобно, потому что один и тот же файл со скриптами можно подключать на разных страницах. При правильных настройках сервера браузер закеширует его и не будет скачивать каждый раз заново.

Больше работ по теме: