instrukcja jpwp cw 5, Studia - informatyka, materialy, JAVA

0x08 graphic

Języki programowania wysokiego poziomu (JPWP)

Ćwiczenie 5:

Języki skryptowe: JavaScript, JScript, PHP

Opracowanie:

dr inż. Mariusz Kaczmarek

Katedra Inżynierii Biomedycznej

Gdańsk, 2004

1. WPROWADZENIE. CEL LABORATORIUM.

Wymagania dotyczące uczestników ćwiczenia:

znajomość podstaw programowania strukturalnego (C),
znajomość podstaw programowania obiektowego (C++),
znajomość podstaw programowania w języku JAVA (pierwsze dwa wykłady);
znajomość podstaw HTML i CSS (Zapoznać się z treścią wprowadzenia do HTML, dostępnego w folderze d:\cw4\html\index.html, na stronie WWW zasobów przedmiotu).
umiejętność twórczego myślenia.

Stosowane technologie i narzędzia w ćwiczeniu:

Server PHP i mySQL,
Przeglądarka internetowa obsługująca HTML,
Edytor HTML, np. Pajaczek 2.0,
Konsola systemu operacyjnego (konsola/terminal DOS, WIN).

Materiały wprowadzające i pomocnicze:

Specyfikacja języka HTML i jego dialektów - www.w3c.org, i in.
Materiały i wiedza z wykładów;
Jacek Rumiński, Programowanie uniwersalne, Jacek Rumiński/ACTEN, Gdańsk 2004.

Cel laboratorium:

Celem ćwiczenia jest praktyczne zapoznanie studentów z podstawą wykorzystywania języka znaczników HTML wzbogaconego o elementy języka JavaScript i PHP. Zaprezentowane zostaną zasadnicze elementy specyfikacji języka JavaScript i PHP, w tym: zasady konstrukcji kodu skryptów, budowania formularzy dialogu z użytkownikiem i połączenia dokumentu www z bazą danych. Po realizacji ćwiczenia student powinien zdobyć umiejętność samodzielnego napisania zaawansowanych dokumentów HTML (serwisów www).

2. PRZEBIEG LABORATORIUM

Ramowy program ćwiczenia (łączny czas pracy 2h15min - 3 godziny lekcyjne):

I. Wprowadzenie kierownika ćwiczenia. Zapoznanie się uczestników ze środowiskiem, przegląd dokumentacji (10 min.).

II. Utworzenie dokumentu HTML - zawierającego zagnieżdżony kod języka JavaScript. (35 min).

III. Utworzenie formularza Quizu internetowego (test wyboru) z użyciem JavaScript (45min).

IV. PHP i mySQL. Utworzenie skryptu dodającego do bazy danych mySQL Kontaktów nowych rekordów z danymi osobowymi, umożliwiającego ich modyfikację oraz usuwanie z bazy (45 min).

Wprowadzenie kierownika ćwiczenia. Zapoznanie się uczestników ze środowiskiem, przegląd dokumentacji (10 min.).

Do realizacji ćwiczenie potrzebne będą następujące programy:

