Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Интерфейс – способ взаимодействия компьютерной системы (программы) с пользователями и устройствами.На основе интерфейса реализуется взаимодействие всех современных информационных систем. Под интерфейсом понимается набор средств, правил и методов, за счет которых осуществляется коммуникация между элементами системы, различными программами и устройствами.
Интерфейс для пользователя
Пользователи не задумываются над тем, как устроена машина, пока она справляется со своими задачами. При этом не имеет значения, какой именно процессор используется и является ли язык программирования объектно-ориентированным, многопоточным или, быть может, называется какими-то другими умными словами. Для пользователей важнее всего удобство и результаты. Но все, что они видят, — это интерфейс. Другими словами, с точки зрения потребителя именно интерфейс является конечным продуктом
Термин интерфейс пользователя применяется по отношению к компьютерным программам (приложениям). В более широком смысле слова интерфейс пользователя − это любая система общения с устройствами, которые способны к интерактивному взаимодействию с пользователем.
Например, существуют:
Способ, которым вы выполняете какую-либо задачу с помощью какого-либо продукта, а именно совершаемые вами действия и то, что вы получаете в ответ, и является интерфейсом.
Примеры:
вожжи — главный элемент интерфейса между лошадью и кучером, или же, — интерфейс системы «лошадь — кучер»);
руль, педали газа и тормоза, ручка КПП — интерфейс (управления) автомобиля или же интерфейс системы «водитель — автомобиль»;
элементы электронного аппарата (телевизора, автомагнитолы, часов и т. п.) — дисплей, набор кнопок и переключателей для настройки, плюс правила управления ими — интерфейс системы «человек — аппарат»;
клавиатура, мышь и пр. устройства ввода — элементы сопряжения в системе пользовательского интерфейса (в свою очередь, и сами клавиатура и мышь имеют свои интерфейсы сопряжения с компьютером, аппаратные и программные).
Наблюдатель определяет, как следует организовать взаимоотношения между объектами, чтобы избежать сильной связи между ними и таким образом добиться необходимой гибкости. Давайте посмотрим, что этот шаблон из себя представляет. Итак, объект, за которым ведется наблюдение, называется субъектом (subject). Объект, заинтересованный в изменениях субъекта, называется наблюдателем (observer). В обязанности субъекта входит добавление наблюдателей (в идеале количество наблюдателей произвольно), отправка наблюдателям сообщений об изменениях своего состояния и отсоединение ранее добавленных наблюдателей. Наблюдатели проще субъектов: они определяют методы, которые следует вызывать субъекту, для того чтобы сообщить о своих изменениях
Как видно из рисунка, субъект обладает тремя методами: метод add() позволяет добавить очередного наблюдателя (как правило, наблюдатели хранятся в виде списка, что позволяет иметь произвольное их количество и легко манипулировать ими); метод remove() позволяет удалить ранее добавленного наблюдателя; метод notify() сообщает наблюдателям, добавленным ранее методом add(), о смене состояния субъекта. Для этого он вызывает определенный во всех объектах-наблюдателях специальный метод, в нашем случае это метод update(). В свою очередь, наблюдатели знают, что очередной вызов метода update() означает смену состояния субъекта, и выполняют в этом методе все необходимые действия. Чтобы субъекты и наблюдатели смогли работать друг с другом, их функции описываются в базовых классах (или интерфейсах), и объекты, которым необходимо знать друг о друге, но которым нежелательно быть сильно связанными, наследуют от этих базовых классов или реализуют интерфейсы и начинают работать как субъекты и наблюдатели. Нетрудно заметить, что шаблон наблюдателя должен прекрасно работать в системах обработки событий, происходящих в пользовательском интерфейсе. Действительно, субъектами являютсяразличные графические компоненты, из которых состоит интерфейс — кнопки, списки, текстовые поля, а программист определяет, что в них происходит (щелчки на кнопках, перемещения мыши), описывает объекты-наблюдатели и решает, как поступить при смене состояния интересующего его компонента.
Слушатели
Событие (event) в пользовательском интерфейсе — это либо непосредственное действие пользователя (щелчок или движение мыши, нажатие клавиши), либо изменение состояния какого-либо компонента интерфейса (например, щелчок мыши может привести к нажатию кнопки).
Источником события (event source) в Swing может быть любой компонент, будь то кнопка, надпись с текстом или диалоговое окно. Для того чтобы узнавать в своей программе о происходящих в компоненте событиях, нам необходимо сообщить компоненту о своей заинтересованности. Сделать это можно, передав компоненту слушателя (listener) определенного события
. Слушатель — этот тот самый наблюдатель (разница только в названиях), которому компонент будет сообщать о происходящих в нем событиях
Каждому типу события соответствует свой слушатель. Так гораздо проще следить именно за теми событиями, что нас интересуют, а не за всеми подряд — код, обрабатывающий щелчки мыши, будет отделен от кода, ответственного за нажатия клавиш. Обязанности слушателей (то есть методы, которые в них должны быть определены) описаны в соответствующих интерфейсах. Вы реализуете в своем классе нужный вам интерфейс слушателя, передаете его в интересующий вас компонент и спокойно ждете наступления события. Давайте рассмотрим простой пример, в котором мы попытаемся узнать о нажатиях клавиш при активном окне.Надо сказать, что события в Java условно разделяются на низкоуровневые (low-level events) и высокоуровневые (high-level events). К низкоуровневым событиям относят те, что происходят непосредственно в результате действий пользователя: это движения мыши, передача фокуса ввода от одного приложения другому, нажатия клавиш и т. п. Они поступают в Java-программу от операционной системы или от внутренних механизмов виртуальной машины. Высокоуровневые события происходят в результате изменения состояния компонента. Такие события поступают не от операционной системы, а создаются самим компонентом. Процесс создания события еще называют запуском (fire). Во многих компонентах Swing вы можете увидеть методы с именами вида fireXXX(); именно в таких методах создаются объекты с информацией о событиях, которые затем рассылаются слушателям. Часто события высокого уровня возникают после того, как происходят несколько событий низкого уровня (например, кнопка сообщает о своем нажатии, после того как над ней была
нажата и отпущена кнопка мыши).
Прежде всего необходимо написать класс, реализующий интерфейс слушателя. Если вы просмотрите интерактивную документацию Java, то увидите, что для получения информации о нажатиях клавиш используется интерфейс KeyListener, именно его мы и реализовали в классе KeyL. В этом интерфейсе определены три метода, каждый из которых вызывается при наступлении определенного события: keyPressed() и keyReleased() — при нажатии и отпускании клавиши, keyTyped() — при печати символа (когда нажимается и отпускается клавиша, соответствующая печатному символу12). Как параметр каждому методу передается объект KeyEvent, который используется для получения дополнительной информации о событии (кода клавиши, источника события и т. д.). Чтобы сделать программу максимально простой, мы просто передаем эту информацию в стандартный поток вывода. Последний этап — регистрация нашего слушателя в интересующем нас компоненте. Компонент у нас в программе только один — это наше окно. Для регистрации слушателя событий от клавиатуры мы вызываем метод addKeyListener(), в который передаем ссылку на объект класса KeyL. После этого остается только запустить программу и посмотреть, какие сообщения она выводит в стандартный поток вывода при, нажатиях клавиш (конечно, события от нажатий клавиш будут возникать только
при активном окне).
// FirstEvents.java
// События - нажатия клавиш на клавиатуре
import javax.swing.*;
import java.awt.event.*;
public class FirstEvents extends JFrame {
FirstEvents() {
super("FirstEvents");
// призакрытииокна - выход
setDefaultCloseOperation(EXIT_ON_CLOSE);
// регистрируемнашегослушателя
addKeyListener(new KeyL());
// выводимокнонаэкран
setSize(200, 200);
setVisible(true);
}
public static void main(String[] args) {new FirstEvents();
}
}
// этот класс будет получать извещения о событиях
class KeyL implements KeyListener {
// печатьсимвола
public void keyTyped(KeyEvent k) {
System.out.println(k);
}
// нажатиеклавиши
public void keyPressed(KeyEvent k) {
System.out.println(k);
}
// отпусканиенажатойклавиши
public void keyReleased(KeyEvent k) {System.out.println(k);
}}
// LowLevelEvents.java
// Наблюдение за основными низкоуровневыми событиями
import javax.swing.*;
import java.awt.event.*;
public class LowLevelEvents extends JFrame {LowLevelEvents() {super("LowLevelEvents");
// призакрытииокна - выход
setDefaultCloseOperation(EXIT_ON_CLOSE);// добавимтекстовоеполе
getContentPane().add(new JScrollPane(out = new JTextArea()));// икнопку
JButton button = new JButton("Источниксобытий");
getContentPane().add(button, "South");
// регистрируемнащегослушателя
OurListener ol = new OurListener();
button.addKeyListener(ol);
button.addMouseListener(ol);
button.addMouseMotionListener(ol);button.addFocusListener(ol);
// выводим окно на экран
setSize(400, 300);
setVisible(true);}
// сюда мы будем выводить информацию
JTextArea out;
// внутренний класс - слушатель событий
class OurListener implements MouseListener, KeyListener,
MouseMotionListener, MouseWheelListener, FocusListener {public void mouseClicked(MouseEvent e)
{ out.append(e.toString() + "\n"); }
public void mousePressed(MouseEvent e)
{ out.append(e.toString() + "\n"); }
public void mouseReleased(MouseEvent e)
{ out.append(e.toString() + "\n"); }
public void mouseEntered(MouseEvent e)
{ out.append(e.toString() + "\n"); }
public void mouseExited(MouseEvent e)
{ out.append(e.toString() + "\n"); }
public void keyTyped(KeyEvent e)
{ out.append(e.toString() + "\n"); }
public void keyPressed(KeyEvent e)
{ out.append(e.toString() + "\n"); }
public void keyReleased(KeyEvent e)
{ out.append(e.toString() + "\n"); }
public void mouseDragged(MouseEvent e)
{ out.append(e.toString() + "\n"); }
public void mouseMoved(MouseEvent e)
{ out.append(e.toString() + "\n"); }
public void focusGained(FocusEvent e)
{ out.append(e.toString() + "\n"); }
public void focusLost(FocusEvent e)
{ out.append(e.toString() + "\n"); }
public void mouseWheelMoved(MouseWheelEvent e)
{ out.append(e.toString() + "\n"); }}
public static void main(String[] args) {new LowLevelEvents();}}
Этот тег предназначен для построения поля с целью ввода многострочный текстовой информации. В контейнере TEXTAREA допускается размещать любой текст, который будет выведен в поле ввода по умолчанию. Между тегами <textarea> и </textarea> можно поместить любой текст, который будет отображаться внутри поля.
Синтаксис
<textareaатрибуты>
текст
</textarea>
Перечислим атрибуты этого тега.
!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег TEXTAREA</title>
</head>
<body>
<form action="textarea1.php" method="post">
<p><b>Введите ваш отзыв:</b></p>
<p><textarea rows="10" cols="45" name="text"></textarea></p>
<p><input type="submit" value="Отправить"></p>
</form>
</body>
</html>При помощи атрибутов ROWS и COLS можно задать поле любого размера. Хотя эти атрибуты не являются обязательными, они не имеют определенных значений по умолчанию (для каждого браузера эти значения различны), поэтому лучше их всегда указывать явно.
<TEXTAREA COLS="20" NAME="txtData"
ROWS="5">
Этотекст
TextArea </TЕХТАRЕА>
7) Тег select. Атрибуты тега select. Пример использования.
Этот тег используется для создания всплывающего меню или списка опций с полосой прокрутки. Список опций и пункты меню располагаются внутри контейнера SELECT. Аналогично тегу <TEXTAREA>, <SELECT> требует обязательного определения имени в атрибуте NAME. Количество опций указывается в атрибуте SIZE. Ниже перечислены атрибуты тега <SELECT>.
NAME - Определяет название информации
SIZE- Определяет вертикальный размер окна для опций выбора.
Если атрибут опущен или его значение равно 1, выводится всплывающий список опций. Если указано число больше единицы, то опции выводятся в окне с полосой прокрутки. Если значение атрибута больше, чем фактическое количество элементов списка, добавляются пустые строки. При их выборе пользователемвозвращаются пустые поля
MULTIPLE - Позволяет выбирать сразу нескольких
Опций
Список опций включается в контейнер <SELECT> при помощи тега <OPTION>. Этот тег имеет два атрибута.
VALUE-Указывает значение, возвращаемое программе обработки (скрипту), в случае выбора опции пользователем
SELECTED-Указывает на опцию, выбранную по умолчанию
Пример1:
Ниже приведено содержимое двух HTML-документов, содержащих похожие формы. Во втором документе предварительно выбран один элемент из списка (добавлен атрибут SELECTED).
<HTML><BODY> Выберите время года: <FORM>
<SELECT NAME=year>
<OPTION SELECTED VALUE="winter">зима
<OPTION VALUE="spring">весна<OPTION VALUE="summer">лето
<OPTION VALUE="autumn">осень</SELECT></FORM></BODY></HTML>
Пример2:
<HTML><BODY>
Выберите время года:<FORM>
<SELECT MULTIPLE NAME="year"><OPTION SELECTED VALUE="winter">зима
<OPTION VALUE="spring">весна<OPTION VALUE="summer">лето
<OPTION VALUE="autumn">осень
</SELECT></FORM></BODY></HTML>
8)Тег input. Атрибутытега input. Пример использования.
Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input>предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент <input> не требуется помещать внутрь контейнера <form>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать <form> обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.
Основной атрибут тега <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.
NAMESIZE Указывает размер поля ввода в символах.
MAXLENGTH Определяет максимально возможное число символов, вводимых в поле.
VALUE Для текстового поля определяет текст, выводимый по умолчанию. Для флажкови переключателей указывает значение, возвращаемое программе обработки. Для кнопок отправки и очистки формы определяет надпись на кнопке.
CHECKED Устанавливает флажок или переключатель во включенное состояние по умолчанию. С другими типами тегов <INPUT> не употребляется.
TYPE Устанавливает тип поля ввода .
Тип поля ввода, атрибут TYPE
Атрибут TYPE тега <INPUT> может принимать следующие значения.
TEXT Является значением по умолчанию и предполагает создание одной строки для ввода данных. Для этого типа поля ввода употребляются атрибуты NAME (обязательный), SIZE, VALUE и MAXLENGTH
PASSWORD Позволяет заменять вводимые символы пароля звездочками. Для этого типа поля ввода используются атрибуты NAME (обязательный), SIZE, MAXLENGTH и VALUE.
CHECKBOX Позволяет вывести поле для установки флажка в виде маленького квадратика, в котором может быть произведена отметка опции "галочкой". Может использоваться совместно с атрибутами NAME (обязательный), VALUE и CHECKED (определяет установленный по умолчанию флажок). Флажки обычно употребляются, когда можно выбрать сразу несколько опций из числа предложенных. Нужно быть очень осторожным в использовании флажков и переключателей, если цвет фона страницы определяется не документом, а пользователем при помощи установок программы просмотра. Нельзя допускать, чтобы опции сливались с фоном страницы.RADIO Позволяет выбрать только одну из представленного числа опций. Переключатели можно группировать, задавая одно и то же значение атрибута NAME (обязательный). Так же используются атрибуты VALUE и CHECKED.
Пример:В следующей форме используется значение TEXT.
<HTML><BODY>
<FORM>Введитеномертелефона: <INPUT TYPE="TEXT" NAME="phone" SIZE="15" MAXLENGTH="12"></FORM></BODY></HTML>
9) Тег form. Атрибуты тега form. Пример использования.
Тег <form> устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.
Документ может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине данные форм должны быть независимы друг от друга. Для отправки формы на сервер используется кнопка Submit, того же можно добиться, если нажать клавишу Enter в пределах формы. Если кнопка Submit отсутствует в форме, клавиша Enter имитирует ее использование. Когда форма отправляется на сервер, управление данными передается программе, заданной атрибутом action тега <form>. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name тега <input>, а значение введено пользователем или установлено в поле формы по умолчанию.
Допускается внутрь контейнера <form> помещать другие теги, при этом сама форма никак не отображается на веб-странице, видны только ее элементы и результаты вложенных тегов.
<form action="URL">
...
</form>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег FORM</title>
</head>
<body>
<form action="handler.php">
<p><b>Как по вашему мнению расшифровывается аббревиатура "ОС"?</b></p>
<p><input type="radio" name="answer" value="a1">Офицерскийсостав<Br>
<input type="radio" name="answer" value="a2">Операционнаясистема<Br>
<input type="radio" name="answer" value="a3">Большойполосатыймух</p>
<p><input type="submit"></p>
</form>
</body>
</html>
10) CSS. Стиль для отдельного тега.
CSS — Cascading Style Sheets (каскадные таблицы стилей) — это средство, позволяющее задавать различные свойства HTML-тегам. Например, можно указать, как должен выглядеть конкретный абзац P:
<P style="font-size:1.5cm; color:green">
Стиль задается атрибутом style. Браузеру дано указание вывести абзац зелеными буквами размером в 1.5 сантиметра. Стилевые определения задаются при помощи указаний
характеристика:величина;
Указания отделяются друг от друга символом «;».Атрибут style можно использовать практически в каждом теге, задавая его специфические свойства.
Пример:
<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/html">
<TITLE> Стиль для отдельного тега</TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<H2> Стиль для отдельного тега </H2>
<HR>
<UL>
<LI>Этообычныйтекст.
<LI style="color:red;
Красные наклонные буквы высотой 1 см.
<LI style="margin-left:2cm">
Отступ слева в 2 сантиметра.
</UL>
</BODY>
</HTML>
Можно задавать стиль для тега или группы тегов так, чтобы определение работало на протяжении всего HTML-документа. Например, можно указать вид всех заголовков. Для этого достаточно написать определение в головной части документа через стилевые определения.
Стилевые определения или селекторы располагаются внутри блока
<style>. . . </style> и «запаковываются» в HTML-комментарий.
Стилевое определение имеет вид:
Имя тега (или имена тегов через запятые)
{ характеристика: величина;
…
характеристика: величина;
}
<HTML>
<HEAD>
<TITLE>Стиль для отдельного файла</TITLE>
<STYLE type="text/css">
<!--
H1,H2,H3,H4,H5,H6
{
text-align:right;
color:maroon;
font-family:Arial,Geneva,Helvetica,sans-serif;
} -->
</STYLE>
</HEAD>
<BODY bgcolor=#DFF0D5 text=black>
<H2>Стиль для отдельного файла</H2>
<HR>
<P>Это обычный текст
<H3>Это заголовок</H3>
<P>Это снова обычный текст
</BODY>
</HTML>
В приведенном выше примере использованы три характеристики:
правому краю;
Geneva, sans-serif; шрифт.
Обычной практикой является указание стилей в отдельном файле. Для таких файлов используют расширение css. Например, можно в файле style.css записать:
BODY {margin-left: 40рх;}
Hl,H2,H3,H4,H5,H6
{
text-align: right;
color: red;
font-family: "Arial Cyr", Geneva, sans-serif;
}
Для подключения этих указаний в разделе <head>...</head>HTML-файла
нужно поместить ссылку:
<LINKrel=stylesheettype="text/css“href=style.css>
На этот стилевой файл могут ссылаться многие HTML-документы. Изменения в этом единственном файле скажутся на внешнем виде десятка страниц.
Понятно, что такой способ расположения стилевых определений очень удобен. На один и тот же стилевой файл могут ссылаться много HTML-документов. Изменения в этом единственном файле скажутся на внешнем виде десятка (а то и сотни) документов.
Обратите внимание на стилевое указание
body {margin-left: 40рх;}
Оно задает экранный отступ слева в 40 пикселов для всего документа в целом. Как видите, для задания страничного отступа можно обойтись без таблиц и полей, о которых говорилось HTML-кодах.
внедрения стилей в HTML-коды:
C комбинируем эти способы. Какой из них окажется предпочтительнее, покажут примеры.
Документ без CSS-указаний
В примере, код которого приводится ниже,
заголовки выводятся черным цветом по белому.
<HTML><HEAD><TITLE>Пример 1</TITLE>
</HEAD><BODY bgcolor=white
text=black>
<H1>Заголовок 1</H1><H2>Заголовок 2</H2><HЗ>Заголовок 3</HЗ>
</BODY></HTML>
CSS-указания в отдельном теге
Этот код отобразит первые два заголовка черным
цветом, а последний — красным.
<HTML><HEAD><TITLE>Пример 2</TITLE>
</HEAD><BODY bgcolor=white
text=black>
<H1>Заголовок 1</H1><H2>Заголовок 2</H2><H3 style="color:red">
Заголовок 3 </H3>
</BODY></HTML>
CSS-указания в CSS-файле
Файл prim.сss содержит:
H1,H2,H3{ color: green;}
Тогда HTML-файл с использованием этого файла имеет сл. вид.
<HTML><HEAD><!-- Подключение файла prim.css. - - >
<LINK rel=stylesheet type="text/css" href-prim.css>
<STYLE type="text/css"><!--
H1,H2,H3
{ color: blue; }
-->
</STYLE><TITLE>Пример 4</TITLE>
</HEAD><BODY bgcolor=white text=black>
<H1>Заголовок 1</H1><H2>Заголовок 2</H2>
<H3 style="color:red">Заголовок 3</H3>
</BODY>
</HTML>
Шрифт font-family
Это стилевое свойство задает название гарнитуры шрифта (например, Arial) или родовое имя:
serif – шрифт с засечками (серифный);
sans-serif – шрифт без засечек (рубленый);
monospace – моноширинный шрифт (символы
имеют одинаковую ширину).
Гарнитура — это набор начертаний символов одного шрифта.
Этот набор может включать в себя прямое и курсивное начертание, различаться по степени жирности (толщине штрихов), ширине литер (сжатые,нормальные, растянутые) и кеглю.
Шрифты подразделяются на серифные (с засечками) и рубленые (без засечек). Пример шрифта с засечками — гарнитура Times, без засечек — Helvetica.
Серифные шрифты посредством засечек (серифов) в нижней части литер улучшают читаемость документа. Нижние серифы создают впечатление слитности написания слова, объединяя соседние буквы.
Рубленые шрифты, в отличие от серифных, имеют гладкие края букв и неимеют завитков.
Серифные шрифты используют для записи основного текста, а рубленые —для заголовков или мелких подписей или надписей.
Существует еще одно деление шрифтов на два класса: пропорциональные шрифты и моноширинные.
Моноширинные шрифты имитируют литеры пишущих машинок и первых матричных принтеров. В этих шрифтах ширина всех литер одинакова. Именно таким шрифтом браузер выводит текст на экран при использовании тегов <PRE>, <CODE>, <ТТ>, <SAMP>, <KBD>.
Обычные же тексты браузер выводит пропорциональным шрифтом. В пропорциональных шрифтах каждая буква занимает столько места, сколько ей действительно нужно.
Текст, записанный пропорциональным шрифтом, более комфортен для чтения, чем текст, записанный шрифтом моноширинным. Пропорциональные шрифты используют для основного текста, а моноширинные — для специальных выделений.
Гарнитуры Times и Helvetica — пропорциональные.
К моноширинным шрифтам относится гарнитура Courier.
Любая графическая операционная система имеет три набора стандартных гарнитур, для Windows это:
TimesRoman — серифный шрифт;
Arial — рубленый шрифт;
Courier — моноширинный шрифт.
При помощи свойства font-family можно указать не один, а несколько шрифтов через запятые в порядке предпочтения:
Н1,Н2,Н3,Н4,Н5,Н6
{
font-family:"Arial Cyr", Geneva, Helvetica, sans-serif;
}
Сначала браузер будет пытаться найти шрифт ArialCyr, затем Geneva, потом Helvetica и, наконец, в случае полной неудачи, какой-нибудь рубленый шрифт (указание sans-serif).
font-size
Свойство font-size используется для задания абсолютного или относительного размера текущего шрифта.В качестве относительного размера используется процентное задание (по отношению к размеру текущего шрифта) или ключевые слова:
larger – крупнее;
smaller – мельче.
В качестве абсолютного размера используется указание числа с одной из следующих единиц измерения: in, cm, mm, px, pt, pc.
color
Определяет цвет текста элемента (шрифта).
Пример цвета:
<HTML><HEAD><!-- ПодключениесвойствCSS --><STYLEtype="text/css"><!-- P { font-family: "Arial Cyr",Helvetica,sans-serif;
Тип границы или рамки - border-style
Допустимы следующие значения:
none – рамки нет (по умолчанию);
solid – обычная сплошная граница;
double – двойная линия;
groove – «вдавленная» граница;
ridge – «выпуклая» граница;
inset – «вдавленный» элемент;
outset – «выпуклый» элемент.
dashed – пунктирная граница.
dotted – точечная граница.
Например:P {border-style: dashed}
Цвет рамки - border-color
Определяет цвет рамки. Свойство работает, если задано свойство border-style.
Толщина рамки- border-width
Свойство работает, если задано свойство border-style. Ширину можно указывать числовыми единицами (процентной записи нет) или при помощи следующих ключевых слов:
length– на ширину окна;
thin – тонкая;
medium– средняя;
thick – толстая.
Отступы-padding
Задает расстояние между содержимым и рамкой элемента. Допускается числовая или процентная (от ширины элемента) запись.
Определение полей -margin
Задает ширину поля (отступа) элемента от краев бло-ка. Полязадаютсясвойствами margin, margin-top, margin-right, margin-bottom и margin-left . Допускается числовая, процентная (от ширины блока) запись или ключевое слово auto. В случае auto предполагается, что браузер будет подыскивать оптимальное значение самостоятельно. Пример:
<HTML><HEAD>
<!-- Подключение свойств CSS -->
<STYLEtype="text/css">
<!-- P
{ font-family: "Arial Cyr",Helvetica,sans-serif;
background-color:yellow;} -->
</STYLE><TITLE>Пример 4</TITLE></HEAD>
Эти теги играют особую роль для CSS. Они позволя-ют выделять в документе отдельные области, задавая для них специфические свойства. Все, что нужно сделать —это поместить теги, принадлежащие конструируемой области внутрь <DIV>. . .</DIV>или <SPAN>. . .</SPAN>. Разница между <DIV>и <SPAN>только в одном: после блока <DIV>браузер переходит на новую строку, а после блока <SPAN>—нет. Использование тега <SPAN>позволяет тем самым задавать стилевые свойства даже отдельным словам и буквам.
Примериспользования<DIV>:
<HTML><HEAD>
<METAhttp-equiv="Content-Type"
content="text/html">
<TITLE>Использованиетега DIV</TITLE>
<STYLEtype="text/css">
.area1{ color:red; font-weight:bolder;
.area2{color:black; background:#CFB597}
.area3{color:blue;background:#C0C0C0}
</STYLE></HEAD>
<HTML><HEAD><METAhttp-equiv="Content-Type"content="text/html"><TITLE>Использование тега SPAN</TITLE><STYLEtype="text/css"> .area1{ color:red; font-weight:bolder;
<BODYbgcolor=white text=black>
<SPANclass=area1><IMG src=vopros.gif>Где</SPAN>
<SPANсlass=аrеа2>начало того конца,</SPAN>
<SPANclass=area3>которым оканчивается начало?</SPAN></BODY></HTML>
HTML-код имеет иерархическую структуру. Весь документ кодируется внутри тегов <body>. . .</body>. Внутри абзаца <Р> могут содержаться элементы, размеченные тегами <B> и т. д. Наследование стилей означает, что если определен какой-то стиль для тега <body>, то этот стиль будет относиться ко всем тегам документа. Соответственно, если задан стиль для некоторого тега, то все теги, расположенные внутри него в HTML-программе, также будут обладать этим стилем.
Пусть для тега <Р>задан стиль:
P {color: red;
font-family: Arial,sans-serif}
Тогда содержимое тега <ЕМ>, помещенного внутрь абзаца, будет также выведено на экран рубленым шрифтом красного цвета размером в 14 пунктов.
Например:
<Р>
Стилевые определения обладают свойством <ЕМ>наследования</ЕМ>.
Если нужно, например, добавить для тега <ЕМ>разрядку текста, то этозадается дополнительно:
<HTML>
<HEAD>
<TITLE>Дополнительное стилевое указание
</TITLE>
<STYLE type="text/css">
<!--
P {color:red;
font-family:Arial,sans-serif}
-->
</STYLE></HEAD>
<BODY bgcolor=white text=black>
<P>
Стилевые определения обладают свойством
<EM style="letter-spacing:6рt:">
наследования
</EM></BODY></HTML>
Содержимое тега <ЕМ>выводится так же, как и содержимое тега <Р>, внутри которого он содержится (рубленым шрифтом в 14 пунктов красного цвета), но благодаря дополнительному определению style="letter-spacing: 6pt"между буквами появляются добавочные промежутки в 6 пунктов.
Внутри тега-потомка можно не только ввести дополнительные стилевые определения, но и переопределить стилевые свойства родителя.
При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определенном контексте. Например, можно установить цвет текста в <EM> синим только для случая, когда этот тег расположен внутри тега <H3>. Например:
<HTML>
<HEAD>
<METAhttp-equiv="Content-Type"
content="text/html">
<TITLE>Контекстныйселектор</TITLE>
<STYLEtype="text/css">
<!--H3EM{color:blue}
-->
</STYLE>
</HEAD>
<BODYbgcolor=whitetext=black>
<H3>Контекстный<EM>селектор</EM></H3>
<P>Контекстный<EM>селектор</EM></P>
</BODY>
</HTML>
Можно группировать несколько контекстных селекторов:
H1 B, H2 B, H1 EM, H2 EM { color: red }
что эквивалентно:
H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }
Стилевые определения можно описывать без указания тега. В этом случае каждому определению присваивается имя, которое можно использовать для сопоставления заданного стиля конкретному тегу. Такие стилевые определения называются классами.
Класс записывается следующим образом: .имя
{ характеристика: величина; ...
характеристика: величина;}
Иными словами, определение записывается как обычно, но вместо указаний на теги размещается конструкция .имя .
Например, определим стилевой класс с именем def:
.def{color: red;
font-family: Geneva, Helvetica, sans-serif; border: solid 0.2cm blue }
Здесь строка border: solid 0.2cm blue демонстрирует запись в одном стилевом указании нескольких параметров разного назначения (здесь: стиль, толщина рамки и ее цвет). Такую интеграцию допускают специальные обобщающие стилевые свойства, к которым относится border.
Можно образовывать классы на основе существующих стилевых определений:
< HTML >< HEAD >
<META http-equiv="Content-Type" content="text/html">
<TITLE>Определениекласса< /TITLE >
<STYLE type="text/css">
P {font-family:Helvetica}
P.def
{text-align: justify; background:#CFB597;
border:solid 4pt red;
padding:6pt;
margin-left:5%;margin-right:5%}
< /STYLE ></HEAD>
<BODY bgcolor=white text=black>
<H2> Классы(обычный заголовок)</H2>
<P> Этот абзац использует стилевое определение для тега Р (рубленый шрифт).
<P class=def> Этот абзац использует стиль производного класса “def”
(в определение стиля для тега Р добавлено:красная рамка, поля, цвет фона, выравнивание слева и справа, повышенный размер шрифта).
< /BODY ></HTML>В
этом примере за основу класса def взято определение стиля для тега <Р> и добавлены новые свойства
При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера. Задать этот тип можно через значение absolute свойства position. Координаты указываются относительно краёв окна браузера, называемого «видимой областью»
Для абсолютного позиционирования элемента свойство position должно иметь значение absolute. Вы можете использовать значения left, right, top и bottom для размещения бокса.
В качестве примера абсолютного позиционирования мы разместим 4 бокса в углах документа:
#box1 {
position:absolute;
top: 50px;
left: 50px;
}
#box2 {
position:absolute;
top: 50px;
right: 50px;
}
#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}
#box4 {
position:absolute;
bottom: 50px;
left: 50px; }
Свойство position со значением absolute можно использовать для создания эффекта фреймов. Кроме абсолютного позиционирования для элементов необходимо назначить свойство overflow со значением auto. Тогда при превышении контентом высоты видимой области появится полоса прокрутки. Высота и ширина «фреймов» формируется автоматически путём одновременного использования свойств left, right для ширины и top, bottom для высоты. Абсолютное позиционирование также применяется для создания различных эффектов, например, всплывающей подсказки к фотографиям. В отличие от атрибута title тега <img> который также выводит текст подсказки, через стили можно управлять видом текста выводимого с помощью скрипта.
При относительном позиционировании блока надо задать свойство position:relative и свойства смещения. Смещение в этом случае будет происходить не относительно "родительского" элемента (как при абсолютном позиционировании), а относительно самого блока в нормальном потоке.
Пример 1:
#blok1, #blok2, #blok3 {
border:1px solid red;
width:150px;
height:50px;
}
#blok2{
position:relative;
left:50px;
top:25px;
}
Применим2:
<head>
<style type="text/css">
.square1 {border:1px solid #000000; background-color:GreenYellow; color:#000000; width:80px; height:80px; position:relative; left:100px}
.square2 {border:1px solid #000000; background-color:Yellow; color:#000000; width:80px; height:80px; position:relative; left:250px}
img {position:relative; left:550px; top:100px}
</style>
</head>
<body>
<div class="square1">1</div>
<div class="square2">2</div>
<img src="../files/125/../images/image_p.png" alt="" />
</body>
22) CSS. Свойство Z-index. Примеры использования.
Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение positionзадано как absolute, fixed или relative.
В качестве значения используются целые числа (положительные, отрицательные и ноль). Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При равном значении z-index, на переднем плане находится тот элемент, который в коде HTML описан ниже. Хотя спецификация и разрешает использовать отрицательные значения z-index, но такие элементы не отображаются в браузере Firefox до версии 2.0 включительно.
Кроме числовых значений применяется auto — порядок элементов в этом случае строится автоматически, исходя из их положения в коде HTML и принадлежности к родителю, поскольку дочерние элементы имеют тот же номер, что их родительский элемент. Значение inherit указывает, что оно наследуется у родителя.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>z-index</title>
<style>
#layer1, #layer2, #layer3, #layer4 {
position: relative; /* Относительноепозиционирование */
}
#layer1, #layer3 {
font-size:50px; /* Размершрифтавпикселах */
color:#000080; /* Синийцветтекста */
}
#layer2, #layer4 {
top: -55px; /* Сдвигаемтекствверх */
left:5px; /* Сдвигаем текст вправо */
color:#ffa500; /* Оранжевый цвет текста */
font-size:70px; /* Размер шрифта в пикселах */
}
#layer1 { z-index:2; }
#layer2 { z-index:1; }
#layer3 { z-index:3; }
#layer4 { z-index:4; }
</style>
</head>
<body>
<p>Слой 1 наверху</p>
<div id="layer1">Слой 1</div>
<div id="layer2">Слой 2</div>
<p>Слой 4 наверху</p>
<div id="layer3">Слой 3</div>
<div id="layer4">Слой 4</div>
</body>
</html>
Результат данного примера показан на рис. 1.
[window.]document.getElementById("elementID").style.zIndex
Список, созданный с помощью тега <select>, в браузере Internet Explorer 6 всегда отображается поверх других элементов, несмотря на значение z-index.
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit и интерпретирует autoкак 0.
В браузере Firefox до версии 2.0 включительно отрицательное значение z-index располагает элемент ниже фона веб-страницы и его контента.
Описание
Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.
Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашел воплощение на многих сайтах, пока ему на смену не пришел более современный способ верстки с помощью слоев.
Синтаксис
<table>
<tr>
<td>...</td>
</tr>
</table>
Атрибуты
AlignОпределяет выравнивание таблицы.
BackgroundЗадает фоновый рисунок в таблице.
BgcolorЦвет фона таблицы.
BorderТолщина рамки в пикселах.
BordercolorЦвет рамки.
CellpaddingОтступ от рамки до содержимого ячейки.
CellspacingРасстояние между ячейками.
ColsЧисло колонок в таблице.
FrameСообщает браузеру, как отображать границы вокруг таблицы.
HeightВысота таблицы.
RulesСообщает браузеру, где отображать границы между ячейками.
SummaryКраткое описание таблицы.
WidthШирина таблицы.
Также для этого тега доступны универсальные атрибуты и события.
<html>
<body>
<table border="1">
</tr><tr><td>34,5</td><td>3,5</td><td>36</td><td>23</td></tr>
<tr><td>35,5</td><td>4</td><td>36⅔</td><td>23–23,5</td></tr>
<tr><td>36</td><td>4,5</td><td>37⅓</td><td>23,5</td></tr>
</table>
</body></html>
24) HTML. Цветовое оформление документа.
Одной из важных стадий создания Веб-проекта является цветовое решение HTML-документов.
Язык HTML позволяет определить цвет следующих элементов: фона документа, текста и его фрагментов, гиперссылок и их разновидностей, ячеек и обрамления таблиц.
Стандартные названия цветов
Этот термин подразумевает "стандартные" названия, которые поддерживаются браузерами. Netscape Communicator распознает более 100 стандартных наименований, Internet Explorer намного больше. Следующий список содержит большинство цветов, поддерживаемых обоими браузерами:
|
BLACK |
(черный) |
|
BLUE |
(синий) |
|
GREEN |
(зеленый) |
|
WHITE |
(белый) |
|
PURPLE |
(фиолетовый) |
|
RED |
(красный) |
|
YELLOW |
(желтый) |
Стандартное название цвета пишется как строчными, так и ПРОПИСНЫМИ буквами и обязательно в кавычках.
Шестнадцатиричный код цвета
Кроме стандартного названия, цвет можно (и предпочтительнее) задать шестнадцатиричным числом, с помощью которого определяется соотношение красной, зеленой и синей составляющих цвета (RGB) и интенсивность каждой из них.
Чтобы отобразить, к примеру, малиновый цвет (Fuchsia), используется код #FFOOFF, где первые две цифры - это красная составляющая (полностью включена), вторая пара - зеленая (исключена) и последняя - синяя, так же, как и красная, используется на максимуме.
Будем надеяться, это не требует дополнительных пояснений. Для упрощения выбора цвета во многие HTML-редакторы встроены инструменты визуального подбора кода по цветовому спектру.
Например, сделаем:
1. Текст "Здесь будут мои личные страницы!" красным.
В первом случае (красный текст) HTML-код будет такой:
<font color="Red">Здесь будут мои личные страницы!</font>
Окраска фона
Фон документа - неотъемлемый элемент оформления. Ошибка в его подборе сведет к нулю все ваши труды по общему дизайну Веб-сайта.
Цвет фона в HTML определяется в дескрипторе <body>.
Даже, если вы используете фоновую графику, то BGCOLOR обязательно должен быть задан, чтобы, до окончания загрузки графики, посетитель смог оценить основное цветовое решение вашего Веб-сайта.
Синтаксис команды выглядит достаточно просто:
<body bgcolor=цвет>
Вместо слова "цвет", как и в атрибуте "color" надо подставить или стандартное название цвета, или его шестнадцатиричное значение.
Пример. Наша задача - сделать фон документа светло-желтым.
Для этого используем код:
<body bgсolor="lightyellow">или<body bgcolor=#FFFFE0>
В дополнение к сказанному - таблица основных тегов и атрибутов, позволяющих выбирать цвет.
Таблица тегов и атрибутов для выбора цвета
|
Элемент |
Соответствующий тег |
|
Фон документа |
<body bgсоlог=цвет> |
|
Весь текст документа |
<body tехt=цвет> |
|
Активные гиперссылки |
<body alink=цвет> |
|
Посещенные гиперссылки |
<body vlink=цвет> |
|
Обычные гиперссылки |
<body link=цвет> |
|
Фрагмент текста |
<font соlог=цвет> |
|
Ячейки таблицы |
<table bgсоlог=цвет> |
|
Обрамление таблицы |
<table bordercolor=цвет> |
|
(только в IE) |
<table bordercolorlight=цвет> |
Для правильного использования графики в HTML-документе необходимо учитывать следующие факторы: многие броузеры поддерживают только графические форматы GIF и JPEG «джей-пег»; файлы, содержащие графику, передаются медленно; некоторые пользователи не имеют графических броузеров или намерено отключают загрузку изображений; цветная графика, которая хорошо смотрится на вашем компьютере, может плохо выглядеть на другом
Тег <IMG> вставляет изображение в документ, как если бы оно было просто одним большим символом. Синтаксис тега:
<IMG атрибут1=значение1 ... [атрибутN=значениеN]>
Атрибуты тега <IMG> и их значения приведены в таблице
Ширина и высота изображения могут быть заданы не только в пикселах, но и в процентах от размеров окна браузера.
Рекомендуется задавать только один из атрибутов пары "ширина-высота" изображения, иначе рисунок может быть непропорционально деформирован и изменит свой вид.
Пример
Рассмотрим возможные варианты выравнивания изображения относительно текста
<imgsrc=exm.gifalign=top>Первая строка текста находится сверху изображения иобычно используется для описания рисунка
<img src=exm.gif align=middle>Первая строка текста находится по середине изображения и используется для того же.
<img src=exm.gif align=bottom> Первая строка текста находится внизу изображения и используется также как и в двух первых случаях
Непронумерованные списки. Для непронумерованных списков броузер обычно использует маркеры для пометки элемента списка. Вид маркера, как правило, настраивает пользователь броузера. Пронумерованный список начинается стартовым тэгом <UL> и завершается тэгом </UL>. Каждый элемент списка начинается с тэга <LI>. Например:
<UL> <LI> Программирование <LI> Алгоритмизация
<LI> Проектирование </UL>
Тэг <UL> может иметь параметр:
<UL TYPE=disc|circle|square>
Тип тэга <UL> определяет внешний вид маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square). Например:
<UL TYPE=square>
<LI> Программирование <LI> Алгоритмизация <LI> Проектирование
</UL>
27) Форматирование гипертекста. Логический и физический типы форматирования.
Язык HTML поддерживает как логический, так и физический стили форматирования содержимого документа. Использование логического форматирования указывает на назначение данного фрагмента текста, а при физическом форматировании досконально задается его внешний
вид. По возможности стоит использовать логические стили, так как они позволяют браузеру выбрать наиболее подходящий документу вид. Использование логических стилей также поможет читателю разобраться в структуре документа. Физический стиль используется в основном
программами, конвертирующими текстовые файлы, содержащие физическое форматирование, в HTML, так как логическое форматирование документа невозможно выполнить автоматически. Говоря о логической разметке текста, можно выделить две основные части: выделение заголовков в документе; логическое выделение элементов текста.
Название документа, задаваемое с помощью тега <TITLE>, не выводится на экран как часть документа. Чтобы отобразить название используется один из тегов заголовка. Заголовки в типичном документе разделяются по уровням. Язык HTML позволяет задать шесть уровней заголовков: H1 (заголовок первого уровня), Н2, Н3, H4, Н5 и H6. Заголовок первого уровня имеет обычно больший размер и насыщенность по сравнению с заголовком второго уровня. Элементы логического выделения фрагментов текста, а также возможное оформление каждого из них приведены в таблице.
<CITE> Используется для выделения цитат или названийкниг и статей </CITE>
<CODE> Применяется для вывода небольшого куска программного кода </CODE>
<EM> Используется для выделения важных фрагментов текста </EM>
<KBD> Выделяет текст, вводимый пользователем с клавиатуры </KBD>
<STRONG> Используется для выделения очень важных фрагментов текста </STRONG>
<STRIKE> Используется для отметки удаленного текста </STRIKE>
. Язык
HTML позволяет автору документа выбрать понравившийся ему шрифт, подходящий размер букв, их цвет и начертание. За все эти параметры отображения текста отвечают теги физического форматирования. Они действуют на все символы, стоящие между открывающим и закрывающим тегами.<B>Полужирный</B>;<I>Курсив</I>;<U>Подчеркнутый </U> ;<BIG>Большой </BIG> ;<S>Зачеркнутый </S>;<SMALL>Маленький </SMALL>Кроме вышеперечисленных тегов в документе может использоваться тег <FONT>, позволяющий непосредственно задать размер и цвет шрифта.Атрибут FACE позволяет указать тип шрифта, которым программа просмотра выведет ваш текст (если таковым располагает пользователь). Атрибут SIZE служит для указания размера шрифта в условных единицах от 1 до 7. Считается, что размер "нормального" шрифта соответствует числу 3.
28)Посылка формы по e-mail.
|
Код HTML5 |
|||
|
Приведенный ниже пример можно использовать как образец кодирования посылки формы по электронной почте.
<FORM action=mailto:myaddres@mail.ru
enctype="text/plain" method="post">
Нажмите “сброс”и заполните заказ.<BR>
<INPUT type=reset value=c6poc><BR><P>
<TABLE border=0 cellspacing=0 cellpadding=5>
<TR><TD>Вашеимя:</TD>
<TD><INPUT type=text size=33 name=name
value="Горбунков Семен Семенович">
</TD>
</TR>
<TR><TD> Ваш адрес:</TD>
<TD><INPUT type=text size=33 name=email
value="gorbun@mail.ru">
</TD>
</TR>
<TR><TD>Прислать:</TD>
<TD><INPUT type=text size=33 name=obj
value="Программный соковыжиматель">
</TD>
</TR>
</TABLE>
<INPUT type=submit value="послать заказ">
</FORM>
29)Программный способ доступа к элементам формы по имени элемента и имени формы.
Для каждого тега внутри гипертекстовой страницы браузер создает объект. Доступ к этому объекту программист получает при помощи имени, которое задается атрибутом name. Таким образом, появляется возможность программного управления тегами. Пусть, например, в HTML-коде задан тег для вывода на экран картинки: <IMG src=./pic/ris1.gif
border=0 alt="" name=pic>
Через этот тег можно получить доступ экземпляру стандарт-ного объекта image с именем pic при помощи эквивалент-ных конструкций:
window.document.images["pic"]
window.document.images.pic
или внутри текущего окна:
document.images["pic"]
document.images.pic
Известно, например, что у объекта image есть свойство src, содержащее указание на файл с картинкой. Можно в программе прочитать это свойство, записав обращение:
document.images.pic.src
Можно, не только прочитать, но и изменить значение этого свойства:
document.images.pic.src = "./pic/ris2.gif"
и картинка на экране изменится соответствующим образом на другую
30)Определение функции в языке программирования Javascript. Написать функцию вычисления факториала, используя рекурсию.
Функция это JavaScript процедура—представляющая собой набор инструкций, которые выполняют какое либо действие или вычисляют значение. Чтобы воспользоваться функцией, вы должны определить функцию в той области видимости где хотите вызвать ее.
Определение и вызов функций
Прежде, чем вызывать и использовать функцию, ее надо определить. Определение функций в JavaScript имеет следующий синтаксис:
function ИмяФункции (аргументы) { блок выражений }
Таким образом, функция состоит из следующих частей, предваряемых ключевым словом function:
Пример, следующий код объявляет функцию factorial:
function factorial(n)
{
if (n == 0)
return 1;
else
return n * factorial (n-1);
}
Пример, следующий код объявляет функцию fibonacci:
function fibonacci(n) {
var num;
if (n >= 2) { num = fibonacci(n - 1) + fibonacci(n - 2);
} else { num = n } return num;}
31)Определение функции в языке программирования Javascript. Написать функцию вычисления чисел фибонначи, используя рекурсию.
Функция это JavaScript процедура—представляющая собой набор инструкций, которые выполняют какое либо действие или вычисляют значение. Чтобы воспользоваться функцией, вы должны определить функцию в той области видимости где хотите вызвать ее.
Определение и вызов функций
Прежде, чем вызывать и использовать функцию, ее надо определить. Определение функций в JavaScript имеет следующий синтаксис:
function ИмяФункции (аргументы) { блок выражений }
Таким образом, функция состоит из следующих частей, предваряемых ключевым словом function:
функция вычисления чисел фибонначи, используя рекурсию.
function fib(n){
var n1 = 0;
var n2 = 0;
var n3;
for(i=0; i < n; i++){
(n1 == 0 && n2 == 0) ? n3 = 1 : n3 = n1 + n2;
if(i%2 == 1){
n1 = n3;
if(i == n - 1) alert(n1);
}
else{
n2=n3;
if(i == n - 1) alert(n2);
}
}
}
fib(77);
В JavaScript существует два типа циклов:
Цикл FOR.
Цикл for используется, когда вы знаете заранее, сколько раз должен быть выполнен скрипт.
Синтаксис
for (переменная=начальное_значение;
переменная<=конечное_значение;
переменная=переменная+шаг)
{
исполняемый код}
Пример
Пример ниже определяет цикл, который начинается с i=0. Цикл продолжает выполняться до тех пор пока i меньше или равно 5. i будет увеличиваться на 1 при каждой итерации цикла.
Замечание: Параметр шаг может также быть отрицательным, и вместо <= может стоять любое предложение сравнения.
Пример
Цикл while выполняет блок кода, пока указанное условие истинно.
Пример ниже определяет цикл, который начинается с i=0. Цикл будет продолжать выполняться, пока i меньше или равно 5. i будет увеличиваться на 1 при каждой итерации цикла:
Пример
<html><body>
<script type="text/javascript">
var i=0;
while (i<=5)
{
document.write("Число i равно " + i);
document.write("<br />");
i++;
}</script></body>
</html>
Переменные языка JavaScript могут хранить значения различных типов:
Время жизни переменной связано с окном, в котором они созданы и зависит от того, где они определены. JavaScript- программы содержатся в документах HTML, и при загрузке нового документа в браузер любые переменные, созданные в программе, будут удалены.
Чтобы сохранить какие-либо значения при загрузке нового документа в JavaScript имеются только 2 решения:
Для сохранения переменных и функций с помощью фреймосодержащих документов эти переменные и функции неодходимо определить в документе верхнего уровня, а затем использовать свойства parent или top объекта window для обращения к ним из документов, загруженных в фреймы. ВАЖНО: такие переменные и функции нужно задавать в заголовке документа верхнего уровня между тегами <HEAD> . . . </HEAD>. Конечно, существует вероятность, что документ может быть загружен без фрейма и тогда обращение к неопределенному объекту вызовет ошибку, но можно предварительно проверить загружен ли документ в фрейм:
<script language="JavaScript"><!--if(self.parent.frames.length==0) {
document.writeln('Эта страница загружена в браузер без фрейма.');}//--></script>
Cookies позволяют сохранять небольшие фрагменты информации на локальном диске пользователя. Устанавливая значения cookies и прореряя их на последующих стадиях работы, иожно восстанавливать необходимые значения. Более подробно о cookies будем говорить позже.
Имена переменных, создание переменных
В языке JavaScript создать переменную гораздо проще, чем в других языках программирования. Например, при создании переменной нет необходимости указывать ее тип. Переменные определяют как с начальными значениями, так и без них. В процессе выполнения программы уже созданные переменные можно даже приводить к различным типам данных. Имена переменных могут начинаться с любой буквы (от a до z, или A-Z ) либо с символа подчеркивания (_), оставшаяся часть может содержать цифры, символы подчеркивания и буквы. Помните то, что в именах переменных различаются символы верхнего и нижнего регистра: например MyVariable - это не то же что myvariable.
Переменную можно создать одним из способов:
Оператор Var используют не только для создания переменной, но и для ее инициализации. Операция присваивания (=) необходима, чтобы запомнить в переменной значение, и при работе с переменными, созданными без начального значения, ее использовать не обязательно. Например:
var MyVariable = 35
создает переменную с именем MyVariable, содержащую числовое значение 35. Переменная существует до тех пор, пока загружен текущий документ. Если вы создаете эту переменную во фреймосодержащем документе верхнего уровня, к ней следует обращаться с помощью выражения top.MyVariable, а еще лучше parent.MyVariable для подстраховки от вложенных фреймов.
В языке JavaScript переменные можно переопределять, даже задавая другой тип данных. Например после выполнения оператора var MyVariable = "35"
переменная будет уже хранить строку "35". Подобные преобразования-то и приводят иногда к недоразумениям. Вотнапример:
<script language="JavaScript">
<!--var a = 35, b = "5", c;
c = a + b;c = c - a;document.writeln("C=" + c);//--></script>
как вы думаете какое значение примет переменная "c" после выполнения программы? Если вы не знакомы с правилами преобразования переменных в JavaScript - не угадаете. Значение переменной "c" после завершения блока будет равным числовому значению 320. О принципах преобразования типов переменных будем говорить позже. Переменную можно определить и не используя оператор "Var", а просто достаточно присвоить значение, причем каков тип данных будет присвоен, того типа и окажется переменная. Оператор "Var" используется по большей части для читабельности JS-программы. Переменная может быть задана и без начальных значений, например:
var MyVariable; создана переменная с именем MyVariable, не имеющая определенного типа данных и начального значения. Переменные, создаваемые при помощи таких описаний, известны как неопределенные (null variable). Например сравнивая такую переменную со значением null, можно узнать, определена ли переменная. Однако нельзя путать разные вещи: ""- пустая строка это строковый тип и вовсе не null-значение. Тип переменной может быть установлен в любом месте JS-программы в отличие от других языков программирования, что дает дополнительную гибкость, но и возможность запутаться - помните это. К переменной, которая не создана, обратиться невозможно. Если нужно создать временную переменную, например счетчик цикла, нужно записать перед ней префикс var:
for (var i=0; i<= document.links.length; i++) {. . . . .}
в данном примере инициализируется переменная i, и затем используется в качестве счетчика оператора for.Переменные, определенные с помощью var, разделяются запятой. Для большей читабельности JS-программы каждую переменную записывают обычно с новой строки.
Существует несколько способов выбора подстрок в JavaScript, включая substring(), substr(), slice() и функции regexp. В JavaScript 1.0 и 1.1, substring() существует как единственный простой способ выбора части большей строки. Например, чтобы выбрать строку press из Expression, используйте "Expression".substring(2,7). Первый параметр для функции - символьный индекс, в котором начинается выбор, в то время как второй параметр - символьный индекс, в котором заканчивается выбор (не включающий): substring(2,7) включает индексы 2, 3, 4, 5, и 6.
В JavaScript 1.2, функции substr(), slice() и regexp могут также использоваться для разбиения строк.
Substr() ведет себя таким же образом, что и substr языка Перл, где первый параметр обозначает символьный индекс, в котором начинается выбор, в то время как второй параметр указывает длину подстроки. Чтобы выполнить ту же самую задачу, как в предыдущем примере, нужно использовать "Expression".substr(2,5). Помните, 2 - это точка начала, а 5 - длина возникающей в результате подстроки.
При использовании на строках, slice() ведет себя аналогично функции substring(). Это, однако, гораздо более мощное средство, способное функционировать с любым типом массива, и не только со строками. slice() также использует отрицательные смещения для обращения к нужной позиции, начиная с конца строки. "Expression".slice(2,-3) возвратит подстроку, найденную между вторым символом и третьим символом с конца, возвращая опять press.
Последний и наиболее универсальный метод для работы с подстроками - это работа через регулярные функции выражения в JavaScript 1.2. Еще раз, обращая внимание на тот же пример, подстрока "press" получается из строки "Expression":
write("Expression".match(/press/));
Встроенныйобъект String
Объект String — это объектная реализация примитивного строкового значения. Его конструктор имеет вид: new String(значение?)
Здесь значение — любое строковое выражение, задающее примитивное значение объекта. Если оно не указано, то примитивное значение объекта равно "".
Свойства объекта String: Constructor Конструктор, который создал объект.
Length Количество символов в строке.
Prototype Ссылка на прототип класса объектов.
Стандартные методы объекта String
charAt Возвращает символ, находящийся в данной позиции строки.
charCodeAt Возвращает код символа, находящегося в данной позиции строки.
Concat Возвращает конкатенацию строк.
fromCharCode Создает строку из символов, заданных кодами Unicode.
indexOf Возвращает позицию первого вхождения заданной подстроки.
lastIndexOf Возвращает позицию последнего вхождения заданной подстроки.
JavaScript спроектирована на основе простой парадигмы. В основе концепции лежат простые объекты. Объект это набор свойств, и свойство состоит из имени и значения ассоциированного и с этим именем. Значением свойства может быть и функция, которую можно назвать методом объекта. В дополнение к встроенным в браузер объектам, вы можете опеределать свои собственные объекты.
Объекты и свойства
В JavaScript объект имеет свойства ассоциированные с ним. Свойство объекта можно понимать как переменную закрепленную за объектом. Свойства объекта в сущности являются теме же самыми переменными JavaScript, за тем исключением что они закреплены за объектом. Свойства объекта определяют его характеристики. Получить доступ с свойству объекта можно воспользовавшись след. способом:
objectName.propertyName
Как и все переменные JavaScript, оба имя объекта (которое тоже может быть переменной) и имя свойства являются чуствительными к регистру. Вы определяете свойство просто указывая его значение. Например, давайте созданим объект myCarи определим его свойства make, model, и year след.образом:
var myCar = new Object();
myCar.make = "Ford";myCar.model = "Mustang";myCar.year = 1969;
Доступ к свойствам объектов JavaScript можно получить через квадратные скобки. Объекты являются, ассоциативными массивами, так как каждое свойство ассоциировано с именем, через которое можно получить доступ к нему. Например, доступ к свойствам объекта myCar можно получить след.образом:
myCar["make"] = "Ford";myCar["model"] = "Mustang";myCar["year"] = 1969;
Имена свойств объекта могут быть валидными строками JavaScript, или тем, что может быть сконвертировано в строку, включая пустую строку. Как бы там ни было, доступ к любому имени свойства, которое содержит невалидный JavaScript идентификатор (например имя свойства содержит в себе пробел и тире, или начинается с цифры) может быть получен с использование квадратных скобок. Этот способ также полезен в случае если имена свойств определяются динамически в процессе выполнения скрипта. Примерыдалее:
var myObj = new Object(),
str = "myString", rand = Math.random(), obj = new Object();
myObj.type = "Dot syntax";myObj["date created"] = "String with space";
myObj[str] = "String value";myObj[rand] = "Random Number";
myObj[obj] = "Object";
myObj[""] = "Even an empty string";console.log(myObj);
В JavaScript, почти все является объектом. Все примитивные типы за исключением null и undefined обрабатываются как объекты. Они могут назначены свойствам, и у них есть все характеристики присущие объектам.
Прототипирование добавляет свойства и методы для вызывающих объектов. По способу получения объектом свойств чем то похоже на this. Но есть одно важнейшее отличие. This будет ссылаться на вызывающий объект, то есть свойство будет СКОПИРОВАНО в объект. Прототип это промежуточный объект, который является свойством любой функции и содержит по умолчанию только одно свойство - "constructor"- оно ссылается на нашу функцию, но если определить в функции ряд свойств и методов, то они будут содержаться в прототипе, то есть прототип НАСЛЕДУЕТ свойства.
This определяет свойства и методы конкретного вызывающего объекта, а prototype определяет свойства и методы всех всех вызывающих объектов, имеющих одинаковые свойства и методы, заданные нашей текущей ФУНКЦИЕЙ-конструктором и сохраненные в объекте - прототипе.
Итак прототипирование позволяет задавать свойства и методы для классов объектов, а не для объектов! А если быть более точным, то поскольку javascript не знает что такое классы, то при помощи прототипирования можно имитировать классы.
//свойство будет СКОПИРОВАНО в экземплер класса
var myFun=function(){this.name="мояфункция";}
//свойствобудетУНАСЛЕДОВАНОэкземплеромкласса
myFun.prototype.property1="property1_value";
//создаем экземплер класса
varmyFun1=newmyFun();
//Выведет "моя функция"
alert(myFun1.name);
//Выведет "property1_value"
alert(myFun1.property1);
Пока все одинаково. Результат не позволяет понять разницу между копированием и наследованием свойств. Попробуем присвоить объекту window свойство через this.
//Выведет "Имя окна"
window.name = '';
functionmyFun(){this.name="Имяокна";}
window.myFun();
alert(window.name);
Объект window получает свойство. Оно СКОПИРОВАНО в вызывающий объект. Теперь пробуем присвоить объекту window свойство через prototype, то есть наследование.
//Выведет пустое сообщение
window.name = '';
function myFun(){myFun.prototype.name="Имя окна_1";}
window.myFun();
alert(window.name);
Объект window не получает свойство. Глобальный объект window (то есть находящийся на самой верхней ступени иерархии объектов документа) не является экземплером класса myFun и не может УНАСЛЕДОВАТЬ свойство. Причина в том, что в случае прототипирования нужно создать экземплер класса, который унаследует свойства. Создадим экземплер с именем test.
//Выведет "Имя 1"
functionmyFun(){myFun.prototype.name="Имя 1";}
vartest = newmyFun();
alert(test.name);
Test как экземплер класса myFun УНАСЛЕДОВАЛ свойство name. Оператор new автоматически создает ссылку на промежуточный объект - прототип. Подведем некоторые итоги:
Прототип представляет собой промежуточный объект, который является свойством любой! функции.
Если это будет функция - конструктор, то в прототипе содержатся все определенные в функции свойства и методы класса объектов.
С помощью прототипирования можно наследовать свойства конструктора через этот объект.
Наследуемые от прототипа свойства не копируются в объект, а как бы работают как неотъемлемое свойство, в этом отличие от поведения ключевого слова this
this - свойства копируются и по правилам копирования объектов, в случае копирования методов, копируются ссылки на методы. То есть при одновременном использовании метода класса несколькими экземплерами класса могут возникнуть ошибки! Все экземплеры класса будут использовать одну функцию.
При использовании прототипов, одновременное использование методов не является проблемой, потому что методы не скопированы, а унаследованы.
В теле функции-конструктора целесообразно при помощи ключевого слова this задавать изменяемые свойства класса, передаваемые при создании объекта в качестве аргументов
В качестве наследуемых от прототипа нужно определять методы и константные значения свойств.
Прототипирование позволяет реализовать наследование свойств классов. То есть создаем первый класс, потом создаем второй класс и ему наследуем свойства и методы первого класса. Потом создаем экземплер класса = объект и распечатываем его свойства командой alert.
function one(){one.prototype.name = "имя";}
function two(){two.prototype.surname = "фамилия";}
two.prototype = new one();
three = new two();
alert(three.name+" и "+three.surname);
Для создание класса достаточно объявить имя класса и присвоить ему объект
Пример создания пустого класса:
classes.Class( "EmptyClass", {} ); //создалипустойкласс classes.EmptyClass
alert( classes.EmptyClass ); //увидим [classEmptyClass]
Как вы уже поняли создание класса не требует огромных затрат на написание кода.
Для создания класса с приватными свойствами достаточно объявить вторым параметром не объект а функцию, в которой будет возвращен объект класса
Пример класса с приватными свойствами:
classes.Class( "PrivatePropertyClass", function(){
//нашиприватныепеременные/свойства
varprivateProp = "tratata",
twoPrivateProp = "lalala";
// возвращаем объект самого класса
return {
}
});
//Создадимэкземпляркласса
var privateTest = new classes.PrivatePropertyClass();
// пробуем получить приватные свойства
alert( privateTest.privateProp ); // увидим undefined
Создавать классы можно не только в контексте classes но и в любом другом.
Для примера я покажу несколько способов как это делается, вы можете выбрать любой приемлемый для вас способ, не ограничивая себя в чем либо.
Вот способы создания класса в любом удобном контексте:
// создание класса например в контексте window
classes.Class.call( window, "GlobalClass", {} );
// создание класса в текущем контексте
varCurrentContextClass = classes.Class( {} );
// создать класс в текущем контексте но при этом он будет
// доступен и в контексте classes c именем ClassesContextClass
var CurrentContextClass = classes.Class( "ClassesContextClass", {} );
Оператор this возвращает ссылку на объект, являющийся текущим контекстом вызова. Это позволяет обращаться к свойствам "текущего" объекта: this.property.
Текущий объект не является жестко фиксированным и зависит от контекста вызова функции. Он является, своего рода, скрытым параметром.
Есть четыре различных варианта его передачи.
|
Тип |
Способ |
this |
|
неявно, через вызов метода |
object.method(...) |
object |
|
явно, через call |
function.call(object,...) |
object |
|
явно, через apply |
function.apply(object,...) |
object |
|
неявно, через вызовnew |
new constructor(...) |
новый, создаваемый объект |
Если ни один из этих способов не задействован, то this указывает на глобальный объект: в браузере это window.
Это происходит при вызове функции без объекта: myFunc(params).
При манипуляциях с DOM при помощи javascript, this обычно используется для работы с событиями. При этом значение this указывает на текущий DOM-элемент, в контексте которого вызван обработчик.
Привязка методов
Так как this не привязано жестко к объекту, то можно привязывать один и тот же метод к любым классам.
|
1 |
walk = function() { this.isWalking = true } |
|
2 |
|
|
3 |
function Bird() { /*...*/ } |
|
4 |
function Rabbit() { /*...*/ } |
|
5 |
|
|
6 |
Bird.prototype.walk = Rabbit.prototype.walk = walk |
|
7 |
|
|
8 |
new Bird().walk() // в обоих случаях |
|
9 |
new Rabbit().walk() // this будет указывать на текущий объект |
Создание
/* обычный синтаксис */
var array = [ elem0, elem1, elem2, ... ]
var empty = [] /* Синтаксисс new Array() */
var array = new Array( elem0, elem1, elem2, ...)
var empty = new Array() /* Редкийсинтаксис: аргумент new Array - одночисло. При этом создается массив заданной длины,
все значения в котором undefined */ vararray = newArray(10)
Аргументыelem0, elem1, ...
Массив пронумерованных элементов, также может служить стеком или очередью. Для ассоциативных массивов используйте Object.
Описание, примеры
Объект Array предоставляет функционал
Для задания массива, как правило, используется синтаксис с квадратными скобками. Объявление через new Array тоже возможно, но почти не используется.
Пример: Создать пустой массив
|
var arr = [] |
Пример: добавить элемент в конец
|
arr[arr.length] = 5 /* или arr.push(5) */ |
|
JavaScript не поддерживает непосредственно многомерные массивы, но внутри элементов массива можно хранить любые данные, включая другие массивы. Таким образом можно получить многомерные массивы, храня массивы внутри элементов другого массива. Например, следующий код создает таблицу умножения чисел до 5: JavaScript variMaxNum = 5;vari, j;varMultiplicationTable = newArray(iMaxNum + 1); for (i = 1; i <= iMaxNum; i++) { MultiplicationTable[i] = new Array(iMaxNum + 1); for (j = 1; j <= iMaxNum; j++) { MultiplicationTable[i][j] = i * j; }} document.write(MultiplicationTable[3][4]); document.write("<br/>"); document.write(MultiplicationTable[5][2]); document.write("<br/>");document.write(MultiplicationTable[1][4]); |
В Web трудно найти пример полезного кода JavaScript, который не взаимодействует некоторым образом с документом HTML. Говоря в общем, коду необходимо прочитать значения со страницы, обработать их некоторым образом, и затем сгенерировать вывод в форме видимых изменений информационного сообщения.
Объектный модель документа (DOM -Document Object Model)- предоставляет механизм для проверки и управления создаваемыми слоями семантики и представления.
Большинство действий в javascript выполняется с HTML-страницей. В javascript страница представлена в виде объектной модели DOM (Document Object Model).
Любые действия со страницей требуют вызова соответствующего метода DOM.
Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) - объектная модель, используемая для XML/HTML-документов.
Согласно DOM-модели, документ является иерархией.
Каждый HTML-тег образует отдельный элемент-узел, каждый фрагмент текста - текстовый элемент, и т.п.
Проще говоря, DOM - это представление документа в виде дерева тегов. Это дерево образуется за счет вложенной структуры тегов плюс текстовые фрагменты страницы, каждый из которых образует отдельный узел.
Построим, для начала, дерево DOM для следующего документа.
<html> <head>
<title>Заголовок</title>
</head> <body> Прекрасный документ </body></html>
Самый внешний тег - <html>, поэтому дерево начинает расти от него.
Внутри <html> находятся два узла: <head> и <body> - они становятся дочерними узлами для <html>.
Рассмотрим чуть более сложный документ.
01<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<title>Документ</title>
</head> <body>
<div id="dataKeeper">Data</div>
<ul> <li style="background-color:red">li text</li>
<li class="info">li text 2</li> </ul>
<div id="footer">footer</div> </body></html>
Верхний тег - html, у него дети head и body, и так далее. Получается дерево тегов:
Каждый DOM-элемент является объектом и предоставляет свойства для манипуляции своим содержимым, для доступа к родителям и потомкам.
Для манипуляций с DOM используется объект document.
Используя document, можно получать нужный элемент дерева и менять его содержание.Например, этот код получает первый элемент с тэгом ol, последовательно удаляет два элемента списка и затем добавляет их в обратном порядке:
var ol = document.getElementsByTagName('ol')[0]
var ol1 = ol.removeChild(ol.firstChild) var ol2 = ol.removeChild(ol.firstChild)
ol.appendChild(ol2) ol.appendChild(ol1)
У каждого элемента в DOM-модели есть тип. Его номер хранится в атрибуте elem.nodeType
Всего в DOM различают 12 типов элементов.
Обычно используется только один: Node.ELEMENT_NODE, номер которого равен 1. Элементам этого типа соответствуют HTML-теги.
Иногда полезен еще тип Node.TEXT_NODE, который равен 3. Это текстовые элементы.
Остальные типы в javascript программировании не используются.
С вершины дерева можно пойти дальше вниз. Для этого каждый DOM-узел содержит массив всех детей, отдельно - ссылки на первого и последнего ребенка и еще ряд полезных свойств.Все дочерние элементы, включая текстовые находятся в массиве childNodes.В следующем примере цикл перебирает всех детей document.body.
for(var i=0; i<document.body.childNodes.length; i++) {
var child = document.body.childNodes[i]
alert(child.tagName)
Стандарт DOM предусматривает несколько средств поиска элемента. ЭтометодыgetElementById, getElementsByTagName и getElementsByName .
Самый удобный способ найти элемент в DOM - это получить его по id. Для этого используется вызов document.getElementById(id)
Например, следующий код изменит цвет текста на голубой в div'е cid="dataKeeper":
document.getElementById('dataKeeper').style.color = 'blue'
Следующий способ - это получить все элементы с определенным тегом, и среди них искать нужный. Для этого служит document.getElementsByTagName(tag). Она возвращает массив из элементов, имеющих такой тег.
Например, можно получить второй элемент(нумерация в массиве идет с нуля) с тэгомli:
document.getElementsByTagName('LI')[1]
Что интересно, getElementsByTagName можно вызывать не только для document, но и вообще для любого элемента, у которого есть тег (не текстового).
При этом будут найдены только те объекты, которые находятся под этим элементом.
Например, следующий вызов получает список элементов LI, находящихся внутри первого тега div:
document.getElementsByTagName('DIV')[0].getElementsByTagName('LI')
Вызов elem.getElementsByTagName('*') вернет список из всех детей узла elem в порядке их обхода.
Например, на таком DOM:
1<div id="d1">
2 <ol id="ol1">
3 <li id="li1">1</li>
4 <li id="li2">2</li>
5 </ol>
6</div>
Такойкод:
1var div = document.getElementById('d1')
2var elems = div.getElementsByTagName('*')
4for(var i=0; i<elems.length; i++) alert(elems[i].id)
Выведет последовательность: ol1, li1, li2.
Метод document.getElementsByName(name) возвращает все элементы, у которых имя (атрибут name) равно данному.
Он работает только с теми элементами, для которых в спецификации явно предусмотрен атрибут name: это form, input, a, select, textarea и ряд других, более редких.
Метод document.getElementsByName не будет работать с остальными элементами типа div,p и т.п.
Свойство childNodes возвращает объект типа NodeList, содержащий список всех детей данного узла. Если узел не имеет детей, то возвращается список нулевой длины. Следующий пример
<BODY>
<SCRIPT>
var body = document.getElementsByTagName("BODY")[0];
var list = body.childNodes;
for (var i = 0; i < list.length; i++) {
document.write(list[i].nodeName, " ");
}
</SCRIPT>
</BODY>
выведет в Gecko текст: #text SCRIPT, а в Internet Explorer: SCRIPT #text. Как мы видим, порядок элементов в списке может быть любым; гарантируется только, что в нем присутствуют все дети данного узла.
Свойство parentNode- возвращает родительский элемент текущего элемента
Пример:
1.var paragraph = document.getElementById('par');
2.var text = paragraph.parentNode;
3.alert(text);
Вывод “мебель”.
Свойство nextSibling возвращает следующий сестринский узел (следующий узел на том же самом уровне дерева) выбранного элемента
Если такого узла нет, это свойство вернет null.
Синтаксис
elementNode.nextSibling
Пример:
<html><head>
<script type="text/javascript" src="../files/125/loadxmldoc.js">
</script></head><body>
<script type="text/javascript">
function get_nextsibling(n)
{x=n.nextSibling;while (x.nodeType!=1) { x=x.nextSibling; }return x;}
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title")[0];
document.write(x.nodeName);
document.write(" = ");
document.write(x.childNodes[0].nodeValue)
Свойство previousSibling возвращает предыдущий сестринский узел (узел, идущий непосредственно перед выбранным узлом на том же уровне дерева) выбранного элемента
Если такого узла не существует, то это свойство возвращает null.
Синтаксис
elementNode.previousSibling
<html>
<head>
<script type="text/javascript" src="../files/125/loadxmldoc.js">
</script></head><body>
<script type="text/javascript">
//проверка, является ли предыдущий сестринский узел узлом элемента
function get_previoussibling(n)
{x=n.previousSibling;
while (x.nodeType!=1)
{ x=x.previousSibling; }
return x;}
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("author")[0];
document.write(x.nodeName);
document.write(" = ");
document.write(x.childNodes[0].nodeValue);
Тег: nodeName и tagName
Существует целых два свойства: nodeName и tagName, которые содержат название(тег) элемента узла.
Название HTML-тега всегда находится в верхнем регистре.
Например, для document.body:
показать чистый исходник в новом окнеСкрыть/показать номера строкпечать кода с сохранением подсветки
alert( document.body.nodeName ); // BODY
alert( document.body.tagName ); // BODY
Разница отражена в названиях свойств, но неочевидна.
Иначе говоря, при помощи tagName мы можем работать только с элементами, а nodeName может что-то сказать и о других типах узлов.
<body><!-- комментарий -->
<script>
alert(document.body.firstChild.nodeName); // #comment
alert(document.body.firstChild.tagName); // undefined (в IE<9 воскл. знак "!")
alert(document.nodeName); // #document, т.к. корень DOM -- неэлемент
alert(document.tagName); // undefined
</script></body>
getAttribute() возвращает значение именованного атрибута выбранного элемента. Если элемент не содержит данный атрибут, могут быть возвращены null или "" (пустая строка); подробнее Notes.
Синтаксис
var attribute = element.getAttribute(attributeName);
где
attribute - переменная, которой будет присвоено значение attributeName.
attributeName - имя атрибута, значение которого необходимо получить.
Пример
var div1 = document.getElementById("div1");
var align = div1.getAttribute("align");
alert(align); // отобразит значение атрибута align элемента с id="div1"
setAttribute
Описание
public DOMAttr DOMElement::setAttribute ( string $name , string $value )
Устанавливает значение атрибута с именем name. Если атрибут не существует, то он будет создан.
Список параметров
name
Имя атрибута.
value
Значение атрибута.
Возвращаемые значения
Новый объект класса DOMAttr или FALSE в случае ошибки.
Ошибки
DOM_NO_MODIFICATION_ALLOWED_ERR
Возникает, если узел доступен только для чтения.
Примеры
Пример #1 Установка значения атрибута
<?php
$doc = new DOMDocument("1.0");
$node = $doc->createElement("para");
$newnode = $doc->appendChild($node);
$newnode->setAttribute("align", "left");
?>
Свойство lastChild
Все Свойства Объекта Элемент Объект Элемент
Определение и Использование
Свойство lastChild возвращает последний дочерний узел выбранного элемента
Если выбранный узел не имеет детей, это свойство возвращает NULL.
Синтаксис
elementNode.lastChild
Пример:
function get_lastchild(n)
{x=n.lastChild;while (x.nodeType!=1) { x=x.previousSibling; }return x;}
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.documentElement;lastNode=get_lastchild(x);
for (i=0;i<lastNode.childNodes.length;i++)
{if (lastNode.childNodes[i].nodeType==1)
{ //Обрабатывать только узлы-элементы
document.write(lastNode.childNodes[i].nodeName);
document.write(" = ");
document.write(lastNode.childNodes[i].childNodes[0].nodeValue);
document.write("<br />"); }}
Свойство firstChild
Определение и Использование
Свойство firstChild возвращает первый дочерний узел выбранного узла
Если выбранный узел не имеет детей, это свойство вернет NULL.
Синтаксис
elementNode.firstChild
Пример:
//проверка того, что первый дочерний узел является элементом
function get_firstchild(n)
{x=n.firstChild;while (x.nodeType!=1)
{ x=x.nextSibling; }return x;}
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.documentElement;
firstNode=get_firstchild(x);
for (i=0;i<firstNode.childNodes.length;i++)
{if (firstNode.childNodes[i].nodeType==1)
{ //Обрабатывать только узлы – элементы
document.write(firstNode.childNodes[i].nodeName);
document.write(" = ");
document.write(firstNode.childNodes[i].childNodes[0].nodeValue);
document.write("<br />"); }}
У DOM-элементов есть масса свойств. Обычно используется максимум треть из них. Некоторые из них можно читать и устанавливать, другие - только читать.
className
Это свойство задает класс элемента. Оно полностью аналогично html-атрибуту "class".
elem.className = 'newclass'
В следующем примере элемент имеет атрибуты id, class.
<div id="MyElement" class="big" ></div>
Свойство nodeType
Свойство nodeType возвращает тип узла. nodeType только для чтения.
Наиболее важные типы узлов это:
|
Описание типа узла |
Значение свойства |
|
Элемент |
1 |
|
Атрибут |
2 |
|
Текст |
3 |
|
Комментарий |
8 |
|
Документ |
9 |
Это свойство управляет стилем. Оно аналогично установке стиля в CSS.
Например, можно установить element.style.width (можно изменить ширину элемента) или element.style.color (изменить цвет текста внутри данного элемента) и др.
Есть общее правило замены - если CSS-атрибут имеет дефисы, то для установки style нужно заменить их на верхний регистр букв.
Например, для установки свойства background-color в красный цвет, нужно поставить:
element.style.backgroundColor = “red”
Например, можно установить element.style.width:
Укоротить на 10px
Исходный код этой кнопки:
1 <input
2 type="button"
3 style="width: 300px"
4 onclick="this.style.width = parseInt(this.style.width)-10+'px'"
5 value="Укоротить на 10px"
6 />
Обработчик события onclick обращается в этом примере к свойствуthis.style.width, т.к значением this в обработчике события является текущий элемент (т.е сама кнопка). Подробнее об этом - вовведении в события.
Есть общее правило замены - если CSS-атрибут имеет дефисы, то для установкиstyle нужно заменить их на верхний регистр букв.
Например, для установки свойства z-index в 1000, нужно поставить:
element.style.zIndex = 1000
Следующий пример использует функцию для изменения стиля элемента <body> при нажатии кнопки:
Пример
<html>
<head>
<script type="text/javascript">
function ChangeBackground()
{document.body.style.backgroundColor="lavender";}
</script></head><body>
<input type="button" onclick="ChangeBackground()"
value="Изменить цвет фона" />
</body></html>
Описание
public bool DOMElement::hasAttribute ( string $name )
Проверяет наличие атрибута с именем, указанным в параметре name текущего элемента.
Список параметров
name
Имя атрибута.
Возвращаемые значения
Возвращает TRUE в случае успешного завершения или FALSE в случае возникновения ошибки.
DOMElement::removeAttribute
Описание
public bool DOMElement::removeAttribute ( string $name )
Удаляет атрибут с именем name из элемента.
Список параметров
name
Имя атрибута.
Возвращаемые значения
Возвращает TRUE в случае успешного завершения или FALSE в случае возникновения ошибки.
Ошибки
DOM_NO_MODIFICATION_ALLOWED_ERR
Возникает, если атрибут доступен только для чтения.
Метод hasAttribute()
Определение и Использование
Метод hasAttribute() возвращает TRUE, если текущий узел элемента содержит атрибут, указанный по имени, иначе возвращает FALSE.
Синтаксис
|
hasAttribute(name) |
|
Параметр |
Описание |
|
name |
Обязательный. Указывает атрибут для поиска |
Пример
TСледующий фрагмент кода загружает "books.xml" в xmlDoc, используя
loadXMLDoc(), И проверяет, есть ли у первого элемента <book> хотя бы один атрибут "category":
|
Пример
Вывод:
|
Метод removeAttribute()
Определение и Использование
Метод removeAttribute() удаляет указанный атрибут.
Если значение по умолчанию для атрибута определено в DTD, тут же появляется новый атрибутa со значением по умолчанию
Пример
Следующий фрагмент кода загружает "books.xml" в xmlDoc, используя
loadXMLDoc(), и удаляет атрибут "category" из всех элементов <book>:
|
Пример
|