Редактирование: Обучение JavaScript
Внимание! Вы не авторизовались на сайте. Ваш IP-адрес будет публично видимым, если вы будете вносить любые правки. Если вы войдёте или создадите учётную запись, правки вместо этого будут связаны с вашим именем пользователя, а также у вас появятся другие преимущества.
Правка может быть отменена. Пожалуйста, просмотрите сравнение версий, чтобы убедиться, что это именно те изменения, которые вас интересуют, и нажмите «Записать страницу», чтобы изменения вступили в силу.
Текущая версия | Ваш текст | ||
Строка 1: | Строка 1: | ||
− | |||
− | |||
Здесь размещено небольшое пособие, помогающее начать писать программы на языке JavaScript. Пособие ориентировано на людей, не имеющих представления ни об этом языке, ни об HTML тегах, но, желательно, хотя бы немного представляющих принципы программирования, понятие о функциях, циклах, условиях "if" и т.п. | Здесь размещено небольшое пособие, помогающее начать писать программы на языке JavaScript. Пособие ориентировано на людей, не имеющих представления ни об этом языке, ни об HTML тегах, но, желательно, хотя бы немного представляющих принципы программирования, понятие о функциях, циклах, условиях "if" и т.п. | ||
Строка 8: | Строка 6: | ||
== 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: | Строка 16: | ||
Вы написали первую программу с использованием языка разметки 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: | Строка 25: | ||
Часто требуется не только открывающий тег, но и закрывающий, например: | Часто требуется не только открывающий тег, но и закрывающий, например: | ||
− | < | + | <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: | Строка 41: | ||
=== Пример === | === Пример === | ||
Давайте еще раз рассмотрим первый пример: | Давайте еще раз рассмотрим первый пример: | ||
− | < | + | <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: | Строка 54: | ||
Давайте перепишем наш пример с кнопкой в соответствии с этим правилом. | Давайте перепишем наш пример с кнопкой в соответствии с этим правилом. | ||
Откройте блокнот и скопируйте в него следующий код: | Откройте блокнот и скопируйте в него следующий код: | ||
− | < | + | <source lang="html" first-line="1"> |
<head> | <head> | ||
<script src="program2.js"></script> | <script src="program2.js"></script> | ||
Строка 66: | Строка 61: | ||
<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: | Строка 71: | ||
}; | }; | ||
} | } | ||
− | </ | + | </source> |
Сохраните файл как "program2.js", и запустите файл "program2.html". | Сохраните файл как "program2.js", и запустите файл "program2.html". | ||
Строка 88: | Строка 83: | ||
Первая строка - начало описания функции (той самой функции 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 - здесь находится ссылка на функцию, которая должна запуститься, когда происходит нажатие на кнопку. Изначально эта функция пуста, поэтому далее мы её задаем. | ||
Строка 98: | Строка 93: | ||
На первый взгляд здесь намного больше кода, но когда ваши скрипты "разрастутся", работать в таком формате будет намного удобней. | На первый взгляд здесь намного больше кода, но когда ваши скрипты "разрастутся", работать в таком формате будет намного удобней. | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
== Вывод текста на экран == | == Вывод текста на экран == | ||
Строка 252: | Строка 100: | ||
Выводить на экран текст мы будем с помощью тега <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: | Строка 122: | ||
Чтобы вставить переключатель, нужно добавить тег: | Чтобы вставить переключатель, нужно добавить тег: | ||
− | < | + | <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 - это имя переключателя в памяти компьютера, оно нужно для того, чтобы мы могли из скрипта проверить состояние переключателя. | ||
Строка 282: | Строка 130: | ||
* checked означает, что данный переключатель активирован (как если бы вы нажали на него мышкой). | * checked означает, что данный переключатель активирован (как если бы вы нажали на него мышкой). | ||
+ | |||
+ | Скачать пример: [[Медиа:dl_example_Radio.zip|Example_Radio.zip]] | ||
+ | |||
+ | В данном примере вы сначала с помощью переключателей выбираете одну из опций, а потом нажимаете кнопку, которая выводит картинку в соответствии с выбранным переключателем. | ||
+ | |||
+ | <toggledisplay status=hide showtext="Код примера:↓" hidetext="Скрыть↑" linkstyle="font-size:default"> | ||
+ | Файл '''"dl_example_Radio.html"''' | ||
+ | <source lang="html" first-line="1"> | ||
+ | <!DOCTYPE html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <title>Example Radio</title> | ||
+ | <script src="dl_example_Radio.js"></script> | ||
+ | </head> | ||
+ | <body onload="main_dl_example_Radio();"> | ||
+ | <input type="radio" id="radio_pic_1" name="pic" checked> Рыба <br> | ||
+ | <input type="radio" id="radio_pic_2" name="pic"> Ярость <br> | ||
+ | <input type="radio" id="radio_pic_3" name="pic"> Кот <br> | ||
+ | <input type="button" id="draw_button" value="Нарисовать"> | ||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | Файл '''"dl_example_Radio.js"''' | ||
+ | <source lang="javascript" first-line="1"> | ||
+ | function main_dl_example_Radio() { | ||
+ | |||
+ | draw_button.onclick = function() { | ||
+ | if (radio_pic_1.checked) { | ||
+ | alert(".·´¯`·.´¯`·.¸¸.·´¯`·.¸><(((º>"); | ||
+ | } else if (radio_pic_2.checked) { | ||
+ | alert("(╯°□°)╯︵ ┻━┻"); | ||
+ | } else if (radio_pic_3.checked) { | ||
+ | alert("__,,,^._.^,,,__"); | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | } | ||
+ | </source> | ||
+ | </toggledisplay> | ||
+ | |||
+ | |||
+ | Скачать пример №2: [[Медиа:dl_example_Radio_2.zip|Example_Radio_2.zip]] | ||
+ | |||
+ | <font color=red>ВЫЛОЖИТЬ ПРИМЕР ПРЯМО НА СТРАНИЦУ, ПЕРВЫЙ УБРАТЬ, НАВЕРНОЕ</font> | ||
В данном примере как только вы нажимаете на один из переключателей, мгновенно срабатывает событие и выводится картинка. | В данном примере как только вы нажимаете на один из переключателей, мгновенно срабатывает событие и выводится картинка. | ||
− | + | <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: | Строка 193: | ||
</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: | Строка 201: | ||
radio_pic_3.onchange = function() {pic_span.innerHTML = "__,,,^._.^,,,__"}; | radio_pic_3.onchange = function() {pic_span.innerHTML = "__,,,^._.^,,,__"}; | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
=== Поле для ввода === | === Поле для ввода === | ||
Строка 331: | Строка 209: | ||
Чтобы задать подобное поле, нужно добавить следующий тег: | Чтобы задать подобное поле, нужно добавить следующий тег: | ||
− | < | + | <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 - минимальное число, до которого можно дойти стрелочками | ||
Строка 343: | Строка 221: | ||
Пример с извлечением значения из данного поля: | Пример с извлечением значения из данного поля: | ||
− | {{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Tcvetkov/JavaScript_training_examples/dl_example_Number.html |width=200|height= | + | {{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Tcvetkov/JavaScript_training_examples/dl_example_Number.html |width=200|height=30 |border=0 }} |
Скачать пример: [[Медиа: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: | Строка 239: | ||
</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: | Строка 247: | ||
} | } | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
=== Ползунок === | === Ползунок === | ||
Строка 380: | Строка 256: | ||
<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=" | + | <input type="range" id="some_slider" min="1" max="100" value=50 step=0.5 style="width: 150px;" oninput="some_number.value = some_slider.value;"> |
− | <input type="number" id=" | + | <input type="number" id="some_number" min=1 max=100 value=50 step=0.5 style="width: 50px" oninput="some_slider.value = some_number.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: | Строка 270: | ||
Скачать пример: [[Медиа: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: | Строка 286: | ||
</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: | Строка 305: | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
== Рисование == | == Рисование == | ||
+ | === Статические картинки === | ||
− | Переходим к рисованию. Рисование осуществляется на | + | Переходим к рисованию. Рисование осуществляется на специальной рамке, 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 - высота рамки для рисования. | ||
− | * Атрибут style="border: 1px solid #000000" в данном случае содержит в себе описание границы (черной обводки вокруг | + | * Атрибут style="border: 1px solid #000000" в данном случае содержит в себе описание границы (черной обводки вокруг рамки) |
** 1px - толщина рамки будет равна 1 пикселю | ** 1px - толщина рамки будет равна 1 пикселю | ||
** solid - граница будет сплошной | ** solid - граница будет сплошной | ||
** #000000 - цвет рамки в HEX-формате, в данном случае, черный. (подробнее про цвета см. [[Различные цветовые модели и их использование#HEX-представление цветов| "HEX-представление цветов"]]) | ** #000000 - цвет рамки в HEX-формате, в данном случае, черный. (подробнее про цвета см. [[Различные цветовые модели и их использование#HEX-представление цветов| "HEX-представление цветов"]]) | ||
− | === Пример №1. Линия === | + | ==== Пример №1. Линия ==== |
Простейший случай, одна линия. | Простейший случай, одна линия. | ||
Строка 454: | Строка 329: | ||
Скачать пример: [[Медиа: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: | Строка 343: | ||
</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: | Строка 354: | ||
ctx.stroke(); // закончить рисование ("обвести нарисованное") | ctx.stroke(); // закончить рисование ("обвести нарисованное") | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
− | === Пример №2. Различные геометрические фигуры === | + | ==== Пример №2. Различные геометрические фигуры ==== |
Пример рисования линий различной толщины и цвета, а также закрашенных/незакрашенных геометрических фигур, таких, как круг, прямоугольник, многоугольник. | Пример рисования линий различной толщины и цвета, а также закрашенных/незакрашенных геометрических фигур, таких, как круг, прямоугольник, многоугольник. | ||
Строка 491: | Строка 364: | ||
Скачать пример: [[Медиа: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: | Строка 378: | ||
</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: | Строка 460: | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
− | === Пример №3. Копирование изображений === | + | ==== Пример №3. Копирование изображений ==== |
Здесь продемонстрирован способ нарисовать изображение во внутреннюю память компьютера, чтобы потом скопировать на экран. | Здесь продемонстрирован способ нарисовать изображение во внутреннюю память компьютера, чтобы потом скопировать на экран. | ||
Строка 601: | Строка 472: | ||
Скачать пример: [[Медиа: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: | Строка 486: | ||
</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: | Строка 516: | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | === Анимация === | ||
+ | <font color=red> | ||
+ | ПЕРВЫЙ ПРИМЕР - ДВИЖУЩИЕСЯ КРУГИ | ||
− | + | ВТОРОЙ ПРИМЕР - ПРОСТЕЙШИЙ ПРИМЕР С ГАРМОНИЧЕСКИМИ КОЛЕБАНИЯМИ И Т.П. | |
+ | </font> | ||
− | + | === Управление мышью === | |
+ | <font color=red> | ||
+ | ПРИМЕР - .... МОЖНО УСЛОЖНЕННЫЙ ВТОРОЙ ПРИМЕР ИЗ РАЗДЕЛА АНИМАЦИИ. ИЛИ ПРУЖИНКУ ПРОСТУЮ. | ||
+ | </font> | ||
− | + | == TODO == | |
− | + | <font color=red> | |
− | + | НАПИСАТЬ ПРО DOCTYPE И ТЕГ <HTML> | |
− | |||
− | |||
− | < | ||
− | |||
− | < | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | НАПИСАТЬ ПРО РАЗЛИЧНЫЕ СПОСОБЫ ЗАДАНИЯ ФУНКЦИЙ, ТАКИХ КАК ONCLICK, ONCHANGE | |
− | |||
− | |||
− | + | НАПИСАТЬ ПРО ПЕРЕМЕННЫЕ, VAR | |
− | |||
− | + | ПРОВЕРИТЬ В IE И CHROME | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | ССЫЛКА НА СТАТЬЮ О ЦВЕТАХ, ССЫЛКА НА 3D ПРИМЕРЫ, ССЫЛКА НА ТЕСТОВУЮ BOX2D ПРОГРАММУ, ВВЕРХУ ШАПКА-ССЫЛКА НА ВИРТУАЛЬНУЮ ЛАБОРАТОРИЮ, КАТЕГОРИИ | |
− | + | НАПИСАТЬ ПРО ОБЪЕКТЫ, [], Т.П. | |
− | + | УДАЛИТЬ "ИСПОЛЬЗОВАНИЕ МЫШИ" НА СТРАНИЦЕ "ПРОСТЕЙШИЕ ИНТЕРНЕТ-ПРОГРАММЫ", ОНО НА НЕИСПОЛЬЗУЕМОЙ БИБЛИОТЕКЕ | |
− | |||
− | |||
− | |||
− | + | ВЫЛОЖИТЬ ВСЕ ZIP-АРХИВЫ С ПРИМЕРАМИ | |
− | |||
− | + | МОЖЕТ СТОИТ СДЕЛАТЬ РАЗДЕЛ/ОТДЕЛЬНУЮ СТРАНИЦУ "ТЕХНИКИ ПРОГРАММИРОВАНИЯ", И ПЕРЕМЕСТИТЬ ТУДА СТАТЬЮ О КОПИРОВАНИИ? | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | НАПИСАТЬ ПРО CONSOLE(), ОПИСАТЬ ПРОГРАММЫ ДЛЯ РАЗРАБОТКИ - F12, NOTEPAD++, WEBSTORM, Т.П. | |
− | |||
− | + | </font> | |
− | |||
− |