Лекция

Тема: «Знакомство с JavaScript. Основные элементы языка. Диалоги и окна»

 

План

1. Что такое JavaScript?

2. Способы вставки JavaScript в текст страницы

3. Основы JavaScript

4. Работа с диалогами

5. Работа с BOM объектами

6. Работа с окнами

7. Вывод данных на страницу

 

1. Что такое JavaScript?

JavaScript изначально создавался для того, чтобы сделать web-страницы "живыми". Программы на этом языке называются скриптами. Они подключаются напрямую к HTML и, как только загружается страничка – тут же выполняются.

Программы на JavaScript – обычный текст. Они не требуют какой-то специальной подготовки.

В этом плане JavaScript сильно отличается от другого языка, который называется Java.

 

Когда создавался язык JavaScript, у него изначально было другое название: "LiveScript". Но тогда был очень популярен язык Java, и маркетологи решили, что схожее название сделает новый язык более популярным.

Планировалось, что JavaScript будет эдаким "младшим братом" Java. Однако, история распорядилась по-своему, JavaScript сильно вырос, и сейчас это совершенно независимый язык, со своей спецификацией, и к Java не имеет никакого отношения.

 

Чтобы читать и выполнять текст на JavaScript, нужна специальная программа – интепретатор. Процесс выполнения скрипта называют "интерпретацией".

В программировании для выполнения программ существуют "компиляторы" и "интерпретаторы".

Компиляторы преобразуют программу в машинный код. Этот машинный код затем распространяется и запускается.

А интерпретаторы, в частности, встроенный JS-интерпретатор браузера – получают программу в виде исходного кода. При этом распространяется именно сам исходный код (скрипт).

Современные интерпретаторы перед выполнением преобразуют JavaScript в машинный код или близко к нему, а уже затем выполняют.

 

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

В браузере JavaScript умеет делать все, что относится к манипуляции со страницей, взаимодействию с посетителем и, в какой-то мере, с сервером:

·создавать новые HTML-теги, удалять существующие, менять стили элементов, прятать, показывать элементы и т.п.

·реагировать на действия посетителя, обрабатывать клики мыши, перемещение курсора, нажатие на клавиатуру и т.п.

·посылать запросы на сервер и загружать данные без перезагрузки страницы (эта технология называется "AJAX").

·получать и устанавливать cookie, запрашивать данные, выводить сообщения…

JavaScript – быстрый и мощный язык, но браузер накладывает на его исполнение некоторые ограничения.

Это сделано для безопасности пользователей, чтобы злоумышленник не мог с помощью JavaScript получить личные данные или как-то навредить компьютеру пользователя

Большинство возможностей JavaScript в браузере ограничено текущим окном и страницей.

·JavaScript не может читать/записывать произвольные файлы на жесткий диск, копировать их или вызывать программы. Он не имеет прямого доступа к операционной системе.

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

·JavaScript, работающий в одной вкладке, не может общаться с другими вкладками и окнами, за исключением случая, когда он сам открыл это окно или несколько вкладок из одного источника (одинаковый домен, порт, протокол).

·есть способы это обойти, но они требуют внедрения специального кода на оба документа, которые находятся в разных вкладках или окнах. Без него, из соображений безопасности, «залезть» из одной вкладки в другую при помощи JavaScript нельзя.

·из JavaScript можно легко посылать запросы на сервер, с которого пришла страница. Запрос на другой домен тоже возможен, но менее удобен, т.к. и здесь есть ограничения безопасности.

 

JavaScript поддерживается всеми распространенными браузерами и включен по умолчанию, и полностью интегрирован с HTML/CSS.

 

2. Способы вставки JavaScript в текст страницы

Существует несколько способов вставки JavaScript кода в HTML документ.

 

Программы на языке JavaScript можно вставить в любое место HTML при помощи тега script.

 

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

 

Браузер, когда видит <script>:

