JS для начинающих. Урок 1.5: Встраивание js-кода в html-документ. Пишем первый скрипт


Ура, господа! Наконец-то практика. Сегодня мы с вами напишем ваш первый скрипт! Он не будет слишком функциональным, но хотя бы будет говорить миру о своём существовании.

Встраивание js-кода в html-документ

JavaScript-код встраивается в html-страничку при помощи тегов

<script type="text/javascript"></script>


Обычно его, заключённого в эти теги, располагают в содержимом тега head.

Поздороваемся с миром

По древней программистcкой традиции, я предлагаю написать скрипт, который выводит сообщение «Нello World!». Это можно сделать разными способами. Мы рассмотрим некоторые из них.

1. При помощи функции document.write

Создайте файл hello.html где-нибудь у себя на жёстком диске и откройте его с помощь какого-нибудь текстового редактора. Лично я рекомендую использовать для этих целей nodepad++. В файле наберите следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<title>myFirstScript</title>
<script type="text/javascript">
document.write("Hello World!");
</script>
</head>
 
<body>
</body>
 
</html>

откройте этот документ в вашем любимом браузере. Вы уведете строчку “Hello World!”.
Зачем всё это, ведь можно было бы сделать это и без js вот так:

1
2
3
4
5
6
7
8
9
10
<html>
<head>
<title>myFirstScript</title>
</head>
 
<body>
Hello World!
</body>
 
</html>

да, можно было, но в первом случае надпись “Hello World!” появилась благодаря js, во втором – это статический html. При помощи js можно генерировать или изменять содержимое страницы в зависимости от действий пользователя, установленного у него браузера, разрешения монитора и множества других факторов.

2. При помощи метода alert

Если функция document.write выводила принятую ей в качестве параметра строку прямо на страничку, то функция alert выводит окошко со строкой, которую она приняла в качестве параметра.
Код HTML-страницы, которая здоровается с миром при помощи этой функции вот такой:

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<title>myFirstScript</title>
<script type="text/javascript">
alert("Hello World!");
</script>
</head>
 
<body>
</body>
 
</html>

Загрузка js-кода из внешнего файла

В программировании принято отделять логику от визуального представления, поэтому мешать js и html-код не совсем хорошо. Очень часто для хранения js-скриптов используют внешние файлы с расширением js. Подключается такой файл к html-страничке с помощью тега

<script type="text/javascript" src="script.js"></script>

, где script.js – путь к файлу со скриптом. Если это использовать, то код двух предыдущих примеров запишется следующим образом:

1
2
3
4
5
6
7
8
9
10
<html>
<head>
<title>myFirstScript</title>
<script type="text/javascript" src="hello(document.write).js"></script>
</head>
 
<body>
</body>
 
</html>

1
2
3
4
5
6
7
8
9
10
<html>
<head>
<title>myFirstScript</title>
<script type="text/javascript" src="hello(alert).js"></script>
</head>
 
<body>
</body>
 
</html>

а в файлах hello(document.write).js и hello(alert).js, которые необходимо расположить в той же директории, что и html-странички будет записано всего по строчке.

1
document.write("Hello World!");

и

1
alert("Hello World!");

Скачать исходники
Перейти к содержанию курса «Javascript для начинающих»

P.S. Только что знакомый написал в скайп, что купил принтер canon pixma ip1600 и остался очень доволен, так что рекомендую всем.

  • оффтоп: смотри, твой логотип точно такой же, как и надпись «less» — вот

    это просто совпадение?

  • rubas, таких совпадений не бывает — жестоко спиздил)