Веб-программирование

Обучение программированию

Делаете первые шаги в программировании? Представляем вашему вниманию пошаговое обучение самостоятельного создания сайтов любой сложности на примерах! На страницах сайта KobRU вы найдете все самое необходимое, для того чтобы по праву считаться веб-мастером по созданию привлекательных динамически изменяемых интернет-страниц, используя основные инструменты веб-разработчиков: HTML; CSS; PHP; MySQL; JAVASCRIPT и другие. Сайт KobRU - наиболее полное и качественно структурированное руководство с предельно понятными пояснениями и поэтапным изложением материала, который поможет вам в совершенстве овладеть искусством программирования. Добавьте динамики и интерактивность в свои веб-проекты!

Вход в личный кабинет

Забыли пароль?

Не зарегистрированны?


Конструкторское Web-бюро
11.02 Окна Web-обозревателя

Автор: Denisido

Дата: 2010-12-06

Первым делом нужно еще раз отметить, что консорциумом W3C на данный момент не было прописано четких правил стандартизации свойств и методов объекта Window для разных Web-обозревателей. Поэтому одни поддерживают свои свойства и методы, другие, соответственно, свои. Исходя из этого мы возьмем скрипт из предыдущего урока и в дальнейшем будем подключать его ко всем необходимым страницам:

// Определяем браузер пользователя
function getBrowser() {
                      switch(navigator.appName) {
                                   case 'Microsoft Internet Explorer' : return 'IE'; break;
                                   case 'Opera' : return 'O'; break;
                                   case 'Netscape' : return 'NS'; break;
                                                }; // end switch
                      }; // end func getBrowser
// ф-ция для уточнения браузера пользователя
function getBrowserStrict() {
        var browser = navigator.userAgent; 
        if (browser.indexOf('Avant Browser') != -1) {return "AB";}
        else if(browser.indexOf('Firefox') != -1) {return "FF";}
        else if(browser.indexOf('Chrome') != -1) {return "GC";}
        else if(browser.indexOf('Opera') != -1) {return "O";}
        else if(browser.indexOf('Safari') != -1) {return "SF";}
	else {return getBrowser();};
                            }; // end func getBrowserStrict

ссылка на файл

Размеры и положение окна браузера

Начнем с того, что узнаем координаты окна Web-обозревателя. С этой целью обратимся к свойствам объекта Window. Для одних (в частности IE & Opera) пропишем свойство screenLeft - горизонтальная координата, и свойство screenTop - вертикальная координата. Для других, пропишем свойства screenX и screenY:

Запустить!
// Определяем координаты окна браузера
if( (getBrowserStrict() == "NS") ) 	{
					x = window.screenX;
					y = window.screenY;
				 	}
else					{
					x = window.screenLeft;
					y = window.screenTop;
					}; // end if else
alert('горизонтальная координата '+x+', вертикальная координата '+y);

Размеры окна браузера можно определить с помощью свойств outerWidth и outerHeight объекта Window. Но стоит сразу оговориться, что Internet Explorer не поддерживает этих свойтсв.

Запустить!
// горизонтальный и вертикальный размеры окна браузера
  
if(getBrowserStrict() != "IE") {
                                width  = window.outerWidth;
                                height = window.outerHeight;
                               };
alert('ширина - '+width+'px, высота - '+height+'px');

Метод moveTo()

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

// местоположение окна браузера
  
window.moveTo(300,300);

Метод moveBy()

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

// смещение окна браузера
  
window.moveBy(30,-10); // смещение вправо на 30px, вверх на 10px

Метод resizeTo()

Этот метод изменяет размеры окна браузера

// изменение размеров окна обозревателя
  
window.resizeTo(200,100); // ширина 200px, высота 100px

Метод resizeBy()

Метод изменяет размеры окна браузера на заданные значения. Параметры могут принимать и отрицательные величины, в таком случае размер уменьшается:

// изменение размеров окна обозревателя
  
window.resizeTo(-20,10); // ширина -20px, высота +10px от исходного

Полосы прокрутки

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

scrollWidth

