Справочник по javascript программированию. Обращение к элементам страницы. Видеоуроки от WebMagisters

О этом справочнике

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

Справочник создан на основе информации, предоставленной на сайте «Справочник Web-языков» www.spravkaweb.ru.

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

Также на сайте доступны для скачивания справочники по PHP, CSS, Perl, MySQL.

Совместное использование HTML и JavaScript

. . . Текст скрипта

Атрибут language

Второй атрибут src

превращается в одинарный:

Тег

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

Прежде всего надо рассмотреть тег . Этот тег служит для вставки скриптов в HTML-код страницы. Его формат:

. . . Текст скрипта

Текст скрипта помещаетс внутрь тега

Атрибут language позволяет указать, на каком языке программирования написан скрипт.

Значение по умолчанию - "JavaScript".

Internet Explorer поддерживается скрипты, написанные на языке VBScript, которому соответствует значение атрибута "VBScript".

Navigator позволяет задавать версию интерпретатора JavaScript:

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

В следующей таблице приведены версии интерпретатора JavaScript и соответствие их разным версиям Navigator:

Второй атрибут src служит для задания адреса файла, содержащего скрипт.

В этом случае обычно парный тег превращается в одинарный:

js - стандартное расширение для JavaScript-файлов.

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

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

Однако некоторые версии Navigator в этом случае "не видят" скрипта, хотя, согласно техническим руководствам самой Netscape, должны. Так что этот совет применим только для Internet Explorer.

В качестве альтернативы вы можете использовать тег .

Этот тег поддерживается Internet Explorer и Navigator:

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

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

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

Надо отметить, что JavaScript поддерживает так называемые внешние классы и объекты, определенные другими программами.Web-страница, которую вы просматриваете в окне Web-обозревателя, может быть описана как набор объектов. Скажем, она включает большой объект "документ-в-целом" и более мелкие объекты: "абзац-1", "абзац-2", "абзац-1" и "рисунок". Вы можете обращаться к этим объектам из того же JavaScript.

Рисунок.ДвигайВперед;Абзац-1.Ширина = 80%;Абзац-3.Покажи;

Конечно, здесь сильно утрируется, но принцып таков.

Например, рассмотрим скрипт:

var d;d=new Date();document.write(d.toString());

Документ document - это наш "документ-в-целом". А write - его метод, вставляющий текст, переданный в качестве параметра, в текущее место HTML-документа.

Совокупность объектов, описывающая web-страницу, со всеми их методами и свойствами называется объектной моделью документа. А технология создания web-страницы, при которой обычный HTML-код объединяется с JavaScript-кодом, причем последний управляет страницей с помощью объектной модели, называется динамическим HTML (DHTML).

Объект document

activeElement

alinkColor

Пример:

characterSet

compatMode

defaultCharset

designMode

documentElement

fileCreatedDate

fileModifiedDate

fileSize

edocument.images

lastModified

linkColor

location

parentWindow

Аналог document.embeds

protocol

readState

referrer

security

selection

styleSheets

URLUnencoded

vlinkColor

Ширина документа в пикселях.

Свойства

Прежде всего надо отметить, что объект document существует в единственном экземпляре для всего HTML-документа. Он присутствует всегда, если существует HTML-документ, поэтому специально создавать его не требуется.

activeElement

alinkColor

Задает или возвращает цвет активных гиперссылок.

document.alinkColor[ ="{Цвет}"];

Объекты анкеров представляют собой выражения в документе HTML, описанные в дескрипторе. Данные объекты обозначаются в URL символом #, расположенным между URL странички и именем анкера.

Пример: Получение количества анкеров в документе

var anchorCount=document.anchors.length

Благодаря свойству applets можно обращаться к аплетам java, содержащимся в документе.

Задает или возвращает цвет фона страницы. В IE работает правильно, только если цвет страницы установлен атрибутом BGCOLOR.

Этот объект имеет множество ключевых свойств для управления внешним видом странички. Для доступа к его свойствам лучше использовать выражение document.body.

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

characterSet

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

compatMode

в Internet Explorer 6 появилось новое свойство объекта document, которое обзывается compatMode. Благодаря этому свойству (оно, кстати, только для чтения) мы можем определить, какой режим включён в данный момент - BackCompat (IE 4.x–IE 5.x) или CSS1Compat (IE 6). Исходя из значения этого свойство, мы можем, например, указывать различные значения CSS свойств width, margin или padding:

if (document.getElementById){oBlock = document.getElementById("mydiv");oBlock.style.width = ((document.compatMode) && (document.compatMode == "CSS1Compat")) ? "200px" : "250px";}

defaultCharset

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

designMode

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

documentElement

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

var сount=document.embeds.length

Это свойство установленное в true позволяет использовать новые свойства объекта, добавленные вами при выполнении сценария

Задает или возвращает цвет текста. Значение по умолчанию #000000.

fileCreatedDate

Возвращает дату создания файла HTML-документа в формате mm/dd/yyyy, только для чтения.

fileModifiedDate

Возвращает дату последнего изменения файла HTML-документа в формате mm/dd/yyyy, только для чтения.

fileSize

Возвращает размер файла HTML-документа или графического изображения.

Возвращает массив объектов form. Первым элементом массива document.forms является ссылка на самую первую форму, определённую в документе.

Возвращает массив объектов frame. Первым элементом массива document.frames является ссылка на самую первыйфрейм, определённый в документе.

Задает или возвращает высоту текущего окна или фрейма в пикселях, соответствует свойству в IE scrollHeight.

edocument.images

lastModified

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

Это массив слоёв расположенных в документе

linkColor

Задает или возвращает цвет гиперссылок в документе. В IE работает правильно, только если цвет гипессылок установлен атрибутом LINK.

location

Установка нового URL адреса свойству location приведёт к загрузке странички находящейся по этому адресу

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

parentWindow

Свойство document.parentWindow возвращает ссылку на объект window, который содержит текущий документ.

Аналог document.embeds

protocol

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

readState

Возвращает текущее состояние документа.

referrer

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

Возвращает массив всех элементов SCRIPT содержащихся в документе. Имеется возможность не только просматривать массив, но и добавлять/удалять элементы.

security

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

selection

Свойство document.selection возвращает объект selection, содержимое которого отображается в окне браузера как выделение основного текста. Это выделение может осуществляется пользователем или с помощью сценария в объекте TextRange

styleSheets

Возвращает заголовок Web-страницы, заданный в теге

Задает или возвращает интернет-адрес текущей Web-страницы.

URLUnencoded

Свойство возвращает строку URL-адреса в виде кода. Это означает, что все не буквенно-цифровые символы (имеются ввиду только цифры и буквы латинского алфавита) будут перекодированны в их URL-представление. т.е.знак % и шестнадцатеричный код символа (например пробел будет выглядеть как %20).

vlinkColor

Задает или возвращает цвет посещенных гиперссылок в документе. В IE работает правильно, только если цвет посещенных гиперссылок установлени атрибутом VLINK.

Ширина документа в пикселях.

Методы

Этот метод предназначен для очистки текущего документа из окна браузера.

Заставляет Web-страницу немедленно обновить свое содержимое после использования методов write. Метод не принимает параметров и не возвращает значения.

createAttribute()

createAttribute("Имя Атрибута")

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

setAttributeNode

var newAttr = document.createAttribute("width");newAttr.nodeValue = "80%";document.getElementById("myTable").setAttributeNode(newAttr);

createElement()

createElement("Имя дескриптора")

Генерирует объект атрибута для любого дескриптора HTML(или XML), указанного в качастве параметра. Этот объект официально не является частью объектной модели текущего документа, так как он в состав документа пока ещё не входит. Но данный метод используется для вызова объекта элемента, который в конечном счёте будет помещён в документ.

elementFromPoint()

elementFromPoint({X}, {Y})

getElementById()

getElementById({Имя элемента})

Возвращает элемент, имя которого передано в качестве параметра. Имя элемента страницы задается атрибутом ID. Метод принимает единственный параметр - имя элемента страницы.

getSelection()

Возвращает строку, содержащую текст, выделенный пользователем на странице. Метод не принимает параметров.

write({Текст})

Записывает текст или HTML-код, переданный как параметр, в текущее место документа.

writeLn()

writeLn({Текст})

То же самое, что write, но в конце добавляет символ возврата каретки и перевода строки.

Коллекция объектов

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

Рассмотрим, например, коллекцию images, которую включает в себя объект document. Вы можете получить доступ к отдельным ее элементам по порядковому номеру или уникальному имени.

document.images.item(1)document.images("iamge1")

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

document.images(1)document.images("image1")

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

Для некоторых тегов (в частности и ) доступен также атрибут NAME, выполняющий ту же функцию, что и ID.

Коллекция all представляет все элементы Web-страницы без исключений, в том числе и изображения. К элементам этой коллекции можно обращаться по номеру (нумеруются они в порядке появления в HTML-коде) или по имени.

document.all(8)document.all("iamge1")

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

document.all("image1", 2)

или выражение document.all("image1") вернет коллекцию всех изображений с именем image1.

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

Некоторые коллекции могут иметь методы для добавления и удаления элементов и других целей.

Подчиненные объекты и коллекции объекта document

Объект document содержит внутри себя множество подчиненных объектов и коллекций. В следующей таблице перечисленны свойства, возвращающие ссылки на них, и приведены описания соответствующих объектов и коллекций.

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

document.all.tags("H1")

Такой же метод поддерживает коллекция links .

Также хочу упомянуть два метода, поддерживаемых Internet Explorer начиная с 5.0. Это методы getElementByName и getElementByTagName . Первый из них возвращает коллекцию элементов со значением атрубута NAME , переданным в качестве параметра. Поскольку атрибут NAME применяется в современном HTML очень редко, польза от этого метода невелика. Второй метод возвращает коллекцию элементов, созданных посредством тега, переданного в качестве параметра.

document.getElementByName("someimage")document.getElementByTagName("H1")

Обращение к элементам страницы

Объект document имеет несколько полезных методов, которые можно использовать в скриптах. Но главное его значение - предоставление доступа к отдельным элементам Web-страницы.Как же можно добраться до отдельного элемента страницы?Прежде всего, через коллекции. Например, коллекцию all :

document.all("image1").outerHTML

Или через коллекцию images :

document.images("image1").outerHTML

all("image1").outerHTMLimages("image1").outerHTML

NN делать так не позволяет. Он требует обязательной ссылки на document. Вдобавок он не поддерживает коллекцию all .

document.images("image2").src

Имя элемента Web-страницы задается при помощи атрибутов ID и NAME . Если каждый элемент страницы имеет уникальное имя, то можно использовать так называемое прямое обращение к элементам. То есть, обращаться к нему не как к элементу коллекции, а как к отдельному объекту. Это работает и в IE и в NN.

image1.outerHTMLlayer1.top

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

Объект location

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

Свойства объекта location

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

Пользуясь объектом location , можно загрузить другой документ на место текущего. Для этого просто присвойте значение нового интернет-адреса свойству href .

document.location.href = "http://www.spravkaweb.ru";

Пользователи IE также могут воспользоваться методом assign :

document.location.assign("http://www.spravkaweb.ru");

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

document.location.replace("http://www.spravkaweb.ru");

Объект style

Как и все остальные объекты, style

style style

Свойства и методы

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

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

По аналогии вы можете преобразовать все атрибуты стилей в свойства объекта style .Все не относящееся к стилю свойства объекта style перечислены в нижерасположенной таблице. Кроме того, у этого объекта имеются методы getAttribute, removeAttribute и setAttribute. Но эти дополнительные свойства и методы поддерживаются только IE начиная с 4.0

Работа с объектом style

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

paragraph1.style.fontSize = 7;

Можно изменить геометрические размеры элемента:

image1.style.height = "100mm";image1.style.width = "120mm";

и его месторасположение:

iamge1.style.top = "200px";image1.style.left = "50px";

Заметьте, что мы присваиваем свойству строковые значения геометрических параметров с указанием единицы измерения. Это не очень удобно для вычислений, поэтому объект style предоставляет свойства pixel , принимающие и возвращающие числовые значения в пикселах:

image1.style.pixelHeight = 400;iamge1.style.pixelLeft +=5;

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

nheight = image1.style.posHeight; // Значение в миллиметрахnwidth = image1.style.posWidth; // Значение в пикселах

