Обучение JavaScript
Здесь размещено небольшое пособие, помогающее начать писать программы на языке 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="Example2.js"></script>
</head> <body onload="main_Example2();">
<input type="button" id="press_me_button" value="Нажми меня">
</body>
