Код скрипта JavaScript размещется непосредственно на HTML-странице.
Пример:
<html>
<body>
<br>
Это обычный HTML документ.
<br>
<script language="JavaScript">
document.write("А это JavaScript!")
</script>
<br>
Вновь документ HTML.
</body>
</html>
С первого взгляда пример напоминает обычный файл HTML. Единственное новшество здесь - конструкция:
<script language="JavaScript">
document.write("А это JavaScript!")
</script>
Это код JavaScript. В результате выполнения данного кода в окне броузера будет выведен следующий текст:
Это обычный HTML документ.
А это JavaScript!
Вновь документ HTML.
Все, что сто Все, что стоит между тэгами <script> и </script>, интерпретируется как код на языке JavaScript. ит между тэгами <script> и </script>, интерпретируется как код на языке JavaScript.
События и обработчики событий являются очень важной частью для программирования на языке JavaScript. События, главным образом, инициируются теми или иными действиями пользователя. Если он щелкает по некоторой кнопке, происходит событие "Click". Если указатель мыши пересекает какую-либо ссылку гипертекста - происходит событие MouseOver. Существует несколько различных типов событий. Мы можем заставить нашу JavaScript-программу реагировать на некоторые из них. И это может быть выполнено с помощью специальных программ обработки событий. Так, в результате щелчка по кнопке может создаваться выпадающее окно. Это означает, что создание окна должно быть реакцией на событие щелка - Click. Программа - обработчик событий, которую мы должны использовать в данном случае, называется onClick. И она сообщает компьютеру, что нужно делать, если произойдет данное событие. Приведенный ниже код представляет простой пример программы обработки события onClick:
<form>
<input type="button" value="Click me" onClick="alert('Yo')">
</form>
В большинстве на языке JavaScript используются функции. В большинстве случаев функции представляют собой лишь способ связать вместе нескольких команд. Пример: скрипт, печатающий некий текст три раза подряд.
Простой подход:
<html>
<script language="JavaScript">
<!-- hide
document.write("Добро пожаловать на мою страницу!<br>");
document.write("Это JavaScript!<br>");
document.write("Добро пожаловать на мою страницу!<br>");
document.write(Это JavaScript!<br>");
document.write("Добро пожаловать на мою страницу!<br>");
document.write("Это JavaScript!<br>");
// -->
</script>
</html>
И такой скрипт напишет следующий текст
Добро пожаловать на мою страницу!
Это JavaScript!
три раза. Если посмотреть на исходный код скрипта, то видно, что для получения необходимого результата определенная часть его кода была повторена три раза. Более эффективный скрипт для решения той же самой задачи:
<html>
<script language="JavaScript">
<!-- hide
function myFunction() {
document.write("Добро пожаловать на мою страницу!<br>");
document.write("Это JavaScript!<br>");
}
myFunction();
myFunction();
myFunction();
// -->
</script>
</html>
В этом скрипте определяется некая функция, состоящая из следующих строк:
function myFunction() {
document.write("Добро пожаловать на мою страницу!<br>");
document.write("Это JavaScript!<br>");
}
Все команды скрипта, что находятся внутри фигурных скобок - {} - принадлежат функции myFunction (). Это означает, что обе команды document.write() теперь связаны воедино и могут быть выполнены при вызове указанной функции. В примере есть три вызова этой функции - Можно увидеть, строку myFunction() три раза сразу после того, как дали определение самой функции. То естькак раз и сделали три вызова. В свою очередь, это означает, что содержимое этой функции (команды, указанные в фигурных скобках) было выполнено трижды.
Функции могут также использоваться в совместно с процедурами обработки событий. Пример:
<html>
<head>
<script language="JavaScript">
<!-- hide
function calculation() {
var x= 12;
var y= 5;
var result= x + y;
alert(result);
}
// -->
</script>
</head>
<body>
<form>
<input type="button" value="Calculate" onClick="calculation()">
</form>
</body>
</html>
При нажатии на кнопку осуществляется вызов функции calculation(). Эта функция выполняет некие вычисления, пользуясь переменными x, y и result. Переменная определяется с помощью ключевого слова var. Переменные могут использоваться для хранения различных величин - чисел, строк текста и т.д. Так строка скрипта var result= x + y; сообщает браузеру о том, что необходимо создать переменную result и поместить туда результат выполнения арифметической операции x + y (т.е. 5 + 12). После этого в переменный result будет размещено число 17. В данном случае команда alert(result) выполняет то же самое, что и alert(17). Тоесть открывается выпадающее окно, в котором написано число 17.