Обучение JavaScript

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск

Здесь размещено небольшое пособие, помогающее начать писать программы на языке JavaScript. Пособие ориентировано на людей, не имеющих представления ни об этом языке, ни об HTML тегах, но, желательно, хотя бы немного представляющих принципы программирования, понятие о функциях, циклах, условиях "if" и т.п.

Цель данного пособия - не описать по всей строгости рассматриваемый язык, а помочь быстро начать писать на нем программы.

Сначала скачайте и установите Mozilla Firefox или Google Chrome, с ними будет немного удобнее работать, чем со стандартным браузером.

Hello World!

Начнем с небольшого примера. Откройте блокнот, и скопируйте туда строку ниже: 

<input type="button" value="Нажми меня" onclick="alert('Hello World!')">

Нажмите "Сохранить как", введите название файла "program1.html" и сохраните его. Найдите файл и откройте его.

Должна появиться кнопка, при нажатии на которую появится окошко с надписью "Hello World!".

Вы написали первую программу с использованием языка разметки HTML и языка программирования JavaScript!

<toggledisplay status=hide showtext="Если возникли проблемы:↓" hidetext="Скрыть↑" linkstyle="font-size:default">

  • Если файл не открывается/открывается в блокноте, нажмите на него правой кнопкой мыши/Открыть с помощью/Firefox (или Google Chrome)
  • Если файл открывается в браузере Internet Explorer, то в нем нужно разрешить выполнение скрипта (вылезет сообщение с подтверждением), иначе при нажатии на кнопку ничего происходить не будет. Чтобы избежать этого, запускайте файл с помощью Firefox или Google Chrome (нажать на файл правой кнопкой мыши/Открыть с помощью/Выбрать программу/Firefox или Google Chrome, должна стоять галочка "Использовать выбранную программу для всех файлов такого типа").

</toggledisplay>

Теги

Мы будем использовать язык разметки HTML. Практически любая страница на языке HTML представляет собой набор тегов. Каждый тег имеет своё значение. Например, тег <hr> нарисует на странице черную горизонтальную линию (вы можете прямо сейчас попробовать написать его в файл program1.html, сохранить и запустить).

Часто требуется не только открывающий тег, но и закрывающий, например: 

<strong>Текст между двумя тегами — открывающим и закрывающим.</strong>

Текст, расположенный между этими двумя тегами, будет отображаться жирным шрифтом.

Атрибуты

Бывают случаи, когда тег нужно определенным образом "настроить". Для этого используются атрибуты тега. Например, тег: 

<font size="1" color="red">Маленькие красные буквы</font>

имеет атрибуты "size" и "color", указывающие размер и цвет текста. Содержимое этого тега будет выглядеть так:

Маленькие красные буквы

Пример

Давайте еще раз рассмотрим первый пример: 

<input type="button" value="Нажми меня" onclick="alert('Hello World!');">

Мы видим тег <input>, у которого заданы различные атрибуты.

  • Атрибут "type" - тип элемента управления, который появится на странице. В данном случае стоит "button", поэтому появляется кнопка.
  • Атрибут "value" - надпись на кнопке
  • Атрибут "onclick" - код на языке JavaScript, который выполняется при нажатии на кнопку.

Файлы html и js

Обычно для удобства принято отделять HTML-разметку от JavaScript кода. Разметка располагается в файле с расширением .html, код - в файле .js.

Давайте перепишем наш пример с кнопкой в соответствии с этим правилом. Откройте блокнот и скопируйте в него следующий код: 

<head>
    <script src="program2.js"></script>
</head>
<body onload="main_program2();">
    <input type="button" id="press_me_button" value="Нажми меня">
</body>

Сохраните файл как "program2.html".

Откройте блокнот еще раз, и скопируйте в него код ниже: 

function main_program2() {
    press_me_button.onclick = function() {
        alert("Нажимай нежнее");
    };
}

Сохраните файл как "program2.js", и запустите файл "program2.html".

Давайте разберем написанный код. Тег <head></head> чаще всего содержит различную информацию для браузера (например, кодировку), а также теги, подгружающие скрипты. В нашем случае загружается скрипт из файла "program2.js".

Тег <body></body> содержит основное содержимое страницы. В нашем случае - кнопку.

Строка <body onload="main_program2();"> означает, что как только страница загрузится в браузере - запустится функция "main_program2()" (она у нас записана в файле "program2.js").

