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

Темы лекции: Введение в JavaScript.

Тренер: Игорь Шкулипа, к.т.н.

JavaScript. Базовый курс

Занятие 2

http://www.slideshare.net/IgorShkulipa 2

JavaScript — прототипно-ориентированный сценарный языкпрограммирования. Является реализацией языка ECMAScript (стандартECMA-262)

JavaScript изначально создавался для того, чтобы сделать web-странички«живыми». Программы на этом языке называются скриптами. В браузереони подключаются напрямую к HTML и, как только загружается страничка— тут же выполняются.

Программы на JavaScript — обычный текст. Они не требуют какой-тоспециальной подготовки.

Что такое JavaScript?

http://www.slideshare.net/IgorShkulipa


История

Перед молодым инженером Бренданом Айком, былапоставлена задача, создать язык, который был бы похож наJava, но был поменьше и как писал сам автор «эдакиммладшим его братом», и очень важно, имел бывыразительную лексику, чтобы непрограммисты моглибыстро освоить технологию. Уже по истечению 10-ти днейбыла написана первая версия языка, которую решилиназвать LiveScript. Конечно, создать за короткийпромежуток времени идеальный язык вряд ли возможно, но,несмотря на некоторые свои недостатки, он решалпоставленную перед ним задачу, а именно, позволялработать с HTML без перезагрузки страницы.

Через некоторое время, язык был переименован в JavaScript. Такое название выбраноне случайно. В то время, да собственно как и сейчас, язык Java был очень популярени приставка слова Java, должна была привлечь больше внимания к языку. И это далосвои плоды, люди заинтересовались, попробовали, оценили возможности языка, датак, что после анонса технологии, более 20-ти компаний выразили намерениеиспользовать в своих будущих продуктах Javascript как объектный скриптовый язык соткрытым стандартом



Версии

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



JavaScript не предназначен для создания автономных приложений.Программа на JavaScript встраивается непосредственно в исходныйтекст HTML-документа и интерпретируется брaузером по мере загрузкиэтого документа. С помощью JavaScript можно динамически изменять текстзагружаемого HTML-документа и реагировать на события, связанные сдействиями посетителя или изменениями состоятия документа или окна.

Важная особенность JavaScript - объектная ориентированность.Программисту доступны многочисленные объекты, такие, как документы,гиперссылки, формы, фреймы и т.д. Объекты характеризуютсяописательной информацией (свойствами) и возможными действиями(методами).

JavaScript



Алфавит языка JavaScript основывается на множестве символов таблицыкодов ASCII. Алфавит JS включает:

- строчные и прописные буквы латинского алфавита- цифры от 0 до 9- символ '_' (также считается буквой)- специальные символы: " { } , | [ ] + - % / \ ; ' : ? < > = !

& # ~ ^ . * и др.

Алфавит служит для построения слов, которые называютсялексемами.

Различают пять типов лексем:- идентификаторы- ключевые слова- знаки (символы) операций- литералы- разделители

Алфавит



abstract arguments boolean 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



Идентификатором называется последовательность цифр и букв, атакже специальных символов, при условии, что первой стоит буква илиспециальный символ.

Правила составления идентификаторов:

• начинается с буквы, знака «_» или знака «$»

• регистр букв имеет значение

• может иметь любое количество символов

• идентификатор не должен совпадать с

ключевыми словами

Идентификаторы



• Все, что между парными символами /* и */считается комментарием

• Все, что после парного символа // считаетсякомментарием

Комментарии



Символы операций и разделителей

, ! != | |= % %= &

&& &= () * *= + ++ +=

- -- -= -> ->* . .* /

/= :: < << <= <<= > >>

>= >>= == ?: [] ^ ^= ~

|| >>> >>>= === new delete instanceof throw

... ; {}



Целочисленные литералы - целые числа в представлении:

• десятичном, например: 15, +5, -174

• шестнадцатеричном, например: 0х25, 0хff

