Лекция 1 Основы Web-дизайна Вопросы 1 2 3

Зарегистрируйтесь, чтобы просмотреть полный документ!

Лекция 1. Основы Web-дизайна Вопросы: 1. 2. 3. 4. 5. Сущность Web-дизайна Определение статуса элементов текста Создание гиперссылок Создание таблиц Создание форм Литература: [1] Web-сайт ДО. Неделя 3 второго семестра. Word-документ «Рекомендации к созданию Webдокументов» . [2], с. 395 - 417

1. Сущность Web-дизайна Под термином «Web-дизайн» понимают процесс создания Webстраниц, компоновки и оформления Web-сайтов для их публикации в Интернет. l Web-страницы могут быть статическими или динамическими. могут быть или l Содержание статических Web-страниц – это тексты, которые Содержание пишутся на HTML-языке (Hypertext Markup Language – язык гипертекстовой разметки) и оформляются в соответствии с требованиями стандарта на Web-дизайн. Для изменения содержания страницы нужно изменить HTML-код. l Содержание динамических Web-страниц определяется Содержание программами-сценариями, которые оформляются в виде скриптов на языке программирования Java. Script (VBScript, PHP и др. ). l Web-сайт – это совокупность связанных между собой и близких по содержанию Web-страниц. l Для просмотра текста, графических изображений, видео- или аудио-сопровождений применяются специальные программыбраузеры (обозреватели). l Наиболее популярными среди них являются Microsoft Internet Explorer, Mazilla Firefox, Apple Safari, Google Chrome, Opera и др. l

Виды Web-страниц Существует два основных вида Web-страниц: а) презентационная; б) информационная Презентационная страница создается для небольших узлов, она красиво оформляется, часто почти целиком состоит из графики и имеет небольшое количество ссылок. Такая страница, как правило, должна быть видна в пределах экрана. l Информационная страница создается с использованием минимума графики и содержит большое количество информации. Такая страница занимает до 3 -х и более экранов. Ее главная задача - продемонстрировать посетителю обилие информации на узле и предоставить все самое актуальное.

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

Основные типы навигации 1. Плоская - все страницы имеют одинаковый набор ссылок. При этом с одной страницы можно попасть на любую другую. 2. Последовательная - каждая страница имеет ссылки . только на следующую и предыдущую страницы. В основном применяется в многостраничных публикациях, где требуется просматривать страницы последовательно, или при последовательном заполнении форм. 3. Иерархическая - все последующие страницы 3. ссылаются только на родительскую, но не пересекаются одна с другой. Используется в электронных каталогах, при построении сложных меню. 4. Смешанная - сочетает в различных вариантах 4. предыдущие три типа навигации.

Структура HTML-документа <html> Начало – конец HTML-документа <head> <title> Начало – конец заголовка документа </head> <body> Начало – конец тела документа </body> </html> Название документа </title>

Пример HTML - документа Простой HTML – документ выглядит следующим образом: <HTML> <HEAD> <TITLE>Наш первый документ</TITLE> </HEAD> <BODY> <I>Здравствуйте, <B>студенты 1 -го курса Харьковского национального экономического университета</B></I> </BODY> </HTML> Если набрать выделенный текст в Блокноте, сохранить его с расширением. html, а затем открыть в браузере, то на экране ПК увидим следующее:

Первая html-страница

Дескрипторы (т е г и) Тегом (от англ. слова tag – метка) в HTML считается текст с названием элемента, помещенный между символами “<” и “>”. Теги могут быть двух видов – а) одиночные и б) парные а) перед текстом, которым он управляет: <BR> Книга – с новой строки б) указывают интервал действия команды l <I> Электронный модуль </I> - курсив l Теги обычно имеют атрибуты – это указания о том, как должен браузер воспринимать и обрабатывать теги. l Атрибут записывается после названия тега и представляется, как правило, в виде пары: {имя атрибута} = {значение} через знак равенства (=). Значение атрибута заключается в двойные(“) или одинарные (‘) кавычки. Если атрибут не содержит пробелов, кавычки могут не применятся. l Например: <p ALIGN=“LEFT”> или <p align=left> - выравнивание l Тег может иметь несколько атрибутов, которые отделяются один от другого пробелами. l Комментарии – это фрагменты кода, которые не исполняются и обычно записываются в таком виде: <! - - Текст комментария - -> В Web-документе, открытом в браузере, комментарии не отображаются.

2. Определение статуса элементов текста Все теги по назначению и области действия можно разделить на группы l а) теги, определяющие структуру документа (HTML, HEAD, TITLE, BODY); l б) теги разметки и форматирования документа (BR, H 1 - H 6, P, Pre) ; l в) текстовые теги, предназначенные для разметки шрифта (I, B, U, BIG – больше стандартного, SMALL – меньше стандартного) и разметки текста (STRONG-жирный, TTпеч. маш. , CITE-для цитат и др. ); l г) теги гипертекстовых ссылок и закладок (A – anchor – якорь); l д) теги для создания форм (FORM), обеспечивающих диалоговый режим; l е) теги вызова программ и других объектов (таблицы, рамки – Frame и др. ). Рассмотрим наиболее часто используемые теги по группам l

а) Теги, определяющие структуру документа <HTML>…</HTML > - контейнер гипертекстового документа, в который вкладываются другие контейнеры – это заголовок и тело документа l <HEAD>…</HEAD > - контейнер заголовка документа, который содержит название и служебные данные l <META…> - служебная информация для Обозревателя и поисковых систем; всегда размещается в контейнере заголовка документа (см. ниже) l <TITLE>…</TITLE > - контейнер названия документа, содержимое которого отображается в строке заголовка окна браузера, в закладке и в журнале. Поисковые системы в первую очередь обращаются к нему l <BODY>…</BODY > - контейнер тела документа обеспечивает с помощью атрибутов придание документу требуемого вида (см. ниже) l <BASE…> - базовый адрес для ссылок l

Структура тега BODY Все, что расположено между открывающим и закрывающим тегами BODY, считается “телом” документа и отображается на экране. Открывающий тег с помощью параметров задает цвет фона страницы, цвет текста на странице и другие характеристики “тела” документа. Общая структура тега BODY: <BODY BGCOLOR=bg_color  TEXT= color  LINK= l_color  VLINK= vl_color  ALINK= al_color  BACKGROUND=url  > Цвет можно задавать шестиразрядным шестнадцатиричным числом, которому предшествует символ «#» , например, #0000 FF – синий, но может задаваться именами цвета – red, blue и т. д.

б) теги разметки и форматирования документа Для создания заголовков используют теги <Hn></Hn>, где n – число от 1 до 6. Заключив текст между этими тегами, получаем заголовок определенного размера.

Для создания нового абзаца используется тег <P>. Для перехода на новую строчку без создания абзаца - тег <BR>. Эти теги закрывать не обязательно, если не используете в теге <P> параметр ALIGN, которым можно задавать выравнивание абзаца:

Предварительное форматирование текста Браузеры игнорируют пустые строки и избыточные пробелы внутри текста Web-страницы. l Тег <PRE> указывает браузеру сохранять в неприкосновенности пустые области текста страницы. l При обработке тега <PRE> браузер отображает текст, заключенный в этот тег, точно так, как он набран - не удаляя избыточных пробелов и переносов. l

Формирование различных линий в документе Для формирования обычной горизонтальной линии используется тег <HR> с аргументами Пример: l l l l <HTML> <HEAD> <TITLE> Вставка различных линий </TITLE> </HEAD> <HR> Без тени <!—Без тени--> <HR NOSHADE> 50% <HR WIDTH="50%"> С расцветкой <!—С тенью--> <HR SHADE SIZE="5" ALIGN="LEFT" COLOR=#00 FF 00> WIDTH="10%" SIZE="10" ALIGN="RIGHT" <HR WIDTH="10%" SIZE="10" ALIGN="RIGHT" COLOR=red> </HTML>

Вставка на страницу изображений Для вставки изображений в HTML-документ используется тег <IMG> с параметрами следующей конструкции: <IMG SRC="Рисунок" BORDER= "Толщина рамки" ALIGN="Выравнивание" WIDTH="Ширина" HEIGHT="Высота" HSPACE="Отступ по горизонтали" VSPACE="Отступ по вертикали" ALT="Подсказка" NAME="Имя" LOWSRC="Рисунок_2">

Пример на вставку изображений l l l <HTML> <HEAD> <TITLE> Вставка изображений </TITLE> </HEAD> <BODY > <H 2 align=center> Роза </H 2> <IMG border="2" SRC="roza. jpg" HSPACE=85 height=100 width=75 alt="Здесь должна быть роза"> <P> <H 2 align=center> Бим </H 2> <IMG border="2" SRC="bim. jpg" HSPACE=85 height=100 width=75 alt="Здесь должен быть БИМ" > </BODY> </HTML>

Создание бегущей строки l l Для создания бегущей строки используют дескриптор <MARQUEE>. Устанавливать порядок движением позволяет атрибут BEHAVIOR (поведение) со следующими значениями: l l l Другие атрибуты: DIRECTION - задает направление перемещения строки; LOOP - определяет количество циклов перемещения; BGCOLOR - позволяет изменять цвет фона бегущей строки; SCROLLAMOUNT - задает шаг перемещения строки в экранных пикселях. SCROLLDELAY - служит для указания времени задержки в миллисекундах между отдельными тактами перемещения строки. l l l scroll - строка появляться с одной стороны экрана и исчезает за другой; slide - строка появляется с одной стороны экрана и останавливается у другой; alternate - обеспечивает перемещение строки туда-назад (влевовправо).

Создание списков На Web-странице могут быть размещены списки следующих типов: l а) Нумерованный - для перечисления элементов, l следующих в строго определенном порядке l б) Маркированный - для перечисления элементов, l в) Многоуровневый - для детализации информации l г) Списки определений - для формирования l Рассмотрим порядок формирования списков различных типов следующих в произвольном порядке элементов списка различных уровней словарей, а также списков терминов и их определений

а) Нумерованные списки Для создания нумерованных списков используются теги <OL> и <LI> l Тегом <OL> отмечается начало/окончание всего списка. l Тегом <LI> обозначают начало/конец отдельного элемента списка. l По умолчанию элементы списка нумеруются по порядку 1, 2, 3… При помощи атрибута TYPE можно изменить стиль нумерации. При этом атрибуту TYPE могут присваиваться значения “ 1”, “A”, “a”, “i” или “I”. <OL> l При помощи атрибутов START можно изменить порядок <LI> Один 1. Один нумерации списка, задавая начальный номер списка, <LI> Два 2. Два отличный от 1 <LI> Три 3. Три l Пример: l <LI> Четыре <LI> Пять </OL> 4. Четыре 5. Пять

б) Маркированные списки Для непронумерованных списков могут использоваться различные маркеры для указания на элемент списка. Ненумерованный (маркированный) список начинается открывающимся тегом <UL> и завершается тегом </UL>. Каждый элемент списка указывается тегом <LI>. l По умолчанию элементы списка маркируются черным кружком. При помощи атрибута TYPE можно изменить стиль маркирования. <ul type="circle"> l Этому атрибуту можно присваивать значения "circle", "disk", <li>элемент 1</li> ○ элемент 1 "square“ и др. <li>элемент 2</li> ○ элемент 2 l В пределах одного списка можно использовать различную <li type="disc">элемент 3</li> ● элемент 3 маркировку элементов списка <li type="square">элемент 4</li> ■ элемент 4 Пример: </ul>

в) Многоуровневый список l l l Для создания многоуровневых списков можно использовать как маркированные, так и нумерованные списки, а также их сочетания. Многоуровневый список получается путем вложения одного списка в тело другого. Главная задача при этом не запутаться с вложениями. Для исключения ошибок целесообразно делать различные отступы отдельных списков (структурированность программного кода – защита от ошибок). Пример многоуровневого списка представлен на следующем слайде.

Пример многоуровневого списка (учет деятельности предприятий)

