МИРОВЫЕ ИНФОРМАЦИОННЫЕ РЕСУРСЫ 1. HTML. Фреймы 2. XML 3. Язык JavaScript.

Презентация:



Advertisements
Похожие презентации
это десятки миллионов Web-серверов Интернета, содержащих Web-страницы, в которых используется технология гипертекста. Технология WWW позволяет создавать.
Advertisements

Введение в Java Script УРОК 1. Пример ПЕРВЫЙ Открыть программу блокнот и записать следующую команду: Сохранить файл С расширением JS загрузить файл Двойным.
Тип, имя и значение переменной.. Переменные. В объектно-ориентированных языках программирования, и в частности в языке Visual Basic, переменные играют.
Фреймы в HTML. Фреймы Фрейм (англ. frame кадр, рамка) в самом общем случае данное слово обозначает структуру, содержащую некоторую информацию. Фрейм (в.
Лекция 4 Программирование на Паскале. Элементы языка Турбо Паскаль 7.0. Типы данных. Управляющие конструкции.
Троицкий Д.И. Интернет-технологии1 ДИНАМИЧЕСКИЕ WEB-СТРАНИЦЫ СЕРВЕРНЫЕ СЦЕНАРИИ Лекция 9 Кафедра «Автоматизированные станочные системы» Dept. of Automated.
Объектная модель DOM javascript. Иерархия классов.
Тип, имя и значение переменной. В объектно-ориентированных языках программирования переменные играют такую же важную роль, как и в процедурных языках.
JavaScript Лекция 8. JavaScript JavaScript - новый язык для составления скриптов, разработанный фирмой Netscape. С помощью JavaScript можно легко создавать.
Powerpoint Templates Page 1 Язык разметки гипертекста HTML.
Переменные и операторы УРОК 2. Переменные ПЕРЕМЕННАЯ – ?... контейнер для хранения данных. Переменная имеет имя – это….? последовательность букв, цифр.
База данных (БД) – Совокупность определённым образом организованной информации на определённую тему (в рамках определённой предметной деятельности); Организованная.
Основы языка HTML: тэги, атрибуты тэгов, комментарии.
Одномерный массив. Цель урока: познакомить учащихся с понятием одномерный массив Задачи: дать определение массива дать представление: об описании массива.
ВІДДІЛЕННЯ КОМПЮТЕРНИХ НАУК СЕКЦІЯ МУЛЬТИМЕДІЙНІ СИСТЕМИ, НАВЧАЛЬНІ ТА ІГРОВІ ПРОГРАМИ Розробка web-сайту на основі HTML з використанням JavaScript Виконав.
Структура HTML- документа. Терминология Элемент - конструкция языка HTML. Это контейнер, содержащий данные и позволяющий отформатировать из определенным.
Урок 1 Общие сведения об HTML. HTML H yper T ext M arkup L anguage Язык разметки гипертекста, является тем, с помощью чего web-браузер (программа для.
Тема 5. Основы современной технологии программирования Программирование в средах современных информационных систем. Интегрированные системы разработки.
Web-сайты и Web-страницы Сайт является интерактивным средством представления информации. Интерактивность сайта обеспечивают различные формы, с помощью.
Объектно-ориентированный язык программирования. Переменная - эта поименованная ячейка памяти, хранящая какое-либо одно значение (одно число, один фрагмент.
Транксрипт:

МИРОВЫЕ ИНФОРМАЦИОННЫЕ РЕСУРСЫ 1. HTML. Фреймы 2. XML 3. Язык JavaScript

Литература 1. Дунаев, В. Самоучитель JavaScript [Текст] / В. Дунаев. - 2-е изд. - СПб: Питер, Дунаев, В. Самоучитель JavaScript [Текст] / В. Дунаев. - 2-е изд. - СПб: Питер, Дмитриева, М. JavaScript. Быстрый старт [Текст] / М. Дмитриева. - СПб.: БХВ-Петербург, Дмитриева, М. JavaScript. Быстрый старт [Текст] / М. Дмитриева. - СПб.: БХВ-Петербург, Дунаев, В. Сценарии для Web- сайта. РНР и JavaScript [Текст] / В. Дунаев. - 2-е изд. - СПб.: БХВ- Петербург, Дунаев, В. Сценарии для Web- сайта. РНР и JavaScript [Текст] / В. Дунаев. - 2-е изд. - СПб.: БХВ- Петербург, 2008.

РАЗМЕТКА СТРАНИЦЫ

Создание фреймов Можно разбивать Web-страницы на множественные подокна. Каждое подокно, или фрейм имеет свой URL-адрес, что позволяет загружать его независимо от других фреймов. Каждый фрейм имеет собственное имя (параметр NAME), позволяющий переходить к нему из другого фрейма.

Структура HTML-документа, описывающего фреймы, следующая: … …

Тег описывает все фреймы, на которые делится экран. Можно разделить экран на несколько вертикальных или горизонтальных фреймов.

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

У тега два взаимоисключающих параметра: ROWS - определяет горизонтальные подокна, COLS - вертикальные подокна. Примеры

Теги могут быть вложенными, например

В теге можно задать толщину разграничительной рамки c помощью параметров FRAMEBORDER и BORDER.

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

Имя фрейма необходимо задавать для того, чтобы впоследствии указать, к какому фрейму использовать гиперссылку. В документе HTML, в этом случае, в теге (описание гиперссылки) должен присутствовать параметр TARGET, который определяет фрейм, в котором показывается содержимое Web-страницы. Например: file

Пример Описание фреймов

Для загрузки файлов text.htm и table.htm во фрейм с именем FRAME2, необходимо в файл file.htm внести следующие изменения при определении гиперссылок:... Документ 1 Документ 2...

XML - расширяемый язык разметки Расширяемый язык разметки XML предназначен для описания внутренней логической структуры документа. В качестве команд языка используются элементы. Элемент начинается так же, как и тег: содержимое элемента Например: информация

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

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

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

Пример: МИР Информация Структура Интернета … … …

Пример XML …

...Вот что он описывает:

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

Для определения смысла отдельных элементов ХML-документа используются специальные конструкции DTD – определители типа документов, которые определяют не только логический смысл элемента (дают комментарии по поводу описания использования элемента), но и жестко определяют структуру элемента. Синтаксис данных определителей типа документов достаточно сложен и напоминает отдельный язык разметки (или язык программирования).

Синтаксис достаточно строг. Нельзя делать ошибки. DTD используются так же, как эталоны для проверки правильности XML документов. Для задания внешнего представления XML документа используются стили. Основная нагрузка XML документа – содержание.

Релиз: (2009) Тестовая версия: (2010)

JavaScript это: язык программирования, предназначенный для создания интерактивных HTML-страниц; объектно-ориентированный язык разработки встраиваемых приложений, выполняющихся как на стороне клиента, так и на стороне сервера; Клиентские приложения выполняются браузером просмотра Web-документов на машине пользователя, серверные приложения выполняются на сервере. интерпретируемый язык. Для исполнения программы не требуется предварительная компиляция (преобразование исходного текста программы в системе-зависимый машинный код). Текст программы интерпретируется, т.е. анализируется и сразу же исполняется. Первая версия языка была разработана фирмой Netscape в 1995 году. Сейчас технология развивается, создается язык Javascript2 и новый интерпретатор.

Компоненты JavaScript

Основные области использования языка JavaScript при создании интерактивных HTML-страниц: динамическое создание документа с помощью сценария; оперативная проверка достоверности заполняемых пользователем полей форм HTML до передачи их на сервер; создание динамических HTML-страниц совместно с каскадными таблицами стилей и объектной моделью документа; взаимодействие с пользователем при решении "локальных" задач, решаемых приложением JavaScript, встроенном в HTML-страницу.

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

Методы "окружают" свойства объекта, не позволяя напрямую обращаться к ним или менять их значения. Говорят, что свойства заключены в "капсулу", инкапсулированы в объект. Доступ к ним предоставляют методы объекта, которые решают, можно ли изменять значения свойств, или можно получить только значение некоторого свойства, установленного разработчиком программного объекта.

Схематическое представление программного объекта

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

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

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

Объектные модели языков сценариев тесно связаны с тегами HTML. При загрузке страницы HTML в браузер интерпретатор языка создает объекты со свойствами, определяемыми значениями параметров тегов страницы. Говорят, что браузер отражает HTML- страницу в свойствах объектов. Созданные объекты существуют в виде иерархической структуры, отражающей структуру самой HTML-страницы.

Иерархия объектов

Объектная модель документа не является частью языка JavaScript. Строго говоря, DOM (Document Object Model) – это интерфейс прикладного программирования для представления документа (н-р, документа HTML, а также иных) и обеспечения доступа к его элементам и интерактивного изменения их свойств. Кроме того, DOM предоставляет механизмы для изменения самой структуры документа (добавление и удаление элементов, изменение их содержимого). Однако все версии языка JavaScript в той или иной степени поддерживают объектную модель документа.

Поскольку объект window самый верхний в иерархии DOM-модели, в точечной нотации при обращении к подчиненным объектам можно не указывать window. В частности при обращении к элементам страницы можно использовать точечную нотацию, начиная сразу с объекта document.

Документ представляет собой коллекцию всех элементов страницы, имеющую название all. Ее можно проиндексировать с помощью атрибутов name и id.

Например, пусть имеется следующая html-страница: Demo DOM Тогда, к значению поля MyFeild формы MyForm, можно обратиться таким образом: MyFeildValue = document.MyForm.MyField.value;

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

Альтернативным вариантом является размещение скриптов в отдельных файлах. Этот подход наиболее приемлем при использовании скриптов довольно большого объема, а также для хранения служебных процедур.

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

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

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

В названиях операторов и именах переменных заглавные и строчные буквы являются равнозначными. Переменные JavaScript могут быть объявлены в любом месте кода скрипта: var cnt; Возможно задание начального значения переменной при ее объявлении: var name = "значение";

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

В некоторых случаях можно создавать типизированные переменные для порождения экземпляров того или иного класса объектов: today=new Date () ; Здесь порожден экземпляр объекта Date, позволяющего осуществлять работу с датой.

Изменение значений переменных происходит при помощи использования оператора присваивания =. Name1 = "Выражение"; Выражение может содержать в себе другие переменные и операции действий над ними.

Операции JavaScript: + сложение, сцепление строк; - вычитание; * умножение; / деление; % остаток от целочисленного деления; ++ инкремент; -- декремент; а+=b а=а+b; а-=b a=a-b;

& логический AND (длинный вариант); && логический AND (короткий вариант); | логический OR (длинный вариант); || логический OR (короткий вариант); ! логическое отрицание; > больше; < меньше; >> сдвиг вправо; << сдвиг влево.

Короткий вариант команд сравнения означает, что аргументы такой операции не будут вычисляться дальше, если в процессе вычисления аргументов результат сравнения станет известен заранее. Например (2=3) & (А) результат false; выражение А будет вычислено. (2=3) && (А) результат false; выражение А не будет вычислено.

Математические функции реализуются при помощи библиотеки Math: Math.sin () синус; Math.cos () косинус; Math, tan () тангенс; Math.exp() экспонента; Math, log () натуральный логарифм; Math, random () случайное число от 0 до 1.

Задание массивов происходит при помощи оператора Array (массивы являются объектами): mas = new Array (); Здесь задан массив mas, имеющий неопределенную размерность. mas1 = new Array (5); Массив mas1 содержит пять элементов.

Нумерация элементов массива начинается с нулевого, однако при инициализации в скобках указывается размерность массива, т.е. число элементов, под которые выделяется память. При этом, размерность и тип элементов массива может меняться в процессе выполнения программы, т. е. в языке JavaScript нет ошибки "Выход за границы массива". При обращении к несуществующим элементам (ранее не заданным), их содержимое будет принимать значение "undefined".

Можно задавать начальные значения элементов массива в процессе его объявления (тем самым задается размерность и тип элементов): mas2 = new Array ("Пушкин", "стол", "яблоко"}; Это массив из трех строковых элементов.

Обращение к элементам массива происходит путем указания имени массива и индекса элемента. При этом указание индекса элемента большего, чем указано при объявлении массива ведет к увеличению размерности массива, а не к ошибке, как в других языках программирования: masl[3] = 10; masl[8] = 18; (Теперь masi содержит девять элементов).

Текущая размерность массива содержится в свойстве Length: с = masI.length;

JavaScript предоставляет нам также несколько интересных методов работы с массивами. Так, метод Reverse меняет порядок элементов массива на обратный: masl.reverse;sort сортирует элементы массива: mas3 = masl.sort;Join объединяет элементы массива в строку, используя при этом указанный разделитель: str = mas2.join(" -> ");Строка str при этом примет следующее значение: "Пушкин -> стол -> яблоко"

Ввод/вывод в JavaScript Любой язык программирования немыслим без операторов вывода. JavaScript не является исключением. Вывод данных на экран может происходить различными способами. При этом операторы вывода оптимизированы для наиболее удобного их использования. Наиболее простым является применение оператора Alert (). Аргументом оператора может являться любое строковое выражение. Если аргумент имеет нестроковый тип, то он переводится в строковый. Результатом выполнения оператора Alert о является вывод на экран довольно зловещего (Alert по- английски значит "угроза") диалогового окна, содержимым которого является значение выражения аргумента.

При этом диалоговое окно будет терпеливо ожидать нажатия пользователем кнопки ОК. Только после выполнения этого действия исполнение программы и отображение страницы будет продолжено. Вывод при помощи окна оператора Alert весьма удобно использовать для контроля значений переменных на том или ином этапе выполнения программы, т. е. при отладке. Приведем код HTML- документа, который приводит к появлению такого окна (листинг 8.2). Листинг 8.2. Вывод на экран с использованием окна оператора Alert mas2 = new Array ("Пушкин", "стол", "яблоко"); dd = mas2. join ("->"); alert(dd);