Создание динамических WEB-страниц c помощью языка JavaScript
Создание динамически изменяющиеся HTML-документов с использованием языка сценариев JavaScript. Генерация HTML-документа при загрузке WEB-страницы, обработка событий, настройка WEB-страниц, включение динамических компонентов на WEB-страницу, проверка форм.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | реферат |
| Язык | русский |
| Дата добавления | 16.07.2017 |
| Размер файла | 3,6 M |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Создание динамических WEB-страниц c помощью языка JavaScript
Цель работы: научиться создавать динамически изменяющиеся HTML-документы с использованием языка сценариев JavaScript (генерация HTML-документа при загрузке WEB-страницы, обработка событий, настройка WEB-страниц, включение динамических компонентов на WEB-страницу, проверка форм).
1 Подключение скриптов
Использовать JavaScript на WEB-страницах можно двумя способами. Во-первых, можно динамически создать HTML-документ в процессе загрузки страницы. Во-вторых, с помощью JavaScript можно отслеживать различные события и выполнять необходимые действия. Задачи, выполняемые JavaScript, условно разделяются на следующие основные категорий: изменение содержимого WEB-страниц, обеспечение динамического поведения документов, проверка форм.
Сценарии могут быть подключены к основному HTML-документу несколькими способами:
- включением скрипта в качестве параметра в один из обработчиков. Этот метод обычно применяется для коротких сценариев;
- наиболее распространенный метод - размещение сценария в специальном элементе <SCRIPT>:
- сценарии могут загружаться из внешних файлов, обычно применяется для сценариев большого размера или многократно используемых на разных страницах.
Если во втором и третьем случаях браузер сразу находит исполняемый код, то есть команды, предназначенные для немедленного выполнения, то интерпретатор выполняет их последовательно, стока за строкой, по мере чтения текста.
В примере 1.1 приведена простейшая организация обработки события.
Сначала, по мере чтения, выполняется код HTML. Без каких-либо особенностей открывается окно браузера с заголовком, но элемент <H1> становится активным, как ссылка. При попадании на него указателя мыши возникает событие. В данном примере процедура обработки события вызывается встроенными средствами HTML, она указана как значение атрибута onmouseover. Управление передается обработчику события, то есть вызывается процедура alert('строка'). Обработчик, как и положено, выполнен средствами JavaScript. Эта простая встроенная функция вызывает на экран диалоговое окно предупреждения. В функцию должна быть передана строка (берется в одинарные кавычки), которая и появится в окне (рис.1.1).
Элемент HTML <SCRIPT> предназначен для размещения сценариев. Может вставляться в любое место документа, и таких разделов может быть несколько. В элементе может располагаться код, который выполняется сразу после прочтения, а может содержаться и описание функций, которые выполняются в нужный момент -- момент вызова (например, после подведения указателя мыши). Коды из разных разделов могут взаимодействовать между собой.
При размещении кода следует помнить о построчном порядке выполнения операторов. Обычно код размещают или в разделе <head> или в разделе <body>. Первый случай рекомендуется, когда необходимо, чтобы код скрипта был обработан раньше, чем загрузится страница.
Если в документе размещено несколько элементов <script>, то при выполнении текущего фрагмента следует помнить, что могут быть использованы только переменные и функции, определенные в предыдущих скриптах, определенные же в последующих могут быть еще недоступны, и попытка их использования приведет к ошибке.
Если скрипт используется после загрузки страницы и достаточно длинный, то его выгоднее разместить в конце документа, чтобы загрузка не мешала отображению кода HTML.
Описание функции можно располагать в любом месте, главное, чтобы к моменту вызова функции оно уже было загружено в память.
Чтобы код был скрыт от браузеров, не поддерживающих скрипты, его размещают в комментариях HTML. Браузеры без интерпретатора JavaScript в этом случае код не прочтут, а интерпретатору, эти комментарии не помешают.
Если надо скрыть текст и от интерпретатора, размещая не код, а замечания к программе, то такие комментарии надо оформлять по правилам, которые применяются в языках C++ и Java. Таких правил два. Первое -- только для однострочных комментариев, которые начинаются с двух подряд идущих слешей
//для браузеров, не поддерживающих JavaScript
Второе правило заключается в помещении текста в контейнер /* ... */. Причем размещение текста и ограничителей значения не имеет, они могут располагаться на одной или нескольких строках. Вкладывать один комментарий такого рода в другой нельзя.
/* Размещая сценарий внутри комментария HTML, можно скрыть его от браузеров, не поддерживающих JavaScript */
Рассмотрим пример организации обработчика события как функции (пример 1.2).
Здесь функция используется как обработчик события. Ее описание отдельно выносится в основной скрипт и размещается в контейнере <SCRIPT>…</SCRIPT>. Сама по себе эта часть во время прочтения интерпретатором не выполняется, а только находится в памяти. Вызов функции происходит в атрибуте события HTML при назначении обработчика.
Скрипты могут полностью располагаться во внешних файлах. Перепишем предыдущий пример, разместив скрипт во внешнем файле (пример 1.3а).
В строке 7, написанной по стандартам HTML, указано, что источник кода JavaScript располагается в отдельном файле my_script.js (атрибут src = "my_script.js"). Причем файл для данного примера, как видно из адреса, должен находиться в той же папке, но в общем случае может располагаться даже на другом сервере. Содержимое самого элемента HTML <script>, как следует из комментария, игнорируется, если внешний файл загружен. Если по какой-то причине загрузка не произошла, то только тогда выполняется код, заданный внутри элемента.
Файл скрипта (пример 1.3б) содержит только «чистый» код без какого-либо вспомогательного оформления.
2 основы языка javascript
2.1 Введение
Первый скрипт помещает текст на веб-страницу. В данном случае текст будет красного цвета:
<SCRIPT type="text/javascript"> document.write("<FONT COLOR='RED'>Это красный текст</FONT>") </SCRIPT>
Вот из чего состоит скрипт: указывается DOCUMENT (документ HTML) и те изменения, которые в нем произойдут - что-то будет написано (WRITE). То, что будет написано, находится в скобках. DOCUMENT представляет собой object (объект). Слово WRITE (писать), отделенное точкой, называется method (методом объекта). Таким образом, скрипт попросту говорит: «Возьмите объект (что-то, уже существующее) и припишите что-то к нему». Текст в скобках называется instance (примером метода), он передает то, что происходит, когда метод воздействует на объект. Текст в кавычках представляет собой простой HTML - команда <FONT> делает текст красным. Обратите внимание, что дальше идут одинарные кавычки. Если поставить двойные, JavaScript решит, что это конец строки, и получится, что только часть вашего текста будет применена к объекту, а это уже ошибка.
Так значит, JavaScript перекрасил текст в красный цвет? Нет, это сделал HTML, а JavaScript только написал код на странице.
Изменим скрипт так, чтобы вышли две строки текста, красная и синяя (пример 2.1).
Эффект достигается добавлением в скрипт второй строки document.write и изменением кода HTML внутри примера. Еще нужно добавить команду <BR> в конце исходного примера, чтобы текст располагался на двух строках (рис.2.1).
2.2 Дата и время
Из предыдущего примера нам известно, что существует такой объект как документ. Иначе в нем ничего нельзя было бы написать. Далее рассмотрим семь методов объекта: getDay(), getDate(), getMonth(), getYear(), getHour(), getMinute(), и getSecond() (получитьДень, Число, Месяц, Год, Час, Минуту, Секунду). Все они уже существуют, их можно взять и поместить на страницу. Проблема в том, что это всего лишь методы. Для воздействия им нужен объект, а документ для этих целей не годится, поэтому придется самим придумывать новый объект. Рассмотрим следующий скрипт:
<SCRIPT type="text/javascript">
//Скрипт отмечает точную дату и время вашего прибытия на страницу
Now = new Date(); document.write("Сегодня " + Now.getDate()+ "-" + Now.getMonth() + "-" + Now.getFullYear() + ". Вы зашли на мою страницу ровно в: " + Now.getHours() + ":" + Now.getMinutes() + " и " + Now.getSeconds() + " секунд.")
</SCRIPT>
Строка document.write не должна прерываться, она разбита на несколько, чтобы удобнее было читать.
Скрипту дается команда поместить в документ число, месяц, год, часы, минуты и секунды. Все это было создано с помощью метода getЧто-либо(). Начнем с месяца. Как уже говорилось раньше, getMonth() - это метод, отвечающий за месяц. Теперь задумаемся о том, на какой объект воздействует метод getMonth(). Может показаться, что getЧто-либо() - это метод объекта document. Вовсе нет. Метод документа - write. getMonth() на самом деле является методом объекта Date. Взгляните на скрипт еще раз. Date занимает отдельное место в команде:
Now = new Date();
Мы устанавливаем объект, с которым будет работать метод getMonth(). Имея дело с датой и временем, пользуемся той же схемой. Нужно создать объект. Наш объект называется Now (сейчас). Это не имеет значения, если объект получил оригинальное имя, которое больше нигде в JavaScript не встречается. Команда говорит: Now -- это объект, который представляет new Date() (новую Дату). Дата обязательно должна быть новой. Таким способом вы будете получать новую дату каждый раз, когда заходите на страницу или обновляете ее.
У нас есть объект, на который может воздействовать метод getMonth(). Нам нужно напечатать месяц на странице, значит, где-то должна быть команда document.write(). Нам также известно, что текст в скобках будет виден на странице, так давайте напишем все это, следуя логике:
· Сначала пишем <SCRIPT type="text/javascript">.
· Потом вставляем комментарий о том, для чего предназначен скрипт.
· Прежде чем приступить к getMonth(), необходимо создать объект. Убедитесь, что строка заканчивается точкой с запятой.
· Теперь можно вставлять утверждение document.write.
· Текст в скобках после document.write оформляем по правилам:
o Текст, видимый на странице, должен быть окружен двойными кавычками (одинарные кавычки для кода HTML внутри двойных).
o Сочетание текста и команд требует знака + между элементами.
o Объект и метод разделены точкой, так что команда напечатать месяц выглядит так: Now.getMonth().
o Now.getMonth() - это не текст, который должен быть виден на странице, а команда, которая указывает месяц. Поэтому ее не нужно ставить в кавычки.
· Заканчиваем командой </SCRIPT>.
Должно быть, вы заметили, что номер месяца на один меньше, чем нужно. Это потому, что JavaScript любит считать от нуля. Поэтому нужно прибавить 1. Для этого надо ввести несколько переменных, то есть, присвоить имя некоему элементу. Вы присваиваете new Date() имя, как уже делали раньше. Затем присваиваете имя команде, которая вызывает месяц, например, mpo (Месяц Плюс Один), и прибавляете к ней единицу. Эту новую команду я назовем mpo1. Вот как это выглядит:
<SCRIPT LANGUAGE="javascript">
Now = new Date(); var mpo = Now.getMonth(); var mpo1 = mpo + 1 document.write("Сейчас месяц " + mpo1 + "."); </SCRIPT>
Изменим скрипт так, чтобы он помещал на вашу страницу дату, разделенную дробями /. Приветственный текст должен быть зеленого цвета (пример 2.2). Результат выполнения скрипта показан на рис.2.2.
2.3 Команда onMouseOver
Мы обсудили объекты и методы. Теперь приступим к событиям (events). События (event) и обработчики событий (event handler) относятся к JavaScript, но они скорее «встроены» в HTML-код, а не существуют самостоятельно, как те скрипты, которые мы с вами разбирали. Они входят в структуру документа НТМL, не требуя команд <SCRIPT> и </SCRIPT>. Сами они не скрипты, а скорее область взаимодействия между вашей страницей и читателем. События - это то, что происходит. Они добавят динамики вашему сайту. Среди разнообразных обработчиков событий для начала мы выберем один, самый популярный, - onMouseOver (навести мышь).
Рассмотрим скрипт:
<A HREF="http://www.newmail.ru" onMouseOver="window.status='Бесплатный хостинг'; return true">Ссылка</A>
Во-первых, onMouseOver представляет собой обработчик событий (Event Handler) гипертекстовой ссылки. Он используется внутри гиперссылки, формат ссылки остается без изменений. Те же команды и те же двойные кавычки. onMouseOver ставится сразу же после адреса URL. Событие (Event) приводится в действие, когда браузер распознает onMouseOver="". Схема уже должна казаться вам знакомой: два элемента, разделенных точкой. До сих пор это означало, что один является объектом, а другой методом. Но не в этом случае. Объектом является window (окно), оно существует; status (статус) представляет собой property (свойство) окна. Это небольшой участок окна, где должен разместиться следующий текст. Это проще запомнить, если представить, что метод обычно выражается глаголом, как write (писать) или get (получить). Свойство выражается существительным и существует как небольшая часть элемента, стоящего перед точкой. Если у window есть изменяемое свойство status, значит, можно изменить и другие свойства окна.
После window.status следует знак равенства = и то, что должно произойти. В данном случае это текст в одинарных кавычках. Он появится в строке состояния, когда вы наведете курсор на ссылку. Пожалуйста, обратите внимание на точку с запятой в конце строки.
return true - эти два слова имеют не последнее значение. Они дают скрипту указание проверить, есть ли строка состояния. Если отчет (return) соответствует действительности (true), тогда происходит событие. Обратите внимание, что текст в строке состояния уже не изменяется и не изменится, сколько раз вы не наводили бы на нее курсор. Поэтому не нужно злоупотреблять такими трюками -- человек, пришедший к вам на сайт, имеет право знать точный адрес каждой ссылки и другую информацию о загрузке страницы, которую выдает строка состояния.
Другие свойства
Вернемся к свойствам. Если они есть у окна, другие объекты тоже должны иметь свойства. Как насчет цвета фона? В HTML цветом фона страницы управляет команда BGCOLOR. То же самое и здесь, только обязательно соблюдайте регистр. В JavaScript он пишется bgColor. Подумаем, как создать ссылку, которая изменяла бы фон страницы с помощью обработчика onMouseOver.
1. Во-первых, раз это ссылка, то сохраним ту же схему, которой уже пользовались.
2. Что мы меняем окно или документ? Куда идет команда bgColor, когда вы пишете веб-страницу? В документ. Значит, это и есть нужный нам объект. Заменим window на document.
3. Мы собираемся менять фоновый цвет объекта, потому заменим status на bgColor.
4. Больше нам текст не нужен, так что заменим его цветом. Возьмем белый.
5. Нам нужно, чтобы новый цвет оставался независимо от того, сколько раз мы будем наводить курсор на ссылку, потому вставляем return true после точки с запятой.
Вот что у нас получилось:
<a href="http://www.newmail.ru" onMouseOver="document.bgColor='white'; return true">Не щелкать</a>
А если мы хотим и то, и другое?
· Здравый смысл подсказывает, что нужно написать две команды onMouseOver. Попробуем.
· Мы хотим, чтобы два события произошли одновременно, поэтому не будем разделять команды точкой с запятой, так как это означает конец.
· Новое правило: ставьте запятую, чтобы отделить друг от друга разные команды JavaScript, происходящие одновременно.
· Помните, в кавычки ставятся отдельные элементы вроде текста. Раз нам нужно, чтобы обе команды действовали одновременно, ставим кавычки в самом начале первой и в самом конце второй. Таким образом, мы показываем браузеру, что все это одно событие.
· Однако нам еще могут понадобиться одинарные кавычки.
Вернем документу первоначальный цвет.
<a href="http://www.newmail.ru" onMouseOver="document.bgColor='334775', onMouseOver=window.status='Бесплатная почта'; return true">Не щелкать</a>
Полный код страницы приведен в примере 2.3, а результат выполнения скрипта показан на рис.2.3.
документ язык страница web
Метод alert() (предупредить) вызывает небольшое диалоговое окно с текстом и кнопкой OK. В примере 2.4 показано, как сделать, чтобы окно предупреждения всплывало при наведении курсора на ссылку (рис.2.4).
2.4 Еще несколько обработчиков событий
Вы уже представляете себе, что такое некоторые события и команды, которые ими управляют. Давайте рассмотрим, как действуют другие. Все они работают по одной схеме.
Команда onClick (на щелчок)
Вы уже знаете, что onMouseOver запускает событие, если навести курсор на ссылку. Следовательно, щелкнув по ссылке, можно с таким же успехом запустить событие через onClick. Чтобы продемонстрировать действие команды, воспользуемся методом alert (см. пример 2.4). Вот еще раз его схема: alert('текст, который появится в окне')
Таким образом, получаем:
<a href="http://www.newmail.ru" onClick="alert('Уже уходите!');"> Жмите сюда</a>
Команда onFocus (на фокус)
Эта команда вызывает действие, когда пользователь «фокусируется» на элементе страницы. Это годится для форм: флажков (checkbox) и текстовых полей (textbox). Вот пример:
<form> <input type="text" size="30" onFocus="window.status='Текст в строке состояния';"> </form>
Конец формы
Команда onBlur (на потерю фокуса)
Если можно сосредоточиться на объекте, значит, можно и «потерять фокус». оnBlur позволяет сообщить пользователю о том, что он изменил свой ответ. Этот обработчик не так часто используется, но вот вам пример. Строка для ввода текста, в которой уже что-то написано. Если изменить текст и увести курсор, как если бы вы перешли к следующему предмету в списке, появится окно с предупреждением. Вот как это делается:
<form> <input type="text" size="45" value="Впишите свое имя и щелкните по другой строке" onBlur="alert('Вы изменили ответ -- уверены, что он правильный?');"> </form>
Команда onChange (на изменение)
Действие этой команды очень похоже на действие предыдущей, onBlur. Ее главная задача - проверка. Когда мы ближе познакомимся с формами, это станет понятнее. Этот обработчик события проверяет, сделал ли пользователь то, что вы от него просили. Пример очень похож на предыдущий, но действует все-таки по-другому.
<form> <input TYPE="text" size="45" value="Измените текст и щелкните по другой строке" onChange="window.status='Текст был изменен';"> </form>
Конец формы
Команда onSelect (на выделение)
Эта команда работает так же, как и три предыдущие, отмечая, что в поле ввода произошли изменения, -- в данном случае был выделен текст.
Команда onSubmit (на отправку)
Это очень популярная команда. Она позволяет вызвать какое-либо действие, когда вы нажимаете кнопку Submit (отослать, отправить). Многим очень хочется, чтобы после того, как пользователь нажимает на кнопку, у него на экране появлялась страница с надписью: «Спасибо, что вы нам написали». Формат такой:
<form> <input TYPE="submit" onSubmit="parent.location='thanksalot.html'";> </form>
Обратите внимание - у нас новая команда. Схема как будто знакомая, но какая-то странная. parent.location -- это стандартная схема ссылки на другую страницу. Можно подумать, что parent (источник) -- это объект, а location (местонахождение) -- метод. Неверно. В данном случае parent является свойством окна браузера, а location -- объектом, который появится в этом окне.
Рассмотренные выше команды приведены в примере 2.5, а результат на рис. 2.5.
2.5 Запрос пользователю и переменные
Научившись добавлять события к HTML, мы возвращаемся к полным скриптам, поэтому нам снова понадобится стандартный формат от <SCRIPT type="text/javascript> дo </SCRIPT>. Вот что мы собираемся сделать: мы спросим у пользователя, как его зовут, и присвоим этому имени переменную. Как только переменная будет присвоена, мы сможем ввести ее в строку document.write, которая напечатает это имя на странице. Вот скрипт:
<SCRIPT type="text/javascript">
/* Скрипт предназначен для того, чтобы получить от пользователя информацию и поместить ее на страницу */ var user_name = prompt ("Напишите свое имя","Здесь"); document.write("Привет, " + user_name + "! Милости просим!");
</SCRIPT>
Создание переменной
Переменные имеют первостепенное значение в JavaScript. Вам необходимо научиться создавать их. В двух словах: вы назначаете имя, состоящее из одного слова, функции JavaScript. Помните, как мы помещали дату на страницу с помощью метода getDate()? В строке document.write мы написали метод getDate() целиком. Сделать это один раз было не так уж трудно. Но что если нужно было бы написать это десять раз на одной и той же странице? Писать и писать одно и то же порядком надоедает. Потому мы и вводим переменную, которая должна представлять окончательный результат метода. Возьмем, к примеру, переменную d. Тогда нам нужно будет только однажды написать getDate() и назначить методу переменную d. И на протяжении всего оставшегося скрипта будем просто писать d там, где нужно поставить дату. Вернемся к примеру.
Вот строка из скрипта, которая назначает переменную:
var user_name = prompt ("Напишите свое имя","Здесь")
Переменная была создана по следующей схеме:
o var (от variable, переменная) объявляет, что следующим словом будет имя переменной.
o user_name (имя пользователя) -- имя переменной. Ее можно было назвать и N, просто удобнее так называть переменные, чтобы легко было вспомнить, о чем идет речь.
o Помните, что регистр имеет значение для JavaScript, следовательно, если вы назвали переменную Dog, то буква D каждый раз должна быть заглавной, иначе браузер посчитает их за два разных слова.
o Здесь нет никаких кавычек, просто ставьте одно слово за другим, как показано выше.
o Знак равенства = указывает на то, что переменная будет равна результату следующей команды.
o В нашем случае переменная будет представлять результат, полученный с помощью окна запроса.
Команда Prompt
В данном примере мы воспользовались новой командой prompt (запрос). Это метод, вызывающий окно. Вот формат запроса:
var variable_name = prompt("Текст в окне","Текст в строке ввода")
Вы видите, что имя переменной включенo в схему скрипта, иначе вы получили бы запрос, но полученные им данные никуда бы не пошли.
Примечание:
o Чтобы строка ввода оставалась чистой, ничего не пишите между второй парой кавычек.
o Если вы не укажете в скобках второй пары кавычек, в строке появится слово undefined.
o Если вы написали что-либо в строке ввода и пользователь выберет ОК, ничего не меняя, на странице появится то, что вы написали.
o Если в строке ввода ничего нет, и пользователь выберет OK, ничего не вписав, на странице появится слово null.
Вернемся к разбору
Теперь, когда вы знаете все составляющие, перейдем к основной части:
var user_name = prompt ("Напишите свое имя","Здесь"); document.write("Привет, " + user_name + "! Милости просим!");
o Имя переменной user_name присвоено результату запроса.
o prompt просит пользователя написать свое имя.
o В строке ввода читаем: "Здесь."
o Точка с запятой в конце строки.
o document.write вызывает текст "Привет, ".
o Знак плюс + отмечает, что все элементы идут друг за другом.
o user_name вводит результат запроса. Никаких кавычек - эти слова не нужны нам на странице.
o Еще плюс.
o "! Милости просим!" завершает текст.
o Точка с запятой
В примере 2.6 приведен код страницы, которая просит ввести ваше имя и использует его на странице. Обратите внимание на заголовок WEB-страницы, там тоже ваше имя и сегодняшнее число (рис.2.6).
Заголовок создается с помощью команд <title>, написанных в трех строках document.write. Так проще всего отделить команды html от кода JavaScript. Первая строка из трех начинает команду <title>. Вторая создает текстовую строку. Обратите внимание, что видимый текст помещен в двойные кавычки и отделен от команд, отвечающих за дату, знаками плюс. Не забудьте о пробелах. Третья строка document.write завершает команду <title>. Cкрипт помещается перед командой <title>. Имя было вставлено в текст с помощью команды <SCRIPT>document.write(name)</SCRIPT>.
2.6 Создание функции
Создавая переменную, вы присваиваете имя результату команды или события JavaScript. Создавая функцию, вы делаете почти то же самое, только имя присваивается целой серии команд. Множество команд JavaScript вы комбинируете в одну.
Сам скрипт состоит из двух частей: собственно функции и команды onLoad, которая ее запускает. Вот обе части:
<SCRIPT LANGUAGE="javascript">
<!-- Скрыть от браузеров, не читающих Javascript
function dateinbar() { var d = new Date(); var y = d.getFullYear(); var da = d.getDate(); var m = d.getMonth() + 1; var t = da + '/' + m + '/' + y; defaultStatus = "Вы прибыли на страницу " + t + "."; } // не скрывать -->
</SCRIPT>
...и команда onLoad в <BODY>:
<BODY BGCOLOR="хххххх" onLoad="dateinbar()">
Эффект скрипта можно увидеть в строке состояния. Этим же скриптом мы пользовались для получения даты на прошлыx уроках. Сначала первая часть скрипта устанавливает функцию. Потом команда в строке <BODY> ее запускает. Давайте сначала разберем функцию.
Схема довольно понятная. Вы пишете "function" и даете ей любое имя, точно так же, как мы делали с переменными. Оно может быть какой угодно длины, если в нем нет пробелов и это слово уже не участвует в JavaScript. Но обратите внимание, что после имени функции стоят круглые скобки, как и после метода. То есть, создавая функцию, мы как бы создем новый метод для выполнения задачи. На этот раз выберем имя "dateinbar()" (дата в строке состояния), потому что это функция и делает -- помещает дату в строку состояния. Команды, из которых состоит функция, должны быть заключены в фигурные скобки {}.
Текст внутри фигурных скобок должен быть вам уже знаком. Тот же скрипт мы использовали в предыдущем примере - создается переменная для года, еще одна для числа, еще одна для месяца, затем четвертая для даты целиком. Последняя команда новая:
defaultStatus = "Вы прибыли на страницу " + t + ".";
defaultStatus (строка состояния по умолчанию) - свойство объекта window. Его цель - поместить текст в строку состояния внизу окна браузера. Написать просто window.status нельзя, потому что такая схема используется для события, например, с командой onClick. Раз строка состояния не находится внутри команды HTML, берем defaultStatus.
Команда "onLoad="
Это новый обработчик. Команда onLoad (на вход, загрузку) говорит браузеру, что, загружая страницу, он должен выполнить следующее. В нашем случае следует функция dateinbar{}. Эта команда почти всегда располагается в строке <BODY> документа HTML. И почти всегда за ней следует функция, но это необязательно. Можно с таким же успехом поместить туда и команду объект.метод.
Расположение элементов
Это имеет не последнее значение. Вы знаете, что onLoad идет в строке BODY. Скрипт с функцией должен находиться между командами <HEAD> и </HEAD>. Хотя на самом деле его можно поместить где угодно, но если вы расположите его после команды onLoad, он заработает только после того, как загрузится вся страница. Поместив скрипт перед командой onLoad, вы помещаете его в память компьютера, и когда onLoad вызовет его, он будет готов к работе.
Практически любой набор команд JavaScript можно записать в виде функции. В следующем примере 2.7 создается функция, которая вызывает два запроса (prompt). Первый просит пользователя ввести свое имя, второй - отчество. Затем та же функция вызвает окно предупреждения (alert) c текстом: Привет, имя отчество. Добро пожаловать на мою замечательную страницу по адресу: адрес страницы! (рис.2.7).
Нужны две команды prompt, одна сразу за другой. Затем какая-либо переменная, которая напечатала бы название страницы (например, «Моя замечательная страница»). Для этого это, нужно поместить текст в заголовок и создать переменную для команды document.title. Затем нужно создать переменную для document.location. Все это затем вставить в команду alert. Все это должно содержаться в функции, а функция должна запускаться командой onLoad в строке BODY. Название функции - hello().
2.7 Команды onUnload и onMouseOut
Это два последних обработчика событий, которые вы должны иметь в своем арсенале: onMouseOut и onUnload. onMouseOver вызывает некое событие, если навести мышь, к примеру, на ссылку. В противоположность ей onMouseOut начинает действовать, если курсор увести со ссылки. Вы также знаете, что команда onLoad запускает скрипт, когда страница загружается. Команда onUnload действует, когда пользователь уходит со страницы.
С мышью:
<A HREF="les10.htm" onMouseOver="window.status='Эй! Убирайся с меня!'; return true" onMouseOut="window.status='Так-то лучше, спасибо'; return true"> Наведите курсор на эту ссылку и уведите обратно</A>
При уходе со страницы:
<BODY onUnload="alert('Уже уходите?')">
Поместив курсор на ссылку и обратно несколько раз, можно увидеть в строке состояния первый эффект. Нажав на ссылку, можно увидеть второй.
Эффекты с мышью, как вы уже догадались, создаются с помощью команд onMouseOver и onMouseOut. Обратите внимание, что между ними ощутимая разница. Вам не нужно, чтобы эти события происходили одновременно. Следовательно, нужно писать их как две абсолютно разные команды, каждая из которых содержит свою команду return true.
Чтобы получить эффект при уходе со страницы, добавляем команду onUnload="alert('Уже уходите?')" в строку BODY. Обратите внимание на двойные и одинарные кавычки. Внутри двойных - одинарные. Вторая пара двойных кавычек означает для браузера конец команды.
Рассмотренные выше команды приведены в примере 2.8, а результат на рис. 2.8.
2.8 Новые окна
Сначала мы рассмотрим, как через команды Javascript открыть новый документ HTML в другом окне. Это делает скрипт
<SCRIPT LANGUAGE="javascript">
window.open('opened.html', 'joe', config='height=300,width=300') self.name="main window"
</SCRIPT>
Расположение на странице
Если вы собираетесь открывать новое окно, ставьте скрипт ближе к концу документа. Проще говоря, пусть он идет в последнюю очередь. Причина простая: сначала загрузится страница, а потом всплывет окошко. Если команда стоит в начале, то окошко всплывет прежде, чем пользователь увидит вашу страницу. Скорее всего он закроет новое окно, не успев им воспользоваться.
window.open
Нельзя сказать яснее, чем это: window (окно) - объект, a open (открыть) - метод, который на него воздействует.
Конфигурация нового окна
Информация об этом находится в круглых скобках (это называется примером) Вот схема, которой нужно следовать: ('URL документа в новом окне', 'Название нового окна', config='параметры нового окна').
В примере: ('opened.html','joe',config='height=300,width=300'),
o opened.html - это URL страницы, которая появится в новом окне. Если страница располагается на другом сервере, то добавьте http:// и так далее.
o joe - название нового окна.
o config= указывает, что следующие команды относятся к конфигурации нового окна.
Обратите внимание, что команды height (высота) и width (ширина) разделены только запятой без пробелов, а значения поставлены в одинарные кавычки, так как эти два элемента являются подкомандами config. Пробел для браузера означает конец команды. Есть множество подкоманд для команды config. Про высоту и ширину вы уже знаете, они определяются в пикселях. Остальные подкоманды употребляются со словами «yes» или «no» в зависимости от того, нужны ли в новом окне эти элементы. (Можно ставить «1» вместо «да» и «0» вместо «нет».) Помните, никаких пробелов между подкомандами и одинарные кавычки.
o toolbar= отвечает за наличие панели инструментов c кнопками НАЗАД, ВПЕРЕД, СТОП и т.д.
o menubar= отвечает за наличие строки меню с элементами ФАЙЛ, ПРАВКА, ВИД и т.д.
o scrollbars= отвечает за наличие полосы прокрутки.
o resizable= указывает, сможет ли пользователь изменить размер окна по своему желанию. Лучше не ставить здесь «нет», если только это не художественная инсталляция.
o location= отвечает за наличие адресной строки, где виден URL страницы.
o status= отвечает за наличие строки состояния.
От строки с заголовком вы не избавитесь никогда, хотите вы этого или нет.
Тэги в новом окне
Во всплывающем новом окне есть две ссылки. Первая открывает домашнюю страницу HTML Goodies в главном окне. Вот как это делается:
<A HREF="http://www.htmlgoodies.com" TARGET="main window"></A>
У большого окна есть имя, «main window» (главное). Вот почему я называл его главным на протяжении всего урока. В скрипте это обозначено строкой self.name="main window". Добавляем в ссылку HREF TARGET= (цель) и указание на main window.
Если надо, чтобы страница загружалась в маленьком окошке (оно называется «joe»), просто нужно написать «joe» после команды TARGET.
С помощью многократных команд window.open можно вызывать многократные окна. Только следите за тем, чтобы у каждого нового окна было свое имя. Можете связывать окна ссылками при условии, что правильно указываете имена окон в команде target.
Закрыть окно
Вторая ссылка нового окна закрывает его. Вот как это сделано:
<A HREF="" onClick="self.close">Щелкните, чтобы закрыть</A>
Это обычная ссылка HREF, которая никуда не ведет. Команда onClick="self.close" закрывает окно и никуда не ведет. self (само, себя) - это свойство может относиться к любому объекту. В нашем случае это свойство окна. Команда close (закрыть) закрывает окно.
Еще кое-что
Допустим, вы хотите открыть окно по команде, а не когда пользователь заходит на страницу. Вот как это можно сделать:
<A HREF="les11.htm" onClick="window.open('opened.html', 'joe', config='height=300,width=300')">Щелкните, чтобы открыть 'joe'</A>
Это ссылка HREF, которая направлена на себя. Команда onClick делает работу, а параметры содержатся в скобках().
Рассмотренные выше команды приведены в примере 2.9, а результат выполнения на рис. 2.9.
2.9 Новые окна через функцию
В предыдущем примере мы открывали окно с помощью команды window.open. Окно заполнялось другим документом HTML, который мы указывали в скобках.
Сейчас мы попробуем создать функцию, которая откроет новое окно, причем и новое окно, и все его содержимое будет вписано в тот же документ HTML. То есть в буквальном смысле слова мы вложим две страницы в одну.
Это делает скрипт
<SCRIPT type="text/javascript"> function openindex() { var OpenWindow=window.open("", "newwin", "height=300,width=300"); OpenWindow.document.write("<HTML>") OpenWindow.document.write("<TITLE>Новое окно</TITLE>") OpenWindow.document.write("<BODY BGCOLOR='white'>") OpenWindow.document.write("<CENTER>") OpenWindow.document.write("<font size=+1>Новое окно</font><P>") OpenWindow.document.write("<a href= 'http://newmail.ru' target='main window'> Эта ссылка<BR>откроется в главном окне</a><p>") OpenWindow.document.write("<P><HR><P>") OpenWindow.document.write("<a href='' onClick='self.close()'> Эта закроет окно</a><p>") OpenWindow.document.write("</CENTER>") OpenWindow.document.write("</HTML>") self.name="main window" } </SCRIPT>
...и в строке BODY:
onLoad="openindex()"
Помните, текст в скобках должен находиться на одной строке.
Главная часть скрипта, содержащая функцию, помещается между командами <HEAD> и </HEAD>, как большинство функций.
По самой обычной схеме функция получает имя openindex(). Теперь подходим к основному моменту. Создаем переменную OpenWindow, под которой скрывается команда window.open(). Вот так:
var OpenWindow=window.open("", "newwin", "height=300,width=300');
Так же было в прошлом примере. Единственная разница в том, что вы не указываете URL. Видите пустые парные кавычки? Они говорят браузеру, что он должен искать информацию о новом окне. То же самое, что и не ставить URL в ссылку, которая закрывает окно. Оно бы не закрылось, если бы начала загружаться новая страница. Точно так же и тут. Браузер стал бы загружать новую страницу, а не выполнять скрипт.
Теперь начинаем писать страницу HTML, которая будет внутри нового окна. Вот первая строка текста:
OpenWindow.document.write("<HTML>")
Переменная OpenWindow (то есть новое окно) говорит, что этот текст должен быть вписан в документ.
Взгляните на скрипт. Каждая новая строка следует той же схеме. Можно написать сотню строк, создающих законченную страницу.
Помните: когда вы пишете HTML внутри команды document.write, вместо двойных кавычек с подкомандами ставьте одинарные. Иначе будут проблемы.
Наконец командой onLoad в строке BODY запускается функция.
Рассмотренный выше скрипт, к которому добавлен скрипт, вызывающий то же окно с помощью кнопки, приведен в примере 2.10, а результат выполнения на рис. 2.10.
2.10 Метод confirm (введение в if и else)
Команда confirm (подтвердить) действует очень похоже на alert, за исключением того, что добавляет кнопку «Отмена» в диалоговое окно. И то, и другое - методы.
Одна команда сама по себе многого не дает. Нет никакой разницы, что вы выбираете - «ОК» или «ОТМЕНА». Но стоит добавить функции IF (если) и ELSE (иначе), и готовы отличные эффекты. Скрипт:
<SCRIPT type="text/javascript">
confirm("Уверены, что хотите войти?")
</SCRIPT>
То же самое, что и alert, кроме слова confirm. Но вот вам та же команда с некоторыми добавлениями:
<SCRIPT type="text/javascript">
if (confirm("Уверены, что хотите на прошлый урок?") )
{ parent.location='http://www.jsp.newmail.ru/les12.htm'; alert("Счастливого пути"); } else { alert("Tогда оставайтесь"); } </SCRIPT>
На этот раз, если нажмете «OK», то пойдете по ссылке, а если щелкнете по «Отмене», то останетесь. Разберемся, как это делается.
Во-первых, скрипт говорит:
if (confirm("Вы уверены, что хотите пойти на прошлый урок?") )
Это значит Если (Здесь ваш шанс сделать выбор)
В нашем случае сonfirm предлагает альтернативу: «OK» и «Отмена». Можно сказать, Да и Нет. Обратите внимание на скобки. После команды IF всегда идут скобки, но, как известно, команды сonfirm тоже требует скобок. Следовательно, берем две пары скобок, одна внутри другой.
Сразу же после этого идут команды, выполняемые при каждом варианте ответа. Обратите внимание на фигурные скобки{}. Ведь в действительности это функции. Первая из них показывает, что должно произойти, если пользователь выберет ОК (или Да).
{ parent.location='http://www.jsp.newmail.ru/les12.htm'; alert("Счастливого пути"); }
Если помните, parent.location означает ссылку. Дальше идет обыкновенная команда alert. Не забудьте про точки с запятой в конце строк.
А что если выбрать отмену? Мы уже знаем, что если выбрать ОК, запускается функция IF (если). Отмена - другой выбор. Видите, сразу после фигурной скобки идет команда ELSE (иначе), как бы «если нет». И тогда следующий текст...
else { alert("Tогда оставайтесь"); }
...означает: если нет, тогда вызвать окно и не менять страницу.
Все это вместе и дает пользователю возможность выбора: входить или не входить.
Это самые основы использования IF и ELSE. Позже команде IF мы посвятим целый урок.
В примере 2.11 рассмотренный выше скрипт преобразован в функцию и сделано так, чтобы при отмене, кроме окна, еще появляется надпись в строке состояния (рис.2.11).
2.11 Смена картинки через onMouseOver
Вспомним обработчики событий onMouseOver и onMouseOut. Мы уже делали нечто похожее - с помощью этих команд появлялся текст в строке состояния. Еще раз обратите внимание, что не требуются тэги <SCRIPT> и </SCRIPT>. Обработчики событий onMouseOver и onMouseOut встраиваются в команду HTML <A HREF>. Скрипт:
<a href="http://nonags.online.ru/main.html"
onMouseOver="document.pic1.src='a.gif'" onMouseOut="document.pic1.src='b.gif'">
<IMG SRC="b.gif" BORDER=0 NAME="pic1"></a>
Вы уже знаете о событиях достаточно, чтобы разобрать скрипт. Когда убираете курсор с картинки, появляется b.gif. Когда наводите на картинку, появляется а.gif.
Обратите внимание, что команда IMG связана с обработчиками onMouse в команде HREF через команду NAME="pic1". Не имеет значения, сколько изображений у вас на странице и в каком порядке они располагаются, если вы присвоили отдельное имя каждой нужной картинке.
o onMouseOver и onMouseOut различают регистр. Нельзя менять заглавные и строчные буквы.
o Так как необходимо ставить кавычки после onMouseOver= и onMouseOut=, название файла *.gif ставится в одинарные кавычки.
o document.pic1.src следует иерархии объектов. Document относится к объекту документ, a pic1 - это имя объекта изображение (имя можно придумать какое угодно). src (источник) - это свойство объекта изображение, которое указывает файл с картинкой.
o В этом примере onMouseOver меняет источник изображения на а.gif.
o ОnMouseOut заставляет объект изображение показывать b.gif.
o Имейте в виду, что для наилучшего эффекта картинки должны быть одинакового размера.
Рассмотренные выше команды приведены в примере 2.12, а результат выполнения на рис. 2.12.
2.12 Смена картинок через функции
Вот еще один пример использования onMouseOver и onMouseOut. На этот раз обработчики событий onMouseOver и onMouseOut вызывают функцию. Когда вам нужна только одна команда JavaScript, можно включить ее целиком в <A HREF>. Для многократного повторения больше подходит функция.
Функции выполняют то же, что и команды в прошлом примере. Помните иерархию объектов: сначала документ, потом имя, присвоенное объекту и наконец SRC. Функции названы up() и down().
function up() { document.mypic.src="up.gif" } function down() { document.mypic.src="down.gif" }
Схема практически та же, что и в прошлом примере:
<A HREF=http://www.newmail.ru onMouseOver="up()" onMouseOut="down()"> <IMG SRC="down.gif" NAME="mypic" BORDER=0></A>
Обычно функция используется для многократных повторений. Если вы решите использовать многократные смены картинок с помощью JavaScript, помните, что каждый раз нужно давать функции и изображению новое имя. Например, вы хотите поместить на страницу еще один такой же скрипт. Для этого создаем новую функцию, копируя предыдущую и добавляя к ее названию цифру 2. Затем меняем имя рисунка на mypic2. Не забудьте поменять его и в строке img src="*.gif". Получаем следующее:
<SCRIPT LANGUAGE="JavaScript"> function up() { document.mypic.src="up.gif" } function down() { document.mypic.src="down.gif" } function up2() { document.mypic2.src="up.gif" } function down2() { document.mypic2.src="down.gif" } </SCRIPT>
...и две разные картинки:
<A HREF=http://www.newmail.ru onMouseOver="up()" onMouseOut="down()"> <IMG SRC="down.gif" NAME="mypic" BORDER=0></A> <a href=http://www.newmail.ru onMouseOver="up2()" onMouseOut="down2()"> <IMG SRC="down.gif" NAME="mypic2" BORDER=0></A>
Видите, как новые функции связаны с новыми именами, делайте это каждый раз при добавлении новой картинки.
Рассмотренные выше команды приведены в примере 2.13. Если быстро водить мышью туда-сюда, кенгуру как будто подпрыгивает (рис.2.13).
2.13 Функция внутри формы
Очень часто JavaScript используется в формах. Следующий скрипт через форму позволяет выбрать цвет фона.
Формы всегда начинаются командой <FORM> и заканчиваются командой </FORM>. Вот скрипт и форма:
function newcolor(color) { alert("Вы выбрали " + color) document.bgColor=color } <FORM> <INPUT TYPE="button" VALUE="Голубой" onClick="newcolor('lightblue')"> <INPUT TYPE="button" VALUE="Розовый" onClick="newcolor('pink')"> <INPUT TYPE="button" VALUE="Вернуть" onClick="newcolor('white')"> </FORM>
o Обратите внимание, мы передаем в функцию newcolor() (новый цвет) неизменяемую строку текста, стоящую в скобках ('lightblue'). Она находится в одинарных кавычках, потому что имя функции стоит в двойных.
o Когда вы нажимаете кнопку, строка в скобках передается в функцию newcolor().
o Функция ждет, пока поступит необходимая ей информация. Во всех функциях до сих пор скобки были пустые потому, что у них были все необходимые данные. В данном случае дополнительная информация поступает в функцию, когда пользователь нажимает на кнопку. Кнопка содержит ту же функцию, только теперь у нее есть необходимые данные, то есть цвет. Форма передает цвет двум элементам в разделе <SCRIPT>: методу alert и строке document.bgColor. Получив все данные, функция вступает в действие: всплывает окно и меняется цвет фона.
o Не запутайтесь: VALUE (значение) в команде INPUT не является свойством JavaScript, она помещает текст на кнопку.
Рассмотренные выше команды приведены в примере 2.14, а результат выполнения на рис. 2.14.
2.14 Поля форм и свойство value
Продолжим начатое в предыдущем примере - будем передавать в функцию данные, которые пользователь введет в поле формы. Затем эти данные будут использованы для поиска в Yahoo. Скрипт и форма:
<SCRIPT type="text/javascript"> function Gofindit() { var search = document.formsearch.find.value; { var searchUrl = "http://av.yahoo.com/bin/query?p=" + search; location.href = searchUrl;}} </SCRIPT>
<FORM NAME="formsearch">Найдите в Yahoo: <INPUT NAME="find" SIZE="40" TYPE="text"> <INPUT TYPE="button" VALUE="Искать" onClick="Gofindit()"> </FORM>
От вас снова потребуется четкое понимание иерархии объектов.
o Во-первых, создаем функцию с переменной search(искать), которая будет результатом чего-то, происходящего в объекте document, под названием formsearch, внутри элемента find (найти), который обладает свойством value(значение).
o Вторую функцию помещаем внутри первой. Видите вторую пару {фигурных скобок}?
o Для второй функции создаем еще одну переменную searchUrl, представляющую собой адрес поисковой машины Yahoo плюс значение переменной search, полученное через команду document.formsearch.find.value.
o Наконец, location.href приравнивается к переменной searchUrl. После выполнения функции пользователь попадет на итоговую страницу.
o Теперь переходим к командам формы. Их две: текстовое поле, куда пользователь вводит свой запрос, и кнопка, запускающая функцию.
o Обратите внимание, что форма в целом получила имя formsearch. Помните, что мы говорили об иерархии объектов?
o Затем называем текстовое поле find. Опять иерархия. Видите, как мы идем от большого к малому?
o Дальше соединяем кнопку с командой onClick, которая запускает функцию.
o Наконец заканчиваем командой </FORM>. Готово.
В примере 2.15 приведен рассмотренный выше скрипт, измененный так, чтобы использовалась поисковая система Яndex, а при подаче запроса выскакивало окошко с надписью «Сейчас поищем...». Результат приведен на рис.2.15.
2.15 Передача данных в функцию
Продолжим рассматривать взаимодействие форм и JavaScript. Скрипт:
<SCRIPT type="text/javascript"> function doit() { alert("document.myform.fname.value -- это " + document.myform.fname.value) var greeting="Привет, " alert(greeting + document.myform.fname.value + " " + document.myform.lname.value) alert("Количество букв в имени " + document.myform.fname.value.length) } </SCRIPT> …и форма:
<FORM NAME="myform"> Ваше имя: <INPUT TYPE="text" NAME="fname"><p> Ваша фамилия: <INPUT TYPE="text" NAME="lname"><p> <INPUT TYPE="button" VALUE="Отправить" onClick="doit()"> </FORM> </BODY> </HTML>
Разбор скрипта начнем с элементов формы:
<FORM NAME="myform"> Ваше имя: <INPUT TYPE="text" NAME="fname"><p> Ваша фамилия: <INPUT TYPE="text" NAME="lname"><p> <INPUT TYPE="button" VALUE="Отправить" onClick="doit()"> </FORM>
Видите, мы дали форме имя myform. Поле ввода для имени пользователя названо fname, а поле для фамилии - lname. Теперь у каждого элемента есть имя.
Данные, которые введет пользователь, станут значением (value) соответствующих текстовых полей. Тому, что написано в поле fname, будет присвоено имя fname.
Когда пользователь нажмет на кнопку (обработчик события onClick), запустится функция doit().
Теперь посмотрим на функцию:
function doit() { alert("document.myform.fname.value -- это " + document.myform.fname.value) var greeting="Привет, " alert(greeting + document.myform.fname.value + " " + document.myform.lname.value) alert("Количество букв в имени " + document.myform.fname.value.length) }
Такой передачи данных, как на предыдущих уроках, не происходит - в скобках функции doit() ничего нет. Но по иерархическим командам понятно, что функция вызывает данные, введенные в форму.
Мы тщательно следуем иерархии объектов: за объектом документ следует объект форма (на него указывает имя формы, myform), за ним следует объект поле формы (на него указывает имя поля, fname), за ним следует свойство значение (value). Без свойства value данные, переданные пользователем, не попали бы в иерархическую команду.
Дальше переменная greeting (приветствие). Приветствие показано в команде alert(greeting).
Когда пользователь нажимает на кнопку, всплывает окно с его именем.
Второе окно включает в себя переменную greeting. Появляется надпись: «Привет, (имя) (фамилия)», составленная с помощью данных, полученных через форму. Еще раз обратите внимание на value.
Наконец всплывает третье окно с неким текстом и вызывает следующее: document.myform.fname.value.length. Это команда, которая передает длину (length) слова, введенного в поле формы. Если fname содержит «Коля», то длина равна 4. Команда length следует за value. Таким образом, она точно сосчитает буквы в тексте, а не что-нибудь другое. length -- это тоже свойство.
Рассмотренные выше команды приведены в примере 2.16, а результат выполнения на рис. 2.16.
Подобные документы
Базовый синтаксис языка сценариев JavaScript. Создание страниц, включающих в себя программы, которые взаимодействуют с пользователем, управляют браузером и динамически создают HTML-содержимое. Работа с объектами, которые инкапсулируют данные и поведение.
лабораторная работа [58,6 K], добавлен 25.05.2016Создание web-страниц с использованием языка HTML. Работа с графикой в Adobe Photoshop и Flash CS. Создание динамических web-страниц с использованием JavaScript и PHP. Базы данных и PHP. Пример реализации "Эконометрической модели экономики России" под WEB.
презентация [432,3 K], добавлен 25.09.2013Создание web-страниц с использованием HTML. Работа с графикой в Adobe Photoshop и Flash. Создание динамических web-страниц с использованием JavaScript. Пример реализации "Эконометрической модели экономики России". Моделирование с использованием Powersim.
презентация [478,4 K], добавлен 25.09.2013Основы компьютерного моделирования с использованием Powersim и AnyLogic. Создание WEB страниц с использованием HTML. Работа с графикой в Adobe Photoshop и Flash CS. Создание динамических WEB страниц с использованием JavaScript и PHP. Базы данных и PHP.
лекция [1,1 M], добавлен 25.09.2013Введение в интернет-технологии и компьютерное моделирование. Создание WEB страниц с использованием HTML. Создание динамических WEB страниц с использованием JavaScript. Работа с графикой в Adobe Photoshop и Flash CS. Основы компьютерного моделирования.
презентация [223,4 K], добавлен 25.09.2013История html. Гипертекст. Структура web-страницы. Переход внутри одного документа. Переход к другому документу. Правила синтаксиса. Кодирование символов. Использование символов. Управление цветом. Конструктор документов. Способы определения таблиц стилей.
дипломная работа [911,3 K], добавлен 25.02.2005Характеристика принципов создания html-страниц и связывания их ссылками так, чтобы можно было произвольным образом переходить от одной страницы к другой. Применение тегов форматирования текста и заголовка окна. Этапы создания html-страницы с таблицей.
контрольная работа [16,0 K], добавлен 19.06.2014Знакомство с особенностями создания WEB-страниц с использованием HTML. Общая характеристика основ компьютерного моделирования с применением Powersim и AnyLogic. Анализ способов создания динамических WEB-страниц с использованием JavaScript и PHP.
презентация [801,7 K], добавлен 25.09.2013Язык маркировки гипертекстов HTML, основа создания web-страниц. История спецификаций, каскадные таблицы стилей CSS. Способы определения таблиц стилей (стилевого шаблона). Язык подготовки сценариев JavaScript, его использование. Программный код web сайта.
курсовая работа [26,9 K], добавлен 05.07.2009Преимущества использования Word при создании веб-страниц. Его публикация Word в библиотеке документов. Преобразование документа Word в веб-страницу. Функции HTML-конвертора Word97. Пересмотр документа Word и веб-страницы. Отображение закладок в документе.
реферат [23,6 K], добавлен 06.04.2010
