Редактирование: Обучение 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> | ||
Строка 30: | Строка 30: | ||
Часто требуется не только открывающий тег, но и закрывающий, например: | Часто требуется не только открывающий тег, но и закрывающий, например: | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<strong>Текст между двумя тегами — открывающим и закрывающим.</strong> | <strong>Текст между двумя тегами — открывающим и закрывающим.</strong> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Строка 37: | Строка 37: | ||
=== Атрибуты === | === Атрибуты === | ||
Бывают случаи, когда тег нужно определенным образом "настроить". Для этого используются атрибуты тега. Например, тег: | Бывают случаи, когда тег нужно определенным образом "настроить". Для этого используются атрибуты тега. Например, тег: | ||
− | <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: | Строка 46: | ||
=== Пример === | === Пример === | ||
Давайте еще раз рассмотрим первый пример: | Давайте еще раз рассмотрим первый пример: | ||
− | <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: | Строка 59: | ||
Давайте перепишем наш пример с кнопкой в соответствии с этим правилом. | Давайте перепишем наш пример с кнопкой в соответствии с этим правилом. | ||
Откройте блокнот и скопируйте в него следующий код: | Откройте блокнот и скопируйте в него следующий код: | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<head> | <head> | ||
<script src="program2.js"></script> | <script src="program2.js"></script> | ||
Строка 225: | Строка 225: | ||
Этим способом мы уже несколько раз воспользовались. | Этим способом мы уже несколько раз воспользовались. | ||
В строке: | В строке: | ||
− | <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: | Строка 236: | ||
Чтобы его применить, нужно дать 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: | Строка 252: | ||
Выводить на экран текст мы будем с помощью тега <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: | Строка 259: | ||
Код примера выше: | Код примера выше: | ||
− | <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: | Строка 274: | ||
Чтобы вставить переключатель, нужно добавить тег: | Чтобы вставить переключатель, нужно добавить тег: | ||
− | <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> | ||
Строка 292: | Строка 292: | ||
<div class="mw-collapsible-content"> | <div class="mw-collapsible-content"> | ||
Файл '''"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> | ||
Строка 319: | Строка 319: | ||
В примере вы можете видеть непонятную строку: | В примере вы можете видеть непонятную строку: | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Строка 331: | Строка 331: | ||
Чтобы задать подобное поле, нужно добавить следующий тег: | Чтобы задать подобное поле, нужно добавить следующий тег: | ||
− | <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> | ||
Строка 350: | Строка 350: | ||
<div class="mw-collapsible-content"> | <div class="mw-collapsible-content"> | ||
Файл '''"dl_example_Number.html"''' | Файл '''"dl_example_Number.html"''' | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Строка 380: | Строка 380: | ||
<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;"> | ||
Строка 398: | Строка 398: | ||
<div class="mw-collapsible-content"> | <div class="mw-collapsible-content"> | ||
Файл '''"dl_example_Slider.html"''' | Файл '''"dl_example_Slider.html"''' | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html" line start="1" enclose="div"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Строка 437: | Строка 437: | ||
Переходим к рисованию. Рисование осуществляется на специальном поле для рисования "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> | ||
Строка 458: | Строка 458: | ||
<div class="mw-collapsible-content"> | <div class="mw-collapsible-content"> | ||
Файл '''"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> | ||
Строка 495: | Строка 495: | ||
<div class="mw-collapsible-content"> | <div class="mw-collapsible-content"> | ||
Файл '''"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> | ||
Строка 605: | Строка 605: | ||
<div class="mw-collapsible-content"> | <div class="mw-collapsible-content"> | ||
Файл '''"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> | ||
Строка 661: | Строка 661: | ||
<div class="mw-collapsible-content"> | <div class="mw-collapsible-content"> | ||
Файл '''"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> | ||
Строка 729: | Строка 729: | ||
<div class="mw-collapsible-content"> | <div class="mw-collapsible-content"> | ||
Файл '''"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> |