JavaScript

Точка с запятой


					a = 5 

					a = 5;

В javascript перевод строки почти всегда подразумевает точку с запятой. Здесь ошибка!


					var a = "длинная 

	  				строка"

Переменные

Правила наименования переменных:

Может состоять из букв, цифр и символа "_"
Начинается с буквы или символа "_"
Нельзя использовать пробел в названиях переменных, дефис "-", точки "."
Различается верхний и нижний регистр букв.


					var a;

					var name;

					var _;

					var _my_test;

					name и NaMe разные переменные

Оператор присвоения "="


					var a = 10;

					var name = 'Ololo';

					var _my_test = "text";

					var hidden = true;


					var name = 'Anton',

					    surname = 'Bakay',

					    position = 'Frontend';

Функция typeof() возвращает тип переменной.

Можно создать переменную без var. Но рекомендуется ВСЕГДА использовать var - это поможет избежать ошибок.

<html>
<head>
   <meta http-equiv="X-UA-Compatible" content="IE=8">
</head>
<body>
  <div id="test"></div>
<script>
    test = 5;
    alert(test);
</script>
</body>
</html>

Будет ошибка в IE младше 9 только если на странице есть элемент с совпадающим id. Если использовать var, ошибки не будет.

Дело в том, что почти все современные браузеры создают переменные для элементов, у которых есть id.

<div id="test"></div> <script> alert(test); // выведет элемент </script>

Зарезервированные слова


				abstract
				boolean
				break
				byte
				case
				catch
				char
				class
				const
				continue
				debugger
				default
				delete
				do
				double 	else
				enum
				export
				extends
				false
				final
				finally
				float
				for
				function
				goto
				if
				implements
				import
				in 	instanceof
				int
				interface
				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

Операторы

операция	название
=	присвоение
+	сложение
-	вычитание
*	умножение
/	деление
%	остаток от деления целых чисел
++	увеличение значения операнда на единицу
--	уменьшение значения операнда на единицу

Двойные операторы:

оператор	эквивалентный оператор присваивания
X+=Y	X=X+Y
X-=Y	X=X-Y
X*=Y	X=X*Y
X/=Y	X=X/Y
X%=Y	X=X%Y

Операторы сравнения:

операция	название
<	меньше
<=	меньше или равно
==	равно
===	равно(+проверяется тип переменных)
!=	не равно
!==	не равно(+проверяется тип переменных)
>=	больше или равно
>	больше

Логические операторы:

операция	название
&&	и
\|\|	или
!	не

Приоритет операторв

Оператор	Описание
. [] ()	Доступ к полям, индексация массивов, вызовы функций и группировка выражений
++ -- - ~ ! delete new typeof void	Унарные операторы, тип возвращаемых данных, создание объектов, неопределенные значения
* / %	Умножение, деление, деление по модулю
+ - +	Сложение, вычитание, объединение строк
<< >> >>>	Сдвиг битов
< <= > >= instanceof	Меньше, меньше или равно, больше, больше или равно, instanceof
== != === !==	Равенство, неравенство, строгое равенство, строгое неравенство
&	Побитовое И
^	Побитовое исключающее ИЛИ
\|	Побитовое ИЛИ
&&	Логическое И
\|\|	Логическое ИЛИ
?:	Условный оператор
= OP=	Присваивание, присваивание с операцией (например, += и &=)
,	Вычисление нескольких выражений

Поверить (4+5*2>=15)||(false)&&true

Строковые переменные

Методы строк:


					var str = 'a b c d';


					split()           // var arr = str.split([separator][, limit])

					charCodeAt(index)    //Возвращает значение Unicode соответствующее index

					String.fromCharCode(code, code,code,...) //Обратное charCodeAt(index)

					charAt(index)	    //вернет строку с символом, находящимся в строке под номером index

					concat()            //добавит к строке передаваемые в функцию строки(аналогично + для строк)

					lastIndexOf( string [, fromIndex])    	//вернет позицию последнего вхождения подстроки string в строке. fromIndex - начиная с номера

					search(regexp)	   //проверяет есть ли совпадение с регулярным выражением или строкой 

					match()

					toLowerCase()	      //toLowerCase

					toUpperCase()       //toUpperCase

					toLocaleLowerCase()

					toLocaleUpperCase()

					toString()       //преобразование в строку

					valueOf()       //вернет содержимое строки

					substring(indexA, [indexB])    //возвращает подстроку, начиная с позиции indexA до, но не включая indexB

					slice(beginSlice[, endSlice])         //похоже на substring

					indexOf(searchValue[, fromIndex])  //вернет позицию с которой начинается вхождение подстроки в строку

					substr(start[, length])       //вернет подстроку начиная с позиции start, длинной length

					replace(regexp, newSubStr|function)        // возвращает строку с заменной подстрокой

