Внедрение JavaScript


Внедрение JavaScript в HTML-документ

Урок №1
Внедрение JavaScript в HTML
Внедрение JavaScript

Прежде чем начать писать на языке JavaScript, нужно сначала его внедрить в HTML-документ, всего существует 3 способа внедрения языка JavaScript в HTML-документ, рассмотрим 2 из них.

Первый способ внедрения JavaScript сценария

Для того, чтобы внедрить JavaScript в HTML-документ, нужно использовать теги <script> </script>. Между этими тегами, помещают JavaScript-код:

<script> 
 JavaScript-код...
</script>

Теги <script> </script> с расположенным между ними JavaScript-кодом, называют: программой, скриптом или сценарием. Можете называть так, как вам удобно, но обычно используют слово «скрипт».

Теги <script> </script> обычно располагают в голове HTML-документа, между тегами <head> </head>, однако их можно располагать и в теле HTML-документа, между тегами <body> </body>

Разместим сценарий в голове HTML-документа:

<html>
 <head>
  <title>Страница о снежном барсе</title>
  <script> 
   alert("Привет это JavaScript!");
  </script>
 </head>
 <body>
  <h1>Снежный барс</h1>
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p>
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>
 </body>
</html>

Открыв данный HTML-документ в браузере, появится небольшое окошко, с сообщением: Привет это JavaScript!, помимо сообщения, в этом окошке будет кнопка ОК, нажав на которую, окошко закроется.

Второй способ внедрения JavaScript сценария

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

Разместите между тегами <head> следующий код:

<script src="myscript.js"></script>

В той же папке где хранится ваша HTML-страница, создайте файл с именем myscript.js, в данный файл вы можете записывать любой JavaScript-код, но уже без использования тегов <script>

alert("Привет это JavaScript");

Рассмотрим функцию alert()

Давайте обратим внимание на строку alert("Привет это JavaScript");

alert(), это встроенная функция языка JavaScrpt, которая выводит небольшое окошко с текстом, текст нужно записывать внутри скобок и обрамлять двойными " " или одинарными кавычками ' '.

Функция alert() используется для вывода на экран, результатов работы (вычислений) программы (скрипта). Обычно в программировании на JavaScript, пользователь вводит данные в HTML-форму, а результаты обработки этих данных потом появляются на следующей странице или под формой.

Для того, чтобы использовать HTML-формы совместно с JavaScript, нужно знать DOM, поэтому мы пока будем использовать функцию alert(), как более простой и надёжный вариант, а данные для обработки будем вводить в самой программе.

Попробуйте, теперь записать другой текст в функцию alert() например своё имя:

alert("ВашеИмя");

Затем сохраните HTML-документ и обновите HTML-страницу. Должно появится окошко с надписью ВашеИмя. Во время изучения синтаксиса JavaScript, мы часто будем работать с функцией alert().

Помимо обычного текста, функция alert() также может выводить результаты вычислений.

Запишите в функцию alert(), следующие вычисления (вычисления записываются без кавычек):

2 + 2
10 * 7
33 / 5

В первом случае, строка alert(2 + 2); выведет окошко с сообщением 4, во втором случае 70, в третьем 6.6

Читать далее: Переменные JavaScript


Дата публикации поста: 5 февраля 2016
Дата обновления поста: 16 октября 2014
Бесплатный хостинг от компании Бегет, для начинающих: beget.com/ru/hosting/free

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *