TI - Labs

Interaktywne strony WWW, język JavaScript

Tematyka zajęć:

W ramach zajęć poznamy możliwości języka JavaScript w tworzeniu interaktywnej treści w przeglądarce.

Skrypty 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
Realizacja kalkulatora w JavaScript
Tworzenie nowej treści na stronie WWW innerHTML()
Modyfikacja stron WWW z poziomu języka JavaScript
Generowanie grafiki w canvas

A. Skrypty JavaScript w języku HTML

Kod skryptu w języku Javascript może być umieszczony w kilku miejscach naszego dokumentu HTML. Kod w języku Javascript zawarty w ramach elementu <script> można umieścić w końcówce zawartości elementu <body> (przykład lab5_1.html), w nagłówku dokumnetu HTML <head> (przykład lab5_2.html) lub w zewnętrznym pliku (przykład lab5_3.html).

Skrypt JavaScript wewnątrz elementu <body> dokumentu HTML, plik "lab5_1.html"

Plik lab5_1.html - ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

   <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<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>

Skrypt JavaScript wewnątrz elementu <head> dokumentu HTML, plik "lab5_2.html"

Plik lab5_2.html - ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

<html>
<head>
<meta charset="UTF-8" />
<title>JavaScript - skrypt 2</title>
<script type="text/javascript">
<!--
document.write("<hr />");
document.write("<p>Skrypt wewnątrz elementu head dokumentu HTML</p>");
document.write("<hr/>");
-->
</script>
</head>
<body>
<h3>Pierwszy skrypt w języku JavaScript</h3>
</body>
</html>

Skrypt JavaScript w pliku zewnętrznym, pliki "lab5_3.html i lab5_3.js"

Plik lab5_3.html - ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>JavaScript - skrypt 3</title>
<script src="lab6_3.js" >
</script>
</head>
<body>
<h3>Pierwszy skrypt w języku JavaScript</h3>
</body>
</html>

Plik lab5_3.js - ( [listing dokumentu] [link do dokumentu] )

// JavaScript Document
document.write("<hr />");
document.write("<p>Skrypt wewnątrz pliku dodatkowego pliku.</p>");
document.write("<hr/>");

B. Funkcje komunikatorów: alert(), prompt() i confirm()

W ramach języka Javascript zostały udostępnione dla użytkownika trzy wbudowane funkcje przerywające działanie kodu skryptu i oczekujące na działanie użytkownika. Funkcja alert() wywieświetla komunikat i po akceptacji wznawiana jest praca skryptu, funkcja confirm() oczekuje na wybór opcji po której wznawia działanie skryptu. Ostanie funkcja prompt() umożliwia wprowadzenie komunitatu, po akceptacji wznawiana jest dalsza praca skryptu. Odpowiednie przykłady prezentujące działanie funkcji przedstawiono w przykładach lab5_4 i lab5_4a.

Sprawdzamy funkcjonalność funkcji alert(), confirm() i prompt(), plik lab5_4.html

Plik lab5_4.html - ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>JavaScript - skrypt 2</title>
<script type="text/javascript">
<!--
alert("Obsługa komunikatu Alert");
confirm("Czy potwierdzasz wybór?");
prompt("Podaj liczbę studentów.");
-->
</script>
</head>
<body>
</body>
</html>

Modyfikujemy zawartość pliku z punktu poprzedniego dodając funkcjonalność wydruku odpowiedzi otrzymanych z funkcji confirm() i prompt(), wymagany kod do modyfikacji w pliku lab5_4.html

Plik lab5_4a.html - ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>JavaScript - skrypt 2</title>
<script type="text/javascript">
<!--
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>
</head>
<body>
</body>
</html>
                                                                                                              <script type="text/javascript">

C. Obsługa zdarzeń w języku HTML: onClick(), onLoad(), onMouseOver(), onMouseOut()

W ramach języka Javascript mamy możliwość obsługi zdarzeń wywoływanych przez użytkownika np. w czasie obsługi myszki (przykładowo zdarzenie mouseover) nacinięcia klawisza (zdarzenie keypress), wysłania formularza (zdarzenie submit) czy załadowania strony (zdarzenie load). Ostatnie zdarzenie jest niezależne od użytkownika i jest wyzwalane po załadowaniu zawartości strony. Do obsługi zdarzeń mamy gotowe funkcje dla określonych zdarzeń (np. onMouseOver()) lub uniwersalną funkcję addEventListener(zdarzenie, reakcja). Zdarzenia generowane w ramach interfejsu przeglądarki przedstawia tabela 1, natomiast funkcje JavaScript obsługujące wybrane zdarzenia tabela2.

Myszka	Ramka/obiekt	Formularz	Klawiatura
Click	Load	Select	Keypress
Dblclick	Unload	Change	Keydown
Mousedown	Abort	Submit	Keyup
Mouseup	Error	Reset
Mouseover	Resize	Focus
Mousemove	Scroll	Blur
Mouseout

Tab 1. Zdarzenia generowane prze użytkownika w intefejsie przegląrki

Zdarzenie	Kiedy występuje	Obsługa zdarzenia
blur	Użytkownik dezaktywuje element formularza	onBlur
click	Użytkownik klika element formularza	onClick
change	Użytkownik zmienia tekst, wybiera element	onChange
focus	Użytkownik aktywuje element formularza	onFocus
load	Strona zostaję załadowana do przeglądarki	onLoad
mouseover	Użytkownik przesuwa kursor myszy	onMouseOver
select	Użykownik wybiera pole formularza>	onSelect
submit	Użytkownik wysyła formularz	onSubmit
unload	Zakończenie wizyty na stronie	onUnLoad

Tab 2. Funkcie obsługujące wybrane zdarzenia

Obsługa zdarzenia onClick() wywołanego przez myszkę, plik "lab5_5a.html"

Plik lab5_5a.html - ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>JavaScript - skrypt 3</title>
<script type="text/javascript">
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>
</body>
</html>

Obsługa zdarzeń onMouseOver() i onMouseOut(), plik "lab5_5b.html"

Plik lab5_5b.html - ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

<!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>

Obsługa zdarzenia onLoad() w dokumencie HTML, plik "lab5_5c.html"

Plik lab5_5c.html - ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>JavaScript - skrypt 3</title>
<script type="text/javascript">
function finish(){
alert('Strona została załadowana !');
}
</script>
</head>
<!--body onload="finish();" -->
<body>
<h3>Obsługa zdarzenia onload</h3>
</body>
</html>

Odczyt znaku wciśniętego klawisza, plik "lab5_5d.html"

Plik lab5_5d.html - ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript - skrypt 5d</title>
</head>
<body>
<h3>Odczyt wartości klawisza</h3>
<script>
document.addEventListener("keypress", myFunction);

function myFunction(evt) {
alert("Obsluga zdarzenia onkeypress: \n"
      + "własność keyCode: " + evt.keyCode + "\n"
      + "własność which: " + evt.which + "\n"
      + "własność charCode: " + evt.charCode + "\n"
      + "naciśniety znak: "
      + String.fromCharCode(evt.charCode) + "\n"
     );
}
</script>
</body>
</html>

Zadanie 1.

Opracować skrypt wyświetlający komunikaty:

komunitat w funcji alert() "Wciśnieto klawisz S" po naciśnięciu klawisza "s" lub "S"
kumunikat w funkcji prompt() "Podaj liczbę studentów" po naciśnieciu klawisza "c" lub "C", po podaniu liczby większej od 0 wyświetla się komunikatem w funkcji alert "Podano liczbę studentów: x"
komunikat w funkcji confirm() "Czy chcesz na pewno zakończyć pracę ?" po naciśnieciu klawisza "k" lub "K", po nacinięciu "Tak" wyświetla się komunikat w funkcji alert "Dziękujemy za współpracę !"

