Создание функций
Существует 2 вида функций – именованные и неименованные. Основное отличие в результате их работы в том, что именованная функция видна везде, а анонимная – только после объявления:
Именованные (FunctionDeclaration)
function имя (параметры) {...}
Пример.
var a = sum(2,2)
function sum(x,y) {
return x+y
}
Анонимные (FunctionExpression)
var имя = function(параметры) {…}
Плохой пример. Будет ошибка, т.к sum еще не существует.
var a = sum(2,2)
var sum = function(x,y) {
return x+y
}
Объекты
Javascript – объектный язык. В нем все является объектами. Строки, числа, функции и массивы – все это объекты со своими методами и свойствами. Объекты создаются функциями-конструкторами при помощи директивы new. Практически всё в javascript делается при помощи вызова методов различных объектов.
Методы объектов вызываются через точку. Например, у строки String есть метод toUpperCase, возвращающий строку в верхнем регистре:
name = "Vasya"
alert( name.toUpperCase() )
Или даже так:
alert( "Vasya".toUpperCase() )
DOM-модель
Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) – объектная модель, используемая для XML/HTML-документов. Согласно DOM-модели, документ является иерархией. Проще говоря, DOM – это представление документа в виде дерева тегов. Это дерево образуется за счет вложенной структуры тегов плюс текстовые фрагменты страницы, каждый из которых образует отдельный узел.
Пример.
Построим дерево DOM для следующего документа.
<html>
<head>
<title>Моя страница</title>
</head>
<body>
Текст моей прекрасной страницы
</body>
</html>
Самый внешний тег – <html>, поэтому дерево начинает расти от него. Внутри <html> находятся два узла: <head> и <body>, они становятся дочерними узлами для <html>.
Теги образуют узлы-элементы (element node). Текст представлен текстовыми узлами (text node).
Пример посложнее.
<html>
<head>
<title>ДМФ</title>
</head>
<body>
<p>Правда о ДМФ</p>
<ol>
<li>ДМФ – праздник веселый</li>
<li>но тяжелый</li>
</ol>
</body>
</html>
Корневым элементом иерархии является html. У него есть два потомка. Первый – head, второй – body. И так далее, каждый вложенный тег является потомком тега выше:
Некоторые браузеры воспринимают текст, состоящий из одних пробельных символов, как текстовый узел.
Зачем, кроме красивых рисунков, нужна иерархическая модель DOM? Каждый DOM-элемент является объектом и предоставляет свойства для манипуляции своим содержимым, для доступа к родителям и потомкам.
Для манипуляций с DOM моделью страницы используется объект document. Используя document, можно получать нужный элемент дерева и менять его содержание.
Способы доступа и свойства элементов dom Доступ к элементам согласно dom-модели
Любой доступ и изменения DOM берут свое начало от объекта document: document.documentElement.
Например, document.body. (html = document)
Все дочерние элементы каждого DOM-узла, включая текстовые находятся в массиве childNodes.
Пример 1. В данном примере цикл перебирает всех детей document.body.
for(var i=0; i<document.body.childNodes.length; i++) {
var child = document.body.childNodes[i]
alert(child.tagName)
}
Свойства firstChild и lastChild показывают на первый и последний дочерние элементы и равны null, если детей нет. Свойство parentNode указывает на родителя. Например, для <body> таким элементом является <html>.