Редактирование: Обучение JavaScript
Внимание! Вы не авторизовались на сайте. Ваш IP-адрес будет публично видимым, если вы будете вносить любые правки. Если вы войдёте или создадите учётную запись, правки вместо этого будут связаны с вашим именем пользователя, а также у вас появятся другие преимущества.
Правка может быть отменена. Пожалуйста, просмотрите сравнение версий, чтобы убедиться, что это именно те изменения, которые вас интересуют, и нажмите «Записать страницу», чтобы изменения вступили в силу.
Текущая версия | Ваш текст | ||
Строка 8: | Строка 8: | ||
== Hello World! == | == Hello World! == | ||
Начнем с небольшого примера. Откройте блокнот, и скопируйте туда строку ниже: | Начнем с небольшого примера. Откройте блокнот, и скопируйте туда строку ниже: | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<input type="button" value="Нажми меня" onclick="alert('Hello World!')"> | <input type="button" value="Нажми меня" onclick="alert('Hello World!')"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Строка 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: | ||
Часто требуется не только открывающий тег, но и закрывающий, например: | Часто требуется не только открывающий тег, но и закрывающий, например: | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<strong>Текст между двумя тегами — открывающим и закрывающим.</strong> | <strong>Текст между двумя тегами — открывающим и закрывающим.</strong> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Строка 37: | Строка 34: | ||
=== Атрибуты === | === Атрибуты === | ||
Бывают случаи, когда тег нужно определенным образом "настроить". Для этого используются атрибуты тега. Например, тег: | Бывают случаи, когда тег нужно определенным образом "настроить". Для этого используются атрибуты тега. Например, тег: | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<font size="1" color="red">Маленькие красные буквы</font> | <font size="1" color="red">Маленькие красные буквы</font> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Строка 46: | Строка 43: | ||
=== Пример === | === Пример === | ||
Давайте еще раз рассмотрим первый пример: | Давайте еще раз рассмотрим первый пример: | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<input type="button" value="Нажми меня" onclick="alert('Hello World!');"> | <input type="button" value="Нажми меня" onclick="alert('Hello World!');"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Строка 59: | Строка 56: | ||
Давайте перепишем наш пример с кнопкой в соответствии с этим правилом. | Давайте перепишем наш пример с кнопкой в соответствии с этим правилом. | ||
Откройте блокнот и скопируйте в него следующий код: | Откройте блокнот и скопируйте в него следующий код: | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<head> | <head> | ||
<script src="program2.js"></script> | <script src="program2.js"></script> | ||
Строка 179: | Строка 176: | ||
Длину массива практически всегда можно узнать с помощью свойства "m.length". | Длину массива практически всегда можно узнать с помощью свойства "m.length". | ||
− | < | + | <toggledisplay status=hide showtext="Однако, есть исключения:↓" hidetext="Скрыть↑" linkstyle="font-size:default"> |
− | + | * Если задать массив подобным образом: | |
− | |||
<syntaxhighlight lang="javascript" line start="1" enclose="div"> | <syntaxhighlight lang="javascript" line start="1" enclose="div"> | ||
var m = []; | var m = []; | ||
Строка 188: | Строка 184: | ||
то m.length выдаст "101", хотя в массиве будет всего один элемент (101 потому, что счет элементов начинается с 0, т.е. m[100] - это 101-ый элемент). | то m.length выдаст "101", хотя в массиве будет всего один элемент (101 потому, что счет элементов начинается с 0, т.е. m[100] - это 101-ый элемент). | ||
* Можно вручную задать значение свойства length, например "m.length = 42;". | * Можно вручную задать значение свойства length, например "m.length = 42;". | ||
− | </ | + | </toggledisplay> |
− | |||
Для добавления/удаления значений массива используются методы: | Для добавления/удаления значений массива используются методы: | ||
Строка 225: | Строка 220: | ||
Этим способом мы уже несколько раз воспользовались. | Этим способом мы уже несколько раз воспользовались. | ||
В строке: | В строке: | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<input type="button" value="Нажми меня" onclick="alert('Hello World!')"> | <input type="button" value="Нажми меня" onclick="alert('Hello World!')"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Строка 236: | Строка 231: | ||
Чтобы его применить, нужно дать id элементу, у которого мы хотим отследить событие: | Чтобы его применить, нужно дать id элементу, у которого мы хотим отследить событие: | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<input type="button" id="press_me_button" value="Нажми меня"> | <input type="button" id="press_me_button" value="Нажми меня"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Строка 252: | Строка 247: | ||
Выводить на экран текст мы будем с помощью тега <span>: | Выводить на экран текст мы будем с помощью тега <span>: | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<span id="span_name">Здесь будет находиться выводимый текст</span> | <span id="span_name">Здесь будет находиться выводимый текст</span> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Строка 259: | Строка 254: | ||
Код примера выше: | Код примера выше: | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<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='Лето'"> | ||
Строка 274: | Строка 269: | ||
Чтобы вставить переключатель, нужно добавить тег: | Чтобы вставить переключатель, нужно добавить тег: | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<input type="radio" id="radio_water" name="element" checked> Вода | <input type="radio" id="radio_water" name="element" checked> Вода | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Строка 285: | Строка 280: | ||
В данном примере как только вы нажимаете на один из переключателей, мгновенно срабатывает событие и выводится картинка. | В данном примере как только вы нажимаете на один из переключателей, мгновенно срабатывает событие и выводится картинка. | ||
− | {{#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"''' | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Строка 315: | Строка 309: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | </ | + | </toggledisplay> |
− | |||
В примере вы можете видеть непонятную строку: | В примере вы можете видеть непонятную строку: | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Строка 331: | Строка 324: | ||
Чтобы задать подобное поле, нужно добавить следующий тег: | Чтобы задать подобное поле, нужно добавить следующий тег: | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<input type="number" min=1 max=10 value=5 style="width: 50px"> | <input type="number" min=1 max=10 value=5 style="width: 50px"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Строка 346: | Строка 339: | ||
Скачать пример: [[Медиа: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"''' | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Строка 371: | Строка 363: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | </ | + | </toggledisplay> |
− | |||
=== Ползунок === | === Ползунок === | ||
Строка 380: | Строка 371: | ||
<htmlet nocache="yes">Tcvetkov/JavaScript_training_examples/Example_slider</htmlet> | <htmlet nocache="yes">Tcvetkov/JavaScript_training_examples/Example_slider</htmlet> | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<input type="range" id="some_sl" min="1" max="100" value=50 step=0.5 style="width: 150px;" oninput="some_num.value = some_sl.value;"> | <input type="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;"> | ||
Строка 394: | Строка 385: | ||
Скачать пример: [[Медиа: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"''' | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Строка 431: | Строка 421: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | </ | + | </toggledisplay> |
− | |||
== Рисование == | == Рисование == | ||
Переходим к рисованию. Рисование осуществляется на специальном поле для рисования "canvas". Вставить его можно следующим тегом: | Переходим к рисованию. Рисование осуществляется на специальном поле для рисования "canvas". Вставить его можно следующим тегом: | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<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> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Строка 454: | Строка 443: | ||
Скачать пример: [[Медиа: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"''' | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Строка 481: | Строка 469: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | </ | + | </toggledisplay> |
− | |||
=== Пример №2. Различные геометрические фигуры === | === Пример №2. Различные геометрические фигуры === | ||
Строка 491: | Строка 478: | ||
Скачать пример: [[Медиа: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"''' | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Строка 589: | Строка 575: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | </ | + | </toggledisplay> |
− | |||
=== Пример №3. Копирование изображений === | === Пример №3. Копирование изображений === | ||
Строка 601: | Строка 586: | ||
Скачать пример: [[Медиа: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"''' | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Строка 647: | Строка 631: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | </ | + | </toggledisplay> |
− | |||
=== Пример №4. Анимация === | === Пример №4. Анимация === | ||
Строка 657: | Строка 640: | ||
Скачать пример: [[Медиа: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"''' | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Строка 709: | Строка 691: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | </ | + | </toggledisplay> |
− | |||
=== Пример №5. Управление мышью === | === Пример №5. Управление мышью === | ||
Строка 725: | Строка 706: | ||
Скачать пример: [[Медиа: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"''' | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Строка 803: | Строка 783: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | </ | + | </toggledisplay> |
− | |||
== Стенды Виртуальной лаборатории == | == Стенды Виртуальной лаборатории == |