Вы можете использовать методы getAttribute , setAttribute и removeAttribute для получения и установки значения и удаления какого-либо свойства стиля:

paragraph1.style.setAttribute("borderBottomWidth", 5, false);paragraph1.style.removeAttribute("borderTopWidth", false);

Объект style в Internet Explorer

Как же получить доступ к объекту style? Internet Explorer предоставляет для этого три свойства: style , currentStyle и runtimeStyle .

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

Любой текст

someColor = par1.style.color;

Вышеприведенное выражение поместит в переменную someColor значение атрибута color встроенного стиля элемента, т.е. "green".

someFontSize = par1.style.fontSize;

Это выражение вернет null , даже если где-то в таблице стилей атрибут font-size для этого элемента определен. А все потому, что интересы свойства style не выходят за рамки встроенного ситиля.

Чтобы получить стиль элемента с учетом и встроенных стилей, и таблиц стилей, и атрибутов тега, используйте свойство currentStyle :

Любой текстsomeColor = par1.currentStyle.color;someBColor = par1.currentStyle.backgroundColor;someFontSize = par1.currentStyle.fontSize;someOther = par1.currentStyle.textDecoration;

Предположим, что где-то в таблице стилей определен для этого элемента атрибут background-color , равный "teal", а text-decoration не определен вообще. Эти выражения вернут следующие значения: первое - "green", второе - "teal", третье - "largest" (или "7"), а четвертое - "none"? т.е. значение по умолчанию для этого атрибута стиля.

Если вы измените какое-либо свойство объекта style , измениться то же свойство и у объекта currentStyle , и наоборот. Единственная деталь: если вы изменили какое-либо свойство currentStyle и потом сразу же обратились к нему, вернется старое значение. То есть, между присвоением значения и его применением к элементу должно пройти некоторое время.

Свойство runtimeStyle довольно странное. Оно возвращает ссылку на объект runtimeStyle , который является примерно тем же самым, что и currentStyle , но присвоение его свойствам новых значений не затригивает аналогичных свойств style . То есть, вы можете переопределить свойства стиля runtimeStyle , и соответствующие свойства style (но не currentStyle ) не изменятся.

Объект styleSheet и коллекция styleSheets

Объект document в IE имеет встроенную коллекцию styleSheets , которую можно использовать для доступа к отдельным таблицам стилей документа. А отдельная таблица стилей представляется объектом styleSheet :

address = document.styleSheets(1).href;

Для нас будут полезны три свойства объекта таблицы стилей.

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

Второе - disabled , разрешающее или запрещающее Web-обозревателю применять эту таблицу для форматирования документа. Заметьте, что в данном случае false разрашает применение таблицы, а true запрещает.

И последнее свойство - type - имеет для нас только теоретический интерес: оно задает тип таблицы стилей, который для IE всегда равен "text/css".

Объект style в Navigator. JavaScript-стили

Navigator поддерживает прямое обращение по идентификаторам только для объектов layer и не поддерживает коллекцию all . Да и поддержка атрибута ID в нем реализована так себе, в основном, для присвоения элементам стилей. Но объект document Navigator предусматривает четыре очень мощьных свойства для работы со стилями.

Свойство classes позволит вым получить доступ к отдельному поименованному стилю:

document.classes.{Имя стиля}.{Имя тега}|all.{Имя свойства}

Здесь {Имя тега} может быть именем любого тега. Если нужно определить стиль для всех тегов, используйте слово all .

Например, предположим, что вы определили в таблице стилей некий стиль:

Somestyle {color: green}

Тогда в коде скрипта вы можете получить к нему доступ:

document.classes.somestyle.all.fontFamily = "Arial";

Аналогично вы можете определить какой-либо стиль для одного определенного тега:

P.somestyle {color: green}document.classes.somestyle.P.fontFamily = "Arial";

В свою очередь свойство ids позволит вам получить доступ к стилю, присвоенному отдельному идентификатору ID:

document.ids.{Идентификатор}.{Имя свойства}

Например:

#someid {color: green}document.ids.someid.fontFamily = "Arial";

Но что делать, если вы переопределили стиль какого-либо тега? В этом случае воспользуйтесь свойством tags :

