Нажмите "Enter", чтобы перейти к содержанию

JavaScript. Урок 1

Javascript урок для начинающих. На уроке разберем как внедрить код javacript HTML-код.

Урок 1. Внедрение сценариев
Добавление сценариев Javascript в HTML

Программный код добавляется в html-документ двумя основными способами.

1. Встраивание блоков программного кода в веб-страницы

Встраиваемый код добавляется в html-разметку с помощью вставок, ограниченных тегами <script> и </script>.

  • Устаревший вариант дескриптора с атрибутом language:
<sсript language="javascript">...</sсript>
  • Действующий вариант:
<sсript type="text/javascript">...</sсript>

Задача этих элементов-контейнеров — проинформировать интерпретатор HTML, что следующая часть документа должна быть передана на обработку интерпретатору JS.

Формальных ограничений на количество и расположение блоков встраиваемого кода нет. Они могут быть помещены как в заголовочную (<head>), так и в основную (<body>) часть документа.

Когда в процессе разбора документа встречается блок js-кода, то он подлежит немедленной интерпретации и выполнению.

Если на странице встречается несколько вставок кода (скриптов), то они выполняются по мере того, как их встречает интерпретатор HTML.

Примечание. Ссылка на переменную, которая была определенна в сценарии и размещенная в конце документа, может привести к генерации ошибки интерпретатора при обращении к такой переменной из сценария в начале документа.

Если при выполнении вставки js-кода возникает ошибка, то дальнейшее её выполнение прекращается. Однако это не запрещает выполнять другие скрипты, которые встретятся интерпретатору позже.

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

JS-код может быть полностью или частично загружен из внешнего файла с помощью инструкции:

<sсript src="имя файла.js"></sсript>

В предыдущих версиях HTML и XHTML в теге <script> требовалось указывать атрибут type="text/javascript". В HTML5 это не нужно.

На одну страницу может быть любое количество js-файлов.

3. Код в атрибутах элементов

Это особый способ добавления кода. Для различных html-элементов определены специальные атрибуты, которые используются для описания поведение элементов в ответ на появление некоторых событий. Значением этих атрибутов является js-код. Использование этого кода будет обсуждаться при изучении событийной архитектуры.

Пример: Вывести сообщение «Привет, мир!», используя скрипт на языке JavaScript.

  1. Встраивание JavaScript непосредственно в HTML-страницу:
<body>
 <sсript type="text/javascript">
	document.write("Привет, мир!"); // Вывод сообщения в наш файл
 </sсript>
</body>

2. Размещение сценария во внешнем файле:

<head>
 <sсript src="/js/script.js"></sсript>
</head>

При прикреплении внешнего файла следует размещать тег script  в области head.

В файле с расширением js (в данном конкретном примере — script.js) код выглядит так:

document.write("Привет, мир!"); // Вывод сообщения в наш файл

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

Различия между методом alert() и document.write()

Запомнить:

  • Функция document.write() используется для вывода информации на экран;
  • Тогда как document.writeln() — используется для перевода на новую строку, если используется тег форматирования pre;
  • alert() — это метод для вывода модального (диалогового) окна с сообщением.

Пример: Посмотрите как выполняется код и затем поменяйте местами строчки с alert() и document.write().

<html>
 <head>
  <title>Название</title>
 </head>
 <body>
 <sсript>
   alert("Вывод сообщения в модальном окне");  
   document.write("Вывод текста на странице");
 </sсript>
 </body>
</html>

Отличительной особенностью метода  alert() является появление окна сообщения, которое не скроется, пока пользователь не нажмет на клавишу «Enter» или в появившимся окне на «Закрыть» или «Ок».

Пример: Поместить скрипт в body после тега  H2.

<html>
 <head>
  <title>Название</title>
 </head>
 <body>
  <H2>
  <sсript>
    alert("Вывод сообщения в модальном окне");  
    document.write("Вывод текста на странице");
  </sсript>
  </H2>
 </body>
</html>

Пример: Поместить скрипт в body после тега  div. Задать фон тексту.

<html>
 <head>
  <title>Название</title>
 <style>
  div {
    background: #ffff00; /* Цвет фона желтый */
  }
 </style>
 </head>
 <body>
  <div>
   <sсript>
    alert("Вывод сообщения в модальном окне");  
    document.write("Вывод текста на странице");
   </sсript>
  </div>
 </body>
</html>

Задать фон тексту можно через тег <style>… </style>. Более подробно о теге здесь.

JavaScript. Урок 1

  Обзор языка JavaScript
Яндекс.Метрика
Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить