JavaScript - Введение

Информация во всемирной паутине располагается на веб-серверах в виде сайтов. Получение этой информации на стороне пользователя осуществляется с помощью браузера, который отправляет запрос веб-серверу и получает от него ответ в виде HTML кода. Технология такого взаимодействия между браузером и сервером называется клиент-серверной.

Технология клиент-сервер

Потребность в создание для веб-страниц языка программирования, исполняющего в браузере и располагающегося внутри кода HTML появилась в 90-х годах XX века и предназначалась для выполнения несложных задач. Например: для проверки правильности заполнения формы, перед её отправкой на сервер или для написания интерактивной составляющей сайта.

Эта потребность продиктована тем, что язык HTML не является языком программирования. Он предназначен для описания гипертекстовых документов. Использование языка программирования внутри кода HTML позволило бы выполнять часть операций сервера на стороне клиента, что способствовало бы снижению нагрузки на сервер, повышению производительности сайта и выполнению некоторых действий на странице без перезагрузки.

Первый браузер, в котором появилась возможность выполнять сценарии (скрипты) внутри кода HTML назывался Netscape Navigator. Язык, на котором писался код, назывался LiveScript, который впоследствии был переименован в JavaScript. Немного позже в 1998 г. язык JavaScript был стандартизован и переименован в ECMAScript.

JavaScript – это язык программирования, сценарии (скрипты) которого можно встроить в HTML страницу и выполнять на стороне браузера (клиента).

В настоящее время язык JavaScript поддерживается всеми браузерами и используется для создания основной функциональности сайта.

Сценарии (скрипты) на языке JavaScript можно размещать в HTML документе в разделах <head>...</head> и <body>...</body>. Оформления сценариев внутри страницы осуществляется с помощью тега <script>, который имеет следующий синтаксис:

<html>
<head>
  <title>JavaScript</title>

  <!-- Сценарий на языке JavaScript для HTML 4.01 -->
  <script type="text/javascript">
    alert("Привет мир!");
    document.write("Привет мир!");
  </script>

  <!-- На HTML 5, атрибут type указывать не обязательно -->  
  <script>
    alert("Привет мир!");
    document.write("Привет мир!");
  </script>
</head>
<body>
  <h1>Привет JavaScript!</h1>

  <!-- Сценарий на языке JavaScript для HTML 4.01 -->
  <script type="text/javascript">
    alert("Привет мир!");
    document.write("Привет мир!");
  </script>

  <!-- На HTML 5, атрибут type указывать не обязательно -->  
  <script>
    alert("Привет мир!");
    document.write("Привет мир!");
  </script>

</body>
</html>

При открытии документа сначала выполняются скрипты, указанные в разделе head. Они выводят диалоговые окна с помощью метода alert и текст с помощью метода document.write (т.к. скрипты размещены в разделе head, то текст выводится сразу после тега <body>). Потом выводится заголовок h1 и выполняются скрипты в разделе body. В этом случае результат работы скрипта, а именно вывод текста в HTML документ осуществляется сразу после закрывающегося тега </script>.

Выполнение сценариев JavaScript в HTML документе

Кроме рассмотренного выше способа, скрипты на языке JavaScript очень часто пишут в отдельных файлах с расширением js (*.js), а потом подключают к HTML странице с помощью тега script.

С помощью этого способа вы можете подключить один файл со скриптом к большому количеству HTML страниц. В этом случает доработка или обновления скрипта на более новую версию не потребует больших усилий, т.к. Вам не потребуется изменять сценарий на языке JavaScript для каждой страницы.

<!--Файл со скриптом на языке JavaScript подключается с помощью атрибута src тега script.
При этом в качестве значения для атрибута src указывается полный или относительный путь к этому файлу.-->  
<script src="*.js"></script>


   JavaScript и jQuery 1    3965 +1

Комментарии (6)

  1. Виктор # 0
    у вас не хвотает буквы «р» в «краткая история» на 3й строчке «для поверки»
    1. Александр Мальцев # 0
      Спасибо, Виктор.
    2. Андрей # 0
      Александр, какой путь для MODX нужно прописать в самом файле js, который находится в папке assets/templates/.../js/, если в нем прописана картинка?
      1. Александр Мальцев # 0
        Проверьте, если ли у Вас в разделе head элемент base:
        <base href="[[++site_url]]">
        
        Если есть, то все пути в файлах должны задаваться относительно корня сайта. Например, если в script Вам необходимо указать src картинке, то пишем относительный адрес от корня сайта к картинке:
          var srcImg = "assets/images/image-10.png";
        
      2. amadeu5 # 0
        Внедрение сценариев JavaScript в HTML документ..
        Мне кажется или в этом абзаце два раза пример вставки кода повторяется?
        1. Александр Мальцев # 0
          Да два раза. Один в раздел head, другой в body. Этот пример показывает, что сценарии можно помещать не только в body, но и в секцию head.

        Вы должны авторизоваться, чтобы оставлять комментарии.