Базовые конструкции языка JavaScript

Лабораторная работа № 1 ( HTML / CSS )

"Разработка HTML -страниц (форматирование текста с помощью стилей, гиперссылки, списки, таблицы, изображения)."

Задание: Разработать не менее 4 HTML-страниц, объединенных общей темой. Тема содержания страниц выбирается самостоятельно. При затруднениях в выборе темы создайте «сайт» о самом себе (биографические сведения, интересы, путешествия, домашние животные и т.д., и т. п.)

Страницы должны включать:

· Форматированный текст (абзацы, заголовки, различные шрифты, выделенные части текста);

· Гиперссылки (на другие страницы и внутри страниц). Все страницы должны быть размещены в разных каталогах, размещенных на разных уровнях относительно друг друга;

· Как минимум одно изображение.

· Как минимум один список.

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

Указание: Вся текстовая информация и гиперссылки должны форматироваться только с помощью стилей. Запрещено использовать следующие элементы:

B	Полужирный шрифт	STRIKE	Зачеркнутый текст
BIG	Увеличенный шрифт	SUB	Нижний индекс
BLINK	Мигающий текст	SUP	Верхний индекс
FONT	Тип, размер, цвет шрифта	TT	Буквы фиксированной ширины
I	Курсив	U	Подчеркнутый текст
S	Зачеркнутый текст	SMALL	Уменьшенный шрифт

Определение стилей должно быть вынесено в отдельный (.css) файл.

Рекомендации по выполнению лабораторных работ №1 и №2:

На всех страницах должен обязательно присутствовать тег < META > с указанием кодовой страницы документа.
На всех HTML -страницах должен присутствовать тег < TITLE > для указания названия загружаемого документа.
Подключение внешнего определения стилей нужно выполнять как можно выше в HTML -документе.
Стараться избегать форматирования текста внутри элементов страницы, а вводить класс и использовать стили.
Общий объем HTML -кода страницы не должен превышать ~ 80 Кб. Мелкие вспомогательные графические изображения должны иметь формат GIF , а для картин и фотографий лучше применять JPEG .
Для тегов изображений < IMG > рекомендуется всегда указывать явным образом размеры изображения и атрибут ALT .
Для желаемого расположения элементов на странице применяйте таблицы и их вложение.
В HTML-страницах не должны использоваться элементы «физического» форматирования, список которых приведен выше в таблице.

Лабораторная работа № 2 ( HTML / CSS /Фреймы)

"Фреймы в HTML документах и карты сегментации изображений. Организация связей между фреймами и контекстно-зависимые пояснительные надписи"

Задание: Создать HTML - страницу, состоящую из 3-х фреймов:

· Заголовок с названием страницы (не прокручиваемый).

· Основная часть с изображением, снабженным картой сегментации..

· Описательная часть (прокручиваемый фрейм).

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

Лабораторная работа № 3 ( JavaScript )

" Java Script -код в тексте HTML -страниц. Интерпретация кода на стороне клиента для поддержки диалога с пользователем".

Внедрение объектов JavaScript в HTML-документ

JavaScript был разработан совместно компаниями Sun Microsystems и Netscape. За синтаксическую основу нового языка был взят язык Java, в свое время разработанный компанией Sun Microsystems. В последнее время популярность JS очень возросла в результате выхода в свет браузеров, поддерживающих данный язык. JS - интерпретатор с элементами объектно-ориентированной модели. Хотя он и лишен возможностей создания собственных классов, но он оперирует стандартными объектами. Так как обработчик находится на компьютере пользователя, JS, будучи интерпретатором, использует методы и свойства объектов обозревателя на пользовательском компьютере. JS имеет возможность написания пользовательских функций, имеет ряд операторов, но работает с объектами, их методами, свойствами и событиями. Также имеется иерархия наследования свойств объектов. Сложность составляет и то, что JS встраивается в html документ и взаимодействует с ним.

Microsoft выпустила похожие версии языка под названием JScript, поэтому под названием "JavaScript" часто понимается любая версия языка, в том числе и Microsoft JScript.

