Projektowanie Aplikacji Internetowych Artur Niewiarowski Wydział Fizyki, Matematyki i Informatyki Politechnika Krakowska

PHP, MVC, MVC(B)L

Czym jest model MVC

wzorzec MVC – skrót od Model View Controller - Model Widok Kontroler wymyślony został w laboratoriach PARC (Palo Alto Research Centre) firmy Xerox w latach '70 MVC został wykorzystany do zaprojektowania interfejsu użytkownika w języku Smalltalk pierwszego zastosowania MVC w aplikacjach internetowych dokonała firma Sun na potrzeby Javy Model View Controller

MVC przedstawiany jest jako dobra architektura aplikacji internetowej jest sposobem na oddzielenie poszczególnych części składowych aplikacji definiuje trzy podstawowe elementy aplikacji, które są od siebie niezależne i pozwalają na dużą elastyczność. Model View Controller

Wzorzec MVC pozwala na: oddzielenie od siebie logiki biznesowej (jak i gdzie dane są przechowywane, kto ma do nich dostęp, jak dane są przetwarzane), logiki prezentacyjnej oraz sterowania aplikacją, dużą elastyczność podczas budowania, użytkowania i rozszerzania aplikacji Model View Controller

Wzorca Model View Controller powinniśmy używać jeżeli: aplikacja ma być rozbudowana i skomplikowana aplikacja musi być elastyczna, mieć możliwość rozbudowy pracuje nad nią wielu programistów, dzięki temu możemy w łatwy sposób podzielić odpowiedzialność za poszczególne moduły składowe Model View Controller

Model jest odpowiedzialny za tzw. logikę biznesową. Jest odpowiedzialny za przechowywanie danych. Udostępnia on spójny interfejs i ukrywa właściwą implementację, więc obiekt używający modelu nie musi wiedzieć, czy dane przechowywane są w bazie danych czy w plikach. Dla obiektu ważne jest, aby model miał API, które on zna. Model Logika biznesowa występuje zwykle w dużych systemach gdzie dane są dostarczane przez inne systemy funkcjonujące w organizacji. Jest spójna z procesami zachodzącymi w organizacji i niejako odzwierciedla je.

Cechą charakterystyczną jego funkcjonalności jest to, że jeżeli będziemy mieli dwie klasy modelu, jedną operując na bazie, drugą na plikach i obie będą miały ten sam interfejs, możemy je wymieniać, bez obawy, że program przestanie działać. Model

Model powinien być jedyną częścią aplikacji, która przechowuje dane w sposób trwały. Sposób przechowywania tych danych jest tutaj zupełnie obojętny - może to być baza danych, pliki tekstowe, itd. Ważne jest, aby szczegóły implementacyjne związane ze sposobem, w jaki model przechowuje dane, były ukryte przed resztą aplikacji. Model powinien dostarczać innym komponentom spójnego interfejsu do przetwarzania tych danych i ukrywać implementację - np. zapytania SQL. Model - podsumowanie

Widok jest częścią aplikacji odpowiedzialną za wyświetlenie danych. Wymieniając widok możemy zmieniać sposób wyświetlania danych, np. pomiędzy HTML, RSS, XML, flash, pdf, doc, itd. Widok

Widok powinien pobierać dane z modelu i formatować je do pożądanego formatu Widok nie posiada informacji o sposobie przechowywania danych Widok nie może w żaden sposób zmieniać danych - może je wyłącznie wyświetlać Widok powinien utworzyć instancje klas modelu i wywołać metody odpowiedzialne za pobranie odpowiednich danych Widok to przede wszystkim kod, który "wyciąga" z modelu potrzebne dane Widok

Kontroler jest sercem całej aplikacji Odpowiedzialny jest za przetwarzanie zadań i wywoływanie właściwej akcji lub widoku Sterownik powinien być częścią świadomą żądania HTTP Na podstawie analizy żądania Sterownik powinien zdecydować, jakie akcje należy wykonać i jaki widok wyświetlić Kontroler = sterownik

Jeżeli aplikacja ma wyświetlić pewne dane, wywoływany jest widok W celu oprogramowania możliwości modyfikacji danych, należy do sterownika wprowadzić akcje Akcja jest to pojedyncza czynność wykonywana przez aplikacje. W najczęstszym przypadku akcja jest klasą, która wywołana przez kontroler zwraca nazwę widoku do wyświetlenia. Przykłady akcji to:  Dodaj użytkownika()  Wyświetl artykuły()  Dodaj produkt do koszyka() Kontroler = sterownik

Sterownik używa parametrów zawartych w URLu lub w danych POST, aby wybrać widok. Typowy adres URL będzie miał postać: index.php?widok=ListaUżytkowników Kontroler = sterownik

Wzorzec MVC można implementować na wiele sposobów.

Przykład klasy modelu

Przykład klasy widoku

Przykład klasy kontrolera, cz.1.

Przykład klasy kontrolera, cz. 2.

Uruchomienie MVC

Czym jest model MVC(B)L

Kontroler => sterownik przepływu Model => emanacja źródła danych, np. bazy danych Widok => prezentacja danych użytkownikowi MVC(B)L => Model View Controller (Business) Logic Logika biznesowa => algorytmy modelujące procesy zachodzące w firmie, organizacji, itp., np.:  obliczanie podatków  składanie i sprawdzanie zamówienia  obliczanie raty kredytu  itd. Logika biznesowa => osobne klasy, osobna warstwa

JavaScript

function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } JavaScript in Head A Paragraph. Try it document.getElementById

My First Web Page My first paragraph. document.write(5 + 6); document.write

Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console" in the debugger menu. console.log(5 + 6); console.log

JavaScript Statements Statements are separated by semicolons. The variables x, y, and z are assigned the values 5, 6, and 11: var x = 5; var y = 6; var z = x + y; document.getElementById("demo").innerHTML = z; var ;

var pi = 3.14; var person = "John Doe"; var answer = 'Yes I am!'; var person = "John Doe", carName = "Volvo", price = 200; Zmienne

Comments are NOT Executed var x = 5; // var x = 6; I will not be executed document.getElementById("demo").innerHTML = x; Komentarze

/* The code below will change the heading with id = "myH" and the paragraph with id = "myp" in my web page: */ document.getElementById("myH").innerHTML = "My First Page"; document.getElementById("myP").innerHTML = "My first paragraph."; Note: The comment block is not executed. Komentarze

JavaScript is Case Sensitive Try change lastName to lastname. var lastName = "Doe"; var lastname = "Peterson"; document.getElementById("demo").innerHTML = lastName; Rozróżnianie wielkości liter

Słowa kluczowe

Poniższych słów kluczowych nie powinno się używać w nazewnictwie: zmiennych, funkcji i obiektów

Słowa kluczowe Poniższych słów kluczowych nie powinno się używać w nazewnictwie: obiektów, właściwości i metod

Słowa kluczowe plus wiele innych:

JavaScript Numbers Number can be written with or without decimals. document.getElementById("demo").innerHTML = 10.50; Wartości liczbowe

var x1 = 34.00; var x2 = 34; var y = 123e5; var z = 123e-5; document.getElementById("demo").innerHTML = x1 + " " + x2 + " " + y + " " + z Wartości liczbowe

var myNumber = 128; myNumber.toString(16); // returns 80 myNumber.toString(8); // returns 200 myNumber.toString(2); // returns Wybrane operacje na liczbach var x = 2 / 0; // x will be Infinity var y = -2 / 0; // y will be -Infinity var x = 100 / "Apple"; // x will be NaN (Not a Number)

var x = 9.656; x.toExponential(2); // returns 9.66e+0 x.toExponential(4); // returns e+0 x.toExponential(6); // returns e+0 Wybrane operacje na liczbach var x = 9.656; x.toFixed(0); // returns 10 x.toFixed(2); // returns 9.66 x.toFixed(4); // returns x.toFixed(6); // returns

parseInt("10"); // returns 10 parseInt("10.33"); // returns 10 parseInt(" "); // returns 10 parseInt("10 years"); // returns 10 parseInt("years 10"); // returns NaN Wybrane operacje na liczbach parseFloat("10"); // returns 10 parseFloat("10.33"); // returns parseFloat(" "); // returns 10 parseFloat("10 years"); // returns 10 parseFloat("years 10"); // returns NaN

