jesteś tutaj
67
Szybki skok na głębokie wody JavaScriptu
Piszemy poważną aplikację JavaScript
Wykorzystamy wszystkie zdobyte wiadomości dotyczące języka JavaScript oraz
znajomość funkcji
console.log
do czegoś praktycznego. Będziemy potrzebować
kilku zmiennych, instrukcji
while
oraz instrukcji
if
i
else
. Wystarczy, że dodasz
trochę szyku i zanim się sam zorientujesz, uzyskasz superpoważną aplikację
biznesową. Jednak przed obejrzeniem kodu zastanów się, w jaki sposób napisałbyś
kod wyświetlający klasyczną piosenkę o „99 butelkach piwa”.
var worG = ”butelek”;
var count = ;
while (count > 0) {
consoleloJ(count + ” ” + worG + ” piwa na Ăcianie”);
consoleloJ(count + ” ” + worG + ” piwa,”);
consoleloJ(”-eGnÈ weě i poGaj w koïo,”);
count = count - 1;
if (count > 0) {
consoleloJ(count + ” ” + worG + ” piwa na Ăcianie”);
} else {
consoleloJ(”Nie ma juĝ ” + worG + ” piwa na Ăcianie”);
}
}
WYSIL
SZARE KOMÓRKI
W tym kodzie jest pewna niewielka usterka. Aplikacja działa
prawidłowo, jednak generowane wyniki nie są w 100%
prawidłowe. Czy jesteś w stanie znaleźć błąd i go poprawić?
68
Rozdział 1.
Znacznik script
Czy nie powinniśmy
umieścić tego kodu na stronie
WWW, tak żeby można było zobaczyć
generowane teksty? Czy będziemy
zapisywali odpowiedzi na papierze?
Słusznie! Najwyższa pora, by umieścić skrypt
na stronie. Jednak chcieliśmy, żebyś — zanim
do tego dojdziemy — dysponował na tyle dużą
znajomością języka JavaScript, by zrobić coś
ciekawego. Przekonałeś się już na początku tego
rozdziału, że kod JavaScript jest dodawany do
dokumentów HTML, podobnie jak style CSS,
czyli zapisuje się go bezpośrednio w dokumencie,
pomiędzy odpowiednimi znacznikami, a konkretnie,
znacznikami
<script>
.
Oczywiście, tak samo jak w przypadku arkuszy
stylów CSS, kod JavaScript można także umieszczać
w odrębnych plikach.
Naszą poważną aplikację biznesową umieścimy
najpierw bezpośrednio w kodzie strony, a następnie
po dokładnym przetestowaniu przeniesiemy ją do
odrębnego pliku.
jesteś tutaj
69
Szybki skok na głębokie wody JavaScriptu
Sprawdź poniższy kod HTML; to właśnie w nim umieścisz kod JavaScript. Wpisz ten
kod, a następnie skopiuj do niego kod aplikacji przedstawiony dwie strony wcześniej,
pamiętając, by wstawić go pomiędzy znaczniki <script>. Możesz użyć programu
Notatnik (Windows) lub TextEdit (Mac), upewnij się tylko, że zapisujesz stronę
jako zwyczajny plik tekstowy. Jeśli masz jakiś inny, ulubiony edytor HTML, taki jak
Dreamweaver, Coda lub WebStorm, możesz go wykorzystać.
<Goctype html>
<html lanJ=”pl”>
<heaG>
<meta charset=”utf-”>
<title>0öj pierws]y skrypt -ava6cript</title>
</heaG>
<boGy>
<script>
</script>
</boGy>
</html>
No dobrze, wyświetlmy zatem jakiś kod w przeglądarce… Postępuj zgodnie
z poniższymi instrukcjami, by uruchomić swoją poważną aplikację biznesową.
Nasze wyniki pokazaliśmy poniżej.
Wszystkie przykłady do książki oraz używane
w nich dodatkowe pliki możesz pobrać z serwera FTP
wydawnictwa Helion: ftp://ftp.helion.pl/przyklady/prjsrg.zip
Wpisz ten kod.
Oto testowe wykonanie naszej aplikacji. Kod
tworzy pełny tekst piosenki o 99 butelkach
piwa, wyświetlając go w oknie konsoli.
To są znaczniki <script>. Teraz już powinieneś
wiedzieć, gdzie masz umieścić kod JavaScript.
jesteś tutaj
67
Szybki skok
na głębokie wody
JavaScriptu
Piszemy poważną aplikację JavaScript
Wykorzystamy wszystkie z
dobyte wiadomości dotycz
ące języka JavaScript oraz
znajomość funkcji
console.log
do czegoś praktycznego.
Będziemy potrzebować
kilku zmiennych, instru
kcji
while
oraz instrukcji
if
i
else
. Wystarczy, że dodasz
trochę szyku i zanim się sam zorientujesz, uzyskasz superpoważną aplikację
biznesową. Jednak przed obejrzeniem kodu zastanów się, w jaki sposób napisałbyś
kod wyświetlający klasy
czną piosenkę o „99 butelkach
piwa”.
var word = ”butelek”;
var count = 99;
while (count > 0) {
consoleloJ(count + ”
” + word + ” piwa na Ăcianie”);
console.log(count + ” ” + word + ” piwa,”);
console.log(”-ednÈ
weě i podaj w koïo,”);
count = count - 1;
if (count > 0) {
console.log(count +
” ” + word + ” piwa na Ăcianie.”);
} else {
console.log(”Nie ma juĝ ” + word + ” piwa
na Ăcianie.”);
}
}
WYSIL
SZARE KOMÓRK
I
W tym kodzie jest pewna niewielka usterka.
Aplikacja działa
prawidłowo, jednak generowane wyniki nie są w 10
0%
prawidłowe. Czy jesteś w stanie znal
eźć błąd i go poprawić?
Jazda próbna
Zapisz ten plik jako „index.html”.
Wczytaj plik do przeglądarki. Możesz go przeciągnąć i upuścić
na jej oknie bądź wybrać z menu opcję
Plik/Otwórz
lub
Plik/
Otwórz plik
.
Na samej stronie niczego nie zobaczysz, gdyż wszystkie wyniki są
pokazywane w oknie konsoli przy użyciu funkcji console.log.
A zatem wyświetl okno konsoli i pogratuluj sobie uruchomienia
pierwszej, poważnej aplikacji biznesowej.
1
2
3
4
Get Programowanie w JavaScript Rusz głową! now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
