Вмъкване на код на JavaScript в HTML документ

Има няколко начина за вмъкване на JavaScript код в HTML документ:

1. Директно в HTML кода

<html>
<head>
<title>
Пример за вмъкване на JavaScript директно в HTML кода
</title>
</head>
<body>
<img src=”apple.gif”><br>
<script language=”JavaScript”>
document.write(“Този текст е вмъкнат в HTML - кода на документа”)
</script>
</body>
</html>

Вмъкването става като частта, в която се пише на JavaScript се огради от двата тага: <script language=”JavaScript”> и </script>. Всичко между тях се интерпретира като JavaScript код и браузъра реагира по съответния начин. В случая ще се появи картинка, под която ще се изпише текста “Този текст е вмъкнат в HTML - кода на документа”.

2. Директно в HTML-таг

<html>
<head>
<title>
Пример за вмъкване на JavaScript директно в HTML-таг
</title>
</head>
<body>
<a href="#" onMouseOver="document.images['img1'].src = 'lost.gif'"
onMouseOut="document.images['img1'].src = 'apple.gif'"><IMG SRC=
"apple.gif" name="img1" border='0'></a><br>
Тук е демонстрирано вмъкване на JavaScript директно в HTML-таг.
</body>
</html>

В този пример изображението се заменя с друго при преминаване на мишката върху него, след което се връща първоначалното. Използват се така наречените “вградени манипулатори на събития” (скриптовете, които обработват възникнали събития на страницата се наричат манипулатори). Идеята е, че на всеки html елемент може да се присвои име, с което после да се извика. При възникване на събитието onMouseOver скриптът, предназначен за него сменя картинката с нова, а при възникване на събитието onMouseOut картинката, която в момента е на екрана се сменя с първоначалната.

3. Чрез функция

<html>
<head>
<title>
Пример за функция на JavaScript
</title>
<script language="JavaScript1.1">
<!--
if (navigator.userAgent.indexOf("Mozilla/2.0") == -1) version = 1;
if (version == 1) {
img1 = new Image(57, 57);
img1.src = "apple.gif";

img1_h = new Image(64, 88);
img1_h.src = "lost.gif";
}
// -->
</script>
<script language="JavaScript">
function ChangeImg(x,y)
{
document.images[x].src = eval(y + ".src");
}
//-->
</script>
</head>
<body>
<a href="#" onMouseOver="ChangeImg('img1', 'img1_h')"
onMouseOut="ChangeImg('img1', 'img1')"><IMG SRC=
"apple.gif" name="img1" border='0'></a>
А тук вече използме фукция на JavaScript.
</body>
</html>

Ефектът е като в предишния пример. Разликата е единствено в това, как е използван JavaScript-та. Функцията е написана в head-частта на документа, а после в body се извършва обръщение към нея чрез два параметъра: първият за да укаже коя точно картинка ще бъде променена, а вторият – за да посочи коя картинка да замени първата. Добрият стил на програмиране препоръчва използването на функции.
назаднапред