Laboratorium Technologie Internetowe Lab05

Transkrypt

Laboratorium „Technologie internetowe”
Lab_TI_Lab05_15.11.2017
Laboratorium Technologie Internetowe Lab05 - JavaScript
Cel zajęć:
Zapoznanie z funkcjonalnością języka JavaScript.
Tematyka zajęć:
A.
B.
C.
D.
E.
F.
G.
H.
Umieszczanie skryptów JavaScript w języku HTML.
Funkcje komunikatorów – alert(), prompt() i confirm().
Obsługa zdarzeń w języku HTML – onClick(), onLoad, onMouseOver(), onMouseOut()
Przetwarzanie formularzy w JavaScript
Prosta aplikacja - kalkulator
Tworzenie nowej treści na stronie WWW – innerHTML()
Modyfikacja styli z poziomu języka JavaScript
Ciasteczka – obsługa w JavaScript
A. Skrypty JavaScript w kodzie strony HTML
1. Skrypt JavaScript wewnątrz elementu <body> dokumentu HTML – lab3_1.html
2. Skrypt JavaScript wewnątrz elementu <head> dokumentu HTML – lab3_2.html
3. Skrypt JavaScript w pliku zewnętrznym – lab3_3.html i lab3_3.js
lab3_1.html
<!doctype html>
<html>
<head>
<meta charset="iso-8859-2">
<title>JavaScript - skrypt 1</title>
</head>
<body>
<h3>Pierwszy skrypt w języku JavaScript</h3>
<script type="text/javascript">
document.write("<hr />");
document.write("<p>Skrypt wewnątrz elementu body dokumentu HTML</p>");
document.write("<hr/>");
</script
</body>
</html>
Lab3_2.html
<html>
<head>
<meta charset="iso-8859-2" />
<!-Wersja 0.31 (20.11.2014)
Antoni Dydejczyk @ 2015, Strona 1 z 15
Lab_TI_Lab05_15.11.2017
document.write("<p>Skrypt wewnątrz elementu head dokumentu HTML</p>");
-->
</script>
</head>
<body>
</body>
</html>
lab3_3.html
<!doctype html>
<html>
<head>
<script src="lab3_3.js" >
</script>
</head>
<body>
</body>
</html>
lab3_3.js
// JavaScript Document
document.write("<p>Skrypt wewnątrz pliku dodatkowego pliku.</p>");
B. Funkcje komunikatorów
1. Sprawdzamy funkcjonalność funkcji alert(), confirm() i prompt() – skrypt lab3_4.html
2. Modyfikujemy zawartość pliku z punktu poprzedniego dodając funkcjonalność wydruku
odpowiedzi otrzymanych z funkcji confirm() i prompt() – wymagany kod do modyfikacji w
skrypcie lab3_4a.html
Lab3_4.html
Wersja 0.31 (20.11.2014)
Lab_TI_Lab05_15.11.2017
<!doctype html>
<html>
<head>
<!-alert("Obsługa komunikatu Alert");
confirm("Czy potwierdzasz wybór?");
prompt("Podaj liczbę studentów.");
-->
</script>
</head>
<body>
lab3_4a.html
<!-alert("Obsługa komunikatu Alert");
var k1 = confirm("Czy potwierdzasz wybór?");
var k2 = prompt("Podaj liczbę studentów.");
document.write("Odpowiedź na 'confirm' " + k1 + "<br />");
document.write("Odpowiedź na 'prompt' " + k2 + "<br/>");
-->
</script>
C. Obsługa zdarzeń w kodzie HTML (myszka, klawiatura, otwarcie i zamknięie strony)
1. Obsługa zdarzenia onClick() wywołanego przez myszkę – skrypt lab3_5a.html
2. Obsługa zdarzenia onMouseOver() i onMouseOut() – skrypt lab3_5b.html
Lab3_5a.html
<!doctype html>
<html>
<head>
function inform(){
alert("Informacja pojawia się po wcinięciu klawisza.")
}
</script>
</head>
<body>
<h3>Obsługa zdarzenia onclik</h3>
<form>
<input type="button" name="test" value="Naciśnij" onclick="inform()">
</form>
Wersja 0.31 (20.11.2014)
Lab_TI_Lab05_15.11.2017
</body>
</html>
lab3_5b.html
<!doctype html>
<html>
<head>
<title>Przyklad 3</title>
</head>
<body>
<p> Obsługa zdarzeń przy ruchu kursorem myszy </p>
<br />
<a href="lab3_5b.html" onMouseOver="alert('test 1 ')" >Kursor na linii ==1== </a>
<br />
<a href="lab3_5b.html" onMouseOver="alert('test 2 ')" >Kursor na linii ==2== </a>
</body>
</html>
3. Obsługa zdarzenia onLoad() w dokumencie HTML
lab3_5c.html
<!doctype html>
<html>
<head>
function finish(){
alert('Strona została załadowana !');
}
</script>
</head>
<body >
<h3>Obsługa zdarzenia onload</h3>
</body>
</html>
Dodajemy do elementu <body> atrybut - onload="finish();" i sprawdzamy ponownie działanie
skryptu. Po zmianie zawartość elementu body - <body onload=”finish();” >.
D. Obsługa formularzy w JavaScript
1. Odczyt danych wprowadzanych do pól formularza - skrypt lab3_6a.html
Lab3_6a.html
<!doctype html>
<html>
Wersja 0.31 (20.11.2014)
Lab_TI_Lab05_15.11.2017
<head>
<title>JavaScript – formularz</title>
</head>
<body>
<h3>Formularze w JS</h3>
<form name="form1">
<input type="text" size="10" value="Zajecia z JS" name="pole1">
<input type="button" value="Sprawdź" onclick="alert(document.form1.pole1.value)">
</form>
</body>
</html>
2. Funkcja eval() – prosty skrypt obliczeniowy – modyfikacja skryptu lab3_6a.
W części nagłówkowej dodajemy funkcję realizującą funkcję eva(), natomiast w części body
dodajemy nowy formularz „form3” po istniejącym formularzu „form1”.
function cal() {
document.form3.wynik.value=eval(document.form3.calculator.value);
}
</script>
<form name="form3">
<input type="text" size="20" name="calculator">
<input type="button" name="C1" value="Wylicz" onclick="cal()">
<input type="reset" name="C2" value="Skasuj"> <br/>
Wynik:<input type="text" size="20" name="wynik">
</form>
3. Odczyt wartości wybranych poleceniem <select> w ramach formularza – skrypt lab3_6b.html
lab3_6b.html
<!doctype html>
<html>
<head>
<title>JavaScript walidacja formularza</title>
function status(){
var indeks = document.grupa.test.options.selectedIndex;
var text0 = document.grupa.test.options.length;
var text1 = document.grupa.test.options[0].value;
var text2 = document.grupa.test.options[0].text;
var text3 = document.grupa.test.options[indeks].value;
var text4 = document.grupa.test.options[indeks].text;
var text = "Liczba pozycji: "+text0+"\n";
text += "Klucz pozycji pierwszej: "+text1+"\n";
text += "Opis pozycji pierwszej: "+text2+"\n";
text += "Indeks pozycji wybranej: "+indeks+"\n";
Wersja 0.31 (20.11.2014)
Lab_TI_Lab05_15.11.2017
text += "Klucz pozycji wybranej: "+text3+"\n";
text += "Opis pozycji wybranej: "+text4+"\n";
alert ( text );
}
</script>
</head>
<body>
<form name="grupa">
<p>
<select name="test" size="1">
<option value="1">Abacki</option>
<option value="2">Babacki</option>
<option value="3">Cabacki</option>
<option value="4">Dadacki</option>
</select>
</p>
<input type="button" name="b1" value="Opis wybranej pozycji" onClick="status(); " /><br/>
</form>
</body>
</html>
4. Prosta aplikacja z wyborem uczestnika kursu z list – skrypt3_6c.html.
lab3_6c.html
<!doctype html>
<html>
<head>
var student=new Array()
student[0]=""
student[1]=["Abacki|A.Abacki", "Babacki|W.Babacki", "Dadacki|Z.Dadacki", "Kowalski|M.Kowalski",
"Zazacki|A.Zazacki"]
student[2]=["Cabacki|N.Cabacki", "Kowalski|H.Kowalski", "Mamacki|M.Mamacki",
"Opalski|Z.Opalski"]
student[3]=["Tatarski|L.Tatarski", "Zawadzki|E.Zawadzki", "Bracki|B.Bracki", "Nanacki|L.Nanacki",
"Opacki|S.Opacki"]
function updateGrupa(selectedStudentGrupa){
var grupalist=document.form1.grupa;
var studentlist=document.form1.student;
studentlist.options.length=0
if (selectedStudentGrupa>0){
for (i=0; i<student[selectedStudentGrupa].length; i++)
studentlist.options[studentlist.options.length]=new
Option(student[selectedStudentGrupa][i].split("|")[0], student[selectedStudentGrupa][i].split("|")[1])
}
Wersja 0.31 (20.11.2014)
Lab_TI_Lab05_15.11.2017
}
</script>
</head>
<body>
<form name="form1">
<select name="grupa" size="4" onChange="updateGrupa(this.selectedIndex)" style="width:
150px">
<option selected>Wybierz grupę</option>
<option value="1">Grupa 1</option>
</select>
<select name="student" size="4" style="width: 150px"
onClick="alert(this.options[this.options.selectedIndex].value)">
</select>
</form>
</body>
</html>
5. Walidacja wprowadzanych danych do formularza – wykorzystamy onblur - skrypt
lab3_6d.html
lab3_6d.html
<!doctype html>
<html>
<head>
function emailcheck(){
var string1=document.form1.email.value;
if (string1.indexOf("@")==-1){
alert("Proszę podać poprawny adres e-mail!");
document.form1.email.focus();
}
}
</script>
</head>
<body>
<form name="form1">
<p>Adres e-mail</p>
<input type="text" size="20" name="email" onblur="emailcheck()" />
<p>Tekst informacji:</p>
<textarea name="S1" rows="2" cols="20"></textarea>
<input type="submit" name="B1" value="Wyślij" />
</form>
Wersja 0.31 (20.11.2014)
Lab_TI_Lab05_15.11.2017
</body>
</html>
6. Walidacja wprowadzanych danych do formularza – wykorzystamy onsubmit.
lab3_6e.html
<!doctype html>
<html>
<head>
function validate(){
if ((document.form1.pole1.value=="")||(document.form1.pole2.value=="")){
alert ("Należy wypełnić wszystkie pola wymagane!");
return false; }
else
return true;
}
</script>
</head>
<body>
<form name="form1" onsubmit="return validate()">
<p>Adres e-mail: (*pole wymagane)</p>
<input type="text" size="20" name="pole1" /><br/>
<p>Informacja zwrotna: (*pole wymagane)</p>
<textarea name="pole2" rows="3" cols="25"></textarea><br/>
<p>Adres domowy: (*pole nie wymagane)</p>
<input type="text" size="35" name="pole3" /><br/>
<input type="submit" name="B1" value="Submit" />
</form>
</body>
</html>
E. Prosty kalkulator
1. W ramach zadania zostanie przedstawiony prosty kalkulator realizujący cztery działania
arytmetyczne – skrypt lab3_7.html.
Lab3_7.html
<!doctype html>
<html>
<head>
<title>Kalkulator</title>
</head>
<body>
<form name="calculator">
<input type="text" disabled id="total" style="text-align: right; background: white; width:" />
</form>
Wersja 0.31 (20.11.2014)
Lab_TI_Lab05_15.11.2017
<table>
<tr>
<td><input type="button" value="C" style="width: 100%" onclick="calculator.total.value = ''"></td>
<td><input type="button" value="/" style="width: 100%" onclick="calculator.total.value += '/'"></td>
<td><input type="button" value="*" style="width: 100%" onclick="calculator.total.value +=
'*'"></td>
<td><input type="button" value="-" style="width: 100%" onclick="calculator.total.value += '-'" ></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="calculator.total.value += '7'"></td>
<td rowspan="2"><input type="button" onclick="calculator.total.value += '+'" style="height: 50px;
vertical-align: middle" value ="+"></td>
</tr>
<tr>
</tr>
<tr>
<td rowspan="2"><input type="button" onclick="calculator.total.value = eval(calculator.total.value)"
style="height: 50px; vertical-align: middle" value ="="></td>
</tr>
<tr>
<td colspan="2"><input type="button" style="width: 68px; text-align: center" value="0"
onclick="calculator.total.value += '0'"></td>
<td><input type="button" value="." style="width: 100%" onclick="calculator.total.value += '.'
"></td>
</tr>
</table>
</body>
</html>
F. Tworzenie nowej treści na stronie WWW - innerHTML
1. Zmiana zawartości elementu <div> z wykorzystaniem własności innerHTM – skrypt
lab3_8.html
lab3_8.html
<!doctype html>
<html>
<head>
Wersja 0.31 (20.11.2014)
Lab_TI_Lab05_15.11.2017
function update(index){
var tekst = "Przykładowy tekst w ramach bloku." ;
var tabelka = "<table
border='1'><tr><th>kol1</th><th>kol2</th></tr><tr><td>w11</td><td>w12</td></tr><tr><
td>w21</td><td>w22</td></tr></table>" ;
var obrazek = "<img src='' alt='obrazek' />" ;
var link = "<a href='newton.fis.agh.edu.pl/~ante/' >Home Page Dydejczyk</a>";
switch (index) {
case 0:
document.getElementById("test").innerHTML = tekst;
break;
case 1:
document.getElementById("test").innerHTML = tabelka;
break;
case 2:
document.getElementById("test").innerHTML = obrazek;
break;
case 3:
document.getElementById("test").innerHTML = link;
break;
}
}
</script>
</head>
<body>
<form name="form1">
<select name="wybor" onChange="update(this.selectedIndex)">
<option value="1">Tekst</option>
<option value="2">Tabelka</option>
<option value="3">Obrazek</option>
<option value="4">Link</option>
</select>
</form>
<div id="test">To jest miejsce do wprowadzania nowej zawartosci.</div>
</body>
</html>
Wersja 0.31 (20.11.2014)
Lab_TI_Lab05_15.11.2017
G. Modyfikowanie zawartości strony (zmiana grafiki, styli)
1. Dynamiczna zmiana styli wyświetlających stronę WWW. Skrypt lab3_9a.html
lab3_9a.html
<!DOCTYPE HTML >
<html>
<head>
<title>Dynamiczne wartości CSS</title>
<style type="text/css">
#box1{
position: absolute; top: 20px;
left: 50px; width: 200px;
border: solid #ff0000 3px;
background-color: #ffff00;
color: #000000; padding: 10px;
}
</style>
<script language="JavaScript">
function change(){
document.getElementById("box1").style.borderColor = "#0000ff";
document.getElementById("box1").style.backgroundColor = "#000000";
document.getElementById("box1").style.color = "#ffffff";
}
function change_back(){
document.getElementById("box1").style.borderColor = "#ff0000";
document.getElementById("box1").style.backgroundColor = "#ffff00";
document.getElementById("box1").style.color = "#000000";
}
</script>
</head>
<body>
<div style="border-color: rgb(255, 0, 0); background-color: rgb(255, 255, 0);
color: rgb(0, 0, 0);" id="box1" onmouseover="change()" onmouseout="change_back()">
<p>Zawartość wewnątrz bloku zmienia się za każdym razem po najechaniu myszką na
obszar.</p>
</div>
</body>
</html>
Wersja 0.31 (20.11.2014)
Lab_TI_Lab05_15.11.2017
2. Zmiana elementów graficznych prze najechaniu na obszar rysunku kursorem myszki –
skrypt lab3_9b.html.
lab3_9b.html
<!doctype html>
<html>
<head>
<title>Zmiana elementów graficznych</title>
<script language="JavaScript" >
var logo_on = new Image() ;
var logo_off = new Image() ;
logo_on.src = 'logo_on.gif';
logo_off.src = 'logo_off.gif' ;
function activate (image) {
var imagesrc = eval(image + '_on.src') ;
document[image].src = imagesrc ; }
function deactivate (image) {
var imagesrc = eval(image + '_off.src') ;
document[image].src = imagesrc ; }
</script>
</head>
<body>
<a href="lab3_9b.html" onMouseOver="activate('logo');
return true" onMouseOut ="deactivate('logo'); return true" >
<img src="logo_off.gif" alt="[logo]"
style="border:none" name="logo"></a>
</body>
</html>
H. Obsługa ciasteczek w języku JavaScript
1. Na początek sprawdzimy ciasteczka umieszczone dla witryny www.fis.agh.edu.pl
wykonując skrypt lab3_10a.html.
lab3_10a.html
<!doctype html>
<html>
<head>
<title>Lista zmiennych Cookie</title>
<script language="JavaScript" >
window.onload = showCookies ;
function showCookies() {
var outMsg = '';
if (document.cookie.length = 0 )
{ outMsg = " Brak ciasteczek " ; }
Wersja 0.31 (20.11.2014)
Lab_TI_Lab05_15.11.2017
else {
outMsg += "<table><tr><th>Nazwa ciasteczka</th><th>Zawartosć ciasteczka</th></tr>" ;
var thisCookie = document.cookie.split(";");
for ( var i=0; i<thisCookie.length; i++ )
{
outMsg += "<tr><td>" + thisCookie[i].split("=")[0] + "</td>";
outMsg += "<td>" + thisCookie[i].split("=")[1] +"</td></tr></tr>";
}
outMsg += "</table>";
}
document.getElementById("cookieData").innerHTML = outMsg ;
}
</script>
</head>
<body>
<h3>Lista ciasteczek</h3>
<p id="cookieData"> </p>
</body>
</html>
2. W kolejnym skrypcie lab3_10b.html tworzymy nowe ciasteczko, które umożliwi wypełnienie
pola po wczytaniu ponownym skryptu.
lab3_10b.html
<!doctype html>
<html>
<head>
<title>Zmiana elementów graficznych</title>
window.onload = nameFieldInit ;
function nameFieldInit() {
var userName = '';
if (document.cookie.length > 0 ) {
var dimCookie = document.cookie.split(";") ;
for ( var i=0; i<dimCookie.length; i++ ) {
dataCookie = dimCookie[i].split("=") ;
// alert ( dataCookie[0]+" => "+dataCookie[1]) ;
if ( "userName" == dataCookie[0] ) {
userName = dataCookie[1] ;
document.getElementById("nameField").value = userName;
document.getElementById("nameField").onblur = setCookie;
}
}
}
}
function setCookie() {
var expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+6);
var userName = document.getElementById("nameField").value;
Wersja 0.31 (20.11.2014)
Lab_TI_Lab05_15.11.2017
document.cookie = "userName=" + userName + ";expires=" + expireDate.toGMTString();
}
</script>
</head>
<body>
<form onsubmit="setCookie()" >
<p>Podaj swoje imię: <input type="text" id="nameField" /> </p>
<input type="submit" />
</form>
</body>
</html>
3. Przechowywanie ustawiania styli na stronie www w ciasteczkach – skrypt lab3_10c.html.
lab3_10c.html
<!doctype html>
<html>
<head>
<title>Zmiana koloru tla</title>
<style type="text/css">
body { background-color:white; }
</style>
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
// if cookie exists
if (offset != -1) {
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
// -- alert ( "[ offset = "+offset+", end = "+end+" ]" );
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function setcolor(what){
document.body.style.backgroundColor=what
document.cookie="bgcolor="+what
}
function setcolor1(){
if (get_cookie("bgcolor") != "") {
Wersja 0.31 (20.11.2014)
Lab_TI_Lab05_15.11.2017
var bgcolor = get_cookie("bgcolor");
document.body.style.backgroundColor = bgcolor;
}
}
</script>
</head>
<body onload="setcolor1();">
<form name="a1">
<p><select name="a2" size="1">
<option value="white">Select background color </option>
<option value="#F0F0F0">Light gray</option>
<option value="#80FFFF">Sky blue</option>
<option value="#C6C6FF">Purple</option>
<option value="white">White</option>
</select>
<input type="button" value="Go"
onClick="setcolor(document.a1.a2.options[document.a1.a2.selectedIndex].value)"></p>
</form>
</body>
</html>
Wersja 0.31 (20.11.2014)

Laboratorium Technologie Internetowe Lab05

Transkrypt

Podobne dokumenty

Wprowadzenie do języka html

Podstawy JavaScript – ćwiczenia

Ćw.1. Przykładowa walidacja formularza PoniŜsza strona wyświetla

1 mySql i php – łączenie materiały dydaktyczne dla uczniów

01 Osadzanie skryptow PHP w dokumentach HTML