JavaScript Базовый. Занятие 02.

JavaScript Базовый. Занятие 02.

• 1.
  Темы лекции: Введениев JavaScript. Тренер: Игорь Шкулипа, к.т.н. JavaScript. Базовый курс Занятие 2
• 2.
  http://www.slideshare.net/IgorShkulipa 2 JavaScript —прототипно-ориентированный сценарный язык программирования. Является реализацией языка ECMAScript (стандарт ECMA-262) JavaScript изначально создавался для того, чтобы сделать web-странички «живыми». Программы на этом языке называются скриптами. В браузере они подключаются напрямую к HTML и, как только загружается страничка — тут же выполняются. Программы на JavaScript — обычный текст. Они не требуют какой-то специальной подготовки. Что такое JavaScript?
• 3.
  http://www.slideshare.net/IgorShkulipa 3 История Перед молодыминженером Бренданом Айком, была поставлена задача, создать язык, который был бы похож на Java, но был поменьше и как писал сам автор «эдаким младшим его братом», и очень важно, имел бы выразительную лексику, чтобы непрограммисты могли быстро освоить технологию. Уже по истечению 10-ти дней была написана первая версия языка, которую решили назвать LiveScript. Конечно, создать за короткий промежуток времени идеальный язык вряд ли возможно, но, несмотря на некоторые свои недостатки, он решал поставленную перед ним задачу, а именно, позволял работать с HTML без перезагрузки страницы. Через некоторое время, язык был переименован в JavaScript. Такое название выбрано не случайно. В то время, да собственно как и сейчас, язык Java был очень популярен и приставка слова Java, должна была привлечь больше внимания к языку. И это дало свои плоды, люди заинтересовались, попробовали, оценили возможности языка, да так, что после анонса технологии, более 20-ти компаний выразили намерение использовать в своих будущих продуктах Javascript как объектный скриптовый язык с открытым стандартом
• 4.
  http://www.slideshare.net/IgorShkulipa 4 Версии Netscape • 1995– by Brendan Eich in Netscape Communication • 1996 – JavaScript 1.1 with Netscape 3.0 • 1997 – ECMA-262 first edition • 1997 – JavaScript 1.2 with Netscape Navigator 4.0 • 2000 – JavaScript 1.5 for ECMAScript 3 edition • 2006-2008 – JavaScript 1.6-1.8 with Firefox 2.0, 3.0 • 2009 – JavaScript 2.0 for ECMAScript edition 5 ECMAScript dialects • 1996 – JScript with Internet Explorer 3.0 • 2000 – ActionScript with Macromedia Flash 5.0
• 5.
  http://www.slideshare.net/IgorShkulipa 5 JavaScript непредназначен для создания автономных приложений. Программа на JavaScript встраивается непосредственно в исходный текст HTML-документа и интерпретируется брaузером по мере загрузки этого документа. С помощью JavaScript можно динамически изменять текст загружаемого HTML-документа и реагировать на события, связанные с действиями посетителя или изменениями состоятия документа или окна. Важная особенность JavaScript - объектная ориентированность. Программисту доступны многочисленные объекты, такие, как документы, гиперссылки, формы, фреймы и т.д. Объекты характеризуются описательной информацией (свойствами) и возможными действиями (методами). JavaScript
• 6.
  http://www.slideshare.net/IgorShkulipa 6 Алфавит языкаJavaScript основывается на множестве символов таблицы кодов ASCII. Алфавит JS включает: - строчные и прописные буквы латинского алфавита - цифры от 0 до 9 - символ '_' (также считается буквой) - специальные символы: " { } , | [ ] + - % / ; ' : ? < > = ! & # ~ ^ . * и др. Алфавит служит для построения слов, которые называются лексемами. Различают пять типов лексем: - идентификаторы - ключевые слова - знаки (символы) операций - литералы - разделители Алфавит
• 7.
  http://www.slideshare.net/IgorShkulipa 7 abstract argumentsboolean break byte case catch char class* const continue debugger default delete do double else enum* eval export* extends* false final finally float for function goto if implements import* in instanceof int interface let long native new null package private protected public return short static super* switch synchronized this throw throws transient true try typeof var void volatile while with yield* Ключевые слова Слова, отмеченные * являются новыми в ECMAScript6
• 8.
  http://www.slideshare.net/IgorShkulipa 8 Идентификатором называетсяпоследовательность цифр и букв, а также специальных символов, при условии, что первой стоит буква или специальный символ. Правила составления идентификаторов: • начинается с буквы, знака «_» или знака «$» • регистр букв имеет значение • может иметь любое количество символов • идентификатор не должен совпадать с ключевыми словами Идентификаторы
• 9.
  http://www.slideshare.net/IgorShkulipa 9 • Все,что между парными символами /* и */ считается комментарием • Все, что после парного символа // считается комментарием Комментарии
• 10.
  http://www.slideshare.net/IgorShkulipa 10 Символы операцийи разделителей , ! != | |= % %= & && &= () * *= + ++ += - -- -= -> ->* . .* / /= :: < << <= <<= > >> >= >>= == ?: [] ^ ^= ~ || >>> >>>= === new delete instanceof throw ... ; {}
• 11.
  http://www.slideshare.net/IgorShkulipa 11 Целочисленные литералы- целые числа в представлении: • десятичном, например: 15, +5, -174 • шестнадцатеричном, например: 0х25, 0хff • восьмеричном, например: 011, 0543. Вещественные литералы - дробные цисла. • Целая часть отделяется от дробной точкой, например: 99.15, -32.45. • Экспоненциальная форма записи, например: 2.73e-7. Логические значения - истина (true) и ложь (false). Строковые литералы - последовательность символов, заключенная в одинарные или двойные кавычки. Например: "ваше имя", 'ваше имя'. Литералы
• 12.
  http://www.slideshare.net/IgorShkulipa 12 • Object •Number // Object wrapper • String // Object wrapper • Boolean // Object wrapper • Array • Function • Date • Math • RegExp • Error Типы данных
• 13.
  http://www.slideshare.net/IgorShkulipa 13 Переменные вJavaScript объявляются с помощью ключевого слова var. При объявлении тип переменной не указывается. Этот тип присваивается переменной только тогда, когда ей присваивается какое- либо значение. var Buf=""; var i=100; var f=1.234; Числа в строки интерпретатор JavaScript преобразует автоматически. Для преобразования строк в числа используют специальные функции parseInt и parseFloat. Переменные
• 14.
  http://www.slideshare.net/IgorShkulipa 14 var myVar= "3.14159", str = ""+ myVar,// в string int = ~~myVar, // в integer float = 1*myVar, // во float bool = !!myVar, // в boolean array = [myVar]; // в array Преобразования типов
• 15.
  http://www.slideshare.net/IgorShkulipa 15 Операции JavaScript
• 16.
  http://www.slideshare.net/IgorShkulipa 16 Операции Унарные операции -Изменение знака на противоположный ! Дополнение. Используется для реверсирования значения логических переменных ++ Увеличение значения переменной. Может применяться и как префикс, и как суффикс -- Уменьшение значения переменной. Может применяться и как префикс, и как суффикс Бинарные операции - Вычитание + Сложение * Умножение / Деление % Остаток от деления
• 17.
  http://www.slideshare.net/IgorShkulipa 17 Операции Побитовые операции Операциисдвига & И | ИЛИ ^ исключающее ИЛИ ~ НЕ >> Сдвиг вправо << Сдвиг влево >>> Сдвиг вправо с заполнением освобождаемых разрядов нулями
• 18.
  http://www.slideshare.net/IgorShkulipa 18 Условные операции >Больше >= Больше или равно < Меньше <= Меньше или равно == Равно != Не равно || Логическое ИЛИ && Логическое И Операции
• 19.
  http://www.slideshare.net/IgorShkulipa 19 Другие операции .Доступ к полю объекта. ( document.write(Buf); ) [ ] Индексирование массива ( dim[i] ) ( ) Изменение порядка вычислений или передача параметров функции , Разделение выражений в многократном вычислении Операции