Skrypt należy nazwać "lab5_zadanie_1.html".

D. Przetwarzanie formularzy

Odczyt danych wprowadzanych w polu formularza, plik "lab5_6a.html"

Plik lab5_6a.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<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>

Odczyt wartości wybranych poleceniem <select> w ramach formularza, plik "lab5_6b.html"

Plik lab5_6b.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

<!doctype html>
<html>
<head>
<title>JavaScript walidacja formularza</title>
<meta charset="UTF-8" />
<script type="text/javascript">
function status(){
var ind_poz_wyb = document.grupa.test.options.selectedIndex;
var licz_elem = document.grupa.test.options.length;
var klucz_poz_pierw = document.grupa.test.options[0].value;
var wart_poz_pier = document.grupa.test.options[0].text;
var klucz_poz_wyb = document.grupa.test.options[ind_poz_wyb].value;
var wart_poz_wyb = document.grupa.test.options[ind_poz_wyb].text;
var text = "Liczba pozycji: "+licz_elem+"\n";
text += "Klucz pozycji pierwszej: "+klucz_poz_pierw+"\n";
text += "Opis pozycji pierwszej: "+wart_poz_pier+"\n";
text += "Indeks pozycji wybranej: "+ind_poz_wyb+"\n";
text += "Klucz pozycji wybranej: "+klucz_poz_wyb+"\n";
text += "Opis pozycji wybranej: "+wart_poz_wyb+"\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>

Walidacja wprowadzanych danych do formularza, funkcja onblur(), plik "lab5_6c.html"

Plik lab5_6c.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

<!doctype html>
<html>
<head>
<title>JavaScript walidacja formularza</title>
<meta charset="UTF-8" />
<script type="text/javascript">
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>
</body>
</html>

Walidacja wprowadzanych danych do formularza, funkcja onsubmit(), plik "lab5_6d.html"

Plik lab5_6d.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

<!doctype html>
<html>
<head>
<title>JavaScript walidacja formularza</title>
<meta charset="UTF-8" />
<script type="text/javascript">
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>

Zadanie 2.

Opracować skrypt walidujący formularz w chwili wysyłania. Formularz zawiera następujące pola:

nazwisko - pole typu text, wymagane, co najmniej 4 znaki
imię - pole typu text, wymagane, co najmniej 4 znaki
pole e-mail - pole text lub email, wymagane
pole rok studiów - pole typu select, wymagane, zawiera opcje ( 0 -> wybierz rok, 1 -> rok 1, 2 -> rok 2, 3 -> rok3 ), należy wybrać rok
pole uwagi - pole typu textarea, nie wymagane

Po poprawnej walidacji funkcja alert() wyświetla wprowadzone dane. Skrypt należy nazwać "lab5_zadanie_2.html". Przykładowa realizacja na rys.1.

Rys.1 Przykładowa realizacja zadania 2

E. Realizacja kalkulatora w JavaScript

Prosty skrypt obliczeniowy, funkcja eval(), plik "lab5_7a.html"

Plik lab5_7a.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>JavaScript formularz</title>
<script type="text/javascript">
function cal() {
document.form3.wynik.value=eval(document.form3.calculator.value);
}
</script>
</head>
<body>
<h3>Formularze w JS</h3>
<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>
</body>
</html>

Realizacja kalkulatora czterodziałaniowego, plik "lab5_7b.html"

Plik lab5_7b.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

<!doctype html>
<html>
<head>
<title>Kalkulator</title>
<meta charset="UTF-8">
</head>
<body>
<form name="calculator">
<input type="text" disabled id="total" style="text-align: right; background: white; width:" />
</form>
<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><input type="button" value="8" onclick="calculator.total.value += '8'"></td>
<td><input type="button" value="9" onclick="calculator.total.value += '9'"></td>
<td rowspan="2"><input type="button" onclick="calculator.total.value += '+'" style="height: 50px; vertical-align: middle" value ="+"></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="calculator.total.value += '4'"></td>
<td><input type="button" value="5" onclick="calculator.total.value += '5'"></td>
<td><input type="button" value="6" onclick="calculator.total.value += '6'"></td>
</tr>
<tr>
<td><input type="button" value="1" onclick="calculator.total.value += '1'"></td>
<td><input type="button" value="2" onclick="calculator.total.value += '2'"></td>
<td><input type="button" value="3" onclick="calculator.total.value += '3'"></td>
<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

Zmiana zawartości elementu <div> z wykorzystaniem innerHTML, plik "lab5_8.html"

Plik lab5_8.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

<!doctype html>
<html>
<head>
<title>JavaScript walidacja formularza</title>
<meta charset="UTF-8" />
<script type="text/javascript">
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='star.jpg' alt='obrazek' />" ;
var link = "<a href='newton.fis.agh.edu.pl/~antek/' >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 zawartoci.</div>
</body>
</html>

Zadanie 3.

Zmodyfikować zadanie 2. Informacje o błędnie wprowadzonych danych umieszczamy przy polu, które jest źle wprowadzone wykorzystując innerHTML a nie w funkcję alert(). Komunikat jest wyświetlany na czerwono. Skrypt należy nazwać "lab5_zadanie_3.html". Pezykładowa realizacja na rys.2.

Rys.2 Przykładowa realizacja zadania 3

G. Modyfikacja strony WWW z poziomu języka JavaScript

Dynamiczna zmiana styli wyświetlanych na stronę WWW, plik "lab5_9a.html"

Plik lab5_9a.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

<!DOCTYPE HTML >
<html>
<head>
<title>Dynamiczne wartości CSS</title>
<meta charset="UTF-8">
<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>

Modyfikacja elementów graficznych na stronie w wyniku obsługi zdarzeń, plik "lab5_9b.html"

Plik lab5_9b.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

<!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. Generowanie grafiki w canvas

Szablon w html do gerowania grafiki w elemencie <canvas>, plik "lab5_10.html", wykorzystywane pliki z kodem w Javascript - lab5_10a, lab5_10b, lab5_10c, lab5_10d i lab5_10e.

Plik lab5_10.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

<!doctype html>
<html>
<head>
<title>Canvas element size: 600 x 400, Canvas drawing surface size: 600 x 400</title>
<style>
body {
background: #dddddd;
}
#canvas {
   margin: 10px;
   padding: 10px;
   background: #ffffff;
   border: thin inset #aaaaaa;
}
</style>

</head>
<body>
<canvas id='canvas' width='600' height='400'>
   Canvas not supported
</canvas>
<script src='lab5_10a.js'></script>
<script src='lab5_10b.js'></script>
<script src='lab5_10c.js'></script>
<script src='lab5_10d.js'></script>
<script src='lab5_10e.js'></script>

</body>
</html>

Element <canvas> - rysujemy prostokąt, plik "lab5_10a.js"

Plik lab5_10a.js ( [listing dokumentu] [link do dokumentu]

//function draw_b() {
  var b_canvas = document.getElementById("canvas");
  var b_context = b_canvas.getContext("2d");
  b_context.fillStyle = 'red';
  b_context.fillRect(50, 25, 150, 50);
  b_context.fillStyle = 'green';
  b_context.fillRect(50,100,150, 50);
  
  
  b_context.strokeRect(25,15,200,200);
//}

Element <canvas> - kartka papieru kratkowanego, plik "lab5_10b.js"

Plik lab5_10b.js ( [listing dokumentu] [link do dokumentu]

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

for (var x = 0.5; x < 600; x += 10) {
  context.moveTo(x, 0);
  context.lineTo(x, 400);
}
for (var y = 0.5; y < 400; y += 10) {
  context.moveTo(0, y);
  context.lineTo(600, y);
}
context.strokeStyle = "#ddd";
context.stroke();

Element <canvas> - dodajemy osie współrzędnych, plik "lab7_10c.js"

Plik lab5_10c.js ( [listing dokumentu] [link do dokumentu]


context.beginPath();
context.moveTo(0, 40);
context.lineTo(240, 40);
context.moveTo(260, 40);
context.lineTo(500, 40);
context.moveTo(495, 20);
context.lineTo(500, 40);
context.lineTo(495, 60);

context.moveTo(60, 0);
context.lineTo(60, 153);
context.moveTo(60, 173);
context.lineTo(60, 375);
context.moveTo(65, 370);
context.lineTo(60, 375);
context.lineTo(55, 370);

context.strokeStyle = "#00A";
context.stroke();

Element <canvas> - dodajemy opis osi, plik "lab5_10d.js"

Plik lab5_10d.js ( [listing dokumentu] [link do dokumentu]


context.font = "bold 12px sans-serif";
context.fillText("x", 248, 43);
context.fillText("y", 58, 165);

context.textBaseline = "top";
context.fillText("( 0 , 0 )", 8, 5);

context.textAlign = "right";
context.textBaseline = "bottom";
context.fillText("( 500 , 375 )", 492, 370);

context.fillRect(0, 0, 3, 3);
context.fillRect(497, 372, 3, 3);

Element <canvas> - dodajemy okrąg, zmieniamy kolor, plik "lab7_10e.js"

Plik lab5_10e.js ( [listing dokumentu] [link do dokumentu]

context.moveTo(250,200);
context.arc(200,200,50,0,1.5*Math.PI);
context.strokeStyle = "#F00";
context.stroke();

pktx = 355;
pkty = 200;
startx = 200;
starty = 300;
endx = 350;
endy = 300;

context.beginPath();
context.moveTo(startx,starty);
context.quadraticCurveTo(pktx,pkty,endx,endy);
//context.closePath();
context.strokeStyle = "red";
context.stroke();

context.fillRect(pktx, pkty, 3, 3);

context.beginPath();
context.moveTo(startx, starty);
context.lineTo(pktx, pkty);
context.moveTo(endx, endy);
context.lineTo(pktx, pkty);
context.strokeStyle = "black";
context.stroke();

Szablon w html do gerowania grafiki w elemencie <canvas>, plik "lab5_11.html", wykorzystywane pliki z kodem w Javascript - lab5_11a, lab5_11b, lab5_11c.

Plik lab5_11.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

<!doctype html>
<html>
<head>
<title>Canvas element size: 400 x 400, Canvas drawing surface size: 400 x 400</title>
<style>
body {
background: #dddddd;
}
#canvas {
   margin: 10px;
   padding: 10px;
   background: #ffffff;
   border: thin inset #aaaaaa;
}
</style>

</head>
<body>
<canvas id='canvas' width='400' height='400'>
   Canvas not supported
</canvas>
<script src='lab5_11a.js'></script>
</body>
</html>

Element <canvas> - prostokąt z gradientem poziomo, plik "lab5_11a.js"

Plik lab5_11a.js ( [listing dokumentu] [link do dokumentu]

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var my_gradient = context.createLinearGradient(0, 0, 300, 0);

my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");

context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);

Element <canvas> - prostokąt z gradientem pionowo, plik "lab5_11b.js"

Plik lab5_11b.js ( [listing dokumentu] [link do dokumentu]

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var my_gradient = context.createLinearGradient(0, 0, 0, 225);

my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");

context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);

Element <canvas> - prostokąt z gradientem po przekątnej, plik "lab5_11c.js"

Plik lab5_11c.js ( [listing dokumentu] [link do dokumentu]

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var my_gradient = context.createLinearGradient(0, 0, 300, 225);

my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");

context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);

Modyfikacja elementów graficznych na stronie w wyniku obsługi zdarzeń, plik "lab5_12a.html"

Plik lab5_12a.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

<!doctype html>
<html>
<head>
<title>Canvas and Image</title>
<style>
body {
background: #dddddd;
}
#canvas {
   margin: 10px;
   padding: 10px;
   background: #ffffff;
   border: thin inset #aaaaaa;
}
</style>

</head>
<body>
<img id="star" src="star.jpg" alt="star" width="102" height="107">
<canvas id="e" width="102" height="107"></canvas>
<script>
window.onload = function() {
  var canvas = document.getElementById("e");
  var context = canvas.getContext("2d");
  var cat = document.getElementById("star");
  context.drawImage(star, 0, 0);
};
</script>
</body>
</html>

Modyfikacja elementów graficznych na stronie w wyniku obsługi zdarzeń, plik "lab5_12b.html"

Plik lab5_12b.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

<!doctype html>
<html>
<head>
<title>Canvas and Image</title>
<style>
body {
background: #dddddd;
}
#canvas {
   margin: 10px;
   padding: 10px;
   background: #ffffff;
   border: thin inset #aaaaaa;
}
</style>

</head>
<body>
<canvas id="e" width="102" height="107"></canvas>
<script>
  var canvas = document.getElementById("e");
  var context = canvas.getContext("2d");
  var star = new Image();
  star.src = "star.jpg";
  star.onload = function() {
    context.drawImage(star, 0, 0);
  };
</script>
</body>
</html>

Modyfikacja elementów graficznych na stronie w wyniku obsługi zdarzeń, plik "lab5_12c.html"

Plik lab5_12c.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

<!doctype html>
<html>
<head>
<title>Canvas and Image</title>
<style>
body {
background: #dddddd;
}
#canvas {
   margin: 10px;
   padding: 10px;
   background: #ffffff;
   border: thin inset #aaaaaa;
}
</style>

</head>
<body>
<canvas id="e" width="500" height="400"></canvas>
<script>
  var canvas = document.getElementById("e");
  var context = canvas.getContext("2d");
  var star = new Image();
  star.src = "star.jpg";
  star.onload = function() {
  for (var x = 0, y = 0;
       x < 500 && y < 375;
       x += 50, y += 37) {
    context.drawImage(star, x, y, 51, 53);
    }
   };
</script>
</body>
</html>

Wyres słupkowy, plik "lab5_13.html"

Plik lab5_13.html ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

<!doctype html>
<html>
<head>
<title>Canvas and Image</title>
<style>
body {
background: #dddddd;
}
#canvas {
   margin: 10px;
   padding: 10px;
   background: #ffffff;
   border: thin inset #aaaaaa;
}
</style>

