Введение

Дорогие ребята!

Вы держите в руках пособие по курсу для программистов,которые уже изучили основы программирования на языке "Java" и решили продолжить свое развитие.

В первом модуле курса на вас обрушилось много новой информации, при этом вы смогли не только наблюдать, но и лично участвовать в процессе создания компьютерной игры. Вы поняли, что за написанием компьютерной игры стоит определенный труд, который требует навыков и опыта программирования. Если эти трудности не испугали вас, то вы уже добились определенного результата.Давайте еще раз вспомним известную фразу: "Программистами не рождаются –программистами становятся!" Как и в любом другом деле вы сможете добиться результата, только если будете прилагать усилия. Важное качество в изучении программирования –это умение не сдаваться!

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

Наблюдая и изучая построение разносторонних приложений, вы сможете глубоко проникнуть в суть разработки программного обеспечения. Вы увидите, что существует много принципиально общего в создании как компьютерных игр, так и любых других приложений. Язык Java позволяет вам создавать приложения любого характера,реализовать любые ваши идеи. При этом вы можете создавать эти приложения не только для операционной системы Windows, но и для Mac OSи Linux, что особенно приятно, с учетом их возрастающей популярности.

Занятие 1.Обработка событий, связанных с устройством управления "мышь"

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

На этом занятии мы рассмотрим, как в приложениях, написанных на языке Java,можно использовать такой элемент управления, как мышь. У него есть следующие характеристики:

• Курсор мыши (т. е. его вид).По умолчанию курсор мыши представлен в виде стрелочки: , но при желании, этот курсор можно изменить программно на другое изображение:на любой из стандартных курсоров, которые предоставляются нам операционной системой, на свою картинку, небольшое изображение, которое будет являться курсором мыши.

• Клавиши мыши: левая клавиша мыши часто используется для того, чтобы что-то открыть (двойной щелчок мыши на ярлык программы на рабочем столе позволяет запустить программу) или захватить (при нажатой левой клавише мы можем перемещать объект по экрану(например, окно программы).

• Клавиши мыши: правая клавиша мыши часто используется,чтобы открыть так называемое контекстное меню (это меню содержит основные, наиболее часто используемые команды).

• Клавиши мыши: средняя клавиша мыши иногда присутствует у данного устройства и имеет функционал,сходный с левой клавишей.

• Колесико прокрутки используется для быстрого просмотра страниц программы.

• Положение курсора мыши на экране, которое характеризуется двумя составляющими– координатами курсора и расстоянием от верхней левой угловой точки экрана (отступ в пикселях).

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

В целом, принцип описания управления приложением с помощью мыши точно такой же, как и при анализе работы с клавиатурой –на основе обработчиков событий.

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

Запущенное приложение способно анализировать различные события,которые происходят с окном нашего приложения. События, связанные с работой мыши, можно обрабатывать точно так же, как мы обрабатывали события клавиатуры,создавая игру "Новогодний дождь" -подключив к приложению обработчики событий.

Работу сегодня, как и всегда, следует начать с создания нового проекта.

Вспомним!!!Чтобы открыть новый проект, необходимо открыть среду разработки Eclipse, выполнить команды: Файл "Создать" Проект Java, указать номер урока, в данном случае lesson13 и нажать на кнопку Готово. Появится папка под названием lesson13. Наведите на неё курсор мыши, нажав правую клавишу, выполните команду Создать Класс. Далее следует назвать будущую программу prog13, установить галочку public static void main.

У нас появляется заготовка программы, которая и будет использоваться в качестве файла для размещения программного кода. Обратите внимание: если у вас вдруг закрыто окно"Структура пакетов", которое отображается слева, его можно открыть из меню. Для этого в строке меню нужно будет выполнить следующую команду: "Окно" –"Показать панель"–"Структура пакетов". Окно вновь появится на экране (см.рис. 1.1):

Рис. 1.1

Появившиеся комментарии можно удалить. При помощи команды "Импорт", подключим библиотеки, которые понадобятся для создания приложения. Это библиотеки "javax.swing.*", "java.awt"и "java.awt.event.*;".

Вспомним!!!Библиотека «javax.swing.*» позволяет нам работать с окнами JFrame и позволяет создать окно нашего приложения. Библиотека «java.awt» позволяет работать с элементами окон и с элементами графики, которая воспроизводится внутри окна.Библиотека «java.awt.event» позволяет работать с обработчиками событий. Например, обработка событий мыши, клавиатуры, позволяет работать с таймером и др.

После подключения трех указанных выше библиотек, наш программный код приобретет следующий вид:

// Для работы с окнами import javax.swing.*; //Для работы с графикой import java.awt.*; //Для работы с обработчиками событий import java.awt.event.*; //Главный класс программы public class prog { // Главный метод, который запускает программу public static void main(String[] args) { } }

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

Создадим окно на основании класса, который будет описан чуть-чуть ниже. Назовем этот класс "okno".Переменная,соответствующая данному объекту будет иметь тип "window":

// Создание объекта окна

okno window = new okno();

Создадим класс под названием "okno" (под основным классом). Этот класс наследуется от класса JFrame. JFrame–это класс окон,которые используются в наших приложениях.Напомним, что наследование одного класса от другого определяется служебным словом"extends". У нас появился следующий участок программного кода:

//Класс окна

class okno extends JFrame

{

}

Теперь создадим конструктор класса. Напомним, что имя конструктора всегда совпадает с именем класса, а сам конструктор срабатывает при создании объекта. В этом конструкторе следует описать характеристики окна.Определим его расположение и размеры.Сделать это можно с помощью метода "setBounds". У данного метода существуют четыре параметра: первые два –это координаты расположения окна (верхней левой точки окна), следующие два - это ширина и высота окна. Таким образом, строка программного кода

setBounds(0,0,800,600);

означает, что окно будет располагаться, начиная с верхней левой угловой точки, ширина окна 800, а высота 600 пикселей.

При помощи метода "setTitle"можно указать заголовок окна –название, которое будет выводиться в верхней части. Наше окно можно будет назвать, например, "Управление приложением с помощью мыши". Получится следующая строка программного кода:

setTitle("Управление приложением с помощью мыши");

Если вы все сделали верно, то у вас на экране должен отображаться следующий программный код:

// Для работы с окнами import javax.swing.*; //Для работы с графикой import java.awt.*; //Для работы с обработчиками событий import java.awt.event.*; //Главный класс программы public class prog { // Главный метод, который запускает программу public static void main(String[] args) { // Создание объекта окна okno window = new okno(); } } //Класс окна class okno extends JFrame { // Конструктор класса окна public okno() { // Задание размеров и положения окна setBounds(0,0,800,600); // Задание заголовка окна setTitle("Управление приложением с помощью мыши"); }

Добавим панель для нашего окна. Создадим еще один класс,объекты которого будут иметь тип переменной "panel". Класс будет описан ниже, а мы с вами продолжим описывать класс "okno", и создадим объект типа "panel". У нас получится следующая строка программного кода:

panel pan = new panel();

Теперь свяжем окно с панелью. Для этого создадим переменную типа "container",которая и позволит связать окно с панелью.При помощи метода getContentPaneможно получить содержимое окна JFrame, а при помощи метода addдобавить панель, "вложить" ее в окно:

Container con = getContentPane();

con.add(pan);

Создадим класс с названием "panel".Класс наследуется от классаJPanel–от класса панелей окна. И именно внутри класса JPanel будут реализованы те самые элементы графики, которые должны присутствовать в нашем графическом редакторе.

Запустим программу на исполнение. Пока никакого результата не видно, т.к. в конструкторе класса окна не хватает еще одного важного метода - setVisible, который позволит отобразить созданное нами окно.Добавив этот метод в класс окна, получим следующий программный код:

public class prog { // Главный метод, который запускает программу public static void main(String[] args) { // Создание объекта окна okno window = new okno(); } } //Класс окна class okno extends JFrame { // Конструктор класса окна public okno() { // Задание размеров и положения окна setBounds(0,0,800,600); // Задание заголовка окна setTitle("Работа с мышью"); // Создание объекта панели panel pan = new panel(); // Получение содержимого(контента) окна Container con = getContentPane(); // Прикрепление(вложение) панели в окно con.add(pan); // Сделать окно видимым setVisible(true); } } //Класс панели, которая вложена в окно class panel extends JPanel { }

Перейдем к созданию инструментов рисования и палитры цветов нашего графического редактора.

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

Прежде всего, в классе"panel" добавим те переменные, которые будут использоваться внутри класса и понадобятся для реализации приложения.

Создадим массив, в котором будет храниться список цветов,использующихся в нашем приложении. Назовем массив "masColor".Массив будет типа "Color[]"(по англ. цвет). Напомним, что квадратные скобки говорят о том, что это массив:

// Массив цветов

Color[] masColor;

Теперь создадим переменную tCol,задав ей начальное значение 0.

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

// Переменная -отвечающая

// за текущий выбранный цвет

int tCol = 0;

Введем две переменные под названием mXи mY, в которых будут храниться координаты курсора мыши:

// Переменные для хранения

// координат мыши

int mX,mY;

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

Создадим переменную"flag" логического типа "boolean" (тоже "закрытую").Переменная будет принимать два значения:"true" ("истина"),если пользователь рисует, и "false"("ложь") –в противном случае.Присвоим ей начальное значение "false"("ложь"):

// Переменная - признак того,

// что пользователь рисует

Boolean flag=false;

При создании графического редактора не обойтись без конструктора класса. Конструктор называется так же, как и сам класс:

// Конструктор класса панели

public panel()

{

}

В этом классе понадобится метод paintComponent, при помощи которого можно будет производить рисование на нашей панели. В круглых скобках создадим переменную типа "graphics"с именем "GR", через которую будет происходить отображение тех элементов, которые должны присутствовать на нашей панели:

// Метод, который отрисовывает графические объекты на панели

public void paintComponent(Graphics gr)

{

}

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

Для удобства эти обработчики представлены ниже. Можно с ними познакомиться, а затем использовать их в нашем проекте внутри класса "panel":

public class myMouse1 implements MouseListener { // Щелчок кнопкой мыши public void mouseClicked(MouseEvent e) { } // Нажатие кнопки мыши public void mousePressed(MouseEvent e) { } // При отпускании кнопки мыши после нажатия public void mouseReleased(MouseEvent e) { } // При появлении курсора мыши на панели окна public void mouseEntered(MouseEvent e) { } // При выходе курсора мыши за пределы панели окна public void mouseExited(MouseEvent e) { } } public class myMouse2 implements MouseMotionListener { // При перемещении мыши с нажатой кнопкой - захват public void mouseDragged(MouseEvent e) { } // При перемещении мыши public void mouseMoved(MouseEvent e) { } }

В данном фрагменте программного кода представлены два класса:первый класс получил имя "My Mouse-1", второй класс - "My Mouse-2".Классы реализуют интерфейсы mouseListenerи MouseMotionListener,позволяющие обрабатывать события мыши.Слово "implements"означает, что реализуется интерфейс.Интерфейс –это список методов, которые вами используются. Например, интерфейс mouseListenerпредставляет собой пять методов, которые идут в списке класса:

- mouseClicked–срабатывает при щелчке по кнопке мыши;

- mousePressed–срабатывает при нажатии на кнопку мыши;

- mouseReleased– срабатывает,если пользователь отпускает клавишу мыши;

- mouseEntered–срабатывает при появлении курсора на панели окна;

- mouseExited– срабатывает,если курсор выходит за пределы окна.

Во втором классеMouseMotionListeneесть два метода:

- mouseDragged- анализирует перемещение мыши при нажатой левой кнопке.

- mouseMoved-анализирует сам факт перемещения курсора мыши по экрану.

Чтобы понять, как работают перечисленные нами обработчики,можно взять один из них (например,обработчик перемещений мыши) и,воспользовавшись командой println (вывод в консольное окно), вывести некоторые значения, которые меняются при изменении положения курсора мыши.

Строка

System.out.println;

позволяет вывести информацию в консольное окно. Консольное окно является для нас вспомогательным окном для анализа программы.

Если происходит событие,то вызывается нужный обработчик события (в зависимости от типа событий). В этом случае характеристики события передаются в его обработчик при помощи параметра типа"mouseEvent". Этот параметр носит имя "e". Через эту переменную можно получить характеристики данного события.

Если обратиться к переменной "e"и воспользоваться оператором".", можно увидеть список методов. Среди этих методов следует выбрать метод getX()- положение в пикселях от курсора мыши, то есть отступ его от левой части экрана. В этой же строчке следует поставить знак "+", прибавив к getX() несколько пробелов, заключенных в кавычки (в этом случае образуется отступ при выведении на экран, и смотреть будет удобнее). Теперь еще раз обратимся к переменной "e"и, снова воспользовавшись оператором "." ,выберем метод getY ()- отступ от верхней части экрана в пикселях:

// При перемещении мыши

public void mouseMoved(MouseEvent e)

{

// Вывод в консольное окно текущих координат

// курсора мыши X, Y

System.out.println(e.getX()+" "+e.getY());

}

Перед тем как запустить программу, следует открыть консольное окно, выполнив следующие команды: меню"Окно" > "Показать панель" > "Консоль" (см. рис. 1.2).

Рис. 1.2

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

Как вы помните, классы сами по себе в своем описании ничего не могут сделать, пока на их основании не будет создан объект, то есть пока тот или иной класс не будет применен. Чтобы применить эти классы, необходимо подключить обработку событий к нашей панели. Для этого в конструкторе панелей пропишем следующие строчки:

// Подключаем обработчики для мыши к нашей панели окна

addMouseListener(new myMouse1());

addMouseMotionListener(new myMouse2());

NewMyMouse-1()– это создание объекта на основании класса MyMouse-1, который содержит внутри себя пять методов.

NewMyMouse-2()– это создание объекта на основании второго класса,который содержит внутри себя два метода.

Эти две строчки подключили обработчики событий к нашей панели внутри окна. Теперь можно их обрабатывать.

Есть еще одна важная деталь, которую нужно учесть при создании нашего графического редактора. При работе с компьютерными приложениями часто открыто несколько окон. Если вы нажимаете клавиши мыши или клавиатуры, то эти события передаются, как правило, в то окно,с которым вы в данный момент работаете.Остальные окна в этот момент являются неактивными. Активное окно в этом случае принимает события. Чтобы окно имело возможность принимать события, необходимо применить метод SetFocusable ()со значением "true"("истина"):

//Делаем окно активным

SetFocusable (true);

Теперь можно запустить приложение на исполнение. Попробуйте перемещать курсор мыши, и вы заметите, что в консольном окне два значения - координаты по "x"и по"y"меняются.Таким образом, при перемещении курсора мыши срабатывают обработчики событий для перемещения курсора мыши. Другие обработчики событий работают по такой же схеме.

К описанию работы с мышью мы вернемся чуть ниже. А сейчас перейдём к созданию палитры цветов. Для этого переместимся в метод paintComponentи внутри его создадим семь фрагментов разного цвета.Эти фрагменты и будут являться панелью настройки, которая позволит пользователю выбрать нужный цвет. В нашей палитре будут присутствовать следующие цвета:

- черный (BLACK);

- зеленый (GREEN);

- синий (BLUE);

- красный (RED);

- желтый (YELLOW);

- белый (WHITE);

- оранжевый (ORANGE);

Сведения об этих цветах должны храниться в нашей программе. Эту информацию мы будем хранить в массиве.

Вспомним!!!Массивом называется набор однотипных данных. Это сложная структура, представляющая собой несколько областей оперативной памяти, находящихся последовательно, друг за другом. Эти ячейки связаны в единое целое. Можно сказать, что массив – это группа пронумерованных переменных, каждая из которых имеет свой номер (индекс) массива. Нумерация начинается с нуля.Обращение к элементам массива происходит через его индексы, указанные в квадратные скобки. Создается новый массив с помощью конструктора new (с англ. «новый»). Например:a = new int[3]; //создан массив из 3-х элементов типа int a[0]=5;//создан элемент с индексом 0 и значением 5 a[1]=7; // создан элемент с индексом 1 и значением 7 a[2]=9; // создан элемент с индексом 2 и значением 9

Создадим массив под названием masColor,который будет состоять из семи элементов–объектов класса Color:

masColor = new Color[7];

Важно!!!Класс Color используется для того, чтобы задать цвет для объекта. У класса Color есть конструкторы, которые позволяют определить цвет. Например, Color(int r, int g, int b);Этот конструктор создает цвет, смешивая три цвета с заданной интенсивностью. Аббревиатура RGB происходит от заглавных букв английского алфавита имен трех цветов (красный, зеленый, синий). Значения интенсивности задаются для каждой составляющей в интервале от 0 до 255.Если вы не хотите определять свой цвет, вызывая конструктор Color(), то вы можете воспользоваться уже определенными значениями цветов. Это статические переменные класса Color. Например, Color.black, Color.white, Color.yellow, Color.cyan, Color.magenta, Color.orange, Color.pink и пр. – английские названия цветов.

С помощью статических переменных класса Color,создадим семь значений нашего массива (цвета, которые мы будем использовать, определены были выше).Созданный массив будет иметь следующий вид:

// Создаем массив из семи элементов

masColor = new Color[7];

masColor[0] = Color.BLACK;

masColor[1] = Color.GREEN;

masColor[2] = Color.BLUE;

masColor[3] = Color.RED;

masColor[4] = Color.YELLOW;

masColor[5] = Color.WHITE;

masColor[6] = Color.ORANGE;

Для создания палитры можно воспользоваться уже знакомым нам циклом for.

Вспомним!!!Циклом называется алгоритм, в котором последовательность действий повторяется некоторое количество раз.Конструкция "цикл for" - описание одного из множества видов циклических алгоритмов. Данная конструкция используется в том случае, когда число повторений заранее известно. Количество повторений в цикле задается с помощью счетчика цикла, который обозначается буквой i. В целом, выглядит эта конструкция на языке Java следующим образом:for (int i=1; i<=a; i++) {Команды, которые необходимо выполнить а раз }for – служебное слово;i=1 – начальное значение счетчика цикла;i<=a - конечное значение счетчика цикла;i++ - увеличивает значение счетчика цикла на 1;в фигурных скобках перечисляются команды, которые необходимо повторить – это т. н. "тело цикла".

Приступим к созданию палитры цветов. Запишем служебное словоfor, а в круглых скобках укажем параметры счетчика цикла.Наши цветовые фрагменты будут иметь номера0, 1, 2, 3, 4, 5, 6.Следовательно, начальное значение нашего счетчика будет равно 0. А условие окончания повторений будет либо i<=6,либо i<7. Мы воспользуемся вторым вариантом. У нас должна получиться следующая конструкция:

// Рисуем семь прямоугольников

// в верхней части для выбора цвета

for (int i=0; i<7; i++)

{

}

Перейдем к написанию команд в теле цикла. У каждого нового прямоугольника цвет будет другим. Таким образом, мы будем менять цвет внутри цикла.Сделать это можно при помощи метода setColor()(в скобках в качестве параметра указывается нужный цвет). Цвет следует взять из массива цветов,который мы определяли выше. Цвет хранится в массиве, в ячейке с определенным индексом.Чтобы обратиться к тому или иному значению цвета, запишем наименование массива, а в квадратных скобках укажем нужный индекс.Мы должны обратиться к каждому цвету:сначала к значению цвета с индексом 0, потом1 и так далее до индекса 6. Счетчик нашего цикла принимает значения от 0 до 6, поэтому в теле цикла запишем команду:

// Устанавливаем цвет рисования

gr.setColor(masColor[i]);

Цвет установлен, теперь нарисуем прямоугольник этого цвета.

Для рисования прямоугольника воспользуемся методомfillRect (a,b,c,d),который имеет четыре параметра:

a,b –координаты верхней левой точки прямоугольной области.

с –ширина прямоугольной области.

d –высота прямоугольной области.

Предположим, что все цвета палитры будут располагаться в верхнем левом углу друг за другом. Таким образом, параметр b=0. Пусть каждый следующий прямоугольник смещается в правую сторону от предыдущего на 100 пикселей, тогда значение параметра а будетравнымi*100. Т.к. i–счетчик цикла, и его значение меняется, то параметрaбудет принимать значения: 0, 100, 200, 300, 400, 500 и 600.Ширину прямоугольной области можно сделать равной 100пикселей, высоту 50пикселей, тогдас=100, d=50 и команда для рисования прямоугольника в теле цикла будет следующей:

// Рисуем закрашенный прямоугольник

gr.fillRect(i*100, 0, 100, 50);

В результате действий цикла палитра цветов будет иметь следующий вид (см рис. 1.3):

Рис. 1.3

Теперь опишем выбор цвета в палитре. Если пользователь выбрал тот или иной цвет, то рисование на экране будет происходить выбранным цветом. Это событие нужно обязательно зафиксировать.

Для этого воспользуемся переменной flag типа "булево", которая нами была определена при создании класса "panel". Если значение переменной flag будет равноtrue ("истина"), тоэто свидетельствует о том,что пользователь нажал клавишу мыши,рисование в панели окна будет выполняться -в месте нахождения курсора отобразится маленький квадрат выбранного цвета. Иначе(если значение переменной flag будет равно false ("ложь")– клавиша мыши не нажата) рисование не выполняется.

Чтобы нарисовать квадрат, нужно запомнить выбранный пользователем цвет. Номер выбранного цвета сохраним в переменную tCol.Сам выбранный цвет можно получить, обратившись к массиву, указав в квадратных скобках переменную tCol: masColor[tCol].

Установив цвет, можно нарисовать маленький прямоугольник на экране шириной и высотой, например, всего три пикселя, с координатами выводаmXи mY (это две переменные,которые были объявлены при создании класса для хранения значений координат текущего положения курсора мыши).

На языке программирования Javaэто словесное описание будет иметь вид:

// Если признак рисования ИСТИНА - рисуем

// маленький квадрат выбранным цветом

// в точке, где находится курсор мыши

if (flag==true)

{

// Устанавливаем цвет рисования

gr.setColor(masColor[tCol]);

// Рисуем закрашенный маленький квадрат

gr.fillRect(mX, mY, 3, 3);

}

Опишем сам процесс рисования в окне графического редактора.

Вернемся к обработчикам событий при нажатии клавиши мыши. В первую очередь нам понадобится обработчик mousePressed. Внутри фигурных скобок данного метода пока ничего нет –добавим сюда переменные.

Первая переменная,tХ,будет хранить координату курсора мыши по X. Как получить эту координату?

Переменная с именем типа "mouseEvent"содержит в себе текущие характеристики события: положение курсора мыши, факт нажатия какой-то клавиши и др. С помощью переменной этого типа можно определить,какую именно клавишу нажал пользователь. В большинстве случаев используется мышь с тремя клавишами, нумерация клавиш в этом случае будет такой: 1, 2, 3 (если пользователь нажимает левую клавишу мыши, то это значит номер клавиши нажатой – 1 и т. д.).

Чтобы получить значение переменной tХ,следует обратиться к переменной e, которая указана как параметр в скобках, и оператором ".",вызвать методgetX() (получить координаты курсора мыши по X). Координата курсора мыши по X –это отступ от левой части нашего окна, а не от левой части экрана (!).Аналогичным образом передаем в переменнуюtYвторую координату курсора мыши. Таким образом, в обработчике mousePressed. у нас появятся строки:

// Получаем координаты мыши

int tX = e.getX();

int tY = e.getY();

Следующая переменная под названием "сol"будет хранить количество нажатий пользователя на клавишу мыши. Получить количество нажатий можно с помощью методаgetClickCount(): если пользователь нажал на клавишу один раз,метод возвратит значение 1, если пользователь сделал двойной щелчок мышью,соответственно, будет возвращено значение2:

// Получаем количество нажатий клавиши

int col = e.getClickCount();

Переменная "btn"будет хранить номер клавиши, которую нажал пользователь.Получить номер нажатой клавиши можно с помощью метода getButton ():

// Получаем номер нажатой клавиши - 1, 2 или 3

int btn = e.getButton();

Предположим, что выбор цвета будет происходить при нажатии на левую клавишу мыши, т.е. нужно чтобы значение переменной "btn"равнялось 1.

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

- пользователь выбрал цвет– нажал на кнопку мыши, когда ее указатель располагался на одном из цветных прямоугольников палитры. Здесь нужно проверить, что координаты мыши находятся обязательно внутри области палитры, т.е.должно выполняться условие: если tХ>0(tХ–это переменная,которая хранит значение координаты курсора мыши по X) и tХ<700.Кроме координаты X, нужно еще проверить и координатуYкурсора мыши.Т.к. высота прямоугольников палитры равна50, то условия будут следующими: tY>0иtY<=50. И общее условие, записанное на языкеJava, будет таким:

// Проверяем, что сейчас курсор находится в области выбора цвета

if ((tX>0) && (tX<700)&& (tY>0) && (tY<50))

{

}

Обратите внимание, что символы "&&"означают "И",т.е. нам нужно, чтобы выполнялось и условиеtX>0,иtX<700,иtY>0,иtY<50.

- пользователь щелкнул левой кнопкой мыши по прямоугольнику. Мы проверили предыдущим условием, что курсор мыши находится в пределах нашей палитры.Теперь убедимся, что пользователь нажал на один из прямоугольников. Количество нажатий хранится в переменной call.В нашем случае значение переменной должно равняться единице, т.к. для выбора цвета достаточно одного нажатия мыши.

- нажатая пользователем левая клавиша мыши. Номер нажатой клавиши хранит переменная btn,которая также должна быть равна единице (мы выбираем цвет левой клавишей мыши). Таким образом, собирая все эти условия, мы получим следующую систему вложенных условий:

// Проверяем, что сейчас курсор находится в области выбора цвета

if ((tX>0) && (tX<700)&& (tY>0) && (tY<50))

{

if (col==1)

{

if (btn==1)

{

}

}

}

Следующим шагом будет определение цвета, выбранного пользователем, и сохранение его номера в переменной tcal.Значение этой переменной будет равноtx/100. Почему?

Переменная tcal,объявленная в самой верхней части класса, является переменной целого типа, т.е. она может принимать только целые положительные и отрицательные значения.Переменная txсодержит координату курсора мыши по X. Если пользователь навел курсор на черный прямоугольник,примерно в центральную часть, и нажал на левую клавишу мыши, то tx?50. Если мы 50разделим на 100, то целая часть от деления будет равна 0. В случае, когда результат от деления присваивается переменной целого типа, дробная часть отбрасывается.Результат 50/100будет равен 0для переменной целого типа. Таким образом,значение переменной tcalбудет равно 0. Получается, что в зависимости от прямоугольника, на который щелкнул мышью пользователь, переменнаяtcalбудет принимать значения 0, 1, 2, 3, 4, 5, 6.А это как раз и есть номера элементов массива, который содержит цвета. 0, 1, 2, 3, 4, 5, 6.Один из этих цветов и будет устанавливаться при рисовании мышью в методе setColor-изменяя значение переменной, мы изменяем текущий цвет. Участок программного кода будет следующим:

// Проверяем, что сейчас курсор находится в области выбора цвета

if ((tX>0) && (tX<700)&& (tY>0) && (tY<50))

{

if (col==1)

{

if (btn==1)

{

tCol = tX / 100;

}

}

}

Переместимся во второй класс. Нам нужно описать метод перемещения мыши при нажатой левой кнопке (за данные манипуляции с мышью отвечает метод mouseDragged). Это как раз то событие, когда пользователь нажал левую клавишу мыши, ее держит и перемещает курсор мыши по экрану. В этот момент и должно происходить рисование. Нам потребуются координаты положения курсора мыши. Мы их получим с помощью уже знакомых методовgetX()и getY().В методе mouseDraggedзаписываем строки:

// Получение координат курсора мыши

int tX = e.getX();

int tY = e.getY();

Пользователь будет рисовать на рабочем поле графического редактора, расположенного ниже палитры цветов. Высота прямоугольника палитры равна 50.Следовательно, рисование возможно, если координата Yположения курсора мыши больше 50. Т.е.:

// Если кусор в той части, где можно рисовать

if (tY>50)

{

}

Если пользователь нажал левую кнопку в области окна редактора, то в месте положения курсора следует нарисовать маленький прямоугольник выбранным цветом. Для этого нужно запомнить текущие координаты положения курсора мыши и передать их внутрь методаfillRect()для отрисовки прямоугольника в данном месте.Для запоминания координат можно воспользоваться переменными mXи mY.Внутри конструкцииIfзаписываем строки:

// Запоминаем координаты мыши в переменных

mX = tX;

mY = tY;

Переменной flagприсвоим значение"true" ("истина").Это признак того, что пользователь действительно сейчас удерживает левую клавишу мыши и рисует. После установки значения переменной flag нужно вызвать методrepaint(). Методrepaint() –это перерисовка. Так как перерисовка области окна происходит не в постоянном режиме, мы должны ее вызвать явно.

Метод repaint() вызывает методрaintComponent- как только будет вызван repaint(), сразу срабатывает содержимое, описанное внутри метода рaintComponent. Таким образом, программный код в обработчике mouseDragged выглядеть так:

public void mouseDragged(MouseEvent e)

{

// Получение координат курсора мыши

int tX = e.getX();

int tY = e.getY();

// Если кусор в той части, где можно рисовать

if (tY>50)

{

// Запоминаем координаты мыши в переменных

mX = tX;

mY = tY;

// Признак, что пользователь рисует

flag=true;

// Вызов метода public void paintComponent(Graphics gr)

repaint();

}

}

Теперь проанализируем событие, проиходящее когда пользователь отпускает кнопку мыши. Для описания этого события перейдем в обработчик mouseReleased (в обработчик событий при "отпускании" кнопки мыши) и переменной flagприсваиваем значение "false" ("ложь").Т.е. когда пользователь отпустит левую клавишу мыши,значение этой переменной примет значение"ложь"и методрaintComponent уже не будет выполнять рисование.

Запустим наше приложение и протестируем его. Выберите,любой цвет, например, синий и начните рисовать. Нарисуйте линию –при нажатой левой клавиши мыши проведите указателем по экрану.

Теперь попробуйте курсор мыши перемещать быстро. Что вы видите? Изображение становится"обрывочным". Почему? Потому что принцип рисования в нашем графическом редакторе–вывод всего одной точки в текущем положении курсора.Если курсор перемещается медленно, то прямоугольники размером 3?3пикселя рисуются рядом, и линия получается сплошной. Но если курсор перемещается быстро, то эти точки будут разбросаны (см. рис. 1.4):

Рис. 1.4

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

Вот и мы в нашем приложении сделаем так, чтобы при выборе цвета курсор мыши выглядел таким же образом ( ), а за пределами палитры цветов возвращался к прежнему виду"стрелочка" ( ). Т.е. вид курсора будет меняться при различных событиях. Для описания этого события перейдем в обработчик mouseMoved (обработчик событий при перемещении курсора мыши). Нам нужно описать на языке Javaследующую последовательность действий:

- получить координаты курсора мыши;

- проверить, если координаты попадают в пределы палитры цветов, то курсор мыши примет вид .

- иначе (как только курсор окажется за пределами палитры)курсор приобретает обычный вид

Для получения координат указателя мыши, воспользуемся все теми же методами: getX() иgetY(). Условия попадания курсора мыши в пределы палитры мы уже записывали в методе mousePressed, они не изменились (см. выше). Таким образом,программный код метода будет следующим:

// При перемещении мыши

public void mouseMoved(MouseEvent e)

{

// Получение координат курсора мыши

int tX = e.getX();

int tY = e.getY();

// Проверка, что курсор находится в области выбора цветов

if ((tX>0) && (tX<700)&& (tY>0) && (tY<50))

{

}

else

{

}

}

Для изменения вида курсора используется setCursor().Новый объект типа "cursor" (cursor–это и есть курсор мыши) создается посредством метода new. Следовательно, в круглых скобках метода setCursor()следует записать: new cursor, а далее, опять же в круглых скобках,нужно указать непосредственно вид курсора.Нам понадобится два вида курсора: 1. вид"указательный палец"( )используется в пределах палитры и носит название "HAND_CURSOR"и вид "стрелочка"( )используется во всех остальных случаях и носит название "DEFAULT_CURSOR".Таким образом, если нам нужен вид "указательный палец"( ), мы записываем команду:

setCursor(new Cursor(Cursor.HAND_CURSOR));

Если нам нужен вид курсора "стрелочка"( ), мы записываем команду:

setCursor(new Cursor(Cursor.DEFAULT_CURSOR));

Вставив эти строчки программного кода в метод mouseMoved, получим следующее:

// При перемещении мыши

public void mouseMoved(MouseEvent e)

{

// Получение координат курсора мыши

int tX = e.getX();

int tY = e.getY();

// Проверка, что курсор находится в области выбора цветов

if ((tX>0) && (tX<700)&& (tY>0) && (tY<50))

{

// Установка курсора ввиде пальца

setCursor(new Cursor(Cursor.HAND_CURSOR));

}

else

{

// Установка обычного курсора ввиде стрелочки

setCursor(new Cursor(Cursor.DEFAULT_CURSOR));

}

}

Запустим наше приложение на исполнение. Для тестирования программы наведем курсор мыши на область палитры, он примет следующий вид (см. рис.1.5):

Рис. 1.5

Как только курсор мыши выходит за пределы палитры, он принимает обычный вид "стрелочки".

Таким образом, мы с вами рассмотрели основные элементы при работе с мышью: выделили семь видов событий, которые можно обрабатывать, и посмотрели, как можно ими пользоваться.

Конструкцию,позволяющую отслеживать работу мыши (она представлена в виде двух классов myMouse1 и myMouse2) и команды подключения обработчиков событий к панели можно сохранить в виде "рецепта" в обычный текстовый файл, а потом использовать его при создании других приложений. Содержимое самих методов обработки событий можно удалить, потому что в данном случае они прописаны только для текущей задачи.

Чтобы лучше понять, как работают обработчики событий для мыши,можно каждый обработчик попробовать вставить в консольное окно system.out.println (мы использовали это окно в самом начале).

В консольное окно можно поочередно вставлять в разные методы для обработки событий и внутри круглых скобок указывать те параметры, которые вас интересуют. Например, вставив параметрbtn, можно увидеть, как этот параметр меняет свое значение: при нажатии на клавишу мыши один раз - появляется первое его значение1, при повторном нажатии - появляется значение 2 и т.д.

Таким образом, мы с вами рассмотрели самые основные моменты,связанные с обработкой событий мыши. Их вполне достаточно для того, чтобы использовать мышь в ваших приложениях на языке Java.

Занятие 2.Проектирование интерфейса пользователя

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

На предыдущих занятиях мы создавали оконные формы, внутри которых размещали панель. На панели выводили некоторые графические объекты.

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

При помощи элементов интерфейса мы создадим новое приложение под названием "Калькулятор",которое будет производить некоторые арифметические расчеты.

Создадим новый проект обычным образом.

Вспомним!!!Чтобы открыть новый проект, необходимо открыть среду разработки Eclipse, выполнить команды: Файл ? Создать ? Проект Java, указать номер урока, в данном случае lesson14 и нажать на кнопку Готово. Появится папка под названием lesson14. Наведите на неё курсор мыши, нажав правую клавишу, выполните команду Создать ? Класс. Далее следует назвать будущую программу prog14, установить галочку public static void main.

Весь процесс добавления элементов на форму условно можно разбить на следующие шаги:

Шаг 1:

Создается переменная определенного типа (в зависимости от выбранного элемента "кнопка", "переключатель", "список" и др.).

Шаг 2:

Задаются свойства элемента (ширина, высота, цвет текста надписи, шрифт и др.).

Шаг 3:

Подключаются обработчики событий.

Шаг 4:

Созданный элемент отображается на панели, размещенной внутри оконной формы JFrame.

Создадим приложение,которое будет выводить окно определенных размеров, внутри которого будет находиться панель.

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

Нам понадобятся в очередной раз три библиотеки: javax.swing.*, Java. awt.* и java.awt.event.*, которые позволят работать с оконными формами, с элементами интерфейса пользователя, с элементами графики,обработчиками событий и др.

В данном приложении нам понадобится единственный обработчик события –это обработчик события нажатия на кнопку.

Внутри метода mainсоздадим новый объект – окно.Новая переменная будет иметь тип "okno":

// Создаем объект окна

okno nf = new okno();

Таким образом, объект создан ранее, чем сам класс. Программный код на данном этапе будет иметь следующий вид:

//Подключаем библиотеки import javax.swing.*; import java.awt.*; import java.awt.event.*; public class prog { public static void main(String[] args) { // Создаем объект окна okno nf = new okno(); } }

Теперь можно перейти к созданию нового класса. Класс будет называться "okno"и наследоваться от класса JFrame. Напомним, что если класс наследуется от класса JFrame, он сразу же получает весь функционал, который есть в классе JFrame.Следовательно, объекты нового класса будут являться окнами:

// Создаем класс окна,наследуется от класса JFrame

class okno extends JFrame

{

}

Внутри этого класса создадим конструктор класса (имя конструктора всегда совпадает с именем класса), внутри которого укажем начальные характеристики окна для отображения его на экране. Характеристики можно указать,воспользовавшись уже знакомой командойsetBounds:

// Устанавливаем расположение и размеры окна

setBounds(0, 0, 800, 600);

Первые два параметра команды setBounds–это координаты его верхней левой угловой точки. Мы поставили значение 0,0.Следовательно,верхний левый угол окна будет размещаться четко по левому верхнему углу экрана.Третий параметр (600пикс.) –это ширина окна, а последний, четвертый параметр (500пикс.) – высота окна.

Можно установить заголовок окна, воспользовавшись методомsetTitle:

//Устанавливаем заголовок окна

setTitle ("Калькулятор");

Чтобы форма окна отображалась на экране, воспользуемся методом setVisibleсо значением "true" ("истина"):

// Показываем(отображаем) окно

setVisible(true);

В целом, программный код будет выглядеть так:

//Подключаем библиотеки import javax.swing.*; import java.awt.*; import java.awt.event.*; public class prog { public static void main(String[] args) { // Создаем объект окна okno nf = new okno(); } } // Создаем класс окна,наследуется от класса JFrame class okno extends JFrame { { } // Конструктор класса окна public okno() { // Устанавливаем расположение и размеры окна setBounds(0, 0, 800, 600); //Устанавливаем заголовок окна setTitle ("Калькулятор"); // Показываем(отображаем) окно setVisible(true); } }

Можно запустить программу на исполнение. Если ошибок в программном коде нет, то на экране появится окно с названием "Калькулятор", шириной 600пикс., высотой 500 пикс., а его верхний левый угол четко совпадет с углом экрана, т. е. без отступов сверху и слева.

Теперь свяжем панель типа JPanelи оконную форму. Для этого в самом начале конструктора класса окна создадим переменную contтипа "container". При помощи метода getContentPaneможно получить в эту переменную контент окна. Контент окна –это его содержимое.Переменная типа "container"позволяет вложить панель JPanelв нашу оконную форму JFrame:

// Создаем переменную для достпуа к содержимому окна

Container cont = getContentPane();

Теперь создадим переменную panтипа JPanel –это и есть наша панель:

//Создаем панель для окна

JPanel pan = new JPanel();

Обратимся к переменнойcont, чтобы при помощи метода addдобавить панель к нашему окну:

// Прикрепляем панель к окну

cont.add(pan);

Запустим приложение на исполнение, но никаких визуальных изменений не увидим.

Вспомним!!!Окно JFrame – это окно, которое находится перед нашими глазами: мы видим его заголовок, рамку. Панель JPanel – это прямоугольная область, которая вложена в рамку окна. Но визуально она не наблюдается, потому что ее цвет совпадает с цветом фона, который стоит у окна по умолчанию. Можно представить, что панель JPanel - это такой элемент, который вложен в окно JFrame и к которому прикрепляются различные элементы формы - кнопки, надписи, текстовые поля, элементы графики и др.

А теперь нужно создать интерфейс, который необходим для нашего калькулятора. Нам понадобятся следующие элементы:

- кнопки, которые отображают все цифры от 0 до 9;

- кнопки, которые отображают арифметические операции ("+", "-", "*", "/");

- кнопка "Равно";

- кнопка "Очистить поле";

- кнопка "Выход";

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

Наш будущий калькулятор будет выглядеть примерно так (см. рис.2.1):

Рис.2.1

Создадим в классе "okno"несколько переменных, которые будут использоваться внутри нашего класса. Первая переменнаяtextбудет закрытой, т.е. доступной только внутри класса и иметь тип JTextArea (текстовое поле, в которое пользователь может ввести какой-то текст).

// Текстовое поле для результата

private JTextArea text;

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

Создадим две переменные типа "double",которые будут хранить результаты для арифметических операций. Арифметические операции у нас будут проводиться с двумя числами. Переменная р1будет хранить первое число, а переменная p2будет хранить второе число (это те числа,которые будет вводить пользователь):

//Две переменные для хранения двух введенных чисел

private double p1=0,p2=0;

Предположим, что каждая наша арифметическая операция будет соответствовать определенной цифре.Например:

сложение – 1;

вычитание – 2;

умножение – 3;

деление – 4;

Номер арифметической операции будет хранить переменная oper. Эта переменная будет являться переменной целого типа с начальным значением 0. Когда пользователь будет нажимать на кнопку операции, значение переменнойoperбудет принимать значение 1, 2, 3 или 4:

//Тип операции,выбранной пользователем

private int oper=0;

А теперь приступим к реализации интерфейса пользователя.Предположим, что на панель можно добавлять элементы формы в произвольном размещении,т.е. можно указывать их отступы от краев формы в произвольном виде. Такая настройка напоминает размещение тэгов наhtml-странице. Для создания настройки воспользуемся методом setLayoutсо значением"null":

//Включаем возможность произвольного размещения

//всех элементов формы(кнопок, текстовых полей и т.д.)

pan.setLayout(null);

Можно также добавить несколько различных шрифтов для кнопок,надписей и текстового поля. Чтобы задать шрифт, нам нужно создать переменную типа"font"и указать конкретные характеристики шрифта.Создадим новый объект с именем переменнойbtnFontи с типом"font":

Font btnFont = new Font("serif",0,20);

В круглых скобках указаны следующие параметры: "serif"–имя шрифта; 0–стиль отображения (0- обычный (прямой), 1 - жирный, 2 - курсив и т.д.); 20–размер шрифта. Эти параметры должны быть вам известны по использованию различных программ –текстовых,табличных редакторов и др. В таких программах можно выбирать шрифт с определенным наименованием, можно указывать его размер, стиль. Создадим еще два шрифта:

Font labFont = new Font("arial",1,30);

Font textFont = new Font("arial",2,30);

Шрифт btnFontбудет использоваться для надписи на кнопках,labFont–для вывода текстовых надписей, textFont–для вывода в текстовое поле результата арифметических вычислений.

Теперь создадим элементы формы –кнопки. Кнопка имеет вид JButton. Для создания кнопки, следует задать имя переменной и создать новый объект JButton. В круглых скобках(без использования кавычек) можно указать ту надпись, которая будет выводиться на этой кнопке: Как только переменная JButtonбудет создана, то,обращаясь к этой переменной по имени, можно задавать ее свойства. Свойства можно задать с помощью следующих методов:

setSize (a,b)позволяет указать ширину и высоту. В скобках указываются значения параметров: a–ширина кнопки, b –высота кнопки.

setFont (c) позволяет указать шрифт, который будет использоваться для отображения надписи на этой кнопке. В скобках указывается нужный шрифт.

setLocation (a,b)позволяет указать отступы ее верхней угловой точки от верхней угловой точки панели.

Мы создадим кнопку со следующими значениями параметров:

// Создаем кнопку

btn[i] = new JButton();

// Устанавливаем размер

btn[i].setSize(100, 25);

// Устанавливаем шрифт

btn[i].setFont(btnFont);

// Устанавливаем ее расположение

btn[i].setLocation(100, 100);

Добавим кнопку к панелиJPanel при помощи метода add:

pan.add(btn)

В целом, программный код будет иметь следующий вид:

//Подключаем библиотеки import javax.swing.*; import java.awt.*; import java.awt.event.*; public class prog { public static void main(String[] args) { // Создаем объект окна okno nf = new okno(); } } // Создаем класс окна,наследуется от класса JFrame class okno extends JFrame { // Текстовое поле для результата private JTextArea text; // Две переменные для хранения двух введенных чисел private double p1=0,p2=0; // Тип операции,выбранной пользователем private int oper=0; { } // Конструктор класса окна public okno() { // Создаем переменную для достпуа к содержимому окна Container cont = getContentPane(); // Создаем панель для окна JPanel pan = new JPanel(); // Включаем возможность произвольного размещения // всех элементов формы(кнопок, текстовых полей и т.д.) pan.setLayout(null); // Создаем три шрифта для кнопок, надписей и текстовых полей Font btnFont = new Font("serif",0,20); Font labFont = new Font("arial",1,30); Font textFont = new Font("arial",2,30); // Создаем кнопку btn[i] = new JButton(); // Устанавливаем размер btn[i].setSize(100, 25); // Устанавливаем шрифт btn[i].setFont(btnFont); // Устанавливаем ее расположение btn[i].setLocation(100, 100); // Прикрепляем кнопку к панели pan.add(btn); } // Прикрепляем панель к окну cont.add(pan); //Устанавливаем расположение и размеры окна setBounds(0, 0, 800, 600); //Устанавливаем заголовок окна setTitle ("Калькулятор"); // Показываем(отображаем) окно setVisible(true); } }

Запустим приложение на исполнение. Мы увидим кнопку,расположенную на панели окна приложения(см. рис. 2.2):

Рис. 2.2

По подобной схеме добавляются различные элементы на оконную форму приложения. Большинство элементов интерфейса имеют следующие характеристики:

- текстовое представление, например, текстовое представление кнопки – это та надпись, которая указывается на ней;

- размеры–ширина и высота;

- шрифт–используется для вывода текстовых надписей;

- расположение–отступы от верхней левой части панели, которые необходимы для отображения элемента в нужном месте.

Нам понадобится семнадцать кнопок, поэтому для удобства лучше все кнопки поместить в массив.Поэтому блок, в котором мы описали процесс создания кнопки:

// Создаем кнопку btn[i] = new JButton(); // Устанавливаем размер btn[i].setSize(100, 25); // Устанавливаем шрифт btn[i].setFont(btnFont); // Устанавливаем ее расположение btn[i].setLocation(100, 100); // Прикрепляем кнопку к панели pan.add(btn);

нужно удалить, и перейти к созданию массива кнопок:

JButton[] btn = new JButton[17];

btn–имя массива кнопок.Напомним, что квадратные скобки говорят о том, что мы создали массив. JButton–тип элементов массива. В правой части в квадратных скобках указывается количество элементов в массиве. Теперь нужно добавить в массив сами элементы. Добавлять элементы будем с помощью цикла for. В цикле зададим характеристики для всех кнопок, которые будут присутствовать в массиве. Так как нумерация элементов массива начинается с нуля, переменной целого типа под названием i (счетчик цикла)присвоим начальное значение 0. Кроме того, элементов в нашем массиве должно быть 17. Следовательно нужно указать условие: пока i<17; i++. Данное условие означает, что переменная iбудет увеличиваться на единицу на каждом шаге цикла. Таким образом, переменные будут принимать значения 0,1,2...16:

// Устанавливаем для всех кнопок один шрифт и

// и одинаковый размер,подключаем обработчик события

// и сразу прикрепляем кнопки к панели

for (int i=0;i<17;i++)

{

}

Будет создаваться новая кнопка, которая помещается в массив btn.При создании кнопки в цикле следует обратиться к элементу массива, указав в квадратных скобках счетчик i:

// Создаем кнопку

btn[i] = new JButton();

Затем указываем размеры кнопки: ширина пусть будет равна 100, а высота - 25:

// Устанавливаем размер

btn[i].setSize(100, 25);

Укажем шрифт, который будет использоваться при создании надписи на кнопках:

// Устанавливаем шрифт

btn[i].setFont(btnFont);

btnFont–это тот шрифт, который мы определили выше.

При помощи методаsetLocationнужно указать координаты размещения кнопки на панели:

// Устанавливаем ее расположение

btn[i].setLocation(30, 50 + i*30);

Значение 30–это отступ в пикселях от левой части панели. Значение второго параметра записано в виде формулы:50 + i ? 30. Таким образом, отступ от верхней части панели для каждой кнопки будет каждый раз увеличиваться на 30пикс., и получится так, что каждая последующая кнопка будет находиться ниже, чем предыдущая кнопка.

Добавляем кнопку к панели:

//Прикрепляем кнопку к панели

pan.add(btn[i]);

Программный код на данном этапе нашей работы получился следующим:

//Подключаем библиотеки import javax.swing.*; import java.awt.*; import java.awt.event.*; public class prog { public static void main(String[] args) { // Создаем объект окна okno nf = new okno(); } } // Создаем класс окна,наследуется от класса JFrame class okno extends JFrame { // Текстовое поле для результата private JTextArea text; // Две переменные для хранения двух введенных чисел private double p1=0,p2=0; // Тип операции,выбранной пользователем private int oper=0; // Метод для обработки нажатия клавиш private void btnClick(JButton btn) { } // Конструктор класса окна public okno() { // Создаем переменную для достпуа к содержимому окна Container cont = getContentPane(); // Создаем панель для окна JPanel pan = new JPanel(); // Включаем возможность произвольного размещения // всех элементов формы(кнопок, текстовых полей и т.д.) pan.setLayout(null); // Создаем три шрифта для кнопок, надписей и текстовых полей Font btnFont = new Font("serif",0,20); Font labFont = new Font("arial",1,30); Font textFont = new Font("arial",2,30); // Создаем массив из 17кнопок JButton[] btn = new JButton[17]; // Устанавливаем для всех кнопок один шрифт и // и одинаковый размер,подключаем обработчик события // и сразу прикрепляем кнопки к панели for (int i=0;i<17;i++) { // Создаем кнопку btn[i] = new JButton(); // Устанавливаем размер btn[i].setSize(100, 25); // Устанавливаем шрифт btn[i].setFont(btnFont); // Устанавливаем ее расположение btn[i].setLocation(30, 50 + i*30); // Прикрепляем кнопку к панели pan.add(btn[i]); } // Создаем текстовую надпись JLabel lab = new JLabel("Результат: "); // Устанавливаем шрифт lab.setFont(labFont); // Устанавливаем размеры lab.setBounds(130, 0, 300, 50); // Прикрепляем надпись к панели pan.add(lab); // Прикрепляем панель к окну cont.add(pan); // Устанавливаем расположение и размеры окна setBounds(0, 0, 800, 600); //Устанавливаем заголовок окна setTitle ("Калькулятор"); // Показываем(отображаем) окно setVisible(true); } }

Можно запустить наше приложение. На экране должно появится окно под названием "Калькулятор". На панели окна располагаются 17 кнопок одинакового размера (см. рис. 2.3):

Рис. 2.3

Так как кнопок довольно много, то все они могут не поместиться на форму. В этом случае размер окна можно увеличить, изменив значение последнего параметра в методе setBounds():

// Устанаваливаем расположение и размеры окна

setBounds(0, 0, 800, 600);

Чтобы кнопка работала,ее не достаточно просто отобразить на экране. К ней нужно добавить обработчик события. Добавлять обработчик мы будем к каждой из 17-ти кнопок. Поэтому в циклеfor, с помощью которого мы добавляли кнопки, перед тем,как прикрепить кнопку к панели, нужно добавить следующие строки:

// Подключаем обработчик события

btn[i].addActionListener(new ActionListener()

{

// Метод, который выполняется при нажатии кнопки

public void actionPerformed(ActionEvent e){

// Вызов метода для обработки нажатия клавиш

btnClick((JButton)e.getSource());

}});

Таким образом, мы обращаемся к очередному элементу массива и вызываем метод addActionListener().В круглых скобках метода addActionListenerзапишем"new ActionListener".

Если вы начнете записывать название этого метода: new Action, - и нажмете комбинацию клавиш Ctrl+"Пробел", то у вас открывается окно подсветки. В этом окне вы найдете единственный метод –ActionListener. При нажатии на клавишу Enterсреда разработки автоматически вставляет его содержание: newActionListener–это новый класс, actionPerformed–метод,который появился внутри этого класса.

При помощи методаActionListenerмы подключили обработчик события ко всем кнопкам, которые находятся на форме. МетодactionPerformed –это метод, который срабатывает при нажатии на кнопку.

Внутри метода actionPerformedможно записать программный код, который будет срабатывать при нажатии на кнопку. Для примера запишите следующую команду:

JOptionPane.showMessageDialog (null, "Привет!");

Внутри метода showMessageDialogуказаны два параметра. Первый параметр –так называемое"родительское окно"данного диалогового окна, а второй параметр – это то сообщение, которое будет выводиться при нажатии на кнопку. Родительского окна у нас нет, поэтому в качестве первого параметра указываем значение "null"(пустой параметр, пустое значение). Можно запустить программу на исполнение и попробовать нажать на одну из кнопок. На экране должно появиться диалоговое окно, в котором выведено сообщение –"Привет!" (см. рис. 2.4):

.

Рис. 2.4

Т.к. обработчик событий подключен в цикле for, то, очевидно, при нажатии на любую из этих кнопок будет появляться данное диалоговое окно. Данную команду удалим, т.к.она была демонстрационной.

Нам нужно описать метод,который будет обрабатывать нажатие на кнопку –btnClick().Внутри этого метода будет анализироваться, какая именно кнопка была нажата: цифра от 0 до 9,арифметическая операция, символ равенства,кнопка, очищающая поле вывода результата,кнопка выхода. И в зависимости от того,какая именно кнопка нажата, будут производиться те или иные действия.

В параметр этого метода(в круглых скобках) передадим ту кнопку,которая нажата в текущий момент. При помощи переменной типа ActionEvent, находящуюся в круглых скобках метода actionPerformed,можно получить характеристики события,произошедшего в текущий момент. Например,обратившись к этой переменной через оператор ".", при помощи метода getSource()можно получить ту кнопку, которая сейчас нажата. Запишем следующую команду:

//Вызов метода для обработки нажатия клавиш

btnClick((JButton)e.getSource());

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

Теперь создадим непосредственно сам метод btnClick().Он будет располагаться над конструктором класса,под объявлением переменных класса. Этот метод будет закрытым, поэтому записываем слово private("закрытый"). Поскольку этот метод не возвращает значение, нужно указать слово void:

// Метод для обработки нажатия клавиш

private void btnClick(JButton btn)

{

}

В круглых скобках мы указали переменную типаJButtonс именемbtn.Внутреннюю часть метода пока не записываем. Но следует понимать, что этот метод будет каждый раз вызываться при срабатывании одной из кнопок. И для того чтобы это продемонстрировать, можно уже внутри метода btnClick()записать тот же самый метод вызова диалогового окна с двумя параметрами:родительское окно (значение null) и сообщение:

JOptionPane.showMessageDialog (null, "Кнопка нажата!");

Если вы попробуете запустить приложение на исполнение, то при нажатии на кнопку появится диалоговое окно с сообщением "Кнопка нажата!" (см. рис. 2.5):

Рис. 2.5

Команды метода btnClick()будут описываться уже после того, как будет полностью реализован оконный интерфейс.

Возвратимся к реализации интерфейса. Теперь нам нужно,чтобы на кнопках, которые отображаются на форме, выводились определенные надписи–цифры от 0 до9, знаки арифметических операции и др.Начнем с указания цифр.

Создадим еще один цикл со счетчиком i.Условие работы цикла: пока i< 10, значение счетчика увеличивается на 1. Внутри цикла записываем следующую команду: обращаемся к массиву btn, в квадратных скобках указав счетчик i, и вызываем методsetText().Внутри метода setTextзаписываем следующую конструкцию: ""+i (""–пустая строка, то есть строка, в которой нет символов). Такая форма записи нужна для того, чтобы числовую переменную целого типа, которой является у нас счетчик, перевести в строковый тип.Дело в том, что метод setTextтребует, чтобы в его круглых скобках была указана переменная типа "string"(строка). Таким образом, наш цикл примет следующий вид:

for (int i=0;i<10;i++) btn[i].setText(""+i);

Программный код должен выглядеть так:

//Подключаем библиотеки import javax.swing.*; import java.awt.*; import java.awt.event.*; public class prog { public static void main(String[] args) { // Создаем объект окна okno nf = new okno(); } } // Создаем класс окна,наследуется от класса JFrame class okno extends JFrame { // Текстовое поле для результата private JTextArea text; // Две переменные для хранения двух введенных чисел private double p1=0,p2=0; // Тип операции,выбранной пользователем private int oper=0; // Метод для обработки нажатия клавиш private void btnClick(JButton btn) { } // Конструктор класса окна public okno() { // Создаем переменную для достпуа к содержимому окна Container cont = getContentPane(); // Создаем панель для окна JPanel pan = new JPanel(); // Включаем возможность произвольного размещения // всех элементов формы(кнопок, текстовых полей и т.д.) pan.setLayout(null); // Создаем три шрифта для кнопок, надписей и текстовых полей Font btnFont = new Font("serif",0,20); Font labFont = new Font("arial",1,30); Font textFont = new Font("arial",2,30); // Создаем массив из 17кнопок JButton[] btn = new JButton[17]; // Устанваливаем для всех кнопок один шрифт и // и одинаковый размер,подключаем обработчик события // и сразу прикрепляем кнопки к панели for (int i=0;i<17;i++) { // Создаем кнопку btn[i] = new JButton(); // Устанавливаем размер btn[i].setSize(100, 25); // Устанавливаем шрифт btn[i].setFont(btnFont); // Устанавливаем ее расположение btn[i].setLocation(30, 50 + i*30); // Подключаем обработчик события btn[i].addActionListener(new ActionListener() { // Метод, который выполняется при нажатии кнопки public void actionPerformed(ActionEvent e){ // Вызов метода для обработки нажатия клавиш btnClick((JButton)e.getSource()); }}); // Прикрепляем кнопку к панели pan.add(btn[i]); } // Формируем надписи на кнопках for (int i=0;i<10;i++) btn[i].setText(""+i); // Устанавливаем размеры lab.setBounds(130, 0, 300, 50); // Прикрепляем надпись к панели pan.add(lab); // Прикрепляем панель к окну cont.add(pan); // Устанаваливаем расположение и размеры окна setBounds(0, 0, 800, 600); //Устанавливаем заголовок окна setTitle ("Калькулятор"); // Показываем(отображаем) окно setVisible(true); } }

Запустите программу на исполнение –первые десять кнопок должны получить свои наименования –цифры от 0 до 9.

Рис. 2.6

В данном случае цикл использовался для того, чтобы задать наименования кнопок в автоматическом режиме. Но, к сожалению, такая операция автоматически не может быть выполнена к другим кнопкам, потому что их названия уже не поддаются какой-то закономерности. У нас с вами остались кнопки, т.е. элементы массива кнопок, с номерами 10, 11, 12, 13, 14, 15, 16.Обратимся к каждой из оставшихся кнопок по ее номеру и укажем с помощью метода setText() их названия: "+", "-", "/", "*", "=", "С", "Выход". Таким образом, мы получим следующие строчки:

btn[10].setText("+");

btn[11].setText("-");

btn[12].setText("/");

btn[13].setText("*");

btn[14].setText("=");

btn[15].setText("C");

btn[16].setText("Выход");

Запустим вновь программу на исполнение –все кнопки получили свои наименования (см. рис. 2.7):

Рис. 2.7

Переходим к размещению на форме окна текстовой надписи. Текстовая надпись JLabel–надпись,которая выводится на форму. Нам нужно создать переменную типа JLabelпод названиемlebи новый объект типа JLabel.В круглых скобках записываются символы,которые нужно вывести. Мы выведем надпись: "Результат: ":

// Создаем текстовую надпись

JLabel lab = new JLabel("Результат: ");

После создания самого объекта можно указать его свойства:

- шрифт. Воспользуемся шрифтом Lebfont,который был определен выше:

// Устанавливаем шрифт

lab.setFont(labFont);

- отступы от левой верхней части экрана, ширина и высота области, в которой будет находиться надпись. Зададим эти параметры при помощи метода setDown():

// Устанавливаем размеры

lab.setBounds(130, 0, 300, 50);

130 и 0– это отступы от левой и верхней части экрана, 300–ширина области, в которой будет располагаться надпись,50– высота этой области.

После указания характеристик, текстовую надпись следует прикрепить к панели при помощи методаadd:

// Прикрепляем надпись к панели

pan.add(lab);

Запустите программу на исполнение –на форме окна приложения должна появиться надпись "Результат: " (см. рис. 2.8):

Рис. 2.8

Теперь нам осталось определить текстовое поле для вывода результата. Для создания такого поля будем использовать переменную с названиемtext. Это переменная типа "текстовое поле", которая определена в самом вверху класса.Поскольку переменная уже определена, можно записать ее имя и создать новый объект:

//Создаем текстовое поле

text = new JTextArea();

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

- шрифт. Вновь воспользуемся шрифтом, который определили выше –Text Font:

//Устанавливаем шрифт

text.setFont(textFont);

- отступы от левой верхней части экрана, ширина и высота текстового поля, которые можно задать с помощью методаsetDown():

//Устанавливаем размеры текстового поля

text.setBounds(300, 10, 300, 35);

- цвет текста, который будет вводиться в это поле. Цвет текста можно указать при помощи метода setForground().Создадим новый объект под названием Color (с помощью методаnew), с указанием параметров R, G, B.Это три составляющих цвета,соответственно, R("red")–красный, G("green") –зеленый и B("blue")–синий. Все три составляющие могут принимать значения от0до 255. Если значение GиBравно 0, а значение B числу, то мы получим синий цвет определенного оттенка, например:

// Устанавливаем цвет текста ТЕМНО-СИНИЙ

text.setForeground(new Color(0,0,100));

- цвет фона текстового поля. Выберем в качестве фонового цвета белый цвет. Его можно задать при помощи метода setBackground()и перечисления Color:

// Устанавливаем фон текстового поля - БЕЛЫЙ

text.setBackground(Color.WHITE);

После указания свойств,текстовое поле следует прикрепить к окну при помощи метода add:

// Прикрепляем текстовое поле к панели

pan.add(text);

Таким образом,программный код будет иметь следующий вид:

//Подключаем библиотеки import javax.swing.*; import java.awt.*; import java.awt.event.*; public class prog { public static void main(String[] args) { // Создаем объект окна okno nf = new okno(); } } // Создаем класс окна,наследуется от класса JFrame class okno extends JFrame { // Текстовое поле для результата private JTextArea text; // Две переменные для хранения двух введенных чисел private double p1=0,p2=0; // Тип операции,выбранной пользователем private int oper=0; // Метод для обработки нажатия клавиш private void btnClick(JButton btn) { } // Конструктор класса окна public okno() { // Создаем переменную для достпуа к содержимому окна Container cont = getContentPane(); // Создаем панель для окна JPanel pan = new JPanel(); // Включаем возможность произвольного размещения // всех элементов формы(кнопок, текстовых полей и т.д.) pan.setLayout(null); // Создаем три шрифта для кнопок, надписей и текстовых полей Font btnFont = new Font("serif",0,20); Font labFont = new Font("arial",1,30); Font textFont = new Font("arial",2,30); // Создаем массив из 17кнопок JButton[] btn = new JButton[17]; // Устанваливаем для всех кнопок один шрифт и // и одинаковый размер,подключаем обработчик события // и сразу прикрепляем кнопки к панели for (int i=0;i<17;i++) { // Создаем кнопку btn[i] = new JButton(); // Устанавливаем размер btn[i].setSize(100, 25); // Устанавливаем шрифт btn[i].setFont(btnFont); // Устанавливаем ее расположение btn[i].setLocation(30, 50 + i*30); // Подключаем обработчик события btn[i].addActionListener(new ActionListener() { // Метод, который выполняется при нажатии кнопки public void actionPerformed(ActionEvent e){ // Вызов метода для обработки нажатия клавиш btnClick((JButton)e.getSource()); }}); // Прикрепляем кнопку к панели pan.add(btn[i]); } // Формируем надписи на кнопках for (int i=0;i<10;i++) btn[i].setText(""+i); btn[10].setText("+"); btn[11].setText("-"); btn[12].setText("/"); btn[13].setText("*"); btn[14].setText("="); btn[15].setText("C"); btn[16].setText("Выход"); // Создаем текстовую надпись JLabel lab = new JLabel("Результат: "); // Устанавливаем шрифт lab.setFont(labFont); // Устанавливаем размеры lab.setBounds(130, 0, 300, 50); // Прикрепляем надпись к панели pan.add(lab); // Создаем текстовое поле text = new JTextArea(); // Устанавливаем шрифт text.setFont(textFont); // Устанавливаем размеры текстового поля text.setBounds(300, 10, 300, 35); // Устанавливаем цвет текста ТЕМНО-СИНИЙ text.setForeground(new Color(0,0,100)); // Устанавливаем фон текстового поля - БЕЛЫЙ text.setBackground(Color.WHITE); // Прикрепляем текстовое поле к панели pan.add(text); // Прикрепляем панель к окну cont.add(pan); // Устанаваливаем расположение и размеры окна setBounds(0, 0, 800, 600); //Устанавливаем заголовок окна setTitle ("Калькулятор"); // Показываем(отображаем) окно setVisible(true); } }

Запустим программу на исполнение –на форме окна появилось текстовое поле (см.рис. 2.9):

Рис. 2.9

В текстовое поле можно вводить текст. Если вы введете в это поле какой-либо текст, то вы увидите, что символы получаются синего цвета, т.к. мы указали значение составляющих R, G, B–0, 0 и 100соответственно. В качестве эксперимента,можно изменять значения составляющих–запустив приложение после изменения этих значений,вы увидите, что цвет текста изменяется.Аналогичные опыты можно провести и с цветом фона. Мы задали белый цвет, можно его изменить и перезапустить приложение.

Таким образом, setForeground –это цвет текста, то есть цвет надписи, setBackground–это цвет фона. Оба эти метода требуют указания определенного цвета. Цвет можно указать,выбрав стандартный цвет из перечисленияColor, либо с помощью конструктора new color, указав значение составляющих R, G, B в круглых скобках.

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

Занятие 3. Создание приложения "Калькулятор". Преобразование приложения в апплет

На этом занятии мы завершим работу над приложением "Калькулятор": - опишем действия, которое должны совершать кнопки приложения.;- познакомимся с понятием апплет;

На этом занятии мы закончим работу над приложением "Калькулятор". На прошлом занятии был реализован интерфейс(внешний вид) приложения, на этом занятии мы опишем его работу –выполнение основных арифметических операций.

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

Но вначале немного теории.

Создайте новый проект под названием "lesson15", добавьте к этому проекту класс "prog", нажмите кнопку "Готово"–у вас откроется заготовка программы(комментарии, как обычно, можно удалить).

public class prog {

public static void main(String[] args) {

}

Создайте класс под названием "myClass".Внутри этого класса создайте две переменные. Одна переменная с именем"v1" будет переменной закрытого типа ("private"), а вторая переменная "v2"будет переменной открытого типа("public"):

public class prog {

public static void main(String[] args) {

// Объявление класса

class myClass

{

// Переменная класса закрытого типа

private int v1;

// Переменная класса открытого типа

public int v2;

}

Существует такое понятие, как "область видимости переменных". Это та часть программного кода, где объявленная переменная доступна, где она существует и где она может использоваться.

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

Мы с вами только что объявили две переменные "v1"и "v2", они будут доступны до первой закрывающей фигурной скобки.

Теперь создадим метод класса под названием "func1()":

// Открытый метод класса

public void func1()

{

}

Напомним, что слово"public"означает"открытый", а "void"–что метод не возвращает никакого значения.

Внутри этого метода объявим еще одну переменную целого типа под названием "v3":

int v3;

Теперь создадим закрытый ("private") метод "func2()"и в нем объявим переменную "v4":

// Закрытый метод класса

private void func2()

{

// Переменная метода

int v4;

}

Таким образом, мы создали класс, в котором объявили две переменные класса, два метода и две переменные внутри методов.

// Объявление класса

class myClass

{

// Переменная класса закрытого типа

private int v1;

// Переменная класса открытого типа

public int v2;

// Открытый метод класса

public void func1()

{

//Переменная метода

int v3;

}

// Закрытый метод класса

private void func2()

{

//Переменная метода

int v4;

}

}

В чем отличие между этими переменными?

Переменная, объявленная внутри метода, называется переменной метода. Переменные "v3"и "v4" –это переменные метода "func1()"и "func2()" соответственно.

Переменная "v3"доступна только в том фрагменте программы, который будет находиться до закрывающей фигурной скобки метода "func1()".Например, внутри метода "func2()"переменная "v3"уже будет недоступной. Попытайтесь присвоить ей какое-то значение внутри метода "func2()". Вы увидите - она подчеркивается красным цветом, что свидетельствует об ошибке.

То же самое можно сказать и о переменной "v4". Ее можно использовать только до закрывающей фигурной скобки метода "func2()".

Переменные класса"v1"и "v2"объявлены выше. Т. е.закрывающая фигурная скобка, которая ограничивает их действие, находится в самом низу класса. Таким образом, внутри метода "func1()"и"func2()"переменные "v1" и"v2"будут доступными. К этим переменным можно обратиться в любой точке класса.

Переменные, которые мы объявляем внутри методов, уничтожаются в оперативной памяти компьютера, когда этот метод заканчивает свою работу. Таким образом, закрывающая фигурная скобка символизирует окончание работы этого метода. В момент вызова метода "func1()"и "func2()"будут созданы переменные "v3" и"v4". По окончании работы этих методов, эти переменные в оперативной памяти компьютера будут уничтожаться, их уже не будет существовать.А переменные "v1"и "v2"будут существовать, и их можно использовать внутри любого метода класса. Все это нужно учитывать при разработке приложений, при использовании той или иной переменной в какой-либо точке программы.

Создадим объект на основании нашего класса "myClass"с помощью переменной под названием "ob".

public class prog {

public static void main(String[] args) {

// Создание объекта на основании класса

myClass ob = new myClass();

// Вызов метода класса

ob.func1();

// Присваивание значения

// переменной класса

ob.v2 = 400;

}

}

Этот объект мы создали на основании класса, который описан ниже.Теперь попробуйте обратиться к переменной"ob". Когда вы воспользуетесь оператором ".", вы увидите окно подсветки. В появившемся списке будет доступна переменная "v2"и метод "func1()", но переменная "v1"и метод "func2()"являются недоступными, потому что мы их сделали закрытыми", установив модификатор доступа"private". Отсюда следует, что переменные и методы закрытого типа доступны только внутри класса. Так как метод "func1()"является открытым, то он доступен для объекта,созданного на основании этого класса. Этот метод можно вызвать внутри метода "func2()", и это не будет являться ошибкой, т. к. закрытый метод не доступен за пределами класса, но доступен внутри класса.

// Объявление класса

class myClass

{

// Переменная класса закрытого типа

private int v1;

// Переменная класса открытого типа

public int v2;

// Открытый метод класса

public void func1()

{

// Переменная метода

int v3;

v3 = 100;

v1 = 200;

func2();

}

// Закрытый метод класса

private void func2()

{

// Переменная метода

int v4;

v4 = 200;

v2 = 200;

func1();

}

}

Таким образом, внутри метода "func1()"можно вызвать метод "func2()", и внутри метода"func2()"вызвать метод "func1()".Внутри класса эти методы можно вызывать произвольно, вне зависимости от того,являются они открытыми или закрытыми. Но за пределами класса можно обращаться только к открытым методам и переменным класса.

Ну, а теперь вернемся к нашему приложению "Калькулятор", которое было создано на предыдущем занятии.Откроем программный код приложения.

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

Пока у нас есть главный метод программы "main", в котором создается объект окна, и есть класс окна, внутри которого в самом начале объявлены четыре переменные класса.

Первая "text"типа "JTextArea" - текстовое поле,в которое у нас выводится результат. Далее переменные "p1" и"p2"типа "double" (это тип, который поддерживает и дробную часть, так как,например, после деления мы с вами можем получить дробное число). Переменные"p1"и "p2"будут хранить те значения, которые мы вводим для выполнения над ними арифметической операции. Т. е.,если пользователь после цифры "1", потом нажмет на кнопку "+", эта цифра будет записана в качестве значения переменной"p1". А когда пользователь введет второе число, оно будет записано в качестве значения переменной "p2".После выполнения арифметической операции мы получим результат, который запишем его в качестве значения переменной "p1". И четвертая переменная "oper"типа "int".

То есть каждый раз, мы будем помещать результат в переменную"p1". Зачем это необходимо? Для того чтобы пользователь мог продолжить выполнение арифметических операций. Например, сначала он выполнил сложение двух чисел, затем захотел выполнить еще одну операцию с полученным результатом. Вот поэтому каждый раз мы будем помещать результат снова в переменную "p1" -она будет содержать результат предыдущего шага вычислений.

Для хранения выбранной пользователем операции будем использовать переменную под названием "oper".Если пользователь, выберет операцию сложение ("+"), то значение переменной будет равно 1. Всего эта переменная может принимать одно из четырех значений: 1, 2, 3, 4. Эти цифры обозначают сложение, вычитание, умножение и деление соответственно.

Вспомним, когда мы создавали кнопки, то к каждой из них мы подключали обработчик событий, и прописывали вызов одного метода под названием "btnClick()". Мы это сделали для того, чтобы не прописывать обработку событий для каждой кнопки, а внутри одного метода обрабатывать нажатие на любую кнопку калькулятора. В метод "btnClick()"мы передаем параметр, поэтому у него в скобках установлен параметр типа "JButton" с названием"btn", то есть мы в этот метод передаем ту кнопку, которую нажал пользователь, а точнее данные об этой кнопке. Таким образом, внутри метода "btnClick()"мы всегда сможем определить, какую именно кнопку нажал пользователь, и в зависимости от этого выполнять те или иные действия.

Метод "actionPerformed()" срабатывает при нажатии на кнопку, и через его аргумент под названием "e"типа "ActionEvent" мы можем определить, какая конкретно кнопка была нажата, поэтому мы передаем параметры"e". Метод "getSource()"позволяет получить нажатую кнопку и передает информацию об этой кнопке методу "btnClick()".

Перейдем к методу"btnClick()". Этот метод как раз и реализует весь основной программный функционал калькулятора.Первое, что мы с вами добавим, мы создадим переменную "str"типа "String"(строкового типа). В эту переменную мы будем возвращать имя кнопки, которую нажал пользователь. Сделать это можно с помощью метода "getText()",обратившись к переменной "btn" ("btn"- это как раз та кнопка,которую нажал пользователь). Таким образом,у нас получится строка программного кода:

// Определяем название нажатой кнопки

String str = btn.getText();

Запустим приложение.Если вы нажмете кнопку "Выход", то метод "getText()"получит значение "Выход"и присвоит его переменной "str". Если вы нажмете кнопку "=", то значением переменной "str" будет символ "=". Метод "getText()" получает тот текст, который указан на кнопке.

Сначала опишем действие для кнопки "Выход", по которой осуществляется выход из программы. Выход из программы можно организовать с помощью команды System.exit(0). Параметр "0"означает, что выход нормальный, не аварийный. Для проверки условия нажатия нaкнопку воспользуемся условным операторомif. Проверять будем значение переменной "str". Мы получим следующую алгоритмическую конструкцию: "Если str=="Выход",тогда нужно выйти из программы, выполнив команду System.exit(0). На языке Java это будет выглядеть так:

// Если нажата кнопка Выход -

// завершаем работу приложения

if (str=="Выход")System.exit(0);

В ветке "Иначе Если" - "else if…"опишем действие для следующей кнопки"С" (Очищение окна результата). Очистить поле можно при помощи метода "setText()". Этот метод позволит вывести любой текст, указанный в круглых скобках в необходимое поле. Нам нужно чтобы в текстовом поле результата было пусто.Пустая строка вводится при помощи двух кавычек - "".Переменным "p1" и"p2"нам нужно присвоить значение "0". На языке программирования Java это будет выглядеть так:

//Если нажата кнопка очистить поле

else if (str=="C")

{

// Очищаем поле -выводом в него

// пустой строки

text.setText("");

// Обнуляем переменные

p1=p2=0;

}

При помощи такой конструкции "if"можно перебирать любое количество условий.

Следующим условием,которое нам необходимо будет проверить–нажатие на кнопку "=". Это действие свидетельствует о том, что пользователь уже ввел числа, над которыми нужно совершить операцию. Нам нужно считать из текстового поля данные,введенные пользователем. В текстовое поле вводятся строковые значения. Нам нужно эти значения преобразовать в числа(арифметические операции производятся над числами). Для преобразования значений можно воспользоваться командой "parseInt()". В скобках указывается то значение, которое нужно преобразовать в другой тип. Перед вызовом этой команды указывается наименование того типа, в который нужно перевести значение:

Integer.parseInt();

В число мы будем переводить содержимое текстового поля"text", которое позволяет получить метод "getText()":

Integer.parseInt(text.getText());

После преобразования нам нужно узнать, какую операцию выбрал пользователь. Номер выбранной операции хранит переменная "oper". Если она равна "1", нам нужно выполнить сложение. Результат нам нужно вернуть в текстовое поле. Результатом выполнения операции будет число. Значит,нам нужно будет выполнить обратную операцию –преобразовать число в строку. Сделать это можно с помощью неявного преобразования–прибавив к пустой строке число:

""+(p1+p2)

Этот результат нужно записать обратно в текстовое поле. Сделать это можно при помощи метода "setText()":

text.setText(""+(p1+p2))

Важно!!!При выполнении Java-программы идет строгая проверка контроля типов. Вы не сможете запустить программу, если допустили некоторое несоответствие типов. То есть пытаетесь, например, переменной, имеющей числовой тип, присвоить строковое значение, или наоборот. Поэтому нужно сначала выполнить преобразование, а потом можно уже работать с нужным вам типом.

Прежде чем выполнить эту операцию, нужно проверить,действительно ли пользователь выбрал операцию "сложение", значение переменной"oper"равно1:

if (oper==1) text.setText(""+(p1+p2));

Аналогично можно записать команды для выполнения оставшихся трех операций:

if (oper==2) text.setText(""+(p1-p2));

if (oper==3) text.setText(""+(p1*p2));

if (oper==4) text.setText(""+(p1/p2));

В целом, программный код для кнопки "=" будет выглядеть следующим образом:

// Если нажата кнопка Равно - вычисляем

else if (str=="=")

{

// Перевод из строкового типа в целое число

p2 = Integer.parseInt(text.getText());

// В зависимости, какая была ранее выбрана

// операция - производим вычисление

if (oper==1) text.setText(""+(p1+p2));

if (oper==2) text.setText(""+(p1-p2));

if (oper==3) text.setText(""+(p1*p2));

if (oper==4) text.setText(""+(p1/p2));

}

Теперь описываем действие кнопки "+" (Сложение). В этом случае нам нужно проверить условие str=="+":

else if (str=="+")

После того как пользователь нажмет на кнопку "+" (условие выполнится), в переменную "oper" нужно вернуть номер операции сложения – "1":

//Устанавливаем значение переменной oper

// - которая отвечает за вид выбранной

//арифметической операции

oper = 1;

В этот же момент в переменную "p1"нужно поместить число, которое ввел пользователь. Но пользователь ввел значение в текстовое поле, следовательно,нам нужно преобразовать текстовое значение в числовое. Как вы помните, в переменную "p1"мы будем помещать результат выполнения операции. Результатом выполнения деления редко когда является целое число. Поэтому тип Integerнам не подойдет. Мы воспользуемся другим типом–Double. Значение в этот тип будем преобразовывать с помощью метода"parseDouble()". Таким образом, значение переменной "p1" будет равным:

// Переводим из строкового типа в числовой

p1 = Double.parseDouble(text.getText());

Дальше нам нужно подготовить поля для ввода второго значения. Очищать его будем с помощью команды setText():

// Очищаем поле

text.setText("");

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

// Если нажата кнопка Минус

else if (str=="-")

{

oper = 2;

p1 = Double.parseDouble(text.getText());

text.setText("");

}

// Если нажата кнопка Умножить

else if (str=="*")

{

oper = 3;

p1 = Double.parseDouble(text.getText());

text.setText("");

}

// Если нажата кнопка Делить

else if (str=="/")

{

oper = 4;

p1 = Double.parseDouble(text.getText());

text.setText("");

}

Нам осталось определить команды, которые должны срабатывать, если пользователь нажал одну из цифр: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9. В этом случае нет необходимости для каждой цифры прописывать отдельную конструкцию "else if"- команды мы запишем в ветке "else".Команды ветки"else" срабатывают в том случае, если не выполнилась ни одна из вышеперечисленных конструкций.

Если пользователь нажал цифру, тогда мы должны отобразить ее в текстовом поле. Причем каждую следующую выбранную цифру нужно отображать в конце.Т. е. каждую новую цифру мы "приклеиваем" к предыдущей справа. Например, нам нужно ввести число 215. Значит, нам нужно сначала нажать цифру 2, затем 1 (получится 21), а затем цифру 5. (получится 215). Вспомним, что название кнопки у нас хранит переменная"str". Как только пользователь нажмет на какую-либо цифру,например, 2, это значение должно быть записано в переменную "str". Т. е., к пустому значению мы прибавляем символ 2. Получить введенный символ нам поможет командаgetText() . Т. е. на этом шаге мы получим, что

""+text.getText()

На следующем шаге мы должны к уже имеющемуся значению приписать справа новую цифру. Поможет нам в этом специальная операция "склеивания"строковых выражений, которая называется операцией конкатенации. Эта операция обозначается знаком "+", так же как и операция сложения для чисел. Таким образом,мы получим строчку:

""+text.getText()+str

Для того чтобы программа воспринимала знак "+" как операцию конкатенации - мы должны в качестве первого слагаемого записать обязательно строку. В противном случае она сама может преобразовать значение текстового поля в число (совершить так называемое неявное преобразование). В качестве первого слагаемого мы поставили пустую строку. Число, введенное пользователем нужно вернуть в это же поле.Для этого воспользуемся командой setText().Тогда единственная команда ветви "else…"будет иметь вид:

else

{

// Прибавляем нажатую цифру справа от других цифр

text.setText(""+text.getText()+str);

}

И итоговый код обработки нажатий на кнопки калькулятор,который вставляется в метод private void btnClick(JButton btn)будет следующим:

// Определяем название нажатой кнопки String str = btn.getText(); // Если нажата кнопка Выход - //завершаем работу приложения if (str=="Выход") System.exit(0); // Если нажата кнопка очистить поле else if (str=="C") { // Очищаем поле -выводом в него // пустой строки text.setText(""); // Обнуляем переменные p1=p2=0; } // Если нажата кнопка Равно - вычисляем else if (str=="=") { // Перевод из строкового типа в целое число p2 = Integer.parseInt(text.getText()); // В зависимости какая была ранее выбрана // операция - производим вычисление if (oper==1) text.setText(""+(p1+p2)); if (oper==2) text.setText(""+(p1-p2)); if (oper==3) text.setText(""+(p1*p2)); if (oper==4) text.setText(""+(p1/p2)); } // Если нажата кнопка Плюс else if (str=="+") { // Устанавливаем значение переменной oper // - которая отвечает за вид выбранной // арифметической операции oper = 1; // Переводим из строкового типа в числовой p1 = Double.parseDouble(text.getText()); // Очищаем поле text.setText(""); } // Если нажата кнопка Минус else if (str=="-") { oper = 2; p1 = Double.parseDouble(text.getText()); text.setText(""); } // Если нажата кнопка Умножить else if (str=="*") { oper = 3; p1 = Double.parseDouble(text.getText()); text.setText(""); } // Если нажата кнопка Делить else if (str=="/") { oper = 4; p1 = Double.parseDouble(text.getText()); text.setText(""); } // Если нажата другая кнопка, не перечисленная // выше- значит цифры от 0 до 9 else { // Прибавляем нажатую цифру справа от других цифр text.setText(""+text.getText()+str); }

Запустите приложение и протестируйте его.

Важно!!!Обратите внимание на то, что буква "С" на русском языке и на английском – это две разные буквы. Например, вы назвали клавишу русской буквой "С", даже заглавной, а в программном коде вы указали английскую букву "C", это будут разные буквы и условие str=="C" у вас не выполнится. Так же важен регистр букв. Буквы "С" и "с" - разные буквы с точки зрения языка программирования Java.

Сложите числа 10 и 20. На экране должен отображаться результат сложения –30.Умножьте полученный результат на 3. В текстовом окне отображается результат–90. Разделите его на семь – на экране должно отобразиться дробное (см.рис. 3.1):

Рис. 3.1

Разумеется, мы создали самый простейший калькулятор, который позволяет выполнять только основные арифметические операции. Мы не анализируем возможность получения деления на ноль и др.Вы вполне можете его усовершенствовать.

Итак, теперь у нас с вами есть калькулятор, представленный в видеwindows-приложения. Java-программу можно преобразовать к так называемому апплету.Что собой представляет апплет?

Откройте любой браузер и зайдите на сайт www.yandex.ru–отображаетсяweb-страница. Язык программирования Javaпозволяет вести разработку не только для операционной системы, но и для Интернета, т. е.приложения, которые созданы на языке "Java",могут встраиваться в web -страницы.

Происходит это так: в веб-странице выделяется некоторый прямоугольный фрагмент, размер которого можно задать самостоятельно. Внутри этого фрагмента будет работать вашеJava-приложение, выполняющее различные функции. И работает оно в браузере, то есть на компьютере пользователя, когда пользователь заходит на какой-то сайт. В нашем случае ваш браузер обращается кweb-серверу, на котором хранится сайт с адресом www.yandex.ru. Дальше веб-сервер, после некоторых операций,отправляет результат запроса и возвращает нам страницу, которую отображает браузер. В эту web -страницу можно встроить приложениеJava, которое называется апплетом.

Вот и мы сейчас наше приложение преобразуем в апплет. Для этого создадим небольшую web-страницу, поместим в нее наше приложение и запустим его на исполнение. Но окно, в котором мы увидим результат – это уже будет браузер. Таким образом, отличие апплета от обычного приложения состоит в частности в том, что если приложение под Windows имеет собственное окно и находится в нем, то в данном случае нашим окном является браузер, который запустит нашу web-страницу. Таким образом, в нашем приложении будет отсутствовать класс "JFrame"как таковой, потому что никакого окна мы с вами создавать уже не будем, нашим окном уже будет являться браузер. Первое, что нам с вами необходимо будет сделать – перейти к нашему главному классу под названием "prog"и выполнить наследование этого класса при помощи("extends") от класса"JApplet". После этого действия мы можем наше приложение преобразовать в апплет – наше приложение может запускаться уже в режиме апплета:

// Главный класс программы наследуется от

// класса JApplet -необходимо при создании

// апплета

public class prog extends JApplet

{

}

Теперь нам нужно внести изменения в метод "public static void main()" – это метод, который является точкой входа в программу. Этот метод написан сейчас для операционной системы. В случае апплета, вместо метода"main()"используется другой метод. Он называется"init()". Это аналог метода "main()", но уже для апплета:

// Метод init() - является точкой входа

// в программу при запуске апплета,

// также как метод main() -был точкой

// входа в приложение для Windows

public void init()

{

}

Теперь нам нужно убрать создание объекта окна из метода теперь уже"init()", потому что, окно нам уже будет предоставляться браузером, создавать свой объект нет необходимости. Далее мы переходим к классу"JFrame". Нам понадобятся переменные класса, которые объявлены в нем (см. рис. 3.2):

Рис. 3.2

И вот эти переменные нам нужно будет перенести в главный класс, т. к.класса "okno" у нас уже не будет. Вырежьте объявление переменных и вставьте этот блок перед методом init() (см.рис. 3.3):

Рис. 3.3

Таким образом, теперь эти переменные объявляются уже внутри нашего главного класса "prog". Следующее, что необходимо сделать –переместить метод "btnClick()"и поместить его после объявления переменных перед методомinit():

Рис. 3.4

Нам осталось сделать– из этого класса взять ту часть, которая описана внутри конструктора класса, но сам конструктор мы не трогаем:

Рис. 3.5

Выделите блок, который находится внутри конструктора (см. рис. 3.5),от начала до конца, вырежьте его и вставьте внутрь метода "init()".

Теперь от класса под названием "okno" у меня практически ничего не осталось, его можно удалить. Так же нам не понадобятся строчки, их можно удалять:

// Устанавливаем расположение и размеры окна

setBounds(0, 0, 800, 600);

// Устанавливаем окончание работы приложения

// при закрытии окна

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

// Показываем(отображаем) окно

setVisible(true);

Выполните запуск приложения. Вы видите, что произошли изменения –появилось несколько другое окно (см. рис.3.6):

Рис. 3.6

Среда разработки "Eclipse"позволяет запустить апплет на исполнение в режиме его запуска. Поэтому окно, которое открылось сейчас, находится внутри окна с названием "AppletViewer" (то есть отображение апплета). Таким образом, сейчас программный код запустился уже в режиме апплета. Если при запуске среда разработки спрашивает, в каком режиме запустить программу, то необходимо выбирать режим запуска апплета.

Теперь наш программный код апплета полностью готов, следующее, что нам необходимо сделать, это создать jar-архив,который и будет подключаться к веб-странице. Поэтому мы с вами переходим на структуру проектов,выбираем "lesson_14" (см. рис. 3.7):

Рис. 3.7

Так как мы продолжили код предыдущего занятия, выделите мышкой название вашего проекта, нажмите правую клавишу и выберите команду"Экспортировать" (см. рис. 3.8).

Рис. 3.8

У нас открывается окошко "Экспорт". Выберите закладку "Java", а в ней фай JAR (см. рис. 3.9). Нажмите кнопку"Далее", в правом окошке

Рис. 3.9

Снимите галочки ".classpath"и ".project" т.к. они нам не нужны (см. рис.3.10):

Рис. 3.10

Теперь мы должны указать, где физически будет расположен наш получаемый jar-архив, поэтому мы нажимаем кнопку "Обзор" (см. рис. 3.11):

Рис. 3.11

Перейдем в корень диска"C:" и укажем имя будущего апплета, например,"prog". После этого нажмем кнопку "Сохранить". В поле "Файл JAR"появился путь к нашему апплету: (см. рис. 3.12):

Рис. 3.12

Нажмем кнопку "Далее". На этом шаге нам ничего изменять не нужно (см.рис. 3.13):

Рис. 3.13

Еще раз нажмем кнопку"Далее". Нас интересует самое нижнее поле"Главный класс"(см. рис. 3.14):

Рис. 3.14

Так как приложение может быть расположено в нескольких классах, при создании jar-архива необходимо указать, какой же класс является главным: (см. рис. 3.15):

Рис. 3.15

В нашем случае класс всего один, поэтому мы здесь в списке ничего не видим и главный класс мы не указываем. Нажмем на кнопку "Готово", затем на"Ок". Свернем среду разработки и перейдем на диск "C:". Нам нужно посмотреть, появился ли наш апплет в списке файлов, которые находятся на диске С. Действительно, там появился jar-архив с названием"prog"- это и есть наш апплет. Теперь нам нужно подключить его к web-странице. Для создания web–страницы на диске "C:"создайте новый файл текстовый документ(см.рис. 3.16):

Рис. 3.16

Только этот текстовый документ будет иметь расширение .htmили .html. Назовите этот файл"index", через точку указав его расширение, получится файл "index.html" (см.рис. 22) – это файл, который запускается по умолчанию при обращении к папке на web-сервере. Если там присутствуют несколько html-файлов и среди них есть файл с названием "index", он будет автоматически запущен и отображен в браузере. Обратите внимание, что в зависимости от тех настроек, которые у вас стоят для операционной системы, для стандартных файлов расширение может явно не указываться. Вот для того, чтобы включить его отображение, нам необходимо перейти в "Сервис" –> "Свойства папки" (см. рис. 3.17):

Рис. 3.17

В открывшемся окне перейдем на закладку "Вид". Здесь нужно найти признак "Скрывать расширение для зарегистрированных типов файлов", и снять установленную галочку. (см. рис. 3.18):

Рис. 3.18

Похожая настройка есть и для операционной системы "Windows 7".

Файл, который вы создали, может получиться теперь таким:"index.html.txt" (см.рис. 3.19):

Рис. 3.19

Это произошло потому,что по умолчанию для зарегистрированных типов файлов, таких как текстовые файлы,расширение не отображается. Удалите "txt", оставив только".html". На экране появляется вопрос: "Вы действительно хотите изменить расширение?" Отвечаем системе "Да". На диске C появилась только что созданная web-страница. Откроем ее в режиме редактирования. Для этого в контекстном меню, вызванным правой кнопкой мыши выберите команду "Открыть с помощью" > "Блокнот". Html-страница откроется в виде обычного текстового файла.

Теперь необходимо сделать небольшую html-страницу, к которой нужно подключить апплет. Для этого воспользуемся так называемым языком разметки "Html".

Для того чтобы написать небольшую html-страницу, необходимо написать несколько тегов (см. рис. 27). Теги – это основная составляющая html-страницы. Записываются теги в открывающих и закрывающих угловых скобках (см. рис. 3.20).

Рис. 3.20

Запишите первый тег под названием <html>, который означает, что мы создаем код html-страницы. Далее нужно вставить так называемый закрывающий тег.Таким образом, все, что будет находиться между двумя этими тегами, и будет являться содержимым нашей web-страницы. Обратите внимание, что "закрывающий" тег должен содержать наклонную черту перед названием тега. Следующий тег, который нужно добавить–тег под названием <body>,– это тело html-страницы, ее содержимое.И также создаем закрывающий тег </body>.Тег <body> получается вложенным в тег<html>. Вот эти два тега – минимальная веб-страница, внутри которой пока еще ничего нет. Нам с вами необходимо пометить туда наш апплет. Для этого мы можем воспользоваться тегом под названием<applet>. Создайте тег <applet>, и его закрывающую часть (см. рис. 1.35). У открывающего тега после его названия,перед закрывающей угловой скобкой могут находиться так называемые атрибуты или параметры тега. Они нужны для того, чтобы можно было указать какие-то дополнительные настройки и дополнительные характеристики. В качестве дополнительных настроек нужно указать следующее:

code= "prog.class"

"code" – это название атрибута. Этот атрибут отвечает за указание главного класса апплета. Так как классов в апплете может быть много, нужно указать, какой является главным. У нас существует всего один класс, но если бы в апплете было несколько классов, то было бы нужно указать главный. Дальше укажите ширину и высоту:

width= "800"(пикселей),

height= "600" (пикселей).(см.рис. 3.20)

Таким образом, при помощи атрибутов "width", "height" мы указали размер прямоугольной области, которая будет отводиться для нашего апплета. Так как окна мы в апплете не создаем, окном является браузер, то внутри html-страницы мы указали, какая ее часть будет отдана под наш апплет. Внутри этой прямоугольной области будет работать наш апплет в виде приложения, и он может выполнять тот функционал, который вы в него заложите.

И последнее, что нам осталось указать, необходимо указать название самого jar-архива, он у нас называется "prog.jar":

archive= "prog.jar" (см. рис. 3.20)

Путь мы к нему никакой здесь не указываем, потому что он находится в той же папке, что и страница index.html.Сохраните и закройте html-страницу. Два файлаindex.htmlи prog.jarможно поместить в одну папку под названием, например "web", созданную в корне диска "С:" (см. рис. 3.21):

Рис. 3.21

Двойным щелчком мыши откроем страницу index.html, тогда она откроется в браузере,который у вас является браузером по умолчанию. На экране должно быть следующее(см. рис. 3.22):

Рис. 3.22

Наш апплет появился на экране. Причем, все работает в точности так же как и в случае приложения для операционной системы. Попробуйте в этом убедиться –произведите вычисления.

Единственное, что в этом приложении не имеет смысла – это кнопка "Выход".Дело в том, что она закрывает то окно,которое являлось у нас окном для приложения Windows. Таким образом, кнопка"Выход" закрывать браузер не будет, поэтому для апплета ее можно и удалить.

В чем удобствоweb-страницы? В том, что если вы вашуweb-страницу (в нашем случае – index.htmlи архив jar к ней) разместите наweb-сервере, пользователь сможет увидеть ее в своем браузере.

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

Занятие 4. "Версткаweb-страницы с помощью html и css"

На прошлом занятии мы познакомились с понятием апплет, преобразовали в апплет приложение, созданное для операционной системы Windows. Познакомились также с понятием HTML-страницы. Апплет, написанный на языке Java, может выполняться на web-странице в браузере на различных операционных системах, таких, как Windows, Linux, Mac OS и др. В этой широте возможностей использования приложений, написанных на языке Java, и есть основное преимущество этого языка.

Поговорим оweb-разработке как таковой, о её принципах и организации, рассмотрим основные понятия.

Прежде всего, отметим:создаваемое нами приложение, сайт, состоит лишь из одной HTML-страницы. Сделанная на прошлом занятии страница index.html–у нас единственная,она будет запускаться по умолчанию. На практике схема организации сайта выглядит сложнее. Таких страниц, как минимум,несколько.

Рассмотрим схему работы,действующую в момент обращения пользователя к какому-нибудь сайту (см. рис. 1).

Представим себе пользователя, сидящего возле компьютера.На данной схеме он изображён как Юзер. Пользователь открыл браузер и хочет перейти на какой-либо сайт, в строке браузера он вводит имя этого сайта. Браузер отправляет запрос на Сервер, где хранится этот сайт.

• Web-сервер,–в простом понимании, компьютер, на котором расположены web-страницы.

Если страницу index.htmlпоместить наweb-сервер, для неё выделяется определенная папка. Когда пользователь обращается к этой странице,она передаётся ему в браузер, и пользователь видит её отображение.

Таким образом, есть два ключевых звена: клиент и сервер.

Клиент–это пользователь, а сервер–этоweb-сервер, на котором физически расположен сайт (см. рис. 4.1).

Рис. 4.1

Разберёмся пошагово, что происходит, когда пользователь открывает свой браузер.

Откроем браузер и в строке браузера введём название какого-либо сайта, или, иными словами,его доменное имя: например, google.ru –сайт поисковой системы.

Происходит запрос на так называемый, DNS-сервер. На DNS-сервере хранится таблица, в ней указано соответствие имени, набранного в браузере,и IP-адреса.

• IP-адрес,– адрес web-сервера, на котором хранится сайт.

Следовательно,теоретически, для перехода на сайт, вместо доменного имени в строке браузера, можно набирать IP-адрес. В реальности, запомнить IP-адрес намного сложнее, чем какое-либо название, потому и создаётся некоторое доменное имя. Затем осуществляется привязка этого доменного имени к адресу web-сервера, хранящего сайт. Далее происходит обращение по IP-адресу, т. е., по адресу web-сервера.

Если сайт физически переносится с одного сервера на другой, в таблице IP-адресов, находящейся на DNS-сервере, необходимо выполнить корректировку, т.к. web-сервер уже находится в другом месте.

И, наконец, последний шаг: получение результата от web-сервера.

Web-сервервозвращает страницу, отображаемую в браузере. Перед возвращением этой страницы, web-сервер может выполнить некоторый программный код. Предположим, пользователь ввёл логин, пароль, нажал кнопку "Войти". Web-сервер может обработать эти данные: проверить логин,пароль и обратиться к базе данных.

Итак, есть две составляющие –клиент(браузер пользователя) и сервер.

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

Таким образом, клиент исервер–две составляющие,физически находящиеся в разных местах. При выполнении программного кода задействуются ресурсы разных машин.Пользователь получает страницу от web-сервера: происходит запрос данных на сервер, возвращаются результаты запроса –какая-то HTML-страница.Пользователь видит изменения в окне своего браузера: он перешёл на другую страницу или, например, увидел сообщение, что логин или пароль неверен.

Далее, познакомимся с некоторыми новыми элементами программирования, используемыми при создании web-страниц:

• Язык разметки гипертекста HTML–основной язык, при помощи которого формируются элементы страницы.

Язык HTMLнельзя назвать языком программирования в чистом виде, он не позволяет реализовать какие-либо алгоритмы без вспомогательных инструментов.

При помощи этого языка можно добавлять элементы на web-страницу, например,вставить в текст картинку, видеоролик и т.д. (см. рис. 4.2).

Рис. 4.2

Для того, чтобы эти элементы так или иначе оформить, поменять их отображение, используются каскадные таблицы стилей CSS.

Компоновка страницы осуществляется при помощи HTML, а её оформление,задание ей некоторых свойств, –при помощи CSS. Т. е., текстовая надпись на web-страницу добавляется при помощиHTML, а при помощиCSSзадаётся её внешний вид –размер, цвет, стиль шрифта и т. д.

• Протокол передачи гипертекстаHTTP–протокол, по которому передаются данные при работе с web-страницами.

• Гипертекст–текст, содержащий ссылки перехода. При нажатии на эти ссылки можно сразу попасть на другие страницы.

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

Обратите внимание, в строке браузера сначала указывается протокол http://, а затем идёт доменное имя (название сайта), по которому нужно перейти. Таким образом, HTTP– и есть протокол,по которому передаются данные, или,простыми словами, формат передачи данных.

Рассмотрим понятияIP-адрес идоменное имя.

Когда пользователь открывает свой браузер и вводит некоторое доменное имя –допустим, java-web.ru, он вводит уже зарегистрированное доменное имя(см. рис. 4.3).

Рис. 4.3

При создании своего сайта можно выбрать некоторое доменное имя и зарегистрировать его, т. е. оформить на себя. Это имя будет за вами закреплено. НаDNS-сервереэтому доменному имени будет определён соответствующий IP-адрес, адрес web-сервера, компьютера,на котором находится сайт. Соответственно,если сайт переносится, например, на другой компьютер, необходимо изменить IP-адресдля данного доменного имени.

При желании, можно поместить свой сайт и на домашнем компьютере. Тогда IP-адресом будет адрес вашего домашнего компьютера. В этом случае на DNS-сервередолжно быть прописано соответствие доменного имени вашего сайта и IP-адреса вашего домашнего компьютера. Сайт можно будет найти по ссылке на его доменное имя.Если сайт находится на вашем домашнем компьютере, этот компьютер одновременно является и клиентом, и web-сервером.

Как мы уже выяснили,есть две составляющие –клиент и web-сервер. На web-сервере также выполняется некоторый программный код.

Предположим,пользователь ввёл некие данные и нажал на кнопку "Отправить". Эти данные отправляются на web-сервер. На web-сервере они программно обрабатываются, например,происходит запрос к базе данных. База данных находится также на web-сервере, из неё могут извлекаться некоторые данные.

Популярные языки, часто используемые для работы на сервере – это PHP, язык C#,а также язык Java.(см. рис. 4.4).

Рис. 4.4

Таким образом, апплет работает в браузере (задействует ресурсы клиентской машины), а серверная часть,программа, физически расположенная наweb-сервере,срабатывает там. Они, так или иначе,взаимодействуют между собой: программа,сработавшая на сервере, вернула HTML-страницу, а в HTML-странице находится,например, апплет, он начинает работать уже в web-браузере пользователя. Код PHPработает именно наweb-сервере, а не в браузере пользователя.

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

Это происходит следующим образом: элементам отводится прямоугольная область, такая, как та, что отводилась для нашего апплета-калькулятора на предыдущем занятии.

В HTML-странице также могут присутствовать флэш-ролики. Страница может содержать одновременно, например, один или несколько java-апплетов и флэш-роликов.

Таким образом,флэш-ролики и Java-апплеты –это составляющиеHTML-страницы,работающие в браузере пользователя. Web-сервер отправляет их пользователю, а пользователь видит их работающими в своём браузере (см. рис. 4.5).

Рис. 4.5

И, наконец, последнее важное звено. Язык под названием JavaScript(см. рис. 4.6).

Рис. 4.6

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

Тем не менее, многие принципы программирования, используемые для языка Java,работают и для JavaScript. При написании программы на языкеJavaScript, вы встретите много знакомого из курса программирования на языке Java. Изучать этот язык с нуля уже не придётся.

• Язык JavaScriptработает в браузере пользователя и организует интерактивное, быстрое взаимодействиеweb-страницы и пользователя. JavaScriptработает не наweb-сервере, а в браузере.

Допустим, пользователь поднёс курсор мыши к некоторому текстовому полю. Эту операцию можно отследить,например, из языка JavaScriptи вывести пользователю какое-то сообщение. HTML-теги, вставленные в страницу, задают её внешний вид, CSSзадаёт им некоторое оформление, а JavaScriptпозволяет запрограммировать эти элементы.

Таким образом, при помощи языка JavaScriptуже можно создавать программную логику. Например, можно написать какую-то игру, встроенную в HTML-страницу, т. е., отображаемую в браузере.

Исполняющая среда дляJavaScript–браузер. Именно он выполняет код JavaScript.

На сегодняшнем занятии при помощи языка HTMLмы создадим web-страницу, оформим её,т. е. зададим ей свойства при помощи CSS.

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

Прежде, чем писать программный код, необходимо скачать среду разработки Eclipseдля JavaScript, для этого перейдём на сайт eclipse.org.

Заходим в раздел Загрузки(см. рис. 4.7):

Рис. 4.7

Здесь в списке найдёмEclipse IDE for JavaScript Web Developers (см.рис. 4.8).

Рис. 4.8

Выбираем, например,32-битную версию, скачиваем (см. рис. 4.9), сохраняем файл с сайта eclipse.org.

Рис. 4.9

Эта среда разработки также является средой разработки Eclipse, но другим ее вариантом, имеющим несколько иное предназначение.

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

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

Помещаем архив в корень диска С,выполняем извлечение из архива в текущую папку. Видим сообщение, что эта папка уже занята, поэтому сделаем отмену. В папке с названием Eclipseуже находится среда разработки Eclipseдля Java, поэтому сделаемИзвлечь в папку, предлагаемую по умолчанию, в Eclipse JavaScript. Выполним извлечение из архива.

Среда разработки Eclipse JavaScriptустановлена.

Точно так же на сайтеEclipse.orgможно скачать и другие среды разработки Eclipse, например, для программирования на языке PHP. Для этого также существует отдельный архив для скачивания.

После выполнения распаковки заходим внутрь папки EclipseJavaScript и запускаемEclipse. Этой средой разработки мы воспользуемся всего лишь на паре занятий.

Переименуем пространство, т. е. папку, в которой будут сохраняться проекты. Папка с аналогичным названием уже используется нами для проектов на языке Java, поэтому добавим в конце пару букв,чтобы поменять название, поставим галочкуИспользовать эту папку по умолчанию(см.рис. 4.10), нажимаем ОК.

Рис. 4.10

Далее происходит запуск среды разработки Eclipse.

Сегодня мы создадим форму, в которую пользователь вводит логин и пароль и нажимает на кнопку Вход.

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

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

Создаём JavaScript-проект (см. рис. 4.11):

Рис. 4.11

записываем названиеlesson_16(см. рис. 4.12), нажимаем кнопку Finish,создаётся новый проект.

Рис. 4.12

Cлева в списке проектов создаётся папка с названием lesson_16(см. рис. 4.13).

Рис. 4.13

Это папка с проектомJavaScript.

Выделяем её мышью слева,нажимаем правую клавишу, выбираем New.В этом окошке переходим в самую нижнюю часть, т. е. в другой тип файла(см. рис. 4.14).

Рис. 4.14

Находим тип HTML-файл, появляющийся в закладках. Выбираем закладку Web, затем –HTML-файл(см. рис. 4.15). Потом нажимаем Next.

Таким образом, к проекту добавлен HTML-файл. По умолчанию предлагается название newFile.

Рис. 4.15

Это имя изменяем наindex.html(см. рис. 4.16),

Рис. 4.16

После этого нажимаем кнопку "Next" и далее – "Finish".

Появляется HTML-страница. Здесь уже по умолчанию добавлены некоторые теги.Удалим данную по умолчанию заготовку,удалим все содержимое.

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

Теги записываются в угловых скобках. В скобках указывается наименование тега, и, в зависимости от типа тега, он будет выполнять разные функции.

Например, тег <HTML> говорит о том, что создаётся HTML-документ. Существует понятие:открывающий изакрывающийтег.

<html> < /html>

Закрывающийтег в написании отличается от открывающего тем, что перед его названием стоит наклонная черта.

Всё, находящееся междуоткрывающими изакрывающимитегами html,является HTML-документом. Обратите внимание,среда разработки Eclipseвставляет закрывающий тег автоматически, стоит только набрать открывающий тег.

Далее, добавляется тег<head> (заголовок). Он необходим для описания некоторых настроечных частей самой страницы. Сюда не вставляются элементы,отображаемые на странице.

<html> <head> </head> < /html>

Добавляем тег под названием body(тело).

Среда разработки Eclipseавтоматически вставляет закрывающие теги.Тег <body>–это тело HTML-документа. Вся информация, предназначенная для отображения, помещается внутри тега bodyи составляет содержимое HTML-страницы.

<html>

<head>

</head>

<body>

</body>

</html>

Далее применим принцип табличной вёрстки.

• Реализация web-страницы при помощиHTMLи CSS называется вёрсткой страницы, web--верстка.

Более современный,обычно используемый вариант, –блочная или div-вёрстка. Мы, для простоты, воспользуемся, так называемой,табличной вёрсткой, тем более, в любом случае, нужно знать, что она из себя представляет.

Принцип табличной верстки следующий:формируются ячейки таблицы, в эти ячейки вставляются некоторые элементы. Например,в одну ячейку помещается текстовая надпись, в другую ячейку –картинка и т. д.Зачем нужна таблица? Таблица обеспечивает отображение составляющих HTML-страницы в заданном виде. Она даёт гарантию нахождения элементов в каркасе таблицы, связывает элементы в единое целое и не позволяет им разъезжаться при отображении в браузере.Если же добавлять HTML-элементы в свободном виде, они могут отобразиться совершенно не так, как предполагалось. Страница может разъехаться по сторонам, некоторые элементы окажутся, например, не сбоку, а внизу. Для создания таблицы используется тег table.

<table> < /table>

Создаем сразу открывающий и закрывающий тег. Всё,находящееся между тегами <table>и </table> является таблицей. Далее необходимо добавить в таблицу строку. Для добавления строки используется тег <tr>.

У него тоже есть закрывающий тег. Всё, находящееся между тегами <tr> и</tr>, является первой строкой в таблице.

<table>

<tr>

</tr>

</table>

Строка есть, добавим в неё ячейки. В данном случае, в первой строке, где пользователь будет вводить свой логин, нужны две ячейки. Таким образом,в первой ячейке будет надпись "Введите пароль", во второй ячейке будет поле для ввода этого логина. Для создания ячейки таблицы используется тег <td>. У него также есть открывающий и закрывающий теги. Всё,находящееся между этими тегами, будет вложено в ячейку.

<table>

<tr>

<td>

</td>

</tr>

</table>

В первую ячейку вставляем текстовую надпись и помещаем её внутри тега <span>. Записываем там следующее: "Введите пароль"–предложение ввести пароль.

<table>

<tr>

<td>

<span>Введите Пароль:</span>

</td>

</tr>

< /table>

Текст страницы HTMLможно записывать и без всяких тегов.

Если вписать внутри тегов <body>обычный текст, он отобразится в виде обычного текста.

Тег <span>позволяет выделить некоторые фрагменты текста, допустим, слово или абзац, и, в дальнейшем, задать этим фрагментам нужную настройку, например, какой-то цвет или шрифт из стилей CSS.

После закрывающего тега первой ячейки, создаём вторую ячейку, т. е.добавляем ещё один тег <td>-вставляем открывающий и закрывающий теги.

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

<table>

<tr>

<td>

<span>Введите Логин:</span>

</td>

<td>

</td>

</tr>

< /table>

Итак, в первую ячейку нами вставлена надпись "Введите пароль". В следующую ячейку вкладываем поле для ввода.

Для того чтобы создать поле, воспользуемся тегом <input>.Зададим некоторые его свойства. Этот тег не имеет закрывающего тега. Он является одновременно и открывающим, и закрывающимся.

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

<table>

<tr>

<td>

<span>Введите Логин:</span>

</td>

<td>

<input />

</td>

</tr>

< /table>

У тега имеются атрибуты,так называемые атрибуты тега. Атрибуты позволяют задать дополнительные свойства,характеристики данного тега. Атрибуты записываются после названия открывающего тега. В закрывающем теге атрибуты не записываются.

<table border="1">

В каком виде записывается атрибут? Записывается название атрибута. В нашем случае, это атрибут border, то есть атрибут тега <table>. Далее указывается равенство и значение атрибута,значение атрибута помещается в двойных кавычках.

Таким образом,указывается название атрибута, равенство и(в двойных кавычках) значение, которое присваивается этому атрибуту. Мы с вами добавили атрибут для толщины рамки таблицы.

Далее переходим к тегу<input> и указываем нужные атрибуты.

<input type="text" maxlength="10" id="password"/>

Мы указали значения трех атрибутов: type, maxlength,id.

type –это тип поля, maxlength–максимальное количество символов, которое можно ввести в это поле, id–идентификатор, в дальнейшем, по нему к данному тегу можно будет обратиться из программного кода на языке JavaScript. Таким образом,для тега <input> сейчас задано три атрибута.

Уже сформирована первая строка таблицы. Полностью программный код страницы сейчас выглядит так:

<html>

<head>

</head>

<body>

<table border="1">

<tr>

<td>

<span>Введите Пароль:</span>

</td>

<td>

<input type="text" maxlength="10" id="password"/>

</td>

</tr>

< /table>

</body>

</html>

Мы создали некоторую страницу index.html,добавили одну строку в таблицу и теперь посмотрим, что же получилось в результате.Сохраним нашу страницу.

Сделаем следующее:перейдем к списку проектов, здесь у нас всего один проект lesson_16, выделим его мышкой, нажмём правую клавишу, перейдем вProperties (самая нижняя строчка –Свойства) (см. рис. 4.17)

Рис. 4.17

Теперь посмотрим, где находится наш проект. Location–это расположение проекта, выделяем путь к проекту, копируем его в буфер обмена (см. рис.4.18), сворачиваем приложение,открываем "Мой компьютер"и в строке адреса вставляем путь, только что скопированный из среды разработки Eclipse.

Рис. 4.18

Нажимаем Enterи сразу попадаем в папку, хранящую все файлы проекта.

Видим здесь одну страницу index.html,это как раз та страница, которую мы сейчас создали (см. рис. 4.19).

Рис. 4.19

Eё, конечно, можно было создать просто из блокнота. Щелкаем на неё дважды левой клавишей мыши, запускаем, она открывается в браузере (см.рис. 4.20).

Появилась таблица. Мы задали ей толщину 1.

Появилась надпись"Введите пароль". Обратите внимание,надпись находится в одной ячейке.

Появилось поле, в нём можно вводить некоторые символы, и оно уже находится в другой ячейке.

Количество символов,которое может ввести пользователь –не более десяти.

Таким образом, мы создали первую строку нашей формы, теперь снова вернемся в среду разработкиEclipse.

Рис. 4.20

Мы имеем следующее: у нас есть тег <tr>, есть его закрывающий тег, между ними находятся теги,описывающие всё, что находится в этой строке.

<tr>

<td>

<span>Введите Пароль:</span>

</td>

<td>

<input type="text" maxlength="10" id="password"/>

</td>

</tr>

Т. к. следующая строка будет во многом похожа на предыдущую,скопируем блок, начиная от открывающего и до закрывающего тега tr, вставим его ниже. Мы сразу создали вторую строку с двумя вложенными ячейками.

Верхнюю надпись "Введите пароль"исправим на надпись "Введите логин"–сначала пользователь должен ввести логин, а потом уже –пароль. В нижней надписи оставим"Введите пароль". Там где происходит ввод пароля–исправим атрибут <type>тега <input>заменяем на password.

В списке выбираем пароль, который, как и любое значение атрибута, записывается в двойных кавычках.В чем отличие?

Когда пользователь будет вводить пароль, вместо символов,будут вводиться черные точки, чтобы пароль не был виден. Если вводить пароль обычным тегом типа <text>, пароль будет виден. Далее, изменим id, вместо passwordвводим login.

<tr>

<td>

<span>Введите Логин:</span>

</td>

<td>

<input type="text" maxlength="10" id="login"/>

</td>

</tr>

<tr>

<td>

<span>Введите Пароль:</span>

</td>

<td>

<input type="password" maxlength="10" id="password"/>

</td>

</tr>

Таким образом, к этому полю также можно будет потом обратиться из языка JavaScript по идентификатору login.

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

Если браузер остался открыт, то для того чтобы обновить содержимое страницы, достаточно нажать клавишу F5в открытом браузере, страница обновляется,загружается её новое содержимое. Нажимаем:F5

Появилась еще одна строка в таблице.

Далее, снова возвращаемся в среду разработки Eclipse, осталось сделать еще одну строку, содержащую кнопку "Вход".

Снова удобно скопировать уже готовую строку - блок от открывающего <tr>до закрывающего тега</tr>и вставить его ниже.

<tr>

<td>

<span>Введите Логин:</span>

</td>

<td>

<input type="text" maxlength="10" id="login"/>

</td>

</tr>

<tr>

<td>

<span>Введите Пароль:</span>

</td>

<td>

<input type="password" maxlength="10" id="password"/>

</td>

</tr>

<tr>

<td>

</td>

<td>

<input type="button" value="Вход"onclick="func()" />

</td>

</tr>

В первой ячейке, где содержится текстовая надпись, удаляем тег<span>, т.к. в случае кнопки эта ячейка будет пустая, там не будет никакой текстовой надписи.

Тип тега <input>теперь заменяем на <button> (кнопка).

Атрибут maxlength (максимальную длину) удаляем, пользователь здесь не будет вводить никаких символов, здесь будет находиться кнопка. Атрибут idдля кнопки тоже не понадобится. А вот пару других атрибутов нужно добавить.

Первый атрибут: value (значение).

Это будет значение текстовой надписи, находящейся на кнопке.Пишем "Вход".Название кнопки отобразится: "Вход".

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

Обработчик событий подключается следующим образом:указывается тип события, onclick– нажатие.

Записываемonclick.

В двойных кавычках нужно указать значение. Записываем название функции.

<input type="button" value="Вход"onclick="func()" />

• Функция, это, как и метод языка Java,блок программного кода, выполняющий некоторое действие.

Указываем названиеfuncи делаем круглые скобки, точно так же, как у метода на языке Java.Сама функция funcпока ещё не создана, в дальнейшем, создадим её именно с таким именем. Снова сохраняем наш проект. После сохранения возвращаемся в браузер, и нажимаем клавишу F5.

Появилась кнопка"Вход", нажимаем на неё. Пока ничего не происходит,обработчик никак не реализован, т. к.функцию funcмы ещё не описали. Таким образом, мы создали некоторую форму, теперь сделаем так, чтобы форма отображалась по центру.

Для этого используем тег под названием <center>.

Перед открывающим тегом<table> вставляем тег <center>.

Среда разработки Eclipseавтоматически вставляет закрывающий тег, вырезаем его, т.е. копируем с удалением и закрывающий тег</center>вставляем после закрывающего тега </table>. Другими словами таблицу мы поместили между открывающим и закрывающим тегами <center>.

Произойдет следующее:всё, что находится между тегами <center>,будет отцентрировано по центру страницы.Сохраняем проект, переходим в браузер,нажимаем клавишу F5. Теперь таблица размещается в центре страницы. В данном случае мы использовали таблицу не по прямому назначению.

Нам нужна была не таблица, а некий каркас, жёстко держащий элементы страницы, сохраняющие своё положение при отображении браузером.

Полностью программный код сейчас выглядит так:

<html>

<head>

</head>

<body>

<center>

<table border="1">

<tr>

<td>

<span>Введите Логин:</span>

</td>

<td>

<input type="text" maxlength="10" id="login"/>

</td>

</tr>

<tr>

<td>

<span>Введите Пароль:</span>

</td>

<td>

<input type="password" maxlength="10" id="password"/>

</td>

</tr>

<tr>

<td>

</td>

<td>

<input type="button" value="Вход"onclick="func()" />

</td>

</tr>

< /table>

< /center>

</body>

</html>

Создав таблицу, мы видим, что всё отображается правильно,после этого рамки таблицы убираем.Устанавливаем значение атрибута border–0, вновь сохраняем страницу, переходим в браузер, нажимаем клавишу F5.

<table border="0">

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

Мы видим форму для входа(см. рис. 4.21),форма гарантированно будет размещаться именно в таком виде, никакое поле не уедет вниз или в сторону.

Рис. 4.21

Это и есть, так называемая, табличная вёрстка, когда элементыHTML-страницы формируются при помощи таблиц.

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

Более новая вёрстка, этоdiv-вёрстка илиблочная вёрстка, она позволяет реализовать размещение элементов HTML-страницы, используя новые возможности. Теперь у нас есть форма для входа. Добавим для страницы фон. Для этого воспользуемся файлом, уже размещённым на диске С. Возьмём файл fon.png, тот фон, который мы использовали для создания игры на языкеJava. Можно использовать и другое изображение.

Выглядит фон следующим образом (см. рис. 4.22):

Рис. 4.22

Это игровое поле игры наJava. Поместим его в web-страницу. Для этого необходимо скопировать этот фон и поместить в папку,где находится наша страница index.html(см. рис. 4.19).

Под тегом <center>добавляем еще один тег под названием div. Этот тег позволяет выделить некоторый блок и задать его свойства. Именно этот тег используется в блочной верстке.

<center>

<div>

<table border="0">

Записываем открывающий тег <div> (среда разработки Eclipse сразу вставляет закрывающий тег). Здесь он не нужен, вырезаем его и вставляем после закрывающего тега </table>, т. е. перед закрывающим тегом </center>.

</table>

</div>

</center>

Таким образом, всё,находящееся между открывающим и закрывающим тегом <div>, вложено в этот тег и является одним целым. Мы поместили нашу таблицу со всем ее содержимым в тег<div>. Добавим к тегу <div> атрибут style.Атрибут style позволяет подключить стиль CSSданному тегу. Значение атрибута указывается в кавычках. Записываем следующее:

<div style="width:800px;height:600px;background-image:url(fon.png);">

Картинка имеет размер 800на 600 пикселей. Указываем значения width (ширина) и height (высота) в пикселях. px –это значит пиксель.

Далее, пишемbackground–image (т. е.картинка фона), двоеточие, url (т. е. путь, где находится эта картинка) и в скобках указываем fon.png – имя файла.

Так как index.html и картинка находятся в одной папке, указываем только имя файла, index.html будет искать эту картинку в той же папке, так как другой путь явно не указан.

Обратите внимание,атрибут style позволяет подключить стиль CSS к данному тегу <div>.

Таким образом, всё, что записано внутри двойных кавычек style, уже и есть использование CSS.

Мы указали три свойства:width (ширина), height (высота), background–image (картинка фона)– это три стиля из CSS, они указываются через точку с запятой после названия стиля, его значение указывается через двоеточие.

Всё, что находится в двойных кавычках, уже не HTML, это вставка CSS.

После двойной кавычки зададим ещё один атрибут под названием id.

Его значение, например,укажем myfon, чтобы, при необходимости,обратиться к нему из языка JavaScript.

<div style="width: 800px; height: 600px; background-image: url(fon.png);" id="myfon">

Снова сохраним проект,перейдем в браузер, нажмем F5. Появился фон страницы, картинка 800 на 600. Поля, надписи и кнопка вводятся на фоне этой картинки. Мы создали все элементы HTML-страницы. Теперь необходимо их оформить, привести к желаемому виду. Для оформления элементовHTML-страницы воспользуемся стилями CSS.Подключим стиль CSS к данной странице.Внутри заголовочного тега head добавим тегstyle. Это тег для применения CSS к HTML.

<html>

<head>

<style>

</style>

</head>

Внутри тега style пропишемCSS свойства.

Укажем CSS для тега tr,отвечающего за строку таблицы. После указания значения тега устанавливается открывающая и закрывающая фигурная скобка,в ней прописываются свойства.

<style>

tr {

height: 100px;

}

</style>

Укажем свойство height (высота). Далее,ставим двоеточие и указываем 100 px(пикселей), ставим точку с запятой.

Сейчас мы рассматриваем синтаксис CSS.Значения свойств идут внутри фигурных скобок –открывающей и закрывающей, это напоминает открывающую и закрывающую фигурную скобку языка Java. Перед открывающей и закрывающей скобкой указываем название тега, к которому свойство будет применено.

Таким образом, все теги<tr>на странице будут обладать этим свойством, т. е. всем строчкам мы задали высоту 100 пикселей.

Далее, по этому принципу, указываем тег <td>,ячейка таблицы, в фигурных скобках, для ячейки указываем ширину, width, и её конкретное значение –200пикселей.

<style>

tr {

height: 100px;

}

td {

width: 200px;

}

</style>

Теперь для всех тегов<td>на HTML-странице будет применено это свойство, каждой ячейки таблицы будет задана ширина 200 пикселей.

Сохраним проект,перейдём в браузер, нажмём F5. Строки и ячейки таблицы изменили размеры.

Для того, чтобы было удобнее наблюдать за происходящим,вернёмся в среду разработки Eclipse, к тегу <table>, значение атрибута borderснова поменяем на 1. Сохраняем, возвращаемся в браузер,обновляем –появились рамки ячеек, теперь лучше видны изменения.

Высота каждой строки имеет величину 100пикселей, строки стали шире. Ширина каждой ячейки –200пикселей. Ячейки изменились в размерах, и таблица теперь размещается несколько иначе. Вернёмся в среду разработки Eclipse, переходим снова к стилям.

Зададим свойства тега<span>. Тег <span>использовался для вложения в него текстовой надписи,такой как "Введите логин"или "Введите пароль".

Всё, находящееся внутри тега <span>, будет обладать свойствами, которые мы сейчас пропишем.

<style>

tr {

height: 100px;

}

td {

width: 200px;

}

span

{

color: red;

font-family: serif;

font-size: 20px;

}

</style>

Первое, что нужно указать –color, цвет.Например: red(красный). Далее записываем font-family, шрифт, и указываем, например, serif. Шрифт

serifподдерживается всеми браузерами.(вы можете указать любой понравившийся вам шрифт, например, arial, который также поддерживается всеми браузерами). Зададим размер текста - font-size. Укажем 20px. Снова сохраним, перейдём в браузер, нажмёмF5. Надписи стали красного цвета, поменялся их размер и вид шрифта. Таким образом, всё, вложенное в тег span, будет обладать такими свойствами. Далее,пропишем характеристики для тега <input>, для текстовых полей.

border-style–стиль рамки,ограничивающей поле, выберем следующее значение: ridge.Укажем цвет рамки –border-color.Пусть будет red(красный). И, наконец, border-width(толщина рамки) –возьмём 5px–толщина рамки будет 5 пикселей.

<style>

tr {

height: 100px;

}

td {

width: 200px;

}

span

{

color: red;

font-family: serif;

font-size: 20px;

}

input

{

border-style: ridge;

border-color: red;

border-width: 5px;

color: blue;

font-family: serif;

font-size: 20px;

background-color: white;

padding: 5px;

}

</style>

Теперь укажем color (цвет)текста, вводимого пользователем: пусть будет blue(синий). Шрифт выберем (как и в предыдущем теге <span>) –serif.Размер текста font-sizeукажем:20px. background-color, цвет фона,делаем white(белым).

И, наконец, padding–отступы справа,сверху, снизу и слева, т. е. с четырех сторон,зададим 5px.Таким образом, текст внутри текстового поля будет не вплотную прилегать к рамке,он будет иметь отступ в 5пикселей с каждой стороны. Сохраняем, переходим в браузер,нажимаем клавишу F5. Рамка изменилась. Изменился её цвет–выводимый текст стал синим. Появился отступ по 5пикселей (см. рис. 4.23).

Рис. 4.23

Добавим ещё один момент:

<style>

tr {

height: 100px;

}

td {

width: 200px;

}

span

{

color: red;

font-family: serif;

font-size: 20px;

}

input

{

border-style: ridge;

border-color: red;

border-width: 5px;

color: blue;

font-family: serif;

font-size: 20px;

background-color: white;

padding: 5px;

}

input:HOVER

{

border-color: white;

color: red;

}

</style>

Обратимся к тегу <input>,поставим двоеточие и укажем слово HOVER. Заданное свойство будет выполняться при наведении курсора мыши на поле input. Например, нужно, чтобы цвет рамки при наведении на поле изменялся. Указываем нужный цвет, border-color (цвет рамки): white– белый.И цвет текста, color, red(красный). Снова сохраним, перейдём в браузер, нажмём клавишу F5.

При наведении мышки на текстовое поле, меняется цвет рамки на белый и цвет текста – на красный. Убираем курсор мыши,всё возвращается назад.

Нужно отметить, что эта возможность поддерживается только при использовании современного браузера. Если установлен устаревший браузер, например,Internet Explorer 6,такая возможность поддерживаться не будет.

Таким образом, мы выяснили, что CSSстили могут по-разному поддерживаться разными браузерами.

HTMLразметка тоже может по-разному отображаться разными браузерами, особенно это касается их старых версий.

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

После того, как мы сверстали страницу, значение атрибутаborderдля тега<table>снова сделаем равным 0, чтобы рамки исчезли,перейдём в браузер, обновим – F5.

<table border="0">

Рамки исчезают,остаются лишь поля. Мы задали слишком большие отступы, вернёмся в среду разработки Eclipse, зададим высоту строчек вместо100, например,50, сохраним,перейдём в браузер, сделаем обновление.

<style>

tr {

height: 50px;

}

Поля сдвинулись, т. к.высота строк стала в два раза меньше.Ширину ячеек тоже можно сделать чуть меньше. Вместо 200 зададим 150, сохраним,обновим.

td

{

width: 150px;

}

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

Рис. 4.24

Полностью законченный код страницы выглядит так:

<html>

<head>

<style>

tr {

height: 50px;

}

td {

width: 150px;

}

span

{

color: red;

font-family: serif;

font-size: 20px;

}

input

{

border-style: ridge;

border-color: red;

border-width: 5px;

color: blue;

font-family: serif;

font-size: 20px;

background-color: white;

padding: 5px;

}

input:HOVER {

border-color: white;

color: red;

}

</style>

</head>

<body>

<center>

<div style="width: 800px; height: 600px; background-image: url(fon.png);" id="myfon">

<table border="0">

<tr>

<td>

<span>Введите Логин:</span>

</td>

<td>

<input type="text" maxlength="10" id="login"/>

</td>

</tr>

<tr>

<td>

<span>Введите Пароль:</span>

</td>

<td>

<input type="password" maxlength="10" id="password"/>

</td>

</tr>

<tr>

<td>

</td>

<td>

<input type="button" value="Вход"onclick="func()"/>

</td>

</tr>

</table>

</div>

</center>

</body>

</html>

Но пока, при нажатии на кнопку "Вход"ничего не происходит. Программировать кнопку будем на следующем занятии!

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

На текущий момент, для операционной системы Windows, как минимум,нужно проверить правильность отображения страницы в пяти браузерах: Internet Explorer, Mozilla, Opera, Safariи Google Chrome. Желательно делать проверку не только на последних версиях браузера, но и на более ранних–там тоже могут возникнуть некоторые проблемы.Необходимо проверить отображение страницы и под другими операционными системами,такими как Linux иMac OS.Там будут другие браузеры, в другой операционной системе отображение может происходить по-другому. Отображение страницы проверяется также при разных разрешениях экрана и на разных типах мониторов.

Чем больше проверок выполнено, тем больше гарантий, что страница будет отображаться правильно у разных пользователей. Отладка страницы,отладка верстки –это отдельная работа, она требует определенного опыта.

Занятие 5. "Использование JavaScript наweb-странице"

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

Сначала немного теории.

Мы установили среду разработки Eclipseдля JavaScript, и на диске C:появилась ещё одна папка, содержащая эту версию Eclipse.

Откроем EclipseдляJavaScript, затем нашу HTML-страницу.

Программный код добавим в проекте предыдущего занятия lesson_16, новый проект создавать не будем.

Откроем список проектов,выберем lesson_16,нажмём правую клавишу мыши (см. рис. 5.1), перейдём в самый низ.

Рис. 5.1

Properties(см. рис. 5.2) – свойства проекта.

Рис. 5.2

Location(см. рис. 5.3)–место расположения проекта, т. е.,путь к папке на диске, содержащей проект.

Рис. 5.3

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

Мы попали в папку с проектом, где находится страница index.html, а также изображение, являвшееся фоном для созданной нами страницы (см. рис. 5.4).

Рис. 5.4

Эти два файла, по сути,представляют собой наш небольшой сайт, его минимальную версию. Следовательно, если эти файлы разместить на web-сервере в отдельной папке, при обращении к web-серверу, страницаindex.htmlбудет запускаться и отображаться в браузере пользователя.

Ещё раз рассмотрим схему взаимодействия web-сервера с клиентскими компьютерами (см.рис. 5.5):

Рис. 5.5

По центру изображенweb-сервер – компьютер, на котором хранится сайт, т. е. сайт физически находится в папке на web-сервере.

Отображены три пользователя, они будут обращаться кweb-серверу,чтобы зайти на сайт.

Пользователь, открывший браузер, вводит имя сайта, т. е. его доменное имя. Происходит обращение кDNS-серверу, и идентифицируется IP-адрес,соответствующий введённому доменному имени, т. е., определяется компьютер (илиweb-сервер),хранящий сайт.

Таким образом, в строке браузера можно сразу указывать IP-адрес и по нему переходить на нужный сайт, но запомнитьIP-адрес сложнее,чем доменное имя.

При обращении к web-серверу, он отображает пользователю в браузер запрашиваемую страницу.

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

В нашем случае нужно было бы разместить на web-сервере два файла:index.htmlи fon.png. Каждый пользователь, при желании посмотреть нашу страницу, набирал бы имя нашего сайта,происходило бы обращение на web-сервер, содержащий этот сайт.

На web-сервере также может присутствовать какая-либо база данных – хранилище необходимых для работы сайта данных. Например, логины и пароли зарегистрированных и получивших доступ к данному сайту пользователей. Если это сайт интернет-магазина, в базе данных обычно хранится список предлагаемых товаров, их стоимость и т. д.

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

В случае динамического сайта на web-сервере работает также программный код,написанный, например, на языках PHP, C#или Java. Этот программный код может заносить информацию в базу данных, или наоборот, считывать ее. Кроме этого, в динамических сайтах есть возможность программного формирования страниц, отправляемых на клиентский компьютер (пользователю) для просмотра в браузере и т. д.

При помощи программного кода на web-сервере можно программным образом изменить содержимое HTML-страницы, отправляемой затем в браузер. В случае статического сайта это невозможно –HTML-страница в неизменном виде отправляется в браузер и отображается в нём.

Откроем браузер.Перейдём на сайт www.google.ru. В браузере отобразилась страница,отправленная web-сервером, на котором хранится сайт www.google.ru.

Нажмем клавишу F5для обновления страницы. В этот момент будет произведен запрос на web-сервер, который возвратит в ответ страницу.Если какая-то часть страницы была изменена–страница будет выглядеть иначе. Таким образом, в ответ на каждое обращение (запрос) к web-серверучерез клавишу F5, будет возвращена очередная страница.

При нажатии клавишиF5происходит перезагрузка страницы. Идёт обращение кweb-серверу,сервер через браузер выдаёт ответ. На это уходит некоторое время, возникает временная задержка.Исполнение алгоритмов JavaScriptпроисходит в браузере пользователя, поэтому может реагировать на его действия без перезагрузки страницы. Таким образом,JavaScript реализует быстрое взаимодействие с пользователем без перезагрузки страниц. Такое взаимодействие называется интерактивным.

Без использованияJavaScript, даже для такой операции, как подведение к полю курсора, пришлось бы делать перезагрузку страницы, реагировать на действия пользователя уже на web-сервере. Это дало бы определённую временную задержку.

Следовательно, основное предназначение JavaScript– дополнить интерактивную функциональность страницы и обеспечить быстрое взаимодействие с пользователем. JavaScriptпозволяет создать дополнительные удобства для работы пользователя.

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

В современнойweb-разработке существует понятие система управления контентом, или CMS. Что это такое? (см. рис.5.6).

Рис. 5.6

Познакомимся с этим понятием.

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

Принцип системы управления контентомследующий:

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

На прошлом занятии мы начали создавать сайт с нуля, с чистого листа. Потратив время, мы создали лишь небольшую HTML-страницу. Если же сайт довольно сложный, содержит много страниц и разделов,на его создание с нуля уйдёт значительное время. Системы управления контентом позволяют значительно оптимизировать процесс создания сайта. Эти системы еще называют движками сайта.

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

Одна из самых известных российских CMS – 1C Bitrix, из международных – Joomla!.Существуют системы управления контентом под названиямиDrupalиDotNetNuke.

Вернёмся на нашу HTML-страницу. Вспомним,весь программный код находится внутри тегов <html>.

После <html>идет тег <head>(заголовок).

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

Внутри тегов <body>находится само содержимое HTML-документа – тело документа.

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

Среда Eclipseавтоматически вставляет оставшуюся часть, закрывающий тег </script>и атрибут под названием type, используемый в этом теге. В двойных кавычках указывается значение атрибута.

<html>

<head>

<script type="text/javascript">

</script>

text/javascript–означает, что между открывающим и закрывающим тегами <script>будет находиться программный код,написанный на языке JavaScript.

Язык JavaScript, во многом напоминающий язык Java, имеет и заметные отличия.

В частности, в JavaScriptможно объявлять переменные без явного указания ее типа.Такая возможность называется мягкой типизацией.Напомним, что в Javaуказание типа переменной является обязательным. В JavaScriptможно просто объявить переменную и в дальнейшем помещать в неё некоторое значение. Причём сначала в эту переменную можно поместить число, затем, например,строку, потом символ и т. д. Тип переменной жёстко не фиксируется и не контролируется.

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

var tmp = 100;

tmp = "Hello";

Переменной было присвоено числовое значение 100. Следующей строкой,присвоили переменной уже строковый тип.

Таким образом, тип переменной не контролируется перед запуском программы, в переменную можно помещать абсолютно любые типы.

Теперь рассмотрим, что собой представляет функция на языкеJavaScript.

Для описания функции необходимо написать служебное словоfunctionи указать имя функции.

function func()

{

}

Вспомним, что такое функция? Функция –это аналогия метода, который мы использовали внутри класса. Т. е., при вызове функции выполняется программный код, находящийся между открывающей и закрывающей фигурными скобками функции.Аналогичным образом мы вызывали методы, и выполнялся программный код этих методов.Открывающая и закрывающая фигурные скобки ставятся так же, как объявляются циклы,логические конструкции. В конце каждой строчки тела такой конструкции ставится точка с запятой. Общая логика программы та же самая, что и на языке Java. Таким образом,принцип работы одинаковый, синтаксис языкаJavaScriptтакой же,как языка Java. И в том и в другом случае используется, так называемый, C-синтаксис, произошедший от языкаC.

Теперь перейдем к решению задачи, которую мы поставили еще на предыдущем занятии. Нам нужно после нажатия пользователем на кнопку "Вход", обработать данные, введённые им в поля "Логин"и "Пароль". Если логин и пароль верны, пользователь должен попасть на страницу, отображающую Java-апплет.

Запустим сделанную нами на прошлом занятии HTML-страницу. На ней есть фон, поля ввода логина, пароля и кнопка "Вход".

Используем Java-апплет калькулятора, созданный нами ранее.

Апплет отобразится на этой же странице, её содержимое изменится.

В случае правильного логина и пароля, на этой странице мы увидим апплет калькулятора, т. е. покажем пользователю апплет в случае, если логии и пароль верны. Если же нет, выведем сообщение, что логин и пароль неверны и перебросим пользователя на другую страницу, например, на сайт oracle.com, где мы скачивали когда-то пакет разработчика для языкаJava.

Перейдём к программному коду HTML-страницы. Вспомним, когда мы создавали поля, в тегах <input>мы указывали атрибут под названием id (идентификатор), указали его значение "Логин", ниже указали значение "Пароль". По этим именам идентификаторов из кода JavaScript можно обратиться к полям и считать их содержимое, т. е. те значения, которые ввёл пользователь.

. . . . .

<input type="text" maxlength="10" id="login"/>

. . . . .

<input type="password" maxlength="10" id="password"/>

. . . . .

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

Создадим новую переменную, назовём её log, приравняем ей значение document.Сработает подсветка кода: при написании слова document.и нажатии оператора . повится список методов, которые можно использовать. Нам нужен метод getElementById(). Он позволяет получить элемент по id, т. е. по его идентификатору. В круглых скобках, в двойных кавычках указываем имя идентификатора –login, –это как раз идентификатор, заданный полю "Логин".Соответственно, если бы idбыл другим, в круглых скобках нужно было бы указать другое значение. Получим следующий код нашейHTML-страницы:

<script type="text/javascript">

function func()

{

var log = document.getElementById("login");

}

</script>

Объявим ещё одну переменную –pas, снова обращаемся к HTML-документу. Методом getElementById() получим значение элемента "Пароль" по id, указав idполя, в котором пользователь ввёл пароль –password.

<script type="text/javascript">

function func()

{

var log = document.getElementById("login");

var pas = document.getElementById("password");

}

</script>

Теперь в переменных иlogи pas, содержатся ссылки на нужные нам поля. Следовательно, через эти переменные можно получить значения,находящиеся в полях.

Далее запишем следующую конструкцию –алгоритм с условием, - для проверки правильности ввода логина и пароля:

if ((log.value=="java") && (pas.value=="2012"))

{

}

else

{

}

Эта конструкция отражает следующее: если, делаем круглые скобки, (как и в Java). Во вложенных круглых скобках прописываем дополнительное условие: log (обращение к переменнойlog),ставим точку и записываем value (value – значение, введённое в текстовое поле input). Если значение текстового поля равно Java (это первое условие), т. е. проверяем логин.

Далее, ставим логическое И, (два символа амперсанд - &&)и указываем второе условие.

Допустим, имеется пароль 2012,логическое Итребует, чтобы выполнились два условия, которые стоят справа и слева,т. е., чтобы логин был обязательно java, а пароль –2012.

Если хоть одно из этих условий не выполняется, всё условие считается ложным, т. е. не выполнится.

Ставим открывающую и закрывающую фигурные скобки, внутри них будет работать программный код, он срабатывает при выполнении данного условия, т. е. если логин и пароль верны.

if ((log.value=="java") && (pas.value=="2012"))

{

alert("Добро пожаловать!");

}

else

{

}

Запишем следующее:alert, в круглых скобках указываем: "Добро пожаловать!". Методalertвыводит в браузере сообщение в виде диалогового окна.

На языке Java мы выводили такие же диалоговые окна при помощи класса JOptionPain, здесь используется команда alert.

Если логин и пароль неверны, пользователю выводится другое сообщение: "Ошибка при вводе пары: логин – пароль!!!"

Это действие описывается также: открывающая и закрывающая фигурные скобки, условие,которое выполняется (если пользователь логин и пароль ввел неверно). Текст сообщения "Ошибка при вводе пары: логин – пароль!!!", выводимого при выполнении условия неверного ввода,указывается в двойных кавычках.

Затем нужно будет сделать переход на другую страницу. Для этого можно использовать конструкциюlocation.replace().Location – текущее расположение, адрес, по которому мы находимся. replace()–метод,который позволяет его изменить. В скобках метода указывается адрес перехода, в нашем случае - http://www.oracle.com.

if ((log.value=="java") && (pas.value=="2012"))

{

alert("Добро пожаловать!");

}

else

{

alert("Ошибка при вводе пары Логин-Пароль!!!");

//Перебрасываем пользователя по другому адресу

location.replace("http://www.oracle.com");

}

Сохраним страницу,выполнив команду: Файл – Save All.

Теперь перейдём в папку с проектом и снова запустим страницуindex.html,содержащую теперь и некоторый код JavaScript.

Протестируем сделанное.Введем логин и пароль 1и 1,соответственно. Очевидно, логин и пароль сейчас неверны.

Нажимаем на кнопку"Вход". Должно выйти сообщение: "Ошибка при вводе пары логин – пароль!!!" Таким образом, JavaScriptпроверил логин – пароль, выдал ошибку. Нажимаем Ok, происходит переход на указанную страницу, на сайт oracle.com. Эту операцию мы проделали при помощи JavaScript.

Вернёмся снова к программному коду и сделаем некоторую доработку. Если логин-пароль правильный,после сообщения "Добро пожаловать!"зададим еще одно действие. Создадим новую переменную, назовём, её сont. Снова обратимся кdocument., т. е. к HTML-документу, вызываем метод getElementById(), в круглых скобках указываем myfon, идентификатор:

if ((log.value=="java") && (pas.value=="2012"))

{

alert("Добро пожаловать!");

var cont = document.getElementById("myfon");

}

else

{

alert("Ошибка при вводе пары Логин-Пароль!!!");

location.replace("http://www.oracle.com");

}

Перейдём к коду HTMLи вспомним, что в теге <div>мы тоже указывали некий атрибут под названиемid, т. е. идентификатор с названием myfon.

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

При помощи JavaScriptможноизменить HTML-код, находящийся внутри тега <div>.

Рассмотрим код,находящийся внутри тега <div>. Выделяем блок,начиная с открывающего тега <table>, где создаётся таблица, и заканчивая закрывающим тегом<table>. Если его заменить на другой HTML-код, содержимое страницы изменится. Именно это и сделаем.Теперь переменная cont – это ссылка на тег <div>, обращаемся к этой переменной и к её свойству под названием innerHTML. innerHTML – HTML-код, находящийся внутри тега <div>. Заменяем его на другой. Пишем знак"=", ставим двойные кавычки –в них нужно записать HTML-код.Пропишем здесь подключение апплета калькулятора (строка выделена жирным шрифтом).

if ((log.value=="java") && (pas.value=="2012"))

{

alert("Добро пожаловать!");

var cont = document.getElementById("myfon");

cont.innerHTML = "<applet archive='prog.jar' code='prog.class' width='800'height='600'></applet>";

}

else

{

alert("Ошибка при вводе пары Логин-Пароль!!!");

location.replace("http://www.oracle.com");

}

Поместим апплет калькулятора в папку, где находится создаваемая страница и её фон. Теперь наш небольшой сайт состоит из трех файлов: