4329

Основы JavaScript. Результаты работы скриптов.

Реферат

Информатика, кибернетика и программирование

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

Русский

2012-11-16

339 KB

15 чел.

Введение

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

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

Другими словами в языке HTML отсутствуют средства интерактивного взаимодействия с пользователем.

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

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

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

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

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

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

Размещение фрагментов кода JavaScript в гипертекстовом документе JS

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

Сейчас браузеры Netscape, Mozilla и Opera поддерживает только язык JavaScript, а Internet Explorer, кроме этого, еще и собственный язык Microsoft - VBScript. Правда, начиная с версии 6 дальнейшее развитие VBScript прекращено. В открывающем тэге используются два способа определения языка - LANGUAGE="JavaScript" и type="text/javascript". Параметр type является основным, но для обеспечения совместимости со старыми версиями браузеров необходимо также указывать и параметр LANGUAGE.

Для обеспечения совместимости с браузерами, которые вообще не поддерживают скрипты внутри контейнера используются тэги комментария в стиле HTML (<!-- .... -->). Сделано это потому, что броузер, если встречает в составе документа тэг, который не может выполнить, то просто игнорирует его и в этом случае содержимое контейнера SCRIPT будет выведено на экран в виде текста. Для того, чтобы этого не происходило, все содержимое контейнера задается как комментарий в стиле HTML.

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">

<!--

     операторы JavaScript

     ....................

//-->

</SCRIPT>

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

<NOSCRIPT>

Ваш броузер не поддерживает Java Script!!!

</NOSCRIPT>

Контейнеров с текстом JS в документе может быть сколько угодно и располагаться они могут в любом месте документа. Необходимо только иметь в виду, что в зависимости от места расположения изменяется доступность данного скрипта по мере загрузки документа. Если вы включаете в документ скрипт, который настраивает форму, то он должен располагаться ПОСЛЕ контейнера FORM.

Если вы хотите, чтобы операторы были доступны еще до полной загрузки документа, то контейнер необходимо размещать внутри тэга HEAD ближе к закрывающему тэгу после всех тэгов META и TITLE, напримет так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<HTML>

<HEAD>

<META NAME="Generator" CONTENT="TextPad 4.0">

<META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1251">

<META NAME="Author" CONTENT="Vladimir Pankratov">

<META NAME="Keywords" CONTENT="?">

<META NAME="Description" CONTENT="?">

<TITLE></TITLE>

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">

<!--

     операторы JavaScript

     ....................

//-->

</SCRIPT>

</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000"

   ALINK="#FF00FF" BACKGROUND="?">

</BODY>

</HTML>

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

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

<A> HREF="#" onClick="alert('Есть щелчек!')">Ссылка</A>

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

Основные конструкции языка JS

  •  Операторы 
  •  Булевы операторы 
  •  Условный оператор 
  •  Циклы 
  •  Данные
    •  Типы данных 
    •  Дата 
  •  События 

Операторы

Арифметические операторы

Оператор

Пример

+

Сложение

-

Вычитание

*

Умножение

/

Деление

%

Остаток от деления по модулю

++

Увеличение на 1

--

Уменьшение на 1

Операторы присвоения

Оператор

Значение

Результат

=

x = y

x равно у

+=

x += y

x равно x плюс y

-=

x -= y

x равно x минус y

*=

x *= y

x равно x умножить на y

/=

x /= y

x равно x делить на y

%=

x %= y

x равно x остаток x по модулю y

Логические (булевы) операторы

В JavaScript имеется 3 логических оператора:

  •  Два двуместных (с двумя операндами):
    •  ИЛИ || – возвращает значение true, если хотя бы один из его аргументов имеет значение true:

Выражение

   имеет значение

 true || true 

true

 true || false

true

false || true 

true

false || false

false

  •  При этом, если первый аргумент имеет значение true, то второй не вычисляется. Это может быть важно, если второй аргумент – результат вычисления функции, имеющей побочные эффекты. Если первый аргумент оператора || true, то побочные эффекты не проявляются, например:
    •    <SCRIPT LANGUAGE="JavaScript">
    •    function ff(n) {
    •      if (n<0) {
    •        alert("Отрицательное число!");
    •        return false;
    •      }
    •      return true;
    •    }
    •    var m=5
    •    var n = ( m>0 || ff(-5) ) ? -5 : 5 ;
    •    </SCRIPT>
    •  Ожидаемое от вызова функции ff(-5) сообщение об отрицательном числе не появляется, поскольку сравнение m>0 возвращает занчение true (m=5)
    •  И && – возвращает значение false, если хотя бы один из его аргументов имеет значение false:

Выражение

   имеет значение

 true && true 

true

 true && false

false

false && true 

false

false && false

false

  •  В отличие от аргументов оператора ||, второй аргумент оператора && не вычисляется, если первый равен false.
  •  и один одноместный:
    •  НЕ (отрицание) – ! – возвращает логическое значение, противоположное логическому значению своего единственного операнда:

Выражение

   имеет значение

!true

false

!false

true

  •  Пример: !(m>0) означает, что m не больше нуля (т.е. меньше нуля или равно нулю). Запись !m>0 в данном случае может привести к неверному результату, поскольку оператор ! обладает более высоким приоритетом, чем оператор сравнения.

Условный оператор

Условный оператор состоит из двух или трех частей (первые две части – обязательные):

  1.  Проверка условия:
  2.    if ( <условие> )

Здесь:

  •  if – ключевое слово
    •  <условие> – выражение JavaScript (формальное определение выражения довольно сложно и мы не будем его рассматривать), которое вычисляется, а полученный результат анализируется: если он равен 0 или логическому значению false (ложь), то проверяемое условие считается не выполненным (ложным); в противном случае (любое ненулевое значение или true (истина)) – выполненным (истинным).

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

  1.  Оператор, выполняемый при истинности условия.

Это может быть простой оператор, например

 alert("Привет!")

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

 {

   b1=1;

   b2=0;

   b3=0;

 }

  1.  Оператор, выполняемый при ложности условия. Этому оператору, который также может быть простым или составным, предшествует ключевое слово else:
  2.    if ( n==2 ) { b1=0; b2=1; b3=0; }
  3.    else { b1=0; b2=0; b3=1; }

Сравнения

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

Оператор

Описание

Примеры,
дающие значение
true
(
var var1=3;
var var2=4;)

Равно (==)

Возвращает true, если операнды равны.

Если операнды имеют разный тип (например, число и строка, состоящая из цифр), то JavaScript пытается преобразовать операнды к такому общему типу, для которого возможно выполнение сравнения

3 == var1
"3" == var1
3 == '3'

Не равно (!=)

Возвращает true, если операнды НЕ равны.

Если операнды имеют разный тип (например, число и строка, состоящая из цифр), то JavaScript пытается преобразовать операнды к такому общему типу, для которого возможно выполнение сравнения

var1 != 4
var1 != "3"

Строгое равенство (===)

Возвращает true, если операнды равны и имеют один и тот же тип.

3 === var1

Строгое неравенство (!==)

Возвращает true, если операнды НЕ равны или имеют РАЗНЫЕ типы.

var1 !== "3"
3 !== '3'

Больше (>)

Возвращает true, если левый операнд больше правого.

При этом строки сравниваются в лексикографическом порядке с учетом текущей кодировки

var2 > var1

Больше или равно (>=)

Возвращает true, если левый операнд больше правого или равен ему.

При этом строки сравниваются в лексикографическом порядке с учетом текущей кодировки

var2 >= var1
var1 >= 3

Меньше (<)

Возвращает true, если левый операнд меньше правого.

При этом строки сравниваются в лексикографическом порядке с учетом текущей кодировки

var1 < var2

Меньше или равно (<=)

Возвращает true, если левый операнд меньше правого или равен ему.

Управляющие структуры

Циклы

 for(начальное значение; условие продолжения; шаг) {

    операторы

    ...

 };

 

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

Оператор цикла с перечислением обычно использует некоторую переменную, называемую переменной цикла, например:

 for(i=0; // установка начальных значений

     i<3; // условие продолжения

     ++i  // автоинкремент - i увеличивается на 1

    ) {

    alert(i); // тело цикла

 }

Или, короче:

 for( i=0; i<3; ++i ) {

    alert(i);

 }

Цикл выполняется в такой последовательности:

  1.  Сначала выполняется <установка начальных значений>.
  2.  Затем проверяется <условие продолжения> цикла: если оно не выполняется, то цикл немедленно завершается (возможно, так и не начавшись).
  3.  Выполняется <тело цикла>.
  4.  Выполняется <изменение переменных цикла> и управление передается на п.2 (проверка <условия продолжения> цикла).

Типы в JavaScript

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

Всего в JavaScript есть 7 типов:

  •  

– неопределенное значение

  •  

– пустое значение

  •  

– булево (логическое) значение – истина (true) или ложь (false)

  •  

– число

  •  