• 20.
  http://www.slideshare.net/IgorShkulipa 20 Операции присваивания =Присваивание += Сложение или слияние строк –= Вычитание *= Умножение /= Деление >>= Сдвиг вправо <<= Сдвиг влево >>>= Сдвиг вправо с заполнением освобождаемых разрядов нулями &= И |= ИЛИ ^= Исключающее ИЛИ
• 21.
  http://www.slideshare.net/IgorShkulipa 21 «? :» Формазаписи: "условие" ? "выражение 1" : "выражение 2"; Если условие истинно, то выполняется выражение 1, иначе выполняется выражение 2. Условная операция
• 22.
  http://www.slideshare.net/IgorShkulipa 22 Операторы JavaScript
• 23.
  http://www.slideshare.net/IgorShkulipa 23 Если <условие>==true,то выполнится <оператор1> , в ином случае - <оператор2>. Блок <else> может быть опущен. В таком случае при истинном условии выполнится <оператор1> , а за ним – оператор, следующий после условного. Вместо <оператор1> и <оператор2> может использоваться любой оператор, включая составной оператор ({}), операторы циклов, операторы выбора и условный, вызова функции, пустой оператор (;) и др. Условный оператор if (условие) оператор1; else оператор2;
• 24.
  http://www.slideshare.net/IgorShkulipa 24 Синтаксис выбирающегооператора допускает пустой составной оператор и пустой оператор в качестве операторов, следующих за условием выбирающего оператора: switch (i) ; switch (j) {} switch (r) i++; Общий вид оператора выбора: Оператор выбора switch (условие) { case <константное выражение 1>: <оператор 1>; case <константное выражение 2>: <оператор 2>; ... case <константное выражение N>: <оператор N>; default: <оператор N+1>; }
• 25.
  http://www.slideshare.net/IgorShkulipa 25 • вычисляетсявыражение в круглых скобках после оператора switch (предварительная стадия); • это значение последовательно сравнивается со значениями константных выражений за метками case (стадия определения начальной точки выполнения оператора); • если значения совпадают, управление передаётся соответствующему помеченному оператору (стадия выполнения); • если ни одно значение не совпадает и в теле оператора case есть оператор, помеченный меткой default, управление передаётся этому оператору (стадия выполнения); • если ни одно значение не совпадает, и в теле оператора case нет оператора, помеченного меткой default, управление передаётся оператору, следующему за оператором switch (стадия выполнения). На стадии выполнения все операторы от точки выполнения и до конца тела оператора выполняются независимо от меток, если только какой- нибудь из операторов не передаст управление за пределы оператора выбора. Схема выполнения оператора switch
• 26.
  http://www.slideshare.net/IgorShkulipa 26 for (<выражение1>;<выражение2>; <выражение3> ) <оператор>; Оператор цикла «for» for (<переменная> in <объект>) <оператор>; Оператор цикла «for-in» while (<условие>) { <оператор> } Оператор цикла с условием
• 27.
  http://www.slideshare.net/IgorShkulipa 27 Оператор прекращения.Прерывает выполнение текущего блока. break; Оператор продолжения. Прерывает выполнение текущей итерации цикла и переходит к следующей. continue; Операторы break и continue
• 28.
  http://www.slideshare.net/IgorShkulipa 28 Оператор delete.С помощью оператора delete можно удалить указанный элемент или свойство объекта. Оператор возвращает true если удаление указанного элемента прошло успешно, и false если нет. delete x.a; delete x; Оператор in. С помощью оператора in можно узнать имеется ли произвольное свойство у указанного объекта или массива. Возвращает true если указанное свойство есть, и false, если нет.. 1 in set; Оператор instanceof сверяет тип объекта с переданным значением. Если они совпадают, метод возвращает true, если нет false. g instanceof Array Оператор typeof возвращает тип указанного объекта. var fio={surname:'Пупкин',name:'Василий',middle:'Борисович'}; alert(typeof fio); Специальные операторы
• 29.
  http://www.slideshare.net/IgorShkulipa 29 Встроенные типыданных
• 30.
  http://www.slideshare.net/IgorShkulipa 30 Единый типчисло используется как для целых, так и для дробных чисел. Существуют специальные числовые значения Infinity (бесконечность) и NaN (ошибка вычислений). Infinity получается при делении на ноль: alert( 1 / 0 ); // Infinity Ошибка вычислений NaN будет результатом некорректной математической операции, например: alert( "два" * 2 ); // NaN Эти значения формально принадлежат типу «число», хотя, числами в их обычном понимании не являются. Number
• 31.
  http://www.slideshare.net/IgorShkulipa 31 Целочисленные литералы- целые числа в представлении: • десятичном, например: 15, +5, -174 • шестнадцатеричном, например: 0х25, 0хff • восьмеричном, например: 011, 0543. Вещественные литералы - дробные цисла. • Целая часть отделяется от дробной точкой, например: 99.15, -32.45. • Экспоненциальная форма записи, например: 2.73e-7. Литералы Number
• 32.
  http://www.slideshare.net/IgorShkulipa 32 Методы: Math.acos Math.asin Math.atan Math.atan2 Math.exp Math.min Math.random Math.sqrt Math.log Math.round Math.floor Math.ceil Math.sin Math.cos Math.tan Math.pow Math.max Math.abs Объект Math Свойства: Math.E Math.LN2 Math.LOG2E Math.LOG10E Math.PI Math.SQRT12 Math.SQRT2 Math.LN10
• 33.
  http://www.slideshare.net/IgorShkulipa 33 Infinity //read/write (ES3) NaN // read/write (ES3) Number.Infinity // readonly Number.NaN // readonly Number.POSITIVE_INFINITY Number.MAX_VALUE + 1 Number.NEGATIVE_INFINITY Number.MAX_VALUE – 1 Number.NaN alert(NaN === NaN); ??? Infinity=1; alert(Infinity); ??? NaN и Infinity
• 34.
  http://www.slideshare.net/IgorShkulipa 34 isFinite Функция isFinite(n)преобразует аргумент к числу и возвращает true, если это не NaN/Infinity/-Infinity. Преобразование к числу Для того, чтобы явно преобразовать строку к числу, перед значением ставят унарный плюс '+': var s = "12.34"; alert( +s ); // 12.34 При этом, если строка не является числом, то результат будет NaN: alert( +"12test" ); // NaN parseInt и parseFloat Функция parseInt и ее аналог parseFloat преобразуют строку символ за символом, пока это возможно. toString Для преобразования числа в строку используется метод toString(основание системы), например: var n = 255; alert( n.toString(16) ); // ff Некоторые функции
• 35.
  http://www.slideshare.net/IgorShkulipa 35 • Последовательность0 или более 16-битных символов • Нет отдельного типа для символа (напр. char или wchar) • Являются неизменяемыми • Одинаковые строки равны (==) String Строковые литералы - последовательность символов, заключенная в одинарные или двойные кавычки. Например: "строка", строка'.
• 36.
  http://www.slideshare.net/IgorShkulipa 36 Специальные символыи экранирование b Backspace f Form feed n New line r Carriage return t Tab uNNNN Символ в кодировке Юникод с шестнадцатеричным кодом NNNN. Если строка в одинарных кавычках, то внутренние одинарные кавычки внутри должны быть экранированы, то есть снабжены обратным слешем ‘ Сам символ обратного слэша '' является служебным, поэтому всегда экранируется, т.е. пишется как Заэкранировать можно любой символ. Если он не специальный, то ничего не произойдёт
• 37.
  http://www.slideshare.net/IgorShkulipa 37 Конкатенация: var str=“Hello, “ + “world!”; // “Hello, world” Длина: str.length Методы: var s = “Hello, World!" s.charAt(0) // “H" – первый символ s.charAt(s.length-1) // “!" – последний символ s.substring(1,4) // "ell” s.slice(1,4) // => "ell" s.indexOf("l") // 2 позиция первого вхождения “l” Работа со строками
• 38.
  http://www.slideshare.net/IgorShkulipa 38 var a= "Hello, World!"; var b = a.toUpperCase(); alert(a); // ??? var u = "Hello"; u.replace("e", "o") // returns “Hollo” alert(u); // ??? Работа со строками
• 39.
  http://www.slideshare.net/IgorShkulipa 39 var True= true; var False = false; Boolean
• 40.
  http://www.slideshare.net/IgorShkulipa 40 Преобразование кBoolean false false null undefined "" 0 - 0 Number.NaN NaN true “false” “0” 100 “some string” {} []
• 41.
  http://www.slideshare.net/IgorShkulipa 41 null –специальное ключевое слово, обозначающее отсутствие значения. alert(typeof null) // ??? var a = null; if (a == null) {} // ??? var b = null; alert(b.toString()); // ??? alert("string" + null); // ??? alert(100 + null); // ??? alert(!!null); // ??? null
• 42.
  http://www.slideshare.net/IgorShkulipa 42 alert(typeof null)// object var a = null; if (a == null) {} // выполнится var b = null; alert(b.toString()); // Type error: b is null alert("string" + null); // stringnull alert(100 + null); // 100 alert(!!null); // false null
• 43.
  http://www.slideshare.net/IgorShkulipa 43 undefined –обозначает значение непроинициализированных переменных или свойств объекта, элементов массива, которые не определены. alert(typeof undefined) // ??? var a = undefined; if (a == undefined) {} // ??? var b = undefined; alert(b.toString()); // ??? alert("string" + undefined); // ??? alert(100 + undefined); // ??? alert(!!undefined); // ??? undefined
• 44.
  http://www.slideshare.net/IgorShkulipa 44 alert(typeof undefined)// undefined var a = undefined; if (a == undefined) {} // выполнится var b = undefined; alert(b.toString()); // Type error: b is undefined alert("string" + undefined); // stringundefined alert(100 + undefined); // NaN alert(!!undefined); // false undefined
• 45.
  http://www.slideshare.net/IgorShkulipa 45 Объекты JavaScriptпредставляют собой наборы свойств и методов. Можно сказать, что свойства объектов - это данные, связанные с объектом, а методы - функции для обработки данных объекта. В общем случае, объект – это неупорядоченная коллекция пар ключ-значение. var person = { firstName : ”Василий”, lastName : ”Пупкин”, age : 30, }; Object
• 46.
  http://www.slideshare.net/IgorShkulipa 46 Array Массив вJavaScript является экземпляром встроенного объекта Array. Нумерация элементов в массиве начинается с нуля. var a1 = new Array(); var a2 = new Array(3); var a3 = new Array(1, 2, 3); • a1 - массив, в котором нет ни одного элемента. • a2 - массив из трех элементов с неопределенным значением. • a3 - массив, заданный списком своих элементов.
• 47.
  http://www.slideshare.net/IgorShkulipa 47 Array Число элементовв массиве можно изменить, просто задав значение соответствующего элемента: a3[5]= 6; Типы данных элементов массива в JavaScript могут быть различными: a3[3]=4; a3[4]=“5”; a3[7]=false; Для создания многомерного массива каждому элементу массива нужно присвоить другой массив: var myArray = new Array(2); for (i=0; i<3; i++) { myArray[i] = new Array(2); }
• 48.
  http://www.slideshare.net/IgorShkulipa 48 Свойства иметоды Array Свойство: • length. Число элементов массива. Методы: • concat( ). Слияние двух массивов. Через параметр передается имя второго массива: c=a.concat(b); • join( ). Слияние элементов массива в строку. Через параметр передается разделитель элементов. По умолчанию разделителем служит запятая. s=c.join('; '); • reverse( ). Меняет порядок элементов массива на обратный. • slice( ). Выделяет часть из массива. В качестве параметров передаются значения начального и конечного индексов, между которыми происходит выделение. При этом элемент массива с конечным индексом в результат не войдет. Следует помнить, что индексы отсчитываются от нуля.
