JavaScript для детей

Зачем изучать JavaScript?

JavaScript — далеко не единственный язык программирования. В сущ-

ности, языков очень много, счет идет на сотни, однако есть немало при-

чин выбрать именно JavaScript. Например, изучать его гораздо проще

(и интереснее), чем многие другие языки. Но, пожалуй, самая веская

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

точно интернет-браузера — такого, как Internet Explorer, Mozilla Firefox

или Google Chrome. В каждый из этих браузеров встроен интерпретатор

JavaScript, который сможет выполнять JavaScript-программы. И ника-

кого специального программного обеспечения вам не понадобится.

Написав программу на JavaScript, отправьте ссылку на нее другим

людям, и они тоже смогут ее запустить — у себя на компьютере, в брау-

зере (см. ≪Обмен кодом с помощью JSFiddle≫ на с. 280).

Пробуем JavaScript

Давайте напишем простую JavaScript-программку с помощью браузера

Google Chrome (www.google.com/chrome). Установите Chrome на свой

компьютер (если он еще не установлен), запустите его и введите слова

about:blank в адресной строке. Теперь нажмите ENTER — откроется

пустая страничка, как на рис. 1.4.

Рис. 1.3. Игра CubeSlam написана целиком на JavaScript!

20 Часть I. Основы

Начнем с программирования в JavaScript-консоли Chrome (это секрет-

ный инструмент для тестирования коротких программ на JavaScript).

Если ваш компьютер работает под управлением Microsoft Windows

или Linux, нажмите и не отпускайте клавиши CTRL и SHIFT, а затем

нажмите J. Если же вы пользуетесь системой MacOS, нажмите и удержи-

вайте COMMAND и OPTION, а затем нажмите J.

Если вы все сделали правильно, то увидите пустую веб-страницу, под

которой стоит значок угловой скобки (), а после него мигает курсор (|).

Здесь нам и предстоит писать код на языке JavaScript!

! Текст в консоли Chrome подсвечивается разными цветами в зависи-

мости от типа данных. В этой книге код для ввода в консоль напе-

чатан такими же цветами там, где это имеет значение. Но там,

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

выделять то, что сами вводим в консоль, а данные, которые авто-

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

Рис. 1.4. JavaScript-консоль Google Chrome

Когда вы введете код и нажмете ENTER, JavaScript должен запу-

стить (иначе говоря, выполнить) ваш код, показав на следующей строке

результат (когда он есть). Например, введите в консоли:

Адресная строка используется для перехода на сайты,

например Facebook.com или Google.com. Сейчас нам

нужна пустая страница, поэтому вводим about:blank

и жмем ENTER.

JavaScript-консоль: здесь мы будем

тестировать короткие программы.

1. Что такое JavaScript? 21

3 + 4;

Теперь нажмите ENTER. JavaScript должен напечатать результат сло-

жения (7) на следующей строке:

3 + 4;

7

Как видите, ничего сложного. Но JavaScript — это нечто определенно

большее, чем просто затейливый калькулятор. Давайте попробуем кое-

что еще.

Строение JavaScript-программы

Давайте позабавимся — напишем JavaScript-программу, которая печа-

тает японские смайлики каомодзи в виде кошачьей мордочки:

=^.^=

В отличие от простого сложения, с которого мы

начали, эта программа занимает несколько строк.

Чтобы ввести ее в консоли, нужно будет в конце

каждой строки переходить на новую строку нажа-

тием SHIFT-ENTER. (Если нажать просто ENTER,

Chrome попытается выполнить те команды, кото-

рые вы уже ввели, и программа не будет рабо-

тать правильно. Сами по себе компьютеры ничего

не соображают — я предупреждал!)

Введите в консоли браузера:

// Рисуем столько котиков, сколько захотим!

var drawCats = function (howManyTimes) {

for (var i = 0; i

console.log(i + " =^.^=");

}

};

drawCats(10); // Вместо 10 тут может быть другое число

Draw cats —

рисовать

котиков

Function —

функция

How many

times —

сколько раз

22 Часть I. Основы

В конце последней строки нажмите ENTER, а не SHIFT-ENTER.

Программа должна напечатать следующее:

0 =^.^=

1 =^.^=

2 =^.^=

3 =^.^=

4 =^.^=

5 =^.^=

6 =^.^=

7 =^.^=

8 =^.^=

9 =^.^=

Если при вводе программы вы где-то ошиб лись, результат может ока-

заться другим — возможно, вы даже получите сообщение об ошибке. Это

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

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

что от него требуется!

Я не буду сейчас вдаваться в подробности, объясняя, как работает этот

код (мы еще вернемся к нему в восьмой главе), однако давайте рассмотрим

некоторые особенности этой программы, да и JavaScript-программ в целом.

Синтаксис

В нашей программе встречается много символов, таких как скобки (), точки

с запятой ;, фигурные скобки {}, знаки плюс +, а также некоторые таин-

ственные на первый взгляд слова (например, var и console.log). Все это

является частью синтаксиса JavaScript — то есть правил, указывающих, как

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

Одна из главных сложностей при освоении нового языка программи-

рования — запомнить правила написания команд. Поначалу легко про-

пустить какие-нибудь скобки или запутаться в очередности записи зна-

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

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

комясь с новыми командами языка, чтобы вы могли писать все более

и более мощные программы.

Комментарии

В первой строке нашей программы написано:

// Рисуем столько котиков, сколько захотим!

1. Что такое JavaScript? 23

Это называется комментарий. Программисты пишут коммента-

рии, чтобы другим программистам было легче читать и понимать их

код. Компьютер же комментарии игнорирует. В JavaScript комментарии

начинаются с двух символов наклонной черты (//). Все, что идет следом

за ними (в той же строке), интерпретатор JavaScript пропускает, поэтому

комментарии не оказывают влияния на выполнение программы — это

всего лишь пояснение.

В примерах кода, которые встретятся вам в этой книге, комментарии

описывают, что и как там происходит. При написании своего кода тоже

добавляйте комментарии — когда вы заглянете в программу некоторое

время спустя, они напомнят вам, как работает код и что происходит

на том или ином этапе.

В конце нашей программы-примера есть еще один коммента-

рий. Напоминаю: все, что записано после символов //, компьютер

игнорирует!

drawCats(10); // Вместо 10 тут может быть другое число

Комментарии могут занимать отдельную строку или следовать сразу

после кода. Но если вы поставите // перед кодом, вот так:

// drawCats(10);

...то не произойдет вообще ничего! Chrome решит, что вся эта

строка — комментарий, хоть там и записаны инструкции на языке

JavaScript.

Когда вы, помимо примеров в этой книге, начнете изучать чужой

JavaScript-код, вам будут попадаться комментарии, которые выглядят

иначе:

/*

Рисуем столько котиков,

сколько захотим!

*/

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

когда текст примечания не помещается на одной строке. Однако прин-

цип здесь тот же: текст, записанный между /* и */, — это комментарий,

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

Что мы узнали

В этой главе мы познакомились с языком JavaScript и узнали,

что можно делать с его помощью. Кроме того, мы научились

запускать JavaScript-код в браузере Google Chrome и ввели

несложную программу-пример. Все примеры из этой книги

можно (и нужно!) запускать в JavaScript-консоли Google

Chrome (если только я не скажу, что этого делать не надо).

Просто читать код недостаточно — проверяйте, как он рабо-

тает! Это единственный способ научиться программировать.

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

языка JavaScript, начиная с трех основных типов данных,

с которыми вам предстоит работать: чисел, строк и булевых

значений.__