Przeglądarka internetowa obsługująca HTML (IE, Netscape,
Edytor HTML, np. Pajączek 2.1,
Konsola systemu operacyjnego (konsola/terminal DOS, WIN).

Utworzenie dokumentu HTML - zawierającego zagnieżdżony kod języka JavaScript. (35 min).

Utworzyć dokument HTML. Dokument powinien charakteryzować się przejrzystością prezentowanych treści. Należy zatem zadbać o odpowiednią oprawę graficzną: kolory tła, czcionek; prezentacje w tabelach, miejsca na umieszczenie fotografii. Język skryptowy JavaScript może służyć do zabawy jak to jest pokazane w poniższym przykładzie:

Przykład 2.1

//kolory.html

<HTML>

<HEAD>

<TITLE>Kolory tła strony</TITLE>

<!--

function newbg(nowy_color)

{

document.bgColor=nowy_color;

}

//-->

</SCRIPT>

</HEAD>

<B>Chcesz mieć nowy kolor, zmien kolor poprzez kliknięcie na przycisk poniżej!</B>

<P>

<FORM>

</FORM>

</BODY>

</HTML>

ale może też służyć rozwiązywaniu bardziej skomplikowanych a użytecznych zadań. JavaScript to język programowania, opracowany specjalnie dla potrzeb pracy w środowisku WWW przez firmę Sun Microsystem i Netscape. Jest narzędziem pozwalającym na trochę bardziej interaktywne tworzenie stron WWW niż można to osiągnąć przy pomocy samego HTML-a. Daje możliwość kontrolowania zachowań internauty oglądającego stronę WWW i reagowania na nie według zadanych warunków.

Tworzenie skryptów można podzielić na kilka części. Tworzenie skryptów uruchamiających się zaraz po wczytaniu strony, niezależnie od jakichkolwiek zdarzeń. Drugi rodzaj, to funkcje wykonywane po wywołaniu ich poprzez zdarzenie (kliknięcie myszką, zmiana zawartości formularza). Można stworzyć również skrypty uruchamiające się po pewnym ustalonym czasie, czyli z opóźnieniem.

Nagłówki skryptów

Każdy skrypt musi być zbudowany wg pewnego schematu:

<!--

Instrukcje

//-->

</script>

Po pierwsze musimy wpisać znacznik, w którym definiujemy język skryptowy (bo JavaScript nie jest jedynym, chociaż może najpopularniejszym). Znaki komentarza pozwalają na pominięcie skryptu tym przeglądarkom, które nie radzą sobie z interpretacją JavaScript.

Funkcje

Prawie analogicznie można zbudować funkcję:

<!--

function Sprawdzam(zmienna)

{

Instrukcje

}

//-->

</script>

W tym przypadku wszystkie instrukcje znajdują się między znakami { } poprzedzonymi wyrazem function i nazwą tej funkcji. Nazwa może być prawie dowolna, za wyjątkiem słów zarezerwowanych tzw. keywords. Ponadto nazwa funkcji i zmiennych musi być niepowtarzalna, jednoznacznie identyfikująca funkcję. Parametr zmienna nie jest konieczny. Jeżeli go nie ma, to nawiasy są puste. Takich zmiennych może być więcej, wtedy należy je rozdzielić przecinkiem. W takim przypadku bardzo ważna jest kolejność zmiennych, z jaką została wywołana funkcja. Może ona także wywołać samą siebie, co nazywane jest rekurencją.

Bardzo ważna jest wielkość liter zmiennych, funkcji itd. Zmienna zadeklarowana jako policz, a wywołana jako Policz spowoduje błąd lub odwołanie do niechcianego obiektu.

Wszystkie instrukcje muszą być rozdzielone średnikami. Czasem przeglądarka wykona skrypt pomimo ich braku, ale dla pewności i poprawności, warto stawiać średniki na końcu każdej instrukcji.

Komentarze

Podobnie jak HTML, JavaScript posiada możliwość wstawiania komentarza, niewidocznego dla przeglądarki i internauty. Pierwszy z nich dotyczy komentarzy zawartych tylko w jednej linijce:

function Sprawdzam(zmienna) //Ta funkcja sprawdzi jakieś dane

{

Instrukcje

}

W powyższym przypadku już żadna instrukcja nie może pojawić się za komentarzem. Jako jego koniec traktowany jest koniec linijki. Drugi sposób, pozwala wprowadzić dłuższe notatki:

function Sprawdzam(zmienna) /*Ta funkcja sprawdzi dane

potrzebne do formularza*/

{

Instrukcje

}

Podobnie jak w HTML-u blok komentarza jest otwierany i zamykany. Może być umieszczany w wielu linijkach, co daje możliwość wprowadzania bardziej rozbudowanych treści.

Zdarzenia

Zdarzenia są wywoływane, kiedy oglądający stronę przesunie myszkę nad obiekt formularza, rysunek albo linkę, kliknie go, zdejmie focus itp. Są one definiowane wraz z elementem, do którego dane zdarzenie się odnosi, oto przykład:

<input type="button" value="Przycisk"

onclick="Sprawdzam(44)"/>

W momencie kliknięcia na taki przycisk jest wywoływane zdarzenie onClick. Wywołuje ono funkcję Sprawdzam z argumentem równym 44.

<a href="javascript:funkcja()">Odsyłacz 1</a>

<a href="javascript:instrukcja">Odsyłacz 2</a>

Powyższe przykłady dają możliwość odwołania się do instrukcji języka JavaScript bezpośrednio w adresie linki. W obu przypadkach konieczne jest wpisanie javascript:, by dany adres był traktowany jako instrukcja. W przeciwnym razie wszystko między cudzysłowem będzie traktowane jako klasyczny odsyłacz.

Przydatne uwagi

Jeśli chodzi o przeglądarki, to wszystko sprowadza się do dwóch wielkich konkurentów: Microsoftu oraz Netscape'a. Niedawno na scenie pojawiły się Opera i Mozilla.

Co do obsługi JavaScript przez te przeglądarki, to każda pracuje na swoje konto, co sprawia liczne problemy. Przede wszystkim język programowania skryptów proponowany przez Netscape'a JavaScript, nie jest bratem bliźniakiem JScriptu Microsoftu. Problem polega na tym, że istnieją instrukcje, które są obsługiwane tylko przez Navigatora, inne tylko przez Explorera. Jedyną (niestety bardzo marną) tego zaletą jest to, że można, w sposób alternatywny, określić przy pomocy której przeglądarki została otworzona dana strona.

Ponieważ język stale się rozwija, mamy już jego kolejne wersje, pomocne m.in. przy tworzeniu dynamicznych stron DHTML. Efektem tego jest zróżnicowanie w programowaniu skryptowym przeglądarek. Nie dość, że należy sprawdzić, czy dany skrypt działa w obydwu konkurencyjnych przeglądarkach, to nie wiadomo, czy starsze wersje go odczytają.

Debugger wbudowany w niektóre przeglądarki pomoże poradzić sobie z problemem, jaki napotykają twórcy stron WWW. Jest to narzędzie, które pomaga znaleźć błędy w skryptach. Pozwala śledzić kolejne wykonywane instrukcje i odszukać tę felerną linijkę, która stanowi problem i nieprzewidziane rezultaty.

Jest jeszcze jedna różnica pomiędzy przeglądarkami. Dość istotna dla tych, którzy często korzystają ze źródła strony. Otóż polega ona na tym, że Explorer pokaże prawdziwe źródło strony, czyli identyczne, jak to, które napisał twórca strony. Navigator czasami pokaże inną treść źródła. Jeżeli zadeklarujemy formatowanie tekstu w JavaScript, to przeglądarka Netscape'a pokaże ten tekst za pomocą znaczników HTML-a. Jeśli dynamicznie wygenerujemy 1000 obrazków przy pomocy kilku instrukcji JS, to może się okazać, że Navigator w źródle strony pokaże zamiast kilku wspomnianych instrukcji 1000 tagów.

JavaScript może wchodzić w konflikt z serwerami reklam. Jeśli umieszczamy na stronie skrypt, który wykonuje się przy ładowaniu strony (chociaż nie tylko), to możemy mieć pewnie nieprzyjemności. Otóż wiele adserwerów wyświetla banery reklamowe wspomagane instrukcjami JavaScript. Jeśli obsługa baneru adservera zmieni wartość zmiennej, to może się okazać, że skrypt nie będzie działał, jednak jest to bardzo skrajny przypadek. Nie mniej jednak każdy, kto umieszcza na swoich stronach reklamy niestety nie może mieć 100% pewności, że jego skrypty będą działały, jak należy. Jedyne, co można zrobić, aby ustrzec się takich problemów przynajmniej w pewnym stopniu to staranne wykonanie skryptu.

JavaScript nie potrzebuje żadnego dodatkowego kompilatora, co sprawia, że języka bardzo łatwo się używa. Można go pisać w każdym edytorze tekstu, podobnie, jak HTML. Warto jednak zaopatrzyć się w kolorowanie składni, co poprawia wizualnie skrypt i niewątpliwie jest pomocne przy edytowaniu dużych skryptów.

Przykład 2.2

//Kalkulator.html

<HTML>

<HEAD>

<SCRIPT language="JavaScript">

<!--

function oblicz_pierwiastek()

{

var liczba=window.prompt("Podaj liczbę (dodatnią) lub zero:","");

var pierwiastek=Math.sqrt(liczba);

if (liczba<0)

{

window.alert("Hej! Miałeś podać liczbę dodatnią! Spróbuj ponownie!");

}

else

{

window.alert("Pierwiastek kwadratowy z liczby "+liczba+" wynosi "+pierwiastek);

}

//-->

</SCRIPT>

</HEAD>

<BODY>

<FORM>

<INPUT type="button" value="Oblicz pierwiastek" onClick="oblicz_pierwiastek();">

</FORM>

</BODY>

</HTML>

Powyższy kod ukazuje elementy języka JavaScript. Jak widać składnia przypomina inne języki programowania.

Rozbudować podany kod Kalkulatora o możliwość innych obliczeń matematycznych (obiekt Math; metody: abs(), acos(), asin(), atan(); cos(); exp(), log(), sin(); sqrt(), tan(), max(), min(), pow(), random(),).

Przykład 2.3. Użycie funkcji czasu i daty

//Czasomierz.html

<HTML>

<HEAD>

<SCRIPT language="JavaScript">

<!--

function zegar()

{

var teraz=new Date();

var godzina=teraz.getHours();

var minuta=teraz.getMinutes();

var sekunda=teraz.getSeconds();

var d_tygodnia=teraz.getDay();

var miesiac=teraz.getMonth();

var chwila=teraz.getDate();

var rok=teraz.getYear();

// Zdefiniujmy dni tygodnia

var dzionek= new Array(7)

dzionek[0]="Niedziela";

dzionek[1]="Poniedziałek";

dzionek[2]="Wtorek";

dzionek[3]="Środa";

dzionek[4]="Czwartek";

dzionek[5]="Piątek";

dzionek[6]="Sobota";

// Ustawmy miesi±c na zrozumiały

miesiac+=1;

// Korekta roku dla starszych przegl±darek

if (rok<2000)

rok+=1900;

// dodajemy potrzebne zera wiod±ce do godzin, minut i sekund

if (godzina<10)

godzina="0"+godzina;

if (minuta<10)

minuta="0"+minuta;

if (sekunda<10)

sekunda="0"+sekunda;

// zapisujemy godzinę do paska statusu

window.status=godzina+":"+minuta+":"+sekunda;

}

setInterval("zegar()",1000);

//-->

</SCRIPT>

</HEAD>

<BODY>

<H1>Data:</H1>

<SCRIPT language="JavaScript">

<!--

document.write(dzionek[d_tygodnia]+", "+chwila+"/"+miesiac+"/"+rok);

//-->

</SCRIPT>

</BODY>

</HTML>

III. Utworzenie formularza Quizu internetowego (test wyboru) z użyciem JavaScript (45min).

Wykorzystując operacje na tablicach (Array() ) napisać krypt wybierający losowo 5 pytań z większego zestawu dostępnych pytań. Wśród trzech propozycji odpowiedzi na pytanie użytkownik ma wskazać tę prawdziwą. Sumujemy liczbę prawidłowych odpowiedzi mierząc jednocześnie czas zawodnika. Można posłużyć się poniższym przykładem.

Przykład 3.1. Listy studentów i losowanie do odpowiedzi

//Pytanko.html

<HTML>

<HEAD>

<!--

var s_list=new Array()

s_list[0]="Thomas";

s_list[1]="Roger";

s_list[2]="Amber";

s_list[3]="Jennifer";

s_list[4]="Pat";

s_list[5]="Kelly";

s_list[6]="Jerry";

//-->

</SCRIPT>

</HEAD>

<BODY>

<H2>Imiona studentów:</H2>

<!--

for (licznik=0; licznik<s_list.length; licznik++)

{

document.write(s_list[licznik]+"<BR>");

}

//-->

</SCRIPT>

<H2>A odpowiadał będzie:</H2>

<!--

var liczba_losowa=Math.floor(Math.random()*10);

document.write(s_list[liczba_losowa]);

//-->

</SCRIPT>

</BODY>

</HTML>

IV. PHP i mySQL.

Utworzenie skryptu dodającego do bazy danych mySQL Kontaktów nowych rekordów z danymi osobowymi, umożliwiającego ich modyfikację oraz usuwanie z bazy (30 min).

Utworzyć dokument HTML zawierający elementy interakcji z użytkownikiem Internetu (przeglądarki www). Wykorzystać do pomocy poniższy fragment kodu strony HTML oraz skryptu PHP.

//Dodaj.html

<html>

<head>

<title>Dodawanie danych</title>

</head>

<body>

<h2>Dodawanie danych do kontaktów</h2>

Imię:<br>

Nazwisko:<br>

Ulica:<br>

Miasto:<br>

Wiek:<br>

Telefon:<br>

Data dodania <b>rrrr-mm-dd</b>:<br>

</form>

</body>

</html>

//dodaj_dane.php

$baza = "kontakt";

$tabela = "moj_kontakt";

$connection = mysql_connect("localhost", "mapet", "map008");

$wybierz = mysql_select_db($baza, $connection);

$wstaw = "INSERT INTO $tabela

(imie, nazwisko, ul, miasto, wiek, tel, data)

VALUES

(\"$imie\", \"$nazwisko\", \"$ul\", \"$miasto\", \"$wiek\", \"$tel\", \"$data\")

$rezultat = mysql_query($wstaw, $connection);

if ($rezultat) {

echo "<h2>Do tabeli zostały dodane następujące dane:</h2><br>

<b>Nazwisko:</b> <i>$nazwisko</i><br>

<b>Ulica:</b> <i>$ul</i><br>

<b>Miasto:</b> <i>$miasto</i><br>

<b>Telefon:</b> <i>$tel</i><br>

<b>Data dodania:</b> <i>$data</i><br>";

}

else {

echo "<h2>Do tabeli nie dodano danych</h2>";

}

3. ZASADY OCENIANIA

Podstawą oceny jest opracowany w czasie ćwiczenia zbiór plików HTML, XHTML i CSS. Zbiór ten należy dostarczyć prowadzącemu w formie przez niego wskazanej.

4. UWAGI DODATKOWE

Instrukcja dostępna jest w wersji elektronicznej. Wszelkich informacji udziela prowadzący ćwiczenie.

BAZY DANYCH Instrukcja laboratoryjna, cz. II

Opis ćwiczenia laboratoryjnego - JPWP

Mariusz Kaczmarek, Katedra Inżynierii Biomedycznej, WETI, PG, 2004

0x01 graphic

Politechnika Gdańska

Wydział Elektroniki, Telekomunikacji i Informatyki