В большинстве случаев при упоминании JavaScript подразумевается так называемый клиентский JavaScript, интерпретатор которого встроен в Web-браузеры. Однако JavaScript изначально был разработан как универсальный язык программирования для встраивания в любое приложение и обеспечения возможности написания в нем сценариев. Например, ActionScript, язык сценариев, доступный в Macromedia Flash, также смоделирован в соответствии со стандартом ECMAScript.

Рассмотрим способы использования JavaScript внутри HTML-документа.

Способ первый

На первом этапе мы составим программу JavaScript, которая вставляет слова "Hello, world!" непосредственно в документ HTML. Программы или сценарии JavaScript встраиваются в документ HTML. Взгляните на листинг 1, в которой приведен исходный текст документа с программой, составленной на JavaScript.

Листинг 1.

<HTML> <HEAD> <TITLE>Hello, world!</TITLE> </HEAD> <BODY> <H1>JavaScript Test</H1> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </BODY></HTML>

Как и подобает любому документу HTML, он ограничен операторами <HTML>, </HTML> и состоит из двух разделов. Раздел заголовка выделяется операторами <HEAD> и </HEAD>, а раздел тела документа - операторами <BODY> и </BODY>. Программа JavaScript этом примере встроена в тело документа HTML при помощи операторов <SCRIPT> и </SCRIPT>.

С помощью оператора <SCRIPT> можно встроить в документ сценарий, составленный на языке JavaScript или VBScript. Язык указывается с помощью параметра LANGUAGE. Текст сценария оформлен как комментарий с применением операторов . Это сделано для того, чтобы сценарий не вызывал проблем у пользователей, браузеры которых не могут работать с JavaScript. Такие браузеры просто проигнорируют сценарий. Обратите внимание на строку, которой завершается комментарий: // --> Перед символами --> записаны два символа /. Это позволяет обеспечить работоспособность сценария в различных браузерах. Некоторые из них (например, Netscape Navigator) в сценариях JavaScript рассматривают строку --> как ошибочную. Символы // используются в JavaScript для выделения комментариев и предписывают браузерам игнорировать символы, записанные после них (в том числе и -->). Для обозначения комментариев можно использовать также конструкцию /*...*/. Этот способ удобен, если комментарий содержит несколько строк.

Наша первая программа весьма проста и содержит только одну строку:

document.write("Hello, world!");

Здесь для объекта с именем document вызывается метод write. В качестве параметра ему передается текстовая строка "Hello, world!". Строка закрывается символом точка с запятой, хотя этот символ может и отсутствовать. Объект document - это документ HTML, загруженный в окно браузера. Он содержит в себе объекты, свойства и методы, предназначенные для работы с элементами этого документа HTML, а также для взаимодействия с другими объектами. Метод write записывает в тело документа HTML приветственную строку "Hello, world!". При этом документ будет выглядеть так, как будто эта строка находится в нем на месте сценария:

<HTML><HEAD><TITLE>Hello, world!</TITLE></HEAD><BODY><H1>JavaScript Test</H1>Hello, world!</BODY></HTML>

Способ второй

Исходный текст любого сценария должен включаться в документы HTML. Однако, есть техническая возможность оформлять программы на JavaScript в отдельных файлах, а в страницах HTML указывать на эти файлы ссылки. Браузер, загружая оформленные подобным образом HTML документы, загружает оформленные в отдельных файлах сценарии и подставляет их вместо соответствующих ссылок. Такой способ включения JavaScript сценариев удобен, если один и тот же сценарий должен быть включен во множество документов HTML, или же если есть необходимость скрыть исходный код от просмотра пользователями (через просмотр источника).

Ссылки на файлы с подгружаемыми скриптами оформляются с помощью параметра SRC тега <SCRIPT>, допускающего указывать адрес URL файла сценария. Следующий пример демонстрирует использование параметра SRC. В листинге 2 находится исходный текст документа HTML, содержащий ссылку на файл сценария hello.js.

