Учебные программы » Веб-программирование » Лабораторный практикум » Введение в JavaScript

Динамический HTML. Введение в JavaScript

Цель работы

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

Задания к работе

Написать скрипт «Tip of the Day» (совет дня). Скрипт должен выводить случайную строку («совет») из заданного массива строк. Скрипт разместить во внешнем файле, подключить его на все страницы вашего сайта.

Методические указания

Динамический HTML
Синтаксис JavaScript

Требования к хостингу

Веб-сервер отдает веб-страницу со скриптами javascript «как есть» и все сценарии выполняются в браузере клиента. Это позволяет минимизировать затраты на размещение сайта: можно использовать дешевый хостинг, поскольку клиентские скрипты не создают нагрузки на сервер (кроме, разве что, небольшого увеличения трафика). А современные решения на основе javascript (AJAX, JSON и др.) позволяют организовать взаимодействие между клиентским скриптом и серверными приложениями.

Динамический HTML

HTML является языком разметки и не имеет каких-либо средств, которые могли бы использоваться для изменения содержимого страницы. Эту проблему решает использование языка DHTML (Dynamic HTML), поддерживающего средства программирования на клиентской стороне. Для этого в DHTML встроена поддержка скриптового языка JavaScript (должен поддерживаться браузером).

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

Для внедрения скриптов в веб-документ используется контейнерный тег <script>...</script>, внутри которого записываются команды JavaScript (в общем случае и ряда других яыков: VBScript, php, tcl/tk ... ).

Если этот тег ипользуется в теле документа (внутри тега body), то исполнение скрипта осуществляется по мере отображения веб-страницы в браузере. Если же контейнер script описан внутри тега head, то обращение к скрипту возможно только явным образом, например, через вызов функции.

<!-- внедрение скрипта в разметку -->
<script type="text/javascript">
код скрипта
</script>

Имеется возможность вынести код JavaScript в отдельный файл (как правило с расширением .js), который затем подключить к документу следующим образом:

<html>
<head>
<!-- загрузка скрипта из внешнего файла -->
<script type="text/javascript"> src="http://example.com/scripts.js"></script>
</head>
...

Такой способ внедрения скриптов позволяет создавать своего рода библиотеки скриптов и использовать их на всех страницах сайта.

Синтаксис JavaScript

Язык JavaScript синаксически близок к языкам C/C++, Java, PHP и другим C-подобным языкам. Поэтому для тех, кто знаком с такими языками не составит труда разобраться с основными языковыми конструкциями.

Переменные

Для объявления переменных используется ключевое слова var. Переменные можно сразу инициализировать. Можно объявить несколько переменых сразу, разделив их запятыми.

var color = "#FFF", fsize = 1024 , total_count = 0, i;
var average = null;
var c = 3;
d = 0; //Ошибка!

Непроинициализированые переменные будут иметь неопределенное значение (undefined).

Объявлять переменные можно в любом месте скрипта, но до первого обращения

Типы данных переменным в javascript назначаются автоматически. Так же автоматически выполняется приведение типов.

Объявления массивов данных могут выполняться статически и динамически. Индексирование элементов начинается с нуля. Элементы массива могут быть проинициализированы при создании.

var weekdays = ["Пн", "Вт", "Ср", "Чт", "Пт"]; // статический массив из пяти элементов
// динамическое объявление массива путем создание экземпляра встроенного класса Array
var myarr;
myarr = new Array(256);
myarr[0] = 255;
myarr[1] = 254;
var x = myarr[7];

Операторы

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

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

Условный оператор if предназначен для ветвления программы в зависимости от значения (true | false) логического выражения:

if (условие) {блок операторов1}
[else {блок операторов2}]

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

switch (условие) {
case значение1 : {блок операторов1; break;}
case значение2 : {блок операторов2; break;}
case значение3 : {блок операторов3; break;}
...
[default : {блок операторов по умолчанию};]
}

Цикл со счетчиком for. Используется для циклов с заданным числом итераций (примечание: на самом деле конструкция for может использоваться и для построения любых циклов, все зависит от того, как и какие значения указаны в качестве параметров цикла).

for ([начальное значение]; [условие]; [приращение]) {блок операторов;}

Цикл с постусловием do...while. Выполняется, пока условие является истинным. Всегда выполняется хотя бы один раз.

