Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
1.1.Глава1_бакалавры.docx
Скачиваний:
49
Добавлен:
22.02.2015
Размер:
560.23 Кб
Скачать

1

Глава

Принципы

программирования

в Web

Эта глава из моей книги по SWI-Prolog http, см. репозиторий по книгам: Book2013_SWI-PrologHttp.

В ЭТОЙ ГЛАВЕ…

  • Гипертекст HTML

  • Каскадные таблицы стилей CSS

  • JavaScript

  • Динамическая модель документа DOM

  • DHTML – динамический HTML

  • Объект XMLHttpRequest

  • Ajax

  • jQuery

В

этой главе мы познакомимся с основными понятиями и принципами программирования в Интернете.

Основы

1.1. Основные понятия приложений

для Интернет

Это:

  • HTTP (Hypertext Transfer Protocol). Протокол передачи гипертекстовых файлов. Это протокол уровня приложений для распределенных информационных систем. Используется при передаче HTML-файлов по сети Web-страниц.

  • HTML (Hyper-Text Markup Language). Стандартный язык разметки, используемый для создания Web-страниц.

  • URL (Universal Resource Locator). Унифицированный указатель адреса размещения информационного ресурса (документа) в сети Интернет.

  • Ajax (Асинхронный JavaScript и XML). Новейшая технология разработки приложений для Интернет. До появления Ajax web-приложение выполнялось преимущественно на стороне web-сервера. Браузер играл преимущественно только роль монитора, отображавшего посланную ему сервером web-страницу. Ajax-приложение выполняется как на стороне сервера, так и на стороне клиента, отличаясь высочайшей производительностью: как будто вы работаете просто за своим компьютером, а не через сеть Интернет.

  • XML (Extensible Markup Language). Расширяемый язык разметки. Это новая технология для описания и структурирования данных. Это специальный стандарт, с помощью меток которого вы можете описывать данные на любом языке, например на обычном русском.

Ajax-технология – это не столько новая технология, сколько новый подход к разработке web-приложений, максимально использующий средства web-браузера. Средства web-браузера принято называть инфраструктурой Ajax. Инфраструктуру Ajax составляют:

  • документы HTML

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

  • каскадные таблицы стилей CSS

  • язык программирования JavaScript

  • объект XMLHttpRequest web-браузера.

1.2. Html-элементы div и span и каскадные таблицы стилей (css) – основа построения Web-страниц

Описание …

Пример

См. мой локальный репозиторий Ajax: файлы divandspan.html и style1.css.

Листинг 1.2a. HTML-элементы DIV и SPAN (файл divandspan.html)

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Test CSS</title>

<link rel="stylesheet" type="text/css" href="style1.css">

</head>

<body>

<h1>Заголовок крупно</h1>

<p>

Абзацы P выделяются браузером.

</p>

<p>

Это <b>полужирный шрифт</b>, а это <i>курсив</i>.

</p>

<div class="header1">

Элемент DIV может быть заголовком

</div>

<div class="paragraf1">

Подобно абзацу P, элемент DIV отображает блок текста.

</div>

<div>

Другой способ выделения текста <span class="bold1">полужирным шрифтом</span>

или <span class="italic1">курсивом</span>

</div>

<div>

А вот для этого текста стиль можно задать

<span id="mySpan">по идентификатору id=mySpan</span>

</div>

<div class="paragraf1">

Динамический HTML (DHTML) это: <b>HTML + CSS + DOM + JavaScript</b>.

Можно считать, что Ajax это: <b>DHTML + XMLHttpRequest</b>.

</div>

</body>

</html>

Листинг 1.2b. Каскадные таблицы стилей CSS (файл style1.css)

h1 {

text-align: center;

color: indigo;

font: italic bold 28pt/150% sans-serif

}

.header1 {

color: indigo;

font: italic bold 28pt/150% sans-serif

}

.paragraf1 {

color: white;

background-color: green;

border: solid 2px blue;

font: 14pt/150% sans-serif

}

.bold1 {

font: bold 14pt/150% sans-serif

}

.italic1 {

font: italic 14pt/150% sans-serif

}

#mySpan {

border: solid 2px;

border-color: orange red

}

Рис.1.2. РаботаютHTML-элементыDIVиSPANи каскадные таблицы стилейCSS

Применим рассмотренные компоненты к написанию Ajax-приложения «Аккордеон».