Свойство .length возвращает количество символов в строке

Конвертация типов переменных

Конвертация строки в число осуществляется вызовом Number()


					var str = "002"

					var a = Number(str) // 2


					var str = "002fff"

					var a = Number(str) //  NaN

Мягкая конвертация строки в число осуществляется вызовом parseFloat() и parseInt()


					parseFloat('0.02fdfdfdf'); //Вернет 0.02

					parseInt('2.02ddd'); // Вернет 2

					parseInt('a2.02ddd'); // Вернет NaN

Функции


					function sayHello(name) {

					    alert("Hello "+name)

					}


					function perimeter (a, b, c) {

					    var perimeter;

					    perimeter = a + b + c;

					    return perimeter;

					}

Функция прекращается, когда встречается инструкция return, даже если после нее есть еще код.
Если функция не содержит инструкции return, то функция выполняется полностью и НЕ возвращает никакого значения. Функция будет иметь неопределенное значение.

Область видимости переменных

Область видимости переменной: - это та часть программы, для которой эта переменная определена

Глобальная переменная определена в любом месте программы, даже внутри функций

Локальная переменная объявляется внутри функций и может быть использована только внутри функции. Параметры функций также считаются локальными переменными.


					a = 1

					function go() {

					    var a = 6

					}


					go()

					alert(a) // => 1


					a = 1

					function go() {

					    a = 6

					}


					go()

					alert(a) // => 6

Модальные окна. alert(), prompt(), confirm()

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

alert() - выводит на экран окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмет «ОК»

prompt(title [,default]) - с помощью title передается заголовок окна. default - задает текст по умолчанию

confirm(question) - с помощью title передается заголовок окна. default - задает текст по умолчанию

Условные операторы. if, else, '?'

if (условие) {код}

Если условие == true, то этот код выполнится

Пример:

var year = prompt('Введите год:', '');
if (year == 2012) alert('Вы угадали')

if (условие true) {
код //Этот код выполняется, если условие true
} else {
код //Этот код выполняется, если условие false
}

if (условие true) {
    код    //Этот код выполняется, если условие true
} else if (условие true) {
    код    //Этот код выполняется, если первое false, второе - true
} else {
    код    //Этот код выполняется, если все условия false
}

Пример

Написать игру "Угадай число"

при запуске программы, компьютер загадывает число от 1 до 100 случайным образом. И просит тебя угадать число. Ты через промпт вводишь числа, а программа тебе говорит больше, или меньше. когда угадаешь число, тебя нужно поздравить и предложить сыграть еще раз

(age > 14) ? true : false

Условные операторы. Switch Case

var a = 3;
switch (a) {
    case 1: console.log('Один');
        break;
    case 2: console.log('Два');
        break;
    case 3: console.log('Три');
        break;
    default: console.log('Дефолт');
}

Выполнение одних операций для нескольких вариантов

var a = 2+2;
switch (a) {
    case 4:
        alert('Верно!');
    break;
    case 3:
    case 5:
        alert('Неверно!');
        break;
    default:
        alert('Я таких значений не знаю');
}

Цикл While

while (условие) {
// код, тело цикла
}

Пример:

var i = 0;
while (i < 3) {
console.log(i);
i++;
}

Цикл do..while

do {
// тело цикла
} while (условие);

Пример:

var i = 0;
do {
console.log(i);
i++;
} while (i < 3);

Цикл for

for (начало; условие; шаг) {
// тело цикла
}

Пример:

var i;
for (i=0; i<3; i++) {
console.log(i);
}

Или так:

for (var i=0; i<3; i++) {
console.log(i);
}

Любая часть for может быть пропущена. ; обязательно должны присутствовать, иначе будет ошибка синтаксиса.

var i;
for (i=0; i<3; i++) {
console.log(i);
}

break и continue

Выйти из цикла можно в любой момент, используя директиву break

var i=0;
while(1) {
    i++;
    if (i==5) break;
    console.log(i);
}

Директива continue прекращает выполнение текущей итерации цикла.

for (var i = 0; i < 10; i++) {
if (i % 2 == 0) continue;
console.log(i);
}

Метки

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

outer:
for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 3; j++) {
        var input = prompt('Значение в координатах '+i+','+j, '');
        if (input == null) break outer;
    }
}
alert('Готово!');

Задача. Какая запись в консоле будет после выполнения цикла?

outerloop:
for(var i = 0; i < 10; i++){
    innerloop:
    for(var j = 0; j < 10; j++) {
        if (j > 3) break;
        if (i == 2)break innerloop;
        if (i == 4)break outerloop;
        console.log("i = "+ i + " j = "+ j);
    }
}
console.log("Final i = "+ i +" j = "+ j);

Массивы

Массив: - это тип данных, который состоит из пронумерованных фрагментов данных. Фрагменты данных называются элементами массива, а номера элементов - индексами

Элементы массива могут принадлежать различным типам: строки, числа... Нумерация элементов массива начинается с нуля, то есть первый элемент массива будет иметь индекс 0.

mass[0] = 1.234;
mass[1] = 5;
...
mass[12] = 'string';
mass[13] = true;

Синтаксис для создания нового массива:

var arr = []; //создаст пустой массив с именем arr
var numbers = ['один', 'два', 'три'] //создаст массив с тремя элеменами
var arr2 = new Array('one', 'two', 'three');//создаст массив с тремя элементами
var arr2 = new Array(5);//создаст массив с пятью элементами, значение которых будет undefined!!!

Методы массивов

numbers.pop() //удаляет последний элемент массива
numbers.push('четыре', 'пять') //добавляет новый элемент в конец массива
numbers.shift() //удаляет первый элемент из массива и возвращает его
numbers.unshift() //добавляет элемент в начало массива
numbers.reverse() //обращает порядок расположения элементов(Не создает новый массив, делает изменения в исходном массиве)
numbers.sort() //Сортирует элементы массива(Не создает новый массив, делает изменения в исходном массиве)
numbers.join(string) //вернет строку из элементов массива, разделенные строкой string

numbers.length //возвращает количество элементов в массиве
numbers.length = 0 //длина массива становится равной нулю, то есть происходит очистка массива

var arr = [1,2,3];

var a = arr;
a[0] = 5;

alert(arr[0]);
alert(a[0]);

Объекты

Создание объекта

Альтернативный синтаксис работы со свойствами объектов позволяет создавать и обращаться к свойствам имена которых пишутся через пробел(через точку обратиться к таким свойстам не получится).

person['name'] = 'Вася';//равносильно person.name

Удаление свойств объекта. Единственный способ удалить свойство у объекта — использовать оператор delete

delete person.name;//удалит свойство name

Объект Math

Объект Math не нужно создавать как друге глобальные объекты.

Свойства

Math.E      //Экспонента (2.718281828459045)
Math.LN2    //Натуральный логарифм 2 (0.6931471805599453)
Math.LOG2E //Логарифм E по основанию 2 (1.4426950408889634)
Math.LOG10E //Логарифм E по основанию 10 (0.4342944819032518)
Math.LN10   //Натуральный логарифм 10 (2.302585092994046)
Math.PI     //Число "Пи" - отношение длины окружности к ее диаметру (3.141592653589793)
Math.SQRT1_2//Корень из 1/2 (0.7071067811865476)
Math.SQRT2 //Корень из 2 (1.4142135623730951)

Методы

Math.abs()
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()

События

События происходят в результате действий пользователя(нажатие клавиш клавиатуры и мыши, наведение курсора мыши, изменение размера окна, загрузка документя, изображения).

События мыши:

onmousedown
onmouseup
onclick
ondblclick
onmousemove
onmouseover
onmouseout
onselectstart
onselect

События клавиатуры:

onkeydown
onkeyup
onkeypress
onhelp

События фокуса:

onfocus
onblur

События загрузки:

onload
onunload

Обработчики событий

Нужно чтобы выполнялась функция после того, как произойдет событие(например, клик мыши) на каком-то элементе. Для этого нужно связать функцию(обработчик события) с событием. Это можно сделать несколькими способами.

Обработчик события в аттрибутах элемента:

При клике на кнопке, выполнится функция alert(). Пример:

Такой способ удобен для коротких функций. Для более сложных лучше вызвать созданную ранее функцию:

Обработчик события в свойствах DOM-объекта:

<input id="button">
<script>
    document.getElementById('button').onclick = function() {
        alert('Клик!');
    }
</script>

Обработчик события как ранее созданная функция:

<input id="button">
<script>
function func(){alert('ky-ky')}
document.getElementById('button').onclick = func; //имя функции пишется без скобок. Если добавить скобки, то будет присваиваться результат выполнения функции
</script>

Невозможно назначить несколько обработчиков события таким образом(для этого существуют другие методы). Последний обработчик заменит старый.

С помощью такого метода можно назначить несколько обработчиков собитий для одного элемента. Но метод отличается в браузерах IE. Для совместимости используется подобный код:

Всплытие событий

Кроссбраузерное решение для прекращения всплытия событий:

element.onclick = function(event) {
    event = event || window.event; // Кроссбраузерно получить событие
    if (event.stopPropagation) { // существует ли метод?
        // Стандартно:
        event.stopPropagation();
    } else {
        // Вариант IE<9
        event.cancelBubble = true;
    }
}

Поиск элементов в DOM

var b1 = document.getElementById('b1')//вернет элемент с id="idElement" и сохранит его в переменной

document.childNodes //вернет массив детей элемента
document.childNodes[1] //вернет второй элемент из массива детей элемента
document.childNodes[1].childNodes

b1.parentNode //вернет родителя
b1.firstChild
b1.lastChild
b1.nextSibling
b1.previousSibling

document.documentElement //вернет html тег
document.body //вернет body тег

element.getelementsByTagName('tagName') //вернет все теги tagName
element.getelementsByClassName('className') //вернет все элемнеты с классом className (работает в ие 9+)
element.querySelectorAll('css')//вернет все элемнеты по css селектору CSS3, в IE8 по CSS 2.1
element.querySelector('css')//вернет только первый элемент по селектору

node.cloneNode(deep)//клонирует в память элемент

Работа с DOM

document.createElement('div') //Создаст в памяти тег div
document.createTextNode('text') //Создаст в памяти текстовый узел 'text'

element.tagName//В этом свойстве хранится название тега элемента
element.innerHTML//В этом свойстве хранится html код, находящийся внутри элемента

parrent.appendChild(newChild)//Метод вставляет элемент newChild в конец элемента parrent и возвращает ссылку на вставленный элемент
parrent.removeChild(сhild)//Метод удаляет из DOM'а элемент сhild из родителя parrent и возвращает ссылку на удаленный элемент(Элемент удалился из дома, но его можно сохранить в память)
var replacedNode = parentNode.replaceChild(newChild, oldChild);//Метод заменяет один элемент другим и возвращает старый(replacedNode==oldChild)

var insertedElement = parentElement.insertBefore(newElement, referenceElement);//Если referenceElement не передан или равен null, то newElement вствится в начало элемента parentElement. Если referenceElement передан, то новый элемент вставится ПЕРЕД(Before) ним. Метод вернет ссылку на новый элемент, по сути это будет newElement
element.insertAdjacentHTML(position, html);//position принимает значения: beforebegin, afterbegin, beforeend, afterend. Вставляет переданный html код в соответствующую позицию отностительно элемента element

setTimeout и setInterval

Обе функции позволяют запланировать выполнение некоторой функции с заданной задержкой или интервалом. Они возвращают уникальный идентификатор, по которому в дальнейшем можно будет отменить выполнение запланированной функции

setTimeout

function hello() {console.log('Hello')}
var timeuoutId = setTimeout(hello, 1000); //Функция hello() вызовется через одну секунду(1000 миллисекунд)

setInterval

function hello() {console.log('Hello')}
var intervalID = setInterval (hello, 1000); //Функция hello() будет вызываться каждую секунду(1000 миллисекунд)

Очистка таймаутов и интервалов

clearTimeout(timeuoutId); //Отменит расписание для вызова функции hello()
clearInterval(intervalID); //Отменит периодническое выполнение функции hello();

JavaScript

Комментарии

Точка с запятой

Переменные

Правила наименования переменных:

Зарезервированные слова

Операторы

Приоритет операторв

Строковые переменные

Конвертация типов переменных

Функции

Область видимости переменных

Модальные окна. alert(), prompt(), confirm()

Условные операторы. if, else, '?'

Условные операторы. Switch Case

Цикл While

Цикл do..while

Цикл for

break и continue

Метки

Массивы

Объекты

Объект Math

Свойства

Методы

События

События мыши:

События клавиатуры:

События фокуса:

События загрузки:

Обработчики событий

Обработчик события в аттрибутах элемента:

Обработчик события в свойствах DOM-объекта:

Всплытие событий

Поиск элементов в DOM

Работа с DOM

setTimeout и setInterval

setTimeout

setInterval

Очистка таймаутов и интервалов