• восьмеричном, например: 011, 0543.

Вещественные литералы - дробные цисла.

• Целая часть отделяется от дробной точкой, например: 99.15, -32.45.

• Экспоненциальная форма записи, например: 2.73e-7.

Логические значения - истина (true) и ложь (false).

Строковые литералы - последовательность символов, заключеннаяв одинарные или двойные кавычки. Например: "ваше имя", 'вашеимя'.

Литералы



• Object• Number // Object wrapper• String // Object wrapper• Boolean // Object wrapper• Array• Function• Date• Math• RegExp• Error

Типы данных



Переменные в JavaScript объявляются с помощью ключевого слова var.При объявлении тип переменной не указывается. Этот типприсваивается переменной только тогда, когда ей присваивается какое-либо значение.

var Buf="";

var i=100;

var f=1.234;

Числа в строки интерпретатор JavaScript преобразует автоматически.Для преобразования строк в числа используют специальные функцииparseInt и parseFloat.

Переменные



var myVar = "3.14159",

str = ""+ myVar,// в string

int = ~~myVar, // в integer

float = 1*myVar, // во float

bool = !!myVar, // в boolean

array = [myVar]; // в array

Преобразования типов



Операции JavaScript



Операции

Унарные операции

- Изменение знака на противоположный

!Дополнение. Используется для реверсирования значения логических переменных

++Увеличение значения переменной. Может применяться и как префикс, и как суффикс

--Уменьшение значения переменной. Может применяться и как префикс, и как суффикс

Бинарные операции

- Вычитание

+ Сложение

* Умножение

/ Деление

% Остаток от деления



Операции

Побитовые операции

Операции сдвига

& И

| ИЛИ

^ исключающее ИЛИ

~ НЕ

>> Сдвиг вправо

<< Сдвиг влево

>>> Сдвиг вправо с заполнением освобождаемых разрядов нулями



Условные операции

> Больше

>= Больше или равно

< Меньше

<= Меньше или равно

== Равно

!= Не равно

|| Логическое ИЛИ

&& Логическое И

Операции



Другие операции

. Доступ к полю объекта. ( document.write(Buf); )

[ ] Индексирование массива ( dim[i] )

( ) Изменение порядка вычислений или передача параметров функции

, Разделение выражений в многократном вычислении

Операции



Операции присваивания

= Присваивание

+= Сложение или слияние строк

–= Вычитание

*= Умножение

/= Деление

>>= Сдвиг вправо

<<= Сдвиг влево

>>>= Сдвиг вправо с заполнением освобождаемых разрядов нулями

&= И

|= ИЛИ

^= Исключающее ИЛИ



«? :»

Форма записи:

"условие" ? "выражение 1" : "выражение 2";

Если условие истинно, то выполняется выражение 1, иначевыполняется выражение 2.

Условная операция



Операторы JavaScript



Если <условие>==true, то выполнится <оператор1> , в ином случае -<оператор2>.

Блок <else> может быть опущен. В таком случае при истинном условиивыполнится <оператор1> , а за ним – оператор, следующий после

условного.

Вместо <оператор1> и <оператор2> может использоваться любой

оператор, включая составной оператор ({}), операторы циклов,операторы выбора и условный, вызова функции, пустой оператор (;) идр.

Условный оператор

if (условие)

оператор1;

else

оператор2;



Синтаксис выбирающего оператора допускает пустой составной оператори пустой оператор в качестве операторов, следующих за условиемвыбирающего оператора:

switch (i) ;

switch (j) {}

switch (r) i++;

Общий вид оператора выбора:

Оператор выбора

switch (условие)

{

case <константное выражение 1>: <оператор 1>;

case <константное выражение 2>: <оператор 2>;

...

case <константное выражение N>: <оператор N>;

default: <оператор N+1>;

}



• вычисляется выражение в круглых скобках после оператора switch(предварительная стадия);

• это значение последовательно сравнивается со значениямиконстантных выражений за метками case (стадия определенияначальной точки выполнения оператора);

