Javascript udostępnia nam metodę document.wite. Od razu trzeba zaznaczyć, że ta metoda nie działa w dokumentach XHTML strict (więcej dowiesz się tutaj). Dlatego też metodę document.write w dokumentach XHTML strict trzeba zastąpić metodami DOM'owymi.
Metoda document.write (lub też document.writeln - dodajca znak nowego wiersza po wypisaniu tekstu (\n)) służy do wpisywania tekstu w kod strony. Wymaga ona podania w argumencie parametru który zostanie wyświetlony na ekranie. Tym parametrem może być ciąg znaków, zmienna numeryczna lub zmienna typu logicznego. Przykładowe zastosowanie może mieć postać:
document.write('To jest przykładowy tekst'); //Wyświetli tekst To jest przykładowy tekst
//lub
document.write("To jest przykładowy tekst");
Różnica między zastosowaniem cudzysłowów (") a apostrfów (') leży w wydajności. Tekst między apostrofami jest wypisywany minimalnie szybciej niż tekst między cudzysłowami (zasada ta dotyczy także PHP). Możesz sprawdzić to tutaj.
Różnica polega też na tym, że stosując cudzysłowy możesz stosować znaki formatujące takie jak:
Ma to szczególne zastosowanie w oknach dialogowych).
Kto stosuje poniższe metody w dzisiejszych czasach, oznacza to, że albo przespał kilkanaście ostatnich lat, albo jest ostatnim żyjącym mamutem. Jeżeli ktoś będzie chciał wam udowodnić, że poniższe metody są w ogóle przydatne, skwitujcie jego wypowiedź trzema literkami CSS.
Z obowiązku trochę jednak o nich opowiem...
Tak samo jak w zwykłym HTML'u tak i w Javascripcie istnieje możliwość formatowania wypisywanego tekstu. Aby sformatować wyprowadzany na ekran ciąg musimy zastosować odpowiednią metodę.
Na przykład aby wypisać przekreślony tekst stosujemy metodę strike():
document.write("To jest przykładowy tekst".strike());
Oto spis wszystkich możliwych metod formatowań:
| .italics() | - wypisuje nasz tekst jako kursywa |
|---|---|
| .bold() | - wypisuje nasz tekst pogrubioną czcionką |
| .strike() | - wypisuje nasz tekst czcionką przekreśloną |
| .sub() | - wypisuje nasz tekst jako index dolny |
| .sup() | - wypisuje nasz tekst jako index górny |
| .big() | - wypisuje nasz tekst czcionką zwiększoną o 1 do stosowanej w danym momencie. Jeżeli używaną czcionką jest czcionka o wielkości 7 wówczas ta metoda nie przynosi żadnych rezultatów. |
| .small() | - wypisuje nasz tekst czcionką zmniejszoną o 1 do stosowanej w danym momencie. Jeżeli używaną czcionką jest czcionka o wielkości 1 wówczas ta metoda nie przynosi żadnych rezultatów. |
| .blink() | - działa tylko w Netscape Nawigatorze. Powoduje mryganie tekstu. |
| .fixed() | - wypisuje nasz tekst czcionką o stałej szerokości (tak samo jakbyśmy zastosowali znaczniki <code></code> w HTML lub czcionkę "Courier". |
| .fontsize(x) | - wypisuje nasz tekst czcionką o wielkości x (z zakresu 1-7). Gdy dla dokumentu zastosowane są style które ustalają rozmiar czcionki wówczas zastosowanie tej metody w Netscape Nawigatorze nie przynosi żadnych rezultatów. |
| .fontcolor("x") | - wypisuje nasz tekst o kolorze x. Nazwę koloru możemy podać słownie (np. "red") jak i w formie szesnastkowej (np. #6d8cdb). Zalecam używanie małych liter przy podawaniu wartości kolorów (a - f), gdyż w przeciwnym wypadku mogą wystąpić błędy. |
Oczywiście podane wyżej metody można łączyć ze sobą. I tak na przykład aby wstawić na naszą stronę tekst pisany pogrubioną czcionką o kolorze czerwonym stosujemy poniższy kod:
document.write("Przykładowy tekst".bold().fontcolor("red"));
Przy stosowaniu formatowania tekstu nie jest wymagana żadna kolejność stosowania metod formatujących, tak więc:
document.write("Przykładowy tekst".bold().fontcolor("blue"));
da w rezultacie ten sam efekt co:
document.write("Przykładowy tekst".fontcolor("blue").bold());
document.write("Przykładowy tekst".fontsize(4).fontcolor("#336666").strike().italics());
Kolejny przykład:
document.write("Ten tekst jest pisany czcionką: "+"pogrubioną, ".bold()+"pochyloną, ".italics()+"przekreśloną, ".strike()+"kolorową ".fontcolor("#FF9933")+"i o wielkości 5.".fontsize(5));
da nam w efekcie coś takiego:
Można oczywiście odpowiednie wartości zmieniać dynamicznie np. za pomocą pętli np:
for (x=1; x<=7; x++) {
document.write("Przykładowy tekst<br>".fontsize(x).fontcolor("#336666"));
}
da nam w rezultacie poniższy efekt:
Powyższy skrypt możemy wzbogacić o zastosowanie tablicy dla zmiany koloru:
kolory = new Array ("#FFCC99","#FF9933","#FF6666","#FF3333","#CC99FF","#CC00FF","#9966FF");
for (x=1; x<=7; x++) {
document.write("Przykładowy tekst<br>".fontsize(x).fontcolor(kolory[x]).strike().italics());
}
Na początku deklarujemy tablicę "kolory" zawierającą 7 wartości kolorów. Następnie przy pomocy pętli wypisujemy przykładowy tekst za każdym razem podstawiając w miejsce wielkości czcionki wartość x oraz w miejsce koloru wartość pobraną z tablicy kolory o indeksie x-1 (bo tablica jest indeksowana od 0).
Jak więc widać z powyższego przykładu zastosowanie formatowania tekstu ma dość durze możliwości. Jednak powstrzymywałbym się z nadmiernym używaniem metody document.write. W zamian polecam korzystać z metod DOM wraz z zastosowaniem formatowania za pomocą CSS. Nie dość, że tworzymy nowoczesny kod, to na dodatek mamy nieporównywalnie większe możliwości wpływu na to co wypisujemy.
Na zakończenie przedstawiam wam jeszcze jeden króciutki skrypt:
<script type="text/javascript">
var k = 1; //kierunke poruszania sie po tablicy z kolorami
var i = 0; //zmienna oznaczajaca index koloru
var kolory = new Array ("#bddef9","#c1cef0","#93a2e6","#657edc","#3d5bd2","#2843b0","#1d3283","#122058"); //tablica z kolorami
var napis = "To jest przykładowy tekst którego każda literka będzie pisana zupełnie innym kolorem, dlatego też tekst ten będzie wyglądał jakby był pisany tęczową czcionką =)..."; //nasz napis
for (x=0; x<napis.length; x++) { //petla dla dazdego znaku w napisie
if (i >= kolory.length-1) k=-1; //jezeli podazamy ku koncowi tablicy...
if (i <= 0) k = 1; //jezeli podazamy w ku poczatkowi tablicy...
var litera = napis.substring(x,x+1); //pobieramy kolejna literke
i = i + k; //zwiekszamy i (numer koloru)
document.write(litera.fontsize(2).fontcolor(kolory[i]).bold()) //wypisujemy literke
}
</script>
Zmienna k będzie nam mówić w którą stronę mamy się poruszać po talibcy z kolorami. Zmienna i będzie nam mówić na ktorym kolorze się znajdujemy.
Deklarujemy tablicę kolory zawierającą wartości kolorów. Następnie deklarujemy zmienną napis zawierającą nasze przykładowe zdanie.
Wykonujemy pętlę dla całego napisu. W każdym jej przebiegu sprawdzamy, czy nie doszliśmy do konća taliblicy z kolorami, jeżeli tak, to zmieniamy kierunek na -1. Tak samo sprawdzamy czy przypadkiem nie przekroczylismy poczatku tablicy (przy poruszaniu się z kierunkiem -1). Gdybyśmy tego nie kontrolowali to wówczas po dojściu do końca talicy kolory nasza pętla chciała by pobierać kolejne wartości z tej talicy. Jako że takowe by już nie istniały tak więc w miejsce koloru podstawiła by nieistniejącą wartość koloru (co przypomina kolor seledynowy) - a to jest nie za bardzo przez nas wymagane.
Po dokonianiu tych sprawdzen pobieramy pod zmienna litera kolejny znak z naszego napisu (za pomocą metody substring) i zwiększamy zmienną i o kierunek.
Ostatnią czynnością jest wypisanie litery w kolorze pobranym z tablicy kolory (dodatkowo literę taką pogrubiamy i ustwaiamy wielkość czcionki na 2). Efekt możecie zobaczyć poniżej: