Занятие 1. Обзор технологий, введение в синтаксис JavaScript

Опубликовано пользователем Бессонов Л.В. 18.02.2010г.

AJAX — применение и альтернативы

Классическое веб-приложение построено по следующему принципу: на странице существует одна или несколько ссылок, нажав на которую пользователь может инициировать некоторое действие на сервере и получить с сервера новую страницу с изменившимися данными. Минусом данного подхода является то, что каждый раз с сервера загружаются все данные, а не только изменившиеся и это может создать большую нагрузку на сервер и медленную работу с приложением. Кроме того, пользователь, привыкший к обычным приложениям не всегда может легко освоиться с такой технологией.

Как альтернатива имеется ряд технологий позволяющих производить обновление информации на странице по частям:

  1. Фреймы и Javascript;
  2. Апплеты и LiveConnect (взаимодействие с JavaScript);
  3. Flash;
  4. Javascript и XmlHTTPRequest (AJAX).

Фреймы и Javascript

Исторически один из самых ранних способов частичного обновления страницы. JavaScript имеет возможность запросить обновление фрейма с определенного URL и воспользоваться пришедшей информацией для обновления информации на других частях страницы. Фрейм возможно сделать невидимым или почти невидимым. Данный способ работал в Internet Explorer и Netscape Navigator, но имел неприятное свойство — при обновлении фрейма раздавался звук щелчка на ссылке (если он включен в браузере), что не могло не раздражать пользователей. Кроме того, такой способ обновления страниц не совсем согласуется с моделью безопасности современных браузеров.

Апплеты и LiveConnect (взаимодействие с JavaScript)

Для обеспечения большей гибкости в общении клиента и сервера некоторое время использовались апплеты (Java приложения работающие на стороне браузера) и технология LiveConnect для передачи информации между апплетом и страницей посредством JavaScript. Данная технология, в отличие от фреймов, позволяла передавать и получать данные в формате XML, что обеспечивала некоторую гибкость в разработке приложений. Но сложность данной технологии и отсутствие поддержки во всех операционных системах привели к тому, что использовали её лишь очень немногие Web-приложения. Кроме того, эта технология так же имела проблемы с настройками безопасности во многих браузерах.

Flash

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

Javascript и XmlHTTPRequest (AJAX)

AJAX (от Asynchronous JavaScript and XML) — термин придуманный Джессом Джеймсом Гарреттом для обозначения технологии построенной на взаимодействии с протоколом HTTP и объектом XMLHttpRequest с помощью языка JavaScript.

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

Изучение технологии AJAX и является целью нашей практической работы в курсе «Сетевая экономика».

Занятие 1. Встраивание JavaScript в страницу, основы JavaScript

Существуют 2 разных места в HTML странице, которые позволяют встроить код JavaScript и выполнить его:

  1. тэг <script>;
  2. обработчики событий.

Рассмотрим их подробнее.

Встраивание JavaScript с помощью тэга <script>

Тэг <script> обычно располагается внутри тэга <head> как на листинге ниже.

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. document.write("Hello world!");
  5. </script>;
  6. </head>
  7. <body>
  8. </body>
  9. </html>

При таком способе встраивания весь текст программы на языке JavaScript интерпретируется в момент загрузки. Это означает, что ещё до загрузки тэга <body> и текста основной страницы, программа уже выполнится. И, как следствие, напрямую манипулировать с объектами расположенными на странице нельзя. Однако, имеется возможность определять функции, которые будет вызваны позже и смогут произвести необходимые нам действия (функции рассматриваются позже на этом же занятии).

Обратите внимание на атрибут type тэга <script>. Для использования языка JavaScript данный атрибут принимает значение text/javascript. До появления данного атрибута в стандарте HTML использовался нестандартный атрибут language со значением Javascript. Большинство современных браузеров не требуют задания ни того ни другого атрибута для корректной работы скриптов.

В данном примере используется вызов функции write объекта document доступного нам в среде выполнения JavaScript внутри браузера. Обратите внимание, что имя функции и имя объекта разделены точкой, что для вызова функции используются фигурные скобки, а строковый литерал внутри функции указан в двойных кавычках. В конце строки стоит точка с запятой, которая используется в языке JavaScript для разделения инструкций между собой.

Сама функция write объекта document служит для записи текста в тело документа. При этом любые существующие элементы документа на момент первого вызова функции write буду удалены, а последующие вызовы write позволяют дописывать информацию в документ. Текст, передаваемый write, может содержать любые тэги html, они будут проинтерпретированы и отображены браузером.

Ещё одной простой функцией языка JavaScript доступной в браузере является функция alert. При её вызове появляется окно с сообщением, текст сообщения передаётся в качестве аргумента функции, а выполнение скрипта прерывается до момента нажатия пользователем на кнопку в окне с сообщением.

В приведённом ниже примере, при открытии документа, сначала произойдёт открытие сообщение с текстом "Hello world!" и только затем отобразится на экране слово test.

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. alert("Hello world!");
  5. </script>
  6. </head>
  7. <body>
  8. test
  9. </body>
  10. </html>

Существует и другой вариант использования тэга <script>, который позволяет загружать скрипты из внешних файлов. Для этого используется атрибут scr в котором обычно указывается относительный путь к файлу скрипта. Файлы со скриптами JavaScript имеют обычно расширение js. Пример подключения внешнего скрипта:

<html>
<head>
    <script type="text/javascript" src="/inc/highlight.js"></script>
</head>
</html>
При таком варианте использования скрипта порядок загрузки и выполнения скриптов не гарантирован, однако сами файлы со скриптами кэшируются, что даёт преимущество при использовании одного и того же скрипта на разных страницах сайта.
 
Использование JavaScript в обработчиках событий
Большинство элементов (тэгов) html имеют возможность применять обработчики событий. Для этого в тэг добавляется атрибут соответствующий нужному обработчику событий, а в значении атрибута указывается скрипт (текст) который необходимо выполнить при наступлении события.
Пример:
<html>
<body>
    <input type="button" onclick="alert('Hello world!')" value="Hello?"> </input>
</body>
</html>
В данном примере использован элемент input, который при значении type=”button” представляет из себя кнопку. В атрибуте value указывается надпись которая отображатся на кнопке. А атрибут onclick, в данном примере, задаёт реакцию на событие «нажатие кнопки». В качестве реакции используется вызов уже знакомой нам функции alert.
Обратите внимание на то, что строковый литерал заключён в одинарные кавычки. JavaScript допускает строковые литералы как в двойных, так и в одинарных кавычках и это особенно актуально в обработчиках событий, где использование двойных кавычек привело бы к окончанию задания значения атрибута.
 
Идентификаторы
Идентификатор – это просто имя. В JavaScript идентификаторы выступают в качестве названий переменных и функций, а также меток некоторых циклов. Правила формирования допустимых идентификаторов совпадают с правилами Java и многих других языков программирования. Первым символом должна быть буква, символ подчеркивания (_) или знак доллара ($).1 Последующие символы могут быть любой буквой, цифрой, символом подчеркивания или знаком доллара. (Цифра не может быть первым символом, т. к. тогда интерпретатору труднее отличать идентификаторы от чисел.) Примеры допустимых идентификаторов:
i
my_variable_name
v13
_dummy
$str
 
Чувствительность к регистру
JavaScript – это язык, чувствительный к регистру. Это значит, что ключевые слова, переменные, имена функций и любые другие идентификаторы языка должны всегда содержать одинаковые наборы прописных и строчных букв. Например, ключевое слово while должно набираться как «while», а не «While» или «WHILE». Аналогично online, Online, OnLine и ONLINE – это имена четырех разных переменных. Заметим, однако, что язык HTML, в отличие от JavaScript, не чувствителен к регистру. По причине близкой связи HTML и клиентского JavaScript это различие может привести к путанице. Многие JavaScript_объекты и их свойства имеют те же имена, что и теги и атрибуты языка HTML, которые они обозначают. Если в HTML эти теги и атрибуты могут набираться в любом регистре, то в JavaScript они обычно должны набираться строчными буквами. Например, атрибут обработчика события onclick чаще всего задается в HTML как onClick, однако в JavaScript_коде (или в XHTML_документе) он должен быть обозначен как onclick.
 
