Быстрый старт

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

abstract as boolean break byte
case catch char class continue
const debugger default delete do
double else enum export extends
false final finally float for
function goto if implements import
in instanceof int interface is
long namespace native new null
package private protected public return
short static super switch synchronized
this throw throws transient true
try typeof use var void
volatile while with

JavaScript уже встроен в браузер, поэтому ничего устанавливать не надо. Писать сценарии можно в любом текстовом редакторе.

Типы данных

В JavaScript три основных типа данных: text, number и boolean.

Тип text - Текстовые данные используются для хранения набора символов, например имени вашего любимого кота. Текст всегда заключается в кавычки ("") или в апострофы ('').

Тип number - Цифры используются для хранения числовых данных, например, количество котят. Числа могут быть целыми и десятичными.

Тип boolean - Логические данные имеют два значения - true и false.

Для создания переменной применяется ключевое слово var, после которого следует её имя. Также её можно сразу инициализировать. Неинициализированная переменная имеет статус undefined, пока ей не будет присвоено значение.

var catName = "Барсик";

После создания переменной ключевое слово var использовать уже не нужно.

Начиная с ES6, вместо var следует использовать слова const/let.

Язык чувствителен к регистру, переменные name и Name будут считаться разными.

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

Можно создать новую переменную, используя математические действия с другими переменными. Узнаем, сколько секунд содержится в часе:

var secondsInMinute = 60; // в минуте 60 секунд
var minutesInHour = 60; // в часе 60 минут
// создаем новую переменную путем умножения
var secondsInHour = secondsInMinute * minutesInHour;
// выводим результат 
console.log(secondsInHour);

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

Для увеличения и уменьшения значения переменной на единицу используются специальные операторы инкремента и декремента

var age = 5;
age++; // стало 6

Чтобы увеличить или уменьшить значение переменной на заданное число, можно использовать укороченную запись.

var x = 10;
x += 5; // увеличили на 5

Таким способом можно прибавлять (+=), отнимать (-=), умножать (*=) и делить (/=).

Для точного сравнения двух чисел используется тройной знак равенства ===.

Двойной знак равенства означает "практически равно". Если сравнить число 5 со строкой "5", то при двойном знаке равенства переменные будут равны. При тройном знаке - не равны, так как число и строка являются разными типами данных.

Также доступны операторы > (больше), < (меньше).

Строки

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

var age = 5;
age = "Возраст"
console.log(age);

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

Если сложить число и строку, то JavaScript преобразует число в строку и склеит их вместе.

var numberNine = 9; // число
var stringNine = "9"; // строка
console.log(numberNine + numberNine); // получим 18
console.log(numberNine + stringNine); // получим 99

Узнать длину строки можно через свойство length:

"Это кот. Его зовут Барсик".length;

Но лучше использовать переменную.

var barsik = "Это кот. Его зовут Барсик";
console.log(barsik.length); // выводит 25, включая пробелы

Чтобы получить одиночный символ из строки, используйте квадратные скобки []. Получим первый символ слова "Кот":

var cat = "Кот";
console.log(cat[0]);

Как видите, отсчёт начинается с нуля. Помните об этом.

Получить часть слова можно с помощью метода slice(), указав в параметрах позицию первого символа и позицию после последнего нужного символа.

var cat = "Котлета";
console.log(cat.slice(0, 3));

Обратите внимание, что символ т занимает вторую позицию, но указываем мы третью позицию после него.

Если в параметре указать только одно число, то получим строку с указанной позиции до конца строки.

Для перевода строки в верхний регистр используйте toUpperCase(). В нижний - toLowerCase().

Булевы переменные

У таких переменных есть только два значения: true или false.

Подобные переменные используются в логических операциях. Основные операторы - &&, ||, !.

Оператор && означает логическое "И".

Оператор || означает логическое "ИЛИ".

Оператор ! означает логическое "НЕ".

undefined и null

Есть особые значения undefined и null, которые означают пустоту, но по разному.

Если JavaScript не может найти значения, то использует undefined. Например, вы создали переменную, но не присвоили ей значения.

var cat;
console.log(cat);

А значение null явно показывает, что у переменной пустое значение.

var nullVarialbe = null;
console.log(nullVarialbe);

Константы

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

const CAT_NAME = "Васька";

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

Комментарии задаются с помощью двух символов //, как и во многих языках программирования. Также доступен вид комментариев /* ... */ для многострочных комментариев.

Чтобы быстро увидеть работу JavaScript, напишем простой пример, который сработает сразу же после окончания загрузки страницы. Для этого у страницы есть событие onload(). Для вызова диалогового окна существует метод alert(). Запомнив эти два метода, мы можем теперь написать пример приветствия пользователя.

Пропишите в теге body атрибут onload следующим образом.

<body onload="alert('Привет, пользователь!');">

Как только страница загрузится, появится диалоговое окно. Если вы закрыли диалоговое окно и хотите его снова увидеть, то нужно обновить страницу. Всё просто.

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

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

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

Также есть похожий метод prompt(), который вызывает всплывающее окно. В нём можно ввести свой текст, а далее обработать этот текст.

Для создания собственных методов используется ключевое слово function с указанием имени. Напишем следующий код.

function sayHello() {
    var userName = prompt("Как вас зовут?", "Введите ваше имя");
}

Ещё одно распространённое событие в JavaScript, которое нужно запомнить - это событие onclick. Оно возникает, когда пользователь щёлкает на каком-нибудь элементе страницы. Каждому элементу можно задать свой отдельный код для обработки события.

Например, можно присвоить это событие картинке.

<img src="../img/on.gif" id="switcher" style="cursor:pointer" onclick="sayHello()"; />

Мы присвоили картинке с выключателем событие onclick, которое должно запустить метод sayHello(). Для удобства курсор мыши поменяем на тот, который обычно используют при нажатии на ссылку.

Разместите в конце страницы следующий код:

<script>
function sayHello() {
    var userName = prompt("Как вас зовут?", "Введите ваше имя");
    alert("Привет " + userName);
}
</script>

Щёлкнув по картинке, мы получим всплывающее окно с вопросом и подсказкой. Вам нужно удалить подсказку и написать своё имя. В этом случае страница поздоровается с вами. Если вы не удалите подсказку и нажмёте на кнопку OK, то получится глупое приветствие. Также попробуйте нажать на кнопку Cancel (Отмена), чтобы увидеть результат.

Чтобы исправить ситуацию, можно добавить дополнительную проверку. Например, проверка на слово Введите ваше имя. Если пользователь его не изменил, то вежливо попросим всё-таки ввести своё настоящее имя. Добавим новый метод sayHello2() под первым методом и присвоим его другой картинке.

function sayHello2() {
    var userName = prompt("Как вас зовут?", "Введите ваше имя");
    if(userName == "Введите ваше имя") {
        alert("Пожалуйста, введите ваше реальное имя");
    }else {
        alert("Привет " + userName);
    }
}

Вы можете придумать и другие виды проверок (пустая строка и т.д.). А также добавить новую функциональность, например, поменять картинку. Напишем третью версию метода.

function sayHello3() {
    var userName = prompt("Как вас зовут?", "Введите ваше имя");
    if(userName == "Введите ваше имя") {
        alert("Пожалуйста, введите ваше реальное имя");
    }else {
        alert("Привет " + userName);
        document.getElementById("switcher3").src = "../img/off.gif";
    }
}

Реклама