HTML5 i inne

Czego można dowiedzieć się na tej stronie?

Na tej stronie postaram się zamieścić jakieś ważne informacje na temat HTML-a (a także innych technologii związanych z tworzeniem stron internetowych) w możliwie przejrzystej formie. Zapraszam :).

Zmienne w JavaScript

Liczby(Number), np: var a = 5;
Ciąg znaków(String), np: var b = "napis";
Wartości logiczne(Boolean), np: var c = false; var d = true;
Tablice(Array), np: var tab = [0, 1, 2, 3, 4]; Numerowane od 0 (tab[0] === 1 itd)
Tablice asocjacyjne(wł. obiekty) w indeksach mogą przyjmować String, np:
osoba["imie"] = Luiza
Przykładowe metody:
- tab.length - długość/wielkość tablicy(ostatni indeks + 1)
- alert(tab) - wyświetla całą zawartość tablicy
- tab.push('element') - dodaje element na końcu tablicy i zwraca nową długość tablicy
- tab.pop('element') - usuwa element z końca tablicy i zwraca go
Pustka(null), np: var f = null;
Undefined(niezdefiniowane), np: var g;

Operatory arytmetyczne

+ (dodawanie)
- (odejmowanie)
/ (dzielenie)
* (mnożenie)
'var' += 'liczba' (dodanie do zmiennej liczby)
'var' -= 'liczba' (odjęcie do zmiennej liczby)
'var' /= 'liczba' (podzielenie zmiennej przez liczbę)
'var' %= 'liczba' (reszta z dzielenia zmiennej przez liczbę)
'var' *= 'liczba' (mnożenie zmiennej przez liczbę)
++y (pre-inkrementacja - dodaj i potem wyświetl)
y++ (post-inkrementacja - wyświetl i dodaj)
--y (pre-dekrementacja - odejmij i potem wyświetl)
y-- (post-defkrementacja - wyświetl i odejmij)

Operatory relacyjne

== - porównanie (nie muszą być identyczne), np: "3" == 3 to prawda
=== - porównanie czy identyczne, np: "3" == 3 zwróci false, a 3 == 3 zwróci true
a //→; b - czy 'a' większe od 'b'
a < b - czy 'a' mniejsze od 'b'
a <= b - czy 'a' mniejsze lub równe 'b'
a //→= b - czy 'a' większe lub równe 'b'
a != b - czy 'a' różne 'b'

Zasięg zmiennych

1. Funkcje - zasięg globalny:
test()
function test()
{
a=2;
alert(a);
}
2. Zmiana zmiennej globalnej w funkcji:
var a=5;

function test()
{
a=2;
alert(a); //(→2)

}
test();
alert(a);//(→2)
3. Wprowadzenie zmiennej lokalnej do funkcji:
var a=5;

function test(a)
{
a=2;
alert(a); //(→2)

}
test();
alert(a);//(→5)
Jest równoważne z :

var a=5;

