МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
ЮЖНО–РОССИЙСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ УНИВЕPСИТЕТ
(НОВОЧЕРКАССКИЙ ПОЛИТЕХНИЧЕСКИЙ ИНСТИТУТ)
ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ
-
Методические указания
к лабораторным работам
Часть 1
Скрипты на JavaScript и PHP
Новочеркасск
ЮРГТУ (НПИ)
2010
УДК 519. 6(0765)
Рецензент доктор тех. наук проф. кафедры «Автоматизированные системы управления» А. А. Михайлов
Составители: Коваленко Г. М., Зуев В. А, Стребуляев А.А.
Информационные технологии : методические указания к лабораторным работам. Ч.1. Скрипты на JavaScript и PHP / Юж.− Рос. гос. техн. ун−т.−Новочеркасск: ЮРГТУ (НПИ) 2010.−36 с.
Рассматриваются вопросы, связанные с изучением технологии организации современных информационных систем и основ программирования на языках JavaScript и PHP. Предназначены для студентов специальностей 071900 «Информационные системы и технологии.
Южно−Российский государственный технический университет, 2010
Коваленко Г. М.,Зуев В. А.,
Стребуляев А.А., 2010
Лабораторные работы по курсу «Информационные технологии» проводятся для обеспечения углубленного изучения лекционного материала. В ходе лабораторных работ студенты должны изучить технологии организации современных информационных систем. Лабораторные работы выполняются с использованием современных интегрированных систем JavaScript, Java и HTML.
Лабораторная работа №1
Размещение кодов JavaScript на HTML−странице
Цель работы: изучение скрипт– программ, методов, функций и способов их запуска на HTML странице
Программа работы
1. Изучение теоретического материала.
2. Разработка скрипт− программ согласно варианта
3. Отладка скрипт− программ.
Пояснения к работе
JavaScript − язык для составления скриптов, разработанный фирмой Netscape. С помощью JavaScript создаются интерактивные Web−страницы.
Чтобы запускать скрипты, написанные на языке JavaScript, необходим браузер, способный работать с JavaScript ,например, Internet Explorer .
Скрипт− это программа, которая размещается непосредственно на HTML странице, как правило внутри тега HTML файла, она загружается в браузер вместе с файлом.
JavaScript может быть внедрен в HTML документе двумя способами:
как утверждение и функция, использующие тег SCRIPT;
как обработчики результата, использующие тег HTML.
Сценарий, внедренный в web−страничу, использующий тег SCRIPT имеет следующий формат:
<SCRIPT LANGUAGE="JavaScript"> JavaScript операторы </SCRIPT>
В документе HMTL теги <SCRIPT> и закрывающий тег </SCRIPT> могут содержать любое количество утверждений JavaScript.
Пример скрипт− программы, расположенной на сторанице HTML:
<html>
<body>
<br>
Это HTML документ.
<br>
<script language="JavaScript">
document.write("Это JavaScript!")
</script>
<br>
Документ HTML.
</body>
</html>Пример напоминает обычный файл HTML. Единственное новшество− это конструкция:
<script language="JavaScript">
document.write("Это JavaScript!")
</script>
В результате выполнения этого файла будет 3 строки:
Это HTML документ.
Это JavaScript!
Вновь документ HTML.
События. События и обработчики событий являются очень важной частью для программирования на языке JavaScript. События инициируются теми или иными действиями пользователя. Если он щелкает по некоторой кнопке, происходит событие "Click". Если указатель мыши пересекает какую− либо ссылку гипертекста − происходит событие MouseOver. Существует несколько различных типов событий. JavaScript−программы могут реагировать на некоторые из них. И это может быть выполнено с помощью специальных программ обработки событий. В результате щелчка по кнопке может создаваться выпадающее окно. Это означает, что создание окна должно быть реакцией на событие щелка − Click. Программа– обработчик событий, которую используют в данном случае, называется onClick. И она сообщает компьютеру, что нужно делать, если произойдет данное событие.
Пример программы обработки события onClick:
<form>
<input type="button" value="Click me" onClick="alert('Привет')">
</form>
Данный пример имеет несколько новых особенностей. Создается некая форма с кнопкой . Первая новая особенность – onClick = "alert ('Привет')" в тэге <input>. Этот атрибут определяет, что происходит, когда нажимают на кнопку. Таким образом, если имеет место событие Click, компьютер должен выполнить вызов alert('Привет').
Функция alert() позволяет создавать выпадающие окна. При ее вызове в скобках задается некая строка (Привет). Этот текст появится в выпадающем окне.
Еще одна особенность данного примера: в команде document.write() используются двойные кавычки ("), а в конструкции alert() − одинарные. В большинстве случаев можно использовать оба типа кавычек. Однако в последнем примере ( onClick="alert('Yo')") используются и двойные, и одинарные кавычки. Поэтому в данном случае перемежаются оба типа кавычек. Не имеет значения, в каком порядке их использовать.
Функции. В большинстве программ на языке JavaScript используются функции. Чаще всего функции представляют собой способ связать вместе нескольких команд.
Пример
<html>
<script language="JavaScript">
<!−− hide
function myFunction() {
document.write("Добро пожаловать!<br>");
document.write("Это JavaScript!<br>");
}
myFunction();
myFunction();
myFunction();
// −−>
</script>
</html>В этом скрипте определена функция, состоящая из следующих строк:
function myFunction() {
document.write("Добро пожаловать на мою страницу!<br>");
document.write("Это JavaScript!<br>");
}Все команды скрипта, что находятся внутри фигурных скобок − {}−, принадлежат функции myFunction().
Функции могут также использоваться совместно с процедурами обработки событий. Рассмотрим следующий пример:
<html>
<head>
<script language="JavaScript">
<!−− hide
function calculation() {
var x= 12;
var y= 5;
var result= x + y;
alert(result);
}
// −−>
</script>
</head>
<body>
<form>
<input type="button" value="Вычислить" onClick="calculation()">
</form>
</body>
</html>При нажатии на кнопку осуществляется вызов функции calculation(). Эта функция выполняет вычисления, пользуясь переменными x, y и result.
Создание окон. JavaScript позволяет открывать новые окона в браузере. В новое окно можно загружать новые документы (например, документы HTML), либо создавать новые материалы. Откроем новое окно, загрузим в это окно HTML−страницу и закроем окно.
Пример. Скрипт открывает новое окно браузера и загружает в него некую web−страничку:
<html>
<head>
<script language="JavaScript">
<!−− hide
function openWin() {
myWin= open("bla.htm");
}
// −−>
</script>
</head>
<body>
<form>
<input type="button" value="Открыть новое окно" onClick="openWin()">
</form>
</body>
</html>
В примере в новое окно с помощью метода open() записывается страница bla.htm. Можно задать размер окна. Например, в следующем скрипте открывается новое окно размером 400x300 пикселов. Оно не имеет ни строки статуса, ни панели инструментов, ни меню:
<html>
<head>
<script language="JavaScript">
<!−− hide
function openWin2() {
myWin= open("bla.htm", "displayWindow",
"width=400,height=300,status=no,toolbar=no,menubar=no");
}
// −−>
</script>
</head>
<body>
<form>
<input type="button" value="Открыть новое окно" onClick="openWin2()">
</form>
</body>
</html>Свойства окна формируются в строке "width=400,height=300,status=no,toolbar=no,menubar=no".
Список свойств окна, которыми можно управлять:
|
directories |
yes|no |
|
height |
количество пикселов |
|
location |
yes|no |
|
menubar |
yes|no |
|
resizable |
yes|no |
|
scrollbars |
yes|no |
|
status |
yes|no |
|
toolbar |
yes|no |
|
width |
количество пикселов |
Имя окна. При открытии окна используются три аргумента:
myWin= open("bla.htm", "displayWindow",
"width=400,height=300,status=no,toolbar=no,menubar=no");Второй аргумент− это имя окна. Если знать имя окна, то можно загрузить туда новую страницу с помощью записи
<a href="bla.html" target="displayWindow">
При этом необходимо указать имя соответствующего окна (если же такого окна не существует, то с этим именем будет создано новое). myWin − это не имя окна, но с помощью этой переменной можно получить доступ к окну. И поскольку это обычная переменная, то область ее действия − лишь тот скрипт, в котором она определена. Имя окна ( displayWindow) − уникальный идентификатор, которым можно пользоваться с любого из окон браузера.
Закрытие окон .Чтобы закрывать окна используется метод close():.
<html>
<script language="JavaScript">
<!−− hide
function closeIt() {
close();
}
// −−>
</script>
<center>
<form>
<input type=button value="Close it" onClick="closeIt()">
</form>
</center>
</html>Если теперь в новом окне нажать кнопку, то оно будет закрыто.open() и close() − это методы объекта window следует писать не просто open() и close(), а window.open() и window.close(). Однако в данном случае объект window можно опустить − нет необходимости писать префикс window, если всего лишь вызывается один из методов этого объекта (и такое возможно только для этого объекта).
Динамическое создание документов. Можно разрешить скрипту на языке JavaScript самому создавать новые HTML−страницы. Можно таким же образом создавать и другие документы Web, такие как VRML−сцены и т.д. Для удобства можно размещать эти документы в отдельном окне или фрейме.
Рассмотрим следующий скрипт:
<html>
<head>
<script language="JavaScript">
<!−− hide
function openWin3() {
myWin= open("", "displayWindow",
"width=500,height=400,status=yes,toolbar=yes,menubar=yes");
// открыть объект document для последующей печати
myWin.document.open();
// генерировать новый документ
myWin.document.write("<html><head><title>On−the−fly");
myWin.document.write("</title></head><body>");
myWin.document.write("<center><font size=+3>");
myWin.document.write("This HTML−document has been created ");
myWin.document.write("with the help of JavaScript!");
myWin.document.write("</font></center>");
myWin.document.write("</body></html>");
// закрыть документ − (но не окно!)
myWin.document.close();
}
// −−>
</script>
</head>
<body>
<form>
<input type=button value="On−the−fly" onClick="openWin3()">
</form>
</body>
</html>Рассмотрим функцию winOpen3 (). Сначала открываеся новое окно браузера. Поскольку первый аргумент функции open() − пустая строка (""), то это значит, в данном случае не указывается конкретный адрес URL. JavaScript обязан создать дополнительно новый документ. В скрипте определяем переменную myWin. И с ее помощью можем получать доступ к новому окну. Обратите пожалуйста внимание, что в данном случае мы не можем воспользоваться для этой цели именем окна (displayWindow). После открытия окна, открывается для записи объект documen с помощью команды:
// открыть объект document для последующей печати myWin.document.open();
Эта команда не открывает нового окна она лишь готовит document к предстоящей печати. Кроме того, необходимо поставить перед document.open() приставку myWin, чтобы получить возможность писать в новом окне.
В последующих строках скрипта с помощью вызова document.write() формируется текст нового документа:
// генерировать новый документ
myWin.document.write("<html><head><title>On−the−fly");
myWin.document.write("</title></head><body>");
myWin.document.write("<center><font size=+3>");
myWin.document.write("This HTML−document has been created ");
myWin.document.write("with the help of JavaScript!");
myWin.document.write("</font></center>");
myWin.document.write("</body></html>");Как видно, здесь записываются в документ обычные тэги языка HTML. По завершении этого необходимо вновь закрыть документ. Это делается следующей командой:
// закрыть документ − (но не окно!) myWin.document.close();
Можно не только динамически создавать документы, но и размещать их в в том или ином фрейме. Например, если есть два фрейма с именами frame1 и frame2, а теперь во frame2 необходимо сгенерировать новый документ, то для этого в frame1 достаточно будет написать следующее:
parent.frame2.document.open();
parent.frame2.document.write("Here goes your HTML−code");
parent.frame2.document.close();
Строка состояния. Программы на JavaScript могут выполнять запись в строку состояния в нижней части окна браузера. Для этого необходимо записать нужную строку в window.status. В следующем примере создаются две кнопки, которые можно использовать, чтобы записывать некий текст в строку состояния и, соответственно, затем его стирать:
Исходный код скрипта:
<html>
<head>
<script Language="JavaScript">
<!−− hide
var timeStr, dateStr;
function clock() {
now= new Date();
// врем\я
hours= now.getHours();
minutes= now.getMinutes();
seconds= now.getSeconds();
timeStr= "" + hours;
timeStr+= ((minutes < 10) ? ":0" : ":") + minutes;
timeStr+= ((seconds < 10) ? ":0" : ":") + seconds;
document.clock.time.value = timeStr;
// дата
date= now.getDate();
month= now.getMonth()+1;
year= now.getYear();
dateStr= "" + month;
dateStr+= ((date < 10) ? "/0" : "/") + date;
dateStr+= "/" + year;
document.clock.date.value = dateStr;
Timer= setTimeout("clock()",1000);
}
// −−>
</script>
</head>
<body onLoad="clock()">
<form name="clock">
Время:
<input type="text" name="time" size="8" value=""><br>
Дата:
<input type="text" name="date" size="8" value="">
</form>
</body>
</html>Для ежесекундной коррекции времени и даты используется метод setTimeout(). Фактически это сводится к кому, что каждую секунду создается новый объект Date, занося туда текущее время.
Функции clock() вызываются программой обработки события onLoad, помещенной в тэг <body>. В разделе body HTML−страницы имеется два элемента формы для ввода текста. Функция clock() записывает в оба эти элемента в корректном формате текущие время и дату. Для этой цели используются две строки timeStr и dateStr. Существует проблема с индикацией, когда количество минут меньше 10− в данном скрипте эта проблема решается с помощью следующей строки:
timeStr+= ((minutes < 10) ? ":0" : ":") + minutes;
Количество минут заносится в строку timeStr. Если менее 10 минут, то мы еще должны приписать спереди 0.