document.write()

Poniższy tekst zostawiłem ze względów sentymentalnych. Metoda document.write jest przestarzała i nie powinno się jej używać. Zamiast tego o wiele lepiej użyć metod dom, lub metody innerHTML

Javascript udostępnia nam metodę document.wite, która służy do wypisywania tekstu w dokumencie.

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 apostrofó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:

  • \n - znak nowej linii
  • \t - znak tabulacji
  • \b - znak backspace
  • \f - form feed
  • \' - pojedynczy cudzysłow
  • \t - podwójny cudzysłów
  • \t - backslash
  • \xNN - NN to hexcadecymalny numer znaku (Latin-1)
  • \xDDDD - DD to hexcadecymalny numer znaku (Unicode)

Ma to szczególne zastosowanie w oknach dialogowych).

Formatowanie tekstu

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 miganie 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());

Przykładowo jeżeli chcemy wypisać tekst o czcionce wielkości 4, kolorze np. #336666 oraz żeby nasz tekst był pisany przekreśloną kursywą wówczas zastosujemy poniższy kod:

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 (var 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:


var colors = ["#FFCC99","#FF9933","#FF6666","#FF3333","#CC99FF","#CC00FF","#9966FF"];
for (var x=1; x<=7; x++) {
    document.write("Przykładowy tekst
".fontsize(x).fontcolor(colors[x-1]).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.

Zastosowanie

Na zakończenie przedstawiam wam jeszcze jeden króciutki skrypt:


var k = 1;
var i = 0;

var colors = ["#bddef9","#c1cef0","#93a2e6","#657edc","#3d5bd2","#2843b0","#1d3283","#122058"];
var text = "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ą =)...";

for (x=0; x<text.length; x++) {
    if (i >= colors.length-1) k=-1;
    if (i <= 0) k = 1;
    var letter = text.substring(x,x+1);
    i=i+k;
    document.write(text.fontsize(2).fontcolor(text[i]).bold())
}

Zmienna k będzie nam mówić w którą stronę mamy się poruszać po tablicy z kolorami. Zmienna i będzie nam mówić na którym 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 końca tablicy z kolorami, jeżeli tak, to zmieniamy kierunek na -1. Tak samo sprawdzamy czy przypadkiem nie przekroczyliśmy początku tablicy (przy poruszaniu się z kierunkiem -1). Gdybyśmy tego nie kontrolowali to wówczas po dojściu do końca tablicy kolory nasza pętla chciała by pobierać kolejne wartości z tej tablicy. 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 dokonaniu tych sprawdzeń 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 ustawiamy wielkość czcionki na 2). Efekt możecie zobaczyć poniżej: