JavaScript

Читайте также:

Понятие объектной модели применительно к JavaScript

Язык JavaScript - это обьектно - ориентированный язык, предназначенный для создания приложений в Интернет. Программы на языке JavaScript включаются в состав HTML документа и, фактически, этот язык может считаться расширением состава команд HTML. Поэтому для создания программ на JavaScript не требуется никаких дополнительных средств, необходим лишь браузер, поддерживающий JavaScript и редактор для создания HTML документов.

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

Имеются две основные разновидности JavaScript: интерпретируемый язык для создания приложений, исполняемых на клиентской стороне, и компилируемый - для разработки серверных программ. Клиентский вариант JavaScript представляет собой просто набор команд, предназначенных для встраивания в HTML-страницы, как правило, между тегами <SCRIPT LANGUAGE = "JavaScript"> и </SCRIPT>.

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

Пример разработки Web-страницы с использованием DHTML:

Создаем фреймовую структуру. Размеры и взаимное расположение фреймов описывается в документе index.html

<html>

<HEAD>

<TITLE>Пример DHTML</TITLE>

</HEAD>

</frameset>

</html>

Исходным содержимым фрейма one будет документ menu.htm,а исходным содержимым фрейма two будет документ test.htm

menu.htm:

<html>

<body

bgcolor=Aquamarine> // цвет фона

</body>

<FONT FACE="Comic Sans MS"> //тип шрифта

<FONT SIZE=7> // размер шрифта

<FONT COLOR=orchid> // цвет шрифта

MENU:

</FONT>

</br> //отступ вниз на 1 строку

<br>

<a href="test.htm" target=two>- психологический тест (пример DHTML)</a>

//ссылка на документ test.htm, который будет отображаться во фрейме two

<br>

<a href="script.htm" target=two>- примеры JavaScript</a>

// ссылка на документ script.htm, который будет отображаться во фрейме two

</FONT>

</br></br>

<IMG SRC="bear.jpg" ALIGN=top> // вставка рисунка

</html>

Данное окно будет иметь следующий вид:

test.htm:

<html>

<head>

<title>Тест на интеллект</title>

</head>

<body bgcolor="Plum" text="Black" link="#808080" vlink="#808080" alink="#000000"

leftmargin=0 topmargin=5 bgproperties="fixed">

<h1>Тест на интеллект</h1>

</td></tr></table>

//горизонтальная полоса

<tr>

<td width="210"><b><font size="4">1. Может ли мужчина жениться на сестре своей вдовы? </font></b></td>

<input type=radio name=rb1 value="0" checked></font><b><font

size="4">да;</font></b><font size="4"><br>

<input type=radio name=rb1 value="1" ></font><b><font size="4">нет;</font></b><font

size="4"><br>

</font>

</td>

</tr>

/*Здесь задается текст первого вопроса и создаются две радиокнопки(rb1) для ответа: первой соответствует ответ «да» и значение 0 (количество баллов за ответ), второй соответствует ответ «нет» и значение 1. Вопросы 2 – 5 созданы аналогично.*/

<tr>

<td width="210"><b><font size="4">2. Есть ли 7 ноября в Австралии?</font></b></td>

<input type=radio name=rb2 value="1" checked></font><b><font

size="4">да;</font></b><font size="4"><br>

<input type=radio name=rb2 value="0" ></font><b><font size="4">нет;</font></b><font

size="4"><br>

</font>

</td>

</tr>

<tr>

<td width="210"><b><font size="4">3. Отец с сыном попали в автокатастрофу. Отец скончался в госпитале. К сыну в палату заходит хирург и говорит, показывая на него: "Это мой сын". Могут ли его слова быть правдой?</font></b></td>

<input type=radio name=rb3 value="1" checked></font><b><font

size="4">могут;</font></b><font size="4"><br>

<input type=radio name=rb3 value="0" ></font><b><font size="4">нет;</font></b><font

size="4"><br>

</font>

</td>

</tr>

<tr>

<td width="210"><b><font size="4">4. Археологи нашли монету, датируемую 35 годом до нашей эры. Возможно ли это?</font></b></td>

<input type=radio name=rb4 value="0" checked></font><b><font

size="4">да;</font></b><font size="4"><br>

<input type=radio name=rb4 value="1" ></font><b><font size="4">нет;</font></b><font

size="4"><br>

</font>

</td>

</tr>

<tr>

<td width="210"><b><font size="4">5. Одинокий ночной сторож умер днем. Получит ли он пенсию? </font></b></td>

<input type=radio name=rb5 value="0" checked></font><b><font