Символы_разделители и переводы строк
JavaScript игнорирует пробелы, табуляции и переводы строк, присутствующие между лексемами в программе. Поэтому символы пробела, табуляции и перевода строки могут без ограничений использоваться в исходных текстах программ для форматирования и придания им удобочитаемого внешнего вида. Однако имеется небольшое ограничение, которое касается символов перевода строк и о котором рассказывается в следующем разделе.
 
Необязательные точки с запятой
Простые JavaScript_инструкции обычно завершаются символами точки с запятой (;), как в C, C++ и Java. Точка с запятой служит для отделения инструкций друг от друга. Однако в JavaScript точку с запятой можно не ставить, если каждая инструкция помещается в отдельной строке. Например, следующий фрагмент может быть записан без точек с запятой:
a = 3;
b = 4;
Однако если обе инструкции расположены в одной строке, то первая точка с запятой должна присутствовать обязательно:
a = 3; b = 4;
Пропуск точек с запятой нельзя признать правильной практикой программирования, и поэтому желательно выработать привычку их использовать.
Теоретически JavaScript допускает переводы строк между любыми двумя лексемами, но привычка синтаксического анализатора JavaScript автоматически вставлять точки с запятой за программиста приводит к некоторым исключениям из этого правила. Если в результате разделения строки программного кода та ее часть, которая предшествует символу перевода, оказывается законченной инструкцией, синтаксический анализатор JavaScript может решить, что точка с запятой пропущена случайно, и вставить ее, изменив смысл программы.
 
Функции
Объявление функции выглядит следующим образом: используется ключевое слово function для того чтобы указать на начало объявления функции, после пробела (или другого эквивалентного разделителя) указывается название функции (правильный идентификатор), после названия в круглых скобках указывается список аргументов (может быть пустым, круглые скобки всё равно нужны) и после этого идёт тело функции в фигурных скобках.
Пример объявления пустой функции без аргументов:
function test() {
 
}
Функции совместно с обработчиками событий позволяют осуществлять сложные дейтвия над объектами на странице (и вообще позволяют писать сложные программы). Пример вызова собственной функции из обработчика событий:
<html>
<head>
    <script type="text/javascript">
        function test() {
            document.write("<H1>Test OK</H1>");
        }
    </script>
</head>
<body>
    <input type="button" onclick="alert('Hello world!')" value="Test?"></input>
</body>
</html>
 
Переменные
            Переменная – это имя, связанное со значением. Мы говорим, что значение хранится, или содержится, в переменной. Переменные позволяют хранить данные в программе и работать с ними. Например, следующая строка JavaScript_кода присваивает значение 2 переменной с именем i:
i = 2;
А следующая добавляет 3 к значению переменной i и присваивает результат новой переменной sum:
var sum = i + 3;
            Как видно из примеров, новые переменные в JavaScript объявляются с помощью ключевого слова var. Переменные являются нетипизированными, но значения переменных имеют тип. И одна и та же операция над значениями разных типов может иметь разный результат.
 
Условные операторы
Для сравнения двух выражений на равенство используется оператор == (при сравнинии допускаются преобразования типов), оператор != проверяет выражения на неравенство.
Меньше (<)
Результат оператора < равен true, если первый операнд меньше, чем второй операнд; в противном случае он равен false.
Больше (>)
Результат оператора > равен true, если его первый операнд больше, чем второй операнд; в противном случае он равен false.
Меньше или равно (<=)
Результатом оператора <= является true, если первый операнд меньше или равен второму операнду; в противном случае результат равен false.
Больше или равно (>=)
Результат оператора >= равен true, если его первый операнд больше второго или равен ему; в противном случае он равен false.
 
