Logo GenDocs.ru

Поиск по сайту:  

Загрузка...

Освоение навыков формирования HTML-документа и написание простейших сценариев на JavaScript - файл 1.doc


Освоение навыков формирования HTML-документа и написание простейших сценариев на JavaScript
скачать (307 kb.)

Доступные файлы (1):

1.doc307kb.05.02.2012 09:14скачать

Загрузка...

1.doc

Реклама MarketGid:
Загрузка...
ГОУ ВПО

Уфимский Государственный Авиационный Технический Университет
Кафедра Технической Кибернетики

Отчет

по лабораторной работе №1

по предмету «Web-программирование»

на тему: «Освоение навыков формирования

HTML-документа и написание простейших

сценариев на JavaScript»

Вариант № 3
Выполнил: ст. гр. УТС-317

Принял: кнт. доцент

Карамзина. А. Г

Уфа 2010

Цель работы:

Приобретение навыков формирования HTML-документа и написание простейших сценариев на JavaScript, освоение понятия DOM-модели объектов на странице. Задание:

1.Выведите на экран сведения о браузере, используемом для загрузки документа

2.Создайте HTML-код который сразу после загрузки страницы отображал бы диалоговое окно с предупреждением <<Загрузка страницы завершена>>.Другое диалоговое окно должно отображаться при щелчке пользователя на кнопке формы.

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

4. Создайте Web-страницу , на которой пользователь мог бы ввести название планеты и после щелчка на кнопке получить данные с указанием расстояния этой планеты до солнца и её диаметр. Сделайте так, чтобы эта информация выводилась на странице в отдельных полях(не менее 15 записей).

5.Напишите HTML-код:

  • Отображающий сообщение в строке состояния, приветствующий нового посетителя Web-страницы;

  • На уровне заголовка H1;

  • Пользователю предлагается ввести имя в диалоговом окне, а после этого приветствовать его по имени. Приветствие должно отображаться в основной части документа;

  • Сразу после загрузки должно автоматически выводиться диалоговое окно с адресом URL текущей страницы.


HTML-код:

1.

<HTML> //Дескриптор, который заключает в себя весь текст HTML-документа

<HEAD> //Указывает на начало заголовка документа

<TITLE> Мой первый сценарий </TITLE> //Определяет заголовок Web-страницы, строка символов, которая отображается в заголовке окна броузера

</HEAD> //Конец заголовка документа

<BODY>// Указывает на начало тела документа ,включает всю информацию ,которая должна отображаться в окне броузера

<H1> Давайте писать сценарий </H1> //Формирует текст как заголовок 1го уровня

<HR> //Описывает горизонтальную линию

<SCRIPT LANGUAGE="JavaScript"> //Описывает язык скрипта

document.write("Используемый браузер версии " + navigator.appVersion +" ")

document.write("of <B> " +" " + navigator.appName + " </B>.")// вывод названия и версии браузера.

</SCRIPT> //Закрытие дескриптора SCRIPT.

</BODY> // закрытие дескриптора BODY.

</HTML>// конец HTML-документа

2.

<HTML>// Дескриптор, который заключает в себя весь текст HTML-документа

<HEAD>//Указывает на начало заголовка документа

<SCRIPT LANGUAGE="JavaScript">//дескриптор описания языка сценария

function done()//описание функции

{

alert("Загрузка страницы завершена!")//метод alert-генерирует диалоговое окно, отображает тот текст, который передаётся в качестве параметров

}

function done1()//описание функции

{

alert("Привет!") // функция, при вызове которой, выводится диалоговое окно с сообщением.

}

</SCRIPT>//Закрытие дескриптора

</HEAD>//Закрытие дескриптора

<BODY onLoad="done()">// открытие дескриптора тела документа в обработчике событий onLoad, операторы сценария начинают выполняться сразу после загрузки документа.

<FORM>//Дескриптор, для создания формы