·начинает отображать страницу, показывает часть документа до script;

·встретив тег script, переключается в JavaScript-режим и не показывает, а исполняет его содержимое;

·закончив выполнение, возвращается обратно в HTML-режим и отображает оставшуюся часть документа.

 

Если JavaScript-кода много – его выносят в отдельный файл, который подключается в HTML:

 

<script src="имя файла *.js"> ... </script>

 

Браузер сам скачает файл скрипта и выполнит.

Например:

 

<script src="script.js"> ... </script> - файл скрипта находится в одной папке со страницей

<script src="js/script.js"> ... </script> - файл скрипта находится во вложенной папке js

 

Можно указать и полный URL, например:

 

<script src="http://code.jquery.com/jquery.js"></script>

 

Чтобы подключить несколько скриптов, используйте несколько тегов:

 

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

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

 

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

Браузер скачает его только первый раз и в дальнейшем, при правильной настройке сервера, будет брать из своего кэша.

 

Если указан атрибут src, то содержимое тега игнорируется.

В одном теге script нельзя одновременно подключить внешний скрипт и указать код.

Вот так не cработает:

 

<script src="script.js">

    код;

</script>

 

Нужно выбрать: либо script  идёт с src, либо содержит код. Тег выше следует разбить на два: один – с src, другой с кодом:

 

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

<script type="text/javascript">

    код;

</script>

 

Еще один способ вставки javascript кода – это использование конструкции:

 

"javascript: код;"

 

Порядок выполнения JavaScript

 

Выполнение кода скрипта зависит от места его расположения.

Если код оформить в разделе HEAD, то код выполнится до начала загрузки страницы.

 

<head>

. . .

<script type="text/javascript">

    код;

</script>

</head>

 

<body>

</body>

 

Код скрипта выполнится до появления основной страницы.

 

Если код оформить в разделе BODY, то код выполнится сразу после загрузки предыдущего тега, а после выполнения кода продолжится загрузка следующих тегов.

 

В первом примере код скрипта также выполнится до начала загрузки страницы:

 

<body>

<script type="text/javascript">

    код;

</script>

. . .

</body>

 

Несмотря на то, что данный пример аналогичен предыдущему, тем не менее принято код, выполняемый до загрузки скрипта, помещать в раздел HEAD.

 

 

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

<body>

. . .

<p> . . . </p>

<script type="text/javascript">

    код;

</script>

. . .

</body>

 

В этом примере код скрипта выполнится после загрузки всей страницы.

 

<body>

. . .

<script type="text/javascript">

    код;

</script>

</body>

 

Во всех рассмотренных примерах код скрипта выполняется автоматически при загрузке страницы. Такой подход используется не всегда. Чаще всего код должен выполняться в ответ на наступление определенных событий.

В этом случае код скрипта оформляется в виде функций в разделе HEAD. Затем нужным элементам страницы для определенных событий назначается вызов таких функций.

 

Например, пусть описана функция с именем f1().

 

<head>

. . .

<script type="text/javascript">

    function f1()

    {

        код;

    }

</script>

 

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

 

<input type="button" value="Расчет" onclick="f1();">

 

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

 

<input type="button" value="Расчет" onclick="javascript: код;">

 

Ключевое слово "javascript" можно не указывать:

 

<input type="button" value="Расчет" onclick="код;">

 

Однако такой подход считается плохим стилем и не рекомендуется к использованию, так как приводит к смешиванию тегов HTML и JavaScript кода. В некоторых случаях он имеет смысл, если код состоит из 1-2 операторов.

 

Особенности выполнения кода JavaScript

 

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

При этом никаких ошибок в окне браузера не появляется.

 

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

Для этого в самом начале раздела body введите специальный тег:

 

<noscript>

    сообщение

</noscript>
 

В сообщении можно вывести любой HTML текст со всеми допустимыми элементами, изображениями и т.п.

 

Пример.

 

<noscript>

    <h2 align="center">В Вашем браузере отключен JavaScript. Нормальная работа не возможна</h2>

</noscript>

 

3. Основы JavaScript

Язык JavaScript по своему синтаксису похож на синтаксис языка C:

·каждый оператор заканчивается точкой с запятой;

·комментарии могут быть однострочными // или многострочными /* */;

·имена переменных чувствительны к регистру символов.

 

Так как JavaScript – это интерпретатор, то в языке нет типов переменных. Для описания переменной используется команда:

 

var переменная1, переменная2, …;

 

Так как переменная не имеет типа, то ей можно по ходу программы присваивать разные значения:

 

var a;

a=5;

. . .

a="текст";

 

Однако такой подход не считается правильным с точки зрения прочтения кода программы, поэтому рекомендуется для данных разных типов описывать отдельные переменные:

 

var a, s;

a=5;

. . .

s="текст";

 

В JavaScript преобразование типов выполняется "на лету". Если суммируются данные и одно из слагаемых - это текст, то весь результат преобразуется в текст.

 

Пример.

 

var a,b,c;

a=2;

b=5;

c='сумма=';

c=c+a+b; //сумма=25

c=c+(a+b); //сумма=7

 

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

 

Все следующие команды являются верными:

 

alert ("Добро пожаловать на сайт");

alert('Добро пожаловать на сайт');

alert ("Добро пожаловать на сайт 'rpo.16mb.com' ");

alert('Добро пожаловать на сайт "rpo.16mb.com" ');

 

Если все пары кавычек уже использованы, то для создания новой пары допускается экранирование кавычки с помощью символов \' или \". При этом есть правило: если текст заключен в одинарные кавычки, то внутри такого текста может экранироваться только одинарная кавычка. Если текст заключен в двойные кавычки, то внутри такого текста может экранироваться только двойная кавычка.

 

Пример. Пусть имеется кнопка, для которой в событии onclick (щелчок по кнопке) вызывается одна из двух последних предыдущих команд:

 

<input type="button" value="Расчет" onclick=" alert ("Добро пожаловать на сайт 'rpo.16mb.com' ");">

 

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

 

<input type="button" value="Расчет" onclick="alert ('Добро пожаловать на сайт \'rpo.16mb.com\' ');">

 

Если параметры тега заданы в одинарных кавычках, то запись может быть такая:

 

<input type='button' value='Расчет' onclick='alert ("Добро пожаловать на сайт \"rpo.16mb.com\" ");'>

 

Кроме обычных текстовых и числовых значений в JavaScript есть еще ряд значений, который могут принимать переменные, или с которыми можно сравнивать значения переменных:

 

- true/false – логические значения;

- null – значение переменной неизвестно, не существует, пустое;

- undefined – значение переменной не определено (после описания еще не присваивалось);

- значение NaN (Not-A-Number) обозначает не число. Такое значение получается тогда, когда вы пытаетесь делать математические операции не с числами, а с чем-то другим;

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

 

Примеры.

var a;

alert(a); //выведет undefined

 

Попытка умножить строку на число даст своим результатом NaN:

alert('abc' * 3); // выведет NaN

 

Любые операции с NaN приводят к тому, что результатом все равно остается NaN:

alert(NaN + 1); // выведет NaN

 

Переменные могут быть локальными и глобальными.

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

Глобальная переменная описывается внутри самого скрипта и доступна в любом месте текущего скрипта, в любом скрипте текущей страницы, в любом скрипте любого окна, которое было открыто из текущей страницы.

 

В JavaScript все операторы аналогичны языку C. Исключением является описание функций, которые важны и очень часто используются.

Синтаксис описания функции такой:

 

function имя ([параметры])

{

    код;

}

 

Список параметров не обязателен. Если функция возвращает результат, то в ее коде (обычно в конце) должен присутствовать оператор

 

return ответ;

 

Если выполнение кода функции нужно прервать досрочно, используют команду

 