Листинг 2.

<HTML> <HEAD> <TITLE>Hello, world!</TITLE> </HEAD> <BODY> <H1>JavaScript Test</H1> <SCRIPT LANGUAGE="JavaScript" SRC="hello.js"> </SCRIPT> </BODY></HTML>

Ссылка оформлена с применением операторов <SCRIPT> и </SCRIPT>, однако между этими операторами нет ни одной строчки исходного текста. Этот текст перенесен в файл hello.js (листинг 3).

Листинг 3. Файл hello.js

document.write("<HR>");document.write("Hello, world!");document.write("<HR>");

В параметре SRC вышеприведенного примера задано только имя файла, так как он находится в том же каталоге, что и ссылающийся на него файл документа HTML. Однако можно указать и относительный путь, и полный адрес URL, например: <SCRIPT LANGUAGE="JavaScript" SRC="http://www.myserver.ru/scripts/hello.js"> Существенно, чтобы файл, в котором находится исходный текст сценария JavaScript, имел тип js. В противном случае сценарий работать не будет.

Способ третий

В сценариях JavaScript активно применяют функции и переменные. Приведем исходный текст простой программы, в которой используется переменная и функция (листинг 4).

Листинг 4.

<HTML> <HEAD> <TITLE>Hello, world!</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <H1>JavaScript Test</H1> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </BODY></HTML>

Прежде всего, обратите внимание на область заголовка документа, выделенную операторами <HEAD> и </HEAD>. В этой области расположено определение переменной и функции, оформленное с применением операторов <SCRIPT> и </SCRIPT>. Кроме того, в теле документа HTML есть еще один раздел сценариев, выделенный аналогичным образом.

Переменная с именем szMsg определяется при помощи оператора var, причем ей сразу же присваивается начальное значение - текстовая строка "Hello, world!".

Язык JavaScript не является типизированным. Это означает, что программист не может указать явным образом тип создаваемых им переменных. Этот тип определяется интерпретатором JavaScript автоматически, когда переменной в первый раз присваивается какое-либо значение. В дальнейшем можно легко изменить тип переменной, просто присвоив ей значение другого типа. Отсутствие строгой типизации упрощает создание сценариев, особенно для непрофессиональных программистов, однако может привести к ошибкам. Поэтому необходимо внимательно следить за тем, какие типы данных применяются. Этому способствует использование префиксов имен, по которым можно судить о типе переменной. Например, текстовые строки можно начинать с префикса sz, а численные значения - с префикса n.

Помимо переменной szHelloMsg, в области заголовка документа HTML с помощью ключевого слова function определена функция с именем printHello. Эта функция вызывается из сценария, расположенного в теле документа и выводит в документ HTML значение переменной szHelloMsg.

Интерпретация документа HTML и встроенных в него сценариев происходит по мере загрузки документа. Поэтому если в сценарии одни функции вызывает другие или используют определенные в документе переменные, то их определения (вызываемых функций и переменных) необходимо разместить выше вызывающих. Размещение определений переменных и функций в разделе заголовка документа гарантирует, что они будут загружены до момента загрузки тела документа.

Язык JavaScript имеет встроенные средства для отображения простейших диалоговых панелей, таких как панель сообщений. В листинге 5 приведен исходный текст сценария JavaScript, в котором вызывается функция alert, предназначенная для отображения диалоговых панелей с сообщениями.

Листинг 5.

<HTML> <HEAD> <TITLE>Hello, world!</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <H1>JavaScript Test</H1> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </BODY></HTML>

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

Рассмотрим еще несколько простейших примеров использования JavaScript.

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

Листинг 6.

<HTML> <HEAD> <TITLE>Hello, world!</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <H1>JavaScript Test</H1> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </BODY></HTML>

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

Еще один пример. В языке JavaScript есть удобные средства обработки событий. В следующем примере когда пользователь пытается выбрать ссылку "Select me!", разместив над ней курсор мыши, на экране появляется диалоговая панель с сообщением "Hello, world!". Исходный текст соответствующего документа HTML с встроенным в него сценарием представлен в листинге 7.

