Технология написания клиентских приложений с использованием языка сценариев JavaScript

Размещено на http://www.allbest.ru/

Министерство образования и науки Российской Федерации

Федеральное государственное бюджетное образовательное учреждение

высшего образования

«Владимирский государственный университет

имени Александра Григорьевича и Николая Григорьевича Столетовых»

(ВлГУ)

Кафедра «Физика и прикладная математика»

Лабораторная работа №4

по дисциплине «Веб программирование»

Выполнил:

ст. гр. АИСс-113

Афанасьев А.А.

Принял:

Самойленко А.А.

Владимир 2016



Цель работы: изучение технологии написания клиентских приложений с использованием языка сценариев JavaScript.



Теоретические сведения

JavaScript - это облегченный объектно-ориентированный язык сценариев. Ядро этого языка встроено и м Netscape Navigator, и в Microsoft Internet Explorer, а также в другие браузеры, и расширено для веб-программирования добавлением объектов, представляющих окно браузера и его содержимое. Версия JavaScript для клиентской стороны позволяет включать в веб-страницы выполняемое содержимое. С помощью JavaScript можно выйти за пределы статического HTML и создавать страницы, включающие в себя программы, которые взаимодействуют с пользователем, управляют браузером и динамически создают HTML-содержимое. JavaScript является наиболее распространенным языком сценариев, выполняющихся на стороне клиента.

Суть языка JavaScript можно выразить в следующих основных принципах:

JavaScript можно внедрить в HTML. Это осуществляется с помощью дескриптора <SCRIPT>…</SCRIPT> (сценарий описывается непосредственно в документе HTML или в подключаемом внешнем файле с расширением .js) или в виде кода, обрабатывающего события, связанные с элементами форм.

JavaScript зависит от среды. Для выполнения кода требуется поддержка браузером используемых в этом коде средств.

JavaScript - интерпретируемый язык. JavaScript не компилируется в двоичный код наподобие .exe, а, оставаясь частью документа HTML, интерпретируется браузером.

JavaScript - слаботипизированный язык. Нет необходимости объявлять переменные специального типа, а одна и та же переменная может хранить в разных точках программы данные разного типа (числовые, строковые и другие).

JavaScript - объектно-ориентированный язык. Работа ведется с объектами, которые инкапсулируют данные (свойства) и поведение (методы). Однако объектная модель JavaScript основывается на экземплярах, а не на концепции наследования. Различают стандартные объекты, независимые объекты и пользовательские объекты. Первые служат для работы с элементами гипертекста и браузера. Набор стандартных объектов и их свойств может несколько отличаться у различных браузеров. Независимые объекты стандартизованы Европейской ассоциацией производителей компьютеров (ECMA), образуют стандартизованную версию JavaScript - язык ECMAScript - и предназначены для работы с такими данными как строки, массивы, время, математические функции и т.п. Пользовательские объекты описываются разработчиками и служат для решения специфических задач.

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

JavaScript - это не Java. Java и JavaScript разрабатывались разными компаниями. Различия между Java и JavaScript очень велики и проявляются на уровне базовых принципов этих языков. Можно даже сказать, что общим у этих языков является только си-подобный синтаксис. Основная причина сходства имен кроется в маркетинговых соображениях.

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



Задание

javascript страница программа динамический

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

1. Для формы из лабораторной работы №2 выполнить проверку на наличие незаполненных полей. Проверка должна выполняться после нажатия кнопки <ОК>. При наличии незаполненных полей пользователь должен увидеть соответствующее предупреждение (например, «Не введена фамилия!»)

2. Сделать проверку правильности ввода телефонного номера, он должен быть введён в формате «(ХХХ) ХХХХХХХ», где 'X'-десятичная цифра. Общее количество цифр в скобках и за скобками должно равняться десяти.

3. Сделать проверку корректности ввода адреса электронной почты.



Ход работы

Листинг

Index.html

<!DOCTYPE html>

<html>

<head>

<title>4</title>

<meta charset="utf-8">

<script type="text/javascript">

function validate_form()

{

var valid = true;

var regExpPhone = /[(]\d{3}[)]\d{7}/;

var regExpArdes = /^[a-z0-9_\.\-]+@([a-z0-9\-]+\.)+[a-z]{2,6}/;

var fio=document.userForm.fio.value;

var age=document.userForm.age.value;

var adres=document.userForm.adres.value;

var phone=document.userForm.phone.value;

if(fio==""){

window.alert("введите имя");

valid = false;

}

if(age==""){

window.alert("введите возраст");

valid = false;

}

if(adres==""){

window.alert("введите адрес");

valid = false;

}

if(!regExpPhone.test(phone)){

window.alert("введите телефон в формате (ххх)ххххххх");

valid = false;

}

if(!regExpArdes.test(adres)){

window.alert("неверный адрес");

valid = false;

}

return valid;

}

</script>

</head>

<body>

<form align=center name="userForm" onsubmit="return validate_form();">

ФИО: <br>

<input name="fio"><br>

Возраст: <br>

<input name="age"><br>

Адрес: <br>

<input name="adres"><br>

Телефон: <br>

<input name="phone"><br>

Области интересов:<br>

<input name="option1" value="music" type="checkbox">музыка<br>

<input name="option2" value="music" type="checkbox">Фильмы<br>

<input name="option3" value="music" type="checkbox">Кино<br>

Основная сфера деятельности:<br>

<input name="sd" value="учеба" type="radio">Учеба<br>

<input name="sd" value="работа" type="radio">Работа<br>

Набор оценок сайта:<br>

<select name="1">

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

<option>5</option>

<option>затрудняюсь ответить</option>

</select><br>

<input type="submit" name="send" value="Отправить данные">

</form>

</body>

</html>

Скриншоты

Рисунок 1.



Вывод

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

Размещено на Allbest.ru