do {блок операторов;} while (условие)

Цикл с предусловием while. Выполняется, если условие является истинным. Может не выполниться ни разу.

while (условие) {блок операторов;}

Операторы break и continue -используются для прерывания выполнения цикла или завершения текущей итерации.

Поэлементный цикл for (... in ...) применяется для выполнения команд над каждым элементом массива или коллекции.

for (переменная in массив|объект|коллекция) {блок операторов;}

Оператор объединения with представляет обращение к свойствам и методам объекта через общее имя.

with (объект) {блок операторов;}

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

function имяФункции ([список параметров]) {
блок операторов;
[return возвращаемоеЗначение;]
}

Встроенные объекты JavaScript

JavaScript предлагает разработчику некоторый набор библиотечных функций, оформленных в виде свойств и методов различных объектов. Обращение к этим свойствами методам - через точечную нотацию.

Кратко рассмотрим некоторые встроенные объекты JavaScript.

Объект Math

Объект Math представляет математические константы и функции. Константы представлены свойствами объекта, а функции - его методами. Их назначение понятно из названий:

Свойства: E, LN2, LN10, LOG2E, LOG10E, PI, SQRT1_2, SQRT2.

Методы: abs, acos, asin, atan, ceil, cos, exp, floor, log, max, min, pow, random, round, sin, sqrt, tan.

Примеры использования:

var r = 1.8, theta = 30, a, x, y, D;
var rnd = Math.round(Math.random()*99)+1;
D = Math.PI*r*r;
x = Math.max(1,7,5,9);
y = Math.pow(2,10);
with (Math) {
y = r*sin(theta);
x = r*cos(theta);
}

Объект string

Встроенный объект string представляет литерал (строку символов), заключенный в одинарные или двойные кавычки или вычислимое выражение, которое может быть интерпретировано как строка.

Для объекта string определены следующие свойства и методы:

Свойства: length (длина строки).
Методы (не все): anchor (якорь), bold (полужирное начертание), charAt (символ в позиции), fixed (преформат), fontcolor (цвет шрифта), fontsize (размер шрифта), indexOf (индекс первого вхождения символа), italics (курсив), link (гиперссылка), substring (подстрока), toLowerCase (строчные), toUpperCase (прописные).

Несколько примеров использования объекта string:

var hello = "Hello, ", w = "World!";
var str = hello + w; // конкатенация строк
document.write(str.bold());
document.write(str.toUpperCase());
document.write(hello.fontsize(6));
document.write(hello.substring(0,3));
document.write(hello.link("http://localhost"));
document.write(w.indexOf("l"));
alert("string lehgth = " + str.length);

Вывод данных в JavaScript

Результаты работы скрипта JavaScript могут быть отображены по меньшей мере двумя способами: в окно текущего веб-документа и в диалоговое окно.

Для вывода данных в веб-документ можно использовать метод write объекта document (подробней в ЛР №5). Примеры использования этого метода приведены при описании объекта string. Еще несколько примеров:

document.write("Hello, World!");
document.write("<h1>>Hello, World!</h1>"); // внедрение HTML в JavaScript
// обратите внимание на использование вложенных кавычек
document.write("<p><a href='http://localhost'>Link to localhost</a></p>");

Для вывода различных информационных сообщений, не относящихся напрямую к содержимому веб-страницы следует использовать метод alert, представляемый объектом window. Этот метод выводит модальное диалоговое окно (рис.1), блокирующее выполнение скрипта до нажатия пользователем кнопки в этом диалоге.

Рис. 1. Вызов окна сообщения из скрипта JavaScript

Пример использования метода alert:

var a, b, s = "=";
with (Math) {
a = ceil(random()*100);
b = ceil(random()*100);
}
a > b ? s = ">" : s = "<"; // тернарное сравнение
alert("A = "+a+";\nB = "+b+";\nСледовательно, A "+s+" B"); // "\n" - перевод строки

Объектная модель документа

Взаимодействие скриптов с элементами веб-страницы базируется на стандартизованной объектной модели документа (DOM). DOM описывает объекты и интерфейсы к ним в виде иерархической структуры, подробная спецификация которой приводится на сайте консорциума w3.org, а примеры программирования объектов DOM приводятся в следующей лабораторной работе.

CC-BY-SA Анатольев А.Г., 09.06.2022