Введение в JavaScript

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

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

Возможности JavaScript позволяют создавать чрезвычайно интерактивные сайты. Уже вряд ли можно где-либо встретить браузер без поддержки JavaScript.

Способы объявления JavaScript в HTML-странице.

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

У большинства элементов имеются специальные HTML-атрибуты, описывающие события. Например, атрибут onclick описывает событие, наступающее при клике мышью по элементу. Значения таких атрибутов — JavaScript-скрипты. Например:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <title>Страница</title> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
  </head>  
  <body> 
    <div onclick="alert('Сообщение!');">Кликни, чтобы появилось сообщение</div>
  </body>  
</html>

alert — JavaScript-функция, выводящая окно-сообщение. Параметром передается текст сообщения.

Таким образом, первый способ объявления JavaScript — через атрибуты-события.

Второй способ — с помощью тега script, когда JavaScript-код располагается непосредственно на HTML-странице. Сам тег помещают в блок head, либо в body. Пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <title>Страница</title> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
  </head>  
  <body> 
    <script type="text/javascript">
      document.write("Hello, world!");
    </script>
  </body>  
</html>

Скрипт выводит текст "Hello, world" выполняется не по событию, а непосредственно при получении.

Третий способ заключается также в объявлении при помощи тега script, но сам код располагается в отдельном файле. Файлу с JavaScript-кодом обычно присваивают расширение js, подключается к странице следующим образом:

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

Тело тега оставляют пустым.

Методы можно комбинировать, весь код будет иметь общую область видимости, то есть, допустим, код, объявленный непосредственно на странице, будет иметь доступ к функциям, которые расположены в отдельном js-файле, подключенном к этой странице. JavaScript-код отправляется клиенту в виде текста, точно также, как и HTML-код. Выполняется он также на клиентской стороне, то есть используются ресурсы (память, процессорное время) клиента.

Для демонстрации возможностей JavaScript рассмотрим небольшой пример. В качестве базовой HTML-страницы возьмем страницу с тремя цветными блоками из статьи "Абсолютное позиционирование элементов":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  
  <head> 
    <title>Page</title> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
      #layer1 {width: 150px; height: 150px; background: #f00; position: absolute; left: 50px; top: 50px; z-index: 20;}
      #layer2 {width: 150px; height: 150px; background: #0f0; position: absolute; left: 100px; top: 100px; z-index: 40;}
      #layer3 {width: 150px; height: 150px; background: #00f; position: absolute; left: 150px; top: 150px; z-index: 30;}
    </style>
  </head>  
  <body>
    <div id="layer1"></div>
    <div id="layer2"></div>
    <div id="layer3"></div>
  </body>
</html>

Допустим, мы хотим сделать так, чтобы при клике по блоку он помещался на передний план относительно двух других. Как мы помним, перекрытие задается стилем z-index, то есть чтобы блок оказался на переднем плане, у него должен быть z-index больше, чем у двух остальных. Изначально максимальный z-index у второго блока — 40, чтобы всегда знать текущий максимальный z-index, создадим переменную:

var maxZIndex = 40;

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

function moveAbove(block)
{
  block.style.zIndex = ++maxZIndex;
}

block — указатель на кликнутый блок, переданный в функцию. При помощи конструкции style.zIndex осуществляется доступ к CSS-стилю z-index блока, которому присваивается увеличенное на единицу значение maxZIndex.

В самих блоках объявляются атрибуты-события onclick, которые вызывают нашу функцию:

<div id="layer1" onclick="moveAbove(this)"></div>
<div id="layer2" onclick="moveAbove(this)"></div>
<div id="layer3" onclick="moveAbove(this)"></div>

this — это специальная переменная, которая содержит указатель на элемент, которому принадлежит атрибут-событие. Таким образом, при клике по блоку в нашу функцию будет передан указатель этого блока.

Код страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  
  <head> 
    <title>Page</title> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
      #layer1 {width: 150px; height: 150px; background: #f00; position: absolute; left: 50px; top: 50px; z-index: 20;}
      #layer2 {width: 150px; height: 150px; background: #0f0; position: absolute; left: 100px; top: 100px; z-index: 40;}
      #layer3 {width: 150px; height: 150px; background: #00f; position: absolute; left: 150px; top: 150px; z-index: 30;}
    </style>
    <script type="text/javascript">
      var maxZIndex = 40;
 
      function moveAbove(block)
      {
        block.style.zIndex = ++maxZIndex;
      }
    </script>
  </head>  
  <body>
    <div id="layer1" onclick="moveAbove(this)"></div>
    <div id="layer2" onclick="moveAbove(this)"></div>
    <div id="layer3" onclick="moveAbove(this)"></div>
  </body>
</html>
title

Комментарии

Оставить комментарий »

 
Михаил
9 декабря 2010, 13:01
#1
 

Вставил в layer2 рисунок, и он при повторном нажатии на него не перекрывает фоны

Joker-jar
9 декабря 2010, 15:10
#2
 

Вставляли как фон или тэгом img?

vitalik-758153
27 июля 2013, 1:35
#3
 

Спасибо помогли)

Оставить комментарий

Ваше имя
 
Ваш e-mail
 
Комментарий