Math.random() returns a random number betwween 0 and 1. Try it function myFunction() { document.getElementById("demo").innerHTML += Math.random() + " "; } Obiekt Math Math.random()

Math.min(0, 150, 30, 20, -8); // returns -8 Math.max(0, 150, 30, 20, -8); // returns 150 Obiekt Math Math.min() and Math.max() Math.round(4.7); // returns 5 Math.round(4.4); // returns 4 Math.round() Math.ceil(4.4); // returns 5 Math.ceil() Math.floor(4.7); // returns 4 Math.floor(Math.random() * 11); // returns a random number between 0 and 10 Math.floor()

Math.E; // returns Euler's number Math.PI; // returns PI Math.SQRT2; // returns the square root of 2 Math.SQRT1_2; // returns the square root of 1/2 Math.LN2; // returns the natural logarithm of 2 Math.LN10; // returns the natural logarithm of 10 Math.LOG2E; // returns base 2 logarithm of E Math.LOG10E; // returns base 10 logarithm of E Obiekt Math Stałe

Obiekt Math Popularne funkcje

Operatory przypisania

var x = true; var y = false; document.getElementById("demo").innerHTML = x + " "; document.getElementById("demo").innerHTML += x + y - x; Wartości boolowskie

Operatory porównania

Operatory logiczne

Warunki Try it function myFunction() { var greeting; var time = new Date().getHours(); if (time < 10) { greeting = "Good morning"; } else if (time < 20) { greeting = "Good day"; } else { greeting = "Good evening"; } document.getElementById("demo").innerHTML = greeting; }

Wybory Kliknij function myFunction() { var text; switch (new Date().getDay()) { case 6: text = "Dzisiaj jest sobota"; break; case 0: text = "Dzisiaj jest niedziela"; break; default: text = "Czekamy na weekend :)"; } document.getElementById("demo").innerHTML = text; }

var cars = ["Saab","Volvo","BMW"]; document.getElementById("demo").innerHTML = cars[0]; Tablice

var num = [[1,2,3],[4,5,6],[7,8,9]]; document.getElementById("demo").innerHTML = num[0][0]; document.getElementById("demo").innerHTML += num[1][1]; Tablice

var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo").innerHTML = fruits + " "; document.getElementById("demo").innerHTML += fruits.sort() + " "; document.getElementById("demo").innerHTML += fruits; document.writeln(fruits.length); document.writeln(fruits.indexOf("Orange")); document.writeln(fruits.join(" * ")); Tablice – wybrane operacje na tablicach

Try it var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo").innerHTML = fruits; function myFunction() { fruits[fruits.length] = "Kiwi"; document.getElementById("demo").innerHTML = fruits; } Tablice – dodawanie elementów do tablicy var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.push("Kiwi"); var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.unshift("Lemon"); var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2, 0, "Lemon", "Kiwi"); var arr1 = ["Cecilie", "Lone"]; var arr2 = ["Emil", "Tobias","Linus"]; var arr3 = ["Robin", "Morgan"]; var arr4 = arr1.concat(arr2, arr3);

JavaScript – LINQ

