Редактирование: Обучение 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 - здесь находится ссылка на функцию, которая должна запуститься, когда происходит нажатие на кнопку. Изначально эта функция пуста, поэтому далее мы её задаем. | ||
Строка 98: | Строка 95: | ||
На первый взгляд здесь намного больше кода, но когда ваши скрипты "разрастутся", работать в таком формате будет намного удобней. | На первый взгляд здесь намного больше кода, но когда ваши скрипты "разрастутся", работать в таком формате будет намного удобней. | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
== Вывод текста на экран == | == Вывод текста на экран == | ||
Строка 252: | Строка 102: | ||
Выводить на экран текст мы будем с помощью тега <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: | Строка 124: | ||
Чтобы вставить переключатель, нужно добавить тег: | Чтобы вставить переключатель, нужно добавить тег: | ||
− | < | + | <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: | Строка 135: | ||
В данном примере как только вы нажимаете на один из переключателей, мгновенно срабатывает событие и выводится картинка. | В данном примере как только вы нажимаете на один из переключателей, мгновенно срабатывает событие и выводится картинка. | ||
− | {{#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: | Строка 155: | ||
</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: | Строка 163: | ||
radio_pic_3.onchange = function() {pic_span.innerHTML = "__,,,^._.^,,,__"}; | radio_pic_3.onchange = function() {pic_span.innerHTML = "__,,,^._.^,,,__"}; | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
=== Поле для ввода === | === Поле для ввода === | ||
Строка 331: | Строка 171: | ||
Чтобы задать подобное поле, нужно добавить следующий тег: | Чтобы задать подобное поле, нужно добавить следующий тег: | ||
− | < | + | <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: | Строка 186: | ||
Скачать пример: [[Медиа: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: | Строка 201: | ||
</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: | Строка 209: | ||
} | } | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
=== Ползунок === | === Ползунок === | ||
Строка 380: | Строка 218: | ||
<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: | Строка 232: | ||
Скачать пример: [[Медиа: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: | Строка 248: | ||
</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: | Строка 267: | ||
} | } | ||
− | </ | + | </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: | Строка 290: | ||
Скачать пример: [[Медиа: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: | Строка 304: | ||
</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: | Строка 315: | ||
ctx.stroke(); // закончить рисование ("обвести нарисованное") | ctx.stroke(); // закончить рисование ("обвести нарисованное") | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
=== Пример №2. Различные геометрические фигуры === | === Пример №2. Различные геометрические фигуры === | ||
Строка 491: | Строка 325: | ||
Скачать пример: [[Медиа: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: | Строка 339: | ||
</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: | Строка 421: | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
=== Пример №3. Копирование изображений === | === Пример №3. Копирование изображений === | ||
Строка 601: | Строка 433: | ||
Скачать пример: [[Медиа: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: | Строка 447: | ||
</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: | Строка 477: | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
=== Пример №4. Анимация === | === Пример №4. Анимация === | ||
Строка 657: | Строка 487: | ||
Скачать пример: [[Медиа: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: | Строка 501: | ||
</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: | Строка 537: | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
=== Пример №5. Управление мышью === | === Пример №5. Управление мышью === | ||
Строка 725: | Строка 553: | ||
Скачать пример: [[Медиа: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: | Строка 567: | ||
</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: | Строка 629: | ||
} | } | ||
− | </ | + | </source> |
− | </ | + | </toggledisplay> |
− | |||
== Стенды Виртуальной лаборатории == | == Стенды Виртуальной лаборатории == | ||
Строка 824: | Строка 650: | ||
**[[Простейшая 3D программа|На чистом WebGL]] | **[[Простейшая 3D программа|На чистом WebGL]] | ||
**[[Простейшая 3D программа с использованием Three.js|С использованием библиотеки Three.js]] | **[[Простейшая 3D программа с использованием Three.js|С использованием библиотеки Three.js]] | ||
− | |||
− | |||
− | |||
[[Category: Виртуальная лаборатория]] | [[Category: Виртуальная лаборатория]] | ||
[[Category: Программирование]] | [[Category: Программирование]] | ||
[[Category: JavaScript]] | [[Category: JavaScript]] |