Редактирование: Обучение 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 - это имя переключателя в памяти компьютера, оно нужно для того, чтобы мы могли из скрипта проверить состояние переключателя. | ||
Строка 285: | Строка 133: | ||
В данном примере как только вы нажимаете на один из переключателей, мгновенно срабатывает событие и выводится картинка. | В данном примере как только вы нажимаете на один из переключателей, мгновенно срабатывает событие и выводится картинка. | ||
− | {{#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_2.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: | Строка 153: | ||
</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: | Строка 161: | ||
radio_pic_3.onchange = function() {pic_span.innerHTML = "__,,,^._.^,,,__"}; | radio_pic_3.onchange = function() {pic_span.innerHTML = "__,,,^._.^,,,__"}; | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
=== Поле для ввода === | === Поле для ввода === | ||
Строка 331: | Строка 169: | ||
Чтобы задать подобное поле, нужно добавить следующий тег: | Чтобы задать подобное поле, нужно добавить следующий тег: | ||
− | < | + | <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: | Строка 181: | ||
Пример с извлечением значения из данного поля: | Пример с извлечением значения из данного поля: | ||
− | {{#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: | Строка 199: | ||
</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: | Строка 207: | ||
} | } | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
=== Ползунок === | === Ползунок === | ||
Строка 380: | Строка 216: | ||
<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: | Строка 230: | ||
Скачать пример: [[Медиа: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: | Строка 246: | ||
</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: | Строка 265: | ||
} | } | ||
− | </ | + | </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: | Строка 288: | ||
Скачать пример: [[Медиа: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: | Строка 302: | ||
</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: | Строка 313: | ||
ctx.stroke(); // закончить рисование ("обвести нарисованное") | ctx.stroke(); // закончить рисование ("обвести нарисованное") | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
=== Пример №2. Различные геометрические фигуры === | === Пример №2. Различные геометрические фигуры === | ||
Строка 491: | Строка 323: | ||
Скачать пример: [[Медиа: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: | Строка 337: | ||
</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: | Строка 419: | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
=== Пример №3. Копирование изображений === | === Пример №3. Копирование изображений === | ||
Строка 601: | Строка 431: | ||
Скачать пример: [[Медиа: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: | Строка 445: | ||
</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: | Строка 475: | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
=== Пример №4. Анимация === | === Пример №4. Анимация === | ||
Строка 657: | Строка 485: | ||
Скачать пример: [[Медиа: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: | Строка 499: | ||
</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: | Строка 535: | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
=== Пример №5. Управление мышью === | === Пример №5. Управление мышью === | ||
Строка 725: | Строка 551: | ||
Скачать пример: [[Медиа: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: | Строка 565: | ||
</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: | Строка 627: | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | < | + | |
+ | == TODO == | ||
+ | <font color=red> | ||
+ | НАПИСАТЬ ПРО DOCTYPE И ТЕГ <HTML> | ||
+ | |||
+ | НАПИСАТЬ ПРО РАЗЛИЧНЫЕ СПОСОБЫ ЗАДАНИЯ ФУНКЦИЙ, ТАКИХ КАК ONCLICK, ONCHANGE | ||
+ | |||
+ | НАПИСАТЬ ПРО ПЕРЕМЕННЫЕ, VAR, И ПРО НЕЖЕЛАТЕЛЬНОСТЬ ИСПОЛЬЗОВАНИЯ CONST | ||
+ | |||
+ | ПРОВЕРИТЬ В IE И CHROME | ||
− | + | ССЫЛКА НА СТАТЬЮ О ЦВЕТАХ, ССЫЛКА НА 3D ПРИМЕРЫ, ССЫЛКА НА ТЕСТОВУЮ BOX2D ПРОГРАММУ, ВВЕРХУ ШАПКА-ССЫЛКА НА ВИРТУАЛЬНУЮ ЛАБОРАТОРИЮ, КАТЕГОРИИ | |
− | + | НАПИСАТЬ ПРО ОБЪЕКТЫ, [], Т.П. | |
− | + | УДАЛИТЬ "ИСПОЛЬЗОВАНИЕ МЫШИ" НА СТРАНИЦЕ "ПРОСТЕЙШИЕ ИНТЕРНЕТ-ПРОГРАММЫ", ОНО НА НЕИСПОЛЬЗУЕМОЙ БИБЛИОТЕКЕ | |
− | |||
− | |||
− | |||
− | + | ВЫЛОЖИТЬ ВСЕ ZIP-АРХИВЫ С ПРИМЕРАМИ | |
− | |||
− | + | МОЖЕТ СТОИТ СДЕЛАТЬ РАЗДЕЛ/ОТДЕЛЬНУЮ СТРАНИЦУ "ТЕХНИКИ ПРОГРАММИРОВАНИЯ", И ПЕРЕМЕСТИТЬ ТУДА СТАТЬЮ О КОПИРОВАНИИ? | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | НАПИСАТЬ ПРО CONSOLE(), ОПИСАТЬ ПРОГРАММЫ ДЛЯ РАЗРАБОТКИ - F12, NOTEPAD++, WEBSTORM, Т.П. | |
− | |||
− | + | </font> | |
− | |||
− |