• если значения совпадают, управление передаётся соответствующемупомеченному оператору (стадия выполнения);

• если ни одно значение не совпадает и в теле оператора case естьоператор, помеченный меткой default, управление передаётся этомуоператору (стадия выполнения);

• если ни одно значение не совпадает, и в теле оператора case нетоператора, помеченного меткой default, управление передаётсяоператору, следующему за оператором switch (стадия выполнения).

На стадии выполнения все операторы от точки выполнения и до концатела оператора выполняются независимо от меток, если толькокакой- нибудь из операторов не передаст управление за пределыоператора выбора.

Схема выполнения оператора switch



for (<выражение1>; <выражение2>; <выражение3> )

<оператор>;

Оператор цикла «for»

for (<переменная> in <объект>)

<оператор>;

Оператор цикла «for-in»

while (<условие>)

{

<оператор>

}

Оператор цикла с условием



Оператор прекращения. Прерывает выполнение текущего блока.

break;

Оператор продолжения. Прерывает выполнение текущей итерациицикла и переходит к следующей.

continue;

Операторы break и continue



Оператор 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);

Специальные операторы



Встроенные типы данных



Единый тип число используется как для целых, так и для дробныхчисел.

Существуют специальные числовые значения Infinity (бесконечность)и NaN (ошибка вычислений).

Infinity получается при делении на ноль:

alert( 1 / 0 ); // Infinity

Ошибка вычислений NaN будет результатом

некорректной математической операции, например:

alert( "два" * 2 ); // NaN

Эти значения формально принадлежат типу «число», хотя, числами в ихобычном понимании не являются.

Number



Целочисленные литералы - целые числа в представлении:

• десятичном, например: 15, +5, -174• шестнадцатеричном, например: 0х25, 0хff • восьмеричном, например: 011, 0543.

Вещественные литералы - дробные цисла.

• Целая часть отделяется от дробной точкой, например: 99.15, -32.45.

• Экспоненциальная форма записи, например: 2.73e-7.

Литералы Number



Методы:

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



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



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

Некоторые функции



• Последовательность 0 или более 16-битных символов

• Нет отдельного типа для символа (напр. char или wchar)

• Являются неизменяемыми

• Одинаковые строки равны (==)

String

Строковые литералы -последовательность символов,заключенная в одинарные или двойныекавычки. Например: "строка", строка'.



Специальные символы и экранирование

\b Backspace

\f Form feed

\n New line

\r Carriage return

\t Tab

\uNNNNСимвол в кодировке Юникод с шестнадцатеричным

кодом NNNN.

Если строка в одинарных кавычках, то внутренние одинарные кавычкивнутри должны быть экранированы, то есть снабжены обратным слешем\‘

Сам символ обратного слэша '\' является служебным, поэтому всегдаэкранируется, т.е. пишется как \\

Заэкранировать можно любой символ. Если он не специальный, тоничего не произойдёт



Конкатенация:

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”

Работа со строками



var a = "Hello, World!";

var b = a.toUpperCase();

alert(a); // ???

var u = "Hello";

u.replace("e", "o") // returns “Hollo”

alert(u); // ???

Работа со строками



var True = true;

var False = false;

Boolean



Преобразование к Boolean

false

false

null

undefined

""

0

- 0

Number.NaN

NaN

true

“false”

“0”

100

“some string”

{}

[]



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



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



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



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



Объекты JavaScript представляют собой наборы свойств иметодов. Можно сказать, что свойства объектов - это данные, связанные собъектом, а методы - функции для обработки данных объекта.

В общем случае, объект – это неупорядоченная коллекцияпар ключ-значение.

var person = {

firstName : ”Василий”,

lastName : ”Пупкин”,

age : 30,

};

Object



Array

Массив в JavaScript является экземпляром встроенного объекта Array.Нумерация элементов в массиве начинается с нуля.

var a1 = new Array();

var a2 = new Array(3);

var a3 = new Array(1, 2, 3);

• a1 - массив, в котором нет ни одного элемента.• a2 - массив из трех элементов с неопределенным значением.• a3 - массив, заданный списком своих элементов.



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);

}



Свойства и методы Array

Свойство:

• length. Число элементов массива.

Методы:

• concat( ). Слияние двух массивов. Через параметр передается имя второгомассива: c=a.concat(b);

• join( ). Слияние элементов массива в строку. Через параметр передаетсяразделитель элементов. По умолчанию разделителем служит запятая.s=c.join('; ');

• reverse( ). Меняет порядок элементов массива на обратный.

• slice( ). Выделяет часть из массива. В качестве параметров передаютсязначения начального и конечного индексов, между которыми происходитвыделение. При этом элемент массива с конечным индексом в результат невойдет. Следует помнить, что индексы отсчитываются от нуля.



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. Возвращает смещение локального времени

относительно времени по Гринвичу в миллисекундах.



• 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



К объектам браузера относятся такие объекты, как окно - window идокумент - document.

Обращаясь к свойствам и методам этих объектов, можно выполнятьразличные операции над окном брaузера, загруженным в это окно HTML-документом, а также над отдельными объектами, размещенными в HTML-документе.

Объекты брaузера



• name. Имя окна, указанное при его открытии методом open, атакже в атрибуте TARGET тега <A> или в атрибуте NAME тега<FORM>.

• self, window. Синонимы имени окна. Относятся к текущему окну.• top. Синоним имени окна. Относится к окну верхнего уровня.• parent. Синоним имени окна. Относится к окну, содержащему

набор фреймов.• frames. Массив всех фреймов данного окна.• length. Количество фреймов в родительском окне.• status. Текущее сообщение, отображаемое в строке состояния окна

брaузера.

Свойства объекта window



• 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



Параметры внешнего вида окна

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]



• 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



• 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



• сlear. Удаление содержимого документа из окна просмотра.• write. Запись в документ произвольной HTML-конструкции.• writeln. Аналогичен write, но с добавлением символа перевода

строки в конец строки.• open. Открытие выходного потока для записи в HTML-документ

данных типа MIME при помощи методов write и writeln.• close. Закрытие потока данных, открытого методом open. В окне

будут отображены все изменения содержимого документа, сделанныесценарием после открытия потока.

Методы объекта document



Для каждой ссылки, размещенной в 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.

Ссылки в документе



Сценарий JavaScript встраивается в HTML-документ с помощью тега<script>.

<script type="text/javascript">



</script>

Текст сценария может быть оформлен, как комментарий, чтобы не былопроблем у посетителей, брaузеры которых не понимают JavaScript.Кроме того к символам, завершающим комментарий добавляется ещедва символа "/", т.к. некоторые браузеры рассматривает строку,состоящую только из символов "-->", как ошибочную.

Тег <script>



Если кода много, то его стоит вынести в отдельный файл, который подключаетсятоже тегом <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>

Внешние скрипты



Атрибут 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



<!DOCTYPE html>

<html>

<head>

<title></title>

<meta http-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>

Маленький пример



<body>

<form id="0" method="get">

<input id="1" style="width:55px"></input>

</form>

</body>

</html>

Маленький пример



example.js

var a=1;

a++;

//... 1393732 раза

a++;

alert(a);

Маленький пример 2

example2.js

var b=1;

b++;

//... 1021346 раз

b++;

alert(b);



<!DOCTYPE html>

<html>

<head>

<title></title>


<script src="js/example.js" type="text/javascript" async></script>

<script src="js/example2.js" type="text/javascript" async></script>

</head>

<body>

</body>

</html>




<!DOCTYPE html>

<html>

<head>

<title></title>


<script src="js/example.js" type="text/javascript" defer></script>

<script src="js/example2.js" type="text/javascript" defer></script>

</head>

<body>

</body>

</html>

Education

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