г) Списки определений Для создания списков определений (например, словарей терминов с их определениями) используют три тега: l <DL> - начало/конец списка. l <DT> - начало/конец конкретного термина. l <DD> - начало/конец текста, который поясняет термин (определения). l Теги <DT> и <DD> не обязательно чередовать, т. е. можно "привязать" к одному термину несколько <DL> определений и наоборот. Термин 1 <DT>Термин 1</DT> Аннотация 1 к термину 1 l Пример: <DD>Аннотация 1 к термину 1</DD> l <DD>Аннотация 2 к термину 1</DD> </DL> Аннотация 2 к термину 1

3. Создание гиперссылок Теги гипертекстовых ссылок и ссылок на закладку l а) Гипертекстовые ссылки HTML позволяют связать фрагмент текста или другой объект (например, рисунок) с другими гипертекстовыми документами. Для ее создания используется тег <A> (от слова anchor – якорь) с атрибутом HREF, значение которого – это адрес перехода при активизации этой ссылки. Конструкция гиперссылки следующая: <A HREF="URL" TARGET="Окно" TITLE="Подсказка">Название ссылки</A> б) Ссылка на закладку в текущем документе имеет следующий вид: <a href="#Имя закладки">Название раздела</a> Ссылка на закладку в другом документе: <a href="Имя документа #Имя закладки">Название раздела</a> Имя закладки организуется следующим образом: <A NAME="Имя закладки"></a> l

Пример работы со ссылками и закладками l l l l l l l <HTML> <HEAD> <TITLE>Пример ссылок</TITLE> </HEAD> <BODY > Хотите найти что-то новое для себя? <A HREF="http: //www. google. com">Идите и ищите в GOOGLE</A> <P > Хотите послушать Высоцкого В. С. ? <A HREF="Братские могилы. mp 3"> Включите запись Высоцкого В. С. </A> <P> Хотите увидеть улицу города Хо-Ши-Мин (Сайгон) от входа в центральный рынок ? <A HREF="Хо-Ши-Мин. MOV"> Включите ролик с любительским фрагментом</A> <P> Организация переходов на закладки в пределах текущей Web-страницы <A HREF="#Закладка№ 1">Хотите перейти к первой части документа? </A> Или <P> <A HREF="#Закладка№ 2">Хотите перейти ко второй части документа? </A> <A NAME="Закладка№ 1"><H 1>Первая часть</H 1> Здесь находится первая часть документа. . . <A NAME="Закладка№ 2"><H 1>Вторая часть</H 1> Здесь находится вторая часть документа. . . </BODY> </HTML>

Страница для работы со ссылками и закладками

4. Создание таблиц Для создания заголовка таблицы служит тэг <CAPTION>. l Для создания таблицы служат теги <TABLE> и </TABLE>. l Как известно, таблица состоит из строк и столбцов, а строки, в свою очередь, состоят из ячеек. l Для определения строк служат теги <TR> и </TR>. l Для создания ячеек в строке служат теги <TH> или <TD>. l Тег <TH> используется для создания ячеек в строке заголовка, в которых данные отображаются полужирным шрифтом с выравниванием по центру, а тег <TD> - для создания ячеек таблицы. l Тег <TABLE> может иметь следующие атрибуты: l BORDER - для создания видимой границы таблицы с указанием толщины обрамляющей линии; l CELLSPACING - задание толщины разграничивающих линий внутри таблицы l По умолчанию браузер отображает рамку таблицы темносерым цветом. Для изменения цвета рамки применяется атрибут BORDERCOLOR с указание цвета линий рамки l

Выравнивание данных и слияние ячеек а) выравнивание данных l Для выравнивания данных в таблице предназначены атрибуты ALIGN и VALIGN. l Атрибут ALIGN выравнивает данные по горизонтали. По умолчанию содержимое заголовков выравнивается по центру, а ячеек - влево. l Атрибут VALIGN выравнивает данные по вертикали. По умолчанию данные выравниваются по центру. l Средствами выравнивания можно пользоваться в отдельной ячейке, строке, группе столбцов, группе строк. l б) объединение ячеек l При помощи атрибутов COLSPAN и ROWSPAN можно объединять несколько соседних ячеек столбца или строки в одну ячейку. l Атрибут COLSPAN тегов <TH>, <TD> обеспечивает объединение ячеек нескольких столбцов в пределах одной строки, а атрибут ROWSPAN – объединение ячеек нескольких строк в пределах одного столбца. l Цифра, указываемая в этих атрибутах, указывает количество ячеек, которые необходимо объединить. l

Пример создания таблицы l l l l l l l <HTML> <HEAD> <TITLE> Пример на создание таблицы </TITLE> </HEAD> <BODY > <table border="2" BORDERCOLOR =#0000 FF> <caption><B> Сведения о товарах </B></caption> <tr> <th>Товар</th> <th>Цена за единицу</th> <th>Количество</th> </tr> <td align="left">Гайка с правой резьбой</td> <td align="right">2, 50 грн. </td> <td align="right">50 шт. </td> </tr> <td align="left">Болт с левой резьбой</td> <td align="right">3, 66 грн. </td> <td align="right">80 шт. </td> </tr> </table> </BODY> </HTML>

5. Создание и использование фреймов l l l Frame (рамка) обеспечивает деление поля окна браузера на независимые разделы, в которых отображаются данные различных источников. Для того, чтобы сделать фрейм, надо создать Web-страницу с тегами <FRAME> и </FRAME>. Дескриптором <FRAMESET> формируется набор фреймов с указанием значение высоты (ширины) строк (столбцов) а) в процентах от размера окна, б) в пикселях или в) звездочкой * (остаток). С помощью атрибута BORDER тега <FRAMESET> можно устанавливать толщину линий фреймов, а с помощью атрибута BORDERCOLOR – их цвет. С помощью атрибута MARGINWIDTH можно задавать ширину левого и правого поля окна браузера, а с помощью атрибута MARGINHEIGHT - высоту верхнего и нижнего поля. Дескриптор <FRAME> служит для определения структуры и содержания конкретного фрейма.

Пример на создание и использование фреймов l <html> <head> <title>Пример работы с фреймами</title> </head> <frameset cols="50%, *" BORDER="15" BORDERCOLOR=#00 FF 00> <frame name="frame 1" src="Ссылки. html"> <frame name="frame 2" src="Роза. html"> </frameset> </html>

6. Создание формы Формы предназначены для ввода данных от пользователя на сервер, где эти данные обрабатываются специальной программой. l Для вставки формы используется парный тег <FORM> и </FORM>, между которыми размещаются различные элементы управления. l Основные элементы управления формы. Для создания элементов управления используется тег <INPUT>, который может иметь следующие атрибуты: l type – тип элемента управления (по умолчанию – текстовое поле text); l name – программное имя элемента для сервера; l value – начальное значение для текстовых полей, имен файлов или надписи на кнопках; l checkbox – флажок; l radio – переключатель (радиокнопка); l readonly – запрещает изменение данных; l size – задает размер элемента управления; l maxlenth – задает максимальную длину текста; l src – обеспечивает ссылку для элемента управления image; l title – задает описание элемента управления; l align – горизонтальное выравнивание элемента управления; l tabindex – номер элемента управления в таблице индексов; l accesskey – горячая клавиша. l

Продолжение В случае необходимости на форме можно разместить список с прокруткой или “выпадающий” список. l Для создания списка используется тег <SELECT> с атрибутами. l Определение элементов списка обеспечивается тегом <OPTION>, который, и свою очередь, может содержать атрибуты SELECTOD (для указания элемента списка по умолчанию) и VALUE (для указания значения, возвращаемое формой при выборе этого элемента) l l Фрагмент скрипта для списка: l <BR>Выбор <BR> <SELECT TYPE=select Name="Выбор"> <OPTION>Вариант 1 <OPTION>Вариант 2 <OPTION VALUE="Вариант 3">Вариант 3 <OPTION SELECTED>Вариант 4 <OPTION>Вариант 5 </SELECT> l l l l

Пример размещения формы на Webстранице l l l l l l <HTML> <HEAD> <TITLE> Пример создания формы </TITLE> </HEAD> <BODY BGCOLOR=#A 9 A 9 A 9> <H 2>Пример формы</H 2> <FORM action=". . . " method="post" enctype="multipart/ form-data"> Текстовое поле: <INPUT type="text" name="type_text" > <BR> Поле для ввода пароля: <INPUT type="password" name="type_password" alt="asfdsvdf"><BR> Выключатель (флажок): <INPUT type="checkbox" name="type_check" value="chk 1" cheked><BR> Три переключателя (радиокнопки): <BR> Вариант 1<INPUT type="radio" name="type_radio" value="1" cheked> <BR> Вариант 2<INPUT type="radio" name="type_radio" value="2" cheked> <BR> Вариант 3<INPUT type="radio" name="type_radio" value="3" cheked><BR> Поле с именами файлов: <INPUT type="file" name="type_file"><BR> <INPUT type="submit" value="Отправка данных"><BR> Щелчок по этому изображению приведет также к отправке данных: <INPUT type="image" src="knopka. jpg"><BR> <INPUT type="reset" value="Очистка полей"><BR> <INPUT type="button" value="Кнопка пользователя"><BR> <!--Фрагмент для создания списка вариантов </FORMA> </BODY> </HTML>

Добро пожаловать в Java. Script l 4 декабря 1995 г. компании Netscape и Sun объявили миру о создании языка Java. Script 1. 0, который первоначально назывался Live. Script. l Язык Java. Script предоставил Webразработчикам возможности настоящей программы, а не простого форматирования данных, как это было в случае с HTML.

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

Объектно-ориентированные характеристики Java. Script l ядро l клиентская сторона l серверная сторона l специфика JScript l Windows Script Host

Модульное программирование l Модульное программирование в Java. Script связано с тремя ключевыми моментами. o Создание пользовательских объектов o Объявление общих функций, выполняющих стандартные задачи o Сохранение повторно используемого кода во внешних файла исходного кода Java. Script (как правило, файлах с расширением. js).

Безопасность Java. Script чаще всего интерпретируется в среде браузера, источником разрушения может стать сам пользователь, написав программный код, преследующий некоторые преступные цели. l Фактически браузер является частью операционной системы, что означает, что он имеет доступ к файловой системе пользователя. l Политика Same Origin Policy (Политика одного источника). При этом запрещался доступ к Java. Script-коду, отправленному с одного сервера, к свойствам документа, Объекты документа, для которых выполняется проверка источника переданного с другого сервера, порта или другого протокола, и выполнялся возврат данных исходному серверу. Объект Свойство/метод l image Чтение/запись: anchors, applets, cookie, domain, elements, embeds, forms, last. Modified, length, links, referrer, title, URL, каждый экземпляр формы и каждый класс Java, доступный в Java. Script через Live. Connect. Запись: все остальные. lowsrc, src layer src location все кроме location. X и location. Y window find document

Сегментирование данных l позволяло пользователю и программисту указать, хотят ли они, чтобы со сценариев обеспечивался доступ к свойствам документов, Объекты документа, которые сегментируются по умолчанию находящихся на других серверах Объект Сегментируемое свойства document cookie, domain, forms, last. Modified, links, referrer, title, URL Form action, name Каждый экземпляр объекта Form history checked, default. Checked, default. Value, name, selected, selectedlndex, text, to. String, value current, next, previous, to. String image name Link hash, host, hostname, href, pathname, port, protocol, search, to. String # default. Selected, selected, text, value name location Option Plugin

Подписанные сценарии l (signed scripts) дают программисту возможность доступа к закрытым данным (после соответствующей авторизации пользователя). l При использовании этой модели четко определяется область допустимых действий программиста на компьютере пользователя.

Преимущества Java. Script l Независимость от платформы l Гибкость клиентской и серверной части языка Microsoft реализовала определенный тип серверной части JScript на своем информационном сервере Internet (IIS — Internet Information Server). Используется в активных серверных страницах (ASP — Active Server Pages), в которых ASPфильтр обрабатывает страницы Web-сайта перед их отправкой запрашивающему браузеру. JScript является важной составляющей частью в рамках инициативы. NET компании Microsoft,

Область применения Java. Script l расширение функциональных возможностей Web-страниц l интерактивная электронная почта l приложения, основанные на Web l написание сценариев для Windows (выполнение различных функций в операционной системе)

Ключевые объекты Объект окна (window) представляет ту часть окна браузера, в которой отображается содержимое HTML-документа. В многофреймовой среде каждый фрейм (или кадр) также является окном (детально это пока рассматривать не будем). В нем, в буквальном смысле, размещен документ. l Объект navigator. С помощью этого объекта определяется браузер, в котором выполняется сценарий. Он содержит сведения о производителе и версии браузера. Этот объект имеет атрибут только чтения. l Объект экрана (screen). Объект screen позволяет определить физическую среду, в которой запускается браузер. Например, с его l

Ключевые объекты Объект history. Каждый браузер сохраняет сведения об уже посещенных страницах (кнопка Back (Назад) на панели инструментов) в специальном стеке, представленном объектом history. l Объект location. С помощью этого объекта проще всего загрузить в текущее окно целевую страницу или фрейм. Сведения об URL-адресе документа представлены таким образом, чтобы в сценарии нельзя было отследить защищенные Web-узлы. l Объект документа (document). Каждый HTMLдокумент, загружаемый в окно браузера, становится объектом document (документ). В объекте document содержится большинство остальных типов объектов l

Размещение сценариев в документах l Первый способ <html> <script type="text/javascript" language="Java. Script"> </script> </html> l Второй способ

Размещение дескрипторов l Сценарий в разделе заголовка (здесь удобно размешать сценарии, которые впоследствии вызываются в ответ на действия пользователя) <html> <head> <title>A Document</title> <script type= "text/javascript " > //здесь размещаются строки кода … </script> </head> <body>

Размещение дескрипторов l Если нужно, чтобы сценарий запускался при загрузке страницы и генерировал ее содержимое, его следует разместить в разделе <body>. <html> <head> <title>A Document</title> </head> <body> <script type= "text/javascript " > //здесь размещаются строки кода … </script> </body> </html>

Типы данных и переменные Целые числа в десятичном представлении программисты используются чаще всего. Этот тип целых чисел состоит из цифр от 0 до 9 и не может содержать начальных нулей. l Целые числа в восьмеричном представлении после начального нуля могут иметь значение от 0 до 7. l Целые числа в шестнадцатиричном представлении после начального нуля может иметь значение от 0 до 15, причем цифры от 10 до 15 представляются в виде букв от а (или А) до f (или F). l Числа с плавающей точкой состоят из целого числа в десятичном представлении, за которым следует точка (. ) и дробная часть числа. l

Встроенные числовые константы Математическая константа Math. E Math. LN 2 Math. LN 10 Math. L 0 G 2 E Math. LOG 10 E Math. PI Math. SQRT 1_2 Описание Основание натурального логарифма Натуральный логарифм числа 2 Натуральный логарифм числа 10 Двоичный логарифм числа е Десятичный логарифм числа е Число π Квадратные корень числа

Строки в Java. Script l В мире С и C++ работа со строками чем-то напоминает визит к стоматологу. Работа со строками в Java. Script - это как поход в кондитерский магазин. l Строки могут содержать любое число символов или не содержать символов. l Строки объявляются путем указания составляющих их символов, заключенных между начальными и конечными двойными (" ") или одинарными (' ') кавычками. l Java. Script интерпретирует одинарные кавычки

Специальные символы Управляющая последовательнос ть b Символ забивки f Прогон страницы n Новая строка г Возврат каретки t Табуляция ’ Одинарная кавычка " Двойная кавычка \ Обратная косая черта ххх XX u. ХХХХ Символ, заданный тремя восьмеричными цифрами XXX (от 000 до 377) Символ, заданный двумя шестнадцатиричными цифрами XX (от 00 до FF) Символ Unicode, заданный четырьмя шестнадцатиричными цифрами ХХХХ (от 0000 до FFFF)

Другие типы данных l Булев тип данных может представлять лишь одно из двух возможных значений: true или false. В Java. Script true и false часто представляются как 1 (true) и 0 (false). l Ключевое слово null соответствует ситуации, когда переменная не содержит значения. l Неопределенные значения undefined представляет собой скорее концепцию,

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

