SPN - Labs

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 lab3_1.html), w nagłówku dokumnetu HTML <head> (przykład lab3_2.html) lub w zewnętrznym pliku (przykład lab3_3.html).

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

Plik lab3_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 "lab3_2.html"

Plik lab3_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 "lab3_3.html i lab3_3.js"

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

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

Plik lab3_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/>");

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 lab3_4 i lab3_4a.

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

Plik lab3_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 lab3_4.html

Plik lab3_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">

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 "lab3_5a.html"

Plik lab3_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 "lab3_5b.html"

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

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

Plik lab3_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 "lab3_5d.html"

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

<!doctype html>                                                                                                                                    <!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("Obsługa 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 umieścić w katalogu lab03 i nazwać cwicz01.html.

Modyfikacja strony WWW z poziomu języka JavaScript

W ramach tego punktu, zostanie przedstawiona możliwość modyfikowania styli CSS poprzez wykorzystanie interfejsu Document Object Model API.

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

Plik lab3_6a.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 "lab3_6b.html"

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

<!doctype html>
<html>
<head>
  <title>Zmiana elementów graficznych</title>
  <meta charset="UTF-8" />
<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_6b.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>

Modyfikacja elementów strony z wykorzystaniem funkcji innerHTML(), plik "lab3_6c.html"

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

<!DOCTYPE HTML >
<html>
  <head>
    <meta charset="UTF-8" />
    <title>TEST</title
  </head>
  <body bgcolor="#ffffff"> <br><br>
    <p>Zawartość pomiędzy &lt;DIV&gt; and &lt;/DIV&gt; zostanie podmieniona przez JavaScript.</p>
    <blockquote>
<pre>&lt;script language=&quot;JavaScript&quot;&gt;
 document.getElementById('DivExample').innerHTML=&quot;Dzień dobry&quot;;&lt;/script&gt;</pre>
</blockquote>
<form method="POST">
    <p>Przykład: <script language="JavaScript">document.write('<div id=DivExample>Wcisnij przycisk</div>'); </script></p>
    <table border="0" cellpadding="2">
    <tr>
      <td align="center"><input type="button" name="B1" value="Hello" onclick="document.getElementById('DivExample').innerHTML='Hello World'"></td>
      <td>Javascript:<code>document.getElementById('DivExample').innerHTML = &quot;Hello World&quot; ;</code></td></tr>
    <tr>
      <td align="center"><input type="button" name="B2" value="Dzień" onclick="document.getElementById('DivExample').innerHTML='Dzień dobry'"></td>
      <td>Javascript: <code>document.getElementById('DivExample').innerHTML = &quot;Dzien dobry&quot;;</code></td></tr>
    <tr>
      <td align="center"><input type="button" name="B3" value="Image" onclick="document.getElementById('DivExample').innerHTML='&lt;img src=star.jpg&gt;&lt;/img&gt;'"></td>
      <td>Javascript: <code>document.getElementById('DivExample').innerHTML =  &quot;&lt;img&nbsp;src=star.jpg&gt;&lt;/img&gt;&quot;;</code></td></tr>
     </table>
</form>

</body>
</html>

Realizacja kalkulatora w JavaScript

W ramach tego punktu przedstawiono realizację prostego kalkulatora w języku Javascript. Pierwszy przykład wykorzystuje funkcję eval(). W ramach zadania przedstawiona zostanie podatność funkcji na niewłasciwe jej wykorzystanie.

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

Plik lab3_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 "lab3_7b.html"

Plik lab3_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>

Generowanie grafiki w canvas

Szablon w html do gerowania grafiki w elemencie <canvas>, plik "lab5_A01.html", wykorzystywane pliki z kodem w Javascript - lab5_A01a, lab5_A01b, lab5_A01c, lab5_A01d i lab5_A01e.

Plik lab5_A01.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_A01a.js'></script-->
<script src='lab5_A01b.js'></script>
<script src='lab5_A01c.js'></script>
<script src='lab5_A01d.js'></script>
<script src='lab5_A01e.js'></script>

</body>
</html>

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

Plik lab5_A01a.js ( [listing dokumentu] [link do dokumentu] [widok 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.beginPath();
  b_context.arc(225,215,20,0,2*Math.PI);
  b_context.stroke();
  
  b_context.beginPath();
  b_context.arc(25,215,20,0,2*Math.PI);
  b_context.stroke();
  
  
  b_context.strokeRect(25,15,200,200);
//}

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

Plik lab5_A01b.js ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

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


/*
  context.moveTo(10, 10);
  context.lineTo(10, 400);

  context.moveTo(10, 10);
  context.lineTo(600, 10);
*/
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.strokeStyle = "#ddd";
context.stroke();

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

Plik lab5_A01c.js ( [listing dokumentu] [link do dokumentu] [widok dokumentu])


context.beginPath();
context.moveTo(0, 40);
context.lineTo(240, 40);
context.moveTo(260, 40);
context.lineTo(500, 40);
context.moveTo(495, 35);
context.lineTo(500, 40);
context.lineTo(495, 45);

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_A01d.js"

Plik lab5_A01d.js ( [listing dokumentu] [link do dokumentu] [widok 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, 6, 6);
context.fillRect(497, 372, 6, 6);

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

Plik lab5_A01e.js ( [listing dokumentu] [link do dokumentu] [widok dokumentu])

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

//pktx = 355;
//pkty = 200;
pktx=300;
pkty=30;
startx = 200;
starty = 300;
endx = 400;
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_A02.html", wykorzystywane pliki z kodem w Javascript - lab5_A02a, lab5_A02b, lab5_A02c.

Plik lab5_A02.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_A02a.js'></script>
</body>
</html>

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

Plik lab5_A02a.js ( [listing dokumentu] [link do dokumentu] [widok 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_A02b.js"

Plik lab5_A02b.js ( [listing dokumentu] [link do dokumentu] [widok 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_A02c.js"

Plik lab5_A02c.js ( [listing dokumentu] [link do dokumentu] [widok 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_A03a.html"

Plik lab5_A03a.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_A03b.html"

Plik lab5_A03b.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_A03c.html"

Plik lab5_A03c.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 += 100, y += 37) {
    context.drawImage(star, x, y, 51, 53);
    }
   };
</script>
</body>
</html>

Wyres słupkowy, plik "lab5_04.html"

Plik lab5_A04.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 wejciowe
  var inputData = [99, 60, 20, 50, 180, 70, 125, 100, 12];
 
  var canvasWidth = 500;
 
  // miejsce, od ktrego zaczynamy rysowanie
  var x_from = 40;
 
  // co ile - odlego midzy supkami
  var step = Math.round(canvasWidth / inputData.length) - 5;
 
  for (var i = 0; i < inputData.length; i++) {
    // pozycja x nastpnego supka
    var x_next = x_from + (i * step) - 20;
 
    // rysowanie supka...
    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>

Podsumowanie - zadanie

Zadanie 1.

Przygotować dokument html zgodnie z zadaniem z laboratorium 2 - rozszerzając o możliwość zmiany grafiki wykorzytując funkcjonalność JavaScript. Do realizacji zadania należy wykorzystać następujące elementy:

Element html: <button>
Funkcję: innerHTML

Zadanie umieścić w katalogu lab03 w skrypcie pod nazwą zadanie.html.

Zadanie 2.

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. Skrypt należy nazwać "lab5_zadanie_A.html".

Lab03 - JavaScript i Canvas [ lab: 21.01.2023, ver. SPN.2023.01.08.003 ]

Interaktywne strony WWW, język JavaScript