return;

 

Пример. Напишем функция, которая выводи окно с сообщением. Функция не возвращает результат.

 

function msg()

{

    alert("сообщение");

}

 

Пример. Напишем функцию нахождения максимального из двух чисел. Функция возвращает результат и имеет два входных параметра.

 

function max(a,b)

{

    if (a>=b)

        return a

    else

        return b;

}

 4. Работа с диалогами

Для взаимодействия с пользователем в JavaScript существует несколько методов.

 

window.alert("сообщение"); //выдает модальное окно с сообщением и кнопкой ОК

 

window.prompt("текст-подсказка ","значение по умолчанию") //выдает модальное окно для ввода текста с клавиатуры и кнопками ОК и Отмена. Данный метод возвращает или введенный текст или значение null, если была нажата кнопка Отмена.

 

window.confirm("текст-вопрос") //выдает модальное окно с запросом и кнопки ОК и Отмена. Возвращает true (если ответ положительный) или false (если ответ отрицательный).

 

Если диалоги вызываются в текущем окне, то ключевое слово window можно не указывать.

 

Пример. Напишем скрипт, который выводит окно с приветственным текстом.

 

<script type="text/javascript">

    window.alert("Приветствуем Вас на нашем сайте");

</script>

 

или

 

<script type="text/javascript">

    alert("Приветствуем Вас на нашем сайте");

</script>

 

Пример. Написать скрипт, который запрашивает у пользователя его имя и приветствует на сайте.

 

<script type="text/javascript">

    var s= window.prompt("Введите Ваше имя: ");    

    window.alert("Здравствуйте, "+s+". Приветствуем Вас на нашем сайте");

</script>

 

или

 

<script type="text/javascript">

    var s= prompt("Введите Ваше имя: ");       

    alert("Здравствуйте, "+s+". Приветствуем Вас на нашем сайте");

</script>

 

Пример. Изменим скрипт так, чтобы пользователь ОБЯЗАТЕЛЬНО ввел свое имя. В предыдущем скрипте пользователь мог нажать на кнопку Отмена и скрипт продолжил бы свою работу.

 

<script type="text/javascript">

    var s;

    do

    s=window.prompt("Введите Ваше имя: ");

    while (s==null);         

        window.alert("Здравствуйте, "+s+". Приветствуем Вас на нашем сайте");

</script>

 

или

 

<script type="text/javascript">

    var s;

    do

    s= prompt("Введите Ваше имя: ");

    while (s==null);         

        alert("Здравствуйте, "+s+". Приветствуем Вас на нашем сайте");

</script>

 

Пример. Написать скрипт, который запрашивает разрешение на загрузку страницы. Если ответ отрицательный, то страница закрывается.

 

<script type="text/javascript">

    if (!window.confirm("Вы подтверждаете загрузку страницы?"))

        //метод close() будет рассмотрен в следующем разделе 

        window.close();

</script>

 

или

 

<script type="text/javascript">

    if (!confirm("Вы подтверждаете загрузку страницы?"))

        close();

</script>

 

5. Работа с BOM объектами

Браузер дает доступ к иерархии объектов, которые мы можем использовать для разработки. Основная группа таких объектов – это документ и его структура (DOM элементы).

Но существует еще один набор, которые не относится к содержимому страницы (BOM элементы).

BOM (Browser Object Model - Объектная Модель Браузера) – это специальная древовидная структура, обеспечивает доступ к окну браузера и позволяет манипулировать им и его элементами.

BOM представляет объекты, через свойства и методы которых можно управлять внешним видом и поведением браузера. Обеспечивает доступ к фреймам, запросы к серверу, функции alert/confirm/prompt.

 

http://xn--80aaghdqfmgbznzk1h1c8b.xn--p1ai/lec/web/5/1/img/bom-structure.png

 

 