document.tags.{тег}.{Имя свойства}

Например:

H1 {color: green}document.tags.H1.fontFamily = "Courier";

А если вам нужно, скажем, изменить стиль элемента , находящегося внутри заголовка второго уровня? Для этого существует свойство contextual :

document.contextual({Контекст 1}[, {Контекст 2}[, ...]]).{Имя свойства}

Тогда для описанного нами случая:

document.contextual(document.tags.H2, document.tags.B).fontStyle= "oblique";

что аналогично заданию в таблице стилей

H2 B {font-style: oblique}

Но если вы думаете, что можете динамически изменять внешний вид элементов страницы в Navigator путем изменения их стилей, вы жестоко ошибаетесь. Реально объект style нужен Navigator только для поддержки нового вида таблиц стилей, так называемых JavaScript-стилей.

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

P {color: blue}.bigtext {font-size: 72pt; font-weight: boldest}H1 B {text-decoration: underline}

Это обычная таблица стилей.Теперь преобразуем ее в таблицу JavaScript-стилей:

document.tags.P.color = "blue";width (document.classes.bigtext.all) { fontSize = "72pt"; fontWeight = "boldest"; }document.contextual(document.tags.H1, document.tags.B).textDecoration = "underline";

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

Во всех предыдущих примерах для Navigator мы всегда приводили ссылку на объект document . Но в таблицах JavaScript-стилей ее можно опустить.

tags.P.color = "blue";width (classes.bigtext.all) { fontSize = "72pt"; fontWeight = "boldest"; }contextual(tags.H1, tags.B).textDecoration = "underline";

Объект window

Объект window представляет текущее окно Web-обозревателя или отдельный фрейм, если окно разделено на фреймы.

Возвращает true, если текущее окно закрыто. Может быть использовано при работе с несколькими окнами.

defaultStatus

Сообщение по умолчанию, отображаемое в строке состояния окна.

document

innerHeight

Возвращает высоту клиентской области окна (без рамок, меню, панелей инструментов) в пикселах.

innerWidth

Возвращает ширину клиентской области окна (без рамок, меню, панелей инструментов) в пикселах.

Поддерживается только NN начиная с 4.0

Возвращает количество фреймов.

location

locationbar

Возвращает ссылку на объект панели адреса окна Navigator (она же Location Toolbar). Единственное свойство этого объекта visible позволит показать ее или убрать; значение true этого свойства показывает панель адреса, false убирает.

Поддерживается только NN начиная с 4.0

Возвращает имя окна или фрейма.

navigator

outerHeight

Возвращает полную высоту окна (с рамками, меню, панелями инструментов) в пикселах.

Поддерживается только NN начиная с 4.0

outerWidth

Возвращает полную ширину окна (с рамками, меню, панелями инструментов) в пикселах.

Поддерживается только NN начиная с 4.0

pageXOffset

Возвращает расстояние по горизонтали между текущей позицией окна и левой границей документа. При прокручивании содержимого окна право значение этого свойства увеличивается, влево - уменьшается.

Поддерживается только NN начиная с 4.0

pageYOffset

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

Поддерживается только NN начиная с 4.0

personalbar

Поддерживается только Navigator начиная с 4.0

screenLeft

Возвращает горизонтальную координату левого верхнего угла окна.

screenTop

Возвращает вертикальную координату левого верхнего угла окна.

Поддерживается только IE начиная с 5.0

Горизонатльная координата левого верхнего угла окна.

Поддерживается только NN начиная с 4.0

Вертикальная координата левого верхнего угла окна.

Поддерживается только NN начиная с 4.0

scrollbars

Поддерживается только NN начиная с 4.0

Текст, отображаемый в строке состояния окна Web-обозревателя.

statusbar

Поддерживается только NN начиная с 4.0

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

Новичку Marijn Haverbeke «Выразительный JavaScript»

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

Курс «JavaScript-джедай» от Sorax’a

Видео курс от известного программиста и преподавателя под ником Sorax отлично подходит для начала изучения JS.

Видеоуроки от WebMagisters

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

JavaScript30

Англоязычный 30-ти дневный практический курс по JS. Автор не сильно налегает на теорию, зато с первого занятия предлагает писать интересные проекты, которые усложняются от урока к уроку.