Это свойство возвращает полную ширину страницы:

Запустить!
// Полосы прокрутки
  
var sx = document.body.scrollWidth;
alert(sx);

scrollHeight

Это свойство возвращает полную высоту страницы:

Запустить!
// Полосы прокрутки
  
var sy = document.body.scrollHeight;
alert(sy);

scrollLeft и scrollX

Эти свойства возвращают расстояние на которое прокручена страница по горизонтали:

Запустить!
// Полосы прокрутки
  
if(getBrowserStrict() == "IE") {
                               var slx = document.documentElement.scrollLeft;
                               }
else                           {
                                var slx = window.scrollX;
                               }; // end if else
alert(slx);

scrollTop и scrollY

Эти свойства возвращают расстояние на которое прокручена страница по вертикали:

Запустить!
// Полосы прокрутки
  
if(getBrowserStrict() == "IE") {
                               var sly = document.documentElement.scrollTop;
                               }
else                           {
                                var sly = window.scrollY;
                               }; // end if else
alert(sly);

pageXOffset и pageYOffset

Эти свойства поддерживаются браузерами Opera, Firefox, Google Chrome и Safari, возвращают размер скрытой от посетителя в результате прокрутки части страницы:

Запустить!
// Полосы прокрутки
  
if( (getBrowserStrict() == "O") || (getBrowserStrict() == "FF") || (getBrowserStrict() == "GC") || (getBrowserStrict() == "SF") ) {
                                var slx = window.pageXOffset;
                                var sly = window.pageYOffset;
                               }; // end if Opera or Firefox
alert('x = '+slx+' y = '+sly);

scrollMaxX и scrollMaxY

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

// Полосы прокрутки для лисы
  
var smx = window.scrollMaxX;
var smy = window.scrollMaxY;

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

Метод scrollTo()

Данный метод принимает два параметра. Первый параметр - горизонтальная координата, второй - вертикальная. Прокрутка происходит до заданных координат:

Запустить!
// Полосы прокрутки
  
var st= window.scrollTo(0,200);
// Полосы прокрутки с анимированием
  
var scrollXPosition = 0;
var scrollYPosition = 0;
var i=0;
function scrollAnimate(spx, spy) {
	var tochnost = 100;
	var stepx = spx / tochnost;
	var stepy = spy / tochnost;
	i++;
	scrollXPosition = stepx*i;
	scrollYPosition = stepy*i;
	if (i >= tochnost) 	{
				clearInterval(delTime); // уничтожаем setInterval javascript
				setTimeout("alert(pageXOffset+'x'+pageYOffset)",1000);
				}; // end for if
	window.scrollTo(scrollXPosition,scrollYPosition);
}; // end function scrollAnimate
var delTime = setInterval("scrollAnimate(100,900)", 10);

Метод scrollBy()

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

Запустить!
// Полосы прокрутки
  
var st= window.scrollBy(0,-30); // прокручиваем содержимое на 30px вверх

Метод scrollIntoView()

Если мы хотим прокрутить содержимое страницы до нужного узла, то данный метод нам поможет достигнуть наших замыслов. В качестве необязательного параметра может выступать булево значение. Если true, то прокрутка осуществляется до верхнего края элемента, если false - до нижнего края. Этот метод сравним с якорным способом прокрутки:

Запустить!
// Полосы прокрутки
  
var el = document.getElementById('but');
el.scrollIntoView(); // прокручиваем содержимое до 1-го примера



Оцените материал по 5-ти бальной шкале: 1 2 3 4 5



Коментарии:

Коментарий добавил(а): fgh1233
Дата: 2010-12-17

Полезная информация, обязательно пригодится!

Добавить новый коментарий:

Текст коментария:

Введите результат с картинки

Просмотров: 8843

Метки раздела JavaScript

Основы web программирования, var javascript, javascript функции, javascript обучение, javascript простые примеры, html javascript, javascript примеры, javascript random, уроки сайтостроения, java script, регулярные выражения, appendchild javascript, javascript бесплатно, javascript document write, javascript справочник, javascript примеры.