Powrót

JavaScript

implementacja:

<script type="text/javascript">
  document.write("Hello Word!");
</script>

 

Hierarchia uruchamiania:

  • script w sekcji <head>
  • script w sekcji <body>
  • funkcje obsługi zdarzeń(event handler) – podczas wystąpienia danego zdarzenia

 

funkcje, metody:

  • write(), document.write() – wyświetla tekst
  • alert() – wyświetla okno dialogowe z komunikatem
  • console.log() – wyświetlanie wartosci w oknie konsoli JS
  • window.open(„somePage.html”,”ow”,”width=400,height=200″); – otwiera w nowym oknie o wskazanych wymiarach, wskazaną stronę
  • window.close(); – zamyka otwarte okno
  • return – zwraca wartość
  • navigator.platform – określa system
  • navigator.appVersion –
  • myArray.pop() – element tablicy jest pobierany (usuwany z tablicy) i przypisywany
  • myArray.length – podaje ilość elementów tablicy
  • getElementById() – pobiera element o konkretnym identyfikatorze
  • getElementByTagName() – pobiera wszystkie elementy podanego znacznika, document.getElementByTagName(’a’) – pobiera wszystkie elementy a
  • getElementByClassName() – pobiera elementy po ich nazwie klasy
  • querySelectorAll() – pobiera elementy przy użyciu dowolnego selektora css – document.querySelectorAll(’p.big’);
  • getContext(’2d’) – rysowanie w przestrzeni 2d
  • fillStyle – myWork.fillStyle = '#e22117′; – wypełnienie kolorem tła
  • fillRect(x,y,x,y) – myWork.fillRect(2,2,100,50); –  wypełnienie prostokąta
  • fill() – myWork.fill(); – wypełnienie stworzonego kształtu określonym kolorem
  • strokeStyle – myWork.strokeStyle = '#e22117′; – wypełnienie kolorem ramki
  • strokeRect(x,y,width, height)
  • clearRect(x,y,width, height)
  • onload
  • drawImage – myWork.drowImage(pic, x, y)
  • src – podaje źródło – pic.src = 'myImage.png’;
  • isNan () –  sprawcza, czy dana wartość nie jest liczbą
  • !isNaN() – sprawdza czy dana wartość jest liczbą
  • prompt(’i want’, ’ …’); – wyświetla okno dialogowe z treścią i tekstem od którego ma zaczynać się odpowiedz, zwraca dane wpisane przez użytkownika
  • push() – dodanie elementu/elementów na koniec tablicy
  • unshift() – dodanie elementu/elementów na oczatek tablicy
  • pop() – usuwanie elementu z końca tablicy, zwraca wartość usuniętego elementu
  • shift() – usuwanie elementu z początku tablicy, zwraca wartość usuniętego elementu
  • charAt(2) – podaje 3 literę łańcucha znaków
  • parseInt(variable, 10) – przekształca wartość zmiennej na liczbę całkowitą
  • join()
  • getHours() – pobiera godzinę
  • getMinutes()
  • getSeconds()
  • innerHTML – document.getElementById(„myDiv”).innerHTML = 5 + 6;
  • toDateString()
  • toFixed(2)
  • Math.max(3, 33) – pobiera dowolną liczbę wartości liczbowych i zwraca największą z nich
  • Math.min(3, 33) – pobiera dowolną liczbę wartości liczbowych i zwraca najmniejsza z nich
  • Math.sqrt – oblicza pierwiastek kwadratowy (metoda obiektu Math)
  • confirm(„text”) – wyświetla okno dialogowe z przyciskami ok i anuluj – zwraca true gdy użytkownik kliknie ok, false gdy kliknie anuluj
  • Number – zwraca liczbę, zmienia wartość w liczbę
  • String – zmiana wartości na łańcuch
  • Boolean – zmiana wartości na typ logiczny

 

niektóre metody

document.querySelectorAll – zwraca listę obiektów

document.getElementsByTagName – zwraca kolekcję elementów

Kolekcja HTML – zawiera rzeczywiste elementy, uwzględnia zmiany wprowadzone w modelu DOM

 

Konwersja typów danych