Объект window – самый главный объект в браузере, который отвечает за одно из окон (вкладок) браузера. Он является корнем иерархии всех объектов доступных веб-разработчику в сценариях JavaScript. Объект window кроме глобальных объектов (navigator, history, location, screen, document и др.) имеет собственные свойства и методы, которые предназначены для:

Если в браузере открыть несколько вкладок (окон), то браузером будет создано столько объектов window, сколько открыто этих вкладок (окон). Т.е. каждый раз открывая вкладку (окно), браузер создаёт новый объект window связанный с этой вкладкой (окном).

Методы глобального объекта window предназначены для открытия, закрытия, печати окна, передачи и удаления фокуса на окно:

window.open() – создает и открывает новое окно (подробно метод будет рассмотрен ниже)

window.close() –предназначен для закрытия окна. Данный метод не имеет параметров. Он обычно используется для закрытия окон созданных методом open()

window.print() – печатает содержимое текущего окна. Не имеет параметров

window.focus() – предназначен для установки фокуса указанному окну. Данный метод не имеет параметров.

window.blur() – предназначен, чтобы убрать фокус с указанного окна, т.е. перемещает его на задний план. Данный метод не имеет параметров.

 

Объект history позволяет получить историю переходов пользователя по ссылкам в пределах одного окна (вкладки) браузера. Так как он является свойством объекта window, то у каждой вкладки в браузере будет свой объект window и свой объект history.

Данный объект отвечает за браузерные кнопки Вперёд и Назад. Объект history не предоставляет возможности читать историю посещений. Можно отправить посетителя назад или вперед, но сами адреса браузер не даёт из соображений безопасности.

Методы объекта history:

history.back() – вернуться на страницу назад, т.е. он программно имитирует нажатие кнопки Назад в браузере. Также метод history.back() можно выполнить с помощью метода history.go(-1).

history.forward() – осуществляет перемещение пользователя на одну страницу вперёд по истории, т.е. он программно "имитирует" нажатие кнопки Вперёд в браузере. Также метод history.forward() можно выполнить с помощью метода history.go(1).

history.go(n) – позволяет переместить пользователя на некоторое количество страниц вперёд или назад по истории. Имеет один обязательный параметр n – это число, на которое надо переместить пользователя вверх или вниз по истории.

Например, history.go(2) - осуществляет перемещения пользователя на 2 шаг назад, a history.go(-2) на 2 шага вперёд. Если в качестве параметра указать значение 0, то данный метод вызовет перезагрузку страницы. Если указать в качестве значение число, которое превышает количество шагов, которые может совершить пользователь в текущем окне, то ничего не произойдёт.

 

Объект location – объект, который отвечает за адресную строку текущего документа, с которым он связан. Данный объект содержит свойства и методы, которые позволяют: получить текущий адрес страницы браузера, перейти по указанному URL, перезагрузить страницу и т.п.

Свойства объекта location:

hash - устанавливает или возвращает якорную часть (#) URL

host - устанавливает или возвращает имя хоста и номер порта URL

hostname - устанавливает или возвращает имя хоста URL

href - устанавливает или возвращает содержимое URL

origin - возвращает протокол, имя хоста и номер порта URL

pathname - устанавливает или возвращает часть URL, содержащей путь

port - устанавливает или возвращает номер порта URL

protocol - устанавливает или возвращает протокол URL

search - устанавливает или возвращает часть URL, содержащей строку с параметрами (?параметр1=значение1&параметр2=значение2&...)

 

http://xn--80aaghdqfmgbznzk1h1c8b.xn--p1ai/lec/web/5/1/img/bom-javascript-location-sample.png

 

На рисунке:

  1. location.protocol - http:
  2. location.hostname - itchief.ru
  3. location.pathname - /search
  4. location.search - ?q=bootstrap
  5. location.hash - #part2

 

Объект location имеет такие методы:

location.assign("адрес")  - загружает страницу с указанным адресом. Аналогичное действие выполняет команда location.href="адрес"

location.reload() - перезагружает текущий документ. Метод reload() имеет один необязательный параметр булевского типа. Если в качестве параметра указать значение true, то страница будет принудительно обновлена с сервера. А если параметр не указывать или использовать в качестве параметра значение false, то браузер может обновить страницу, используя данные своего кэша. Метод reload() "имитирует" нажатие кнопки обновить в браузере.

location.replace("адрес") - заменяет текущий документ на документ, расположенный по адресу, переданному методу в качестве аргумента. Отличие от метода assign() заключается в том, что после использования replace() текущая страница удаляется из истории посещения текущего окна, это значит что пользователь не сможет вернуться на нее нажав кнопку назад в браузере.

toString() - возвращает строковое представление URL.

 

Примеры:

 

Например, изменить href на http://alit.dstu.education/ для текущего окна:

window.location.href = "http://alit.dstu.education/ ";

//для текущего окна "window." можно опустить

location.href = "http://alit.dstu.education/ ";

//кроме этого свойство href тоже можно опустить, т.к. location == location.href

location = "http://alit.dstu.education/ ";

 

Например, изменить href для окна с именем myWindow:

//откроем новое окно с помощью метода open()

var myWindow = window.open("","","height=300,width=400");

//изменим location окна, идентификатор которого хранится в myWindow

myWindow.location.href = "http://alit.dstu.education/ ";

 

 

Объект screen – объект, который предоставляет информацию об экране пользователя: разрешение экрана, максимальную ширину и высоту, которую может иметь окно браузера, глубина цвета и т.д.

Объект screen (который также является свойством объекта window) один из немногих JavaScript объектов, которые практически не используются в коде. Он просто предоставляет сведения о графических параметрах клиентской системы вне окна браузера. Доступность тех или иных свойств объекта screen зависит от браузера.

Объект screen по большей части используется для сбора статистической информации о посетителях. Именно с помощью него можно просматривать в статистике, сколько посетителей приходило с каким экраном.

Свойства объекта screen:

screen.width и screen.height возвращают соответственно ширину и высоту экрана пользователя в пикселях

screen.availWidth и screen.availHeight возвращают ширину и высоту, которое может занять окно браузера. Например, в операционной системе Windows свойство screen.availHeight равно разнице между высотой экрана и высотой "Панели задач".

Удобным и полезным свойством является screen.orientation.

screen.orientation.type указывает ориентацию экрана (альбомная, портретная). Используется как правило для мобильных устройств.

 

6. Работа с окнами

 Каждая страница отображается в своем окне (вкладке браузера). Язык JavaScript позволяет открывать новые окна в случае необходимости. При этом есть особенности:

- окна, которые открываются автоматически при загрузке страницы, блокируются браузерами в целях безопасности;

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

 

Для открытия окна используется команда вида:

 

window.open("имя ресурса", "имя окна", "параметры");

 

Имя ресурса – задает имя страницы, которая откроется в новом окне. Если имя ресурса не задано, то окно открывается пустым.

Имя окна – указывается значение атрибута target или произвольное имя окна.

Данное имя в основном используется в гиперссылках и формах для указания окна, в котором необходимо открыть страницу. Например, для указания внутреннего имя окна в гиперссылке используется атрибут target. Если элемент <а> имеет атрибут target="searchWindow", то при нажатии на данную ссылку браузер сначала пытается найти окно с таким внутренним именем (searchWindow), если окна с таким внутренним именем не существует, то он открывает новое окно и присваивает ему имя searchWindow. А если окно с таким именем существует, то новое окно не открывается, а перезагружается страница по указанной ссылке <а> этом окне. По умолчанию окна <а> браузере не имеют внутреннего имени.

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

    _blank - URL загружается в новое окно (вкладку). Это значение используется по умолчанию;

    _parent - URL загружается в родительский фрейм. Если его нет, то URL загружается в текущее окно (вкладку);

    _self - URL загружается в текущее окно;

    _top - отменяет все фреймы и загружает URL в текущее окно (вкладку) браузера. Если его нет, то URL загружается в текущее окно (вкладку);

В качестве параметра можно указать имя открываемого окна. Данное имя является внутренним и может использоваться веб-разработчиками для вызова функций и методов этого окна.

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

    left, top - координаты (в пикселях) левого верхнего угла окна браузера относительно левого верхнего угла экрана. Значения этих свойств должны быть положительными или равными 0;

    height, width - высота и ширина рабочей области окна браузера. При указании значений необходимо учитывать, что ширина и высота окна браузера не может быть меньше 100 пикселей;

    resizable - логическое свойство окна, которое предназначено для включения или выключения возможности изменения размеров окна браузера. Данное свойство принимает следующие значения: yes или 1, и no или 0;

    scrollbars - логическое свойство окна, которое предназначено для включения или выключения отображение полос прокрутки для содержимого окна браузера. Данное свойство принимает следующие значения: yes или 1, и no или 0;

    status - логическое свойство окна, которое предназначено для включения или выключения отображения статусной строки браузера. Данное свойство принимает следующие значения: yes или 1, и no или 0;

    menubar - если этот параметр установлен в yes, то в новом окне будет меню;

    toolbar - если этот параметр установлен в yes, то в новом окне будет навигация (кнопки назад, вперед и т.п.) и панель вкладок;

    location - если этот параметр установлен в yes, то в новом окне будет адресная строка;

    directories - если этот параметр установлен в yes, то в новом окне будут закладки/избранное.

 

Пример. Открыть окно в новой вкладке. Задать ширину в 400 пикселей, высоту в 300.

var w1=window.open("", "win1", "width=400, height=300");

 

Метод open() позволяет не только открыть окно, но и получить ссылку на данное окно w1. Данная ссылка позволяет взаимодействовать с этим окном посредством вызова определённых свойств и методов. Т.е. можем с помощью JavaScript кода, расположенного в одном окне управлять другим окном.

 

Пример. Создать новое пустое окно размером 400х300 точек.

 

<script type="text/javascript">

    window.open("", "win1", "width=400, height=300");

</script>

 

Пример. Создать окно размером 400х300 точек и открыть в нем некоторый сайт.

 

<script type="text/javascript">

    window.open('http://rpo.16mb.com', 'win1', 'width=400, height=300');

 </script>

 

Новое окно открывается в верхнем левом углу окна браузера. Для позиционирования окна относительно браузера можно использовать такие свойства:

 

screen.width – ширина экрана монитора

screen.height – высота экрана монитора

window.outerWidth – ширина окна браузера

window.outerHeight – высота окна браузера

window.screenX – положение окна браузера на мониторе по X

window.screenY – положение окна браузера на мониторе по Y

 

Пример.

 

<script type="text/javascript">

    var x,y;

    //рассчитаем координаты окна на экране

    x=(screen.width-400) / 2;

    y=(screen.height-300) / 2;

 

    window.open("", "win1", "width=400, height=300, left="+x+", top="+y);

</script>

 

Пример. Откроем новое окно размером 400х300 точек, отображаемое по центру окна браузера.

 

<script type="text/javascript">

    var x,y;

    //рассчитаем координаты окна на экране

    x=(window.outerWidth-400)/2+window.screenX;
        y=(window.outerHeight-300)/2+window.screenY;

 

    window.open("", "win1", "width=400, height=300, left="+x+", top="+y);

</script>

 

Пример. Откроем новое окно размером 500х300 точек. С помощью атрибута target перейдем в новом окне на сайт Яндекса.

 

Есть функция newWindow(), вызов которой откроет новое окно c адресом Гугла

<script type="text/javascript">

function newWindow()

{

     win1=window.open("https://google.com","win","width=500, height=300");

}

</script>

В теле документа есть кнопка создания окна. Создаем окно, нажав кнопку

<body>

<input type="button" value="Создать окно" onclick="newWindow();"/>

В теле документа есть ссылка, которая позволит загрузить сайт Яндекса в новом окне с именем win.

<a href="https://yandex.ru" target="win">Новое окно</a>

Воспользовавшись ссылкой, проверьте работоспособность кода.

 

Обмен информацией между окнами.

Если несколько окон имеют общего предка (открыты из одного общего окна), то они могут обмениваться данными как между собой, так и с родительским окном. Для этого нужно выполнить несколько условий:

- ссылка на каждое открываемое окно должна сохраняться в переменной, которая объявляется как глобальная;

- для обращения к дочернему окну из главного окна можно пользоваться этой переменной;

- для обращения к родительскому окну из дочернего используют стандартное имя opener;

- для обращения между дочерними окнами используют имя window.opener.переменная.

 

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

 

<script type="text/javascript">

    //глобальные переменные для новых окон

    var w1,w2;

 

    function w1()

    {

        //первое окно имеет размер 400х300

        w1=window.open("", "win1", "width=400, height=300");

    }

 

    function w2()

    {

        //второе окно имеет размер 500х400

        w2=window.open("", "win2", "width=500, height=400");

    }

</script>

 

Для обращения к первому окну из главного окна можно использовать имя "win1".

Для обращения ко второму окну из главного окна можно использовать имя "win2".

Для обращения к главному окну из окон win1, win2 можно использовать имя "window.opener" или "window".

Для обращения к первому окну из второго окна можно использовать имя "win1".

Для обращения ко второму окну из первого окна можно использовать имя "win2".

 

Особенности вызова диалогов.

Рассмотренные выше диалоги alert(), confirm(), prompt() по умолчанию принадлежат тому окну, из которого они вызываются. Если нужно вызвать диалог для другого окна, то используйте команды вида:

 

переменная.alert()

переменная.prompt()

переменная.confirm()

 

Для определения имени переменной можно использовать те же подходы, которые используются для обращения к дочерним, родительским или соседним окнам.

 

Пример.

 

win1.alert(""); //появляется сообщение внутри дочернего окна win1

win2.prompt("",""); //появляется окно ввода текста внутри дочернего окна win2

 

7. Вывод данных на страницу

Объект document позволяет получить доступ к содержимому страницы (DOM-дереву) и выполнять над содержимым любые операции.

Работа с этим объектом будет рассмотрена в следующих лекциях. Но один из методов можно рассмотреть здесь.

 

document.write("Текст");

document.writeln("Текст");

 

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

 

Пример.

 

document.write("пример текста");

document.write("<h2>пример текста</h2>");

document.write("<p class='text'>пример текста</p>");

document.write("<input type='button' value='Кнопка' onclick='alert(\"Сообщение \");' ");

 

Можно даже напечатать текст JavaScript скрипта. Но в этом случае обязательно нужно закрывающийся тег разбивать на две части:

 

"<"+"/script>"

 

Пример.

 

document.writeln("<script>");

document.writeln("alert('Пример текста');");

document.writeln("<"+"/script>");

 

Скорее всего, текст отобразится некорректно, так как не задана кодировка символов. Правильный код такой.

 

document.writeln("<head>");

document.writeln("<meta http-equiv='Content-Type' content='text/html; charset=utf8'>");

document.writeln("<title>111</title>");

document.writeln("</head>");

document.writeln("<body>Пример текста");

document.writeln("<script>");

document.writeln("alert('Пример текста');");

document.writeln("<"+"/script>");

document.writeln("</body>");

document.close();

 

Обратите внимание, что вывод текста в документ нужно завершать методом вида:

 

document.close();

 

Замечание. При использовании методов write() или writeln() нужно учитывать следующее: если метод вызывается из функции, то содержимое всей страницы очищается, и данные выводятся на пустую страницу.