Главная страница
qrcode

Н., хаи, 2013 11. Введение в веб-программирование. Html-разметка


Скачать 11.83 Mb.
НазваниеН., хаи, 2013 11. Введение в веб-программирование. Html-разметка
Дата10.09.2019
Размер11.83 Mb.
Формат файлаpdf
Имя файлаВведение в веб-программирование.pdf
оригинальный pdf просмотр
ТипРеферат
#64805
страница5 из 12
Каталог
1   2   3   4   5   6   7   8   9   ...   12

color:green;">

9 лекций по веб-программированию (c) Пономаренко Н.Н., ХАИ, 2013
16
Как видно, три разных блока за счет абсолютного позиционирования были наложены друг поверх друга.
Использование же в качестве фона изображения с прозрачностью позволило создать сложное составное изображение непрямоугольной формы.
Здесь каждый блок является своеобразным окном, сквозь которое мы смотрим на фоновое изображение (имя изображения задается в свойстве background): background:url('ui.png');
При этом свойство background-position позволяет сдвинуть фоновое изображение на требуемое число пикселей по вертикали и горизонтали так, что в наше “окно” мы начинаем видеть другой участок фонового изображения.
Поэкспериментируйте с этой страницей. Попробуйте изменять размеры окон, задавать другие величины для сдвига фонового изображения.
Обратите внимание, что общий зеленый фон страницы задан прямо в стиле тега <body>. Все стили оформления для этого тега распространяются на все элементы веб-страницы.
Также обратите внимание, что свойства position и
background мы задали одинаковыми сразу для трех стилей, перечислив имена этих стилей через запятую. Ниже задаются остальные свойства для этих стилей (при желании некоторым свойствам ).
2.5.
Визуальный анализ стилей веб-страниц
Бывает тяжело анализировать стили веб-страниц
(особенно чужих) в текстовом виде. Поэтому полезными являются утилиты и плагины к браузерам, позволяющие анализировать стили визуально. Одним из таких плагинов является “Инспектор” в браузере Mozilla Firefox. Для запуска этого браузера нужно войти в подменю
“Инструменты”, затем - в подменю “Веб-разработка” и там выбрать пункт “Инспектор”. Запускается анализ текущей веб-страницы и при нажатии ее элементов можно увидеть окно, как на рисунке 2.16.
Рисунок 2.16 - Пример использования режима “Инспектор”
В данном примере анализировалась страница, приведенная на рисунке 2.11. Видно, что при нажатии на блок со стилем “.mama” инспектор показывает значения свойств этого стиля, а также, какие свойства стилей были наследованы от родительского блока со стилем “.papa”.
Более того “Инспектор” позволяет на лету изменять свойства стилей и смотреть, что из этого получится. Для этого нужно кликнуть мышкой на значение свойства и ввести новое значение. На рис. 2.17 показан этот же пример после изменения в “Инспекторе” свойства background-
color.
Рисунок 2.17 - Изменение в “Инспекторе” свойств стилей
На этом данная лекция заканчивается. Пожалуйста, самостоятельно рассмотрите следующие свойства стилей:
border, float, clear, cursor, margin, max-width, opacity,
outline, text-align, transform, vertical-align, visibility.
Поэкспериментируйте с разными их значениями, с разными вариантами наследования свойств стилей (при вложении одних блоков текста в другие). Помните, что в вебпрограммировании многое легче узнать на конкретном примере, чем изучить в теории. Создавайте веб-страницы, смотрите, как они выглядят в браузере. Если что-то в поведении веб-страницы или браузера непонятно, то кроме справочников информацию можно найти по поиску в Google или спросить у знакомого, который разобрался в этом вопросе раньше вас.
9 лекций по веб-программированию (c) Пономаренко Н.Н., ХАИ, 2013
17
3. Основы языка программирования JavaScript
JavaScript - язык программирования, который применяется в основном для разработки клиентской части сайтов (front-end).
JavaScript является интерпретатором и выполняется внутри браузера (программы, которая визуализирует вебстраницу). Браузер вначале анализирует текст программы, интерпретирует его, и только затем выполняет нужные действия. Это медленно. Поэтому программы на JavaScript работают медленно и не всегда одинаково для разных браузеров.
Почему тогда интепретатор, а не компилятор? Язык
JavaScript был специально разработан как интерпретатор, чтобы была возможность исключить из него все операции работы с файлами (чтение, запись и т.п.). Это необходимо для того, чтобы веб-страница, загруженная из сети Интернет и содержащая программу JavaScript, не могла повредить компьютеру пользователя (например, заразить его вирусом).
Если заражение вирусом и происходит, то из-за каких-то других причин, но не по вине JavaScript.
Итак, писать и читать файлы программа на JavaScript не может. А что же она может? Для чего в основном используется JavaScript?
JavaScript предназначен для:
1) Автоматизации процесса набора текста страниц;
2) Обработки событий, происходящих на странице
(придания странице интерактивности);
3) Изменения содержимого веб-страниц во время их просмотра, анализ данных веб-страниц;
4) Формирование запросов к серверу и получение ответов без перегрузки веб-страницы;
5) Работа с cookies (данные веб-страницы, хранящиеся в браузере на компьютере пользователя).
Ничего из этого нельзя добиться с помощью HTML и
CSS, поэтому JavaScript дополняет эти инструменты вебпрограммирования, а не заменяет или дублирует их.
Перед тем, как приступить к описанию JavaScript, отметим, что здесь будут рассмотрены лишь необходимые основы, достаточные для того, чтобы начать программировать на JavaScript. Все остальное вы сможете изучить самостоятельно по мере практической надобности.
Мы здесь не будем останавливаться на перечислении конструкций и типов языка программирования JavaScript, а также подробном описании его синтаксиса. Будем считать, что вы уже знаете какой-либо из языков программирования, например, C/C++. В этом случае вы легко поймете синтаксис
JavaScript, а основное знание, которое вам потребуется приобрести, это как с помощью JavaScript решать его основные задачи, перечисленные выше. Этому и конкретным примерам мы и посвятим основной объем данной лекции.
3.1. Автоматическое генерирование текста страниц
Чтобы начать программировать на JavaScript не нужно ничего, кроме одного (любого) из браузеров Интернета, установленного на нашем компьютере. Текст программы на
JavaScript вставляется прямо в HTML-страницу внутри тега
<script> .. script>. Таких тегов может быть несколько и браузер выполняет помещенные внутри них куски
JavaScript-программ сразу же, как только доходит до этого места в процессе загрузки веб-страницы.
Рассмотрим текст простой веб-страницы, который показан на рисунке 3.1 (файл ex3_01.html).
1   2   3   4   5   6   7   8   9   ...   12

перейти в каталог файлов


связь с админом