Листинг 7.

<HTML> <HEAD> <TITLE>Hello world!</TITLE> </HEAD> <BODY> <H1>JavaScript Test</H1> <A HREF="" onMouseover="alert('Hello, world!');">Select me!</A> </BODY></HTML>

Здесь для нас интересна строка оператора <A>. Напомним, что этот оператор обычно применяется для организации ссылок на другие документы HTML или файлы различных объектов. В данном случае поле ссылки параметра HREF пустое, однако дополнительно в оператор <A> включена следующая конструкция:

onMouseover="alert('Hello, world!');"

Она указывает, что при возникновении события onMouseover (наведение мыши) должна выполняться следующая строка программы JavaScript:

alert('Hello, world!');

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

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

Базовые конструкции языка JavaScript

Условные операторы

В языке JavaScript предусмотрен условный оператор if-else, который позволяет выполнять разные программные строки в зависимости от условия.

Общий вид оператора if-else представлен ниже:

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

Часть оператора, выделенная квадратными скобками, является необязательной.

Существует также специальный тип условного оператора, который называется оператором ?:. Этот оператор в общем виде записывается так:

выражение ? строка 1 : строка 2

При вычислении оператора ?: вначале оценивается логическое выражение, расположенное в левой части. Если оно равно true, выполняется строка 1, а если false - строка 2.

Ниже приведен пример использования условного оператора ?: для присвоения значения переменной bAccessDenied в зависимости от содержимого переменной nYourAge:

bAccessDenied = (nYourAge < 18 || nYourAge > 99) ? true : false;

Операторы цикла

В языке JavaScript есть несколько операторов, предназначенных для организации циклов.

Оператор for

Общий вид оператора for представлен ниже:

for([инициализация;] [условие;] [итерация]){ . . . строки тела цикла . . .}

В области инициализации обычно выполняется присваивание начальных значений переменным цикла. Здесь допустимо объявление новых переменных при помощи ключевого слова var. Вторая область задает условие выхода из цикла. Это условие оценивается каждый раз при прохождении цикла. Если в результате оценки получается логическое значение true, выполняются строки тела цикла. Область итерации применяется для изменения значений переменных цикла, например, для увеличения счетчика цикла.

Оператор for-in

Оператор for-in предназначен для просмотра всех свойств объекта и записывается в следующем виде:

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

Оператор while

Для организации итерационных циклов с предусловием используется оператор while:

while(условие){ . . . строки тела цикла . . .}

Если в результате оценки условия получается значение true, тогда итерация выполняется, если false - цикл прерывается.

Оператор break

С помощью оператора break можно прервать выполнение цикла, созданного операторами for или while, в любом месте. Например:

var i = 0;while(true){ . . . i++; if(i > 10) break; . . .}

Оператор continue

Выполнение оператора continue внутри цикла for или while приводит к тому, что итерация прерывается, а затем возобновляется заново. Этот оператор не прерывает цикл. Ниже приведен пример использования оператора continue:

var i = 0;while(i < 100){ i++; if(i < 10) continue; . . .}

Здесь фрагмент тела цикла, отмеченный многоточием, будет выполняться только после того, как значение переменной i станет равным 10. Когда же это значение достигнет 100, цикл будет завершен.

Пример:

<HTML> <HEAD> <TITLE>Hello, world!</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <H1>JavaScript Test</H1> <P>Message:<BR> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </BODY></HTML>

Здесь сразу после загрузки документа вызывается функция printHello. В теле этой функции, в свою очередь, вызывается функция printNString, которой передаются два параметра. Через первый параметр этой функции передается текстовую строка szHelloMsg, а через второй - количество повторов этой строки при выводе. Вывод строки выполняется функцией printNString в цикле.

Дата добавления: 2018-02-28; просмотров: 748; Мы поможем в написании вашей работы!

Поделиться с друзьями:

12 3 4 5 6 7 Следующая ⇒

Мы поможем в написании ваших работ!