• 49.
  http://www.slideshare.net/IgorShkulipa 49 Date С помощьюметодов встроенного объекта Date можно выполнять различные действия с часами компьютера. Для использования большинства методов объекта Date необходимо создать экземпляр этого объекта: var today = new Date(); Методы объекта Date • getYear. Возвращает год: • getMonth. Возвращает номер месяца. Январь - это 0, февраль - 1 и т.д. • getDate.Возвращает значение календарной даты в диапазоне от 1 до 31: • getDay. Возвращает номер дня недели. Воскресенье - 0, для понедельник - 1 и т.д.) • getHours. Возвращает количество часов, прошедших после полуночи. • getMinutes. Возвращает количество минут, прошедших с начала часа. • getSeconds. Возвращает количество секунд, прошедших с начала минуты. • getTime. Возвращает количество миллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года. • getTimeZoneOffset. Возвращает смещение локального времени относительно времени по Гринвичу в миллисекундах.
• 50.
  http://www.slideshare.net/IgorShkulipa 50 • parse.Возвращает количество миллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года по время, указанное в параметре функции. • UTC. Преобразовывает дату, заданную параметрами метода, в количество миллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года. • setYear. Устанавливает год в объекте класса Date. • setMonth. Устанавливает номер месяца. • setDate. Устанавливает значение календарной даты в диапазоне от 1 до 31. • setDay. Устанавливает номер дня недели. • setHours. Устанавливает количество часов, прошедших после полуночи. • setMinutes. Устанавливает количество минут, прошедших с начала часа. • setSeconds. Устанавливает количество секунд, прошедших с начала минуты. • setTime. Устанавливает дату, соответствующую количеству миллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года: • toGMTString. Преобразует дату в строку, записанную в стандартном формате времени по Гринвичу: "Sat, 21 Apr 2001 14:00:00 GMT" • toLocaleString. Преобразует дату в строку, записанную в стандартном формате локального времени: "04/16/2001 18:00:00". Date
• 51.
  http://www.slideshare.net/IgorShkulipa 51 К объектамбраузера относятся такие объекты, как окно - window и документ - document. Обращаясь к свойствам и методам этих объектов, можно выполнять различные операции над окном брaузера, загруженным в это окно HTML- документом, а также над отдельными объектами, размещенными в HTML- документе. Объекты брaузера
• 52.
  http://www.slideshare.net/IgorShkulipa 52 • name.Имя окна, указанное при его открытии методом open, а также в атрибуте TARGET тега <A> или в атрибуте NAME тега <FORM>. • self, window. Синонимы имени окна. Относятся к текущему окну. • top. Синоним имени окна. Относится к окну верхнего уровня. • parent. Синоним имени окна. Относится к окну, содержащему набор фреймов. • frames. Массив всех фреймов данного окна. • length. Количество фреймов в родительском окне. • status. Текущее сообщение, отображаемое в строке состояния окна брaузера. Свойства объекта window
• 53.
  http://www.slideshare.net/IgorShkulipa 53 • alert.Отображение диалоговой панели Alert с сообщением и кнопкой OK. Через параметр передается сообщение, отображаемое в диалоговой панели. После вызова этого метода выполнение сценария задерживается до тех пор, пока посетитель не нажмет кнопку OK, расположенную в диалоговой панели. • confirm. Отображение диалоговой панели Confirm с кнопками OK и Отмена. В зависимости от того, какая кнопка будет нажата, метод возвращает соответственно значение true или false. • prompt. Отображение диалоговой панели Prompt с полем ввода и кнопками OK и Отмена. В зависимости от того, какая кнопка будет нажата, метод возвращает соответственно введенную строку или значение null. Метод имеет два параметра. Первый - сообщение над полем ввода. Второй (необязательный) - начальное значение строки ввода. • open. Открытие окна. Метод имеет три параметра. Первый задает URL HTML- документа, предназначенного для загрузки в новое окно. Второй определяет имя окна для использования в атрибуте TARGET тега <A> или в атрибуте NAME тега <FORM>. Третий (необязательный) задает в виде текстовой строки параметры, определяющие внешний вид открываемого окна. var newWindow= open(“1.htm", "", "toolbar=no, menubar=no, width=300, height=200"); Методы объекта window
