Язык JavaScript

Контейнер, Синтаксис, Вывод в окно, NOSCRIPT, Комментарии

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

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

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

Кроме того, целый ряд программ позволяет использовать этот язык для автоматизации действий (Microsoft Office, OpenOffice.org), большая часть Mozilla Firefox написана на JavaScript.

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

Ограничения, затруднения и типичные ошибки

Тем, кто привык к достаточно вольным правилам HTML, придется несладко. Каждая мелкая ошибка приводит к одному: скрипт перестает выполняться.

В чем же будут основные проблемы?

Простейший совет: писать и исправлять скрипт понемногу, чтобы быстро найти источник ошибки и исправить его.

Контейнер скрипта

Для того, чтобы браузер понял, что в файле содержится скрипт, его нужно обозначить парным тегом <script> </script>

Куда его вставить?

Если скрипт выводит что-то на странице, то он должен быть помещен в тело документа. Именно в то место, где должны быть команды вывода.

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

Атрибуты тега <script>

Тип содержимого

Атрибут типа описан в спецификации, как единственный обязательный:

<script type="text/javascript">.

Однако, в HTML-файлах всё будет прекрасно работать и без него ;)

Язык

Атрибут language="JavaScript" использовать НЕ НАДО!

Источник, src

Наконец, главный атрибут, который сильно облегчит нашу жизнь!

Атрибут источника позволяет создать дополнительный файл, содержащий скрипт и загружать его на страницу или, что намного важнее, на множество страниц. Таким образом можно не писать тот же текст 10 раз для 10 страниц (и потом 10 раз исправлять), а сохранить его в текстовом файле с расширением «js» и загружать в любые места любых страниц по мере необходимости. Уменьшается также и передаваемый трафик, то есть ускоряется загрузка страниц: скрипт считывается с сервера только один раз.

Пример такого случая. На каждой странице должен выводиться календарь текущего месяца. Скрипт, формирующий его занимает 10 Кб и сохранен в файле «calendar.js». Теперь, в тех местах, где его нужно отобразить, вставляем строку:

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

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

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

Синтаксис

Синтаксисом языка программирования называют правила, по которым должны записываться программы.

Переменные

Переменными величинами в программировании называют именованные области памяти, хранящие значения. Переменные они потому, что можно менять хранимое значение.

Имя переменной присваивается программистом при её создании (объявлении). Прежде чем использовать переменную, её надо создать.

Чтобы создать переменную нужно воспользоваться командой var:

var MyVar;

Что в ней теперь содержится? Ничего, она имеет неопределенный (undefined) тип. Просто теперь в ней можно что-то запомнить, например, число:

MyVar = 1549;

А теперь её можно изменить (без изменения типа):

MyVar = 555;

Или изменить и значение и тип (на логический):

MyVar = true;

Объявление переменной можно (а чаще всего нужно) совместить с её инициализацией, то есть присвоением значения.

var MyVar = "гимназия";

Обратите внимание, что теперь переменная MyVar содержит не число, а строку, признаком чего служит заключение значения в кавычки. Кавычки могут быть двойными ("гимназия") или одинарными ('гимназия').

В одной строке можно объявить несколько переменных, разделяя их запятыми

var a = 1, b = 2, c = 5, d = 'строка';

Типы данных

Кроме имени, переменной можно задать тип, таким образом явно указав, какая информация может быть сохранена.

В JavaScript существуют следующие типы данных: строковые [string] (1 байт на символ), числовые [number] целые и действительные (8 байтов), даты и времени [date] (8 байтов), логические [boolean] (1 бит). (Отводимая память указана не совсем точно, но для наших целей этого достаточно.) Если переменная не инициализирована, то она получает особый неопределенный тип [undefined].

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

Пример: сколько будет 1 + "2" (то есть число + строка)? Подумайте самостоятельно: к какому единому типу будут приведены значения и почему именно к нему? Результат.

Чтобы определить тип переменной, можно воспользоваться функцией typeof(имя переменной). Она возвращает строковое значение означающее тип (string, number, date, boolean, undefined). Внутри программы можно оценить тип хранимой в переменной информации и обрабатывать её в соответствии с задуманным.

Подробнее о функциях для работы с данными разных типов можно почитать здесь.

Область действия

Переменные могут быть глобальными, то есть действующими во всей программе на JavaScript и локальными, то есть работающими только внутри функции.

Для практических целей важно, что переменная, объявленная инструкцией var внутри функции является локальной.

Как это понимать?

В скрипте имеется команда инициализации

MyVar = 1549;

Она создала глобальную переменную MyVar с числовым значением.

Внутри какой-то функции имеется команда

var MyVar = "гимназия";

После запуска, функция создала локальную переменную MyVar со строковым значением.

Теперь реально существуют ДВЕ переменных с совершенно разными значениями, но вторая (строковая) используется только внутри функции и её изменение никак не может навредить глобальной.

Когда функция закончит свою работу, локальная переменная будет автоматически удалена из памяти.

Отсюда следует важность соблюдения правила: создавать переменные только их явным объявлением командой var.

Массивы

См. здесь

Операторы

Над значениями можно производить различные действия. Это делается при помощи операторов. Выше мы уже обсудили важнейший оператор – оператор присвоения. Он представляет собой одинарный знак равенства.

В таблице перечислены основные операторы, а перед ней – небольшая форма, позволяющая провести соответствующие расчеты с вашими значениями.

a = , b = , действие (a?b):

Арифметические операторы

+Сложение1+1
-Вычитание10-2
*Умножениеa*5
/Деление15/b
++Приращение на единицуa++
аналогично a=a+1
--Уменьшение на единицуa--
аналогично a=a-1
%Расчет модуля (остатка от деления)8%5 вернет 3

Операторы присваивания

=Присваивание значения
+=Увеличение на заданную величину a+=3
аналогично a=a+3
-=Уменьшение на заданную величинуa-=3
аналогично a=a-3
*=Умножение на заданную величинуa*=3
аналогично a=a*3
/=Деление на заданную величинуa/=3
аналогично a=a/3

Операторы сравнения (возвращают true или false)

==Эквивалентность сравниваемых объектов
!=Не равно
>Больше
>=Больше или равно
<Меньше
<=Меньше или равно

Логические операторы

&&логическое И
||логическое ИЛИ
!логическое отрицание

Вывод в окно браузера

Данную возможность можно считать одной из важнейших с точки зрения практического применения языка.

Чтобы вывести что-то, нужно включить в скрипт команду

document.write('текст для вывода');

Сам скрипт должен размещаться в том месте HTML-документа, где бы вы разместили соответствующий текст.

Вместо 'текст для вывода' может быть набрано что угодно, содержащее допустимую HTML-разметку. Также в нем можно использовать функции, переменные, расчеты и т.п., просто складывая их. Например:

document.write('В результате <b>получено</b> '+parseInt(Math.sqrt(n))+' значений');

На экран выведется текст, где слово "получено" будет полужирным, а вместо n выведется квадратный корень числа, хранящегося в этой переменной (если она создана и содержит число).

Обратите внимание на лишние пробелы. Они нужны для отделения числа от окружающего текста. Даже опытные программисты нередко про них забывают.

Диалоги

См. здесь.

NOSCRIPT

На начальной стадии распространения языка, далеко не все браузеры поддерживали его. таким образом, замысел создателя мог некорректно отображаться на экране. Чтобы предупредить пользователя об этом был создан парный тег <NOSCRIPT>.

Все, что заключено в этом контейнере отображается только в том случае, если браузер не поддерживает скриптов, либо их использование на данном компьютере отключено.

Пример:
<noscript>
	<b><font color="red">У вас отключена поддержка JavaScript в браузере:
сайт отображается некорректно.
</font></b> </noscript>

Хочется выразить надежду, что последующий текст никто не видит:

Раньше, также рекомендовалось включать текст скрипта в комментарий HTML. Это актуально только для убогих с современной точки зрения браузеров, не умеющих работать со скриптами. Решайте сами.

Комментарии

Для того, чтобы заблокировать часть скрипта или внести в него примечание (пояснение) можно использовать комментирование. Обратите внимание, что программы, не содержащие комментариев, можно рассматривать в качестве образца неряшливого программирования.

Для того, чтобы закомментировать одну строку или её часть, в нужном месте вставляется две косых черты: //. Всё, что записано в строке далее, будет игнорироваться при выполнении скрипта.

Иногда требуется многострочный или внутристрочный комментарий. Он начинается сочетанием /* (косая черта + звездочка), а заканчивается – */ (звездочка + косая черта).

Некоторые полезные ресурсы

  1. htmlbook.ru Для тех, кто делает сайты (справочник по HTML, CSS)
  2. Справочник Web-языков (SpravkaWeb.Ru)
  3. javascript.ru
  4. Википедия
  5. JavaScript 1.5: учебный курс
  6. Справочное руководство
  7. Интересные примеры
  8. Примеры
  9. Почта, работа с файлами и внешними библиотеками
  10. Примеры фотоальбомов с использованием JavaScript
  11. Скрипты (англ.)
  12. Часть одной из фундаментальных книг, без ссылки на автора ;)
  13. JavaScript учебник: справочник JavaScript
  14. Стефан Кох. ВВЕДЕНИЕ В JAVASCRIPT, 1996, 1997.

Copyright © 1993–2020 Мацкявичюс Д.А. Все права защищены.
Никакая часть сайта не может быть воспроизведена никаким способом без письменного разрешения правообладателя и явной ссылки на данный ресурс.