Редактирование: Обучение JavaScript

[[Виртуальная лаборатория]] > [[Обучение JavaScript]] <HR>

Здесь размещено небольшое пособие, помогающее начать писать программы на языке JavaScript. Пособие ориентировано на людей, не имеющих представления ни об этом языке, ни об HTML тегах, но, желательно, хотя бы немного представляющих принципы программирования, понятие о функциях, циклах, условиях "if" и т.п.
 
Цель данного пособия - не описать по всей строгости рассматриваемый язык, а помочь быстро начать писать на нем программы.
  
Сначала скачайте и установите [https://www.mozilla.org/ru/firefox/new/ Mozilla Firefox] или [https://www.google.ru/intl/ru/chrome/browser/ Google Chrome], с ними будет немного удобнее работать, чем со стандартным браузером.
== Hello World! ==
Начнем с небольшого примера. Откройте блокнот, и скопируйте туда строку ниже:
<syntaxhighlight lang="html5" line start="1" enclose="div">
<input type="button" value="Нажми меня" onclick="alert('Hello World!')">
 </syntaxhighlight>
Нажмите "Сохранить как", введите название файла "program1.html" и сохраните его.
Найдите файл и откройте его.

Должна появиться кнопка, при нажатии на которую появится окошко с надписью "Hello World!".

Вы написали первую программу с использованием языка разметки HTML и языка программирования JavaScript!

<div class="mw-collapsible mw-collapsed" style="width:100%" >
'''Если возникли проблемы:'''
<div class="mw-collapsible-content"> 
* Если файл не открывается/открывается в блокноте, нажмите на него правой кнопкой мыши/Открыть с помощью/Firefox (или Google Chrome)
* Если файл открывается в браузере Internet Explorer, то в нем нужно разрешить выполнение скрипта (вылезет сообщение с подтверждением), иначе при нажатии на кнопку ничего происходить не будет. Чтобы избежать этого, запускайте файл с помощью Firefox или Google Chrome (нажать на файл правой кнопкой мыши/Открыть с помощью/Выбрать программу/Firefox или Google Chrome, должна стоять галочка "Использовать выбранную программу для всех файлов такого типа").
</div>
</div>

== Теги ==
Мы будем использовать язык разметки HTML. Практически любая страница на языке HTML представляет собой набор тегов. Каждый тег имеет своё значение. Например, тег <nowiki><hr></nowiki> нарисует на странице черную горизонтальную линию (вы можете прямо сейчас попробовать написать его в файл program1.html, сохранить и запустить).

Часто требуется не только открывающий тег, но и закрывающий, например: 
<syntaxhighlight lang="html5" line start="1" enclose="div">
<strong>Текст между двумя тегами — открывающим и закрывающим.</strong>
</syntaxhighlight>
Текст, расположенный между этими двумя тегами, будет отображаться <strong>жирным шрифтом</strong>.

=== Атрибуты ===
Бывают случаи, когда тег нужно определенным образом "настроить". Для этого используются атрибуты тега. Например, тег:
<syntaxhighlight lang="html5" line start="1" enclose="div">
<font size="1" color="red">Маленькие красные буквы</font>
</syntaxhighlight>
имеет атрибуты "size" и "color", указывающие размер и цвет текста. Содержимое этого тега будет выглядеть так:

<font size="1" color="red">Маленькие красные буквы</font>

=== Пример ===
Давайте еще раз рассмотрим первый пример:
<syntaxhighlight lang="html5" line start="1" enclose="div">
<input type="button" value="Нажми меня" onclick="alert('Hello World!');">
</syntaxhighlight>
Мы видим тег <nowiki><input></nowiki>, у которого заданы различные атрибуты.
* Атрибут "type" - тип элемента управления, который появится на странице. В данном случае стоит "button", поэтому появляется кнопка.
* Атрибут "value" - надпись на кнопке
* Атрибут "onclick" - код на языке JavaScript, который выполняется при нажатии на кнопку.

== Файлы html и js ==
Обычно для удобства принято отделять HTML-разметку от JavaScript кода. Разметка располагается в файле с расширением .html, код - в файле .js.

Давайте перепишем наш пример с кнопкой в соответствии с этим правилом.
Откройте блокнот и скопируйте в него следующий код:
<syntaxhighlight lang="html5" line start="1" enclose="div">
<head>
    <script src="program2.js"></script>
</head>
<body onload="main_program2();">
    <input type="button" id="press_me_button" value="Нажми меня">
</body>
</syntaxhighlight>
Сохраните файл как "program2.html".

Откройте блокнот еще раз, и скопируйте в него код ниже:
<syntaxhighlight lang="javascript" line start="1" enclose="div">
function main_program2() {
    press_me_button.onclick = function() {
        alert("Нажимай нежнее");
    };
}
</syntaxhighlight>
Сохраните файл как "program2.js", и запустите файл "program2.html".

Давайте разберем написанный код. Тег <nowiki><head></head></nowiki> чаще всего содержит различную информацию для браузера (например, кодировку), а также теги, подгружающие скрипты. В нашем случае загружается скрипт из файла "program2.js".

Тег <nowiki><body></body></nowiki> содержит основное содержимое страницы. В нашем случае - кнопку.

Строка <nowiki><body onload="main_program2();"></nowiki> означает, что как только страница загрузится в браузере - запустится функция "main_program2()" (она у нас записана в файле "program2.js").

Рассмотрим файл "program2.js".
Первая строка - начало описания функции (той самой функции main_program2(), что вызывается в теге <body>).
Вторая строка состоит из нескольких частей:
<syntaxhighlight lang="javascript" line start="1" enclose="div">
press_me_button.onclick = function() {
</syntaxhighlight>
* press_me_button - это имя кнопки в памяти компьютера, задается в теге <input> атрибутом "id".
* .onclick - здесь находится ссылка на функцию, которая должна запуститься, когда происходит нажатие на кнопку. Изначально эта функция пуста, поэтому далее мы её задаем.
* = function() { - здесь как раз мы и начинаем задавать функцию.

Третья строка - непосредственно функция, которая выводит окошко с надписью.

На первый взгляд здесь намного больше кода, но когда ваши скрипты "разрастутся", работать в таком формате будет намного удобней. 

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

Для объявления переменной (локальной) в JavaScript используется ключевое слово "var".
Например: 
<syntaxhighlight lang="javascript" line start="1" enclose="div">
var result = 2 + 2 * 2;
</syntaxhighlight>

Также есть возможность объявлять и глобальные переменные, для этого имя переменной пишется без ключевого слова var.
<syntaxhighlight lang="javascript" line start="1" enclose="div">
result = 2 + 2 * 2;
</syntaxhighlight>
Однако, глобальные переменные в JavaScript являются плохим тоном, могут сильно затруднять понимание кода, а в некоторых случаях и вызывать дополнительные ошибки, так что старайтесь использовать локальные переменные.


Иногда вы можете увидеть еще один способ объявления переменных - с помощью ключевого слова "const". Это константы - переменные с неизменяемым значением. К сожалению, браузер Internet Explorer 10 (и меньше) их не поддерживает, т.е. программы, написанные с использованием констант в этом браузере НЕ РАБОТАЮТ. Поэтому лучше воздерживаться от использования "const".

== Объекты ==
Объект JavaScript - набор свойств и функций.

Создать объект можно так:
<syntaxhighlight lang="javascript" line start="1" enclose="div">
var human = {};
</syntaxhighlight>

Пустой объект без свойств и методов неинтересен. Добавим в него свойства:
<syntaxhighlight lang="javascript" line start="1" enclose="div">
human.name = "Василий";
human.arms = 2;
human.appendix = false;
</syntaxhighlight>

Получить доступ к свойству можно так же, через точку - "human.name". Например, выведем свойство "name" на экран:
<syntaxhighlight lang="javascript" line start="1" enclose="div">
alert(human.name);
</syntaxhighlight>

Есть возможность создавать объекты сразу со свойствами, для этого нужно использовать следующий синтаксис:
<syntaxhighlight lang="javascript" line start="1" enclose="div">
var human = {
    name:"Василий",
    arms:2, 
    appendix:false
}
</syntaxhighlight>

Теперь добавим нашему объекту функцию:
<syntaxhighlight lang="javascript" line start="1" enclose="div">
human.talk = function(text) {
    alert(human.name + " говорит: " + text);
}
</syntaxhighlight>

Вызвать функцию можно следующим образом:
<syntaxhighlight lang="javascript" line start="1" enclose="div">
human.talk("Я Василий");
</syntaxhighlight>

=== Массивы ===
Массив в JavaScript - это тоже объект, но со свойством "length" (в большинстве случаев содержит длину массива), а также со специальными методами, помогающими в работе с массивами.

Создается массив почти также, как и обычный объект, только вместо фигурных скобок используются квадратные.
Массив можно создавать сразу со значениями:
<syntaxhighlight lang="javascript" line start="1" enclose="div">
var mass = [];
var mass2 = [1, 2, 4, 8, 16];
var mass3 = ["Гомер", "Мардж", "Барт", "Лиза", "Мэгги"];
</syntaxhighlight>

А вот как заполнить массив через цикл:
<syntaxhighlight lang="javascript" line start="1" enclose="div">
var m = [];
for (var i = 0; i < 100; i++) {
    m[i] = 3 * i;
}
</syntaxhighlight>

Длину массива практически всегда можно узнать с помощью свойства "m.length".

<div class="mw-collapsible mw-collapsed" style="width:100%" >
'''Однако, есть исключения:'''
<div class="mw-collapsible-content">
<syntaxhighlight lang="javascript" line start="1" enclose="div">
var m = [];
m[100] = "some";
</syntaxhighlight>
то m.length выдаст "101", хотя в массиве будет всего один элемент (101 потому, что счет элементов начинается с 0, т.е. m[100] - это 101-ый элемент).
* Можно вручную задать значение свойства length, например "m.length = 42;".
</div>
</div>

Для добавления/удаления значений массива используются методы:
* push и pop - добавляют/удаляют значения с конца массива.
* unshift и shift - добавляют/удаляют значения с начала массива.

Пример:
<syntaxhighlight lang="javascript" line start="1" enclose="div">
var m = [3, 4, 5];
// сейчас m = [3, 4, 5]

m.push(6);      // добавили в конец "6".
// сейчас m = [3, 4, 5, 6]
m.pop();        // удалили последний элемент
// сейчас m = [3, 4, 5]

m.unshift(2);   // добавили в начало "2"
// сейчас m = [2, 3, 4, 5]
m.shift();      // удалили первый элемент
// сейчас m = [3, 4, 5]
</syntaxhighlight>

== События ==
Событие - это сигнал от браузера о том, что что-то произошло. Например, пользователь нажал на кнопку, или передвинул ползунок.
На событие можно поставить обработчик - это код, который выполнится при возникновении этого события.

Мы уже использовали несколько раз событие onclick (щелчок левой кнопкой мыши на элементе), а также событие onload тега <body> (обработчик события запустится, как только страница полностью загрузится).

Есть и другие события, вы можете подробней узнать о них на [http://htmlbook.ru/html/attr/event этой странице]

=== Назначение обработчиков ===
Существует несколько способов поставить обработчик на событие. Мы рассмотрим два из них.

==== Через атрибут HTML-тега ====
Этим способом мы уже несколько раз воспользовались.
В строке:
<syntaxhighlight lang="html5" line start="1" enclose="div">
<input type="button" value="Нажми меня" onclick="alert('Hello World!')">
 </syntaxhighlight>
атрибут onclick="alert('Hello World!')" - и есть назначение событию onclick обработчика (в данном случае, функции, вызывающей всплывающее окошко с надписью "Hello World!").

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

==== Через свойство объекта ====
Этим способом мы воспользовались в разделе [[#Файлы html и js]]

Чтобы его применить, нужно дать id элементу, у которого мы хотим отследить событие:
<syntaxhighlight lang="html5" line start="1" enclose="div">
<input type="button" id="press_me_button" value="Нажми меня">
 </syntaxhighlight>
Далее в JavaScript коде нужно написать:
<syntaxhighlight lang="javascript" line start="1" enclose="div">
press_me_button.onclick = function() { ''Здесь должен быть код, который выполнится при срабатывании события onclick''}
 </syntaxhighlight>

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

== Вывод текста на экран ==
Нажмите на кнопку:
<htmlet nocache="yes">Tcvetkov/JavaScript_training_examples/Example_span</htmlet>


Выводить на экран текст мы будем с помощью тега <span>:
<syntaxhighlight lang="html5" line start="1" enclose="div">
<span id="span_name">Здесь будет находиться выводимый текст</span>
</syntaxhighlight>
* Атрибут id - имя поля вывода в памяти компьютера.


Код примера выше:
<syntaxhighlight lang="html5" line start="1" enclose="div">
<input type="button" value="Зима" onclick="span_name.innerHTML='Зима'">
<input type="button" value="Лето" onclick="span_name.innerHTML='Лето'">
<br>
<span id="span_name">Здесь появится время года</span>
</syntaxhighlight>

== Элементы управления ==
Мы уже рассмотрели такие элементы управления, как кнопки. Давайте узнаем, как еще можно взаимодействовать с пользователем.
=== Переключатели ===
Переключатели используются, чтобы предоставить пользователю выбор между несколькими вариантами. Например:

<htmlet nocache="yes">Tcvetkov/JavaScript_training_examples/Example_radio</htmlet>

Чтобы вставить переключатель, нужно добавить тег:
<syntaxhighlight lang="html5" line start="1" enclose="div">
<input type="radio" id="radio_water" name="element" checked> Вода
</syntaxhighlight>
* "radio" в атрибуте type говорит о том, что мы хотим получить переключатель.
* id - это имя переключателя в памяти компьютера, оно нужно для того, чтобы мы могли из скрипта проверить состояние переключателя.
* name - имя группы переключателей (имя может быть любым, но должно совпадать в группе переключателей).
* checked означает, что данный переключатель активирован (как если бы вы нажали на него мышкой).


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

{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Tcvetkov/JavaScript_training_examples/dl_example_Radio_2.html |width=200|height=130 |border=0 }}

Скачать пример: [[Медиа:dl_example_Radio.zip|Example_Radio.zip]]
<div class="mw-collapsible mw-collapsed" style="width:100%" >
'''Код примера:'''
<div class="mw-collapsible-content">
Файл '''"dl_example_Radio_2.html"'''
<syntaxhighlight lang="html5" line start="1" enclose="div">
<!DOCTYPE html>
<html>
<head>
    <title>Example Radio №2</title>
    <script src="dl_example_Radio_2.js"></script>
</head>
<body onload="main_dl_example_Radio_2();">
    <input type="radio" id="radio_pic_1" name="pic" /> Рыба <br>
    <input type="radio" id="radio_pic_2" name="pic" /> Ярость <br>
    <input type="radio" id="radio_pic_3" name="pic" /> Кот <br><br>
    <span id="pic_span">Здесь появится рисунок</span>
</body>
</html>
</syntaxhighlight>
Файл '''"dl_example_Radio_2.js"'''
<syntaxhighlight lang="javascript" line start="1" enclose="div">
function main_dl_example_Radio_2() {
    radio_pic_1.onchange = function() {pic_span.innerHTML = ".·´¯`·.´¯`·.¸¸.·´¯`·.¸><(((º>"};
    radio_pic_2.onchange = function() {pic_span.innerHTML = "(╯°□°）╯︵ ┻━┻"};
    radio_pic_3.onchange = function() {pic_span.innerHTML = "__,,,^._.^,,,__"};
}
</syntaxhighlight>
</div>
</div>

В примере вы можете видеть непонятную строку:
<syntaxhighlight lang="html5" line start="1" enclose="div">
<!DOCTYPE html>
</syntaxhighlight>
Эта строчка указывает браузерам, что мы используем HTML5, без неё некоторые браузеры могут переходить в режим совместимости.

Также в примере использован новый тег <html></html>, заключающий в себя всё содержимое страницы. Он необязателен, просто является признаком хорошего стиля.

=== Поле для ввода ===

<htmlet nocache="yes">Tcvetkov/JavaScript_training_examples/Example_number</htmlet>

Чтобы задать подобное поле, нужно добавить следующий тег:
<syntaxhighlight lang="html5" line start="1" enclose="div">
<input type="number" min=1 max=10 value=5 style="width: 50px">
</syntaxhighlight>
* type="number" - тип элемента: поле для ввода числа.
* min - минимальное число, до которого можно дойти стрелочками
* max - максимальное число, до которого можно дойти стрелочками
* value - значение, которое будет высвечиваться, как только появится поле
* style - атрибут, отвечающий за внешний вид элемента, и записываемый особенным образом. В нашем случае позволяет задать ширину элемента.


Пример с извлечением значения из данного поля:

{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Tcvetkov/JavaScript_training_examples/dl_example_Number.html |width=200|height=44 |border=0 }}

Скачать пример: [[Медиа:dl_example_Number.zip|Example_Number.zip]]
<div class="mw-collapsible mw-collapsed" style="width:100%" >
'''Код примера:'''
<div class="mw-collapsible-content">
Файл '''"dl_example_Number.html"'''
<syntaxhighlight lang="html5" line start="1" enclose="div">
<!DOCTYPE html>
<html>
<head>
    <title>Example Number</title>
    <script src="dl_example_Number.js"></script>
</head>
<body onload="main_dl_example_Number();">
    <input type="number" id="number_input" min=0 max=100 value=2 style="width: 50px">
    * 2 = <span id="span_result">4</span>
</body>
</html>
</syntaxhighlight>
Файл '''"dl_example_Number.js"'''
<syntaxhighlight lang="javascript" line start="1" enclose="div">
function main_dl_example_Number() {
    number_input.oninput= function() {
        span_result.innerHTML = number_input.value * 2;
    }
}
</syntaxhighlight>
</div>
</div>

=== Ползунок ===

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

<htmlet nocache="yes">Tcvetkov/JavaScript_training_examples/Example_slider</htmlet>

<syntaxhighlight lang="html5" line start="1" enclose="div">
<input type="range" id="some_sl" min="1" max="100" value=50 step=0.5 style="width: 150px;" oninput="some_num.value = some_sl.value;">
<input type="number" id="some_num" min=1 max=100 value=50 step=0.5 style="width: 50px" oninput="some_sl.value = some_num.value;">
</syntaxhighlight>
* Атрибут "step" - шаг. Любое число на ползунке/поле для ввода будет кратно этому шагу. Например, если шаг равен 0.5, то ползунок/поле для ввода смогут принимать значения 1, 1.5, 2, 2.5, 3...
* Атрибут "oninput" у ползунка содержит функцию, которая обновляет число в поле ввода при движении ползунка.
* Аналогично атрибут "oninput" у поля ввода содержит функцию, обновляющую положение ползунка при изменении числа в данном поле.


Пример:

{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Tcvetkov/JavaScript_training_examples/dl_example_Slider.html |width=400|height=50 |border=0 }}

Скачать пример: [[Медиа:dl_example_Slider.zip|Example_Slider.zip]]
<div class="mw-collapsible mw-collapsed" style="width:100%" >
'''Код примера:'''
<div class="mw-collapsible-content">
Файл '''"dl_example_Slider.html"'''
<syntaxhighlight lang="html5" line start="1" enclose="div">
<!DOCTYPE html>
<html>
<head>
    <title>Example Slider</title>
    <script src="dl_example_Slider.js"></script>
</head>
<body onload="main_dl_example_Slider();">
<input type="range" id="slider_input" min=1 max=100 value=2 step=0.5 style="width: 150px;">
<input type="number" id="number_input" min=1 max=100 value=2 step=0.5 style="width: 50px;">
    * 2 = <span id="span_result">4</span>
</body>
</html>
</syntaxhighlight>
Файл '''"dl_example_Slider.js"'''
<syntaxhighlight lang="javascript" line start="1" enclose="div">
function main_dl_example_Slider() {

    number_input.oninput = function() {
        slider_input.value = number_input.value;
        mult2();
    };
    slider_input.oninput = function() {
        number_input.value = slider_input.value;
        mult2();
    };

    function mult2() {
        span_result.innerHTML = number_input.value * 2;
    }
    
}
</syntaxhighlight>
</div>
</div>

== Рисование ==

Переходим к рисованию. Рисование осуществляется на специальном поле для рисования "canvas". Вставить его можно следующим тегом:
<syntaxhighlight lang="html5" line start="1" enclose="div">
<canvas id="canvas_name" width="600" height="150" style="border: 1px solid #000000"></canvas>
 </syntaxhighlight>
* Атрибут width - ширина рамки для рисования.
* Атрибут height - высота рамки для рисования.
* Атрибут style="border: 1px solid #000000" в данном случае содержит в себе описание границы (черной обводки вокруг поля для рисования)
** 1px - толщина рамки будет равна 1 пикселю
** solid - граница будет сплошной
** #000000 - цвет рамки в HEX-формате, в данном случае, черный. (подробнее про цвета см. [[Различные цветовые модели и их использование#HEX-представление цветов| "HEX-представление цветов"]])

=== Пример №1. Линия ===

Простейший случай, одна линия.

{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Tcvetkov/JavaScript_training_examples/dl_example_Canvas_1.html |width=240|height=80 |border=0 }}

Скачать пример: [[Медиа:dl_example_Canvas_1.zip|Example_Canvas_1.zip]]
<div class="mw-collapsible mw-collapsed" style="width:100%" >
'''Код примера:'''
<div class="mw-collapsible-content">
Файл '''"dl_example_Canvas_1.html"'''
<syntaxhighlight lang="html5" line start="1" enclose="div">
<!DOCTYPE html>
<html>
<head>
    <title>Example Canvas №1</title>
    <script src="dl_example_Canvas_1.js"></script>
</head>
<body onload="main_dl_example_Canvas_1();">
    <canvas id="canvas_example_1" width="200" height="50" style="border: 1px solid #000000"></canvas>
</body>
</html>
</syntaxhighlight>
Файл '''"dl_example_Canvas_1.js"'''
<syntaxhighlight lang="javascript" line start="1" enclose="div">
function main_dl_example_Canvas_1() {
    var ctx = canvas_example_1.getContext("2d");    // всё рисование будет происходить с помощью ctx

    ctx.beginPath();                                // начать рисование
    ctx.moveTo(30, 10);                             // переместить "карандаш" в точку (30, 10)
    ctx.lineTo(180, 40);                            // нарисовать "карандашом" линию до точки (180, 40)
    ctx.stroke();                                   // закончить рисование ("обвести нарисованное")
}
</syntaxhighlight>
</div>
</div>

=== Пример №2. Различные геометрические фигуры ===

Пример рисования линий различной толщины и цвета, а также закрашенных/незакрашенных геометрических фигур, таких, как круг, прямоугольник, многоугольник.

{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Tcvetkov/JavaScript_training_examples/dl_example_Canvas_2.html |width=640|height=240 |border=0 }}

Скачать пример: [[Медиа:dl_example_Canvas_2.zip|Example_Canvas_2.zip]]
<div class="mw-collapsible mw-collapsed" style="width:100%" >
'''Код примера:'''
<div class="mw-collapsible-content">
Файл '''"dl_example_Canvas_2.html"'''
<syntaxhighlight lang="html5" line start="1" enclose="div">
<!DOCTYPE html>
<html>
<head>
    <title>Example Canvas №2</title>
    <script src="dl_example_Canvas_2.js"></script>
</head>
<body onload="main_dl_example_Canvas_2();">
    <canvas id="canvas_example_2" width="600" height="200" style="border: 1px solid #000000"></canvas>
</body>
</html>
</syntaxhighlight>
Файл '''"dl_example_Canvas_2.js"'''
<syntaxhighlight lang="javascript" line start="1" enclose="div">
function main_dl_example_Canvas_2() {

    var ctx = canvas_example_2.getContext("2d");

    // красная линия
    ctx.lineWidth="1";              // ширина линии
    ctx.strokeStyle="#ff0000";      // цвет линии
    ctx.beginPath();
    ctx.moveTo(30, 30);
    ctx.lineTo(180, 30);
    ctx.stroke();

    // синяя линия
    ctx.lineWidth="3";
    ctx.strokeStyle="#0000ff";
    ctx.beginPath();
    ctx.moveTo(30, 60);
    ctx.lineTo(180, 60);
    ctx.stroke();

    // зеленая линия
    ctx.lineWidth="6";
    ctx.strokeStyle="#00ff00";
    ctx.beginPath();
    ctx.moveTo(30, 100);
    ctx.lineTo(180, 100);
    ctx.stroke();

    // фиолетовая линия
    ctx.lineWidth="12";
    ctx.strokeStyle="#990099";
    ctx.beginPath();
    ctx.moveTo(30, 150);
    ctx.lineTo(180, 150);
    ctx.stroke();


    // незакрашенный круг
    ctx.lineWidth="6";
    ctx.strokeStyle="#00ffff";
    ctx.beginPath();
    ctx.arc(240,55,30,0,2*Math.PI);
    ctx.stroke();

    // закрашенный круг
    ctx.fillStyle="#ffff00";            // цвет закраски
    ctx.beginPath();
    ctx.arc(260,135,50,0,2*Math.PI);
    ctx.fill();

    // незакрашенный прямоугольник
    ctx.lineWidth="10";
    ctx.strokeStyle="#888888";
    ctx.strokeRect(400,20,50,50);

    // закрашенный прямоугольник
    ctx.fillStyle="#ff99ff";
    ctx.fillRect(320,100,155,80);

    // незакрашенный многоугольник
    ctx.lineWidth="1";
    ctx.strokeStyle="#ff8888";
    ctx.beginPath();
    ctx.moveTo(500,25);
    ctx.lineTo(580,25);
    ctx.lineTo(500,105);
    ctx.closePath();                // соединяет последнюю точку с начальной
    ctx.stroke();

    // закрашенный многоугольник
    ctx.fillStyle="#8888ff";
    ctx.beginPath();
    ctx.moveTo(590,125);
    ctx.lineTo(590,45);
    ctx.lineTo(510,125);
    ctx.lineTo(510,155);
    ctx.fill();

}
</syntaxhighlight>
</div>
</div>

=== Пример №3. Копирование изображений ===

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

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

{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Tcvetkov/JavaScript_training_examples/dl_example_Canvas_3.html |width=640|height=190 |border=0 }}