Знающему основы Современный учебник JavaScript

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

Эдди Османи «Паттерны для масштабируемых JavaScript-приложений» JavaScript. Шаблоны

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

Дуглас Крокфорд «JavaScript: сильные стороны»

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

Маклафлин Б. «Изучаем AJAX»

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

Tom Coleman & Sasha Greif «Discover Meteor. Building Real-time JavaScript Web Apps»

Книга посвящена Meteor.js – фреймворку, который построен на базе Node.js и является по сути быстрой прослойкой между интерфейсом и базой данных. Он позволяет создавать по-настоящему интерактивные JS-приложения и использовать единый код как на сервере, так и на клиенте.

Документация по Meteor.js

Переведенная сообществом на русский язык документация по Meteor.js.

Марк Бейтс «CoffeeScript. Второе дыхание JavaScript»

Если вы уже знаете и используете в работе CoffeeScript, то эта книга поможет вам делать работу лучше. А если нет – то станет отличным пособием и главной настольной книгой по теме. Издание предназначено в первую очередь веб-разработчикам, использующим JS, а также всем тем, кто хочет писать качественный и понятный код.

Максимилиано Фиртман «jQuery Mobile. Разработка приложений для смартфонов и планшетов»

Книга рассказывает о создании динамических веб-приложений с помощью JS, AJAX и библиотеки jQuery. В ней уделяется внимание также созданию приложений с возможностью автономной offline работы.

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

Продолжение подборки материалов по Angular, на этот раз со ссылками на различные полезные источники, такие как презентация фреймворка 2-й версии (чтобы узнать что изменилось и появилось в новой версии фреймворка из первоисточника), а также на интересные подкасты и другие материалы, которые могут быть полезны при изучении Angular.js.

Видео-уроки по Node.js

Небольшой видео-курс по Node.js – подойдет и для тех, кто совсем не знаком с этим фреймворком и для тех, кто хочет освежить знания о нем.

Видео-уроки по CoffeeScript от Sorax’a.

Еще одна серия уроков от Sorax, на этот раз для более продвинутых пользователей JS, желающих познакомиться с CoffeeScript. Отлично подходит для просмотра прямо после курса по ванильному JavaScript.

Книга «Сюрреализм на JavaScript».

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

Кратко: В первой части серии «Справочник современных концепций JavaScript» мы познакомимся с функциональным программированием (FP), реактивным программированием (RP) и функциональным реактивным программированием (FRP). Для этого мы узнаем о чистоте, состоянии и его отсутствии, неизменяемости и изменяемости, императивном и декларативном программировании, функциях высшего порядка, observables и парадигмах FP, RP, FRP.

Введение

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

Концепции

В этой статье мы рассмотрим концепции, имеющие решающее значение для понимания функционального программирования, реактивного программирования и функционального реактивного программирования и их использования с JavaScript:

Чистота: чистые функции, нечистые функции, побочные эффекты
Состояние: с ним и без него
Неизменяемость и изменяемость
Императивное и декларативное программирование
Функции высшего порядка
Функциональное программирование
Observables: горячие и холодные
Реактивное программирование
Функциональное реактивное программирование

ЧистотаЧистые функции

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

Function half(x) {
return x / 2;
}

Функция half(x) принимает число x и возвращает значение половины x . Если мы передадим этой функции аргумент 8 , она вернет 4 . После вызова чистая функция всегда может быть заменена результатом своей работы. Например, мы могли бы заменить half(8) на 4: где бы эта функция не использовалась в нашем коде, подмена никак не повлияла бы на конечный результат. Это называется ссылочной прозрачностью .

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

Var someNum = 8;

// это НЕ чистая функция
function impureHalf() {
return someNum / 2;
}

Чистые функции должны принимать аргументы.
Одни и те же входные данные (аргументы) всегда произведут одинаковые выходные данные (вернут одинаковый результат).
Чистые функции основываются только на внутреннем состоянии и не изменяют внешнее (примечание: console.log изменяет глобальное состояние ).
Чистые функции не производят побочных эффектов .
Чистые функции не могут вызывать нечистые функции.

Нечистые функции

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