Рассмотрим файл "program2.js". Первая строка - начало описания функции (той самой функции main_program2(), что вызывается в теге <body>). Вторая строка состоит из нескольких частей: 

press_me_button.onclick = function() {
  • press_me_button - это имя кнопки в памяти компьютера, задается в теге <input> атрибутом "id".
  • .onclick - здесь находится ссылка на функцию, которая должна запуститься, когда происходит нажатие на кнопку. Изначально эта функция пуста, поэтому далее мы её задаем.
  • = function() { - здесь как раз мы и начинаем задавать функцию.

Третья строка - непосредственно функция, которая выводит окошко с надписью.

На первый взгляд здесь намного больше кода, но когда ваши скрипты "разрастутся", работать в таком формате будет намного удобней.

Вывод текста на экран

Нажмите на кнопку: 
Здесь появится время года


Выводить на экран текст мы будем с помощью тега : 

<span id="span_name">Здесь будет находиться выводимый текст</span>
  • Атрибут id - имя поля вывода в памяти компьютера.


Код примера выше: 

<input type="button" value="Зима" onclick="span_name.innerHTML='Зима'">
<input type="button" value="Лето" onclick="span_name.innerHTML='Лето'">
<br>
<span id="span_name">Здесь появится время года</span>

Элементы управления

Мы уже рассмотрели такие элементы управления, как кнопки. Давайте узнаем, как еще можно взаимодействовать с пользователем.

Переключатели

Переключатели используются, чтобы предоставить пользователю выбор между несколькими вариантами. Например:

Вода Земля Огонь Воздух

Чтобы вставить переключатель, нужно добавить тег: 

<input type="radio" id="radio_water" name="element" checked> Вода
  • "radio" в атрибуте type говорит о том, что мы хотим получить переключатель.
  • id - это имя переключателя в памяти компьютера, оно нужно для того, чтобы мы могли из скрипта проверить состояние переключателя.
  • name - имя группы переключателей (имя может быть любым, но должно совпадать в группе переключателей).
  • checked означает, что данный переключатель активирован (как если бы вы нажали на него мышкой).


Скачать пример: Example_Radio.zip

В данном примере вы сначала с помощью переключателей выбираете одну из опций, а потом нажимаете кнопку, которая выводит картинку в соответствии с выбранным переключателем.

<toggledisplay status=hide showtext="Код примера:↓" hidetext="Скрыть↑" linkstyle="font-size:default"> Файл "dl_example_Radio.html" 

<!DOCTYPE html>
<html>
<head>
    <title>Example Radio</title>
    <script src="dl_example_Radio.js"></script>
</head>
<body onload="main_dl_example_Radio();">
    <input type="radio" id="radio_pic_1" name="pic" checked> Рыба <br>
    <input type="radio" id="radio_pic_2" name="pic"> Ярость <br>
    <input type="radio" id="radio_pic_3" name="pic"> Кот <br>
    <input type="button" id="draw_button" value="Нарисовать">
</body>
</html>

Файл "dl_example_Radio.js" 

function main_dl_example_Radio() {

    draw_button.onclick = function() {
        if (radio_pic_1.checked) {
            alert(".·´¯`·.´¯`·.¸¸.·´¯`·.¸><(((º>");
        } else if (radio_pic_2.checked) {
            alert("(╯°□°）╯︵ ┻━┻");
        } else if (radio_pic_3.checked) {
            alert("__,,,^._.^,,,__");
        }
    };

}

</toggledisplay>


Скачать пример №2: Example_Radio_2.zip

ВЫЛОЖИТЬ ПРИМЕР ПРЯМО НА СТРАНИЦУ, ПЕРВЫЙ УБРАТЬ, НАВЕРНОЕ

В данном примере как только вы нажимаете на один из переключателей, мгновенно срабатывает событие и выводится картинка.

<toggledisplay status=hide showtext="Код примера:↓" hidetext="Скрыть↑" linkstyle="font-size:default"> Файл "dl_example_Radio_2.html" 

<!DOCTYPE html>
<html>
<head>
    <title>Example Radio №2</title>
    <script src="dl_example_Radio_2.js"></script>
</head>
<body onload="main_dl_example_Radio_2();">
    <input type="radio" id="radio_pic_1" name="pic" /> Рыба <br>
    <input type="radio" id="radio_pic_2" name="pic" /> Ярость <br>
    <input type="radio" id="radio_pic_3" name="pic" /> Кот <br><br>
    <span id="pic_span">Здесь появится рисунок</span>
</body>
</html>

Файл "dl_example_Radio_2.js" 

function main_dl_example_Radio_2() {
    radio_pic_1.onchange = function() {pic_span.innerHTML = ".·´¯`·.´¯`·.¸¸.·´¯`·.¸><(((º>"};
    radio_pic_2.onchange = function() {pic_span.innerHTML = "(╯°□°）╯︵ ┻━┻"};
    radio_pic_3.onchange = function() {pic_span.innerHTML = "__,,,^._.^,,,__"};
}

</toggledisplay>

Поле для ввода



Чтобы задать подобное поле, нужно добавить следующий тег: 

<input type="number" min=1 max=10 value=5 style="width: 50px">
  • type="number" - тип элемента: поле для ввода числа.
  • min - минимальное число, до которого можно дойти стрелочками
  • max - максимальное число, до которого можно дойти стрелочками
  • value - значение, которое будет высвечиваться, как только появится поле
  • style - атрибут, отвечающий за внешний вид элемента, и записываемый особенным образом. В нашем случае позволяет задать ширину элемента.


Пример с извлечением значения из данного поля:

Скачать пример: Example_Number.zip

<toggledisplay status=hide showtext="Код примера:↓" hidetext="Скрыть↑" linkstyle="font-size:default"> Файл "dl_example_Number.html" 

<!DOCTYPE html>
<html>
<head>
    <title>Example Number</title>
    <script src="dl_example_Number.js"></script>
</head>
<body onload="main_dl_example_Number();">
    <input type="number" id="number_input" min=0 max=100 value=2 style="width: 50px">
    * 2 = <span id="span_result">4</span>
</body>
</html>

Файл "dl_example_Number.js" 

function main_dl_example_Number() {
    number_input.oninput= function() {
        span_result.innerHTML = number_input.value * 2;
    }
}

</toggledisplay>

Ползунок

Ползунок используется для регулирования определенного значения в некотором диапазоне. Обычно мы располагаем его рядом с полем из предыдущего примера, чтобы была возможность задать как примерное значение с помощью ползунка, так и точное с помощью поля ввода:

 

<input type="range" id="some_slider" min="1" max="100" value=50 style="width: 150px;" oninput="some_number.value = some_slider.value;">
<input type="number" id="some_number" min=1 max=100 value=50 style="width: 50px" oninput="some_slider.value = some_number.value;">
  • Атрибут "oninput" у ползунка содержит функцию, которая обновляет число в поле ввода при движении ползунка.
  • Аналогично атрибут "oninput" у поля ввода содержит функцию, обновляющую положение ползунка при изменении числа в данном поле.

ЗДЕСЬ СКАЧИВАЕМЫЙ ПРИМЕР С ПОЛЗУНКОМ И ПОЛЕМ ДЛЯ ВВОДА. МОЖНО, ЧТОБЫ ОНИ ПРОСТО ВЫВОДИЛИ ЧИСЛО. ЖЕЛАТЕЛЬНО С ДРОБНЫМИ ЧИСЛАМИ

Рисование

Статические картинки

ПЕРВЫЙ ПРИМЕР - ПРОСТО ЛИНИЯ

ВТОРОЙ ПРИМЕР - ЛИНИЯ, КРУГ, ПРЯМОУГОЛЬНИК, ЗАКРАШЕННЫЙ КРУГ, ЗАКРАШЕННЫЙ ПРЯМОУГОЛЬНИК, ЗАКРАШЕННЫЙ ТРЕУГОЛЬНИК

Анимация

ПЕРВЫЙ ПРИМЕР - ДВИЖУЩИЕСЯ КРУГИ

ВТОРОЙ ПРИМЕР - ПРОСТЕЙШИЙ ПРИМЕР С ГАРМОНИЧЕСКИМИ КОЛЕБАНИЯМИ И Т.П.

Управление мышью

ПРИМЕР - .... МОЖНО УСЛОЖНЕННЫЙ ВТОРОЙ ПРИМЕР ИЗ РАЗДЕЛА АНИМАЦИИ. ИЛИ ПРУЖИНКУ ПРОСТУЮ.

TODO

НАПИСАТЬ ПРО DOCTYPE И ТЕГ <HTML>


Источник — «http://tm.spbstu.ru/?title=Обучение_JavaScript&oldid=27418»