<INPUT TYPE='button' VALUE='Нажмите на кнопку!'onClick='done1()'>//Дескриптор, описывающий интерактивный элемент-кпопку, при щелчке на которой в обработчике событий onClick вызывается функция done1()

</FORM>//Закрытие дескриптора обьекта формы

</BODY>//Закрытие дескриптора ,описывающего тело документа, и включающий всю информацию, которая должна отображаться в окне браузера

</HTML>// конец HTML-документа

3.

<HTML>// заключает в себя весь текст HTML-документа.

<HEAD> // дескриптор, указывающий на начало заголовка документа.

<SCRIPT LANGUAGE="JavaScript"> //дескриптор описания языка сценария

function Delenie(form) //функция, которая производит арифметическую операцию деления

{

var chislo1=parseFloat(form.entry1.value) // объявление и инициализация переменной первого числа.

var chislo2=parseFloat(form.entry2.value) ) // объявление и инициализация переменной второго числа.

var chislo3=chislo1/chislo2//деление 1го числа на 2ое

form.entry3.value=chislo3// присвоение результата третей переменной

}

</SCRIPT>// закрытие дескриптора SCRIPT

</HEAD>// закрытие дескриптора HEAD

<BODY>// открытие дескриптора тела документа

<FORM>//открытие дескриптора объекта формы.

Введите число 1:

<INPUT TYPE="text" NAME="entry1">//создание текстового поля для первого числа.

Введите число 2:

<INPUT TYPE="text" NAME="entry2">// создание текстового поля для второго числа.

<BR>//одиночный дескриптор, осуществляющий переход на новую строку

<INPUT TYPE="button" VALUE="Результат деления!" onClick='Delenie(this.form)'>//создание кнопки, при щелчке на которой в обработчике событий onClick вызывается функция деления.

<INPUT TYPE="text" NAME="entry3">// создание текстового поля для результата вычитания

</FORM>//закрытие дескриптора объекта формы.

</BODY>// закрытие дескриптора тела документа

</HTML>//конец HTML-документа

4.

<HTML>// заключает в себя весь текст HTML-документа.

<HEAD>// дескриптор, указывающий на начало заголовка документа.

<SCRIPT LANGUAGE='JavaScript'>//дескриптор описания языка сценария.

var planet=new Array(15) // описание массива planet, выделение места в памяти.

planet[0]="Земля"//описание первого элемента массива.

planet[1]="Сатурн"// описание второго элемента массива и т. д.

planet[2]="Юпитер"

planet[3]="Марс"

planet[4]="Плутон"

planet[5]="Меркурий "

planet[6]="Венера "

planet[7]=" Уран "

planet[8]=" Нептун "

planet[9]=" 1RXS1609 b "

planet[10]=" BD +14 4559 b "

planet[11]=" HAT-P-22 b "

planet[12]=" HD 104067 b "

planet[14]=" GJ 433 b "
var ras=new Array(15) //описание второго массива ras,выделение места в памяти.

ras[0]=" 149.6 млн. км"// описание первого элемента этого массива

ras[1]=" 14,3 миллиарда км"// описание второго элемента массива и т. д.

ras[2]=" 764,8 млн км"

ras[3]=" 228 млн. км"

ras[4]=" 5920 млн км"

ras[5]=" 46 млн.км"

ras[6]=" 107803 млн км"

ras[7]=" 2853 млн. км"

ras[8]=" 4500 млн. км"

ras[9]=" 45 пк "

ras[10]=" 52 пк "

ras[11]=" 82 пк "

ras[12]=" 20.8 пк "

ras[14]=" 9.04 пк "
var diam=new Array(15) //описание третьего массива diam,выделение места в памяти.

diam[0]=" 12757 километров"// описание первого элемента массива

diam[1]=" 120000 км"// описание второго элемента массива и т. д.

diam[2]=" 142 984 км"

diam[3]=" 6800 км"

diam[4]=" 5500 км"

diam[5]=" 4880 км"

diam[6]=" 12 100 км"