for (i = 0; i "; } for (i = 0, len = cars.length, text = ""; i "; } Pętla for var i = 0; var len = cars.length; for (; i "; i++; } var suma = 0; var liczby = [1,2,3,4]; for (var x in liczby) { suma+=liczby[x]; } document.writeln( suma);

while (i < 10) { text += "The number is " + i; i++; } Pętla while do { text += "The number is " + i; i++; } while (i < 10);

JavaScript Strings Strings can be written with double or single quotes. document.getElementById("demo").innerHTML = 'John Doe'; Ciągi tekstowe

JavaScript Variables Add "John" + " " + "Doe": var x = "John" + " " + "Doe" ; document.getElementById("demo").innerHTML = x; Ciągi tekstowe

JavaScript Variables Add "5" and display the result: var x = "5" ; document.getElementById("demo").innerHTML = x; Ciągi tekstowe

var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ"; document.writeln(txt.length); document.writeln(txt.charAt(1)); document.writeln(txt.charCodeAt(1)); document.writeln(txt.concat("0", "1", "2")); document.writeln(txt.toLowerCase().indexOf("b")); document.writeln(txt.replace("A","=")); document.writeln(txt.substr(1,3)); document.writeln(txt.substring(1,3)); document.writeln(txt.replace("b","=").replace("M","=").split("=")[1]); document.writeln(["a", "b"].toString().replace(",","")); document.writeln(String.fromCharCode(97,98,99).toUpperCase()); Wybrane operacje na ciągach tekstowych

document.getElementById("demo").innerHTML = Date(); Data i czas

new Date() new Date(milliseconds) new Date(dateString) new Date(year, month, day, hours, minutes, seconds, milliseconds) Data i czas var d = new Date("October 13, :13:00"); document.getElementById("demo").innerHTML = d; var d = new Date( ); document.getElementById("demo").innerHTML = d; var d = new Date(99,5,24,11,33,30,0); document.getElementById("demo").innerHTML = d;

var d = new Date(); document.getElementById("demo").innerHTML = d.toString() + " "; document.getElementById("demo").innerHTML += d.toUTCString()+ " "; document.getElementById("demo").innerHTML += d.toDateString(); Data i czas

var d = new Date(); document.writeln( d.getFullYear()); document.writeln( d.getSeconds()); var days = ["Niedziela","Poniedziałek","Wtorek","Środa","Czwartek","Piątek","Sobota"]; document.writeln("Dzisiaj jest " + days[d.getDay()].toLowerCase()); Data i czas

var today, someday, text; today = new Date(); someday = new Date(); someday.setFullYear(2100, 0, 14); if (someday > today) { text = "Today is before January 14, 2100."; } else { text = "Today is after January 14, 2100."; } document.getElementById("demo").innerHTML = text; Data i czas – porównywanie dat

var person = { firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue" }; document.getElementById("demo").innerHTML = person.firstName + " is " + person.age + " years old."; Obiekty

var person = { firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue", info : function() {return this.firstName + ' ' + this.lastName;} }; document.getElementById("demo").innerHTML = person.info(); Obiekty

The typeof operator returns the type of a variable or an expression. document.getElementById("demo").innerHTML = typeof "john" + " " + typeof " " + typeof false + " " + typeof [1,2,3,4] + " " + typeof {name:'john', age:34}; Operator typeof typeof function () {} // function typeof myCar // undefined (if myCar is not declared) typeof null // object

Accessing a function without (), will return the function definition: function toCelsius(f) { return (5/9) * (f-32); } document.getElementById("demo").innerHTML = toCelsius; document.getElementById("demo").innerHTML += " " + toCelsius(32); Funkcje

A local variable can only be accessed from within the function where it was declared. myFunction(); document.getElementById("demo").innerHTML = "I can display " + typeof carName; function myFunction() { var carName = "Volvo"; } Zasięg zmiennych w funkcjach – zmienna lokalna

A GLOBAL variable can be accessed from any script or function. var carName = "Volvo"; myFunction(); function myFunction() { document.getElementById("demo").innerHTML = "I can display " + carName; } Zasięg zmiennych w funkcjach – zmienna globalna

If you assign a value to a variable that has not been declared, it will automatically become a GLOBAL variable: myFunction(); document.getElementById("demo").innerHTML = "I can display " + carName; function myFunction() { carName = "Volvo"; } Zasięg zmiennych w funkcjach – zmienna automatycznie globalna

function suma(x, y) { if (y === undefined) { y = 0; } return x + y; } licz Funkcje – parametry opcjonalne

function suma(x, y) { y = y || 0; return x + y; } licz Funkcje – parametry opcjonalne

function suma_elem_tabl() { var suma=0; for (var i=0; i<arguments.length; i++){ suma+=arguments[i]; } return suma; } alert(suma_elem_tabl(1, 2, 3, 0)); Funkcje – niezdefiniowana liczba parametrów wejściowych

Wyjątki try { Block of code to try } catch(err) { Block of code to handle errors } finally { Block of code to be executed regardless of the try / catch result }

try { pokaz_wiadomosc("Welcome guest!"); } catch(err) { document.getElementById("demo").innerHTML = "Błąd!! " + err.message; } Wyjątki

Please input a number between 5 and 10: Test Input function myFunction() { var message, x; message = document.getElementById("message"); message.innerHTML = ""; x = document.getElementById("demo").value; try { x = Number(x); if(x == "") throw "is empty"; if(isNaN(x)) throw "is not a number"; if(x > 10) throw "is too high"; if(x < 5) throw "is too low"; message.innerHTML = "Your number is: " + x; } catch(err) { message.innerHTML = "Input " + err; } finally { document.getElementById("demo").value = ""; } Wyjątki

function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } Zdarzenia dot. przeciągnięcia i upuszczenia elementu

function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } Zdarzenia dot. przeciągnięcia i upuszczenia elementu

Element CANVAS

Element ten jest nowością wprowadzoną w HTML5 Działa wyłącznie w przeglądarkach kompatybilnych z HTML5 Umożliwia wyświetlanie plików graficznych oraz ich obróbkę Umożliwia rysowanie

Element CANVAS Brak obsługi elementu canvas

Kontekst renderowania i proste rysowanie Element CANVAS

Kontekst renderowania moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); Element CANVAS

Rysowanie Element CANVAS Brak obsługi elementu canvas moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); //pobieranie kontekstu 2d kontekst.fillStyle='red'; //styl wypełniania kontekst.fillRect(5,20,100,100); //tworzenie wypełnionego prostokąta kontekst.fillStyle='blue'; kontekst.fillRect(15,40,120,50); kontekst.fill(); //proces wypełnienia

