Projektowanie stron internetowych: kurs javascript

Pozycjonowanie - Producent okien - Forum Golfa - www.wiekowi-artysci.com - wymiana plików - montaż rusztowań - montaż klimatyzacji - wózki widłowe - zdjęcia przez internet - Tanie laptopy - Perfumy lancome - koronki - Zlewozmywaki - fakty i inne - Kolagen

<<<	Projektowanie stron internetowych

[Ramki][Tworzenie nowych okien]

Ramki

Można zadać pytanie - co wspólnego mają ramki z JavaScript?. Otóż dzięki ramką możliwa jest wymiana informacji pomiędzy dokumentami HTML. O tym wyjaśnię w dalszej lekcji tego kursu. Na początek przypomnijmy ogólną definicję tworzenia ramki .

<FRAMESET ROWS="50%,50%">
<FRAME SRC="strona1.htm" NAME="ramka1">
<FRAME SRC="strona2.htm" NAME="ramka2">
</FRAMESET>

Jak widać powyższa procedura tworzy dwie ramki. Są one napisane w tagah HTMLa. Tworzą one dwie ramki rozłożone w poziomie strony. Jedna zawiera dokument strony1, a druga dokument strony2. Każda z ramek ma przypisaną nazwę (ramka1 oraz ramka2), którą będziemy wykorzystywać przy odwoływaniu się do nich.

Oczywiście jest to tylko przykład jednej z możliwości tworzenia ramek (zainteresowanych tym tematem odsyłam do kursu Pawła Wimmera).

Ramki i JavaScript

Teraz zajmiemy się ramkami w JavaScripcie. Ramki w JavaScripcie są oparte na hierarchizacji strony [patrz].Poniższy rysunek ukazuje zależności ramek:

Jak widać dokument tworzący ramki ma status "parent", a strony wyświetlane w ramkach mają status "children". Oczywiście każdy dokument wyświetlany w ramkach posiada inną unikalną nazwę, gdyż bez takowej odwoływanie się do nich nie byłoby możliwe.

Komunikacja pomiędzy ramkami

Dzięki znajomości hierarchizacji oraz statusu ramek możemy wymienić informację pomiędzy ramkami. W tym celu musimy napisać poniższe polecenie:

ramka2.document.write("Tu ramka 2.");

W ten sposób z dokumentu tworzącego ramki (parent) możemy przekazać informację do dowolnego dokumentu ramki. Należy tylko pamiętać o podaniu prawidłowej nazwy ramki w której ma się ukazać nasz tekst.

Jeśli chcemy przekazać informację z jednej ramki do drugiej musimy postąpić według poniższego rysunku:

parent.ramka2.document.write("Tu ramka 2.");

Teraz stwórzmy dwie ramki, które po naciśnięciu przycisku w jednej odsyłała by nas do strony Wirtualnej Polski. W tym celu tworzymy plik o nazwie index.htm (nazwa według twojego gustu :-) W nim definiujemy ramki:

<HTML>
<frameset rows="*,20%">
<frame name="gora" target="footnotes" src="gora.htm">
<frame name="dol" src="dol.htm">
<noframes>
</frameset>
<HTML>

Teraz tworzymy stronę o nazwie gora.htm .W niej będzie pojawiała się strona Wirtualnej Polski.

Tworzymy drugą stronę o nazwie dol.htm. Chcemy w niej zdefiniować guzik który powodowałby po naciśnięciu iż zostaniemy przeniesieni do Wirtualnej Polski. W tym celu musimy napisać:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

function wp()
{
parent.gora.location.href="http://wp.pl";
}

</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Wirtualna Polska" onClick="wp()">
</FORM>
</BODY>
</HTML>

[przykład]

Możemy także urozmaicić ten skrypt tworząc pole w którym możemy wpisać dowolny adres WWW.

W pliku dol.htm w skrypcie dopisujemy :

function przegladarka()
{
parent.gora.location.href = document.przeg.adres.value ;
}

Następnie pomiędzy tagami <BODY> </BODY>:

<FORM name="przeg">
<INPUT TYPE="text" VALUE="" name="adres">
<INPUT TYPE="button" VALUE="Hop!!" onClick="przegladarka()">
</FORM>

[przykład]