function test()
{
   var a;
   a = 2;
   alert(a); //(→2)

}
test();
alert(a);//(→5)
4. Próba wypisania niezdefiniowanej zmiennej:
function test()
{
a=2;
alert(a); //(→2)

}
alert(a);//(nie wypisze nic)
5. Inny przypadek (zmienna w funkcji lokalna, a potem deklaracja i inicjalizacja
function test()
{
a = 2;
alert(a); //→2?
}
test();
var a = 3;
alert(a);

Funkcje anonimowe

1. Definiowanie funkcji anonimowej
var x = function()
{
alert("xxxx");
};

x();//wywołanie funkcji
2. Wysłanie innej funkcji jako parametr i wywołanie tej właśnie funkcji wewnątrz funkcji z parametrem
function test(f)
{
   f();//wywołanie funkcji podanej jako parametr
}

test(
   function() {
     alert("wypisuje coś");
   }
);
3. Wysłanie innej funkcji(x) jako parametr i wywołanie tej właśnie funkcji(i podanie parametru x dla niej) wewnątrz funkcji z parametrem
function test(f)
{
   f(5);//wywołanie funkcji podanej jako parametr
}

test(
   function(x) {
     alert("wypisuje coś + x"); //→ 5(argument w funkcji test)
   }
);
4. Dodanie drugiego parametru do funkcji test:
function test(f, y)
{
   f(y + 5);//wywołanie funkcji podanej jako parametr
}

test(
   function(x) {
     alert("wypisuje coś + x"); //→ 5(argument w funkcji test)
   }, 20
);
5. Inny przykład (funkcja zwracająca funkcję na podstawie argumentu):
var hi = function(type)
{
   if(type === "szef")
      return function(name){
         alert("Cześć szefie, " + name + " !");
      };
   else
      return function(name){
         alert("Cześć" + name + " !");
      };
}

var zwroconaFunkcja = hi("szef");
(      hi = function(name){
         alert("Cześć szefie, " + name + " !");
      };)

Obiekty

1. Tworzenie obiektu (cecha/metoda : wartość)
var osoba = {
   imie: "Rafał",
   nazwisko: "Kotas",
   pobierzInformacje: function() //→ metoda
   {
      return this.imie + " " + this.nazwisko;
   },
   toString: function() //→ obiekt zapisany w postaci String
   {
      return this.imie + " " + this.nazwisko;
   }
};
alert(osoba.imie);//→Rafał
2. Funkcje konstrkcyjne tzw. klasy
function osoba(imie, nazwisko)
{
   //this.imie to co innego niż parametr imie
   this.imie = imie;
   this.nazwisko = nazwisko;
   this.toString = function()
   {
   return this.imie + " " + this.nazwisko;
   };
}
//tworzenie obiektu z funkcji konstrukcyjnej
var me = new osoba("Rafał","Kotas");
3. Dodawanie nowej własności do klasy
a) tylko do jednego obiektu:
me.newValue = "abc";
alert(me.newValue);
b) do klasy (wszystkich obiektów) z zewnątrz
osoba.prototype.specifiedValue = 10;

Pętle

1. Pętla 'while'(wykonuj dopóki spełniony warunek)
var i = 0;
while(i < 5)
{
alert(i) //0,1,2,3,4;
i++;
}
2. Pętla 'do while'(wykonuj dopóki spełniony warunek, przynajmniej 1 raz)
var i = 0;
do
{
alert(i) //0,1,2,3,4;
i++;
} while(i < 5);
3. Pętla 'for'(warunki początkowe; warunek działania pętli; krok)
for (var i = 0; i < 5; i++)
{
alert(i);
}
4. Dopisek - słowa 'break' i 'continue'
Przykłady:

//'break'(przerwij pętlę gdy i===3):
for(var i = 0; i < 5; i++)
{
   alert(i);
   if(i===3)
   {
      break;
   }
}

//'continue'(przejdź do następnej iteracji gdy i===3 wpp wypisz i):
for(var i = 0; i < 5; i++)
{
   if(i!==3)
   {
      alert(i);
   }
   else
   {
      continue;
   }
}
5. Pętla for in
for (var cecha in osoba)
{
alert(cecha);
}

DOM - Document Object Model

1. Metody na elementach dokumentu:
HTML:
<div id="animation_buttons">
<button id="chg_col" onclick="blockButton()">Change color!</button>
<button id="stop_chg" onclick="stopChange()">Stop</button>
</div>
JS:
var element = document.getElementById("chg_col");
nodeName
firstChild("pierwsze dziecko elementu - tekst wewnątrz button")
alert("nodeName(element. , element.firstChild): " + element.nodeName + " " + element.firstChild.nodeName);
Wynik: BUTTON #text
nodeValue
alert("nodeValue(element. , element.firstChild): " + element.nodeValue + " " + element.firstChild.nodeValue);
Wynik: null Change color!
parentNode
alert("parentNode(element. , element.firstChild): " + element.parentNode + " " + element.firstChild.parentNode);
Wynik: [object HTMLDivElement] [object HTMLButtonElement]
childNodes
element.firstChild.childNodes.length→0
element.childNodes.length→1

alert(element.childNodes[0]);
Wynik: [object Text]
firstChild
alert(element.firstChild) ;
Wynik: [object Text]
lastChild (tu childNodes.length===1 więc first === last)
alert(element.lastChild) ;
Wynik: [object Text]
previousSibling
var div_el = document.getElementById("animation_buttons");
alert(element.previousSibling) ; //(1)
div_el.removeChild(div_el.childNodes[0]);
alert(element.previousSibling); //(2)
Wynik(1): [object Text]
Wynik(2): null
nextSibling
alert(element.nextSibling);
Wynik: [object Text](odstęp między znacznikami daje tekst)
attributes
alert(element.attributes);
Wynik: [object NamedNodeMap]

Przykład (nazwa atrybutu (name), wartość atrybutu(value)):
1)alert(element.attributes[0].name);//→id
alert(element.attributes[0].value);//→chg_col
2)alert(element.attributes[1].name);//→onclick
alert(element.attributes[1].value);//→blockButton()

Usuwanie i dodawanie atrybutów (czerwony przycisk):
element.setAttribute("class", "red_button");
element.removeAttribute("class", "red_button");
.red_button
{
background: red;
}
Zawartość tekstowa
innerHTML (z tagami, np <b>,<i> itd)
textContent (sam tekst, wsparcie od IE 8?)

2. querySelector/querySelectorAll() (połowiczne wsparcie w IE 8)
querySelector()
var buttons = document.querySelector("#animation_buttons button");//→[object HTMLButtonElement]
alert(buttons.innerHTML);//→Change color!
querySelectorAll() - tak jak w CSS-ie
var buttons = document.querySelectorAll("#animation_buttons button");
alert(buttons);//→[object NodeList]
alert(buttons[1].innerHTML);//→Stop

3. Inne metody na objekcie document
getElementById()
Zwraca obiekt o danym id(jeden unikalny)
getElementsByTagName()
Zwraca obiekty o danym tagu HTML(tablica)
getElementsByClassName()
Zwraca obiekty o danej klasie
getElementsByName()
Zwraca obiekty o danej nazwie(atrybut name)

4. Zmiana styli w JS
Atrybuty dotyczące stylu można zmieniać przy pomocy następującej reguły:
element.style.'atrybut' = 'wartosc';
Pomoc na stronie: Odpowiedniki CSS w JS

5. Tworzenie/usuwanie elementów na stronie
createElement() - stworzenie obiektu o danym tagu
appendChild() - dodanie elementu na stronę (dziecka)
Przykład:
var x = document.createElement("div");
x.style.width = "400px";
x.style.height = "400px";
x.style.backgroundColor = "yellow";
document.querySelector("body").appendChild(x);
'element'.parentNode.removeChild('element') - usunięcie elementu ze strony (dziecka)
( odnosi się do rodzica elementu i usuwa w nim dziecko, którym jest właśnie ten element )

Eventy - zdarzenia

1.onmouseover - najechanie myszką,
onclick - kliknięcie na element strony (przykłady)
onmouseover //HTML
<div onmouseover="alert('Najechałeś na div z tekstem TUTAJ.')">TUTAJ</div>

TUTAJ
onclick //JS
var m_click = document.getElementById("m_click");
m_click.onclick = alert("m_click clicked!"); //ŹLE! - odrazu wywołanie

m_click.onclick = function(){
alert("m_over clicked");
}; //OK - DOBRZE

CLICK ME
2. Automatyczne odwołanie do elementu wywołującego zdarzenie (this)
onclick

red

yellow

green

function lightMeUp()
{
   var button_class = this.className;
   //alert(button_class);
   if(button_class === "circle_t") {
      this.style.backgroundColor = this.innerHTML;
   }
}

var rLight = document.getElementById("redLight");
var yLight = document.getElementById("yellowLight");
var gLight = document.getElementById("greenLight");
rLight.onclick = lightMeUp;
yLight.onclick = lightMeUp;
gLight.onclick = lightMeUp;
onmouseover/onmouseout

over/out

function zmienKolorOver()
{
this.style.backgroundColor = "#006400";
}
function zmienKolorOut()
{
this.style.backgroundColor = "#90EE90";
}

var overOut = document.getElementById("overOut");

overOut.onmouseover = zmienKolorOver;
overOut.onmouseout = zmienKolorOut;
window.onload()

Gdy nie używamy słowa kluczowego 'async' przy skrypcie (np. Javascript), ważne jest, aby najpierw załadować zawartość strony.

Czasami strona może być dość potężna(wielki rozmiar) w porównaniu do skryptu i może on nie działać poprawnie zanim cała strona się nie załaduje.
3. addEventListener - nasłuchiwacze zdarzeń
function halfCircleSize()
{
   this.style.transform = "scale(0.5)";
}

function wholeCircleSize()
{
   this.style.transform = "scale(1.0)";
}
var circle_listener = document.getElementById("listenerCheck");

circle_listener.addEventListener("mouseover", function() {
this.style.backgroundColor = "blue";
});

circle_listener.addEventListener("mouseout", function() {
this.style.backgroundColor = "lightBlue";
});

circle_listener.addEventListener("mouseover", halfCircleSize); circle_listener.addEventListener("mouseout", wholeCircleSize); circle_listener.removeEventListener("mouseover", halfCircleSize);

Funkcja dodająca event na potrzeby IE
function createEvent(obj, eventName, functionToInvoke)
{
   if (document.addEventListener)
   {
      obj.addEventListener(eventName, functionToInvoke);
   }
   else
   {
      obj.attachEvent("on" + eventName,functionToInvoke);
   }
} Funkcja usuwająca event na potrzeby IE
function removeEvent(obj, eventName, functionToInvoke)
{
   if (document.addEventListener)
   {
      obj.addEventListener(eventName, functionToInvoke);
   }
   else
   {
      obj.detachEvent("on" + eventName,functionToInvoke);
   }
}
4. Automatycznie przesyłany do funkcji obiekt Event
Prześlij event

Obsługa zdarzenia w funkcji
function doSth(event) {
//dla starszych IE (jeśli wsparcie dla window.event a nie ma przesłanego zdarzenia)
var e = event || window.event;
}

sendEvent.onmousemove = doSth;

Pojawia się i znika
wypisanie pozycji (od góry całej strony) i dodanie funkcji reagujących na zdarzenia

//sendEvent - obiekt na który najeżdżamy (np. tekst)
var sendEvent = document.getElementById("sendEvent");
var position = sendEvent.getBoundingClientRect();
var x = position.left;
var y = position.top;
alert("x: " + x + ", y: " + y);
sendEvent.onmouseover = showTooltip;
sendEvent.onmouseout = hideTooltip;
sendEvent.onmousemove = moveTooltip;
5. Propagacja zdarzeń
Pogrubiony tekst
to normalny

function checkProp(event, eventObj)
{
   var e = event || window.event;
   var srcElement = e.target || e.srcElement;
   var tmp = document.getElementById("propText");
   tmp.innerHTML = "źródło eventu: " + srcElement.tagName + "
event przypisany został do tagu: " + eventObj.tagName;
}

var boxProp = document.getElementById("boxProp");
var bolded = document.getElementById("bolded");
var przycisk = document.getElementById("przycisk");

boxProp.onclick = function(event)
{
   alert("boxProp kliknięto");
   checkProp(event, this);
};
bolded.onclick = function(event)
{
   var e = event || window.event;
   //wsparcie dla IE - cancelBubble (zatrzymanie propagacji Eventu)
   if(e.stopPropagation)
   {
      e.stopPropagation();
   }
   else
   {
      e.cancelBubble = true;
   }
   alert("pogrubiony tekst naciśnięto");
   checkProp(event, this);
};
przycisk.onclick = function(event)
{
   alert("przycisk kliknięty");
   checkProp(event, this);
};
6. preventDefault - zapobieganie domyślnej akcji zdarzenia (walidacja adresu e-mail)
Email:

var email = document.getElementById("emailPrevent"); //input text
var submitButtonPrevent = document.getElementById("submitButtonPrevent");//input button

submitButtonPrevent.onclick = function(e)
{
   var re = /[a-z0-9_.-]+@[a-z0-9_.-]+\.[a-z0-9_.-]{2,}/;
   if(re.test(email.value))
   {
      this.parentNode.submit();
   }
   else
   {
      if(e.preventDefault)
      {
         e.preventDefault();
      }
      else
      {
         e.returnValue = false;
   }
   document.getElementById("yourEmail").innerHTML = email.value;
   }
};
Zablokowanie menu kontekstowego (domyślnie na PPM) submitButtonPrevent.oncontextmenu = function(e) {    var e = e || window.event;
   if (e.preventDefault)
      e.preventDefault();
   else
      e.returnValue = false;
};
7. Zdarzenie onscroll()
przewijanie na początku strony, przycisk widoczny po osiągnięciu połowy długości strony
JavaScript:

var toTopButton = document.getElementById("toTopButton");

toTopButton.onclick = function()
{
   //scrollowanie o X,Y
   window.scrollBy(0, -1 * window.pageYOffset);
};
window.onscroll = function()
{
   var windowYOffset = window.pageYOffset;
   if(windowYOffset > getHeight() / 2)
   {
      toTopButton.style.display = "block";
   }
   else
   {
      toTopButton.style.display = "none";
   }
};

HTML:
<div id="toTopButton"> Na samą górę! </div>
CSS:
#toTopButton
{
   display: none;
   border-radius: 5px;
   width: 75px;
   height: 75px;
   position: fixed;
   bottom: 20px;
   right: 20px;
   background-color: #fc4903;
   text-align: center;
   cursor: pointer;
   border: 2px dashed black;
}
8. Zdarzenia myszki - przesuwanie elementów
JavaScript:
function moveImage(e, objName)
{
   objName.style.left = e.clientX + (window.pageXOffset - objName.width/2) + "px";
   objName.style.top = e.clientY + (window.pageYOffset - objName.height/2) + "px";
}
/*ruszanie elementem*/

var basketBall = document.getElementById("basketBall");

var moveArea = document.getElementById("moveArea");
alert(moveArea.getBoundingClientRect().width);

basketBall.onmousedown = function()
{
   var selfBasket = this;
   document.onmousemove = function(e)
   {
      moveImage(e, selfBasket);
   };
};

basketBall.onmouseup = function()
{
   document.onmousemove = null;
};

basketBall.ondragstart = function(e)
{
   e.preventDefault();
};

HTML:
<div id="moveArea">
   <img src="img/basketBall.jpg" alt="basketBall" id="basketBall">
</div>

CSS:
/*pole do przesuwania piłki*/
#moveArea
{
   width: 320px;
   height: 183px;
   border: 1px solid black;
   margin-right: 10px;
   background-image: url('../img/basketBallCourt.png');
   background-size: 320px 183px;
}

#basketBall
{
   position: absolute;
}
9.1 setTimeout, setInterval (oraz clearTimeout, clearInterval)
JavaScript:

var stopWatchStart = document.getElementById("stopWatchStart");
var turnOnStopWatch = document.getElementById("turnOnStopWatch");
var turnOffStopWatch = document.getElementById("turnOffStopWatch");
var stopWatchDisplay = document.getElementById("stopWatchDisplay");

Timeout

var timeOutStopper;

function startMyStopWatchTimeout(stopWatchHandler, liczba)
{
   stopWatchHandler.innerHTML = liczba--;
   var tmp = liczba;
   if(liczba < 0)
   {
      return;
   }
   timeOutStopper = setTimeout(function()
   {
      startMyStopWatch(stopWatchHandler, liczba);
   },1000);
}

turnOnStopWatch.onclick = function()
{
   var startValue = stopWatchStart.value;
   stopWatch.innerHTML = startValue;

   if(timeOutStopper)
      clearTimeout(timeOutStopper);
   startMyStopWatch(stopWatch, startValue);
};

turnOffStopWatch.onclick = function()
{
   clearTimeout(timeOutStopper);
};

Interval

function startMyStopWatchInterval(stopWatchHandler, liczba)
{
   var timeIntervalReference = setInterval(function()
   {
       if(liczba <= 0)
       {
           clearInterval(timeIntervalReference);
           return;
       }
      stopWatchHandler.innerHTML = --liczba;
   }, 1000);

   return timeIntervalReference;
};

var timeIntervalRef;
//Interval
turnOnStopWatch.onclick = function()
{
   if(timeIntervalRef)
   {
      clearInterval(timeIntervalRef);
   }
   var startValue = stopWatchStart.value;
   stopWatchDisplay.innerHTML = startValue;
   timeIntervalRef = startMyStopWatchInterval(stopWatchDisplay, startValue);
};

turnOffStopWatch.onclick = function()
{
   clearInterval(timeIntervalRef);
};

HTML:

<input type="text" id="stopWatchStart">
<input type="button" value="PowerOn" id="turnOnStopWatch">
<input type="button" value="PowerOff" id="turnOffStopWatch">
<div id="stopWatchDisplay"></div>
9.2 Rozwiązanie obiektowe zegara
JavaScript(obiekt stopWatch - stoper)
function stopWatch(uchwytStopera)
{
   this.uchwytStopera = uchwytStopera;
   this.poczatkowaWartosc;
   this.timeOutReference = undefined;

   this.odpal = function(poczatkowaWartosc)
   {
      this.poczatkowaWartosc = poczatkowaWartosc;
      if(this.timeOutReference)
         clearTimeout(this.timeOutReference);

      this.utrzymuj();
   };

   this.utrzymuj = function()
   {
      if(this.poczatkowaWartosc < 0)
      {
         return;
      }
      this.uchwytStopera.innerHTML = this.poczatkowaWartosc--;

      var self = this;//stopWatch
      this.timeOutReference = setTimeout(function()
      {
         self.utrzymuj();
      },1000);
   };

   this.zatrzymaj = function()
   {
         clearTimeout(this.timeOutReference);
   };

   this.kontynuuj = function()
   {
         this.utrzymuj();
   };
}
JavaScript(pobranie elementów HTML i nadanie reakcji na zdarzenia przyciskom)
var stopWatchDisplay = document.getElementById("stopWatchDisplay");

var stopWatchStart = document.getElementById("stopWatchStart");
var turnOnStopWatch = document.getElementById("turnOnStopWatch");
var pauseStopWatch = document.getElementById("pauseStopWatch");
var continueStopWatch = document.getElementById("continueStopWatch");

var stoper = new stopWatch(stopWatchDisplay);

turnOnStopWatch.onclick = function()
{
   var initValue = stopWatchStart.value;
   stoper.odpal(initValue);
};

pauseStopWatch.onclick = function()
{
   stoper.zatrzymaj();
};

continueStopWatch.onclick = function()
{
   stoper.kontynuuj();
};
HTML:
<input type="text" id="stopWatchStart">
<input type="button" value="PowerOn" id="turnOnStopWatch">
<input type="button" value="||" id="pauseStopWatch">
<input type="button" value="Continue" id="continueStopWatch">
<div id ="ClockBox">
   <div id="stopWatchDisplay"></div>
</div>
10. Dodatek - galeria kotków (img.onmouseover)
Kotki:

Wybrany kotek:

JavaScript:
var mainImage = document.getElementById("mainImage");

var image = new Image();

mainImage.appendChild(image);

var thumbnails = document.getElementsByClassName("thumbnail");

var currentThumbnail = thumbnails[0];

image.src = currentThumbnail.getAttribute("src");

for(var i = 0; i < thumbnails.length; i++)

{
   thumbnails[i].onmouseover = function()

   {
      image.src = this.getAttribute("src");
   };
}

HTML:
Kotki:
<div id="firstRow">
   <img src="img/kotekKwiaty.jpg" alt="kotekWkwiatach" class="thumbnail">
   <img src="img/kotekSkater.jpg" alt="kotekIdeskorolka" class="thumbnail">
</div>
<div id="secondRow">
   <img src="img/kotekSzary.jpeg" alt="kitekSzary" class="thumbnail">
   <img src="img/kotekZlew.jpg" alt="kotekWZlewie" class="thumbnail">
</div>
<div id="mainImage">
   Wybrany kotek:<br>
</div>

Ładowanie pliku