diam[7]=" 60 км"

diam[8]=" 4000 км"

diam[9]=" 242 984 км "

diam[10]=" 1547 км "

diam[11]="1440 км"

diam[12]="1414 км"

diam[14]="1231 км"
function gets() {//функция находит элемент совпадающий с введенным.

var selectplanet=document.entryForm.entry.value//присвоение более короткого имени объекту

for(var i=0;i<planet.length;i++)

{

if(planet[i]==selectplanet) //если введенное название планеты совпадает с одним из элементов массива ,то

{break;}} // выход из цикла

var msg=" расстояние от "+planet[i]+" до солнца=" + ras[i] +" диаметр планеты=" +diam[i] //описание переменной

document.entryForm.output.value=msg

}

</SCRIPT>// закрытие дескриптора SCRIPT

</HEAD>//.закрытие дескриптора HEAD

<BODY>// открытие дескриптора тела документа

<FORM NAME="entryForm">// открытие дескриптора объекта формы.

Введите название планеты:

<INPUT TYPE="text" NAME="entry">"> // создание текстового поля для ввода планеты

<INPUT TYPE="button" VALUE="Получить данные" onClick="gets()">>// создание кнопки, при щелчке на которой в обработчике событий onClick вызывается функция gets()

<BR>//одиночный дескриптор, осуществляющий переход на новую строку

<INPUT TYPE="text" SIZE="70" NAME="output">// создание текстового поля с размером 70 для вывода результата.

</FORM>//закрытие дескриптора объекта формы.

</BODY>// закрытие дескриптора тела документа

</HTML>// конец HTML-документа

5.

<HTML>// заключает в себя весь текст HTML-документа.

<HEAD>// начало заголовка документа

<SCRIPT LANGUAGE='JavaScript'>//дескриптор описания языка сценария

function askName() {//функция приветствия.

var name=prompt("Как вас зовут?") // генерирует диалоговое окно, в котором есть поле для ввода имени.

return name}//возврат имени в качестве параметра

function show() {// функция выводящая в диалоговом окне адрес URL страницы.

alert("Адрес страницы:" +location.href)

}

window.status="Посетите страницу Яндекс!" //вывод текста в строке состояния.

</SCRIPT>//закрытие дескриптора SCRIPT.

</HEAD>//закрытие дескриптора HEAD

<BODY onLoad="show()">// выполнение операторов функции show()сразу после загрузки документа

<H1>Приветствуем вас</H1>//заголовок 1го уровня в теле документа

<SCRIPT LANGUAGE='JavaScript'>// дескриптор описания языка сценария.

document.write("Добро пожаловать, " +askName()+"!")//вывод приветствия

</SCRIPT>//закрытие дескриптора SCRIPT

</BODY>// закрытие дескриптора тела документа

</HTML>// конец HTML-документ

Результаты работы:

1. Вывод на экран сведений о браузере, используемом для загрузки документа.



2. Отображение диалогового окна с предупреждением <<Загрузка страницы завершена>>сразу после загрузки страницы.







Отображение диалогового окна, появляющегося

после нажатия кнопки.

3. Выполнения арифметической операции деления.




4. Ввод названия планеты, вывод соответствующего расстояния от солнца до этой планеты и диаметр.



5. На уровне заголовка H1 пользователю предлагается ввести имя в диалоговом окне, а после этого идет приветствование его по имени. Приветствие отображается в основной части документа;







Вывод адреса URL текущей страницы.




Отображение сообщения в строке состояния, приветствующего нового посетителя Web-страницы
Вывод: В результате проделанной работы, были освоены навыки формирования HTML-документа и написаны простейшие сценарии на JavaScript. Усвоено понятие DOM-модели, которое позволяет управлять сценарию всеми объектами.


Скачать файл (307 kb.)

Поиск по сайту:  

© gendocs.ru
При копировании укажите ссылку.
обратиться к администрации
Рейтинг@Mail.ru