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

Министерство образования и науки РФ федеральное государственное бюджетное образовательное учреждение высшего профессионального образования

«Тобольская государственная социально-педагогическая академия им. Д.И.Менделеева»

Физико-математический факультет

Кафедра информатики, теории и методики обучения информатике

Практическая работа

по дисциплине «Компьютерные науки»

Создание интерактивных Web-приложений с использованием языка программирования JavaScript

Выполнила: Доброванова Е.С.

Руководитель: Оленькова М.Н.

Тобольск, 2013

Содержание

Введение

1. Теоретическая часть

1.1 Возможности языка программирования JavaScript

1.2 Сравнительная характеристика языков программирования JavaScript и PHP

2. Практическая часть

2.1 Создание интерактивного Web-приложения с использованием языка программирования JavaScript на примере теста по теме «Программирование на языке Delphi»

Заключение

Список литературы

Введение

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

Одним из основных средств создания Web-страниц является язык разметки гипертекста HTML. Однако, для создания интерактивных Web-приложений этого недостаточно. Современными средствами для создания интерактивных Web-приложений являются языки программирования JavaScript и PHP.

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

Объектом исследования является процесс Web-программирования.

Предметом исследования является средство создания интерактивных приложений язык программирования JavaScript.

Целью работы является создание интерактивного Web-приложения с использованием языка программирования JavaScript.

Достижение предполагаемой цели связано с решением следующих задач:

Изучить и систематизировать теоретический материал по данной теме.

Определить возможности языка программирования JavaScript.

Провести сравнительный анализ языков программирования JavaScript и PHP.

Разработать интерактивное Web-приложение на примере теста по теме «Программирование на языке Delphi».

1. Теоретическая часть

1.1 Возможности языка программирования JavaScript

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

JavaScript поддерживает четыре простых типа данных: целый, вещественный, строковый, булевый или логический.

Для присваивания переменным значений основных типов применяются литералы - буквенные значения данных соответствующих типов.

Целые литералы являются последовательностью цифр и представляют обычные целые числа со знаком или без знака: 123 (целое положительное число), -123 (целое отрицательное число), +123 (целое положительное число)

Для задания вещественных литералов используется синтаксис чисел с десятичной точкой, отделяющей дробную часть числа от целой, или запись вещественных чисел в научной нотации с указанием после символа “e” или “E” порядка числа. Пример правильных вещественных чисел: 1.25,0.125e01,12.5E-1, 0.0125E+2