Rysowanie Element CANVAS Brak obsługi elementu canvas moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); kontekst.fillStyle='red'; kontekst.fillRect(5,20,100,100); kontekst.strokeStyle='blue'; //kolor linii kontekst.lineWidth=5; //grubość linii kontekst.strokeRect(15,40,120,50); //rysowanie kwadratu bez wypełnienia

Rysowanie – czyszczenie obszaru Element CANVAS moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); function wyczysc() { kontekst.clearRect(0,0,moj_canvas.width,moj_canvas.height); }

Rysowanie – prosta animacja Element CANVAS moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); moj_canvas.style.position='absolute'; moj_canvas.style.top=0; moj_canvas.style.left=0; function wyczysc() { kontekst.clearRect(0,0,moj_canvas.width,moj_canvas.height); } //(...)

Rysowanie – prosta animacja Element CANVAS //(...) function koloruj(){ kontekst.fillStyle="rgb(" + Math.round(Math.random()*255) + "," + Math.round(Math.random()*255) + "," + Math.round(Math.random()*255) + ")"; kontekst.fillRect(Math.random()* moj_canvas.width/2,Math.random()* moj_canvas.height/2,Math.random()* moj_canvas.width,Math.random()* moj_canvas.height); } //(...)

Rysowanie – prosta animacja Element CANVAS //(...) function animacja() { moj_canvas.width=window.innerWidth; moj_canvas.height=window.innerHeight; wyczysc(); koloruj(); setTimeout("animacja()", 200); } animacja(); //(...)

Ładowanie obrazków w elemencie canvas Element CANVAS

Ładowanie obrazków Element CANVAS Brak obsługi elementu canvas pic = new Image(); pic.src=' racow_University_of_Technology_-_Politechnika_Krakowska.jpg/240px- Cracow_University_of_Technology_-_Politechnika_Krakowska.jpg'; moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); kontekst.drawImage(pic, 0,0); // (obiekt typu obrazek, wsp. X, wsp. Y)

Ładowanie obrazków – dodanie cienia Element CANVAS pic = new Image(); pic.src=' racow_University_of_Technology_-_Politechnika_Krakowska.jpg/240px- Cracow_University_of_Technology_-_Politechnika_Krakowska.jpg'; moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); kontekst.shadowColor='black'; kontekst.shadowOffsetX=0; kontekst.shadowOffsetY=0; kontekst.shadowBlur=10; //rozmycie kontekst.drawImage(pic, 10,10); // (obiekt typu obrazek, wsp. X, wsp. Y)

Ładowanie obrazków – zapis obrazka na dysk Element CANVAS

Ładowanie obrazków – kiedy brak obsługi elementu canvas Element CANVAS

Proste filtrowanie do nadawania odcieni obrazkom Element CANVAS

Proste filtrowanie – użycie funkcji rgba Element CANVAS pic = new Image(); pic.src=' racow_University_of_Technology_-_Politechnika_Krakowska.jpg/240px- Cracow_University_of_Technology_-_Politechnika_Krakowska.jpg'; moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); kontekst.drawImage(pic, 0,0); kontekst.fillStyle='rgba(0,255,0, 0.2)'; kontekst.fillRect(0,0,pic.width,pic.height); kontekst.fill();

Proste filtrowanie – użycie funkcji rgba Element CANVAS pic = new Image(); pic.src=' racow_University_of_Technology_-_Politechnika_Krakowska.jpg/240px- Cracow_University_of_Technology_-_Politechnika_Krakowska.jpg'; moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); kontekst.drawImage(pic, 0,0); kontekst.fillStyle='rgba(0,255,0, 0.2)'; kontekst.fillRect(0,0,pic.width/2,pic.height); kontekst.fillStyle='rgba(255,0,0, 0.2)'; kontekst.fillRect(pic.width/2,0, pic.width/2, pic.height); kontekst.fill();

Animacja filtrami / 1 Element CANVAS pic = new Image(); pic.src=' ersity_of_Technology_-_Politechnika_Krakowska.jpg/240px- Cracow_University_of_Technology_-_Politechnika_Krakowska.jpg'; moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); moj_canvas.width=pic.width; moj_canvas.height=pic.height; pozf1left=2; //pozycja filtru pierwszego od lewej strony pozf1top=2; //pozycja filtru pierwszego od góry pozf2left=pic.width/2; pozf2top=0; pozxf1=1; //kierunek poruszania sie na x pozyf1=1; pozxf2=-1; pozyf2=-1;

Animacja filtrami / 2 Element CANVAS function animacja2() { kontekst.drawImage(pic, 0,0); kontekst.fillStyle='rgba(0,255,0, 0.5)'; if (pozf1left+100 >= moj_canvas.width) {pozxf1 = -1;} if (pozf1top+100 >= moj_canvas.height) {pozyf1 = -1;} if (pozf1left <= 0) {pozxf1 = 1;} if (pozf1top <= 0) {pozyf1 = 1;} if (pozf2left+100 >= moj_canvas.width) {pozxf2 = -1;} if (pozf2top+100 >= moj_canvas.height) {pozyf2 = -1;} if (pozf2left <= 0) {pozxf2 = 1;} if (pozf2top <= 0) {pozyf2 = 1;}

Animacja filtrami / 3 Element CANVAS pozf1left= pozf1left + 10*pozxf1; pozf1top= pozf1top + 10*pozyf1; pozf2left= pozf2left + 10*pozxf2; pozf2top= pozf2top + 10*pozyf2; kontekst.fillRect(pozf1left,pozf1top,100,100); kontekst.fillStyle='rgba(255,0,0, 0.5)'; kontekst.fillRect(pozf2left,pozf2top, 100, 100); kontekst.fill(); setTimeout("animacja2()",200); } animacja2();

Rysowanie bardziej złożone Element CANVAS

Rysowanie – linie Element CANVAS moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); kontekst.beginPath(); kontekst.moveTo(10,10); kontekst.lineTo(100,10); kontekst.closePath(); kontekst.strokeStyle='red'; kontekst.stroke();

Rysowanie – linie – wypełnienie narysowanego kształtu, tekst Element CANVAS moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); kontekst.beginPath(); kontekst.moveTo(10,10); kontekst.lineTo(100,10); kontekst.lineTo(150,60); kontekst.lineTo(100,150); kontekst.lineTo(10,10); kontekst.closePath(); kontekst.strokeStyle='red'; kontekst.stroke(); kontekst.fillStyle='blue'; kontekst.fill(); kontekst.font = "20px Arial"; kontekst.fillText("Dziwny kształt", 10,170);

