вторник, 9 апреля 2019 г.

Обработка событий в JavaScript

Откройте (или создайте) html-страницу и поместите в нее следующий код:

<html>

<head>

<title>Заголовок документа</title>

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

<script language="javascript">

document.write("Моя первая страница.");

</script>

</head>

<body>

</body>

</html>

Откройте эту страницу в браузере, она выглядит так:

Давайте разберемся, как это работает. Браузер читает нашу html-страницу, видит оператор для выполнения document.write("Моя первая страница."); и выполняет его. Рассмотрим из чего состоит сам оператор (инструкция):

При интерпретации html-страницы браузер создает объекты javascript. Они хранятся в виде иерархической структуры, отражая структуру документа, например:

На самом верхнем уровне находится объект window, представляющий окно браузера и являющийся "родителем" всех остальных объектов. Расположенные ниже могут иметь свои подчиненные объекты. Так объект document(текущая страница) может иметь дочерний объект form (форма) и т.д.

Все объекты имеют методы (отделяются от объекта точкой), например:

document.write позволяет писать текст в текущую страницу,
window.open открывает новое окно браузера.

Также объекты имеют свойства, например:

document.bgcolor содержит значение фонового цвета текущей страницы,
document.title содержит заголовок страницы.

Все инструкции программного кода заканчиваются точкой с запятой. Об этом надо помнить.

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

Для этого в тегах элементов страницы введены параметры обработки событий, задающие действия, выполняемые при возникновении события, связанного с элементом. Например:

<div onClick="addText();"></div>

Здесь Click - событие (щелчок по div-у), onClick - обработчик события, addText() - имя функции, которая сработает при возникновении этого события (щелчка по div-у).

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

Событие	Когда происходит	Обработчик события
Blur	потеря объектом фокуса	onBlur
Change	пользователь изменяет значение элемента	onChange
Click	пользователь щелкает мыщью по объекту	onClick
DblClick	пользователь делает двойной щелчок мышью по объекту	onDblClick
DragDrop	пользователь перетаскивает мышью объект	onDragDrop
Error	возникновение javascript-ошибки	onError
Focus	окно или элемент формы получает фокус	onFocus
KeyDown	пользователь нажимает клавишу клавиатуры	onKeyDown
KeyPress	пользователь удерживает нажатой клавишу клавиатуры	onKeyPress
KeyUp	пользователь отпускает клавишу клавиатуры	onKeyUp
Load	документ загружается в браузер	onLoad
MouseDown	пользователь нажимает кнопку мыши	onMouseDown
MouseOut	указатель мыши выходит за пределы элемента	onMouseOut
MouseOver	указатель мыши помещается над элементом	onMouseOver
MouseUp	пользователь отпускает кнопку мыши	onMouseUp
Move	пользователь перемещает окно	onMove
Reset	пользователь нажимает кнопку "reset" формы	onReset
Resize	пользователь изменяет размеры окна или элемента	onResize
Select	пользователь выбирает элемент формы	onSelect
Submit	пользователь нажимает кнопку "submit" формы	onSubmit
Unload	пользователь закрывает документ	onUnload

Хорошим стилем программирования является оформление действий, выполняемых при обработке событий, в виде функций.

среда, 3 апреля 2019 г.

Объект document

Результаты практической работы "Морфей":

Фамилия, имя	Оценка
Капуста,Болгарова	11
Ермакова	10
Познанский, Терещенко, Андриенко	10
Зима, Кудряшова	9
Савенкова, Ростовцева	8
Куприенко, Кобзева	11
Куц, Листопад	11
Ковалёв, Мажара	???
Искендеров, Ищенко	11

Пройдите курс "Знакомство с JavaScript" на сайте HtmlAcademy

Заготовки к практической работе "Морфей"

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

Анализируя свойства объекта document, сценарий JavaScript может определить значения различных параметров документа HTML. Кроме того, сценарию доступны локальные метки, формы и связи документа как элементы соответствующих массивов, а также информация из заголовка документа.

Свойства объекта document

Ниже перечислены свойства объекта document, доступные сценарию JavaScript:

Свойство	Описание
alinkColor	Цвет ссылок, выбранных пользователем
anchors	Массив локальных меток, размещенных в документе. Эти метки применяются для организации ссылок внутри документа
applets	Массив объектов, соответствующих аплетам Java, расположенным в документе HTML
bgColor	Цвет фона документа
cookie	Значение cookie для текущего документа
fgColor	Цвет текста
forms	Массив, содержащий в виде объектов все формы, расположенные в документе HTML
images	Массив растровых изображений, включенных в документ
lastModified	Дата последнего изменения документа HTML
linkColor	Цвет ссылок, размещенных в документе и еще не посещенных пользователем
links	Массив, содержащий все ссылки в документе HTML
location	Полный адрес URL документа HTML
referrer	Адрес URL вызывающего документа HTML
title	Заголовок документа, заданный с помощью оператора
URL	Полный адрес URL документа HTML
vlinkColor	Цвет ссылок, размещенных в документе и уже посещенных пользователем

