• 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) } }