ICT MPDU

Transkrypt

ICT MPDU

ICT
MPDU
wykład 1
Kompendium tematyki przedmiotu
Technologie teleinformatyczne wspomagające przesył informacji i
komunikację
Wykorzystanie protokołu http (HTML+JavaScript+PHP+MySQL)
Sharepoint w chmurze Microsoft
Sharepoint - rozwiązanie serwerowe, adaptacja w biznesie
Prace w zespole – komunikacja, przepływy pracy
Informacja+komunikacja
www (World Wide Web)
Mosaic – pierwsza przeglądarka 1993
• Internet Explorer (ver.11)
• Chrome(Google)-Chromium
• Firefox(Mozilla)
• Opera
• Safari
HTML
HTML (ang. HyperText Markup Language, pol. hipertekstowy język
znaczników) – język wykorzystywany do tworzenia stron
internetowych
HTML – kod źródłowy języka, można bezpośrednio pisać
korzystając z edytora tekstu nieformatowanego (ASCII) np.
Notatnik – zapis w pliku tekstowym ASCII, z rozszerzeniem htm
lub html
HTML
• zdefiniowanie sposobu strukturalnej i wizualnej prezentacji
dokumentu w przeglądarce internetowej,
• osadzanie ciągów instrukcji języków skryptowych, wpływających
na zachowanie przeglądarek lub innych parserów HTML
• przeglądarka dla przesyłu dokumentów HTML korzysta przede
wszystkim z protokołu HTTP (hypertext transfer protocol) –
ale także bezpieczniejszego (szyfrowanego) protokołu HTTPS.
Dynamiczny HTML lub DHTML (ang. Dynamic
HyperText Markup Language, dynamiczny hipertekstowy
język znaczników)
• techniki służące do dynamicznej zmiany treści,
wyglądu, zachowania dokumentu HTML w
przeglądarce
• umożliwiające interakcję strony WWW z
użytkownikiem i stosowanie efektów wizualnych
Wyposażenie dokumentów hipertekstowych w:
- skrypty wykonywane przez przeglądarkę - client side - (Javascript)
- skrypty wykonywane na serwerze www – server side (PHP, perl,
asp, aplety Javy i in.)
- obsługę baz danych.
Jak widać elementy mają hierarchię, mogą się
zagnieżdżać ("rodzice" i "dzieci").
innerHTML znacznika P
PODSTAWOWA STRUKTURA dokumentu HTML
pewne
parametry
konfiguracji
treść
strony
<HTML>
<HEAD>
<TITLE> Tytuł w nagłówku okna </TITLE>
</HEAD>
<BODY>
Tu są elementy pojawiające się na stronie
</BODY>
</HTML>
Plik tekstowy o nazwie z rozszerzeniem htm lub html, często
index.html
Znaczniki (tagi) – postać ogólna
<ZNACZNIK atrybuty>
zawartość
</ZNACZNIK>
atrybuty są opcjonalne (niekonieczne)
Są też znaczniki bez zawartości:
BR IMG INPUT HR i inne
Zamiast pisać <BR></BR> piszemy <BR />
Przykład - znacznik hiperłącza
<A href="jakiś_adres"> Onet </A>
nazwa
atrybutu
otwarcie
znacznika –
identyfikator typu
znacznika – tutaj A
wartość
atrybutu
zawartość
Może być kilka atrybutów
ważny atrybut:
style
zamknięcie
znacznika
Znaczniki pomocne w interakcji z użytkownikiem
Formularz
<FORM>
innerHTML
</FORM>
Posiada m.in. ważne atrybuty: method i action,
wykorzystywane do wykonania programów
umieszczonych na serwerze
I często używane wewnętrzne znaczniki formularza:
Pole edycji jednowierszowej
<INPUT type="text"/>
Przyciski
<INPUT type="submit" value="OK"/>
<INPUT type="reset" value="Reset"/>
<BUTTON/>
Posiadają ważny atrybut: onclick
Pole wyboru
<INPUT type="CHECKBOX" name="ok" VALUE="B" /> OK
Pole edycji wielowierszowej
<TEXTAREA name="TEKST" rows="5" cols="20">
MIEJSCE NA WIĘKSZY TEKST
</TEXTAREA>
Wiele tutoriali w sieci, np.:
https://www.signs.pl/html/
Dla obsługi danych wpisanych do formularzy
(np. ich wysłanie na serwer w celu zapisu czy
też analizy) konieczne jest zastosowanie
specjalnych metod
Przykład dokumentu HTML
<HTML>
<HEAD>
HEAD
<TITLE> Moja strona </TITLE>
</HEAD>
<BODY style="background-color:gray;margin-left:3cm">
<H1> To jest moja strona </H1>
<HR style="width:100%;height:3px;background-color:black"/>
<TABLE style="border:1px solid red">
<TR> <TD> AA </TD> <TD> AB </TD></TR>
<TR> <TD> BA </TD> <TD> BB </TD> </TR>
<TR> <TD> CA </TD> <TD> CB </TD> </TR>
</TABLE>
<UL>
<LI> <A href='http://www.onet.pl">Onet</A></LI>
<LI> <A href='http://www.google.pl">GOOGLE</A></LI>
<LI> <A href='http://www.interia.pl">Interia</A></LI>
</UL>
</BODY>
</HTML>
zastosowano tu atrybut style
tabela
lista
hiperłączy
BODY
CSS – arkusze stylów
opiera się na zasadzie określania cech elementów w
dokumencie HTML - dzięki atrybutowi style
<ZNACZNIK
style="cecha:wartość;inna_cecha:wartość"> ...
Styl elementu może posiadać wiele cech, np.:
<P style="font-size:20px;color:blue"> ...
<TABLE style=" background-color:#ff0000;
border:2px solid red;"> ... itd…
cechy stylu oddzielamy średnikami
Bez określonych jawnie cech stylu elementy posiadają
pewne cechy domyślne (arkusz stylów przeglądarki)
Przykładowo:
<P> To jest tekst akapitu </P>
Taki tekst będzie miał czarną czcionkę, wielkości 16 pikseli, krój
Times New Roman, bez marginesów, obramowań, tła itp.
<P style="color:red;font-size:26px">
Akapit tekstowy o cechach określonych atrybutem style
</P>
Tu ustaliliśmy już kolor czcionki i jej rozmiar
Cechy stylu dotyczą:
• wielkości elementu (szerokość, wysokość)
• wyglądu elementu:
koloru, wielkości i kroju tekstu
typu, koloru i grubości ramek
koloru (lub grafiki) dla tła elementu
• położenia elementu - marginesy zewnętrzne,
wyrównania
• położenia elementów wewnętrznych do danego
elementu, np. ich oddalenia (padding)
Przykładowe cechy stylów
Opis
Styl
Przykładowa wartość
background-color
kolor tła
#ff0000 albo rgb(255,0,0)
blue
background-image
adres pliku tła graficznego
url('rys1.gif ')
border-color
kolor obramowania
red
border-style
styl i wygląd obramowania
dotted
dashed
solid
border
cała ramka (makro-cecha)
2px solid yellow
border-left
lewa krawędź ramki
j.w.
border-right
prawa krawędź ramki
j.w.
border-top
górna krawędź ramki
j.w.
border-bottom
dolna krawędź ramki
j.w.
color
kolor tekstu
yellow
#669933
font-family
rodzaj oraz rodzina czcionki
Arial sans-serif
font-size
wielkość czcionki
14px
2cm
font-style
styl czcionki
italic
font-weight
grubość (waga) czcionki
bold lighter
height
wysokość elementu
10px
3mm
width
szerokość elementu
odległość od lewej (górnej)
krawędzi
100px
10cm
3mm
typ określenia współrzędnych
elementu
fixed relative
left
top
position
margin
odległości od zewnętrznego
elementu (w kolejności górny,
prawy, dolny, lewy)
3px 3px 10px 20px
margin-top
margin-bottom
margin-left
margin-right
każdy margines osobno
5cm
text-align
wyrównanie poziome tekstu
left
text-decoration
wygląd tekstu
underline
vertical-align
wyrównanie w pionie
top bottom
padding
oddalenie wewnętrznego
elementu
center
justify
UWAGA
Style mogą być dziedziczone przez elementy wewnętrzne
Przykładowo:
<HTML>
<HEAD>
<TITLE> Moja strona testowa </TITLE>
</HEAD>
<BODY style="color:red; font-size:26px;">
<P> Akapit tekstowy </P>
<P> Akapit tekstowy2 </P>
</BODY>
</HTML>
obydwa akapity
dziedziczą od BODY
Przykład wielu cech stylu dla akapitu
<P style="color:red;
font-size:26px;
font-family:Arial;
border:1px solid green;
background-color:yellow;
width:10cm;
margin-left:3cm;
text-align:center ">
A to inny akapit</P>
3 cm
Javascript
Przypomnienie zasad
Może być osadzany w innych programach, na przykład w
przeglądarce internetowej, aby, mając dostęp do obiektów
otoczenia (np. modelu obiektowego przeglądarki
internetowej - DOM), można sprawować nad tym otoczeniem
kontrolę.
Javascript jest łatwy w nauce i pozwala na „zdynamizowanie”
stron internetowych, a także zarządzanie własnymi,
utworzonymi obiektami.
Przeglądarki mogą pytać o zezwolenie na wykonanie skryptu.
Wstawienie skryptu do dokumentu HTML
Skrypty JavaScript są zagnieżdżane w dokumentach HTML. Skrypt
JavaScript umieszczane są między znacznikami <SCRIPT> i
</SCRIPT>.
<SCRIPT LANGUAGE="JavaScript">
treść skryptu
</SCRIPT>
<HTML><HEAD></HEAD>
<BODY>
<P> To jest tekst 1</P>
treść skryptu 1
</SCRIPT>
<P> To jest tekst 2</P>
treść skryptu 2
</SCRIPT>
</BODY></HTML>
Może istnieć wiele skryptów naprzemiennie z
pozostałym kodem HTML
Aby tworzyć działające skrypty JavaScript
wymagane są:
- jakaś metoda wprowadzania i
przechowania danych (liczb, tekstów)
- jakieś instrukcje, które umożliwią
obliczenia wyników
- jakieś metody pokazania wyniku
Wykorzystanie skryptu Javascript w dokumencie HTML
<HTML><HEAD></HEAD>
<BODY>
// obiekt document i jego metoda write - wypisanie tekstu
document.write ("To jest zwykły tekst");
// wysyłamy też znacznik HTML
document.write ("<BR />");
//nadajemy wartość zmiennej
x=5;
// ... i wyświetlamy jej wartość
document.write("Wartość zmiennej <I>x</I> : "+x);
document.write ("<BR>To jest liczba PI:"+Math.PI);
</SCRIPT>
<P> a to już akapit poza skryptem</P>
</BODY></HTML>
właściwość
obiektu
Identyfikatory
Są to nazwy elementów (zmiennych, obiektów, funkcji)
Zmienne służą do przechowania wartości określonego
typu
Jednym z podstawowych sposobów nadania wartości
zmiennej jest instrukcja przypisania (nadania wartości)
Ciąg liter, cyfr, znaków podkreślenia (nie wolno spacji!)
Musi się zaczynać od litery
Ważne duże i małe litery ! (w odróżnieniu od innych języków)
Przykłady identyfikatorów dla zmiennych:
x
alfa
Alfa
to dwie różne
zmienne
mojaZmienna
styl
"wielbłądzi"
B11
c_33
Operatory
Arytmetyczne: +
-
*
/
%(reszta z dzielenia)
Przypisania:
=
+=
–=
*=
/=
++
-%=
x+=5 odpowiada x=x+5,
x–=5 odpowiada x=x–5,
x*=5 odpowiada x=x*5,
x/=5 odpowiada x=x/5,
inkrementacja – zwiększenie o 1 (x++ odpowiada x=x+1)
dekrementacja – zmniejszenie o 1 (x-- odpowiada x=x-1)
reszta z dzielenia (x%=5 odpowiada x=x%5)
operator + służy też do konkatenacji (łączenia tekstów)
"Mateusz " + 'Kowalski'
para " lub para '
Przykładowo:
x = 7; //początkowo x ma wartość 7
x++; //zwiększamy o 1
x += 4; //dodajemy 4
(lub:
x=x+4 )
x %= 10; //reszta z dzielenia z przez 10, a więc ….. 2
//tu trzeba by wypisać wartość x na ekranie, zaraz się nauczymy
</SCRIPT>
Operatory porównania
wyrażenie operator wyrażenie
==
!=(nierówne)
<=
<
>
>=
Przykładowo:
x==5
x>=3
a+b> 3*y
jest to pytanie: czy jest spełnione?
odpowiedź: tak lub nie (TRUE/FALSE)
Porównania mogą być przypisane do zmiennej:
z34 = 5<=6 (zmienna z34 będzie miała wartość true)
Używane też w innych instrukcjach (np. warunkowej) – o tym za
chwilę
Instrukcje – wykonanie akcji!
Instrukcje języka oddzielamy średnikami (jeśli
zapisujemy w tym samym wierszu).
Czasem blok kilku instrukcji otaczamy klamrami { }
zazwyczaj we wnętrzu instrukcji warunkowych i
iteracyjnych (np. if, for, while) – o nich za chwilę
instrukcja1;
{
instrukcja2;
traktowany w
całości jako blok
instrukcja3;
instrukcji
instrukcja4;
}
</SCRIPT>
Typy instrukcji
- przypisania (nadania wartości);
- warunkowe (if, switch)
- pętle (for, while, do while)
- wykonania funkcji (metody obiektu)
Przypomnieć sobie obiekt Math – jego metody umożliwiają
wykorzystanie funkcji matematycznych
Instrukcja przypisania
zmienna operator_przypisania [wyrażenie];
Po lewej stronie operatora tylko nazwa zmiennej!!! inicjowanej (pierwszy raz
definiowanej) lub istniejącej i przedefiniowywanej.
Po prawej stronie operatora piszemy wyrażenie (bardzo podobne jak w
Excelu), zawierające liczby, operatory, nawiasy okrągłe, funkcje – metody
obiektów, oraz zmienne o ZNANYCH WARTOŚCIACH
Wyrażenie jest obliczane i jego wartość przechowana w zmiennej
Wyrażenie jest opcjonalne (pomijamy w przypadku operatorów ++ i --)
Przykłady:
x=5;
alfa= 3*x;
b15=(3-x)+2.7/alfa;
b15++;
x+=4;
stałe - liczby dziesiętne z
KROPKĄ!!!
Instrukcja wypisania na ekranie
document.write (element);
document to wbudowany obiekt w JavaScript, a write (pisz) to jedna
z jego metod
identyfikator obiektu i identyfikator jego metody oddzielamy kropką
Przykład
document.write ("To jest zwykły tekst<BR />");
x=5; //przypisujemy wartość zmiennej
// wyświetlamy jej wartość
document.write("Wartość zmiennej <I>x</I> : "+x+"<BR />");
napis="Mateusz " + 'Kowalski';
document.write(napis);
</SCRIPT>
Można wysyłać do przeglądarki znaczniki HTML(dla pozycjonowania,
formatowania itp.)
Inna metoda wyprowadzenia danych wyświetlanie w dodatkowym okienku
alert
Metoda dla obiektu window, tworząca okienko
dialogowe z napisem informacyjnym lub wartością
numeryczną.
<SCRIPT language="JavaScript">
raz=2;
alert("Witaj!");
alert("Witaj "+raz+"-gi raz");
</SCRIPT>
dokładniej window.alert , ale domyślny obiekt to window
Debugging – detekcja błędów kodu JavaScript
Przykładowo:
…
document.write("log(5)<br />");
document.write(math.log(5)/Math.log(10)+"<
br />");
…
W IExplorer – Menu Narzędzia (narzędzia deweloperskie - F12) –
w oknie konsoli klikamy menu Skrypt
Po odświeżeniu strony w konsoli pojawi się komunikat:
SCRIPT5009: Brak definicji „math”
Definicja i wykorzystanie własnych funkcji
Tworzenie definicji funkcji to zapis pewnego algorytmu działań
na danych ogólnych (argumentach formalnych). Oczywiście
istnieje możliwość wielokrotnego wykorzystania funkcji dla
różnych zestawów danych szczegółowych (argumentach
aktualnych).
Funkcje są definiowane przez określenie ich nazwy, argumentów i
sposobu działania.
Funkcje definiowane przez użytkownika
umieszczamy we wnętrzu znacznika SCRIPT:
</SCRIPT>
także
definicje funkcji
w sekcji HEAD dokumentu HTML.
Pozwala to na załadowanie ich na samym początku, aby dowolny
skrypt wykorzystujący funkcję w kodzie JavaScript na stronie mógł
od razu być wykonywany przez przeglądarkę.
Schematy definiowania funkcji
function nazwa (lista argumentów formalnych)
{
instrukcje;
}
function nazwa (lista argumentów formalnych)
{
instrukcje;
return zmienna; //zwrot rezultatu
}
Argumenty formalne w definicji funkcji to lista nazw
zmiennych (oddzielanych przecinkami) potrzebnych do
wykonania instrukcji wewnątrz definicji funkcji
Jeśli funkcja ma zwracać jakiś rezultat wykorzystujemy
frazę:
return zmienna
Wykonanie funkcji
•
jeśli funkcja nic nie zwraca (brak return), wykonanie funkcji jest
najczęściej osobną instrukcją, przykładowo:
nazwa_funkcji (lista argumentów aktualnych)
•
jeśli funkcja zwraca rezultat (występuje return), używamy funkcję w
kontekście rezultatu (np. możemy rezultat wypisać na stronie lub
przypisać do zmiennej), przykładowo:
document.write (nazwa_funkcji (lista argumentów
aktualnych))
x = nazwa_funkcji (lista argumentów aktualnych)
Argumenty aktualne wykonania to: stałe, zmienne o
znanych wartościach lub obliczalne wyrażenia, oddzielane
przecinkami.
Ich liczba i kolejność (a często także typ) powinna być taka
sama jak argumentów formalnych w definicji funkcji.
Jak to działa…
<HTML><HEAD>
function pokaz(a, b){
alert (a*b);
}
</SCRIPT>
Uwaga: brak
return
</HEAD><BODY>
//dwukrotne wykonanie funkcji
pokaz(3, 5) ;
osobne
pokaz(9 , 6);
</SCRIPT>
</BODY></HTML>
instrukcje
Inny przykład
Argumenty formalne
<HTML><HEAD>
function srednia(a, b){
x=(a+b)/2;
return x;
funkcja zwraca obliczone x
}
</SCRIPT>
</HEAD><BODY>
document.write(srednia(5, 9) ,"<BR>");
y= 3.8
rezultaty wykonania funkcji
document.write(srednia(3.6, y));
wypisujemy na stronie
</SCRIPT>
Argumenty aktualne
</BODY></HTML>
Przykład użytkowy
<HTML><HEAD>
function poleKola(R)
{
pole=Math.PI*R*R;
return pole;
}
</SCRIPT>
</HEAD><BODY>
document.write("Obliczenie pól dwóch okręgów<BR/>")
document.write("r=5.9 pole=",poleKola (5.9) ,"<BR>");
document.write("r=3.6 pole=",poleKola (3.6));
</SCRIPT>
</BODY></HTML>
To co funkcja ma wykonać po wywołaniu, jest zdefiniowane
w instrukcjach między nawiasami { }.
Po słowie kluczowym return określamy co ma zwrócić
wykonanie funkcji (rezultat wykonania funkcji - w
przykładzie obliczoną wartość x), stąd w dalszej części
skryptu zwróconą wartość funkcji wyświetlamy z
wykorzystaniem document.write
W ramach skryptu w bloku HEAD można oczywiście
zdefiniować wiele funkcji, muszą mieć unikalne nazwy.
Funkcje mogą mieć wiele argumentów (różnych typów).
Funkcja z reguły zwraca jedną,
elementarną wartość, chociaż może nic
nie zwracać
Możliwy jest zwrot wielu wartości, trzeba
wykorzystać tablicę.
<HTML><HEAD>
function tab2(a,b){
var x=new Array( )
x[1]=(a+b)/2;
x[2]=(a-b)/2;
return x;
}
</SCRIPT>
</HEAD><BODY>
//teraz wykonanie funkcji
definicja
działania
funkcji
a=tab2(10, 8); //wykonanie funkcji, wynik przechowaj w zmiennej a
document.write(a[1],"<BR>");
document.write(a[2]);
</SCRIPT>
</BODY></HTML>
Interakcyjne wykonywanie funkcji
Można wykonać funkcję w reakcji na zdarzenie, np. umieszczając
ją w atrybucie onclick dowolnego elementu (znacznika):
<HTML><HEAD>
function nacisnij(x )
alert(x);
</SCRIPT>
przekazanie tekstu do
funkcji
</HEAD><BODY>
<INPUT type="submit" value="OK" onclick="nacisnij( 'Hello');">
</BODY> </HTML>
To samo, lecz z interakcyjnym wprowadzaniem danych
dla funkcji
<HTML><HEAD>
Należy zastosować
atrybut id dla
function nacisnij(a)
istotnych
{ alert(a*a); }
znaczników
</SCRIPT>
</HEAD><BODY>
<FORM>
<INPUT type="text" id="in1" />
<INPUT type="submit" value="OK" onclick="nacisnij(in1.value);" />
</FORM>
obiekt INPUT o identyfikatorze in1 ma atrybut
</BODY> </HTML>
value, która zawiera wpisaną w pole
tekstowe wartość
Istnieje możliwość zarządzania elementami strony przy pomocy
JavaScript
Prosty przykład:
<HTML><HEAD>
function nowy()
{
pole2.value=pole1.value; //przepisanie treści
pole1.value=""; //skasowanie treści
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="text" id="pole1" />
<INPUT type="text" id="pole2" />
<INPUT type="submit" value="Przepisz" onclick="nowy()" />
</BODY>
</HTML>

ICT MPDU

Transkrypt

Podobne dokumenty

Programowanie w językach skryptowych Java Script

JavaScript - sosw.poznan.pl

01 Osadzanie skryptow PHP w dokumentach HTML

JAVAScript w dokumentach HTML (2)

JavaScript- Podstawy programowania na potrzeby

Instrukcja pierwsza wraz z ćwiczeniami

Strona internetowa w systemach unix