Объект document может содержать в себе другие объекты, доступные как свойства:

Свойство	Описание
anchor	Локальная метка, определенная в документе HTML с помощью тэга <A>
form	Форма, определяемая в документе HTML с помощью оператора <FORM>
history	Список адресов URL, посещенных пользователем
link	Текст или изображение, играющее роль гипертекстовой ссылки. Создается с помощью оператора языка HTML <A>, в котором дополнительно задаются обработчики событий onClick и onMouseOver

Методы объекта document

Сценарии JavaScript могут вызывать следующие пять методов, определенных в объекте document:

Метод	Описание
clear	Удаление содержимого документа из окна просмотра
close	Закрытие потока данных, открытого для документа методом open. В окне будут отображены все изменения содержимого документа, сделанные сценарием после открытия потока
open	Открытие выходного потока для записи в документ HTML данных типа MIME при помощи методов write и writeln
write	Запись в документ произвольной конструкции языка HTML
writeln	Аналогично предыдущему, но в конце строки добавляется символ новой строки

Сценарии, работающие с объектом document

Цветовое оформление документа

Большинство свойств объекта objects доступно сценарию JavaScript как для чтения, так и для записи. В данном примере попробуем динамически изменить цветовое оформление документа HTML.

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

<HTML>

<HEAD>

<TITLE>Color Links</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

document.bgColor = "#00FF80";

document.fgColor = "#800080";

document.linkColor = "#000000";

document.alinkColor = "#FF0000";

document.vlinkColor = "#4000FF";

// -->

</SCRIPT>

</HEAD>

<BODY BGCOLOR=white>

<H1>Изменение цветового оформления</H1>

<P>Посетите эти серверы:

<P><A HREF="http://www.glasnet.ru/~frolov/index.html">Наша домашняя страница</A>

<P><A HREF="http://www.auramedia.ru">Каталог программ Auramedia</A>

<P><A HREF="http://www.microsoft.com/java/">Страница сервера Microsoft про Java</A>

<P><A HREF="#Локальный раздел">Локальный раздел</A>

<HR>

<H1><A NAME="Локальный раздел">Локальный раздел</A></H1>

<P>Этот локальный раздел вы можете просмотреть, даже если ваш компьютер не подключен к Internet

</BODY>

</HTML>

Обратите внимание, что наш сценарий переопределяет цвет фона, заданный параметром BGCOLOR в операторе <BODY>:

document.bgColor = "#00FF80";

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

Ссылки и метки в документе

Как известно, для того чтобы вставить в документ HTML ссылку или локальную метку, необходимо использовать тэг <A>. В общем виде этот оператор представлен ниже:

<A HREF=Адрес URL или локальная метка NAME="Имя локальной метки"

TARGET="Имя окна" onClick="Обработчик события: щелчок по ссылке"

onMouseOver="Обработчик события: курсор над ссылкой"> Текст ссылки </A>

Для каждой ссылки, размещенной в документе HTML, создается отдельный объект. Все такие объекты находятся в объекте документа Document как элементы массива links. Сценарий JavaScript может определить свойства каждой ссылки, расположенной в документе HTML, анализируя элементы объекта links.

Вот список этих свойств:

Свойство	Описание
hash	Имя локальной ссылки, если она определена в адресе URL
host	Имя узла и порт, указанные в адресе URL
hostname	Имя узла и доменное имя узла сети. Если доменное имя недоступно, вместо него указывается адрес IP
href	Полный адрес URL
pathname	Путь к объекту, указанный в адресе URL
port	Номер порта, используемого для передачи данных с сервером, указанным в данной ссылке
protocol	Строка названия протокола передачи данных (включающая символ "двоеточие"), указанного в ссылке
search	Строка запроса, указанная в адресе URL после символа "?"
target	Значение параметра TARGET, заданное в ссылке
length	Количество элементов в массиве links, то есть количество ссылок в текущем документе HTML

Основы JavaScript

Пройдите курс "Знакомство с JavaScript" на сайте HtmlAcademy

Сценарий, или скрипт – это упрощенная программа, , встроенная в HTML –документ.

Язык сценариев JavaScript был создан на основе объектно – ориентированного языка Java. Технология скриптов позволяет странице динамически реагировать на поведение пользователя, но при этом не создает нагрузку на сеть. JavaScript работает только в составе HTML – страницы, и написанный скрипт начинает работать только тогда, когда страница загружена в браузер.

Возможности JavaScript:

Формирование страницы «на лету»
Проверка правильности данных, введенных в форму
Возможности пользователя управлять работой скрипта
Создавать окна сообщений, диалоговые окна, предупреждения
Создавать документы с расширенными возможностями навигации

Скрипты размещаются внутри тега <SCRIPT></SCRIPT>

Операторы разделяются знаком ;
Переменные типизировать не обязательно
Операция равенства записывается как в С++: ==
Несколько операций объединяются с помощью фигурных скобок {}
Язык чувствителен к регистру, то есть различает большие и маленькие буквы

Пример простейшего скрипта, выводящего на экран текстовое сообщение:

<html>
<body><script type="text/javascript">alert(«Первый скрипт!");</script>
</body>
</html>

В скриптах используются такие операторы управления:

FOR
WHILE
IF … ELSE
?

Для вывода используется оператор writeln().

Главная идея JavaScript – дать возможность пользователю изменять страницу в процессе просмотра. Для реализации этой идеи была предложена объектная модель документа

Суть модели – в том, что каждый элемент HTML – это объект, характеризующийся тремя показателями:

СВОЙСТВА
МЕТОДЫ
СОБЫТИЯ

Синтаксис объектной модели:

Объект.свойство
Объект.метод (список параметров)
Объект1.объект2.свойство

Свойства

Большинство тегов имеют атрибуты. Например, атрибут HREF тега A:

Если рассматривать элемент<A..>…</A> ак объект, то атрибут HREF будет задавать свойство гиперссылки

DOCUMENT.LINKS[0].HREF=“KUKU.HTM”;

Методы

Методы объекта определяют функции изменения его свойств. Например, с объектом document связаны методы open() write() close()

Пример скрипта, создающего новый документ и открывающего его в новом окне:

<html><body>
<script>
id=window.open("");
id.focus();
id.document.write("hello!");
</script>
</body></html>

События

Суть программирования скриптов состоит в написании подпрограмм обработки событий, которые могут происходить с объектами.

Пример: с объектом BUTTON(задается тегом <input type=button> - кнопка формы) может произойти событие «click» - то есть на кнопку могут нажать.

В этом примере скрипта при нажатии на кнопку появляется текстовое сообщение:

<html>
<head>
<script>
function cl() {alert("Я же просил – не кликайте!");
}</script></head><body><form><INPUT TYPE=BUTTON VALUE="Не кликайте тут" OnClick="cl()";>
</form>
</body>
</html>

В JavaScript есть три метода ввода информации пользователем или вывода ее на экран.

Метод Alert

Этот метод позволяет выводить окно сообщения с кнопкой ОК.

alert("Параметр_1")

Метод Confirm

Выводит окно сообщения с кнопками ОК и Cancel. Возвращает True, если нажата кнопка ОК, и False, если нажата кнопка Cancel.

confirm ("Параметр_1")

Метод Prompt

Если нажата кнопка ОК, возвращается напечатанный в поле текст, если нажата кнопка Cancel— возвращается False.

Выводит окно сообщения и текстовое поле, предназначенное для ввода информации пользователем. Первый аргумент – текст сообщения, второй — значение по умолчанию.

Prompt("Параметр_1", “Параметр_2“)

Пример скрипта с вопросами теста:

<html>
<body>
<script>
var s, i=0;
s=confirm("2+2=4?");
if (s==true) {alert("Good!"); i++;}
else alert("No!")
</script>
</body></html>

суббота, 23 марта 2019 г.

Разработка лендинга на платформе визуального веб-редактора Wix

Результаты практической работы "Создание сайта на платформе Wix":

Кучерявенко, Кобзева, Ермакова	10
Капуста и Болгарова	11
Зима, Кудряшова	11
Ростовцева Савенкова	10

Задание для самостоятельной работы для II группы 11Б класса

Вашей задачей будет создать лендинг, то есть "продающую страницу", на платформе Wix, используя готовый шаблон. Подробнее познакомиться с тем, что такое лендинг и на какие ключевые моменты стоит обращать внимание при макетировании страницы, можно здесь:

http://tilda.education/courses/landing-page/understanding-main-principles/

http://tilda.education/courses/landing-page/etapy-sozdaniya-landing-page/

Еще подробнее:

http://tilda.education/landing-page-course

Регистрируйтесь на платформе Wix, используя вашу учетную запись Google. Начните создавать новый сайт, выбрав категорию "Бизнес" или "Интернет-магазин".

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

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

Если что-либо непонятно в задании, или у вас возникли технические сложности - я консультирую и помогаю по любым вопросам. Можно написать мне на почту lja2010k@gmail.com, можно подойти когда вам будет удобно. Удачи!

пятница, 22 марта 2019 г.

Логотип и фавикон

Результаты практической работы "Логотип":

Фамилия, имя	Оценка
Болгарова, Капуста	10
Ростовцева	11
Зима, Кудряшова	11
Андриенко, Познанский, Терещенко	11
Куприенко, Кобзева	11
Ермакова, Кучерявенко	10

Что такое логотип?

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

Пример заготовки логотипа для сайта IT-компании

Логотипы бывают трех типов:

• Текстовые. Как правило, в этом случае в качестве лого используется графическое начертание названия

• Символьные. В качестве logo выступает какая-то картинка или изображение, а порой и какой-нибудь зверек (котенок, собака и т.д.). Также в некоторых случаях логотипом может стать «оживший» предмет (например, как в ворде – скрепка-помощник с глазами)

• Комбинированные. В этом случае logo комбинированный, он состоит и из графического текста, и из символа

Требования к логотипу:

• Он должен быть легко запоминаемым

• Он должен быть уникальным. Не стоит копировать чужие логотипы

• Он должен быть оригинальным. Посетителей надо чем-то удивить, логотип должен остаться в памяти

• Он должен быть ассоциативным, отображать характер сайта

• Он не должен раздражать посетителей

Что такое фавикон?

Favicon (от FAVorites ICON — «значок для избранного»)- значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса. Как правило, фавикон копирует или дополняет логотип.

Как создать фавикон?

• Использовать генератор фавиконов (например, http://favicon.by/)

• Создать в графическом редакторе изображение размера 16×16 пикселей формата ICO, поместить в корневой каталог сайта под именем favicon.ico.

Примеры фавиконов в заголовке закладки браузера

Подключается фавикон с помощью тега

<link rel=«icon» href=» http://путь к файлу с favicon.ico»>

Этапы создания лого:

1. Дизайнерские предпочтения

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

2. Исследование конкурентов

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

3. Рисование эскизов и концептуализация

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

Эскизы лого для сайта Ultimate Potential

4. Воплощение на компьютере

У автора эскизов, которые вы можете видеть выше была идея использовать буквы U и P в логотипе и составить из них фигуру человека прыгающего или парящего в воздухе. После того как был выбран один наиболее подходящий эскиз автор экспериментировал создавая разные его варианты в Adobe Illustrator. Ниже вы можете видеть шесть вариантов созданных авторам во время экспериментов. В результате был выбран левый нижний вариант. Данный логотип изображает абстрактного человека прыгающего или парящего в воздухе, символизирующего энергию, хорошее здоровье, жизненный баланс, подвижность, что соответствует тематике сайта.

5. Выбор шрифта

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

6. Цвет

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

7. Заключительный вариант логотипа.

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

А вот так он выглядит на самом сайте:

четверг, 14 марта 2019 г.

Хостинг и продвижение сайта

Откройте таблицу "Выбор хостинга для интернет-магазина" и загрузите себе копию.

Хостинг – это размещение веб-сайта на оборудовании компании. Ресурсы сервера и линии связи при этом используются совместно многими клиентами. При этом пользователю предоставляют место на сервере (хосте) раздела в виде каталога, в котором хранится вся информация сайта (html-документы, графика, клипы, скрипты и т.д.)

Этапы создания веб-сайта:

Определение целей и функций сайта
Создание структуры (схемы) сайта
Подбор аппаратных и программных средств, необходимых для реализации сайта
Создание отдельных страниц
Тестирование
Публикация страниц на сервере
Реклама сайта
Поддержка и развитие сайта

На начальном этапе создания определяются:

Цель создания
Потенциальная аудитория
Функции сайта

На этапе подбора аппаратных и программных средств определяются:

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

Этап публикации страниц на сервере включает:

Перенос html-файлов, графики, анимации и т.д. на сервер
Создание структуры базы данных на сервере
Тестирование работы веб-сайта на сервере
Оценка скорости загрузки в различных режимах
Этап рекламы и продвижения сайта включает:
Регистрацию сайта в поисковых системах
Регистрацию в баннерных системах обмена. Для коммерческих ресурсов- покупка баннерной рекламы
Обновление содержимого, модернизация графики, отслеживание посещаемости сайта

Анализ серверов платного и бесплатного хостинга:

Платный хостинг	Бесплатный хостинг
Доменное имя 2-го уровня Sitename.ru	Доменное имя 3-го уровня Sitename.hostingname.ru
Надежный сервер	Возможны неполадки с серверов
Невозможно удаления сайта клиента из базы данных	Возможно удаление сайта клиента без объяснения причины
Оперативная служба поддержки	Медленная служба поддержки
Поддержка технологий PHP, MySQL, CGI и т.д.	Эти технологии поддерживаются не всегда

Здесь вы можете ознакомиться с рейтингами и обзорами самых популярных хостингов Украины, России и Европы:

Рейтинг хостинг-провайдеров «Tophosting»

Бесплатный хостинг с PHP и MySQL

Обзор 7 лучших бесплатных хостингов для своего сайта с PHP и MySQL

вторник, 9 апреля 2019 г.

среда, 3 апреля 2019 г.