• 54.
  http://www.slideshare.net/IgorShkulipa 54 Параметры внешнеговида окна toolbar Отображение стандартной инструментальной линейки [=yes|no] | [=1|0] location Отображение поля ввода адреса документа [=yes|no] | [=1|0] status Отображение строки состояния [=yes|no] | [=1|0] menubar Отображение линейки меню [=yes|no] | [=1|0] scrollbars Отображение полос прокрутки [=yes|no] | [=1|0] resizable Изменение размеров нового окна [=yes|no] | [=1|0] width Ширина окна в пикселах height Высота окна в пикселах fullscreen Полноэкранный режим copyhistory Сохранение истории загрузки документов в данное окно [=yes|no] | [=1|0] directories Наличие в данном окне кнопок групп новостей [=yes|no] | [=1|0]
• 55.
  http://www.slideshare.net/IgorShkulipa 55 • close.Закрытие созданного или основного окна: Текущее окно брaузера можно закрыть одним из следующих способов: window.close(); self.close(); • setTimeout. Установка таймера. Применяется для ограничения времени ввода пароля, создания бегущих строк и всевозможных анимационных эффектов. Метод имеет два параметра. Первый задает выражение JavaScript, которое запускается по прошествии времени, указанного вторым параметром в миллисекундах. Заданное выражение запускается один раз. • clearTimeout. Сброс таймера. • blur( ). При вызове метода окно теряет фокус. • focus( ). При вызове метода окно получает фокус. • MoveTo(x,y). Перемещает окно в точку с координатами. • MoveBy(x,y). Перемещает окно на x пикселей по горизонтали вправо и на y пикселей вниз. • ResizeTo(x,y). Изменяет размер окна на указанные размеры. • ResizeBy(x,y). Увеличивает или уменьшает размер окна на заданное количество пикселей. • print( ). Печать документа.(не работает в IE 4) • scroll(x,y), ScrollTo(x,y). Прокручивает окно так, что точка с кординатами x,y становится левой верхней точкой окна. • ScrollBy(x,y). Прокручивает окно на x,y пикселей. • stop( ). Прекращает загрузку документа в окно браузера. Методы объекта window
• 56.
  http://www.slideshare.net/IgorShkulipa 56 • URL.Полный URL документа. • location. Полный URL документа. • referrer. URL вызывающего документа. • title. Заголовок документа, определенный тегом <TITLE>. • bgColor. Цвет фона документа. • fgColor. Цвет текста. • linkColor. Цвет cсылок. • alinkColor. Цвет выбранных cсылок. • vlinkColor. Цвет посещенных cсылок. • links. Массив всех cсылок в документе. • anchors. Массив локальных меток. Применяется для организации ссылок внутри документа. • applets. Массив аплетов Java. • forms. Массив форм в виде объектов. • images. Массив растровых изображений. • embeds. Массив объектов plug-in. • lastModified. Дата последнего изменения документа. • cookie. Значение cookie для текущего документа. • anchor. Локальная метка, определенная тегом <A>. • form. Форма, определенная тегом <FORM>. • history. Список посещенных URL. • link. Текст или изображение, играющие роль гипертекстовой ссылки, созданной тегом <A>, в котором дополнительно заданы обработчики событий onClick и onMouseOver. document
• 57.
  http://www.slideshare.net/IgorShkulipa 57 • сlear.Удаление содержимого документа из окна просмотра. • write. Запись в документ произвольной HTML-конструкции. • writeln. Аналогичен write, но с добавлением символа перевода строки в конец строки. • open. Открытие выходного потока для записи в HTML-документ данных типа MIME при помощи методов write и writeln. • close. Закрытие потока данных, открытого методом open. В окне будут отображены все изменения содержимого документа, сделанные сценарием после открытия потока. Методы объекта document
