КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Лабораторная работа № 5 JavaScript
|
|
|
|
Для выполнения заданий необходимо создать папку JS.
Для создания файлов выбирать команду Создать – Текстовый документ.
Задание 1. Включение скриптов JavaScript в HTML страницу
Цель этого примера показать, как вставляется JavaScript в файл HTML-документа и продемонстрировать назначение тегов <script> и </script>.
1. В текстовом документе набрать текст:
<html>
<body>
<br>
Это обычный HTML документ <br>
<script language = "JavaScript">
document.write("ЭTO и есть JavaScript!")
</script>
<br>
Выходим обратно в HTML
</body>
</html>
2. Сохранить файл в папке JS под именем z1.htm. Просмотреть файл.
Задание 2. Обработка событий
Событие — это очень важное в программировании на JavaScript понятие. События главным образом порождаются пользователем, являются следствиями его действий. Если пользователь нажимает кнопку мыши, то происходит событие, которое называется Click. Если экранный указатель мыши движется по ссылке HTML-документа, происходит событие MouseOver.
Можно заставить появиться новое всплывающее окно, которое появляется при нажатии кнопки. Появление нового окна будет следствием наступления события Click.
1. В текстовом документе набрать текст
<html>
<body>
<form>
<input type="button" value="Нажми сюда" onClick="alert('Ой-ой')"> </form>
</body>
</html>
2. Сохранить под именем z2.htm. Просмотреть файл.
Задание 3. Обработка функций. Открытие окон.
С помощью JavaScript можно создать новое окно броузера. В новое открывшееся окно можно загрузить уже существующий HTML-документ, но в нем также можно разместить абсолютно новый, создаваемый по ходу работы, документ. Рассмотрим пример того, как можно создать новое окно броузера и загрузить в него существующий документ.
Следующий скрипт открывает новое окно броузера и загружает в него HTML-страничку.
<html>
<head>
<script language = "JavaScript">
function openWin()
{ myWin=open("z1.htm");}
</script>
</head>
<body>
<form>
<input type = "button" value="Открываем новое окно"
onClick="openWin() " >
</form>
</body>
</html>
2. Сохранить под именем z3.htm. Просмотреть результат.
3. Заменить строку
myWin=open("z1.htm")
На следующий текст
myWin=open("z1.htm", "newWindow", "width400, height = 30, status = no, toolbar = no, menubar=no")
Просмотреть результат.
Задание 4. Обработка простых форм
1. Набрать следующий текст (Обработка формы с введением пароля, содержащим > 3 символов)
<html>
<head>
<title>Обработка сложных форм</title>
<script language=JavaScript>
function process(nForm)
{
var result,v,n;
str=document.FirstForm.FirstName.value+""+
document.FirstForm.LastName.value+"\n"+"место жительства:"+document.FirstForm.Address.value;
if((document.FirstForm.Password1.value==document.FirstForm.Password2.value)
&&(document.FirstForm.Password2.value.length>3))
{
alert(str);
result=confirm("Войти в систему?");
}
else
{
alert("Пароль набран неправильно!");
result=0
}
if (result==1)
{
alert("регистрация в системе прошла успешно!");
v=0;n=0;
if(document.forms[0].check1.checked==1)v++
else n++;
if(document.forms[0].check2.checked==1)v++
else n++;
if(document.forms[0].check3.checked==1)v++
else n++;
if(document.forms[0].check4.checked==1)v++
else n++;
if(document.forms[0].check5.checked==1)v++
else n++;
alert("ответов ДА-"+v+" "+"ответов НЕТ-"+n);
}
else alert("регистрация не прошла");
}
</script>
</head>
<body>
<center>
<form name="FirstForm">
Заполните форму
<p>
имя: <input type=text size=20 name="FirstName">
<br>
фамилия: <input type=text size=20 name="LastName">
<p>
адрес: <textarea name="Address">
г. Уфа
</textarea>
<p> Мои увлечения
<input type=checkbox checked=0 name="check1">Компьютеры
<input type=checkbox name="check2">Учеба
<input type=checkbox name="check3">Книги
<input type=checkbox name="check4">Спорт
<input type=checkbox name="check5">Музыка
<p>
Укажите пароль(не менее трех символов):
<br><input type=password size=10 name="Password1">
<br><input type=password size=10 name="Password2">
<p>
<input type="submit" onClick="process(1)">
</form>
</body>
</html>
2. Сохранить под именем z4.htm. Просмотреть результат.
Задание 5. Обработка списков
1. Наберите следующий текст
<html>
<head>
<title>Обработка списка</title>
<script language=JavaScript>
function newprocess()
{
str=document.SForm.city2.value
alert(str);
}
</script>
</head>
<body><center>
<p>Выберите город в котором хотите жить
<form name="SForm">
<p><select name="city2"size=4>
<option value="Уфа" selected>Уфа
<option value="Москва">Москва
<option value="Питер">Питер
<option value="Париж">Париж
</select>
<p>
<input type=submit value="Выбор" onClick="newprocess()">
</form>
</body>
</html>
2. Сохраните файл как z5.htm
Задание 6. Придумайте свою форму, на основе предыдущих, включающую 4 текстовых поля, флажки, список.
Форма должна: производить проверку пароля, подсчитывать количество выбранных ответов во флажках и обрабатывать список
|
|
|
|
|
Дата добавления: 2015-05-26; Просмотров: 1496; Нарушение авторских прав?; Мы поможем в написании вашей работы!