</head>
<body>
<canvas id="e" width="500" height="400"></canvas>
<script>
  var canvas = document.getElementById("e");
  var ctx = canvas.getContext("2d");
  // dane wejściowe
  var inputData = [99, 60, 20, 50, 180, 70, 125, 100, 12];
 
  var canvasWidth = 500;
 
  // miejsce, od którego zaczynamy rysowanie
  var x_from = 40;
 
  // co ile - odległość między słupkami
  var step = Math.round(canvasWidth / inputData.length) - 5;
 
  for (var i = 0; i < inputData.length; i++) {
    // pozycja x następnego słupka
    var x_next = x_from + (i * step) - 20;
 
    // rysowanie słupka...
    ctx.fillStyle = "rgba(50, 150, 250, 1)";
    ctx.fillRect(x_next, 150, 40, -inputData[i]);
 
    // oraz jego cienia
    ctx.fillStyle = "rgba(10, 10, 50, 0.4)";
    ctx.fillRect(x_next, 150, 45, -inputData[i]);
}
</script>
</body>
</html>

Ćwiczenie.

Opracować skrypt rysujący w elemencie <canvas> prostą y=ax+b w układzie współrzednych (x,y) z opisem osi i opisem funkcji na wykresie.

Przykładowa realizacja ćwiczenia

Lab05 - Język JavaScript [ ver. TI.2025.10.27.005 ]