• 58.
  http://www.slideshare.net/IgorShkulipa 58 Для каждойссылки, размещенной в HTML-документе, создается отдельный объект. Все такие объекты находятся в объекте document как элементы массива links. Анализируя эти элементы, сценарий JavaScript может определить свойства каждой ссылки в HTML- документе: • length. Количество ссылок в HTML-документе, т.е. количество элементов в массиве links. • hash. Имя локальной ссылки, если она определена в URL. • host. Имя узла и порт, указанные в URL. • hostname. Имя узла и доменное имя узла сети. Если доменное имя недоступно, вместо него указывается адрес IP. • href. Полный URL. • pathname. Путь к объекту, указанный в URL. • port. Номер порта, использумого для передачи данных с сервером, указанным в ссылке. • protocol. Строка названия протокола передачи данных (включающая символ "двоеточие"), указанного в ссылке. • search. Строка запроса, указанная в URL после символа "?". • target. Имя окна, куда будет загружен документ при выполнении ссылки. Это может быть имя существующего окна фрейма, определенного тегом <FRAMESET>, или одно из зарезервированных имен - _top, _parent, _self, _blank. Ссылки в документе
• 59.
  http://www.slideshare.net/IgorShkulipa 59 Сценарий JavaScriptвстраивается в HTML-документ с помощью тега <script>. <script type="text/javascript"> <!-- document.write(“Hello, JavaScript!"); //--> </script> Текст сценария может быть оформлен, как комментарий, чтобы не было проблем у посетителей, брaузеры которых не понимают JavaScript. Кроме того к символам, завершающим комментарий добавляется еще два символа "/", т.к. некоторые браузеры рассматривает строку, состоящую только из символов "-->", как ошибочную. Тег <script>
• 60.
  http://www.slideshare.net/IgorShkulipa 60 Если кодамного, то его стоит вынести в отдельный файл, который подключается тоже тегом <script>, указав путь к файлу: <script src="/path/to/script.js"></script> Можно указать и полный URL, например: <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script> Чтобы подключить несколько скриптов, необходимо использовать несколько тегов: <script src="/js/script1.js"></script> <script src="/js/script2.js"></script> Внешние скрипты
• 61.
  http://www.slideshare.net/IgorShkulipa 61 Атрибут asyncподдерживается всеми браузерами, кроме IE9-. Скрипт выполняется полностью асинхронно. Атрибут defer поддерживается всеми браузерами, включая самые старые IE. Скрипт также выполняется асинхронно, но браузер гарантирует, что относительный порядок будет сохранён. То есть, в следующем коде первым сработает тот скрипт, который раньше загрузится: <script src="1.js" async></script> <script src="2.js" async></script> А в таком коде первым сработает всегда 1.js, а скрипт 2.js, даже если загрузился раньше, будет его ждать. <script src="1.js" defer></script> <script src="2.js" defer></script> async и defer
• 62.
  http://www.slideshare.net/IgorShkulipa 62 <!DOCTYPE html> <html> <head> <title></title> <metahttp-equiv="Content-Type" content="text/html; charset=UTF-8"> <script> var interval=window.setInterval(function(){ var now=new Date(); document.forms[0].elements[0].value= now.getHours()+":"+ now.getMinutes()+":"+ now.getSeconds(); },1000); </script> </head> Маленький пример
• 63.
  http://www.slideshare.net/IgorShkulipa 63 <body> <form id="0"method="get"> <input id="1" style="width:55px"></input> </form> </body> </html> Маленький пример
• 64.
  http://www.slideshare.net/IgorShkulipa 64 example.js var a=1; a++; //...1393732 раза a++; alert(a); Маленький пример 2 example2.js var b=1; b++; //... 1021346 раз b++; alert(b);
• 65.
  http://www.slideshare.net/IgorShkulipa 65 <!DOCTYPE html> <html> <head> <title></title> <metahttp-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="js/example.js" type="text/javascript" async></script> <script src="js/example2.js" type="text/javascript" async></script> </head> <body> </body> </html> Маленький пример 2
• 66.
  http://www.slideshare.net/IgorShkulipa 66 <!DOCTYPE html> <html> <head> <title></title> <metahttp-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="js/example.js" type="text/javascript" defer></script> <script src="js/example2.js" type="text/javascript" defer></script> </head> <body> </body> </html> Маленький пример 2