size="4">да;</font></b><font size="4"><br>

</font>

</td>

</tr>

</table>

</form>

</form>

</form>

/* При ответе на вопросы теста мы получаем 3 характеристики интеллекта. И в данной части программы мы задаем нижнюю и верхнюю границу трех диапазонов значений. Получаем диапазоны 0-1, 2-3, 4-5*/

</form>

/*Интерпритация ответа. Например, человек, набравший 3 балла, получит ответ: "Вы нормальный человек со средними умственными способностями"*/

<!--

function makeDiagnosis() {

tQcnt = 2;

// количество вариантов ответов на вопрос. В данном случае 2

tDcnt = 5;

// количество вопросов. В данном случае 2

summa = 0;

// исходная сумма баллов равна 0

for(j=0; j<document.Q.rb1.length; j++) {

if(document.Q.rb1[j].checked) {

summa += eval(document.Q.rb1[j].value);

} }

for(j=0; j<document.Q.rb2.length; j++) {

if(document.Q.rb2[j].checked) {

summa += eval(document.Q.rb2[j].value);

} }

for(j=0; j<document.Q.rb3.length; j++) {

if(document.Q.rb3[j].checked) {

summa += eval(document.Q.rb3[j].value);

} }

for(j=0; j<document.Q.rb4.length; j++) {

if(document.Q.rb4[j].checked) {

summa += eval(document.Q.rb4[j].value);

} }

for(j=0; j<document.Q.rb5.length; j++) {

if(document.Q.rb5[j].checked) {

summa += eval(document.Q.rb5[j].value);

} }

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

dx = -1;

for(i=0; i<tDcnt; i++) {

if(summa >= eval(document.L.elements[i].value) && summa <= eval(document.H.elements[i].value)) {

dx = i;

break;

} }

document.C.tDiagnosis.value = document.D.elements[dx].value;

}

function clearForm()

{ document.Q.reset();

document.C.tDiagnosis.value = "";

}

// -->

</script>

<input type=button name=pbReset value="Сбросить и начать заново"

onClick="clearForm()">

//создается кнопка, которая очищает форму

<input type=button name=pbSubmit value=”Показать результат”

onClick=”makeDiagnosis()”>

// создается кнопка, которая отображает результат теста в текстовом поле

//задание текстового поля для отображения результатов теста

</form>

</table>

</body>

</html>

Данное окно будет иметь следующий вид:

script.htm:

<HTML>

<body

bgcolor=Turquoise>

</body>

var it=0

function initialize(){

mytext=typing.innerText

var myheight=typing.offsetHeight

typing.innerText=''

document.all.typing.style.height=myheight

document.all.typing.style.visibility="visible"

typeit()

}

function typeit(){

typing.insertAdjacentText("beforeEnd",mytext.charAt(it))

if (it<mytext.length-1){

it++

setTimeout("typeit()",100)

}

else

return

}

if (document.all)

document.body.onload=initialize

</script>

<big><span id="typing" style="visibility:hidden" align="left">Это пример DHTML - эффект печатной машинки. Далее на странице приведен пример JavaScript, в котором при нажатии на ссылку выскакивает окно-предупреждение. Следующий пример JavaScript позволяет изменять цвет фона при наведении курсора на ссылки Flaxen, Pink и Coral </span></big>

/* данный скрипт выводит заданный текст на экран с эффектом печатной машинки*/

<HEAD>

<title>Первый пример JavaScript</title>

</HEAD>

<BODY>

<h1>Примеры JavaScript</h1>

<hr>

</center>

В текст этого документа внедрена гипертекстовая ссылка

"Don`t click here"</a>.

Любопытно, что будет,если все-таки выбрать?

</BODY>

/* пример JavaScript, в котором при нажатии на ссылку "Don`t click here" выскакивает окно-предупреждение 'Do you speak English?*/

<p align="left"><b>Выберите цвет фона:</b></p>

<b>

[<a onmouseover="document.bgColor='flaxen'" href="/C:/">Flaxen</a>]<br>

[<a onmouseover="document.bgColor='pink'" href="/C:/">Pink</a>]<br>

[<a onmouseover="document.bgColor='coral'" href="/C:/">Coral</a>] <br>

</b>

/* пример JavaScript: при наведении курсора мыши на ссылки Flaxen, Pink и Coral цвет фона данного окна меняется на flaxen, pink и coral соответственно*/

</HTML>

Данное окно будет иметь следующий вид:

Практическая часть:

Фреймовая структура первого типа (варианты 1 - 10):

1) Создать меню, содержащее следующие ссылки

- главная страница (является исходным содержимым фрейма №3)

- фотоальбом

- биография

- страница с примером использования DHTML

2) Пример использования JavaScript

3) Фрейм для просмотра страниц

Фреймовая структура второго типа (варианты 11 - 20):

1) Создать меню, содержащее следующие ссылки

- главная страница (является исходным содержимым фрейма №3)

- фотоальбом

- биография

2) Пример использования JavaScript

3) Фрейм для просмотра страниц

4) Пример использования DHTML

Варианты заданий:

1: В фрейме №2 создать бегущую строку.

На странице с примером использования DHTML создать пароль для доступа на какую-либо страницу.

2: В фрейме №2 должна осуществляться автоматическая смена цветов фона.

На странице с примером использования DHTML создать психологический тест из 5-6 вопросов. Выбор варианта ответа осуществляется с помощью радио-кнопки, результаты обрабатываются автоматически и выдается результат.

3: В фрейме №2 создать часы, отображающие текущее время.

На странице с примером использования DHTML должен автоматически изменяться размер текста.

4: В фрейме №2 должен автоматически изменяться цвет текста.

На странице с примером использования DHTML создать выпадающий список.

5: В фрейме №2 должна осуществляться смена цветов фона через определенное время.

На странице с примером использования DHTML создать надпись, всегда следующую за курсором мыши.

6: В фрейме №2 должен осуществляться отсчет количества дней до дня рождения студента.

На странице с примером использования DHTML создать изображение, всегда следующее за курсором мыши.

7: В фрейме №2 должна отображаться текущая дата.

На странице с примером использования DHTML создать счетчик посещений.

8: В фрейме №2 создать переливающуюся ссылку на любую страницу.

На странице с примером использования DHTML создать выпадающий список.

9: В фрейме №2 должно осуществляться передвижение изображения в с помощью мыши.

На странице с примером использования DHTML создать пароль для доступа на другую страницу.

10: В фрейме №2 создать бегущую строку с кнопкой остановки и запуска.

11: В фрейме №2 создать бегущую строку.

В фрейме №4 создать кнопку, меняющую цвет фона фрейма №1.

12: В фрейме №2 создать счетчик посещений.

В фрейме №4 создать кнопку, меняющую цвет фона фрейма №2.

13: В фрейме №2 должен осуществляться отсчет количества дней до нового года.

В фрейме №4 создать психологический тест из 5-6 вопросов. Выбор варианта ответа осуществляется с помощью радио-кнопки, результаты обрабатываются автоматически и выдается результат.

14: В фрейме №2 должна осуществляться смена цветов фона через определенное время.

В фрейме №4 создать анкету из 5-6 пунктов и кнопку для очистки формы.

15: В фрейме №2 создать изображение, движущееся по определенной траектории.

В фрейме №4 создать таблицу. Сортировка полей таблицы должна осуществляться по алфавиту в прямом и обратном порядке.

16: В фрейме №2 должен быть салют при нажатии на любую из клавиш мыши.

В фрейме №4 создать таблицу. Сортировка полей таблицы должна осуществляться по номеру в прямом и обратном порядке.

17: В фрейме №2 должна осуществляться смена цветов фона через определенное время.

В фрейме №4 при нажатии на кнопку должно выскакивать окно с текстом.

18: В фрейме №2 должен автоматически изменяться размер текста.

В фрейме №4 создать бегущую строку с кнопкой остановки и запуска.

19: В фрейме №2 создать часы, отображающие текущее время.

В фрейме №4 создать счетчик посещений и кнопку сброса счетчика.

20: В фрейме №2 должно осуществляться передвижение изображения в с помощью мыши.

В фрейме №4 создать 3 кнопки изменяющие фона соответственно в первом, втором и четвертом фрейме.

Контрольные вопросы:

1. Зачем нужен язык разметки гипертекста?

2. Назовите основные элементы HTML - документа.

3. Перечислите базисные теги.

4. Перечислите теги, использующиеся для организации гиперссылок и вставки рисунков.

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

6. Что такое Dynamic HTML?

7. Что обеспечивают технологии Dynamic HTML?

8. Какие для этого используются методы?

9. Что такое JavaScript?

10. Назовите две основные разновидности JavaScript.

Дата добавления: 2015-10-02; просмотров: 82 | Нарушение авторских прав

<== предыдущая страница	\|	следующая страница ==>
Dynamic HTML	\|	Учебная информация

mybiblioteka.su - 2015-2024 год. (0.046 сек.)