- •Var имя_переменной:
- •Var myName пример js6
- •Integer
- •InternetAddress
- •Internetaddress
- •Приоритеты выполнения операций
- •If (условие1) {
- •Операторы цикла
- •Var column,row;
- •Var column,row;
- •Var objArr;
- •ValueOf()
- •Var myArr, c;
- •Var timeStr;
- •Var Spoint;
- •Регулярные выражения: пример 30
- •Работа с регулярными выражениями
- •Методы класса RegExp
- •Var result, re, str;
- •Свойства глобального объекта RegExp.
- •Var re, str, protocol, address, filename, result;
- •Regular Expressions
- •Метасимволы
- •Классы символов
- •Квантификаторы
- •Action в javascript
- •Использование Action в javascript.
- •Свойство method.
- •Использование свойства method в js.
- •Заключение.
JavaScript
Объектно-ориентированное программирование:DOM и дерево узлов
DOM (Document Object Model) позволяет использовать в коде JavaScript элементы HTML и их атрибуты. Есть два способа управлять элементами в документе с помощью кода на JavaScript - через название элемента и через дерево узлов. Эти два подхода не взаимноисключающие и они могут осуществляться в одном и том же скрипте.
Введение в объекты
Объекты - это скриптовые (или программируемые) элементы, которые имеют свойства, события и методы. JavaScript рассматривает все элементы Web-страницы, вилимую область экрана и окно броузера как программируемые объекты. Это значит, что при помощи кода можно управлять свойствами этих объектов, исполнять их методы и обрабатывать их события.
Все объекты связаны между собой иерархически и ониимеют свойства, котрые в свою очередь тоже являются объектами. Оператор точка (.) позволяет обращаться к свойствам и методам объекта.
DOM (Document Object Model) - это иерархически упорядоченная совокупность объектов, которую броузер узнает и поддерживает. Она состоит из отношений между этими объектами, их свойствами и методами. У каждого броузера своя DOM и они слегка отличаются друг от друга. Поэтому надо использовать общую часть DOM, чтобы код на JavaScript был совместим с большинством броузеров.
Объект window - родительский объект всех других объектов в DOM, он олицетворяет собой броузер.
В свою очередь он может содержать объекты document с разделами <head> и <body> или элемент <frameset>. Каждый фрейм в элементе <frameset> может содержать объекты document или другие элементы <frameset>.
При работе с фреймами можно использовать следующие огбращения:
window.self - обращается к текущему активному фрейму;
window.parent - обращается к родителю активного фрейма;
window.top - обращается к самому верхнему фрейму.
К докумеенту, расположенному в определенном фрейме можно обратиться по названию фрейма: window.frameName.
Каждый объект window и элемент <frame> содержит объект document, который содержит все другие документы на странице. На объект документ ссылаются все другие объекты на web-странице. Программируя свойства объекта document и методы в JavaScript, можно создавать содержимое web-страницы на стороне клиента во время выполнения.
Свойства объекта - это характеристики которые определяют и составляют объект.
Методы - это операции над объектами, позволяющие им выполнять действия. Методы всегда содержат круглые скобки, что отличает их от свойств.
Коллекция - это множество объектов, которые не связаны объектной иерархией ( находятся на разных иерархических ветвях). В коллекции элементы пронумерованы и доступ к ним может осуществляться, в частности, по номеру (аналогично массиву).
Узлы - это еще один способ программирования элементов HTML в документе. Есть два типа узлов: узел элемента и текстовый узел.
Узел элемента содержит элемент и текст внутри тега элемента.
Текстовый узел содержит только текст.
Например:
<p><b> Мой текст </b></p>
В этом примере три узла:
<p><b> Мой текст </b></p> - узел, который содержит узел
<b> Мой текст </b>, который в свою очередь содержит текстовый узел
Мой текст.
Узлы связаны между собой иерархичеси и находятся в отношении родитель - потомок или являются братьями.
Все узлы на странице (кроме узла document ) имеют родительский узел.
Самый верхний объект в дереве узлов - объект document.
В отличие от DOM, которая позволяет программировать каждый элемент документа, не обращаясь к другим элементам, дерево узлов дает возможность программировать элементы HTML, основываясь на отношениях между элементами.
Например:
<div id="myDiv"> Первый текст
<p id="myParag">Второй текст</p>
</div>
Используя DOM можно программировать элемент <div> непосредственно:
window.document.myDiv
Используя дерево узлов, можно программировать элемент <p> как узел-потомок элемента<div>, а элемент <div> - как родитель элемента <p>:
window.document.myDiv.firstChild
window.document.myParag.parentNode
Чтобы получить доступ к дереву узлов в JavaScript можно использовать свойства:
nodeName, nodeValue, nodeType, parentNode, firstChild, lastChild, previousSibling, nextSibling (ссылки на предыдущего и следующего наследников родительского элемента)
методы createElement(), createTextNode(), removeChild(), replaceChild(новый, старый),
совокупности атрибутов childNodes.
Суть программирования на JavaScript заключается в написании обработчиков событий для объектов.
Способы использования скриптов в гипертексте:
Вставка (контейнер script).
Обработчик события (handler).
гипертекстовая ссылка (обработчик, вызываемый по URL-адресу).
подстановка (как значение атрибута контейнера).
Вставка (контейнер script)
ПРИМЕР js1
Основной текст JavaScript может располагаться непосредственно в контейнере <script>…</script>
Тег <script> имеет атрибут language="JavaScript":
<script language="JavaScript">
//код
</script>
Кроме того, он имеет атрибут type="text/ JavaScript":
<script type="text/ JavaScript" language="JavaScript">
Данные значения этих атрибутов используются по умолчанию.
Основная схема HTML документа такова:
<html>
<head>
………………………………
<script language=”JavaScript”>
<!--
…Здесь размещается код JavaScript…
//-->
</script>
</head>
<body>
<noscript>
… ПРИМЕР js2
</noscript>
</body>
</html>
Дескриптор <noscript> позволяет определить HTML-код, который будет отображаться на экране в случае, если JavaScript отключен или не поддерживается.
Код заключается в комментарии даже если он расположен в разделе <head>, т.к. язык HTML и язык JavaScript используют некоторые одинаковые названия команд и это может вызвать неправильные действия броузера.
Тег закрытия комментария HTML комментируется однострочным комментарием JavaScript, т.к. в JavaScript есть оператор, начинающийся с символов - - .
Язык JavaScript чувствителен к регистру.
Сценарий, описанный в разделе <head> броузер загружает раньше загрузки документа. Это дает возможность с помощью такого сценария генерировать документ.оме того, в заголовке документа всегда описывают сценарии инициализации данных.
В тело документа обычно включают описания очень коротких сценариев, например, обращения к функциям, описанным в заголовочной части. Они обязательно заключаются в теги комментария.
Подстановка (как значение атрибута контейнера)
ПРИМЕР 1.html, js3
Код JavaScript может располагаться также в значении атрибута контейнера для ссылки a. Например:
<a href=”javascript: ... Код на JavaScript …”>ТЕКСТ</a>
Если, например, ввести:
<a href=”javascript: alert(“Ура!”)ТЕКСТ</a>
то при нажатии на ссылку будет выведено сообщение с текстом Ура!
Обработчик события (Handler)
Также можно размещать скрипт в обработчике событий.
<form><input type=button value=”кнопка” onClick=”window.alert('Ура');”></form>
ПРИМЕР 2.html,js4
В этом примере при нажатии на кнопку вызывается обработчик события onClick, который выводит сообщение Ура!
URL схема
<script src="URL.js">
Комментарии
Что касается комментариев, то это ничто иное как примечания разработчика по поводу собственного документа, которые не отображаются.
// Однострочный комментарий
Две косых черты (//) "скрывают" текст вплоть до конца текущей строки. Такой комментарий можно ставить, начиная с любого места строки.
Допускаются и многострочные комментарии:
/* Желаете поместить в комментарий несколько
строк? Так вот
вам и способ! */
Как видно из примера начинается он с /* и заканчивается */.
Переменные и типы данных
Создать переменную в программе можно несколькими способами:
• С помощью оператора присваивания значений в формате:
имя_переменной = значение
n=5
Оператор присваивания обозначается символом равенства =
myName = "Иван"
• С помощью ключевого слова var (от variable — переменная) в формате:
Var имя_переменной:
var n;
В этом случае созданная переменная не имеет никакого значения, но может его
получить в дальнейшем с помощью оператора присваивания.
Var myName пример js6
myName = "Иван"
var n; n=5;
• С помощью ключевого слова var и оператора присваивания в формате:
var имя_переменной = значение.
При объявлении переменной ее тип не указывается, он определяется автоматически.
Типы данных в JavaScript
string
Строка переменной длины (максимальная длина — примерно 2 миллиарда символов).
Integer
Целое число между -32168 и 32767
float
Число с плавающей запятой со следующими пределами: от –3.4-e-38 до 3.4e+38
boolean
Логическое значение (true или false).
null
Пустой указатель
Имя переменной в JavaScript состоит из одной и более букв (A..Z и a..z), цифры (0..9) и символов подчеркивания (_). однако не может начинаться с цифры при этом учитывается регистр букв, например, следующие два имени JavaScript воспринимает как различные:
InternetAddress
Internetaddress
При выборе имен переменных нельзя использовать ключевые слова, то есть слова, используемые в определениях конструкций языка
Константы
Константы , которые можно присваивать переменным могут быть:
- целые десятичные ( они не могут начинаться с нуля)
- целые восьмеричные (начинаются с нуля)
- целые шестнадцатеричные (напр. 0x25AF03) (начинаются с 0x)
- дробные с фиксированной точкой (напр. 12.56)
- дробные с плавающей точкой (напр. 1.254e+1) (Признак порядка - буквы e или E)
- логические (true или false)
Пример js4a
- строковые - последовательность символов в двойных или ординарных кавычках. Они могут включать в себя знаки и специальные символы:
\b Backspace
\f перевод страницы
\n переход на новую строку
\r возврат каретки
\t табуляция
\\ используется внутри строки вместо символа \, когда его нужно написать.
Преобразование типов.
В JavaScript есть встроенные функции для явного преобразования типа, которое может потребоваться при обращении к методам объектов:
eval() Принимает строку с операторами JavaScript и тестирует ее на предмет корректности синтаксиса, после чего преобразует в число.
isFinite() Определяет, является ли значение переменной конечной величиной.
IsNaN Определяет, является ли значение переменной числом.
parseFloat() Выполняет преобразование строкового аргумента в число с плавающей точкой (float).
parseInt() Выполняет преобразование строкового аргумента в целое число.
Пример js4b,js5,js6
Операции
Основной смысл написания сценариев связан с необходимостью организации ввода, вычислений, отображения либо управления данными. Операции — суть символы и идентификаторы, которые представляют способы изменения данных либо вычисления комбинаций выражений. Язык JavaScript поддерживает как бинарные, так и унарные операции. Бинарные операции работают с двумя операндами в выражении, например, 9 + х, тогда как для унарных операций достаточно только одного операнда, например, x++.
Операция (оператор) присваивания
Например, выражение
х = 20 ;
обеспечивает присваивание переменной х значения 20. Когда JavaScript встречает операцию присваивания (=), вначале анализируется правая часть с целью определения значения. После этого рассматривается левая часть — она должна представлять место для хранения значения. Если слева находится переменная, ей присваивается значение. В рассматриваемом случае х получает определенное значение 20.
Операция присваивания всегда выполняется справа налево.
Все выражения заканчиваются символом "; "
Выражения можно перносить на следующую строку :
Z = x
+y;
ПРИМЕР js6
Арифметические операции
При работе с числами используются арифметические операции. К основным операциям этой группы относятся
знак "плюс" (+), суммирующий два значения,
знак "минус" (-), вычитающий одно значение из другого,
звездочка (*), перемножающая два значения,
косая черта (/), которая обозначает деление одного значения на другое,
Операция взятия по модулю обозначается знаком процента (%).
Найти модуль двух операндов означает найти остаток после деления первого операнда на второй. В примере х = 10 % 3 переменная х получит значение 1, поскольку результатом деления 10 на 3 буде3 с остатком 1. Данная операция используется только для целых чисел.
Инкремент и декремент
Увеличение значения переменной на 1 и затем присваивание ей же этого нового значения представляет собой достаточно стандартную операцию. Последняя настолько часто используется в компьютерных программах, что некоторые языки включают специальные сокращенные операции, чтобы упростить запись увеличения и уменьшения значения переменной. JavaScript - как раз относится к таким языкам. Для записи инкремента применяется ++ , а для декремента — —:
++i или i++ означает то же самое, что и i = i + 1
- - i или i- - означает то же самое, что и i = i – 1
Эти операции могут использоваться в префиксной и постфиксной формах. Таким образом меняется порядок возврата значения выражения и установки нового значения.
Постфиксная форма:
x=3;
y=x- -;
Пример js5b
В результате получим y=3, x=2.
Префиксная форма
x=3;
y=- -x;
В результате получим y=2, x=2.
Составной оператор
Группа операторов, заключенных в фигурные скобки образует составной оператор:
{
x=y;
z=x+y;
y=x;
}
Комбинации операции присваивания и арифметических операций:
х += у сокращенная запись для х = х + у
х -= у сокращенная запись для х = х - у
х *= у сокращенная запись для х = х * у
х /= у сокращенная запись для х = х / у
х %= у сокращенная запись для х = х % у
Пример js6b
Логические операции
Операции отношения
= = Операция проверки равенства. Возвращает true, если операнды равны между собой. Операнды могут быть разных типов.
Пример js7b
! = Операция проверки строгого неравенства. Возвращает true, если операнды не равны между собой и при этом имеют совместимые типы и значения.
Пример js8b
> Операция "больше". Возвращает true, если значение левого операнда больше значения правого операнда.
>= Операция "больше либо равно". Возвращает true, если значение левого операнда больше либо равно значения правого операнда.
< Операция "меньше". Возвращает true, если значение левого операнда меньше значения правого операнда.
< = Операция "меньше либо равно". Возвращает true, если значение левого операнда меньше либо равно значения правого операнда.
= = = Проверка строгого равенства. Для получения true требуется совпадение типов и равенство значений.
Пример js7b
Булевские операции
&& Логическая операция И (конъюнкция). Возвращает true, если оба выражения имеют значения true, в противном случае возвращается false.
Рассмотрим примеры:
(1 > 0) && (2 > 1) возвращает true.
(1 > 0) && (2 < 1) возвращает false.
Пример js9b
|| Логическая операция ИЛИ (дизъюнкция). Возвращает true, если хотя бы одно из выражений равно true, в противном случае возвращается false.
Рассмотрим примеры:
(1 > 0) || (2 < 1) возвращает true.
(1 < 0) || (2 < 1) возвращает false.
! Логическая операция НЕ (отрицание) —унарная операция, которая меняет значение булева выражения на противоположное.
Пример js11b
Поразрядные операции
На аппаратном уровне данные хранятся в памяти поразрядно. Они записываются в двоичной системе счисления, в которой любое целое число может быть представлено при помощи символов 0 и 1. В зависимости от размещения, каждый единичный разряд представляет значение 2 в степени п, где п — номер разряда, считая справа.
Работа с двоичными представлениями целых чисел в JavaScript обеспечивается через поразрядные операции. Самая простая из поразрядных операций — унарная операция дополнения до единицы, которая обозначается тильдой ~ . Она изменяет значение каждого разряда операнда на противоположное. Рассмотрим, как выполняется дополнение до единицы для числа 6:
x = ~6
В двоичной форме это выглядит так:
х = ~00000000000000000000000000000110
В результате получим
х = 11111111111111111111111111111001
т.е.
х = -7
Пример js12b
Поразрядные логические операции
Они применяются к операндам поразрядно, т.е. операция выполняется над каждой парой разрядов.
Например, применение поразрядной операции И к числам 01111 и 11011 дает в результате число 01011.
Используются следующие двоичные операции:
& побитовое И
| побитовое ИЛИ
^ побитовое исключающее ИЛИ
~ побитовое НЕ
<< сдвиг влево с заполнением нулями младших разрядов
>> сдвиг вправо с заполнением возникающих старших разрядов содержимым самого старшего разряда
Пример js12c, js12d
Эти операции могут комбинироваться с операцией присваивания так же как и для арифметических операций.
В JavaScript большинство типов могут быть преобразованы в логические значения true и false. При этом в значение false преобразуются нулевое значение, пустая строка, null и значение объявленной но неинициализированной переменной. Все остальное преобразуется в true. Все объекты преобразуются в true.
Строковые операции
Набор строковых операций, доступный в JavaScript, включает все операции сравнения и операцию конкатенации (+). При помощи операции конкатенации строки соединяются вместе в одну длинную строку:
myStr=”Hello ”+” world!”;
Значение myStr после присвоения будет Hello world!
Определение типа данных
Операция typeof возвращает тип данных, хранящихся в операнде в текущий момент времени. Это оказывается особенно полезным при выяснении, была ли определена переменная.
Например:
typeof unescape возвращает строку "function",
typeof undeflnedVariable возвращает строку "undefined".
Typeof 33 возвращает строку "number",
typeof "A String" возвращает строку "string",
typeof true возвращает строку "boolean",
typeof null возвращает строку "object".
var a,b,c;
a=5;
c=typeof(a+b);
В результате получим c="string"
Пример js13a