Rysowanie – łuki Element CANVAS moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); //kontekst.arc(x środka,y środka, promień,kąt startowy, kąt końcowy, czy zgodnie z ruchem wskazówek zegara);

Rysowanie – łuki Element CANVAS moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); //radiany = (Math.PI / 180) * stopnie w = Math.PI / 180; kontekst.beginPath(); kontekst.arc(250,250, 100,0, w*90, false); kontekst.stroke(); kontekst.closePath();

Rysowanie – łuki Element CANVAS moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); //radiany = (Math.PI / 180) * stopnie w = Math.PI / 180; kontekst.beginPath(); kontekst.arc(250,250, 100,0, w*180, false); kontekst.stroke(); kontekst.closePath();

Rysowanie – łuki Element CANVAS moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); //radiany = (Math.PI / 180) * stopnie w = Math.PI / 180; kontekst.beginPath(); kontekst.arc(250,250, 100,0, w*180, false); kontekst.stroke(); kontekst.closePath(); kontekst.fillStyle='red'; kontekst.fill();

Rysowanie – łuki – animacja / 1 Element CANVAS moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); kontekst.lineWidth=5; w = Math.PI / 180; kat= 0; ikat=15; function animacja3(){ kat=kat+ikat;

Rysowanie – łuki – animacja / 2 Element CANVAS if (kat>=360 + ikat) { kat=0; kontekst.strokeStyle="rgb(" + Math.round(Math.random()*255) + "," + Math.round(Math.random()*255) + "," + Math.round(Math.random()*255) + ")"; } document.title=kat; //kontekst.clearRect(0,0,moj_canvas.width, moj_canvas.height); kontekst.beginPath(); kontekst.arc(250,250, 100,0, w*kat, false); kontekst.stroke(); kontekst.closePath(); setTimeout("animacja3()", 100); } animacja3();

Rysowanie – zadanie Element CANVAS

Rysowanie – krzywa Beziera Element CANVAS moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); kontekst.beginPath(); kontekst.moveTo(20,20); kontekst.bezierCurveTo(20,100,200,100,200,20); kontekst.stroke();

Rysowanie – krzywa Beziera Element CANVAS moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); kontekst.fillStyle = 'red'; kontekst.beginPath(); kontekst.moveTo(75,40); kontekst.bezierCurveTo(75,37,70,25,50,25); kontekst.bezierCurveTo(20,25,20,62.5,20,62.5); kontekst.bezierCurveTo(20,80,40,102,75,120); kontekst.bezierCurveTo(110,102,130,80,130,62.5); kontekst.bezierCurveTo(130,62.5,130,25,100,25); kontekst.bezierCurveTo(85,25,75,37,75,40); kontekst.fill();

Element AUDIO Umieszczanie dźwięków na stronie internetowej

autoplay Element AUDIO

controls Element AUDIO

preload Element AUDIO

preload Ładowanie wyłącznie metadanych Brak wstępnego ładowania Ładowanie całości pliku Element AUDIO

loop Element AUDIO

source Element AUDIO

parametr type Element AUDIO

parametr type - kodeki Element AUDIO

JavaScript Element AUDIO

Element VIDEO Umieszczanie filmów na stronie internetowej

Element VIDEO

source Element VIDEO

type i codecs Element VIDEO

poster Element VIDEO

preload, loop, autoplay Element VIDEO

HTML 5 SVG (Scalable Vector Graphics)

HTML 5 SVG Główna cecha: są to obiekty graficzne, zapamiętywane jako obiekty przez przeglądarkę (w CANVAS ma miejsce renderowanie piksel po pikselu). SVG zalecane jest do renderowania dużych przestrzeni – np. Google Maps

HTML 5 SVG - KOŁO <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"> Sorry, your browser does not support inline SVG.

HTML 5 SVG - PROSTOKĄT

HTML 5 SVG – ZAOKRĄGLONY PROSTOKĄT

HTML 5 SVG – GWIAZDA

HTML 5 SVG – LOGO SVG Sorry, your browser does not support inline SVG.

C. D. N.