Пропустить навигацию

Лекция 2. Основы JavaScript

JavaScript – Язык сценариев для придания интерактивности web-страницам.

Язык программирования JavaScript (JS) придает веб-страницам возможность реагировать на действия пользователя и превращать статичные страницы в динамические, так, чтобы страницы буквально "оживали" на глазах.

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

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

Есть как минимум три замечательных особенности JavaScript:

  • · Полная интеграция с HTML/CSS.
  • · Простые вещи делаются просто.
  • · Поддерживается всеми распространёнными браузерами и включён по умолчанию.

Этих трёх вещей одновременно нет больше ни в одной браузерной технологии.

Поэтому JavaScript и является самым распространённым средством создания браузерных интерфейсов.

В этой лекции мы рассмотрим основы языка JavaScript: важнейшие понятия и синтаксис.

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

<script type="text/javascript" > </script>

Ниже приведен пример javascript программы:

<html>
<head><title>Примеры</title></head>
<script type="text/javascript">
var х = 5;
var у = х + 3;
alert(y);
</script>
<body>

Тело html

</body>

</html>

Для того, чтобы прикрепить внешний файл с расширением .js на страницу нужно в тег script добавить следующий атрибут src со значением, в котором прописываем нужный файл:

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

Ввод и вывод данных:

Метод – фрагмент кода многократного использования, предназначенный для решения общих задач.

В JavaScript используются три стандартных метода для ввода и вывода данных: alert(), prompt() и confirm(). Рассмотрим эти методы браузера подробнее.

1.2.1. alert

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

alert ("сообщение”)

Если ваше сообщение представляет собой определенный набор символов, то его необходимо заключить в двойные или одинарные кавычки. Например, alert("Hello, World")

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

Диалоговое окно, выведенное на экран методом alert(), можно убрать, щелкнув на кнопке ОК. До тех пор пока вы не сделаете этого, переход к ранее открытым окнам невозможен. Окна, обладающие свойством останавливать все последующие действия пользователя и программ, называются модальными. Таким образом, окно, создаваемое посредством alert(), является модальным.

1.2.2. confirm

Метод confirm позволяет вывести диалоговое окно с сообщением и двумя кнопками — ОК и Отмена (Cancel). Этот метод возвращает логическую величину, значение которой зависит от того, на какой из двух кнопок щелкнул пользователь. Если он щелкнул на кнопке ОК, то возвращается значение true; если же он щелкнул на кнопке Отмена, то возвращается значение false. Возвращаемое значение можно обработать в программе. Синтаксис применения метода confirm имеет следующий вид:

confirm(сообщение)

Если ваше сообщение представляет собой определенный набор символов, то его необходимо заключить в кавычки, двойные или одинарные. Например, confirm("Bы действительно хотите завершить работу?")

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

Диалоговое окно, выведенное на экран методом confirm(), можно убрать щелчком на любой из двух кнопок — ОК или Отмена. До тех пор пока вы не сделаете этого, переход к ранее открытым окнам невозможен. Окно, создаваемое посредством confirm(), является модальным.

 1.2.3. prompt

Метод prompt позволяет вывести на экран диалоговое окно с сообщением, а также с текстовым полем, в которое пользователь может ввести данные (рис. 1.7).

Кроме того, в этом окне предусмотрены две кнопки: ОК и Отмена (Cancel). В отличие от методов alert() и confirm() данный метод принимает два параметра: сообщение и значение, которое должно появиться в текстовом поле ввода данных по умолчанию. Если пользователь щелкнет на кнопке ОК, то метод вернет содержимое поля ввода данных, а если он щелкнет на кнопке Отмена, то возвращается логическое значение false. Возвращаемое значение можно затем обработать в программе. Синтаксис применения метода prompt имеет следующий вид:

prompt(сообщение, значение_поля_ввода_данных);

Параметры метода prompt() не являются обязательными. Если вы их не укажете, то будет выведено окно без сообщения, а в поле ввода данных подставлено значение по умолчанию — undefined (не определено). Если вы не хотите, чтобы в поле ввода данных появлялось значение по умолчанию, то подставьте в качестве значения второго параметра пустую строку "". Например,

prompt("Введите Ваше имя, пожалуйста", "");

Комментарии

Со временем программа становится большой и сложной. Появляется необходимость добавить комментарии, которые объясняют, что происходит и почему.

Комментарии могут находиться в любом месте программы и никак не влияют на ее выполнение. Интерпретатор JavaScript попросту игнорирует их.

Однострочные комментарии начинаются с двойного слэша //. Текст считается комментарием до конца строки:

 Многострочные комментарии начинаются слешем-звездочкой "/*" и заканчиваются звездочкой-слэшем "*/".

Переменная

Переменная JS — это именованная область в памяти, которая хранит в себе данные (значение). К этим данным можно получить доступ, обратившись по имени переменной, в которой они хранятся.

Для объявления или, другими словами, создания переменной используется ключевое слово var:

var message;


После объявления, можно записать в переменную данные:

var message;
message = 'Привет'; // сохраним в переменной строку


Всегда определяйте переменные через var. Это хороший тон в программировании и помогает избежать ошибок.

Константа — это постоянная величина, которая никогда не меняется. Как правило, их называют большими буквами, через подчёркивание. Например: 

var COLOR_RED = "#F00";
var COLOR_GREEN = "#0F0";
var COLOR_BLUE = "#00F";
var COLOR_ORANGE = "#FF7F00";


Во-первых, константа — это понятное имя, в отличие от строки "#FF7F00".
 

Технически, константа является обычной переменной, то есть её можно изменить. Но мы договариваемся этого не делать.

Зачем нужны константы?

Во-вторых, опечатка в строке может быть не замечена, а в имени константы её упустить невозможно — будет ошибка при выполнении.

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

Имена переменных

На имя переменной в JavaScript наложено несколько ограничений.

  1. Имя может состоять из: букв, цифр, символов $ и _
  2. Первый символ не должен быть цифрой.
  3. В качестве имён переменных нельзя использовать ключевые слова и зарезервированные слова.

Ключевые слова в JavaScript — это слова, которые существуют в ядре языка JavaScript и встроены в его синтаксис, например слово var.

Зарезервированные слова в JavaScript — это слова, которые пока еще не существуют в ядре языка JavaScript и не встроены в его синтаксис, но в будущем, эти слова могут быть внедрены в ядро JavaScript, например слово abstract.

Например: 

var myName;
var test123;

Типы данных

Что здесь особенно интересно - доллар '$' и знак подчеркивания '_' являются такими же обычными символами, как буквы.

Прежде чем рассмотреть типы данных JavaScript, познакомимся сначала с оператором typeof, он позволяет узнать какой тип данных присвоен переменной, делается это следующим образом:

alert(typeof имяПеременной);

После этого скрипт должен выдать какое-либо сообщение: number, string, boolean, undefined, object.

1.Число number:

var n = 123;
n = 12.345;

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

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

Например, бесконечность Infinity получается при делении на ноль:

alert( 1 / 0 ); // Infinity

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

alert( "нечисло" * 2 ); // NaN, ошибка

2. Строка stringОшибка вычислений NaN будет результатом некорректной математической операции, например:

var str = "Мама мыла раму";
str = 'Одинарные кавычки тоже подойдут';

В JavaScript одинарные и двойные кавычки равноправны. Можно использовать или те или другие.

3. Булевый (логический) тип boolean. У него всего два значения -  true (истина) и false (ложь).

Как правило, такой тип используется для хранения значения типа да/нет, например:

var checked = true; // поле формы помечено галочкой
checked = false;    // поле формы не содержит галочки

4. Null — специальное значение. Оно имеет смысл «ничего». Значение null не относится ни к одному из типов выше, а образует свой отдельный тип, состоящий из единственного значения null:  

var age = null;

В JavaScript null – просто специальное значение, которое имеет смысл «ничего» или «значение неизвестно».

В частности, код выше говорит о том, что возраст age неизвестен.

5. Undefined — специальное значение, которое, как и null, образует свой собственный тип. Оно имеет смысл «значение не присвоено».

Если переменная объявлена, но в неё ничего не записано, то ее значение как раз и есть undefined:

var u;
alert(u); // выведет "undefined"

Можно присвоить undefined и в явном виде, хотя это делается редко: 

var x = 123;
x = undefined;

В явном виде undefined обычно не присваивают, так как это противоречит его смыслу. Для записи в переменную «пустого значения» используется null.Можно присвоить undefined и в явном виде, хотя это делается редко:

6. Объекты object.

Первые 5 типов называют «примитивными».

Особняком стоит шестой тип: «объекты». Объект (т. е. член объектного типа данных) представляет собой коллекцию значений (либо элементарных, таких как числа и строки, либо сложных, например других объектов). К нему относятся, например, даты, он используется для коллекций данных и для многого другого.

Тип данных определяется после того, как переменной или константе было присвоено значение.

Операции в JS

Мы рассмотрим 4 основных вида операций в JS:
1. Операция присваивания,
2. Арифметические операции,
3. Операции сравнения,
4. Логические операции.

Термины: «унарный», «бинарный», «операнд»

У операторов есть своя терминология, которая используется во всех языках программирования.

Операнд — то, к чему применяется оператор. Например: 5 * 2 — оператор умножения с левым и правым операндами.

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

  • оператор унарный минус "-" меняет знак числа на противоположный:
    var x = 3;
    alert( -x );     // -3, унарный минус
    alert( -(x+2) ); // -5, унарный минус применён к результату сложения x+2
    alert( -(-3) );  // 3
  • унарный " +" — ничего не делает в арифметическом плане, но зато приводит операнд к числовому типу

Бинарным называется оператор, который применяется к двум операндам.

  • Бинарный минус:
    var x = 1, y = 3;
    alert( y - x ); // 2
  • Бинарный плюс
    alert(2 + 2); // 4

Арифметические операторы

Базовые арифметические операторы: плюс +, минус -, умножить *, поделить /.

Например:

var i = 2;
i = (2 + i) * 3 / i;
alert(i); // 6

Aрифметический оператор %. Его результат a % b — это остаток от деления a на b.

Например:

alert(5 % 2); // 1, остаток от деления 5 на 2
alert(8 % 3); // 2, остаток от деления 8 на 3
alert(6 % 3); // 0, остаток от деления 6 на 3

Сложение строк, бинарный +

Если бинарный оператор + применить к строкам, то он их объединяет в одну:

var a = "моя" + "строка";
alert(a); // моястрока

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

Например:

alert( '1' + 2 ); // "12"
alert( 2 + '1' ); // "21"

Это приведение к строке — особенность бинарного оператора "+".

Остальные арифметические операторы работают только с числами и всегда приводят аргументы к числу.

Например:

alert( '1' - 2 ); // -1
alert( 6 / '2'); // 3


Унарный плюс +

широко применяется, так как имеет полезный эффект — преобразование значения в число.

Например, у нас есть два числа, в форме строк, и нужно их сложить. Бинарный плюс сложит их как строки, поэтому используем унарный плюс, чтобы преобразовать к числу:

var a = "2";
var b = "3";
alert( a + b ); // "23", так как бинарный плюс складывает строки
alert( +a + b ); // "23", второй операнд - всё ещё строка
alert( +a + +b); // 5, число, так как оба операнда предварительно преобразованы в числа

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

Оператор присваивания выглядит как знак равенства =:

var i = 1 + 2;
alert(i); // 3

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

Возможно присваивание по цепочке:

var a, b, c;
a = b = c = 2 + 2;
alert(a); // 4
alert(b); // 4
alert(c); // 4

Такое присваивание работает справа-налево, то есть сначала вычисляется самое правое выражение 2+2, присвоится в c, затем выполнится b = c и, наконец, a = b.

Оператор "=" возвращает значение

Все операторы возвращают значение. Вызов x = выражение записывает выражение в x, а затем возвращает его. Благодаря этому присваивание можно использовать как часть более сложного выражения:

var a = 1;
var b = 2;
var c = 3 - (a = b + 1);
alert(a); // 3
alert(c); // 0

В примере выше результатом (a = b + 1) является значение, которое записывается в a (т.е. 3). Оно используется для вычисления c.

Приоритет

В том случае, если в выражении есть несколько операторов - порядок их выполнения определяется приоритетом.

 Как вы знаете, умножение выполняется раньше сложения, т.к. его приоритет выше, а скобки явно задают порядок выполнения. Но в JavaScript — гораздо больше операторов, поэтому существует целая таблица приоритетов.

Она содержит как уже пройденные операторы, так и те, которые мы еще не проходили. В ней каждому оператору задан числовой приоритет. Тот, у кого число меньше — выполнится раньше. Если приоритет одинаковый, то порядок выполнения — слева направо.

Полная таблица приоритетов:

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

Посмотрим на таблицу в действии.

В выражении x = 4 / 2 + 2 есть три оператора: присвоение =, деление * и сложение +. Приоритет умножения * равен 5, оно выполнится первым, затем произойдёт сложение +, у которого приоритет 6, и после них — присвоение =, с приоритетом 17.

Инкремент/декремент: ++, --

Одной из наиболее частых операций в JavaScript, как и во многих других языках программирования, является увеличение или уменьшение переменной на единицу.

Для этого существуют даже специальные операторы:

Инкремент ++ увеличивает на 1:

var i = 2;
i++;      // более короткая запись для i = i + 1.
alert(i); // 3

Декремент -- уменьшает на 1:

var i = 2;
i--;      // более короткая запись для i = i - 1.
alert(i); // 1

Инкремент/декремент можно применить только к переменной. Код 5++ даст ошибку.

Вызывать эти операторы можно не только после, но и перед переменной: i++ (называется «постфиксная форма») или ++i («префиксная форма»).

Обе эти формы записи делают одно и то же: увеличивают на 1. Однако, между ними существует разница - постфиксная форма i++ отличается от префиксной ++i тем, что возвращает старое значение, бывшее до увеличения.

Например:

var i = 1;
var a = ++i; // (*)
alert(a); // 2

В строке (*) вызов ++i увеличит переменную, а затем вернёт ее значение в a. То есть, в a попадёт значение i после увеличения.

 В примере ниже в a попадёт старое значение i, равное 1:

var i = 1;
var a = i++; // (*)
alert(a); // 1

Если результат оператора не используется, а нужно только увеличить/уменьшить переменную — нет разницы, какую форму использовать:

var i = 0;
i++;
++i;
alert(i); // 2

Если хочется тут же использовать результат, то нужна префиксная форма:   

var i = 0;
alert( ++i ); // 1


Если нужно увеличить, но нужно значение переменной до увеличения — постфиксная форма:   

var i = 0;
alert( i++ ); // 0


Инкремент/декремент можно использовать в любых выражениях.

При этом он имеет более высокий приоритет и выполняется раньше, чем арифметические операции:

var i = 1;
alert( 2 * ++i ); // 4
var i = 1;
alert( 2 * i++ ); // 2, выполнился раньше но значение вернул старое


При этом, нужно с осторожностью использовать такую запись, потому что при чтении кода зачастую неочевидно, что переменая увеличивается. Три строки — длиннее, зато нагляднее:

var i = 1;
alert( 2 * i );
i++;

Посмотрите, понятно ли вам, почему код ниже работает именно так?

var a = 1, b = 1, c, d;
c = ++a; alert(c); // 2
d = b++; alert(d); // 1
c = (2+ ++a); alert(c); // 5
d = (2+ b++); alert(d); // 4
alert(a); // 3
alert(b); // 3


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

Оператор

Операция

Типы значений

==
!=
===
!==
<, <=, >, >=
<, <=, >, >=

Проверка равенства (эквивалентности)
Проверка неравенства
Проверка строгого равенства (идентичности)
Проверка неидентичности
Сравнение числовых значений
Сравнение строк

любое, любое→булево
любое, любое→булево
любое, любое→булево
любое, любое→булево
число, число→булево
строка, строка→булево

При сравнении строк, буквы в нижнем регистре всегда больше, чем буквы в верхнем регистре. Цифра находящаяся в строке, при сравнении всегда меньше буквенного символа в любом регистре.

"a" > "Z"  // true
"9" < "a"  // true

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

"строка" > "стрОка"  // true

Операторы эквивалентности (==) и идентичности (===) проверяют два значения на совпадение используя два разных способа определения совпадения. Оператор идентичности проверяет равенство значений не используя преобразование типов для своих операндов. Оператор эквивалентности является менее строгим и допускает преобразование типов своих операндов при сравнении значений. Оба оператора принимают операнды любого типа и возвращают true, если значения их операндов совпадают, и false, если они различны.Сравнивая строки, интерпретатор JavaScript сначала проверяет на несовпадение первый символ строки, если разницы не обнаруживается, происходит переход к следующему символу и так пока не будет найдено различие или не будет достигнут конец строки.

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

Оператор идентичности производит сравнение значений операндов без преобразования типов руководствуясь следующими правилами:

  • Если два значения имеют различные типы, они не идентичны.
  • Если оба значения являются null или undefined, они идентичны.
  • Если оба значения являются true или false, они идентичны.
  • Если одно или оба значения являются NaN, они не идентичны.
  • Если оба значения являются числами с одним и тем же значением, они идентичны. 0 и -0 идентичны.
  • Если оба значения являются строками и содержат одни и те же 16-битные последовательности, они идентичны. Если строки отличаются длиной или содержимым, они не идентичны. Если две строки выглядят одинаково, но содержат различные последовательности 16-битных значений, они не идентичны.
  • Если оба значения ссылаются на один и тот же объект, массив или функцию, то они идентичны. Если они ссылаются на различные объекты (массивы или функции) они не идентичны.
'7' === 7               // false - разные типы данных
null === null           // true
undefined === undefined // true
true === true           // true
false === false         // true
NaN === NaN             // false
(2 + 2) === 4           // true - два одинаковых числа
0 === -0                // true
'строка' === 'Строка'   // false - первые символы строки разные

Оператор эквивалентности использует менее строгие правила, чем оператор идентичности. Если два значения имеют одинаковый тип, они проверяются на идентичность как было описано выше. Если значения операндов имеют разные типы, оператор == выполняет неявное преобразование типов и затем пытается выполнить сравнение:

  • Если одно значение null, а другое undefined, то они равны.
  • Если объект сравнивается с числом или строкой, он преобразуется используя методы valueOf или toString к примитивному значению - строке или числу. Если преобразовать объект не удаётся - генерируется ошибка выполнения.
  • Если одно значение является числом, а другое - строкой, то строка преобразуется в число и выполняется сравнение с преобразованным значением.
  • Если один из операндов имеет значение true, оно преобразуется в число 1, если значение false - в число 0.
null == undefined        // true
"123" == 123             // true
true == "1"              // true
false == 0               // true
(4+2) == 6               // true
"my car" == "my car"     // true
4 == 5                   // false

Операторы неравенства (!=) и неидентичности (!==) выполняют проверки, в точности противоположные операторам == и ===. Например, оператор неравенства != возвращает false, если два значения равны друг другу в том смысле, в каком они считаются равными оператором ==, и true в противном случае.

4 != 3                  // true
"my car" != "My car"    // true
"4" != 4                // false
"4" !== 4               // true
NaN != NaN              // true
{x: 2} !== {x: 2}       // true

Вызов операторов с присваиванием

Часто нужно применить оператор к переменной и сохранить результат в ней же, например:

var n = 2;n = n + 5; n = n * 2.

Эту запись можно укоротить при помощи совмещённых операторов:

Оператор

Пример

Эквивалент

+=

a += b

a = a + b

-=

a -= b

a = a - b

*=

a *= b

a = a * b

/=

a /= b

a = a / b

%=

a %= b

a = a % b

<<=

a <<= b

a = a << b

>>=

a >>= b

a = a >> b

>>>=

a >>>= b

a = a >>> b

&=

a &= b

a = a & b

|=

a |= b

a = a | b

^=

a ^= b

a = a ^ b

Вот так:

var n = 2;
n += 5; // теперь n=7 (работает как n = n + 5)
n *= 2; // теперь n=14 (работает как n = n * 2)
alert(n); // 14

Все эти операторы имеют такой же приоритет, как обычное присваивание, то есть выполняются после большинства других операций.

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

Побитовые операторы рассматривают аргументы как 32-разрядные целые числа и работают на уровне их внутреннего двоичного представления. Эти операторы не являются чем-то специфичным для JavaScript, они поддерживаются в большинстве языков программирования.

Операнды всех побитовых операторов интерпретируются как 32 битные целые числа со знаком и старшим битом слева и дополнением до двойки.

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

Дополнение до двойки означает, что двоичный вид числа, обратного данному (например, 5 и обратное ему -5) получается путем инвертирования (оператор побитовое НЕ) всех битов числа с добавлением 1.

Поддерживаются следующие побитовые операторы:

Обозначение

Операция

Пример

&

AND (Поразрядное И)

15 & 9 даёт 9 (1111 & 1001 = 1001)

|

OR (Поразрядное ИЛИ)

15 | 9 даёт 15 (1111 | 1001 = 1111)

^

XOR (Поразрядное исключающее ИЛИ)

15 ^ 9 даёт 6 (1111 ^ 1001 = 0110)

~

NOT (Отрицание)

~9 = -10

0000 0000 0000 0000 0000 0000 0000 1001

1111 1111 1111 1111 1111 1111 1111 0110

<< 

LEFT SHIFT (Сдвиг влево)

9 << 2 = 36

1001 << 100100

>> 

RIGHT SHIFT (Сдвиг вправо)

9 >> 2 = 2

1001 >> 10

>>> 

ZERO-FILL RIGHT SHIFT (Сдвиг вправо с заполнением нулями)

9 >>> 2 = 2

0000 0000 0000 0000 0000 0000 0000 1001

0000 0000 0000 0000 0000 0000 0000 0010

-9>>>2 = 1073741821

1111 1111 1111 1111 1111 1111 1111 0111

0011 1111 1111 1111 1111 1111 1111 1101

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

Оператор

Операция

Типы значений

&&
||
!

Логическое И
Логическое ИЛИ
Логическое НЕ (инверсия)

любое, любое→любое
любое, любое→любое
любое→булево

Логические операторы используются с булевыми значениями и возвращают булево значение. Однако, в JavaScript операторы && и || возвращают не булево значение, а значение одного из операндов.

Оператор логическое И (&&) выполняет операцию И над двумя операндами. Его работа начинается с вычисления значения левого операнда. Если левый операнд имеет значение, которое может быть преобразовано в false - возвращается значение левого операнда, при этом значение правого операнда вычисляться не будет:

var y = 1;
var x = 0 && ++y;  // ++y не будет вычисляться
alert("x: " + x);
alert("y: " + y);

Если левый операнд имеет значение, которое может быть преобразовано в true, оператор && вычисляет значение правого операнда, и возвращает значение правого операнда.

var x = 1 && 2;
var y = 1 && 0;
alert(x);  // 2
alert(y);  // 0

Оператор логическое ИЛИ (||) выполняет операцию ИЛИ над двумя операндами. Его работа начинается с вычисления значения левого операнда. Если левый операнд имеет значение, которое может быть преобразовано в true - возвращается значение левого операнда, при этом значение правого операнда вычисляться не будет:

var y = 1;
var x = 1 || ++y;  // ++y не будет вычисляться
alert("x: " + x + "<br>");
alert("y: " + y);

Если левый операнд имеет значение, которое может быть преобразовано в true, оператор && вычисляет значение правого операнда, и возвращает значение правого операнда.

var x = 0 || 2;
var y = null || 0;
alert(x + "<br>");  // 2
alert(y);           // 0

Хотя операторы && и || могут быть использованы для возвращения небулевых значений, они всё же логические, так как возвращаемые значения могут быть приведены к булевому типу.Если левый операнд имеет значение, которое может быть преобразовано в false, оператор || вычисляет значение правого операнда, и возвращает значение правого операнда.

События

 События и обработчики событий являются очень важной частью для программирования на языке JavaScript. События, инициируются теми или иными действиями пользователя. Если он щелкает по некоторой кнопке, происходит событие "Click". Если указатель мыши пересекает какую-либо ссылку гипертекста - происходит событие MouseOver. Существует несколько различных типов событий.

Обработчики Событий JavaScript

Событие

Применяется к

Возникает, когда

Обработчик

Blur    

окнам и всем элементам формы

пользователь убирает фокус ввода с окна или элемента формы          

onBlur

Click

кнопкам, radio-кнопкам, переключателям/checkboxes, кнопкам submit и reset, гиперссылкам

пользователь щёлкает по элементу формы или кнопке

onClick

Focus

окнам и всем элементам формы

пользователь передаёт фокус окну или элементу формы

onFocus

Load

телу документа        

 

пользователь загружает страницу в Navigator

onLoad

MouseOut

областям, гиперссылкам

пользователь перемещает курсор за пределы клиентской карты изображений или гиперссылки

onMouseOut

 

MouseOver

гиперссылкам          

 

пользователь перемещает курсор над гиперссылкой

onMouseOver

Resize

окнам

пользователь или скрипт изменяет размер окна

onResize

Unload

телу документа

пользователь покидает страницу

onUnload