Строковый литерал - последовательность алфавитно-цифровых символов, заключенная в одинарные (`) или двойные кавычки (“), например: “Ира”, `ИРА'. При задании строковых переменных нельзя смешивать одинарные и двойные кавычки. Недопустимо задавать строку, например, в виде “Ира'. Двойные кавычки - это один самостоятельный символ, а не последовательность двух символов одинарных кавычек. Если в строке нужно использовать символ кавычек, то строковый литерал необходимо заключать в кавычки противоположного вида: “It's a string” // Значение строки равно It's a string. Булевы литералы имеют два значения: true и false, и используются для обработки ситуаций да/нет в операторах сравнения. Люди уже давно изобрели множество разных языков программирования, которые выступают в роли посредника между человеком и машиной. Язык программирования - это программа, которая читает текст исходного кода, содержащего более привычные команды, такие как print (печать) или сору (копировать), и автоматически преобразует их в двоичные машинные команды. По способу преобразования исходного кода в машинный код языки программирования подразделяются на компилируемые и интерпретируемые. Компилируемые языки программирования - это код, написанный на компилируемом языке, передается в программу - компилятор, которая, прежде всего, проверяет код на наличие ошибок, а затем переводит текст программы в бинарный машинный код и сохраняет результат в исполняемом файле (с расширением ехе) или в библиотеке программных модулей (с расширением .dll). Если компилятор обнаруживает в исходном коде ошибки, процесс компиляции останавливается и разработчику отправляется список ошибок. После исправления ошибок компиляция начинается сначала. Таким образом, невозможно скомпилировать программу, в коде которой есть синтаксические ошибки.К сожалению, компилятор не защищает разработчика и будущих пользователей от логических ошибок в коде программы, которые уже невозможно исправить в конечном файле.

Другая проблема состоит в несовместимости программ, созданных для разных операционных систем и компьютерных платформ. Так, для того чтобы программа, написанная на С++, работала на компьютерах с операционными системами Windows, OS/2 и Масiпtоsh, необходимо использовать соответствующие компиляторы. Кроме этого, часто приходится вносить изменения в исходный код программы, поскольку компиляторы разных систем стандартизированы не в полной мере.К компилируемым языкам программирования относятся языки семейства С (С, С++ и C#), java и многие другие.

1.2 Сравнительная характеристика языков программирования JavaScript и PHP

Язык программирования JavaScript разработан фирмой Netscape для создания интерактивных HTML-документов. Это объектно-ориентированный язык разработки встраиваемых приложений, выполняющих как на стороне клиента, так и на стороне сервера. Синтаксис языка очень похож на синтаксис языка Java - поэтому его часто называют Java-подобным. Клиентские приложения выполняются браузером просмотра Web-документов на машине пользователя, серверные приложения выполняются на сервере. При разработке обоих типов приложений используется общий компонент языка, называемый ядром и включающий определения стандартных объектов и конструкций (переменные, функции, основные объекты и средство LiveConnect взаимодействия с Java-апплетами), и соответствующие компоненты дополнений языка, содержащие специфические для каждого типа приложений определения объектов. Клиентские приложения непосредственно встраиваются в HTML-страницы и интерпретируются браузером по мере отображения частей документа в его окне. Серверные приложения для увеличения производительности предварительно компилируются в промежуточный байт-код.

Основные области использования языка JavaScript при создании интерактивных HTML-страниц:

- Динамическое создание документа с помощью сценария.

- Оперативная проверка достоверности заполняемых пользователем полей форм HTML до передачи их на сервер.

- Создание динамических HTML-страниц совместно с каскадными таблицами стилей и объектной моделью документа.

- Взаимодействие с пользователем при решении “локальных” задач, решаемых приложением JavaScript, встроенном в HTML-страницу. То, что касается языка программирования РНР главным фактором при проектировании является практичность. РНР должен предоставить программисту средства для быстрого и эффективного решения поставленных задач. Практический характер РНР обусловлен пятью важными характеристиками:

- традиционностью,

- простотой,

- эффективностью,

- безопасностью,

- гибкостью.

Язык РНР кажется знакомым программистам, работающим в разных областях. Многие конструкции языка позаимствованы из Си Perl, а нередко код РНР практически неотличим от того, что встречается в типичных программах С или Pascal. Это заметно снижает начальные усилия при изучении РНР. Сценарий РНР может состоять из 10 000 строк или из одной строки - все зависит от специфики задачи. Не придется подгружать библиотеки, указывать специальные параметры компиляции. Механизм РНР просто начинает выполнять код после первой экранирующей последовательности и продолжает выполнение до того момента, когда он встретит парную экранирующую последовательность. Если код имеет правильный синтаксис, он исполняется в точности так, как указал программист. Эффективность является исключительно важным фактором при программировании для многопользовательских сред, к числу которых относится и WWW. В РНР 4.0 был реализован механизм выделения ресурсов и обеспечена улучшенная поддержка объектно-ориентированного программирования, а также средства управления сеансом. В последней версии появился и механизм подсчета ссылок (reference counting), предотвращающий выделение лишней памяти. РНР предоставляет в распоряжение разработчиков и администраторов гибкие и эффективные средства безопасности, которые условно делятся на две категории: средства системного уровня и средства уровня приложения.

В РНР реализованы механизмы безопасности, находящиеся под управлением администраторов; при правильной настройке РНР это обеспечивает максимальную свободу действий и безопасность. РНР может работать в так называемом безопасном режиме (safe mode), который ограничивает возможности применения РНР пользователями по ряду важных показателей. Например, можно ограничить максимальное время выполнения и использование памяти (неконтролируемый расход памяти отрицательно влияет на быстродействие сервера). По аналогии с cgi-bin администратор также может устанавливать ограничения на каталоги, в которых пользователь может просматривать и исполнять сценарии РНР, а также использовать сценарии РНР для просмотра конфиденциальной информации на сервере (например, файла passwd).

В стандартный набор функций РНР входит ряд надежных механизмов шифрования. РНР также совместим с многими приложениями независимых фирм, что позволяет легко интегрировать его с защищенными технологиями электронной коммерции (e-commerce). Другое преимущество заключается в том, что исходный текст сценариев РНР нельзя просмотреть в браузере, поскольку сценарий компилируется до его отправки по запросу пользователя. Реализация РНР на стороне сервера предотвращает похищение нетривиальных сценариев пользователями, знаний которых хватает хотя бы для выполнения команды View Source.

Поскольку РНР является встраиваемым (embedded) языком, он отличается исключительной гибкостью по отношению к потребностям разработчика. Хотя РНР обычно рекомендуется использовать в сочетании с HTML, он с таким же успехом интегрируется и в JavaScript, WML, XML и другие языки. Кроме того, хорошо структурированные приложения РНР легко расширяются по мере необходимости (впрочем, это относится ко всем основным языкам программирования). Нет проблем и с зависимостью от браузеров, поскольку перед отправкой клиенту сценарии РНР полностью компилируются на стороне сервера. В сущности, сценарии РНР могут передаваться любым устройствам с браузерами, включая сотовые телефоны, электронные записные книжки, пейджеры и портативные компьютеры, не говоря уже о традиционных PC. Программисты, занимающиеся вспомогательными утилитами, могут запускать РНР в режиме командной строки. Поскольку РНР не содержит кода, ориентированного на конкретный web-сервер, пользователи не ограничиваются определенными серверами (возможно, незнакомыми для них). Apache, Microsoft IIS, Netscape Enterprise Server, Stronghold и Zeus - РНР работает на всех перечисленных серверах. Поскольку эти серверы работают на разных платформах, РНР в целом является платформенно-независимым языком и существует на таких платформах, как UNIX, Solaris, FreeBSD и Windows 95/98/NT/Me/2000/XP. Наконец, средства РНР позволяют программисту работать с внешними компонентами, такими как Enterprise Java Beans или СОМ-объекты Win32. Благодаря этим новым возможностям РНР занимает достойное место среди современных технологий и обеспечивает масштабирование проектов до необходимых пределов.

2. Практическая часть

2.1 Создание интерактивного Web-приложения с использованием языка программирования JavaScript на примере теста по теме «Программирование»

Приведем пример интерактивного Web-приложения, которое создано с использованием языка программирования JavaScript. Данное Web-приложение является тестом по теме «Программирование на языке Delphi». Тест содержит 5 вопросов. После запуска Web-приложения в окне браузера отображается заголовок, вопросы теста и варианты ответов. Тип вопросов в тесте относится к одиночному выбору. После выбора правильных вариантов ответов, нужно щелкнуть на кнопку «Ответить» и будет выведен результат тестирования. Тестирование можно повторить, щелкнув на кнопку «Очистить», обнулив переключатели Количество вопросов можно добавить до 10 и более.

<title>тест</title>

<script type="text/javascript">

functionshowById(id, visible)

{

document.getElementById(id).style.display =

visible ? 'block': 'none'

}

functionprocessForm(f)

{

vari, s='', el

varquestions = newObject()

varanswers = newObject()

for(i=0; i<f.length; i++)

{

el = f.elements[i]

if(el.type=='radio'&& el.name.indexOf('question')==0)

{

questions[el.name] = 0

if(el.checked)

answers[el.name] = parseInt(el.value)

}

}

varasked = 0, answered = 0, score = 0

for(i inquestions) asked++

for(i inanswers)

{

answered++

score += answers[i]

}

if(answered < asked)

{

alert('Вы ответили на '+answered+' вопросов из '+asked+'.

Для получения достоверного результата нужно ответить на все воросы')

}

else

{

showById('questionsForm', false)

el = document.getElementById('score')

el.innerHTML = (score>0) ? '+'+score : score

showById('results', true)

if(score == 0)

showById('1', true)

elseif(score == 1)

showById('2', true)

elseif(score == 2)

showById('3', true)

elseif(score == 3)

showById('4', true)

elseif(score == 4)

showById('5', true)

elseif(score == 5)

}

}

functionresetTest()

{

showById('results', false)

showById('questionsForm', true)

document.forms['opros'].reset()

</script>

</head>

<body>

 <hr width="100%"size="2"/>

<h3 align="center">Тест по теме "Программирование на языке Delphi"</h3>

<hr width="100%"size="2"/>

<div id="questionsForm">

<formname="opros"><p />

<strong>1.</strong>Технология визуального проектирования и событийного программирования, суть которой заключается в том, что среда разработки берет на себя большую часть рутинной работы, оставляя программисту работу по конструированию диалоговых окон и функций обработки событий

<input type="radio"name="question1"value="0"id="q1a1"/><label for="q1a1">a)

Object TreeView</label>

<input type="radio"name="question1"value="0"id="q1a2"/><label for="q1a2">b)

Object Inspector</label>

<input type="radio"name="question1"value="1"id="q1a3"/><label for="q1a3">c)

Rapid Application Development</label>

<input type="radio"name="question1"value="0"id="q1a4"/><label for="q1a4">d)

Object Inspector</label>

 <hr />

<p />

<strong>2.</strong>Окно, которое представляет собой заготовку главного окна разрабатываемого приложения

<input type="radio"name="question2"value="1"id="q2a1"/><label for="q2a1">a)

Стартовая форма</label>

<input type="radio"name="question2"value="0"id="q2a2"/><label for="q2a2">b)

Object TreeView</label>

<input type="radio"name="question2"value="0"id="q2a3"/><label for="q2a3">c)

Rapid Application Development</label>

<input type="radio"name="question2"value="0"id="q2a4"/><label for="q2a4">d)

Object Inspector</label>

<hr/>

<p/>

<strong>3.</strong>Среда быстрой разработки, в которой в качестве языка программирования используется язык Delphi.

<input type="radio"name="question3"value="0"id="q3a1"/><label for="q3a1">a)

Delphi</label>

<input type="radio"name="question3"value="1"id="q3a2"/><label for="q3a2">b)

Rapid Application Development</label>

<input type="radio"name="question3"value="0"id="q3a3"/><label for="q3a3">c)

Стартоваяформа</label>

<input type="radio"name="question3"value="0"id="q3a4"/><label for="q3a4">d)

Object TreeView</label>

<hr/>

<p/>

<strong>4.</strong>Окно, предназначенное для редактирования значений свойств объектов