Одномерные массивы l Для создания экземпляра массива используется оператор new совместно с объектом Array. 1. Пустой массив можно создать, с помощью конструктора без указания параметров: var x = new Array () ; 2. Заполнить список параметров конструктора элементами массива. Одной из отличительных особенностей массивов в Java. Script является возможность хранения в одном массиве данных различного типа:

Одномерные массивы 3. 4. Указание в списке параметров конструктора размера массива. При этом инициализируется массив с целью хранения указанного количества элементов, но не определяются значения самих элементов: var х = new Array (6) ; Использование стандартных для массива квадратных скобок и заполнение массива данными: var х = ["храсный", "желтый", "зеленый", 1, 5, 8];

Методы объекта Array Метод Описание join() Выполняет конкатенацию всех элементов массива в одну строку. reverse() Изменяет порядок элементов массива на обратный. sort() Сортирует элементы массива. concat() Выполняет конкатенацию массива с другим массивом. slice() Вычленяет подмассива. splice() Вставляет элементы в массив и удаляет элементы из массива. push() Добавляет элементы в конец массива. рор() Удаляет последний элемент массива. unshift() Добавляет элементы в начало массива. shift() Удаляет начальные элементы массива.

Многомерные массивы l Чтобы создать в Java. Script многомерные массивы, необходимо чтобы элементы массива сами были массивами. l Доступ к элементам внутреннего массива можно получить с помощью двух последовательно расположенных операторов [].

Дополнительные математические методы Метод Math. abs() Math. acos. O Math. asin() Math. atan 2() Math. ceil() Описание Абсолютное значение Арккосинус Арктангенс Наименьшее целочисленное значение, большее или равное аргументу Math. cos() Косинус Math. exp() Экспонента Math. floor() Наибольшее целочисленное значение, меньшее или равное аргументу Math. log() Натуральный логарифм Math. max() Большее из двух чисел Math. min() Меньшее из двух чисел Math. pow() Степень числа Math. random( Случайное число ) Math. round() Округление Math. sin() Синус Math. sqrt() Квадратный корень Math. tan() Тангенс

Арифметические операции Основные: сложение (+), вычитания (-), умножения (*) и деления (/). l Дополнительные: l определения остатка от деления (%): v= 26 % 3; l префиксная и постфиксная операция инкремента (++): pr=5; V=(++pr)+3; V=(pr++)+3; l префиксная и постфиксная операция декремента (--), pr=5; V=(--pr)+3; l

Присваивание х х у = = = 6; у = z = 6; (х = 3) + 4;

Логические операции l. И l ИЛИ l НЕ && || !

Операции сравнения l равенства == l неравенства > l меньше чем < l больше либо равно l меньше либо равно l идентичности l неидентичности !== != l больше чем >= <= ===

Условные конструкции l Оператор if 1. if (выражение) оператор; 2. if (выражение) оператор1; else оператор2;

Условные конструкции l Оператор switch (выражение) { case метка 1: оператор1 ; break; case метка 2: оператор2; break; default: оператор3; }

Циклы l Цикл for (начальное значение; условие окончания цикла; изменение переменной цикла) {оператор; } for (var a. Num = 0; a. Num <= 10; a. Num++) { document. write("4 X ", a. Num, " =

Циклы l Цикл while (выражение) { оператор; }

Циклы l Цикл do. . . while do { оператор; } while (выражение);

Циклы Цикл for. . . in for (переменная in объект) { оператор; } l <form name="a. Form"> <input type="button" name="Big_Button" value="Большая кнопка" on. Click="alert('Большая кнопка была нажата!')"> </form> <script type="text/javascript" language="Java. Script“> var a. Property; for (a. Property in document. a. Form. Big_Button) { document. write(a. Property, " "); } </script>

Пример Web-сайта, разработанного студенткой Квитко Светланой

Скачать презентацию Лекция 1 Основы Web-дизайна Вопросы 1 2 3

HTM_белый_2013.ppt

Количество слайдов: 74