Арифметические операторы
Сложение (+)
Оператор «плюс» складывает числовые операнды или выполняет конкатенацию строк. Если одним из операндов является строка, другой операнд преобразуется в строку и выполняется конкатенация. Операнды-объекты преобразуются в числа или строки, которые могут быть сложены или конкатенированы.
Преобразование выполняется с помощью методов valueOf() и/или toString().
Вычитание (_)
Когда «минус» используется в качестве двухместного оператора, он выполняет вычитание второго операнда из первого. Если указаны нечисловые операнды, то оператор пытается преобразовать их в числа.
Умножение (*)
Оператор * умножает два своих операнда. Нечисловые операнды он пытается преобразовать в числа.
Деление (/)
Оператор / делит первый операнд на второй. Нечисловые операнды он пытается преобразовать в числа. Те, кто привык к языкам программирования, различающим целые и вещественные числа, могут ожидать получения целочисленного результата при делении одного целого на другое. Однако в JavaScript все числа вещественные, поэтому результатом любого деления является значение с плавающей точкой. Операция 5/2 дает 2.5, а не 2. Результат деления на ноль – плюс или минус бесконечность, а 0/0 дает NaN.
Деление по модулю (%)
Оператор % вычисляет остаток, получаемый при целочисленном делении первого операнда на второй. Если заданы нечисловые операнды, то оператор пытается преобразовать их в числа. Знак результата совпадает со знаком первого операнда, например 5 % 2 дает 1. Оператор деления по модулю обычно применяется к целым операндам, но работает и для вещественных значений. Например, _4.3 % 2.1 дает результат _0.1.
Унарный минус (_)
Когда минус используется в качестве унарного оператора, он указывается перед одиночным операндом и выполняет унарную операцию смены знака. Другими словами, он преобразует положительное значение в отрицательное, и наоборот.
 
Цикл for
            Синтаксис цикла for:
for(инициализация; проверка; инкремент)
инструкция
Выражение инициализация вычисляется один раз перед началом цикла. Это выражение, как правило, является выражением с побочными эффектами (обычно присваиванием), т. к. от него должна быть какая_то польза. JavaScript также допускает, чтобы выражение инициализация было инструкцией объявления переменной var, поэтому можно одновременно объявить и проинициализировать счетчик цикла. Выражение проверка вычисляется перед каждой итерацией и определяет, будет ли выполняться тело цикла. Если результат проверки равен true, выполняется инструкция, являющаяся телом цикла. В конце цикла вычисляется выражение инкремент. И это выражение, чтобы приносить пользу, должно быть выражением с побочными эффектами. Обычно это либо выражение присваивания, либо выражение, использующее оператор ++ или --.
Пример цикла for для вывода чисел от 0 до 9:
for(var count = 0; count < 10; count++)
document.write(count + "<br>");
            Обратите внимание на использование оператора + внутри выражения передаваемого как аргумент функции write. Данный оператор используется здесь как оператор склеивания строк т.к. один из его аргументов является строкой.
 
Составная инструкция
            Для того чтобы объединить несколько инструкций в одну используются фигурные скобки, например их можно использовать для выполнения нескольких инструкций в цикле for. Пример:
for(var count = 0; count < 10; count++)
{
document.write(count);
document.write("<br>");
}
 
 
Задания:
1.      Написать скрипт для печати чисел от номера компьютера в классе + 10, до –номер компьютера (т.е. если компютер за котрым сидит студент имеет номер 8, то надо вывести числа от 18 до -8).
2.      Написать скрипт для решения задачи: Винни-Пух на каждый свой день рождения съедает столько еды, сколько съел на двух предыдущих. На первых двух днях он съел по 100 грамм. Нужно вычислить сколь грамм он съест на 15й день рождения.
3.      Написать скрипт для печати таблицы умножения.
 

 

Баннер SGU.RU