automatyczna konwersja typów

zamiana zmiennej z wartością liczbową (3) na znak po zamieszczeniu w zmiennej łączącej ciągi znaków.

document.write(’całkowity koszt to ’ + total + '$’) – całkowity koszt to 400$

funkcja document.write działa na łańcuchach interpreter JS automatycznie konwertuje wszystkie wartości na łańcuch.

 

wymuszona konwersja typów

var nomOfIceAxes=’3′;

var nomOfCrampon=3;

var totalItems = nomOfIceAxes + nomOfCrampon;

wynik będzie text 3 + 3 = 33

aby zmienna nomOfIceAxes była potraktowana jako liczba:

  • znak +

var totalItems = +nomOfIceAxes + numOfCrampon;

znak+ przed zmienną nakazuje próbę konwersji łańcucha znaków na liczbę.

  • polecenie Number()

var totalItems = Number(nomOfIceAxes) + nomOfCrampon;

  • polecenie String() – String(prompt(„Your name”, „”)); – konwersja wartości na łańcuch
  • polecenie Boolean() – konwersja wartości na typ logiczny

 


var value1 = 1;

var value2 = '2';

var value3 = value1 + +value2; //3

var value3 = value1 + Number(value2); //3

Konwersja przez funkcje:

wczytanie liczby z początku łańcucha i zwrócenie wartości liczbowej, jeśli na początku łańcucha nie ma liczby zwraca NaN.

 

  • parseInt() – przekształcenie łańcuchu na liczbę
  • parseFloat() – przekształca łańcuch na liczbę zmiennoprzecinkową

 

 właściwości:

  • .valueAsNumber – znaki liczbowe zawarte w polu (np. input) traktowane są jako liczby nie tekst

 

przykład:


function myFunction(){
 myVar="thisIsIt";
 return myVar;
}
showVar=myFunction();
document.write(showVar);

variable1="12";
variable2="3";
result=variable1 + variable2;
document.write(result);

result=123

variable1=12;
variable2=3;
result=variable1 + variable2;
document.write(result);

result=15

 

apply() – pozwala zamieszczane tablicy jako argumentu, np:


var myArray = [5, 50, 10];

Math.max.apply(Math, myArray);

 

Tworzenie obiektów:

AddingMachine=new Object();

 

przypisanie wartości (oddzielone . ):
AddingMachine.firstNumber=3

 

dodanie metody (funkcji):

AddingMachine.total=function(){

document.write(this.firstnumber + this.secondNumber);

}

 

Pobieranie danych z formularza:

<script type="text/javascript">
  FormWeb=new Object();
  FormWeb.goForm=function(){
    var mountain = document.myForm.mountain.value;
    var height = document.myForm.height.value;
    message="The height of mountain " + mountain + " is " + height + " m";
    document.myForm.info.value=message;
  }
</script>











<form name="myForm">
  <label>Mountain:
    <input type="text" name="mountain">
  </label>
  <label>Height:
    <input type="text" name="height">
  </label>
  Summary:
  <textarea name="info" cols=50 rows=5></textarea>
  <input type="button" name="submit" value="go" onClick="FormWeb.goForm()">
</form>

lub poprzez odwołanie DOM do elementów formularza jak do tablicy, gdzie:

  • formularz – forms[0], forms[1], forms[2]…
  • elemnet – elements[0], elements[1], elements[2]…
<script type="text/javascript">
  FormWeb=new Object();
  FormWeb.goForm=function(){
    var mountain = document.forms[0].elements[0].value;
    var height = document.forms[0].elements[1].value;
    message="The height of mountain " + mountain + " is " + height + " m";
    document.myForm.info.value=message;
  }
</script>
javascript

Hope this helps and happy coding :)

Zobacz jeszcze

znacznik html5 Video

Znacznik html5 video - do zamieszczania i odtwarzania plików video na stronie. <video src="fileFilm.mp4"><span id="result_box" class="short_text"...

canvas

Kontener dla grafiki tworzonej dzięki językom skryptowym. atrybuty: width height   Sprawdzenie czy przeglądarka użytkownika obsługuje element html5 canvas - zamieszczenie w...

Powrót