– строка

  •  

– объект

  •  

– функция

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

К сожалению, оператор typeof возвращает не название типа, а название типа, написанное со строчной буквы. К тому же, для пустого значения (Null) typeof возвращает значение object.

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

Объект Дата

Манипулирование датами в JavaScript осуществляется при помощи объекта Date. Объект Date хранит не только дату, но и время, причем с достаточно высокой точностью – одна миллисекунда (тысячная доля секунды).

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

 

Внутреннее представление даты в JavaScript

Объект Date хранит дату в виде большого целого числа, представляющего количество миллисекунд, прошедших с 0 часов 0 минут 0 секунд 0 миллисекунд 1 января 1970 г. (эту дату часто называют "начало эпохи Unix").

В сутках 86 400 000 миллисекунд. Объект Date в состоянии хранить информацию о датах, отстоящих от начала эпохи Unix на 100 000 000 суток (285 616 лет) в ту и другую стороны.
 

Конструкторы, или как создать объект Date

Объект Date создается с помощью одного из своих конструкторов. Всего объект Date имеет 4 конструктора.
 

Конструктор текущей даты

Текущая дата задается конструктором Date без параметров:

 var today = new Date(); // текущий момент

                         //   - по мнению машины,

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


Конструктор по составляющим элементам даты

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

  1.  год
  2.  месяц – нумерация месяцев начинается с 0 – обратите на это внимание!
  3.  день месяца
  4.  часы
  5.  минуты
  6.  секунды
  7.  миллисекунды

Примеры:

 var jan1_2002 = new Date(2002,0);     // 0 часов 1 января 2002 г.

 var sep10_2002 = new Date(2002,8,10); // 0 часов 10 сентября 2002 г.

   // 10 часов 30 минут 10 сентября 2002 г.

 var sep10_2002_10_30 = new Date(2002,8,10,10,30);


Конструктор по числу миллисекунд с начала эпохи Unix

Единственным параметром этого конструктора является число миллисекунд с начала эпохи Unix (поэтому-то конструктор по составляющим элементам даты имеет, как минимум, два параметра – чтобы отличить его от конструктора по числу миллисекунд с начала эпохи Unix):

 // 100 дней с начала эпохи Unix

 var someday = new Date(86400000*100);


Конструктор по строке даты на английском языке

Этот конструктор также имеет единственный параметр – строку даты в одном из двух форматов:

  •  стандартном формате IETF
  •  американском формате

В России этот конструктор объекта Date применяется крайне редко.


Стандартный формат даты IETF

<Сокращенное название дня недели>, <Число месяца> <Сокращенное название месяца> ГГГГ ЧЧ:ММ:[СС][ GMT[ <sHHmm>]]

где квадратные скобки обозначают необязательный компонент (например, смещение часового пояса sHHmm может быть опущено как вместе с ключевым словом GMT, так и само по себе):

  •  <Сокращенное название дня недели> – по-английски:
    •  Mon – понедельник
    •  Tue – вторник
    •  Wed – среда
    •  Thu – четверг
    •  Fri – пятница
    •  Sat – суббота
    •  Sun – воскресенье
  •  <Число месяца> – у чисел, меньших 10, допустим, но не обязателен ведущий 0 (напр., 8 или 08)
  •  <Сокращенное название месяца> – по-английски:
    •  Jan – январь
    •  Feb – февраль
    •  Mar – март
    •  Apr – апрель
    •  May май 
    •  Jun июнь 
    •  Jul июль 
    •  Aug август 
    •  Sep – сентябрь
    •  Oct – октябрь
    •  Nov – ноябрь
    •  Dec – декабрь
  •  ГГГГ – четыре цифры года
  •  ЧЧ – две цифры часа (с ведущим нулем, если число часов менее 10!)
  •  ММ – две цифры минут (с ведущим нулем, если число минут менее 10!)
  •  СС – две цифры секунд (с ведущим нулем, если число секунд менее 10!)
  •  <sHHmm> – смещение в часах и минутах относительно Гринвичского меридиана (s задает направление смещения: - – на запад, + – на восток), например, московское время задается как GMT +0300 (смещение к востоку на 3 часа). Если смещение опущено, но символы GMT присутствуют, то используется время по Гринвичу; если и символы GMT опущены, то используется местное время.


Американский формат даты

Американский формат на самом деле включает несколько форматов:

  •  "Короткие" форматы: М-Д-Г или М/Д/Г, где
    •  М – номер месяца (январь имеет номер 1)
    •  Д – день месяца
    •  Г – год

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

  •  "Длинные" форматы: <день месяца> <название месяца> <год> <день недели> [ЧЧ:ММ[:СС][<AM/PM>]], где
    •  <день месяца> <название месяца> <год> <день недели> могут следовать в произвольном порядке
    •  <название месяца> и <день недели> – английские слова, которые должны начинаться с заглавной буквы; их разрешается сокращать до двух букв, но, поскольку двухбуквенные сокращения названий месяцев неоднозначны, то Ju означает July – июль.
    •  в качестве разделителей можно использовать пробелы и запятые
    •  время суток можно опустить целиком (будет считаться, что дата соотвествует началу соответствующего дня) или можно опустить только секунды
    •  время можно указывать в 24-х часовом или в 12-и часовом форматах. В 12-и часовом формате следует использовать уточнители половины суток (AM – с полуночи до полудня; PM – с полудня до полуночи). Указание половины суток для числа часов, большего 12, является ошибкой (23:15 PM – ошибка!)

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

Если название дня недели в длинном формате даты не соответствует собственно дате, то оно игнорируется.


Методы объекта
Date

Объект Date обладает 38 специфическими методами, а также 2 статическими методами (т.е. такими, которые относятся к классу всех объектов Date).


Статические методы объекта
Date

Статические методы применяются не к объекту, а к названию объекта:

  •  Date.parse(<строка даты>) – превращает <строку даты> в соответствующее число миллисекунд от начала эпохи Unix. <строка даты> должна быть в одном из двух вышеупомянутых англоязычных форматов.

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

  •  Date.UTC() – имеет от 1 до 7 параметров, аналогичных параметрам конструктора по составляющим элементам даты (год, номер месяца – от 0(!), день месяца, часы, минуты, секунды и миллисекунды. Возвращает соответствующее число миллисекунд от начала эпохи Unix).


Специфические методы объекта
Date

Специфические методы объекта Date применяются только к конкретному объекту, например:

 var sep10_2002_10_30 = new Date(2002,9,10,10,30);

 alert(sep10_2002_10_30.getFullYear()); // выведем 2002

Специфические методы объекта Date распадаются на три группы:

  •  Получение информации о дате. Все методы этой группы возвращают числа, а не строки.
     
    •  getFullYear() – возвращает число, состоящее из четырех цифр года по местному времени
    •  getUTCFullYear() – возвращает число, состоящее из четырех цифр года по Гринвичу (Universal Coordinated Time – UTC)
    •  getYear() – этот метод был предназначен для того, чтобы возвращать две цифры года, но поведение его в разных браузерах различно и в настоящее время его применение не рекомендуется
       
    •  getMonth() – возвращает номер месяца по местному времени (0 – январь и т.д. до 11 – декабрь)
    •  getUTCMonth() – возвращает номер месяца по Гринвичу
       
    •  getDate() – возвращает номер дня в месяце по местному времени
    •  getUTCDate() – возвращает номер дня в месяце по Гринвичу
       
    •  getDay() – возвращает номер дня недели по местному времени (0 – воскресенье и т.д. до 6 – суббота)
    •  getUTCDay() – возвращает номер дня недели по Гринвичу
       
    •  getHours() – возвращает часы по местному времени
    •  getUTCHours() – возвращает часы по Гринвичу
       
    •  getMinutes() – возвращает минуты по местному времени
    •  getUTCMinutes() – возвращает минуты по Гринвичу
       
    •  getSeconds() – возвращает секунды по местному времени
    •  getUTCSeconds() – возвращает секунды по Гринвичу
       
    •  getMilliseconds() – возвращает миллисекунды по местному времени
    •  getUTCMilliseconds() – возвращает миллисекунды по Гринвичу
       
    •  getTime() – возвращает полное число миллисекунд в объекте. Обычно используется для инициализации других объектов Date, например:
    •  // Текущий момент
    •    var now = new Date();
    •  // на 10 секунд позже
    •    var later_10_sec = new Date(now.getTime()+10000);
    •  getTimezoneOffset() – возвращает смещение местного часового пояса относительно Гринвичского меридиана с учетом перехода на летнее/зимнее время. Значение возвращается в минутах.
       
  •  Изменение даты 

Методы, изменяющие дату, не возвращают значений. В случае, когда необходимо из одной даты получить другую, но сохранить первую, необходимо сначала скопировать значение даты в новую переменную (см. примеры для методов setFullYear() и setDate() .
 

  •  setFullYear(yearValue[, monthValue[, dayValue]]) – может вызываться с одним, двумя или тремя параметрами (квадратные скобки означают необязательные параметры)). Устанавливает, соответственно, год, месяц и день месяца. Номера месяцев отсчитываются от 0.

Если месяц или день не указаны, то такие вызовы метода setFullYear() эквивалентны вызовам setFullYear(), в которых на соответствующих местах стоят вызовы методов getMonth() и getDate():

 var today = new Date() ;

 var year2001_1 = today ;

 year2001_1.setFullYear(2001) ;

 var year2001_2 = today ;

 year2001_2.setFullYear(2001,today.getMonth()) ;

 var year2001_3 = today ;

 year2001_3.setFullYear(2001,today.getMonth(),today.getDate()) ;

В приведенном примере все три переменные year2001_1, year2001_2 и year2001_3 содержат одну и ту же дату.

Значения лет, номеров месяцев и дней месяца – произвольные целые числа (они даже могут быть отрицательными).

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

 

  •  setUTCFullYear(yearValue[, monthValue[, dayValue]]) – аналогично setFullYear(), но использует время по Гринвичу.
    •  setYear() – имеет единственный аргумент – смещение года относительно 1900. Поведение этого метода в разных браузерах различно и в настоящее время его применение не рекомендуется.
       
    •  setMonth(m) – этот метод использует единственный аргумент – номер месяца – произвольное целое число (возможно, со знаком). Если указанный номер месяца не лежит в диапазоне [0..11], то метод setMonth() производит соответствующую корректировку года.
    •  setUTCMonth(m) – то же, что и setMonth(m), но с использованием времени по Гринвичу.
       
    •  setDate() – этот метод использует единственный аргумент – номер дня месяца – произвольное целое число (возможно, со знаком). Если указанный номер дня месяца не лежит в диапазоне от 1 до числа дней в месяце, хранящемся в объекте, к которому применяется метод setDate(), то этот метод производит соответствующую корректировку месяца и, при необходимости, года.

Пример:

 var day = new Date(2000,2,8) ; // 8 марта 2000 г.

       // Готовиться начнем за 2 недели

 var day_14 = day ;

 day_14 .setDate(day.getDate()-14) ;

       // 22 февраля - 2000 год не был високосным,

       //    и JavaScript об этом знает!

 var sDate = day_14.getDate() ;

       // Добавим, если нужно, ведущий 0

 sDate = (sDate>10?'':'0')+sDate ;

       // Знак "меньше" употреблять в JavaScript

       //   не следует (он открывает тег),

       //   поэтому используем знак "больше"

 var sMon = day_14.getMonth() ;

 sMon = (sMon>10?'':'0')+sMon ;

 alert(sDate+"."+sMon+"."+day_14.getFullYear()) ;

       // увидим 23.02.2000

       // 2000 год был високосным !

  •  setUTCDate(m) – то же, что и setUTCDate(m), но с использованием времени по Гринвичу.
     
    •  setHours(hoursValue[, minutesValue[, secondsValue[, msValue]]]) – может вызываться с одним, двумя, тремя или четырьмя целочисленными параметрами, устанавливая, соответственно, часы, минуты, секунды и миллисекунды в соответствии с местным временем. Если параметры отрицательны или выходят за естественные пределы (23 для часов; 59 для минут и секунд; 999 для миллисекунд), то производится соответствующая коррекция старшего временного параметра (скажем, если указано 60 минут, то увеличивается на 1 текущее значение часов, а минуты устанавливаются в 0).
    •  setUTCHours(hoursValue[, minutesValue[, secondsValue[, msValue]]]) – аналогично setHours(), но используется время по Гринвичу.
       
    •  setMinutes(minutesValue[, secondsValue[, msValue]]) – аналогично setHours(), но не позволяет установить часы.
    •  setUTCMinutes(minutesValue[, secondsValue[, msValue]]) – аналогично setMinutes(), но используется время по Гринвичу.
       
    •  setSeconds(secondsValue[, msValue]) – аналогично setHours(), но не позволяет установить часы и минуты.
    •  setUTCSeconds(secondsValue[, msValue]) – аналогично setSeconds(), но используется время по Гринвичу.
       
    •  setMilliseconds(msValue) – аналогично setHours(), но позволяет установить только миллисекунды.
    •  setUTCMilliseconds(msValue) – аналогично setMilliseconds(), но используется время по Гринвичу.
       
    •  setTime(milliseconds) – устанавливает время в миллисекундах от начала эпохи Unix.
       
  •  Преобразование даты в строку
     
    •  toUTCString() – приведение времени к строке времени по Гринвичу в формате, зависящем от браузера (как правило, это формат вида "DD Mmm YYYY HH:MM:SS UTC." (две цифры дня месяца – с ведущим нулем при необходимости, – английское сокращенное – до трех первых символов – название месяца, четыре цифры года, часы, минуты и секунды).
    •  toGMTString() – приведение времени к строке времени по Гринвичу в формате, зависящем от браузера. Метод считается устаревшим и его применение не рекомендуется.
    •  toLocaleString() – приведение времени к строке времени в местном формате. Формат зависит от установок компьютера пользователя.

События JavaScript

Событие

Обработчик

Описание

Abort

onAbort

Отмена загрузки изображения

Blur

onBlur

Переход к другому объекту

Change

onChange

Изменение значения в поле формы

Click

onClick

Возникает при щелчке левой кнопкой мыши на объекте

DblClick

onDblClick

Двойной щелчек левой кнопки мыши на объекте

Error

onError

Возникновение ошибки при загрузке изображения

Focus

onFocus

Переход к текущему объекту

KeyDown

onKeyDown

Нажатие клавиши

KeyPress

onKeyPress

Нажатие и отпускание клавиши

KeyUp

onKeyUp

Отпускание нажатой клавиши

Load

onLoad

Загрузка страницы или изображения

MouseDown

onMouseDown

Нажатие левой кнопки мыши

MouseOut

onMouseOut

Смещение указателя мыши с объекта

MouseOver

onMouseOver

Наведение указателя мыши на объект

MouseUp

onMouseUp

Отпускание левой кнопки мыши

Move

onMove

Перемещение окна

Reset

onReset

Щелчок на кнопке сброса формы

Resize

onResize

Изменение размеров окна браузера

Select

onSelect

Выделение текста

Submit

onSubmit

Щелчек на кнопке отправки формы

Unload

onUnload

Выгрузка страницы

Диалог с пользователем

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

alert("Текст сообщения") - выводит в специальном окне текст сообщения, сформированный программой. Именно этой функцией мы будем пользоваться для просмотра свойств различных объектов браузера и документа.

confirm("Текст комментария") - выводит специальное окно в котором отображается текст комментария. Содержит две кнопки: "Да" и "Нет". Если выбрано "Да" - возвращает True, если "Нет" - False

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


Объектная модель   браузера


 

Объект Screen

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

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

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

Посмотрите свойства объекта screen в разных браузерах. Основными его параметрами являются следующие:

  •  window.screen.width - ширина экрана в пикселях;
  •  window.screen.height - высота экрана в пикселях;
  •  window.screen.colorDepth - цветовое разрешение видеоадаптера (8 - 256 цветов, 16 - 65 тыс.цветов, 24 - 16 млн.цветов).

Получить свойства объекта screen 

В NN и браузере Mozilla список свойств и значений можно получить прямо из объекта screen. В IE этого сделать почему-то не удается, хотя при прямом обращении это возможно. Второй метод работает для всех броузеров.

Получить значения параметров объекта screen в IE 

Объект Navigator

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

Посмотреть свойство объекта navigator 

Объект History

history.length - длина списка history

history.back() - на один шаг назад

history.forvard() - на один шаг вперед

history.go(n) - перейти на позицию n списка

При обращении к методам .forvard() и .back() в качестве параметров могут подставляться значения, задающие количество шагов в ту или иную сторону.

back(5) - переход на пять шагов назад.

Глобальный объект window

Глобальный объект window является наивысшим объектом в иерархии объектной модели браузера. Все остальные объекты, включая navigator, screen и функции вывода сообщений alert(), confirm() и prompt() представляют из себя свойства и методы этого объекта.

Поскольку это объект наивысшей иерерхии, к текущему окну можно обращаться без использования ключевого слова window. Существует несколько синонимов текущего окна, которые можно использовать для обрашения к его свойствам. Вызовы методов window.screen.width, self.screen.width, top.screen.width и просто screen.width, равноценны.

Только при обращении из одного окна к другому необходимо использовать имя окна. Именованные окна не появляются просто так. Для того, чтобы создать именованное окно необходимо использовать либо специальный параметр <A ... target="имя"> , либо функцию JS open() с соответствующими параметрами.

Информация об окне: четыре свойства:

name: только для чтения
Основное окно браузера безымянно. Только кадры или окна, открываемые программами JavaScript имеют собственные имена
opener - только для чтения. Имя окна, в котором выполнялась программа JavaScript, которая и открыла данное окно. Мы пока программно не открывали никакие окна, поэтому и возвращается значение undefined.
parent - только для чтения. Имя окна, в которое вложено данное окно (как кадр). Хотя наше окно никуда не вложено, возвращается значение [object], поскольку пустое значение – тоже объект.
closed - только для чтения. Свойство closed говорит о том, закрыто ли окно. Понятно, что текущее окно никогда не бывает закрыто, поэтому на запрос о том, закрыто ли текущее окно, мы всегда получим ответ false. Когда мы научимся открывать окна, пользователь может их закрыть. Именно тогда для того, чтобы пользователь видел, что же такое мы выводим в нужное окно, нам придется предварительно удостоверяться, что окно открыто.

Управление строкой статуса окна, два свойства:

defaultStatus - доступен для чтения и записи
Щелкните по кнопке и посмотрите значение свойства Status текущего окна:
Пока мы ничего не устанавливали и сообщение пустое.

self.defaultStatus="Всем привет!"

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

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

   var oldStatus=self.status;

   self.status="Всем привет!";

   ...

   self.status=oldStatus;

 

Обычно свойство status используется при обработке пары событий типа onMouseOver/onMouseOut. При наведении мыши статус устанавливается, а при отведении – возвращается прежнее значение.
При этом следует иметь ввиду, что обработку событий
onMouseOver и onMouseOut следует прекратить немедленно после выполнения нашей функции, которая изменит текст в строке статуса – иначе броузер выведет в эту строку то, что полагается, т.е. URL. Для этого необходимо вернуть броузеру значение true в качестве результата обработки события.
Поводите мышкой по этой ссылке:
в начало страницы.

Управление документом, отображаемым в окне – одно свойство:

– можно изменять Свойство location – очень важное. Оно определяет, какой именно документ отображен в окне. Изменение этого свойства

   self.location="index01.htm"

 

приводит к отображению в окне другого документа:

Посмотреть свойства глобального объекта window

Открываем окна

Новые окна можно открывать из программ JS с помощью метода open(). У этой функции имеются три параметра, которые перечисляются в следующем порядке:

  •  Файл для загрузки - URL документа, который должен быть загружен в новое окно;
  •  Имя окна - и так понятно (только латинские символы!!!);
  •  Атрибуты окна - Набор параметров в виде имя=значение, разделенных запятыми, с помощью которых можно управлять внешним видом окна.

Формат вызова функции:

window.open("Файл для загрузки", "Имя окна", "Атрибуты окна") 

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

Аттрибуты окна

Атрибут

Значение

Описание

channelmode 

yes|no|1|0

Параметры раздела "Каналы" браузера

directories 

yes|no|1|0

Параметры панели директории

fullscreen 

yes|no|1|0

Открывать окно на полный экран

height 

число

Задать высоту окна

left 

число

Задать положение верхнего левого угла по горизонтали

location 

yes|no|1|0

Параметры панели адрес

menubar 

yes|no|1|0

Параметры панели выпадающих меню

resizable 

yes|no|1|0

Разрешить изменение размеров окна

scrollbars 

yes|no|1|0

разрешить появление линий прокрутки

status 

yes|no|1|0

Параметры строки статус

toolbar 

yes|no|1|0

Параметры строки кнопок инструментов

Top 

число

Задает положение верхнего левого угла по вертикали

width 

число

Ширина окна

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

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

window.open('win1.html','Test1','scrollbars=1')

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

Для этого Вам придется получить значения размеров экрана через объект screen и расчитать размеры и положение верхнего левого угла нового окна.

ВНИМАНИЕ!!! У меня специально сделано не так, как надо сделать Вам...

Управляем окном

Кроме свойств объекта window имеются методы управления.

Метод

Действие

moveTo(x,y)

Передвинуть окно в положение с координатами левого верхнего угла х и y пикселей

moveBy(x,y)

Передвинуть окно на расстояние соответствующее x и y относительно текущего.

resizeTo(x,y)

Изменить размер окна на новый в соответствии с заданными значениями

resizeBy(x,y)

Увеличить (или уменьшить) размер окна на x и y

"Оконные" связи

Если окно открывается с помощью функции open(), то в нем (дочерненее окно) сохраняется связь с окном из которого его открыли (родительское окно) через свойство
window.opener.

Через объект window.opener дочернего окна мы получаем доступ ко всем свойствам родительского. Давайте посмотрим.

Открыть новое окно

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

Объект Document

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

Эксперименты с формами

Первым делом посмотрим, как это выглядит:

Элементы формы задаваемые с помощью тега INPUT

Элемент

Тип

Описание

RESET

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

SUBMIT

Отправляет на сервер по URL определенному в теге <FORM ACTION=""> информацию введенную во все поля формы в виде: "имя"="значение". В каждой форме может быть сколько угодно кнопок типа SUBMIT. Причем, если они определены без имени (параметр NAME внутри тэга INPUT), то и действие одинаково, а если кнопкам присвоены разные имена, то действие одинаково, но на сервер посылается дополнительная информация, содержащая имя нажатой кнопки.

BUTTON

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

IMAGE

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

Папе Маме Бабушке

CHECKBOX

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

Взять деньги
50 100 р. 200 р. 300 р.
Отдать жене Пропить Заначить

RADIO

"Радиокнопка". Позволяет выбрать один из нескольких вариантов. Группы выбора определяются именем поля

TEXT

Поле для ввода одной строки текста

PASSWORD

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

 

HIDDEN

На экран не выводится, но позволяет определять в документе пару "имя"="значение", которые передаются на сервер

FILE

Используется для выбора файла, который будет отправлен на сервер

Элементы формы, задаваемые с помощью специальных тегов

Элемент

Тэг

Назначение

SELECT

Позволяет выбрать определенное значение из выпадающего списка

SELECT

Если в тэге SELECT задан параметр SIZE, то используется другая форма вывода списка выбора.

SELECT

Если в тэге SELECT задан параметр SIZE и MULTIPLE - то можно выбрать несколько элементов списка с использованием клавиши Ctrl.

TEXTAREA

Используется для создания многострочной области ввода

Свойства форм и ее элементов

Естественно, все продемонстрированные примеры выполнены с использованием соответствующих элементов формы и ее компонентов.

Свойства отдельных элементов формы подробно описаны в справочниках.

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

Однако, если присмотреться внимательно, то выясниться, что часть информации нам получить не удалось... Так напрочь пропала информация о кнопке типа IMAGE!!!. Нет даже упоминания о объекте IMAGE (если спросить специально).

 


 

А также другие работы, которые могут Вас заинтересовать

12983. Модели и методы решения задач 42.78 KB
  Лекции 23: Модели и методы решения задач Классификация представления задач. Логические модели. Сетевые модели Продукционные модели. Сценарии. Интеллектуальный интерфейс Классификация уровней понимания Методы решения задач. Решение задач методом поиска
12985. Представление знаний в интеллектуальных системах 76.5 KB
  Лекция 4: Представление знаний в интеллектуальных системах Предисловие Данные и знания. Основные определения. Особенности знаний. Переход от Базы Данных к Базе Знаний. Модели представления знаний. Неформальные семантические модели. Формальные модели предста...
12986. Представление знаний в интеллектуальных системах. Продукционные системы 27.86 KB
  Лекция 5: Представление знаний в интеллектуальных системах часть 2 Продукционные системы Компоненты продукционных систем Стратегии решений организации поиска Логический подход Представление простых фактов в логических системах Примеры применени
12987. Планирование задач в интеллектуальных системах 48.76 KB
  Лекция 6: Планирование задач Основные определения Комплексная схема нечеткого планирования Особенности планирования целенаправленных действий Оценка сложности задачи планирования Литература Основные определения Функционирование многих ИС носит це...
12988. Экспертные системы. Назначение экспертных систем 53.55 KB
  Экспертные системы Назначение Экспертных Систем Структура Экспертных Систем Этапы разработки экспертных систем Интерфейс с конечным пользователем Представление Знаний В ЭС Уровни Представления И Уровни Детальности Организация Знаний В Р...
12989. Методы работы со знаниями 40.97 KB
  Лекция 9: Методы работы со знаниями Основные определения Подготовительный этап Основной этап Системы приобретения знаний от экспертов Формализация качественных знаний Пример формализации качественных знаний Основные определения Приобретением...
12990. Системы понимания естественного языка 50.03 KB
  Лекция 10: Системы понимания естественного языка Введение Предпосылки возникновения систем понимания естественного языка Понимание в диалоге Примеры системы обработки естественного языка Методы озвучивания речи Наиболее распространенные системы синт...
12991. Системы машинного зрения 30.22 KB
  Лекция 11: Системы машинного зрения Введение Основные принципы или целостность восприятия Распознавание символов Шаблонные системы Структурные системы Признаковые системы Структурнопятенный эталон Уроки машинного чтения от Cognitive Technologies Распо