Редактирование: Обучение JavaScript
Внимание! Вы не авторизовались на сайте. Ваш IP-адрес будет публично видимым, если вы будете вносить любые правки. Если вы войдёте или создадите учётную запись, правки вместо этого будут связаны с вашим именем пользователя, а также у вас появятся другие преимущества.
Правка может быть отменена. Пожалуйста, просмотрите сравнение версий, чтобы убедиться, что это именно те изменения, которые вас интересуют, и нажмите «Записать страницу», чтобы изменения вступили в силу.
Текущая версия | Ваш текст | ||
Строка 8: | Строка 8: | ||
== Hello World! == | == Hello World! == | ||
Начнем с небольшого примера. Откройте блокнот, и скопируйте туда строку ниже: | Начнем с небольшого примера. Откройте блокнот, и скопируйте туда строку ниже: | ||
− | < | + | <source lang="html" first-line="1"> |
<input type="button" value="Нажми меня" onclick="alert('Hello World!')"> | <input type="button" value="Нажми меня" onclick="alert('Hello World!')"> | ||
− | </ | + | </source> |
Нажмите "Сохранить как", введите название файла "program1.html" и сохраните его. | Нажмите "Сохранить как", введите название файла "program1.html" и сохраните его. | ||
Найдите файл и откройте его. | Найдите файл и откройте его. | ||
Строка 18: | Строка 18: | ||
Вы написали первую программу с использованием языка разметки HTML и языка программирования JavaScript! | Вы написали первую программу с использованием языка разметки HTML и языка программирования JavaScript! | ||
− | < | + | <toggledisplay status=hide showtext="Если возникли проблемы:↓" hidetext="Скрыть↑" linkstyle="font-size:default"> |
− | |||
− | |||
* Если файл не открывается/открывается в блокноте, нажмите на него правой кнопкой мыши/Открыть с помощью/Firefox (или Google Chrome) | * Если файл не открывается/открывается в блокноте, нажмите на него правой кнопкой мыши/Открыть с помощью/Firefox (или Google Chrome) | ||
− | * Если файл открывается в браузере Internet Explorer, то в нем нужно разрешить выполнение скрипта ( | + | * Если файл открывается в браузере Internet Explorer, то в нем нужно разрешить выполнение скрипта (вылезет сообщение с подтверждением), иначе при нажатии на кнопку ничего происходить не будет. Чтобы избежать этого, запускайте файл с помощью Firefox или Google Chrome (нажать на файл правой кнопкой мыши/Открыть с помощью/Выбрать программу/Firefox или Google Chrome, должна стоять галочка "Использовать выбранную программу для всех файлов такого типа"). |
− | </ | + | </toggledisplay> |
− | |||
== Теги == | == Теги == | ||
Строка 30: | Строка 27: | ||
Часто требуется не только открывающий тег, но и закрывающий, например: | Часто требуется не только открывающий тег, но и закрывающий, например: | ||
− | < | + | <source lang="html" first-line="1"> |
<strong>Текст между двумя тегами — открывающим и закрывающим.</strong> | <strong>Текст между двумя тегами — открывающим и закрывающим.</strong> | ||
− | </ | + | </source> |
Текст, расположенный между этими двумя тегами, будет отображаться <strong>жирным шрифтом</strong>. | Текст, расположенный между этими двумя тегами, будет отображаться <strong>жирным шрифтом</strong>. | ||
=== Атрибуты === | === Атрибуты === | ||
Бывают случаи, когда тег нужно определенным образом "настроить". Для этого используются атрибуты тега. Например, тег: | Бывают случаи, когда тег нужно определенным образом "настроить". Для этого используются атрибуты тега. Например, тег: | ||
− | < | + | <source lang="html" first-line="1"> |
<font size="1" color="red">Маленькие красные буквы</font> | <font size="1" color="red">Маленькие красные буквы</font> | ||
− | </ | + | </source> |
имеет атрибуты "size" и "color", указывающие размер и цвет текста. Содержимое этого тега будет выглядеть так: | имеет атрибуты "size" и "color", указывающие размер и цвет текста. Содержимое этого тега будет выглядеть так: | ||
Строка 46: | Строка 43: | ||
=== Пример === | === Пример === | ||
Давайте еще раз рассмотрим первый пример: | Давайте еще раз рассмотрим первый пример: | ||
− | < | + | <source lang="html" first-line="1"> |
<input type="button" value="Нажми меня" onclick="alert('Hello World!');"> | <input type="button" value="Нажми меня" onclick="alert('Hello World!');"> | ||
− | </ | + | </source> |
Мы видим тег <nowiki><input></nowiki>, у которого заданы различные атрибуты. | Мы видим тег <nowiki><input></nowiki>, у которого заданы различные атрибуты. | ||
* Атрибут "type" - тип элемента управления, который появится на странице. В данном случае стоит "button", поэтому появляется кнопка. | * Атрибут "type" - тип элемента управления, который появится на странице. В данном случае стоит "button", поэтому появляется кнопка. | ||
Строка 59: | Строка 56: | ||
Давайте перепишем наш пример с кнопкой в соответствии с этим правилом. | Давайте перепишем наш пример с кнопкой в соответствии с этим правилом. | ||
Откройте блокнот и скопируйте в него следующий код: | Откройте блокнот и скопируйте в него следующий код: | ||
− | < | + | <source lang="html" first-line="1"> |
<head> | <head> | ||
<script src="program2.js"></script> | <script src="program2.js"></script> | ||
Строка 66: | Строка 63: | ||
<input type="button" id="press_me_button" value="Нажми меня"> | <input type="button" id="press_me_button" value="Нажми меня"> | ||
</body> | </body> | ||
− | </ | + | </source> |
Сохраните файл как "program2.html". | Сохраните файл как "program2.html". | ||
Откройте блокнот еще раз, и скопируйте в него код ниже: | Откройте блокнот еще раз, и скопируйте в него код ниже: | ||
− | < | + | <source lang="javascript" first-line="1"> |
function main_program2() { | function main_program2() { | ||
press_me_button.onclick = function() { | press_me_button.onclick = function() { | ||
Строка 76: | Строка 73: | ||
}; | }; | ||
} | } | ||
− | </ | + | </source> |
Сохраните файл как "program2.js", и запустите файл "program2.html". | Сохраните файл как "program2.js", и запустите файл "program2.html". | ||
Строка 88: | Строка 85: | ||
Первая строка - начало описания функции (той самой функции main_program2(), что вызывается в теге <body>). | Первая строка - начало описания функции (той самой функции main_program2(), что вызывается в теге <body>). | ||
Вторая строка состоит из нескольких частей: | Вторая строка состоит из нескольких частей: | ||
− | < | + | <source lang="javascript" first-line="1"> |
press_me_button.onclick = function() { | press_me_button.onclick = function() { | ||
− | </ | + | </source> |
* press_me_button - это имя кнопки в памяти компьютера, задается в теге <input> атрибутом "id". | * press_me_button - это имя кнопки в памяти компьютера, задается в теге <input> атрибутом "id". | ||
* .onclick - здесь находится ссылка на функцию, которая должна запуститься, когда происходит нажатие на кнопку. Изначально эта функция пуста, поэтому далее мы её задаем. | * .onclick - здесь находится ссылка на функцию, которая должна запуститься, когда происходит нажатие на кнопку. Изначально эта функция пуста, поэтому далее мы её задаем. | ||
Строка 104: | Строка 101: | ||
Для объявления переменной (локальной) в JavaScript используется ключевое слово "var". | Для объявления переменной (локальной) в JavaScript используется ключевое слово "var". | ||
Например: | Например: | ||
− | < | + | <source lang="javascript" first-line="1"> |
var result = 2 + 2 * 2; | var result = 2 + 2 * 2; | ||
− | </ | + | </source> |
Также есть возможность объявлять и глобальные переменные, для этого имя переменной пишется без ключевого слова var. | Также есть возможность объявлять и глобальные переменные, для этого имя переменной пишется без ключевого слова var. | ||
− | < | + | <source lang="javascript" first-line="1"> |
result = 2 + 2 * 2; | result = 2 + 2 * 2; | ||
− | </ | + | </source> |
Однако, глобальные переменные в JavaScript являются плохим тоном, могут сильно затруднять понимание кода, а в некоторых случаях и вызывать дополнительные ошибки, так что старайтесь использовать локальные переменные. | Однако, глобальные переменные в JavaScript являются плохим тоном, могут сильно затруднять понимание кода, а в некоторых случаях и вызывать дополнительные ошибки, так что старайтесь использовать локальные переменные. | ||
Иногда вы можете увидеть еще один способ объявления переменных - с помощью ключевого слова "const". Это константы - переменные с неизменяемым значением. К сожалению, браузер Internet Explorer 10 (и меньше) их не поддерживает, т.е. программы, написанные с использованием констант в этом браузере НЕ РАБОТАЮТ. Поэтому лучше воздерживаться от использования "const". | Иногда вы можете увидеть еще один способ объявления переменных - с помощью ключевого слова "const". Это константы - переменные с неизменяемым значением. К сожалению, браузер Internet Explorer 10 (и меньше) их не поддерживает, т.е. программы, написанные с использованием констант в этом браузере НЕ РАБОТАЮТ. Поэтому лучше воздерживаться от использования "const". | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
== События == | == События == | ||
Строка 225: | Строка 128: | ||
Этим способом мы уже несколько раз воспользовались. | Этим способом мы уже несколько раз воспользовались. | ||
В строке: | В строке: | ||
− | < | + | <source lang="html" first-line="1"> |
<input type="button" value="Нажми меня" onclick="alert('Hello World!')"> | <input type="button" value="Нажми меня" onclick="alert('Hello World!')"> | ||
− | </ | + | </source> |
атрибут onclick="alert('Hello World!')" - и есть назначение событию onclick обработчика (в данном случае, функции, вызывающей всплывающее окошко с надписью "Hello World!"). | атрибут onclick="alert('Hello World!')" - и есть назначение событию onclick обработчика (в данном случае, функции, вызывающей всплывающее окошко с надписью "Hello World!"). | ||
Строка 236: | Строка 139: | ||
Чтобы его применить, нужно дать id элементу, у которого мы хотим отследить событие: | Чтобы его применить, нужно дать id элементу, у которого мы хотим отследить событие: | ||
− | < | + | <source lang="html" first-line="1"> |
<input type="button" id="press_me_button" value="Нажми меня"> | <input type="button" id="press_me_button" value="Нажми меня"> | ||
− | </ | + | </source> |
Далее в JavaScript коде нужно написать: | Далее в JavaScript коде нужно написать: | ||
− | < | + | <source lang="javascript" first-line="1"> |
press_me_button.onclick = function() { ''Здесь должен быть код, который выполнится при срабатывании события onclick''} | press_me_button.onclick = function() { ''Здесь должен быть код, который выполнится при срабатывании события onclick''} | ||
− | </ | + | </source> |
Данный прием позволяет отделить HTML-верстку, отвечающую за то, как выглядит страничка на экране, от JavaScript кода, отвечающего за то, как страничка себя ведет. | Данный прием позволяет отделить HTML-верстку, отвечающую за то, как выглядит страничка на экране, от JavaScript кода, отвечающего за то, как страничка себя ведет. | ||
Строка 252: | Строка 155: | ||
Выводить на экран текст мы будем с помощью тега <span>: | Выводить на экран текст мы будем с помощью тега <span>: | ||
− | < | + | <source lang="html" first-line="1"> |
<span id="span_name">Здесь будет находиться выводимый текст</span> | <span id="span_name">Здесь будет находиться выводимый текст</span> | ||
− | </ | + | </source> |
* Атрибут id - имя поля вывода в памяти компьютера. | * Атрибут id - имя поля вывода в памяти компьютера. | ||
Код примера выше: | Код примера выше: | ||
− | < | + | <source lang="html" first-line="1"> |
<input type="button" value="Зима" onclick="span_name.innerHTML='Зима'"> | <input type="button" value="Зима" onclick="span_name.innerHTML='Зима'"> | ||
<input type="button" value="Лето" onclick="span_name.innerHTML='Лето'"> | <input type="button" value="Лето" onclick="span_name.innerHTML='Лето'"> | ||
<br> | <br> | ||
<span id="span_name">Здесь появится время года</span> | <span id="span_name">Здесь появится время года</span> | ||
− | </ | + | </source> |
== Элементы управления == | == Элементы управления == | ||
Строка 274: | Строка 177: | ||
Чтобы вставить переключатель, нужно добавить тег: | Чтобы вставить переключатель, нужно добавить тег: | ||
− | < | + | <source lang="html" first-line="1"> |
<input type="radio" id="radio_water" name="element" checked> Вода | <input type="radio" id="radio_water" name="element" checked> Вода | ||
− | </ | + | </source> |
* "radio" в атрибуте type говорит о том, что мы хотим получить переключатель. | * "radio" в атрибуте type говорит о том, что мы хотим получить переключатель. | ||
* id - это имя переключателя в памяти компьютера, оно нужно для того, чтобы мы могли из скрипта проверить состояние переключателя. | * id - это имя переключателя в памяти компьютера, оно нужно для того, чтобы мы могли из скрипта проверить состояние переключателя. | ||
Строка 285: | Строка 188: | ||
В данном примере как только вы нажимаете на один из переключателей, мгновенно срабатывает событие и выводится картинка. | В данном примере как только вы нажимаете на один из переключателей, мгновенно срабатывает событие и выводится картинка. | ||
− | {{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Tcvetkov/JavaScript_training_examples/dl_example_Radio_2.html |width= | + | {{#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]] | Скачать пример: [[Медиа:dl_example_Radio.zip|Example_Radio.zip]] | ||
− | < | + | |
− | + | <toggledisplay status=hide showtext="Код примера:↓" hidetext="Скрыть↑" linkstyle="font-size:default"> | |
− | |||
Файл '''"dl_example_Radio_2.html"''' | Файл '''"dl_example_Radio_2.html"''' | ||
− | < | + | <source lang="html" first-line="1"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Строка 306: | Строка 208: | ||
</body> | </body> | ||
</html> | </html> | ||
− | </ | + | </source> |
Файл '''"dl_example_Radio_2.js"''' | Файл '''"dl_example_Radio_2.js"''' | ||
− | < | + | <source lang="javascript" first-line="1"> |
function main_dl_example_Radio_2() { | function main_dl_example_Radio_2() { | ||
radio_pic_1.onchange = function() {pic_span.innerHTML = ".·´¯`·.´¯`·.¸¸.·´¯`·.¸><(((º>"}; | radio_pic_1.onchange = function() {pic_span.innerHTML = ".·´¯`·.´¯`·.¸¸.·´¯`·.¸><(((º>"}; | ||
Строка 314: | Строка 216: | ||
radio_pic_3.onchange = function() {pic_span.innerHTML = "__,,,^._.^,,,__"}; | radio_pic_3.onchange = function() {pic_span.innerHTML = "__,,,^._.^,,,__"}; | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
В примере вы можете видеть непонятную строку: | В примере вы можете видеть непонятную строку: | ||
− | < | + | <source lang="html" first-line="1"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
− | </ | + | </source> |
Эта строчка указывает браузерам, что мы используем HTML5, без неё некоторые браузеры могут переходить в режим совместимости. | Эта строчка указывает браузерам, что мы используем HTML5, без неё некоторые браузеры могут переходить в режим совместимости. | ||
Строка 331: | Строка 232: | ||
Чтобы задать подобное поле, нужно добавить следующий тег: | Чтобы задать подобное поле, нужно добавить следующий тег: | ||
− | < | + | <source lang="html" first-line="1"> |
<input type="number" min=1 max=10 value=5 style="width: 50px"> | <input type="number" min=1 max=10 value=5 style="width: 50px"> | ||
− | </ | + | </source> |
* type="number" - тип элемента: поле для ввода числа. | * type="number" - тип элемента: поле для ввода числа. | ||
* min - минимальное число, до которого можно дойти стрелочками | * min - минимальное число, до которого можно дойти стрелочками | ||
Строка 346: | Строка 247: | ||
Скачать пример: [[Медиа:dl_example_Number.zip|Example_Number.zip]] | Скачать пример: [[Медиа:dl_example_Number.zip|Example_Number.zip]] | ||
− | < | + | |
− | + | <toggledisplay status=hide showtext="Код примера:↓" hidetext="Скрыть↑" linkstyle="font-size:default"> | |
− | |||
Файл '''"dl_example_Number.html"''' | Файл '''"dl_example_Number.html"''' | ||
− | < | + | <source lang="html" first-line="1"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Строка 362: | Строка 262: | ||
</body> | </body> | ||
</html> | </html> | ||
− | </ | + | </source> |
Файл '''"dl_example_Number.js"''' | Файл '''"dl_example_Number.js"''' | ||
− | < | + | <source lang="javascript" first-line="1"> |
function main_dl_example_Number() { | function main_dl_example_Number() { | ||
number_input.oninput= function() { | number_input.oninput= function() { | ||
Строка 370: | Строка 270: | ||
} | } | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
=== Ползунок === | === Ползунок === | ||
Строка 380: | Строка 279: | ||
<htmlet nocache="yes">Tcvetkov/JavaScript_training_examples/Example_slider</htmlet> | <htmlet nocache="yes">Tcvetkov/JavaScript_training_examples/Example_slider</htmlet> | ||
− | < | + | <source lang="html" first-line="1"> |
<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="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;"> | <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;"> | ||
− | </ | + | </source> |
* Атрибут "step" - шаг. Любое число на ползунке/поле для ввода будет кратно этому шагу. Например, если шаг равен 0.5, то ползунок/поле для ввода смогут принимать значения 1, 1.5, 2, 2.5, 3... | * Атрибут "step" - шаг. Любое число на ползунке/поле для ввода будет кратно этому шагу. Например, если шаг равен 0.5, то ползунок/поле для ввода смогут принимать значения 1, 1.5, 2, 2.5, 3... | ||
* Атрибут "oninput" у ползунка содержит функцию, которая обновляет число в поле ввода при движении ползунка. | * Атрибут "oninput" у ползунка содержит функцию, которая обновляет число в поле ввода при движении ползунка. | ||
Строка 394: | Строка 293: | ||
Скачать пример: [[Медиа:dl_example_Slider.zip|Example_Slider.zip]] | Скачать пример: [[Медиа:dl_example_Slider.zip|Example_Slider.zip]] | ||
− | < | + | |
− | + | <toggledisplay status=hide showtext="Код примера:↓" hidetext="Скрыть↑" linkstyle="font-size:default"> | |
− | |||
Файл '''"dl_example_Slider.html"''' | Файл '''"dl_example_Slider.html"''' | ||
− | < | + | <source lang="html" first-line="1"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Строка 411: | Строка 309: | ||
</body> | </body> | ||
</html> | </html> | ||
− | </ | + | </source> |
Файл '''"dl_example_Slider.js"''' | Файл '''"dl_example_Slider.js"''' | ||
− | < | + | <source lang="javascript" first-line="1"> |
function main_dl_example_Slider() { | function main_dl_example_Slider() { | ||
Строка 430: | Строка 328: | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
== Рисование == | == Рисование == | ||
Переходим к рисованию. Рисование осуществляется на специальном поле для рисования "canvas". Вставить его можно следующим тегом: | Переходим к рисованию. Рисование осуществляется на специальном поле для рисования "canvas". Вставить его можно следующим тегом: | ||
− | < | + | <source lang="html" first-line="1"> |
<canvas id="canvas_name" width="600" height="150" style="border: 1px solid #000000"></canvas> | <canvas id="canvas_name" width="600" height="150" style="border: 1px solid #000000"></canvas> | ||
− | </ | + | </source> |
* Атрибут width - ширина рамки для рисования. | * Атрибут width - ширина рамки для рисования. | ||
* Атрибут height - высота рамки для рисования. | * Атрибут height - высота рамки для рисования. | ||
Строка 454: | Строка 351: | ||
Скачать пример: [[Медиа:dl_example_Canvas_1.zip|Example_Canvas_1.zip]] | Скачать пример: [[Медиа:dl_example_Canvas_1.zip|Example_Canvas_1.zip]] | ||
− | < | + | |
− | + | <toggledisplay status=hide showtext="Код примера:↓" hidetext="Скрыть↑" linkstyle="font-size:default"> | |
− | |||
Файл '''"dl_example_Canvas_1.html"''' | Файл '''"dl_example_Canvas_1.html"''' | ||
− | < | + | <source lang="html" first-line="1"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Строка 469: | Строка 365: | ||
</body> | </body> | ||
</html> | </html> | ||
− | </ | + | </source> |
Файл '''"dl_example_Canvas_1.js"''' | Файл '''"dl_example_Canvas_1.js"''' | ||
− | < | + | <source lang="javascript" first-line="1"> |
function main_dl_example_Canvas_1() { | function main_dl_example_Canvas_1() { | ||
var ctx = canvas_example_1.getContext("2d"); // всё рисование будет происходить с помощью ctx | var ctx = canvas_example_1.getContext("2d"); // всё рисование будет происходить с помощью ctx | ||
Строка 480: | Строка 376: | ||
ctx.stroke(); // закончить рисование ("обвести нарисованное") | ctx.stroke(); // закончить рисование ("обвести нарисованное") | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
=== Пример №2. Различные геометрические фигуры === | === Пример №2. Различные геометрические фигуры === | ||
Строка 491: | Строка 386: | ||
Скачать пример: [[Медиа:dl_example_Canvas_2.zip|Example_Canvas_2.zip]] | Скачать пример: [[Медиа:dl_example_Canvas_2.zip|Example_Canvas_2.zip]] | ||
− | < | + | |
− | + | <toggledisplay status=hide showtext="Код примера:↓" hidetext="Скрыть↑" linkstyle="font-size:default"> | |
− | |||
Файл '''"dl_example_Canvas_2.html"''' | Файл '''"dl_example_Canvas_2.html"''' | ||
− | < | + | <source lang="html" first-line="1"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Строка 506: | Строка 400: | ||
</body> | </body> | ||
</html> | </html> | ||
− | </ | + | </source> |
Файл '''"dl_example_Canvas_2.js"''' | Файл '''"dl_example_Canvas_2.js"''' | ||
− | < | + | <source lang="javascript" first-line="1"> |
function main_dl_example_Canvas_2() { | function main_dl_example_Canvas_2() { | ||
Строка 588: | Строка 482: | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
=== Пример №3. Копирование изображений === | === Пример №3. Копирование изображений === | ||
Строка 601: | Строка 494: | ||
Скачать пример: [[Медиа:dl_example_Canvas_3.zip|Example_Canvas_3.zip]] | Скачать пример: [[Медиа:dl_example_Canvas_3.zip|Example_Canvas_3.zip]] | ||
− | < | + | |
− | + | <toggledisplay status=hide showtext="Код примера:↓" hidetext="Скрыть↑" linkstyle="font-size:default"> | |
− | |||
Файл '''"dl_example_Canvas_3.html"''' | Файл '''"dl_example_Canvas_3.html"''' | ||
− | < | + | <source lang="html" first-line="1"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Строка 616: | Строка 508: | ||
</body> | </body> | ||
</html> | </html> | ||
− | </ | + | </source> |
Файл '''"dl_example_Canvas_3.js"''' | Файл '''"dl_example_Canvas_3.js"''' | ||
− | < | + | <source lang="javascript" first-line="1"> |
function main_dl_example_Canvas_3() { | function main_dl_example_Canvas_3() { | ||
Строка 646: | Строка 538: | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
=== Пример №4. Анимация === | === Пример №4. Анимация === | ||
Строка 657: | Строка 548: | ||
Скачать пример: [[Медиа:dl_example_Canvas_4.zip|Example_Canvas_4.zip]] | Скачать пример: [[Медиа:dl_example_Canvas_4.zip|Example_Canvas_4.zip]] | ||
− | < | + | |
− | + | <toggledisplay status=hide showtext="Код примера:↓" hidetext="Скрыть↑" linkstyle="font-size:default"> | |
− | |||
Файл '''"dl_example_Canvas_4.html"''' | Файл '''"dl_example_Canvas_4.html"''' | ||
− | < | + | <source lang="html" first-line="1"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Строка 672: | Строка 562: | ||
</body> | </body> | ||
</html> | </html> | ||
− | </ | + | </source> |
Файл '''"dl_example_Canvas_4.js"''' | Файл '''"dl_example_Canvas_4.js"''' | ||
− | < | + | <source lang="javascript" first-line="1"> |
function main_dl_example_Canvas_4() { | function main_dl_example_Canvas_4() { | ||
Строка 708: | Строка 598: | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
=== Пример №5. Управление мышью === | === Пример №5. Управление мышью === | ||
Строка 725: | Строка 614: | ||
Скачать пример: [[Медиа:dl_example_Canvas_5.zip|Example_Canvas_5.zip]] | Скачать пример: [[Медиа:dl_example_Canvas_5.zip|Example_Canvas_5.zip]] | ||
− | < | + | |
− | + | <toggledisplay status=hide showtext="Код примера:↓" hidetext="Скрыть↑" linkstyle="font-size:default"> | |
− | |||
Файл '''"dl_example_Canvas_5.html"''' | Файл '''"dl_example_Canvas_5.html"''' | ||
− | < | + | <source lang="html" first-line="1"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Строка 740: | Строка 628: | ||
</body> | </body> | ||
</html> | </html> | ||
− | </ | + | </source> |
Файл '''"dl_example_Canvas_5.js"''' | Файл '''"dl_example_Canvas_5.js"''' | ||
− | < | + | <source lang="javascript" first-line="1"> |
function main_dl_example_Canvas_5() { | function main_dl_example_Canvas_5() { | ||
Строка 802: | Строка 690: | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
== Стенды Виртуальной лаборатории == | == Стенды Виртуальной лаборатории == |