Органайзер с возможностью записи заметок по дате на языке javascript

 

 

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ АВТОНОМНОЕ ОБРАЗОВАТЕЛЬНОЕ  УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО  ОБРАЗОВАНИЯ

БЕЛГОРОДСКИЙ  ГОСУДАРСТВЕННЫЙ НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ  УНИВЕРСИТЕТ

(НИУ «БелГУ»)

 

 

факультет МАТЕМАТИКИ И ИНФОРМАЦИОННЫХ ТЕХНОЛОГИЙ

 

 

Кафедра ИНФОРМАтИКИ И ВЫЧИСЛИТЕЛЬНОЙ ТЕХНИКИ

 

 

 

 

 

 

сОЗДАНИЕ Органайзера на языке  javascript

 

 

 

 

 

 

Курсовая работа студентки

                         дневного отделения 4 курса группы 010801

Коськовой Татьяны  Валерьевны

 

Научный руководитель:

 

        доцент Красовская Людмила Владимировна

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

БЕЛГОРОД 2012

 

 

 

Содержание

Введение       3    

1. Основы JavaScript     5
2. Описание проектного решения   9

Заключение       25

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

Приложение       27

 

 

 

Введение

 

 

Гипертекстовая  информационная система состоит  из множества информационных узлов, множества гипертекстовых связей, определенных на этих узлах и инструментах манипулирования  узлами и связями. Технология World Wide Web - это технология ведения гипертекстовых распределенных систем в Internet, и, следовательно, она должна соответствовать общему определению таких систем. Это означает, что все перечисленные выше компоненты гипертекстовой системы должны быть и в Web.

Web, как гипертекстовую систему, можно рассматривать с двух точек зрения. Во-первых, как совокупность отображаемых страниц, связанных гипертекстовыми переходами (ссылками - контейнер ANCHOR). Во-вторых, как множество элементарных информационных объектов, составляющих отображаемые страницы (текст, графика, мобильный код и т.п.). В последнем случае множество гипертекстовых переходов страницы - это такой же информационный фрагмент, как и встроенная в текст картинка.

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

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

Таким образом, JavaScript - это язык управления сценариями просмотра гипертекстовых страниц Web на стороне клиента. Если быть более точным, то JavaScript - это не только язык программирования на стороне клиента. Liveware, прародитель JavaScript, является средством подстановок на стороне сервера Netscape. Однако наибольшую популярность JavaScript обеспечило программирование на стороне клиента.

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

На практике это выражается в том, что можно, например, изменить цвет фона страницы или интегрированную в документ картинку, открыть новое окно или  выдать предупреждение.

Название "JavaScript" является собственностью Netscape. Реализация языка, осуществленная разработчиками Microsoft, официально называется Jscript. Версии JScript совместимы (если быть совсем точным, то не до конца) с соответствующими версиями JavaScript, т.е. JavaScript является подмножеством языка JScript.

JavaScript стандартизован ECMA (European Computer Manufacturers Association - Ассоциация европейских производителей компьютеров). Соответствующие стандарты носят названия ECMA-262 и ISO-16262. Этими стандартами определяется язык ECMAScript, который примерно эквивалентен JavaScript 1.1. Отметим, что не все реализации JavaScript на сегодня полностью соответствуют стандарту ECMA. В рамках данного курса мы во всех случаях будем использовать название JavaScript.

 

3. Основы JavaScript

Что такое javascript?

Javascript - скриптовый язык, предназначенный для создания интерактивных веб-страниц.

Javascript не требуется компилировать, он подключается к HTML-странице и работает "как есть".

Javascript - НЕ java, а совсем другой язык. Он похоже называется, но не более того. У javascript есть свой стандарт: ECMAScript, спецификация которого находится на сайте в разделе стандарт языка.

Кто-то говорит, что javascript похож на Python, кто-то говорит о схожести с языками Ruby, Self. Правда заключается в том, что javascript сам по себе. Это действительно особенный язык.

Что умеет javascript?

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

Реагировать на события: скрипт может ждать, когда что-нибудь случиться (клик мыши, окончание загрузки страницы) и реагировать на это выполнением функции.

Выполнять запросы к серверу и загружать  данные без перезагрузки страницы. Это иногда называют "AJAX".

Устанавливать и считывать cookie, валидировать данные, выводить сообщения и многое другое.

 

Уникальность javascript

 

Прелесть  и соль Javascript заключаются всего в нескольких пунктах.

• Полная интеграция с браузером
• Простые вещи делаются просто
• Поддерживается почти везде

Этот  компот преимуществ нельзя найти  ни в одной из других технологий.

Например, такие  технологии как ActiveX, VBScript, XUL - поддерживаются не в каждом браузере (не кросс-браузерны). Такие технологии как Flash, Silverlight, Java - не полностью интегрированы с браузером, работают в своем окружении.

Поэтому Javascript - уникальная технология, и таковой останется. Сейчас она развивается, создается язык Javascript 2 и новый интерпретатор.

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

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

• свойства;
• методы;
• события.

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

Объекты с одинаковым набором свойств, методов  и событий объединяются в классы однотипных объектов. Классы - это описания возможных объектов. Сами объекты  появляются только после загрузки документа  браузером или как результат  работы программы. Об этом нужно всегда помнить, чтобы не обратиться к объекту, которого нет.

Методы

В терминологии JavaScript методы объекта определяют функции изменения его свойств. Например, с объектом "документ" связаны методы open(), write(), close(). Эти методы позволяют сгенерировать или изменить содержание документа. Приведем простой пример:

 

function hello()

{

  id=window.open("","example","width=400, height=150");

  id.focus(); id.document.open();

  id.document.write("<H1>Привет!</H1>");

  id.document.write("<HR><FORM>");

  id.document.write("<INPUT TYPE=button VALUE='Закрыть окно' ");

  id.document.write("onClick='window.opener.focus();

                                            window.close();'>");

  id.document.close();

}

 

В этом примере  метод open() открывает поток записи в документ, метод write() осуществляет эту запись, метод close() закрывает поток записи в документ. Все происходит так же, как и при записи в обычный файл. Если у окна есть поле статуса (обычно в нем отображается уровень загрузки документа), то при незакрытом потоке записи в документ в нем будет "метаться" прямоугольник продолжения записи, как это происходит при загрузке документа.

События

Кроме методов  и свойств объекты характеризуются  событиями. Собственно, суть программирования на JavaScript заключается в написании обработчиков этих событий. Например, с объектом типа button (контейнер INPUT типа button - "Кнопка") может происходить событие click, т.е. пользователь может нажать на кнопку. Для этого атрибуты контейнера INPUT расширены атрибутом обработки события click - onClick. В качестве значения этого атрибута указывается программа обработки события, которую должен написать на JavaScript автор HTML-документа:

 

<INPUT TYPE=button VALUE="Нажать" onClick=

                    "window.alert('Пожалуйста, нажмите еще раз');">

 

Обработчики событий указываются в тех  контейнерах, с которыми эти события  связаны. Например, контейнер BODY определяет свойства всего документа, поэтому обработчик события завершения загрузки всего документа указывается в этом контейнере как значение атрибута onLoad.

Примечание. Строго говоря, каждый браузер, будь то Internet Explorer, Netscape Navigator или Opera, имеет свою объектную модель. Объектные модели разных браузеров (и даже разные версии одного) отличаются друг от друга, но имеют принципиально одинаковую структуру. Поэтому нет смысла останавливаться на каждой из них по отдельности. Мы будем рассматривать общий подход применительно ко всем браузерам, иногда, конечно, заостряя внимание на различиях между ними.

 

 

2. Описание проектного решения

 

Javascript подключается напрямую в HTML-файл. Самый простой способ - это написать javascript-команды внутрь тега <script> где-нибудь в теле страницы.

Подключение в любом  месте

<html>

<head>

<title>Органайзер</title>

</head>

<body bgcolor="FFCC66">

<font  size=8 color=#191970 face=Bookman Old Style><i><b><p align=right>Мой Органайзер</p></b></i></font>

<script LANGUAGE="Javascript">

function setCookie(name, value, expires, path, domain, secure)

 }

</script>

</body>

</html>

Рис. 1.

Когда браузер  читает HTML-страничку, и видит <script> - он первым делом читает и выполняет код, а только потом продолжает читать страницу дальше.

В этом примере  использовались следующие элементы.

<script type="text/javascript"> ... </script>

Тег <script> сообщает браузеру о том, что внутри находится исполняемый скрипт. Атрибут type говорит о том, что это javascript. Вообще говоря, атрибут может отсутствовать - разницы нет, но с точки зрения стандарта его следует указать.

Графика

Иллюстрации в тексте радуют глаз и делают документ более привлекательным. Пора и нам записать в свой актив  вывод картинок средствами HTML.

Формат JPG

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

Конечно, высокое качество отражается на размерах файла. Но формат JPG имеет одну особенность: в JPG-редакторе, при записи на диск, можно  указать ту степень качества, которая  нужна и, тем самым, балансируя на планке "качество-размер файла", достичь  нужного компромисса. В самом деле, если из миллиона цветов отсканированной фотографии оставить только 10 000, заменив остальные цвета на близкие -- на глаз такую подмену будет обнаружить практически невозможно, а размер файла существенно сократится.

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

 

Картинка в тексте

Картинку  можно помещать в документ почти  так же, как текстовый символ. Для вставки этого необычного знака нужно воспользоваться  командой <IMG>. Команда не имеет парного закрывающего тега, но имеет много атрибутов.

Атрибут src = имя файла

Самым главным  атрибутом команды является атрибут src, при помощи которого можно задать имя файла с картинкой. Например, команда <IMG src=img.gif> заставит браузер отобразить на экране графический файл img.gif из текущего каталога.