<input type="radio"name="question4"value="0"id="q4a1"/><label for="q4a1">a)

Стартовая форма</label>

<input type="radio"name="question4"value="0"id="q4a2"/><label for="q4a2">b)

Object TreeView</label>

<input type="radio"name="question4"value="1"id="q4a3"/><label for="q4a3">c)

Object Inspector</label>

<input type="radio"name="question4"value="0"id="q4a4"/><label for="q4a4">d)

Rapid Application Development</label>

<hr/>

<p/>

<strong>5.</strong>Окно, которое отображает визуальные и невизуальные компоненты, находящиеся на форме, модуле данных, или во фрейме

<input type="radio"name="question5"value="0"id="q5a1"/><label for="q5a1">a)

Стартовая форма</label>

<input type="radio"name="question5"value="0"id="q5a2"/><label for="q5a2">b)

Rapid Application Development</label>

<input type="radio"name="question5"value="0"id="q5a3"/><label for="q5a3">c)

Object Inspector</label>

<input type="radio"name="question5"value="1"id="q5a4"/><label for="q5a4">d)

Object TreeView</label>

<hr/>

<p/>

<input type="button"value="Ответить"onClick="processForm(this.form)"/>

<input type="reset"value="Очистить"></input>

</form>

</div>

<hr />

<div id="results"style="display:none;">

<h3>Количество правильных ответов: <spanid="score"></span></h3>

<div id="1-"style="display: none";>

<p>Ваша оценка: 1-</p>

<div id="1"style="display: none";>

<p>Ваша оценка: 1</p>

<div id="1+"style="display: none";>

<p>Ваша оценка: 1+</p>

</div>

<hr/>

<p>Спасибо за участие в тестировании</p>

<input type="button"value="Начатьзаново"onClick="resetTest()"/><tml>ipt

программирование интерактивный язык приложение

Заключение

В ходе работой были решены следующие задачи:

1. Изучен и систематизирован теоретический материал по теме исследования.

2. Определены возможности языка программирования JavaScript.

3. Проведен сравнительный анализ языков программирования JavaScript и PHP.

4. Разработано интерактивное Web-приложение на примере теста по теме «Программирование на языке программирования Delphi».

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

Список литературы

1. Матросов А.В., Сергеев А.О, Чаунин М.П. HTML 5.0. - СПб.: БХВ-Петербург, 2010.

2. Кенин А.М., Печенкина Н.С. Новый уровень создания HTML-документов. - Екатеринбург: Деловая книга, 2009.

3. Дэвис С. Язык JavaScript. - К.: Диалектика, 2006.

4. Микляев А. Основы HTML. - М.: Солон, 2008.

5. Зубкова С.В. Интерактивные Web-документы. - М.: ДМК Пресс, 2012.

6. «Информатика и образование», №8, 2000 Е. В. Давыдова.

7. Пайк М. «Internet в подлиннике» СПб.: BHV-Санкт-Петербург, 1996.

8. Шарф Д. «HTML 4.0: Справочник» СПб: Питер, 2000.

9. Вуд Л. «Web-графика: Справочник» СПб: Питер, 2001.

10. Девис С. Языки JavaScript и VBScript. - К.: Диалектика, 2003.

11. Дмитриева М. Java Script: быстрый старт. СПб., «БХВ-Петербург», 2002

12. Дунаев В. Java Script. СПб., «Питер», 2003

13. Мак-Федрис П. Использование Java Script. Специальное издание. М., СПб., Киев, «Вильямс», 2002

14. Ратбон Э. JavaScript для чайникив. - К.: Диалектика, 1995.

15. Айзекс А. Dynamic HTML BHV-Санкт-Петербург 1998

16. Ганчаров А. Самоучитель HTML. Питер 2000

17. Дарнелл Р. Энциклопедия пользователя ДиаСофт 1999

18. Денисов Internet Explorer 5 Справочник Питер 1999

19. Хоумер А. Dynamic HTML Справочник Питер 1999

20. Петюшкин А.В., HTML. Экспресс-курс. - СПб.: БХВ - Петербург, 2003

21. Кингсли-Хью Э., JavaScript: учебный курс. - СПб.: Питер, 2002

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