Скачать пример: [[Медиа:dl_example_Canvas_3.zip|Example_Canvas_3.zip]]
<div class="mw-collapsible mw-collapsed" style="width:100%" >
'''Код примера:'''
<div class="mw-collapsible-content">
Файл '''"dl_example_Canvas_3.html"'''
<syntaxhighlight lang="html5" line start="1" enclose="div">
<!DOCTYPE html>
<html>
<head>
    <title>Example Canvas №3</title>
    <script src="dl_example_Canvas_3.js"></script>
</head>
<body onload="main_dl_example_Canvas_3();">
    <canvas id="canvas_example_3" width="600" height="150" style="border: 1px solid #000000"></canvas>
</body>
</html>
</syntaxhighlight>
Файл '''"dl_example_Canvas_3.js"'''
<syntaxhighlight lang="javascript" line start="1" enclose="div">
function main_dl_example_Canvas_3() {

    var ctx = canvas_example_3.getContext("2d");
    var width = canvas_example_3.width;             // ширина поля для рисования
    var height = canvas_example_3.height;           // высота поля для рисования

    // создаем шар в памяти компьютера
    var ball = document.createElement('canvas');
    var ball_ctx = ball.getContext('2d');

    // создание градиента
    var gradient = ctx.createRadialGradient(25, 25, 30, 20, 30, 0);
    gradient.addColorStop(0, "#0000bb");
    gradient.addColorStop(1, "#44ddff");
    ball_ctx.fillStyle = gradient;

    // рисование шара во внутреннюю память
    ball_ctx.beginPath();
    ball_ctx.arc(25, 25, 25, 0, 2 * Math.PI, false);
    ball_ctx.fill();

    // рисование на экран (ctx.drawImage(Объект, координата X, координата Y))
    for (i = 0; i < 100; i++) {
        ctx.drawImage(ball, Math.random() * (width - 50), Math.random() * (height - 50));
    }

}
</syntaxhighlight>
</div>
</div>

=== Пример №4. Анимация ===

Пример анимации. Частица перерисовывается 60 раз в секунду, что создает эффект движения.

{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Tcvetkov/JavaScript_training_examples/dl_example_Canvas_4.html |width=340|height=140 |border=0 }}

Скачать пример: [[Медиа:dl_example_Canvas_4.zip|Example_Canvas_4.zip]]
<div class="mw-collapsible mw-collapsed" style="width:100%" >
'''Код примера:'''
<div class="mw-collapsible-content">
Файл '''"dl_example_Canvas_4.html"'''
<syntaxhighlight lang="html5" line start="1" enclose="div">
<!DOCTYPE html>
<html>
<head>
    <title>Example Canvas №4</title>
    <script src="dl_example_Canvas_4.js"></script>
</head>
<body onload="main_dl_example_Canvas_4();">
    <canvas id="canvas_example_4" width="300" height="100" style="border: 1px solid #000000"></canvas>
</body>
</html>
</syntaxhighlight>
Файл '''"dl_example_Canvas_4.js"'''
<syntaxhighlight lang="javascript" line start="1" enclose="div">
function main_dl_example_Canvas_4() {

    var ctx = canvas_example_4.getContext("2d");
    var width = canvas_example_4.width;
    var height = canvas_example_4.height;

    ctx.fillStyle="#8888ff";
    var rx = 50, ry = 50;                       // координаты шара
    var vx = 2, vy = 2;                         // скорость шара
    var r = 25;                                 // радиус шара

    function step() {                           // шаг вычислений.
        tick();
        draw();
    }

    function tick() {                           // вычисление новой позиции шара
        if (rx - r < 0 || rx + r > width) vx = -vx;
        if (ry - r < 0 || ry + r > height) vy = -vy;
        rx = rx + vx;
        ry = ry + vy;
    }

    function draw() {                           // рисование шара
        ctx.clearRect(0, 0, width, height);     // очистить экран
        ctx.beginPath();
        ctx.arc(rx, ry, r, 0, 2 * Math.PI);
        ctx.fill();
    }

    setInterval(step, 1000 / 60);               // функция step будет запускаться 60 раз в секунду (60 раз / 1000 мс)
    
}
</syntaxhighlight>
</div>
</div>

=== Пример №5. Управление мышью ===

Использование мыши реализуется с помощью событий (функций):
* onmousedown - функция выполняется в момент нажатия на кнопку мыши (именно нажатия, без отпускания кнопки).
* onmouseup - функция выполняется в момент отпускания клавиши мыши.
* onmousemove - функция выполняется при перемещении мыши (много раз, при перемещении на каждый пиксель).


Наведите курсор на шар и "потаскайте" его:

{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Tcvetkov/JavaScript_training_examples/dl_example_Canvas_5.html |width=640|height=190 |border=0 }}

Скачать пример: [[Медиа:dl_example_Canvas_5.zip|Example_Canvas_5.zip]]
<div class="mw-collapsible mw-collapsed" style="width:100%" >
'''Код примера:'''
<div class="mw-collapsible-content">
Файл '''"dl_example_Canvas_5.html"'''
<syntaxhighlight lang="html5" line start="1" enclose="div">
<!DOCTYPE html>
<html>
<head>
    <title>Example Canvas №5</title>
    <script src="dl_example_Canvas_5.js"></script>
</head>
<body onload="main_dl_example_Canvas_5();">
    <canvas id="canvas_example_5" width="600" height="150" style="border: 1px solid #000000"></canvas>
</body>
</html>
</syntaxhighlight>
Файл '''"dl_example_Canvas_5.js"'''
<syntaxhighlight lang="javascript" line start="1" enclose="div">
function main_dl_example_Canvas_5() {

    var ctx = canvas_example_5.getContext("2d");
    var width = canvas_example_5.width;             // ширина поля для рисования
    var height = canvas_example_5.height;           // высота поля для рисования

    var rx = 50, ry = 50;                           // координаты шара
    var r = 25;                                     // радиус шара

    var xShift, yShift;                             // Описание дано в canvas_example_5.onmousedown

    // функция, рисующая шар
    function draw() {
        ctx.clearRect(0, 0, width, height);
        ctx.beginPath();
        ctx.arc(rx, ry, r, 0, 2 * Math.PI);
        ctx.fill();
    }

    // функция запускается при нажатии клавиши мыши
    canvas_example_5.onmousedown = function(e) {
        var m = mouseCoords(e);                     // получаем координаты курсора мыши
        var x = rx - m.x;                           // расстояние от центра шара до курсора по оси x
        var y = ry - m.y;                           // расстояние от центра шара до курсора по оси y
        var rLen2 = x * x + y * y;                  // квадрат расстояния между курсором и центром шара
        if (rLen2 <= r * r) {                       // если курсор нажал на шар
            xShift = rx - m.x;                      // сдвиг курсора относительно центра шара по x
            yShift = ry - m.y;                      // сдвиг курсора относительно центра шара по y
            canvas_example_5.onmousemove = mouseMove; // пока клавиша нажата - работает функция перемещения
        }
    };

    // функция запускается при отпускании клавиши мыши
    document.onmouseup = function() {
        canvas_example_5.onmousemove = null;        // когда клавиша отпущена - функции перемещения нету
    };

    // функция запускается при перемещении мыши (много раз, в каждый момент перемещения)
    // в нашем случае работает только с зажатой клавишей мыши
    function mouseMove(e) {
        var m = mouseCoords(e);                     // получаем координаты курсора мыши
        rx = m.x + xShift;
        ry = m.y + yShift;
        draw();
    }

    // функция возвращает координаты курсора мыши
    function mouseCoords(e) {
        var m = [];
        var rect = canvas_example_5.getBoundingClientRect();
        m.x = e.clientX - rect.left;
        m.y = e.clientY - rect.top;
        return m;
    }

    ctx.fillStyle="#6666ff";                        // цвет шара
    draw();

}
</syntaxhighlight>
</div>
</div>

== Стенды Виртуальной лаборатории ==

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

Если вы не знаете, с чего начать, вот наиболее интересные для начинающего стенды:
* [[JavaScript - Клеточный автомат|Клеточный автомат]]
* [[JavaScript - Balls|Динамика взаимодействующих частиц]]
* [[Моделирование Солнечной системы]]

== Вопросы, замечания, предложения ==
Ваши вопросы, замеченные ошибки и всё, что вы хотите сказать по поводу данной статьи, отправляйте на '''DVTsvetkov@ya.ru'''

== См. также ==
* [[Различные цветовые модели и их использование]]
* [[JavaScript-mechanics-box2D|Пример использования популярного движка Box2D]]
*Простейшая 3D программа:
**[[Простейшая 3D программа|На чистом WebGL]]
**[[Простейшая 3D программа с использованием Three.js|С использованием библиотеки Three.js]]

*[http://javascript.ru/ javascript.ru] — центральный ресурс русскоязычного JavaScript-сообщества, с online-учебниками, примерами, книгами и форумом.
*[http://htmlbook.ru/ htmlbook.ru] - отличный справочник по тегам, атрибутам, событиям и т.д. Сайт посвящен языку HTML, CSS, веб-дизайну, графике и процессу создания сайтов.

[[Category: Виртуальная лаборатория]]
[[Category: Программирование]]
[[Category: JavaScript]]