Как создать свой сайт - Немного о JavaScript

Немного о JavaScript.

JavaScript - язык программирования, который проистекает из языка Java, но существенно проще его. Язык возник в результате объединения усилий компаний Netscape, создавшей первый вариант языка под названием LiveScript и фирмой Sun, создавшей сам язык Java. Результатом их совместной деятельности и стал новый язык JavaScript, название которого и взято из названий языков-родителей. Название было придумано, следуя исключительно коммерческим интересам, и говорить о четком наследовании языком JavaScript свойств Java не следует.

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

Расположение скрипта в HTML-документе.

Код программы JavaScript, как правило, размещается непосредственно в HTML-документах. Его можно записывать в любом месте HTML-страницы. В некоторых случаях целесообразно записать одну часть программы в одном месте (например, в заголовке - элементе <HEAD>), а другую - ниже. Это бывает необходимо, когда сначала описывается функция, а затем в теле HTML-страницы эта функция вызывается. В любом случае текст фрагмента программы заключается в элемент-контейнер <SCRIPT>. Кроме того, для того чтобы скрыть текст программы от старых версий браузера, необходимо заключить этот текст в контейнер - комментарий HTML <!--... ...-->. Но поскольку в языке JavaScript имеется оператор, начинающийся с двойного минуса, необходимо последнюю строку контейнера записать в виде комментария JavaScript: //-->. В итоге все это должно выглядеть следующим образом: 

<SCRIPT LANGUAGE="JavaScript">
<!--
// Здесь пишется текст программы.
//-->
</SCRIPT>

Так же код JavaScript можно хранить в отдельных файлах. Определяется файл как источник операторов с помощью атрибута SRC тэга <SCRIPT> следующим образом: 

<HEAD>
<TITLE></TITLE>
<SCRIPT SRC="MyProg.js">
.....
</SCRIPT>
</HEAD>
<BODY>

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

Понятие функции.

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

function <имя функции>
          (<список аргументов>)
{
 оператор JavaScript;
 оператор JavaScript;
 ......
 оператор JavaScript;
}

Использование функций мы рассмотрим на примере открытия окон.

Создание окон в JavaScript

Для создания новых окон используется метод open() объекта window. Формат вызова данного метода имеет следующий вид: 

window.open(url,<имя>,<параметры>,true|false);

Параметры вызова метода имеет следующие значения:

url - строка, определяющая, адрес страницы, которая будет загружена в новое окно;
<имя> - задает имя новому окну;
<параметры> - является строкой, которая определяет отображаемые элементы в новом окне.
true|false - четвертый параметр определяет, заменит ли URL текущий адрес (значение true) в списке или будет добавлен в конец списка (значение false).

При создании нового окна можно задавать отображение тех или иных элементов окна. Значения <параметра>, с помощью которых это выполняется, представлены в таблице:

Элементы метода open()
Элемент Значение Описание
directories yes|no, 1|0 Позволяет отобразить либо скрыть строку каталогов
height pixels Указывает начальную высоту окна
left pixels Указывает начальное расстояние между окном браузера и левой границей рабочего стола
location yes|no, 1|0 Позволяет отобразить либо скрыть строку адреса
menubar yes|no, 1|0 Позволяет отобразить либо скрыть строку меню умолчанию
resizable yes|no, 1|0 Определяет, можно ли изменить размеры окна
scrollbars yes|no, 1|0 Позволяет отобразить либо скрыть полосы прокрутки для документа
status yes|no, 1|0 Позволяет отобразить либо скрыть строку состояния
toolbar yes|no, 1|0 Позволяет отобразить либо скрыть панель инструментов
top pixels Указывает начальное расстояние между окном браузера и верхней границей рабочего стола
width pixels Указывает начальную ширину окна браузера

Ниже приведен пример кода, который открывает страницу в новом окне размером 400x300 пикселов, которое не имеет ни строки статуса, ни панели инструментов, ни меню: 


<html>
<head>
<script language="JavaScript">
<!--

function OpenWin() 
{
  myWin= open("Counter.html", "displayWindow", 
       "width=400,height=300,status=no,toolbar=no,menubar=no");
}

//-->
</script>
</head>
<body>

<center>
<input type="button" 
       value="Открыть новое окно" 
       onClick="OpenWin()">
</center>

</body>
</html>

Чтобы посмотреть результат действие данного примера нажмите на эту кнопку:

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

 <a href='javascript:OpenWin()'>Открыть новое окно</a>

А вот так работает эта ссылка.

Динамическое создание документов

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

<html>
<head>
<script language="JavaScript">
<!-- 

function NewWin() 
{
  // создать новое окно
  NewDoc=window.open("", "NewWindow", 
    "width=500,height=200,status=yes,toolbar=yes,menubar=yes");

  // открыть объект document для последующей печати 
  NewDoc.document.open();
  
  // генерировать новый документ 
  NewDoc.document.write("<html>");
  NewDoc.document.write("<head>");
  NewDoc.document.write("<title>Пример динамического ");
  NewDoc.document.write("создания документов</title>");
  NewDoc.document.write("</head>");
  NewDoc.document.write("<body>");
  NewDoc.document.write("<center>");
  NewDoc.document.write("<font size=+3>");
  NewDoc.document.write("Этот HTML-документ создан ");
  NewDoc.document.write("с помощью JavaScript!");
  NewDoc.document.write("</font>");
  NewDoc.document.write("</center>");
  NewDoc.document.write("</body>");
  NewDoc.document.write("</html>");

  // закрыть документ - (но не окно!)
  NewDoc.document.close();  
}

// -->
</script>

</head>
<body>

<center>
<input type=button value="Новый документ" onClick="NewWin()">
</center>

</body>
</html>
результат работы данного примера -

В данном примере формирование нового документа выполняется функцией NewWin(). Рассмотрим ее действие. Сначала с помощью метода open() открывается новое окно браузера. Первый параметр метода является пустой строкой (""), так как мы не желаем в данном случае указывать конкретный адрес URL. После того, как мы открыли окно, наступает очередь открыть для записи объекта document. Делается это с помощью команды: 

  // открыть объект document для последующей печати 
  NewDoc.document.open();

Здесь мы обращаемся к open() - методу объекта document. Однако это совсем не то же самое, что метод open() объекта window. Эта команда не открывает нового окна - она лишь готовит document к предстоящей печати. Кроме того, мы должны поставить перед document.open() приставку NewDoc, чтобы получить возможность писать в новом окне. В последующих строках скрипта с помощью вызова document.write() формируется текст нового документа: 

  // генерировать новый документ 
  NewDoc.document.write("<html>");
  NewDoc.document.write("<head>");
  NewDoc.document.write("<title>Пример динамического ");
  NewDoc.document.write("создания документов</title>");
  NewDoc.document.write("</head>");
  NewDoc.document.write("<body>");
  NewDoc.document.write("<center>");
  NewDoc.document.write("<font size=+3>");
  NewDoc.document.write("Этот HTML-документ создан ");
  NewDoc.document.write("с помощью JavaScript!");
  NewDoc.document.write("</font>");
  NewDoc.document.write("</center>");
  NewDoc.document.write("</body>");
  NewDoc.document.write("</html>");

Как видно, здесь мы записываем в документ обычные тэги языка HTML. То есть мы фактически генерируем разметку HTML. При этом Вы можете использовать абсолютно любые тэги HTML. По завершении этого мы обязаны вновь закрыть документ. Это делается следующей командой: 

  // закрыть документ - (но не окно!)
  NewDoc.document.close();

Теперь нам только остается в нужном месте вызвать функцию командой 

<input type=button value="Новый документ" onClick="NewDoc()">
или, например, указав ссылку: 
 <a href='javascript:NewDoc()'>Новый документ</a>

Теперь, научившись открывать окна без лишних элементов, давайте переделаем фотоальбом, используя возможности JavaScript.



Хостинг от uCoz