JavaScript Środowisko BOM obiektowy model przegladarki szkolenie bezpłatne

JAVASCRIPT OBIEKTOWY JĘZYK PROGRAMOWANIA

II część szkolenia z JavaScript:

JavaScript Środowisko BOM obiektowy model przegladarki szkolenie bezpłatne

Witam serdecznie w szkoleniu: JavaScript obiektowy język programowania

JavaScript Środowisko BOM obiektowy model przegladarki szkolenie bezpłatne

 

JavaScript jest językiem, który musi działać w określonym środowisku, zwykle tym środowiskiem dla JavaScript jest przeglądarka internetowa. Oczywiście przeglądarka nie jest jedynym środowiskiem JavaScript. Może nim być np. technologia node.js. Ale o tym opowiem nieco później.

 

Filozofia działania JavaScript w internecie opiera się na dwóch modelach:

BOM (Browser Object Model) - dla JavaScript

Model Obiektowy Przeglądarki – obsługuje zachowania urządzeń zewnętrznych do przeglądarki oraz obiektu nadrzędnego dla przeglądarkowej JavaScript, czyli obiektu window.

DOM (Document Object Model) – Model Obiektowy Dokumentu - dla JavaScript

DOM to standard zarządzany i rozwijany przez organizację World Wide Web Consortium (W3C). Ma kilka poziomów (0-3), które w różnym stopniu są zaimplementowane przez przeglądarki.

W tej części szkolenia o JavaScript znajdziesz informacje o BOM, w kolejnej – o DOM.

BOM Browser Object Model – Model Obiektowy Przeglądarki – najważniejsze elementy

Window - obiekt globalny JavaScript, wszystkie wbudowane funkcje JavaScript są metodamiobiektu window.

Pora na szczegóły - JavaScript obiekt BOM

 

BOM – właściwości, metody:

 

NAVIGATOR - JavaScript BOM

window.navigator - obiekt dostarczający wiedzy o przeglądarce i jej możliwościach

window.navigator.userAgent - identyfikuje przeglądarkę

SCREEN - JavaScript BOM

Właściwość screen zawiera informacje na temat ustawień monitora np. dzięki właściwości:

screen.colorDepth - odczytasz głębię koloru monitora

screen.width - odczytasz szerokość monitora

screen. .height - odczytasz wysokość monitora

screen.availWidth - odczytasz dostępną szerokość monitora

screen.availHeight - odczytasz dostępną wysokość monitora

HISTORY - JavaScript BOM

Właściwość window.history daje programistom dostęp do stron odwiedzonych wcześniej w ramach tej samej sesji przeglądarki. Dodam, że jest to dostęp nieco ograniczony. „Podróżować” poprzez historię użytkownika możesz poprzez metody:

history.forward() - do przodu

history.back() - do tyłu

history.go(0) - przeładowanie bieżącej strony:

history.go(-1) – jedna strona wstecz

history.go(11) – jedenaście stron do przodu

LOCATION - JavaScript BOM

window.location - zawiera obiekt JavaScript przechowujący informacje o adresie URL aktualnie załadowanej strony

window.location.hostname - zawiera obiekt JavaScript przechowujący informacje o samej domenie

window.location.href - zawiera obiekt JavaScript przechowujący informacje o pełnym adresie strony internetowej

FRAMES - JavaScript BOM

Właściwość window.frames przechowuje zbiór ramek z bieżącej strony, zarówno zwykłe, jak i pływające ramki iframe. Właściwość window.frames zawsze jest zdefiniowane i wskazuje window.

window.frames = = = window – daje w console.log – true

WINDOW – obiekt główny – JavaScript dla przeglądarek

Teraz pora na ważne metody obiektu window.

window.open()- JavaScript pozwalająca otwierać nowe okna przeglądarki, tzw. okienka pop-up

metoda window.open potrzebuje (pobiera) elementy:

var poswojsku = window.open('adres internetowy', 'nazwę nowego okna’, 'szerokość okna, wysokość okna, status-tzn. info czy pasek stanu ma być wyświetlony');

var poswojsku= window.open('http://poswojsku.info', 'edukacja z poswojsku.info', 'width=500,height=500,resizable=yes');

window.close() - JavaScript zamyka nowe okno

window.moveTo(x,y) - JavaScript przenosi okno przeglądarki na pozycję x, y

window.moveBy(x,y) - JavaScript przenosi okno przeglądarki o wartościx, y

window.resizeTo(x,y)- JavaScript zmienia rozmiar okna o parametry x,y

window.alert() - JavaScript otwiera okienko z alertem – informacją dla użytkownika

window.prompt() - JavaScript otwiera okienko z polem do wprowadzeniu tekstu – pobiera tekst od użytkownika

window.confirm() - JavaScript otwiera okienko z możliwością wyboru dla użytkownika pomiędzy: OK i Anuluj

window.setTimeout() - JavaScript ustawia opóźnienie wykonania funkcji, przykład:

function uwazaj(){alert('uważaj na słonie ?');}

setTimeout(uwazaj, 2000);

JavaScript - powyższy kod wyświetli napis ‘uważaj na słonie ?’ z opóźnieniem 2000 milisekund (2 sekund)

JavaScript Środowisko BOM obiektowy model przegladarki szkolenie bezpłatne

co zrobić, aby nie wyświetlił się napis?

var stop = setTimeout(uwazaj, 2000);

clearTimeout(stop);

window.setInterval() - ustawia interwał, powoduje wielokrotne wywołania kodu co pewien okres czasu

teraz wywołamy funkcję uwazaj() w taki sposób, by była uruchamiana co trzy sekundy aż do momentu anulowania planu wywołań za pomocą clearInterval(stop).

var id = setInterval(uwazaj, 2000);

I teraz masz gwarancję, że wkurzysz użytkowników swojej strony.

HTML DOM Document Object Model – Model Obiektowy Dokumentu - najważniejsze elementy

Dziękuję wraz z JavaScript za uwagę

Zapraszam do kolejnej części szkolenia:

JavaScript obiektowy język programowania

 

Zobacz w menu podobne artykuły do: JavaScript obiektowy język programowania