Селекторы class и id
В примере выше мы имеем 3 селектора – это p, div span, ul li. То есть весь наш файл стилей состоит из селекторов и их свойств. Наиболее удобно и наглядно, особенно новичкам, брать за селектор имя класса (class) тега или уникальный идентификатор (id) тега. Чтобы присвоить класс или идентификатор какому-либо тегу, мы должны указать их среди атрибутов этого тега. У конкретного тега может быть максимум 1 идентификатор и бесконечное число классов. Пример:
<div id="first">текст в первом диве</div>
<div class="second">текст во втором диве</div>
<div id="third" class="first second third">текст в третьем диве</div>
На что стоит обратить внимание:
Классы и идентификаторы можно присваивать любым (всем) тегам.
Каждый id уникален и не может повторяться в пределах одной страницы, в отличие от классов!
Один и тот же класс может быть присвоен любым тегам и может повторяться любое количество раз на странице.
Если мы хотим задать конкретному тегу несколько классов, мы просто задаём их через пробел.
Имена классов и идентификаторов могут совпадать, при этом кроме имени, ничего общего между ними не будет.
35.Basic syntax of CSS. Context-sensitive, adjacent and child selectors.
Иногда авторы могут понадобиться, чтобы селекторы, чтобы соответствовать элементы, которые появляются в определенном контексте, например, "только те элементы EM, которые содержатся элементом H1". В этих случаях, контекстные селекторы добавить специфику. Контекст определяется как отношения предок / потомка между элементами в дереве документа. Родственные отношения (один элемент за другим) обсуждаются в разделе, посвященном последовательных селекторов.
Контекстный селектор совпадает, если элемент является произвольным потомком некоторого предка элемента (то есть, это может быть любое поколение ниже элемента-предка). Контекстный селектор состоит из двух или более селекторов, разделенных пробелом.
Основная цель (CSS) языка каскадных таблиц стилей, чтобы позволить браузеру двигателя рисовать элементы страницы со специфическими особенностями, как цвета, позиционирование, или украшения. Синтаксис CSS отражает эту цель и ее основные строительные блоки:
Имущество, которое является идентификатором, который является удобной для восприятия человеком имя, которое определяет, какие функции считается.
Значение, которое описывает, как функция должна быть обработана двигателем. Каждое свойство имеет набор допустимых значений, определяемый формальной грамматики, а также смысловое значение, реализованный браузер на движке.
Селектор дочерних совпадает, если элемент является дочерним некоторого элемента. Селектор дочерних элементов состоит из двух или более селекторов, разделенных символом ">".
) Смежные селекторы одноуровневых
Прилегающие двойники селекторы имеют следующий синтаксис: E1 + E2, где E2 является субъектом селектора. Селектор совпадает, если E1 и E2 имеют одного общего предка в дереве документа и E1 непосредственно предшествует E2.
В некоторых контекстах смежные элементы генерируют объекты форматирования, чьи представление обрабатывается автоматически (например, сжатие вертикальных полей между смежными коробки). Селектор "+" позволяет авторам указать дополнительный стиль для смежных элементов.
36.Basic syntax of CSS. Selectors of tags.
Вначале пишется имя селектора, например, TABLE, это означает, что все стилевые параметры будут применяться к тегу <table>, затем идут фигурные скобки, в которых записывается стилевое свойство, а его значение указывается после двоеточия. Стилевые свойства разделяются между собой точкой с запятой, в конце этот символ можно опустить.
CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика. Например две разновидности оформления селекторов и их правил.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Заголовки</title>
<style>
h1 { color: #a6780a; font-weight: normal; }
h2 {
color: olive;
border-bottom: 2px solid black;
}
</style>
</head>
<body>
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
</body>
</html>
Многие теги различаются по своему действию в зависимости от того, какие атрибуты используются в них. Например, тег <input> может создать кнопку, текстовое поле и другие элементы формы только путем изменения значения типа атрибута. В то же время добавить правила стиля на селектор входов применяет стиле, в то же время все созданные с помощью этого тега элементов. Для того, чтобы гибко управлять стилем этих элементов, введенных в CSS атрибутов селекторов. Они позволяют установить стиль на наличие конкретного атрибута или значения тега. Рассмотрим некоторые типичные варианты использования таких селекторов. Простой селектор атрибута Он задает стиль для элемента, если установить определенный атрибут тега. Его значение в данном случае не имеет значения. Синтаксис такой селектор следующего приложения. [Атрибут] {Описание правил стиля} Селектор [атрибут] {Описание правил стиля} Стиль применяется к тегу, внутри которого добавляется указанный атрибут. Пространство между именем селектора и квадратными скобками не допускается.
37.Block CSS model.Frames, fields and indents.
Блоковая модель в CSS Давайте разберемся что значит эта самая блоковая модель, для этого вспомним немного html. Дело в том, что в html различают элементы блочные и строчные. Причем блочные элементы это как бы отдельная структурная единица, которая всегда отделяется абзацными отступами. Т.е. нельзя расположить два блочных элемента на одной строке. Примером блоков в html могут служить элементы H1-Н6, Р, DIV. А строчные элементы не создают как-бы отдельной структурной единицы, не отделяются абзацными отступами, и например два строчных элемента могут без проблем расположиться на одной строке. Примером могут быть элементы strong , EM , I. Технология стилей CSS также использует понятие блоков. Блоки в CSS представляют собой самостоятельную структурную единицу, имеющую форму прямоугольника. Каждый элемент в дереве элементов документа - самостоятельный блок. Из этого следует, что в CSS есть блоки, которые структурно отделены от остальных, а есть строчные блоки, которые могут находиться внутри структурных блоков. Но и те, и другие имеют одинаковую структуру: Каждый такой блок обязательно имеет информационную часть, или содержимое, которым может быть текст, изображение или другая информация. Эта часть блока называется его контентом или содержимым. Например, для элемента P содержимым блока является текст абзаца. Вокруг области контента могут быть пустые, не занятые содержимым области, называемые полями (margin). С точки зрения дизайна поля обеспечивают для содержимого блока эстетически более привлекательный вид. При наличии полей определенного размера текст не примыкает вплотную к границам блока. Можно провести аналогию с полями, устанавливаемыми при печати документов на бумаге. Если полей не было бы, то текст начинался бы прямо у края листа. При наличии полей имеются не занятые текстом области вдоль краев листа бумаги, и текст, напечатанный на листе, в этом случае читать приятнее и удобнее. Непосредственно за полями проходит граница блока (border), которая может иметь определенную толщину и стиль линий. Ширина блока может быть произвольной - от нулевой (граница в этом случае не видна) до произвольно заданной в единицах измерениях длины. Стиль линий может быть различным, от простой линии до объемных вариантов. Кроме того, граница может иметь произвольный цвет. Также блок может иметь отступы (padding), это дополнительное свободное пространство вокруг границы блока. Согласно спецификации CSS, поля, границы и отступы не входят в ширину блока. Таким образом, указывая ширину блока, вы задаете ширину лишь той части блока, которая отведена для содержимого.
Блоковая модель Все элементы в CSS являются прямоугольными блоками. Каждый такой блок имеет зону content, в которой располагается содержимое элемента (т.е. текст, изображения и т.д.). Вокруг зоны content могут располагаться необязательные зоны: padding, border и margin. Зона padding окружает зону content. Данная зона используется для задания величины отступа содержимого элемента (зона content) от его границы (зона border). Зона может быть разбита на четыре части, которые могут оформляться независимо от друг друга: padding-top, padding-right, padding-bottom, padding-left. Зона border окружает зону padding. Данная зона позволяет задать элементу границу произвольной ширины, стиля и цвета. Зона может быть разбита на: border-top, border-right, border-bottom, border-left. Зона margin окружает зону border. Данная зона позволяет задать величину внешнего отступа данного элемента от окружающих. Зона может быть разбита на: margin-top, margin-right, margin-bottom, margin-left. Пример использования блоковой модели Пример .ex1 { border:10px red solid; margin-left:50px; margin-right:10px; padding:15px; } .ex2 { border:5px brown solid; margin-top:30px; margin-left:250px; margin-right:70px; padding:15px; }
border-границы Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right. Синтаксис border: [border-width || border-style || border-color] | inherit Значения Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style. border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.
margin-поля Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента Если у элемента нет родителя, отступом будет расстояние от края элемента до края окна браузера с учетом того, что у самого окна по умолчанию тоже установлены отступы. Чтобы от них избавиться, следует устанавливать значение margin для селектора <body> равное нулю. Свойство margin позволяет задать величину отступа сразу для всех сторон элемента или определить ее только для указанных сторон. Синтаксис margin: [значение | проценты | auto] {1,4} | inherit Значения Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Величину отступов можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. auto Указывает, что размер отступов будет автоматически рассчитан браузером.
padding-отступы Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое Свойство padding позволяет задать величину поля сразу для всех сторон элемента или определить ее только для указанных сторон. Синтаксис padding: [значение | проценты] {1, 4} | inherit Значения Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом.
38.Block CSS model.Positioning of elements.
Блоковая модель Все элементы в CSS являются прямоугольными блоками. Каждый такой блок имеет зону content, в которой располагается содержимое элемента (т.е. текст, изображения и т.д.). Вокруг зоны content могут располагаться необязательные зоны: padding, border и margin. Зона padding окружает зону content. Данная зона используется для задания величины отступа содержимого элемента (зона content) от его границы (зона border). Зона может быть разбита на четыре части, которые могут оформляться независимо от друг друга: padding-top, padding-right, padding-bottom, padding-left. Зона border окружает зону padding. Данная зона позволяет задать элементу границу произвольной ширины, стиля и цвета. Зона может быть разбита на: border-top, border-right, border-bottom, border-left. Зона margin окружает зону border. Данная зона позволяет задать величину внешнего отступа данного элемента от окружающих. Зона может быть разбита на: margin-top, margin-right, margin-bottom, margin-left. Пример использования блоковой модели Пример .ex1 { border:10px red solid; margin-left:50px; margin-right:10px; padding:15px; } .ex2 { border:5px brown solid; margin-top:30px; margin-left:250px; margin-right:70px; padding:15px; }
Блоковая модель Все элементы в CSS являются прямоугольными блоками. Каждый такой блок имеет зону content, в которой располагается содержимое элемента (т.е. текст, изображения и т.д.). Вокруг зоны content могут располагаться необязательные зоны: padding, border и margin. Зона padding окружает зону content. Данная зона используется для задания величины отступа содержимого элемента (зона content) от его границы (зона border). Зона может быть разбита на четыре части, которые могут оформляться независимо от друг друга: padding-top, padding-right, padding-bottom, padding-left. Зона border окружает зону padding. Данная зона позволяет задать элементу границу произвольной ширины, стиля и цвета. Зона может быть разбита на: border-top, border-right, border-bottom, border-left. Зона margin окружает зону border. Данная зона позволяет задать величину внешнего отступа данного элемента от окружающих. Зона может быть разбита на: margin-top, margin-right, margin-bottom, margin-left. Пример использования блоковой модели Пример .ex1 { border:10px red solid; margin-left:50px; margin-right:10px; padding:15px; } .ex2 { border:5px brown solid; margin-top:30px; margin-left:250px; margin-right:70px; padding:15px; }
Блоковая модель в CSS Давайте разберемся что значит эта самая блоковая модель, для этого вспомним немного html. Дело в том, что в html различают элементы блочные и строчные. Причем блочные элементы это как бы отдельная структурная единица, которая всегда отделяется абзацными отступами. Т.е. нельзя расположить два блочных элемента на одной строке. Примером блоков в html могут служить элементы H1-Н6, Р, DIV. А строчные элементы не создают как-бы отдельной структурной единицы, не отделяются абзацными отступами, и например два строчных элемента могут без проблем расположиться на одной строке. Примером могут быть элементы strong , EM , I. Технология стилей CSS также использует понятие блоков. Блоки в CSS представляют собой самостоятельную структурную единицу, имеющую форму прямоугольника. Каждый элемент в дереве элементов документа - самостоятельный блок. Из этого следует, что в CSS есть блоки, которые структурно отделены от остальных, а есть строчные блоки, которые могут находиться внутри структурных блоков. Но и те, и другие имеют одинаковую структуру: Каждый такой блок обязательно имеет информационную часть, или содержимое, которым может быть текст, изображение или другая информация. Эта часть блока называется его контентом или содержимым. Например, для элемента P содержимым блока является текст абзаца. Вокруг области контента могут быть пустые, не занятые содержимым области, называемые полями (margin). С точки зрения дизайна поля обеспечивают для содержимого блока эстетически более привлекательный вид. При наличии полей определенного размера текст не примыкает вплотную к границам блока. Можно провести аналогию с полями, устанавливаемыми при печати документов на бумаге. Если полей не было бы, то текст начинался бы прямо у края листа. При наличии полей имеются не занятые текстом области вдоль краев листа бумаги, и текст, напечатанный на листе, в этом случае читать приятнее и удобнее. Непосредственно за полями проходит граница блока (border), которая может иметь определенную толщину и стиль линий. Ширина блока может быть произвольной - от нулевой (граница в этом случае не видна) до произвольно заданной в единицах измерениях длины. Стиль линий может быть различным, от простой линии до объемных вариантов. Кроме того, граница может иметь произвольный цвет. Также блок может иметь отступы (padding), это дополнительное свободное пространство вокруг границы блока. Согласно спецификации CSS, поля, границы и отступы не входят в ширину блока. Таким образом, указывая ширину блока, вы задаете ширину лишь той части блока, которая отведена для содержимого.
Позиционированием называется положение элемента в системе координат. Различают четыре типа позиционирования: нормальное, абсолютное, фиксированное и относительное. В зависимости от типа, который устанавливается через свойство position, изменяется и система координат. Благодаря комбинации свойств position, left, top, right и bottom элемент можно накладывать один на другой, выводить в точке с определёнными координатами, фиксировать в указанном месте, определить положение одного элемента относительно другого и др. Подобно другим свойствам CSS управление позиционированием доступно через скрипты. Таким образом, можно динамически изменять положение элементов без перезагрузки страницы, создавая анимацию и различные эффекты.
39.Block CSS model.Multiple layers, alignment and flow.
Блоковая модель Все элементы в CSS являются прямоугольными блоками. Каждый такой блок имеет зону content, в которой располагается содержимое элемента (т.е. текст, изображения и т.д.). Вокруг зоны content могут располагаться необязательные зоны: padding, border и margin. Зона padding окружает зону content. Данная зона используется для задания величины отступа содержимого элемента (зона content) от его границы (зона border). Зона может быть разбита на четыре части, которые могут оформляться независимо от друг друга: padding-top, padding-right, padding-bottom, padding-left. Зона border окружает зону padding. Данная зона позволяет задать элементу границу произвольной ширины, стиля и цвета. Зона может быть разбита на: border-top, border-right, border-bottom, border-left. Зона margin окружает зону border. Данная зона позволяет задать величину внешнего отступа данного элемента от окружающих. Зона может быть разбита на: margin-top, margin-right, margin-bottom, margin-left. Пример использования блоковой модели Пример .ex1 { border:10px red solid; margin-left:50px; margin-right:10px; padding:15px; } .ex2 { border:5px brown solid; margin-top:30px; margin-left:250px; margin-right:70px; padding:15px; } Блоковая модель в CSS Давайте разберемся что значит эта самая блоковая модель, для этого вспомним немного html. Дело в том, что в html различают элементы блочные и строчные. Причем блочные элементы это как бы отдельная структурная единица, которая всегда отделяется абзацными отступами. Т.е. нельзя расположить два блочных элемента на одной строке. Примером блоков в html могут служить элементы H1-Н6, Р, DIV. А строчные элементы не создают как-бы отдельной структурной единицы, не отделяются абзацными отступами, и например два строчных элемента могут без проблем расположиться на одной строке. Примером могут быть элементы strong , EM , I. Технология стилей CSS также использует понятие блоков. Блоки в CSS представляют собой самостоятельную структурную единицу, имеющую форму прямоугольника. Каждый элемент в дереве элементов документа - самостоятельный блок. Из этого следует, что в CSS есть блоки, которые структурно отделены от остальных, а есть строчные блоки, которые могут находиться внутри структурных блоков. Но и те, и другие имеют одинаковую структуру: Каждый такой блок обязательно имеет информационную часть, или содержимое, которым может быть текст, изображение или другая информация. Эта часть блока называется его контентом или содержимым. Например, для элемента P содержимым блока является текст абзаца. Вокруг области контента могут быть пустые, не занятые содержимым области, называемые полями (margin). С точки зрения дизайна поля обеспечивают для содержимого блока эстетически более привлекательный вид. При наличии полей определенного размера текст не примыкает вплотную к границам блока. Можно провести аналогию с полями, устанавливаемыми при печати документов на бумаге. Если полей не было бы, то текст начинался бы прямо у края листа. При наличии полей имеются не занятые текстом области вдоль краев листа бумаги, и текст, напечатанный на листе, в этом случае читать приятнее и удобнее. Непосредственно за полями проходит граница блока (border), которая может иметь определенную толщину и стиль линий. Ширина блока может быть произвольной - от нулевой (граница в этом случае не видна) до произвольно заданной в единицах измерениях длины. Стиль линий может быть различным, от простой линии до объемных вариантов. Кроме того, граница может иметь произвольный цвет. Также блок может иметь отступы (padding), это дополнительное свободное пространство вокруг границы блока. Согласно спецификации CSS, поля, границы и отступы не входят в ширину блока. Таким образом, указывая ширину блока, вы задаете ширину лишь той части блока, которая отведена для содержимого.
Наслоение с помощью z-index (Слои) CSS оперирует в трёх измерениях - высота, ширина и глубина. Мы работали в двух измерениях на протяжении всех предшествующих уроков. В этом уроке мы научимся создавать слои/layers. Коротко говоря - упорядочивать элементы так, чтобы они перекрывались. Для этого вы можете присвоитm каждому элементу номер (z-index). Элемент с бóльшим номером перекрывает элемент с меньшим номером. Описание Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative. Синтаксис z-index: число | auto | inherit Значения В качестве значения используются целые числа (положительные, отрицательные и ноль). Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При равном значении z-index, на переднем плане находится тот элемент, который в коде HTML описан ниже. Хотя спецификация и разрешает использовать отрицательные значения z-index, но такие элементы не отображаются в браузере Firefox до версии 2.0 включительно. Кроме числовых значений применяется auto — порядок элементов в этом случае строится автоматически, исходя из их положения в коде HTML и принадлежности к родителю, поскольку дочерние элементы имеют тот же номер, что их родительский элемент.
40.Scenarios of client side. Embedding of scenarios of client side in the document html. JavaScript language.Variables and types.
Обработка событий Раньше процесс установки обработчиков событий для узлов дерева документа был довольно непоследовательным. Библиотеки вроде jQuery играли бесценную роль в абстрагировании от связанных с ним странностей. Чем больше мы приближаемся к соответствию стандартам со стороны браузерных окружений, тем более безопасным становится использование API из официальной спецификации. Чтобы не усложнять, я расскажу как можно управлять событиями именно в современном вебе. Если вы пишите код на JavaScript для Internet Explorer (IE) 8 или старше, рекомендую для управления обработкой событий использовать полифил или фреймворк (такой как jQuery).
event-name (название-события, строка). Это имя или тип события, которое вы хотите обработать. Им может быть любое стандартное событие DOM (click, mousedown , touchstart, transitionEnd и т.д.) или же имя вашего пользовательского события ( о пользовательских событиях мы поговорим позже). callback (обработчик, функция). Эта функция вызывается когда происходит событие. Объект event, содержащий информацию о событии, присваивается в качестве первого параметра.
Язык JavaScript Эта часть позволит вам изучить JavaScript с нуля или упорядочить и дополнить существующие знания. Мы будем использовать браузер в качестве окружения, но основное внимание будет уделяться именно самому языку JavaScript. JavaScript изначально создавался для того, чтобы сделать web-странички «живыми». Программы на этом языке называются скриптами. В браузере они подключаются напрямую к HTML и, как только загружается страничка – тут же выполняются. Программы на JavaScript – обычный текст. Они не требуют какой-то специальной подготовки.
Перед тем как использовать JavaScript, его необходимо добавить в HTML-документ. Сделать это можно с помощью элемента <script> двумя способами: Определить встроенный сценарий, который располагается непосредственно между парой тегов <script> и </script> Подключить внешний файл с JavaScript-кодом Примечание: элемент <script> может быть расположен в любом месте внутри элемента <head> и/или внутри элемента <body> и использоваться любое количество раз. Встроенный сценарий JavaScript-код можно вставить непосредственно внутри элемента <script>. Сценарий, расположенный непосредственно внутри элемента, называется встроенным.
</html> Внешний сценарий В HTML-документ можно также добавить JavaScript-код, расположенный во внешнем файле. Сценарий, расположенный внутри внешнего файла, называется внешним. Подключение внешнего файла выполняется с помощью атрибута src тега <script> следующим образом: Создадим папку и назовём её к примеру example, внутри этой папки создаём текстовый файл с расширением .js, например myscript.js (имя файла может быть любым), открываем его и добавляем строку JavaScript-кода: 1 alert("Добро пожаловать!"); Обратите внимание, что внутри внешнего файла JavaScript-код не нужно располагать между тегами <script> и </script>. Сохраняем изменения в файле и закрываем его. Теперь создадим ещё один файл и назовём его myscript2.js, открываем его и добавляем следующую строку JavaScript-кода: 1 document.write("<h1>Это моя домашняя страница</h1>"); Сохраняем изменения в файле и закрываем его. И последнее, что нам осталось сделать, это создать HTML-документ, в который будут подключены наши созданные два файлика с внешним сценарием. В той же папке, где хранятся наши два сценария (example), создаём HTML-документ и называем его к примеру test.html. Теперь c помощью элемента <script> подключаем два внешних файла c JavaScript
41.Classes in the javaScript language. Properties and methods. Static properties and methods. Static classes.
Классы В современном JavaScript появился новый, «более красивый» синтаксис для классов. Новая конструкция class – удобный «синтаксический сахар» для задания конструктора вместе с прототипом. Class Синтаксис для классов выглядит так: class Название [extends Родитель] { constructor методы } Например: 'use strict'; class User {constructor(name) { this.name = name; } sayHi() {alert(this.name); } } let user = new User("Вася"); user.sayHi(); // Вася Функция constructor запускается при создании new User, остальные методы записываются в User.prototype. Статические и фабричные методы Методы и свойства, которые не привязаны к конкретному экземпляру объекта, называют «статическими». Их записывают прямо в саму функцию-конструктор. Статические свойства В коде ниже используются статические свойства Article.count и Article.DEFAULT_FORMAT: function Article() { Article.count++; } Article.count = 0; // статическое свойство-переменная Article.DEFAULT_FORMAT = "html"; // статическое свойство-константа Они хранят данные, специфичные не для одного объекта, а для всех статей целиком. Как правило, это чаще константы, такие как формат «по умолчанию» Article.DEFAULT_FORMAT. Статические методы С примерами статических методов мы уже знакомы: это встроенные методы String.fromCharCode, Date.parse. Создадим для Article статический метод Article.showCount(): function Article() { Article.count++; //... } Article.count = 0; Article.showCount = function() { alert( this.count ); // (1) } // использование new Article(); new Article(); Article.showCount(); // (2) Здесь Article.count – статическое свойство, а Article.showCount – статический метод. Обратим внимание на использование this в примере выше. Несмотря на то, что переменная и метод – статические, он всё ещё полезен. В строке (1) он равен Article.
42.Objects in the JavaScript language.Object hierarchy. Methods of creation of objects in javaScript.Desingners. Arrays.
В JavaScript объекты король. Если вы понимаете, объекты, вы понимаете JavaScript. В JavaScript, почти "все" является объектом. Booleans могут быть объектами (если они определены с новым ключевым словом). Числа могут быть объектами (если они определены с новым ключевым словом) .Строки могут быть объектами (если они определены с новым ключевым словом) .Даты всегда объекты Математика всегда объекты. Регулярные выражения всегда объекты .Массивы всегда объекты Функции всегда объекты. Объекты всегда объекты .Все значения JavaScript, за исключением примитивов, являются объектами. Иерархия объектов JavaScript Многие объекты JavaScript содержатся друг в друге.
Объекты JavaScript является контейнером для содержащегося в ней объекта отношения, а не отношения класса и подкласса. Свойства не наследуется от одного типа объекта к другому. Есть два основных типа объектов JavaScript. Языковые объекты - объекты предоставляются на языке и не зависят от других объектов. Навигатор - объекты, предоставляемые браузером клиента. Эти объекты находятся все суб объекты к объекту навигатора. Кроме того, объекты те, которые создаются программистом. Методы объекта Методы действия, которые могут быть выполнены на объектах. Свойства объекта могут быть как примитивные значения, другие объекты и функции. Метод объекта является свойство объекта, содержащий определение функции. Объекты JavaScript являются контейнерами для названных значений, называемых свойств и методов. Вы узнаете больше о методах в следующих главах. Создание объекта JavaScript С помощью JavaScript, вы можете определять и создавать свои собственные объекты. Существуют различные способы создания новых объектов: Определить и создать один объект, используя литерал объекта. Определить и создать один объект, с ключевым словом New. Определить конструктор объекта, а затем создавать объекты построенного типа. В ECMAScript 5, объект также может быть создан с помощью функции Object.create (). JavaScript массивы используются для хранения нескольких значений в одной переменной.
Например var cars = [ "Saab", "Вольво", "БМВ"]; Попробуй сам "
Что такое массив?
Массив является специальная переменная, которая может содержать более одного значения одновременно.
Если у вас есть список элементов (список имен автомобиля, например), хранение автомобилей в отдельных переменных может выглядеть следующим образом:
var автомобиль1 = "Saab";
var car2 = "Вольво";
var car3 = "BMW"; Однако, что если вы хотите, чтобы перебрать автомобилей и найти конкретный один? А что, если бы вы не 3 машины, а 300?
Решение представляет собой массив!
Массив может содержать множество значений под одним именем, и вы можете получить доступ к значениям, обращаясь к номеру индекса.
43.Classes frame and window. Their properties and methods. Creation of new windows.
Всплывающее окно («попап» – от англ. Popup window) – один из старейших способов показать пользователю ещё один документ.
В этой статье мы рассмотрим открытие окон и ряд тонких моментов, которые с этим связаны.
Простейший пример:
window.open("http://ya.ru");
…При запуске откроется новое окно с указанным URL.
Большинство браузеров по умолчанию создают новую вкладку вместо отдельного окна, но чуть далее мы увидим, что можно и «заказать» именно окно.
Полный синтаксис window.open
Полный синтаксис:
win = window.open(url, name, params)
Функция возвращает ссылку на объект window нового окна, либо null, если окно было заблокировано браузером.
Параметры:
url
URL для загрузки в новое окно.
name
Имя нового окна. Может быть использовано в параметре target в формах. Если позднее вызвать window.open() с тем же именем, то браузеры (кроме IE) заменяют существующее окно на новое.
params
Строка с конфигурацией для нового окна. Состоит из параметров, перечисленных через запятую. Пробелов в ней быть не должно.
Значения параметров params.
Настройки расположения окна:
left/top (число)
Координаты верхнего левого угла относительно экрана. Ограничение: новое окно не может быть позиционированно за пределами экрана.
width/height (число)
Ширина/высота нового окна. Минимальные значения ограничены, так что невозможно создать невидимое окно с нулевыми размерами.
Если координаты и размеры не указаны, то обычно браузер открывает не окно, а новую вкладку.
Свойства окна:
menubar (yes/no)
Скрыть или показать строку меню браузера.
toolbar (yes/no)
Показать или скрыть панель навигации браузера (кнопки назад, вперед, обновить страницу и остальные) в новом окне.
location (yes/no)
Показать/скрыть поле URL-адреса в новом окне. По умолчанию Firefox и IE не позволяют скрывать строку адреса.
status (yes/no)
Показать или скрыть строку состояния. С другой стороны, браузер может в принудительном порядке показать строку состояния.
resizable (yes/no)
Позволяет отключить возможность изменять размеры нового окна. Значение no обычно неудобно посетителям.
scrollbars (yes/no)
Разрешает убрать полосы прокрутки для нового окна. Значение no обычно неудобно посетителям.
Всплывающее окно открывается с помощью вызова window.open(url, name, params).
Метод window.open возвращает ссылку на новое окно или null, если окно было заблокировано.
Современные браузеры блокируют окна, если window.open вызвано не в результате действия посетителя.
Обычно открывается вкладка, но если заданы размеры и позиция – то именно окно.
Новое окно имеет ссылку на родительское в window.opener.
Окна могут общаться между собой как угодно, если они из одного источника. Иначе действуют жёсткие ограничения безопасности.
Всплывающие окна используются нечасто. Ведь загрузить новую информацию можно динамически, с помощью технологии AJAX, а показать – в элементе <div>, расположенным над страницей (z-index). Ещё одна альтернатива – тег <iframe>.
Но в некоторых случаях всплывающие окна бывают очень даже полезны. Например, отдельное окно сервиса онлайн-консультаций. Посетитель может ходить по сайту в основном окне, а общаться в чате – во вспомогательном.
Если вы хотите использовать всплывающее окно, предупредите посетителя об этом, так же и при использовании target="_blank" в ссылках или формах. Иконка открывающегося окошка на ссылке поможет посетителю понять, что происходит и не потерять оба окна из поля зрения.
<html> <script language="JavaScript"> window.onresize = function () { alert('Размер окна был изменен!'); } </script> <body> </body> </html>
44.Class document. Its properties and methods. Formations of contents of the document. The scenarios JavaScript which aren't creating contents.
Метод document.write – один из наиболее древних методов добавления текста к документу.
У него есть существенные ограничения, поэтому он используется редко, но по своей сути он совершенно уникален и иногда, хоть и редко, может быть полезен.
Как работает document.write
Метод document.write(str) работает только пока HTML-страница находится в процессе загрузки. Он дописывает текст в текущее место HTML ещё до того, как браузер построит из него DOM.
HTML-документ ниже будет содержать 1 2 3.
<body>
1
<script>
document.write(2);
</script>
3
</body>
Нет никаких ограничений на содержимое document.write.
Строка просто пишется в HTML-документ без проверки структуры тегов, как будто она всегда там была.
Например:
<script>
document.write('<style> td { color: #F40 } </style>');
</script>
<table>
<tr>
<script>
document.write('<td>')
</script>
Текст внутри TD.
<script>
document.write('</td>')
</script>
</tr>
</table>
Метод document.write (или writeln) пишет текст прямо в HTML, как будто он там всегда был.
Этот метод редко используется, так как работает только из скриптов, выполняемых в процессе загрузки страницы.
Запуск после загрузки приведёт к очистке документа.
Метод document.write очень быстр.
В отличие от установки innerHTML и DOM-методов, он не изменяет существующий документ, а работает на стадии текста, до того как DOM-структура сформирована.
Иногда document.write используют для добавления скриптов с динамическим URL.
Рекомендуется избегать этого, так как браузер остановится на месте добавления скрипта и будет ждать его загрузки. Если скрипт будет тормозить, то и страница – тоже.
Поэтому желательно подключать внешние скрипты, используя вставку скрипта через DOM или async/defer. Современные системы рекламы и статистики так и делают.
*******Объект Document особенно важен при разработке сценариев. Приведенная здесь схема иерархии объектов включает только основные свойства этого объекта, определенные в базовой объектной модели документа (Document Object Model Level 0 - DOM0). На поддержку этих свойств можно смело рассчитывать при использовании любого относительно современного браузера. Более поздние стандарты DOM1 и DOM2 представляют документ HTML в виде дерева и дают доступ ко всем элементам, несравненно расширяя возможности разработчика. Однако, в этом разделе рассмотрим лишь базовые возможности.
Свойства объекта Document
Начнем со скалярных свойств, общих для всех браузеров. Большинство их доступны как для чтения, так и для изменения. Отметим, что значения свойств, связанных с цветами текста, фона и гиперссылок, можно изменять динамически лишь в тех случаях, когда не заданы соответствующие описания CSS, которые имеют больший приоритет. Все значения свойств - строковые.
title - текст заголовка документа (содержимое элемента title);
fgColor и bgColor - цвет текста и цвет фона документа;
linkColor, vLinkColor, aLinkColor - цвета непосещенных, посещенных и активных гиперссылок;
lastModified (только для чтения) - дата изменения документа;
referrer (только для чтения) - URL документа, ссылка в котором привела к загрузке текущего документа;
URL (и устаревшее location) - URL документа.
Более интересны и полезны для разработчика свойства-массивы объекта Document. Все они, естественно, имеют свойство length (количество элементов в массиве). Большинство свойств, специфичных для объектов, хранящихся в этих массивах, ассоциируются с атрибутами соответствующих элементов HTML. Вот лишь некоторые из них, понятные без объяснений любому, кто знает HTML:
объект Form имеет свойства name, action, method;
объект Anchor имеет единственное свойство name;
объект Link имеет свойства href, target;
объект Image имеет свойства src, width, height.
К объектам документа, хранящимся в массивах images, forms и applets, а также к элементам форм можно обращаться и по имени, если в начальном теге соответствующего элемента HTML задан атрибу name. Пусть, например, в документе описано изображение <img src="images/cat.jpg" id="cat_id" name="cat_name"> и оно является n-ым изображением, встречающимся в документе. К этому элементу img можно обратиться по крайней мере следующими способами (см. раздел Идентификация элементов документа):
Как к элементу массива images , используя его индекс (индексация начинается с 0): window.document.images[n-1]
Как к элементу массива images , используя значение атрибута name как ключ массива: window.document.images['cat_name']
Используя значение атрибута name как свойство объекта : window.document.cat_name
Используя значение атрибута id и свойство getElementById: window.document.getElementById('cat_id')
Методы объекта Document
open() - открывает новый документ; при этом для текущего документа все его содержимое удаляется.
close() - закрывает ранее открытый документ, фиксируя внесенные изменения.
clear() - очищает содержимое документа.
write() - записывает в документ заданную в качестве аргумента строку.
writeln() - аналогичен предыдущему, но выведенная в документ строка заканчивается символом перевода строки.
Методы write() и writeln() весьма полезны и часто используются для динамического формирования содержимого документа. Вот как, например, можно включить в документ дату его последнего изменения:
<script type="text/JavaScript"> window.document.write(document.lastModified); </script>
Получится (для того документа, который вы сейчас видите): 12/19/2009 03:37:08
Обратите внимание на то, что метод write() для текущего документа может применяться только в сценарии, формирующем документ на стадии его загрузки (то есть он может присутствовать в элементах script, включенных в тело документа body). Любые попытки выполнить этот метод для текущего документа в обработчике некоторого события приведет к очистке содержимого документа. А вот в случае реализации фреймовой структуры или наличия в документе встроенных фреймов iframe, этот метод можно применить и в обработчике события для модификации содержимого документов дочерних фреймов. При этом метод write() добавляет контент в указанный фрейм, не обнуляя его содержимое. При этом к фрейму следует обращаться по данному ему имени.
Например, если в текущем документе определен некий встроенный фрейм с именем "child":
<iframe src="empty.htm" name="child"></iframe>
в него можно добавить новый контент, задав в обработчике некоторого события инструкцию:
child.document.write('... текст с соответствующими тегами ...')
45.Javascript language, scopes, structure, versions of language. Development of the elementary programs in the Javascript language
Язык JavaScript – это бесплатный язык сценариев, исполняемых на стороне клиента, который позволяет создавать интерактивные HTML-страницы. "На стороне клиента" (client-side) означает, что JavaScript запускается в Web-браузере и не используется на стороне сервера. Сценарии на стороне клиента позволяют пользователю интерактивно взаимодействовать с Web-страницей после того, как она была обработана сервером и загружена Web-браузером. Например, в GoogleMaps применение языка JavaScript дает пользователям возможность взаимодействовать с картой, перемещать её, приближать и удалять и т.д. Без JavaScript Web-страницу приходилось бы обновлять при каждом взаимодействии с пользователем, если, конечно, не использовать такие плагины, как Adobe Flash или Microsoft® Silverlight. Язык JavaScript не требует плагинов.
Так как JavaScript обеспечивает взаимодействие пользователя с Web-страницей после её загрузки, разработчики обычно используют его для решения следующих задач:
динамическое добавление, редактирование и удаление HTML-элементов и их значений;
проверка содержимого web-форм перед отправкой на сервер;
создание на компьютере клиента cookie-файлов для сохранения и получения данных при последующих визитах.
Перед началом изучения языка следует познакомиться с его основными принципами:
чтобы добавить JavaScript-код в HTML-файл, его необходимо поместить внутрь тегов script и добавить в файл атрибут text/javascript (см. листинг 1);
все выражения в JavaScript оканчиваются точкой с запятой;
язык чувствителен к регистру символов;
имена всех переменных должны начинаться с буквы или символа подчеркивания;
можно использовать комментарии, чтобы выделить определенные строки в сценарии; комментарии должны начинаться с двойного прямого слеша (//), за которым следует текст комментария;
комментарии также можно использовать для отключения фрагментов сценария; для отключения нескольких строк можно использовать конструкцию /* фрагмент кода */; любой код внутри /**/ не будет запускаться во время выполнения.
Перед тем, как вы планируете изучить новую технологию, полезно ознакомиться с её развитием и перспективами. Здесь в JavaScript всё более чем хорошо.
HTML 5
HTML 5 – эволюция стандарта HTML, добавляющая новые теги и, что более важно, ряд новых возможностей браузерам.
Вот несколько примеров:
Чтение/запись файлов на диск (в специальной «песочнице», то есть не любые).
Встроенная в браузер база данных, которая позволяет хранить данные на компьютере пользователя.
Многозадачность с одновременным использованием нескольких ядер процессора.
Проигрывание видео/аудио, без Flash.
2D и 3D-рисование с аппаратной поддержкой, как в современных играх.
Многие возможности HTML5 всё ещё в разработке, но браузеры постепенно начинают их поддерживать.
Тенденция: JavaScript становится всё более и более мощным и возможности браузера растут в сторону десктопных приложений.
ECMAScript 6
Сам язык JavaScript улучшается. Современный стандарт ECMAScript 5 включает в себя новые возможности для разработки, ECMAScript 6 будет шагом вперёд в улучшении синтаксиса языка.
Современные браузеры улучшают свои движки, чтобы увеличить скорость исполнения JavaScript, исправляют баги и стараются следовать стандартам.
Тенденция: JavaScript становится всё быстрее и стабильнее, в язык добавляются новые возможности.
Очень важно то, что новые стандарты HTML5 и ECMAScript сохраняют максимальную совместимость с предыдущими версиями. Это позволяет избежать неприятностей с уже существующими приложениями.
Впрочем, небольшая проблема с «супер-современными штучками» всё же есть. Иногда браузеры стараются включить новые возможности, которые ещё не полностью описаны в стандарте, но настолько интересны, что разработчики просто не могут ждать.
…Однако, со временем стандарт меняется и браузерам приходится подстраиваться к нему, что может привести к ошибкам в уже написанном, основанном на старой реализации, JavaScript-коде. Поэтому следует дважды подумать перед тем, как применять на практике такие «супер-новые» решения.
При этом все браузеры сходятся к стандарту, и различий между ними уже гораздо меньше, чем всего лишь несколько лет назад.
46.Values, variables, expressions and operations in Javascript
Выражения в JavaScript, как и в других языках программирования, представляют собой комбинации переменных, констант и операций, дающие осмысленный результат. Этот результат может быть числом, текстовой строкой, логическим значением или объектом. Соответственно все выражения JavaScript подразделяются на арифметические, строковые, логические и объектные.
Существует два типа выражений: те, которые присваивают значение некоторой переменной (например, x = 2 + 3), и те, которые просто имеют некое значение (например, 2 + 3). Первый тип выражений называется операциями присваивания.
Все операции в JavaScript подразделяются на следующие:
операции сравнения;
арифметические операции;
битовые операции;
логические операции;
строковые операции;
операции присваивания;
прочие операции.
Операции сравнения сравнивают два операнда и возвращают логическое значение, означающее результат этого сравнения. Строки сравниваются в лексикографическом порядке в кодировке Unicode. Если типы операндов различны, то делается попытка преобразовать их к одному типу. При этом:
Операции "больше", "меньше", "не больше" и "не меньше" сначала пытаются преобразовать операнды в числа, а, если это невозможно, то в строки, а затем производят их сравнение.
Операции "равно" и "не равно" пытаются преобразовать операнды в строки, затем в числа и в логические значения, а затем производят их сравнение.
Операции "тождественно" и "не тождественно" не преобразовывают типы данных: два операнда считаются тождественно равными, если они имеют одинаковые типы и одинаковые значения.
Примеры:
var x = "3";
a = x == 3; // a равно true
b = x === 3; // b равно false (разные типы)
Арифметические операции применяются к числовым операндам и возвращают числовое значение, означающее результат операции. Если типы операндов различны, то делается попытка преобразовать их к числовому типу. При этом:
Операция "сложение" выполняется только тогда, когда оба операнда являются числами или логическими значениями. Если хотя бы один операнд является строкой, то производится конкатенация строк.
Остальные операции преобразуют операнды в числа, а затем выполняют операцию.
Операции "инкремент" и "декремент" применяются только к переменным.
Примеры:
var i, j, k;
i = 19 % 6.8; // i равно 5
k = 2;
j = k++; // j равно 2, k равно 3
j = ++k; // j и k равны 4
Битовые операции применяются к числовым операндам, представленным как двоичные числа (т. е. как цепочки из 32 битов), и возвращают числовое значение, означающее результат операции. Перед выполнением операции операнды преобразуются в целые числа, а результат операции преобразуется в Number.
Примеры:
var i, j, k;
i = 15; j = 9;
k = i & j; // k равно 9 (1111 & 1001 = 1001)
k = i | j; // k равно 15 (1111 | 1001 = 1111)
k = i ^ j; // k равно 6 (1111 ^ 1001 = 0110)
Операция instanceof возвращает true, если данный объект относится к данному классу объектов.
Операция new создает новый объект путем вызова конструктора объектов.
Операция this возвращает указатель на текущий объект.
Операция typeof возвращает строку, содержащую информацию о типе операнда.
Операция void вычисляет значение выражения и возвращает undefined.
47.Operators in Javascript. Cyclic and conditional statements, operators of operation with objects, operators of processing of exceptional situations.
JavaScript поддерживает компактный набор операторов, которые могут использоваться для создания интерактивных Web-страниц. В данной главе дан обзор этих операторов.
В этой главе имеются следующие разделы, предоставляющие краткий обзор каждого оператора:
Блок Операторов: { }
Условные Операторы: if...else и switch
Операторы Циклов: for, while, do...while, label, break и continue (label сам по себе не является оператором цикла, но часто используется с указанными операторами)
Операторы Манипуляции Объектами: for...in и with
Комментарии
Операторы Обработки Исключений: try...catch и throw
Условный оператор является набором команд, которые выполняются, если специфицированное условие - true. JavaScript поддерживает два условных оператора: if...else и switch.
Оператор if...else
Этот оператор используется для выполнения определённых операторов, если логическое условие true; используйте необязательный блок else для выполнения других операторов, если условие false. Оператор if выглядит так:
if (condition) {
statements1
}
[else {
statements2
} ]
Условие может быть любым выражением JavaScript, вычисляемым в true или false. Выполняемые операторы могут быть любыми операторами JavaScript, включая вложенные операторы if. Если Вам нужно выполнить более одного оператора после операторов if или else, Вы обязаны заключить эти выполняемые операторы в фигурные скобки {}.
Оператор switch позволяет программе вычислять выражение и пытается сопоставить значение выражения значению в метке case. Если совпадение найдено, программа выполняет ассоциированный оператор. Оператор switch выглядит так:
switch (expression){ case label : statement; break; case label : statement; break; ... default : statement; }
Программа сначала ищет label, совпадающий со значением expression, а затем выполняет ассоциированный statement/оператор. Если совпадающий label не найден, программа ищет необязательный default statement/оператор по умолчанию и, если он найден, выполняет ассоциированный оператор. Если default statement не найден, программа продолжает выполнять оператор, следующий после конца оператора switch.
Цикл/loop это набор операторов, который выполняется несколько раз, пока выполняется специфицированное условие. JavaScript поддерживает циклические операторы for, do...while и while, а также label (label сам по себе не является оператором цикла, но часто используется с указанными операторами). Кроме того, Вы можете использовать операторы break и continue внутри операторов циклов.
Ещё один оператор цикла, for...in, также выполняет свои операторы циклически, но используется для работы с объектами. См. Операторы Манипуляции Объектами.
Оператор for
Цикл for повторяется до тех пор, пока специфицированное значение false. Цикл JavaScript for похож на циклы for Java и C. Оператор for выглядит так:
for ([initialExpression]; [condition]; [incrementExpression]) {
statements
}
Оператор do...while повторяется, пока специфицированное выражение - false. Оператор do...while выглядит так:
do {
statement
} while (condition)
statement выполняется один раз перед проверкой условия/condition. Если condition - true, оператор выполняется снова. В конце каждого выполнения condition проверяется. Если condition - false, выполнение останавливается и управление передаётся оператору после do...while.
Пример.
В этом примере цикл do итерируется минимум один раз и повторяет итерации, пока i меньше 5.
do {
i+=1;
document.write(i);
} while (i<5);
Используйте оператор break для прерывания цикла switch или оператора с меткой label.
Если Вы используете break без label, он немедленно прерывает ближайший содержащий while, do-while, for или switch и передаёт управление следующему оператору.
Если Вы используете break с label, он прерывает специфицированный помеченный оператор.