Редактирование: Обучение JavaScript
Внимание! Вы не авторизовались на сайте. Ваш IP-адрес будет публично видимым, если вы будете вносить любые правки. Если вы войдёте или создадите учётную запись, правки вместо этого будут связаны с вашим именем пользователя, а также у вас появятся другие преимущества.
Правка может быть отменена. Пожалуйста, просмотрите сравнение версий, чтобы убедиться, что это именно те изменения, которые вас интересуют, и нажмите «Записать страницу», чтобы изменения вступили в силу.
Текущая версия | Ваш текст | ||
Строка 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> |
− | |||
== Теги == | == Теги == | ||
Строка 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> |
− | |||
Для добавления/удаления значений массива используются методы: | Для добавления/удаления значений массива используются методы: | ||
Строка 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="html5" line start="1" enclose="div"> | <syntaxhighlight lang="html5" line start="1" enclose="div"> | ||
Строка 315: | Строка 309: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | </ | + | </toggledisplay> |
− | |||
В примере вы можете видеть непонятную строку: | В примере вы можете видеть непонятную строку: | ||
Строка 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="html5" line start="1" enclose="div"> | <syntaxhighlight lang="html5" line start="1" enclose="div"> | ||
Строка 371: | Строка 363: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | </ | + | </toggledisplay> |
− | |||
=== Ползунок === | === Ползунок === | ||
Строка 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="html5" line start="1" enclose="div"> | <syntaxhighlight lang="html5" line start="1" enclose="div"> | ||
Строка 431: | Строка 421: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | </ | + | </toggledisplay> |
− | |||
== Рисование == | == Рисование == | ||
Строка 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="html5" line start="1" enclose="div"> | <syntaxhighlight lang="html5" line start="1" enclose="div"> | ||
Строка 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="html5" line start="1" enclose="div"> | <syntaxhighlight lang="html5" line start="1" enclose="div"> | ||
Строка 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="html5" line start="1" enclose="div"> | <syntaxhighlight lang="html5" line start="1" enclose="div"> | ||
Строка 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="html5" line start="1" enclose="div"> | <syntaxhighlight lang="html5" line start="1" enclose="div"> | ||
Строка 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="html5" line start="1" enclose="div"> | <syntaxhighlight lang="html5" line start="1" enclose="div"> | ||
Строка 803: | Строка 783: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | </ | + | </toggledisplay> |
− | |||
== Стенды Виртуальной лаборатории == | == Стенды Виртуальной лаборатории == |