Posumowanie informacji o Tablicach, Obiektach, JQuery, AJAX, JSON oraz nowych obiektach HTML5: Canvas i Audio

Tablice

var tablica = []; 
var tablica = new Array(); 
tablica.push(element); //dodanie elementu do tablicy 
var element = tablica.pop(); //usuniecie ostatniego elementu z tablicy 
tablica[1] = element; //przypisanie elementu jako DRUGI element tablicy 
var element = tablica[3]; //pobranie CZWARTEGO elementu tablicy
var dlugosc = tablica.length; //ilosc elementów w tablicy

Obiekty

var obiekt = {}; //pusty obiekt bez żadnych właściwości 
obiekt.kolor = "czerwony"; //utworzenie i przypisanie własciwosci kolor 
obiekt.elementy = [1,2,3]; //utworzenie i przypisanie własciwosci elementy jako tablicy 
var kolor = obiekt.kolor; //odczytanie wlasciwosci kolor

Klasy

function Punkt(x,y) { 
   this.x = x; //utworzenie właściwości x i przypisanie jej wartosci podanej przez uzytkownika 
   this.y = y; //utworzenie właściwości y i przypisanie jej wartosci podanej przez uzytkownika

   //funkcja klasy obliczająca długość wektora
   this.Length = function() { 
   return = Math.sqrt(this.x*this.x + this.y * this.y) 
   //this oznacza że korzystamy z właściwości x a nie ze zmiennej x 
 } 
}

tworzenie obiektu klasy Punkt

var p1 = new Punkt(10,5); 
var dlugosc = p1.Length();

JQuery

biblioteka ułatwiająca wiele czynności w JavaScript

użycie JQuery w kodzie strony:

<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>

klasycznie:

var elem = document.getElementById("info"); 
elem.innerHTML = "tekst"

jQuery:

$("#info").html("tekst");

klasycznie:

var elem = document.getElementById("liczba"); 
var liczba = elem.value;

jQuery:

var liczba = $("#info").val();

selektor (argument funkcji $) tworzy się identycznie jak w przypadku styli CSS

$("#info") //element o id=info
$(".sel") //element (elementy) o class="sel"

aby kod JQuery wykonał się po załadowaniu strony należy go umieścić w funkcji:

$(document).ready(function () {
    //tutaj kod jQuery
});

typowe użycie

$(".sel").removeClass("sel") //usunięcie klasy sel z wszystkich elementów które tą klasę zawierają 
$("div a").addClass("sel") // dodanie klasy sel do wszystkich elementów a będących dzieckiem div 
$("#menu").fadeIn() // płynne wyświetlenie elementu id=menu 
$("#menu").fadeOut() // płynne ukrycie elementu id=menu 
$("#menu").show() // wyświetlenie elementu (natychmiastowe) 
$("#menu").hide() // ukrycie elementu (natychmiatowe) 
$("#menu").animate({left: 100, width: 50},500) // animowane ustawienie właściwości left i width elmentu id=menu, animacja trwa 500ms 
$("#menu").click(function () { 
 //kod do wykonania gdy kliknieto w obiekt o id=menu 
})

AJAX

dynamiczne ładowanie zawartości strony

$("#content").load(url) // załadowanie do elementu id=content strony z adresu url (nie chrome)

UWAGA: kodowanie strony pod adresem url musi być UTF-8

ASCII - znaki 0..127 - jeden znak = jeden bajt
ISO-8859-2 , WINDOWS 1250 - kodowanie polskich zanków (przy wykorzystaniu kodów 128..255)
UTF-16 - rozszerzona tablica znaków: 65536 znaki, jeden znak = dwa bajty
UTF-8 - mix ASCII i UTF-16, znaki 0..127 na jednym bajcie, pozostałe na dwóch i więcej bajtach
BOM - znaki na początku pliku tekstowego informujące o kodowaniu tego pliku

Włączenie AJAX dla lokalnych plików w Chrome

Chrome domyslnie nie obsługuje AJAX dla plików lokalnych, trzeba korzystać z serwera. Istnieje jednak sposób na omienięcie tych zabezpieczeń, należy Chrome uruchomić z parametrem:

--disable-web-security

Najprościej zrobić to tak:

• skopiować skrót do Chrome do Moje Dokumenty
• zamknąc wszystkie instancje Chrome
• wyedytować właściwości skrótu
• w "element docelowy" dopisać: [spacja]--disable-web-security
• uruchomic Chrome z nowo utworzonego skrótu, powinien po uruchomieniu pojawić się żółty pasek na górze informujacy o opcji --disable-web-security

JSON = AJAX dla JavaScript

ładowanie danych JavaScript z innego adresu url

zawartość pliku dane.js (koniecznie w UTF-8):

{"Title": "Tytuł", "Content": "Zawartość"}

skrypt na stronie:

url = "dane.js"; 
$.getJSON(url,function (data) { 
 alert(data.Title); //wyswietli: Tytuł 
 alert(data.Content); //wyświetli: Zawartość 
});

HTML5 - Canvas

wstawianie obiektu canvas (płótno do rysowania) na stronę

<canvas id="canvas" width="400" height="300" >Twoja przegladarka nie obsługuje canvas</canvas>

przykładowy kod:

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
ctx.lineWidth = 3; // ustalanie szerokości rysowanych linii 
ctx.beginPath(); //początek ścieżki rysowania 
ctx.moveTo(10,10); //przesuniecie do punktu 10,10 liczonego od lewego górnego rogu 
ctx.lineTo(100,100); //rysowanie linii 
ctx.stroke(); //narysowanie ścieżki

inne polecenia

ctx.strokeStyle ='#FFFF00'; //ustala kolor linii 
ctx.arc(10,10, 5, 0, Math.PI * 2); //rysuje okrąg o środku 10,10 i promieniu 5 
ctx.rect(10,10,200,100); //rysuje prostokąt o szerokosci 200 i wysokości 100 
ctx.font = "italic 40px Calibri"; //ustala czcionkę dla fillText 
ctx.fillText("Tekst", x, y); //wypisuje tekst w miejscu x,y

Więcej tutaj: http://www.w3schools.com/tags/ref_canvas.asp

HTML5 - Audio

wstawianie obiektu audio na stronę:

<audio id="audio" controls src="plik.mp3">Twoja przeglądarka nie obsługuje audio</audio>

controls - oznacza wyświetlenie odtwarzacza i przycisków kontroli

ustawianie piosenki za pomocą JavaScript:

var audio = document.getElementById("audio"); 
audio.src = "plik.mp3"; 
audio.play(); //rozpoczecie odtwarzania

inne polecenia

audio.pause(); //zatrzymanie odtwarzania 
var totaltime = audio.duration; //zwraca długość utworu w sekundach 
var currenttime = audio.currentTime; //zwraca bieżącą pozycję w utworze w sekundach
audio.volume = 0.5; //ustawianie głośności, liczba z zakresu 0..1
audio.muted = false; //czy wyciszyć dźwięk

zdarzenia obiektu audio

ontimeupdate // wystepuje za każdym razem gdy zmieni się currentTime
onplay //gdy wcisnieto play
onpause //gdy zatrzymano

Więcej tutaj: http://www.w3schools.com/tags/ref_av_dom.asp

Zadania

1. JQuery

kod strony

<button id="show">Pokaż</button> 
<button id="hide">Ukryj</button> 
<div id="content">To jest treść artykułu</div>

Przy użyciu jQuery, bez zmiany kodu strony:
1. Po przyciśnięciu przycisku Pokaż - pokazać content, po przyciśnieciu Ukryj - ukryć
2. Dodać klasę (w JQuery) sel (wczesniej ją opsać w arkuszu styli) do elementu content w momencie przyciśniećia Pokaż
3. Pokaż -przed pokazaniem ładuje przez AJAX stronę content.htm i umieszcza w elemencie #content

2. Canvas

Narysować domek: kwadrat, trójkąt jako dach, dwa okna i drzwi

3. Audio

Sciągnąc 3 utwory mp3, utworzyć plik muzyka.js w którym wpisujemy coś na wzór (w url wpisać swoje nazwy plików)

{"Tracks": [ 
{"Title" : "Piosenka 1", "Url" : "plik1.mp3"}, 
{"Title" : "Piosenka 2", "Url" : "plik2.mp3"}, 
{"Title" : "Piosenka 3", "Url" : "plik2.mp3"} 
]}

kod strony

<div id="title"></div> 
<audio id="audio" controls>Twoja przeglądarka nie obsługuje audio</audio> 
<button id="loadlist">Load list</button> 
<button id="prev"> Prev song </button> 
<button id="next">Next song</button>

Zadanie

po przyciśnieciu LoadList, przyużyciu JSON załadować listę piosenek z pliku muzyka.js i załadować pierszą piosenkę z listy do audio, w div id=title wypisać tytuł piosenki.
Wcisniecie Next - przejscie do następnej piosenki (jeśli koniec listy, do do pierwszej).
Wcisniecie Prev - przejscie do poprzedniej piosenki (jeśli gra pierwsza piosenka to skoczyć do jej początku porzez ustawienie currentTime = 0)