Web-технологи Лекция5

• Javascript - скриптовый язык, предназначенный
для создания интерактивных веб-страниц.
• Javascript не требуется компилировать, он
подключается к HTML-странице и работает "как
есть".
• Javascript - НЕ java, а совсем другой язык. Он
похоже называется, но не более того. У javascript
есть свой стандарт: ECMAScript.
• Изменять страницу, писать на ней текст, добавлять и
удалять теги, менять стили элементов.
• Реагировать на события: скрипт может ждать, когда чтонибудь случится (клик мыши, окончание загрузки
страницы) и реагировать на это выполнением функции.
• Выполнять запросы к серверу и загружать данные без
перезагрузки страницы. AJAX.
• Устанавливать и считывать cookie, валидировать данные,
выводить сообщения, ...
• Java
 Flash
 ActiveX/NPAPI
 Dart / Google
• XUL
• vbscript
• IDE
• js-консоли
• Переносы строк и ;
var a = "длинная \
2 строка “
• Комментарии //comment; /* comment */
• Блоки {} и var (при входе в функцию), область видимости;
слабо типизированный язык
• Функции и arguments; не является массивом
• Замыкания ( var handler = function() { … } )
• Ассоциативные массивы = Объекты
function func() {
arguments.callee.called++
}
func.called = 0;
func()
func()
alert(func.called) // 2
Window
- Frames
- Location
- History
- XMLHttpRequest
- Document
- Cookies
- Object
…
Object
- Number
- String
- Boolean
- Date
- Math
- Array
- Object
- Error
• Области видимости [[scope]] / window и замыкания
• Замыкание - это когда объект локальных переменных
[[scope]] внешней функции остается жить после ее
завершения.
function sum(x,y) {
// в [[scope]] записалось свойство z
var z
// нашли переменную в [[scope]], [[scope]].z = x+y
z = x+y
// нашли переменную в [[scope]], return [[scope]].z
return z
}
• Глобальные переменные привязаны к своему
окну.
• Переменные создаются на этапе входа в функцию
function sum(a) {
return function(b) {
return a+b
}
}
•
•
•
•
•
Number (float64, alert(0.1+0.2))
Boolean
String
null
undefined
• 1/0 Number.POSITIVE_INFINITY (плюс
бесконечность)
• -1/0 Number.NEGATIVE_INFINITY (минус
бесконечность)
• Number(“something”) NaN (Not-a-Number,
результат ошибочной операции)
• Округление (метод toFixed)
0.1234.toFixed(2) = 0.12
• Number(),
• parseFloat(…),
• parseInt(…, система счисления)
• Math.floor() / Math.round() / Math.abs() / Math.sin()
…
• Строки в javascript - полностью юникодные.
• “”, ‘’ работают одинаково
• Можно указывать юникодные символы
через \uXXXX:
• Встроены регулярные выражения, методы
replace/match:
• В регулярных выражениях символ \w не
включает русские буквы.
• Длина строки хранится в свойстве length.
• False
false
null
undefined
“”
0
Number.NaN
• True – все остальное
“0”
“false”
• !!
• +-*/%
• + - конкатенация
• + перед строкой – преобразование в число
• &&
var rabbit = petShop && petShop.animals &&
petShop.animals.rabbit;
• ||
var e = event || window.event
• ==, !=
• <, >, <=, >=
Лексикографическое сравнение строк.
• ===, !==
Учитываем типы.
• Ассоциативный массив (хеш) (Object)
var o = new Object();
var o = {};
o.test = 5;
o["test"] = 5;
• Числовой массив (Array)
var a = new Array("a", 1, true);
var a = ["a", 1, true];
•
•
•
•
•
•
•
•
•
.length
.push()
.pop()
.shift()
.unshift()
. slice(begin[, end])
splice(index, deleteCount[, element1,…, elementN])
…
for(var i in arr)
• Анонимные и именованные
• Функция, как объект
f.test
var func = function(a,b) { alert(a+b) }
var arr = [1,2]
func.apply(null, arr)
• Передача функции по ссылке
var map = function(func, arr) {
var result = [ ]
for(var i=0; i<arr.length; i++) {
result[i] = func(arr[i])
}
return result
}
• Сворачивание параметров в объект
• while, do..while, for, for (… in …) и hasOwnProperty
• метки: break, continue
switch (obj) {
case "test":
…
break
default:
…
}
• with берет объект и делает из него новую
вложенную область видимости.
• Нельзя сказать, откуда будет взята та или иная
переменная. Не добавляет свойств.
with (obj) {
with (size) {
return weight / (width + height)
}
}
try {
...
throw {message: "111"}
..
} catch (e) {
alert("Поймано: « + e.message)
}
finally
• Каждый DOM-элемент является объектом и
предоставляет свойства для манипуляции своим
содержимым, для доступа к родителям и
потомкам.
var ol = document.getElementsByTagName('ol')[0]
var child1 = ol.removeChild(ol.firstChild)
var child2 = ol.removeChild(ol.firstChild)
ol.appendChild(child2)
ol.appendChild(child1 )
•
•
•
•
•
document.documentElement / html
document.body
.nodeType (1,3)
childNodes[], firstChild, lastChild, parentNode
previousSibling и nextSibling
•
•
•
•
•
tagName
Style
innerHTML
className
onclick, onkeypress, onfocus...
•
•
•
•
setAttribute(name, value)
getAttribute(name)
hasAttribute(name)
removeAttribute(name)
• Искусственное соответствие между свойством и
атрибутом.
• Название атрибута не зависит от регистра
IE < 8 :(
• Атрибут можно установить любой, а свойство –
нет
• Атрибуты и обработчики событий
• Исключение className
• http://javascript.ru/tutorial/dom/travel
•
•
•
•
getElementById()
getElementsByTagName() и *
getElementsByName
getElementsByClassName (!IE *)
var newDiv = document.createElement('div')
newDiv.className = 'my-class'
newDiv.id = 'my-id'
newDiv.style.backgroundColor = 'red’
newDiv.innerHTML = 'Привет, мир!‘
• appendChild() и insertBefore(…,…)
• removeChild
function removeChildren(node) {
var children = node.childNodes
for(var i=0;i<children.length; i++) {
var child = children[i]
node.removeChild(child)
}
}