Рассмотрим следующие примеры:

Побочные эффекты в JavaScript

Когда функция или выражение изменяет состояние вне своего контекста, результат является побочным эффектом. Примеры побочных эффектов: вызов API, манипулирование DOM, вывод alert, запись в базу данных и так далее. Если функция производит побочные эффекты, она считается нечистой . Функции, вызывающие побочные эффекты, менее предсказуемы и их труднее тестировать, поскольку они приводят к изменениям вне их локальной области видимости.

Подводя итог: чистота

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

Дополнительную информацию о чистоте можно найти на следующих ресурсах:

Чистые или нечистые функции
Функциональное программирование: чистые функции

Состояние

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

С состоянием

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

Var number = 1; function increment() {
return number++;
} // глобальная переменная изменяется: number = 2
increment();

Без состояния

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

Var number = 1; function increment(n) {
return n + 1;
} // глобальная переменная НЕ изменяется: возвращает 2
increment(number);

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

Подводя итог: состояние

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

Дополнительную информацию о состоянии можно найти на следующих ресурсах:

Состояние
Преимущества программирования без сохранения состояния
Компоненты с состояниями и без, недостающее руководство
Redux: предсказуемый контейнер состояния для приложений JavaScript

Неизменяемость и изменяемость

Концепции неизменяемости и изменяемости более туманны в JavaScript, чем в некоторых других языках программирования. Тем не менее, вы много услышите о неизменяемости при чтении о функциональном программировании в JS. Важно знать, что эти термины означают в классическом понимании, и как они реализуются в JavaScript. Определения достаточно просты:

Неизменяемый

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

Изменяемый

Если объект изменяем, его значение может быть изменено после создания.

Реализация: неизменяемость и изменяемость в JavaScript

В JavaScript строки и числовые литералы реализованы неизменяемыми. Это легко понять, если рассмотреть, как мы работаем с ними:

Var str = "Hello!";
var anotherStr = str.substring(2);
// результат: str = "Hello!" (не изменена)
// результат: anotherStr = "llo!" (новая строка)

Используя метод.substring() на нашем Hello! , строка не изменяет исходную строку. Вместо этого она создает новую строку. Мы могли бы переопределить значение переменной str на что-то другое, но, как только мы создали нашу строку Hello! , она навсегда останется Hello! .

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

Var three = 1 + 2;
// результат: three = 3

Ни при каких обстоятельствах 1 + 2 не может стать чем-либо, кроме 3 .

Это демонстрирует, что в JavaScript присутствует реализация неизменяемости. Однако разработчики JS знают, что язык позволяет изменить многое. Например, объекты и массивы изменяемы. Рассмотрим следующий пример:

Var arr = ;
arr.push(4);
// результат: arr =

var obj = { greeting: "Hello" };
obj.name = "Jon";
// результат: obj = { greeting: "Hello", name: "Jon" }

В этих примерах исходные объекты изменены. Новые объекты не возвращаются.

Чтобы узнать больше об изменяемости в других языках, ознакомьтесь с Изменяемые и неизменяемые объекты .

На практике: изменяемость в JavaScript

Функциональное программирование в JavaScript хорошо развивается. Но по своей сущности JS - очень изменчивый язык, состоящий из множества парадигм. Ключевая особенность функционального программирования - неизменяемость. Другие функциональные языки выбросят ошибку, когда разработчик попытается изменить неизменяемый объект. Тогда как мы можем примирить врожденную изменяемость JS при написании функционального или функционального реактивного JS?

Когда мы говорим о функциональном программировании в JS, слово «неизменяемое» используется много, но разработчик обязан всегда держать ее в голове. Например, Redux полагается на одно неизменяемое дерево состояний. Однако сам JavaScript способен изменять объект состояния. Чтобы реализовать неизменяемое дерево состояний, нам нужно каждый раз при изменении состояния возвращать новый объект состояния .

Для демонстрации концепции observables давайте рассмотрим простой пример: изменение размера окна браузера. В этом контексте observables максимально понятны. Изменение размера окна браузера испускает поток событий в течение определенного периода времени (пока окно принимает нужный размер). Мы можем создать observable и подписаться на него, чтобы реагировать на поток событий изменения размера:

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