Szukaj na tym blogu

JavaScript - teoria

  1. Historia JS-a
  1. Wyrażenia
    Wstęp (operacje We/Wy, konsola)
    Konwencje
    Typy
    Konwersja
    Wyrażenia (operatory i literały [ ], { })
  2. Instrukcje i funkcje
  3. Obiekty
  4. DOM

1. Wyrażenia

WSTĘP

JavaScript
Skryptowy język programowania. Kod skryptu zapisujemy w pliku o rozszerzeniu .js
<script src="skrypt.js"></script>
lub bezpośrednio w stronie w elemencie script dokumentu HTML, który może być umieszczony w elemencie head lub body.
Do uruchomienia skryptu JavaScript wymagane jest przeglądarka internetowa. Wykonanie kodu wymaga interpretowania.

Przykład interaktywny 1. Wstęp



Sposoby wprowadzania danych:
  • metoda prompt()
  • pola formularzy (document.getElementById(id).value)
  • elementy strony własność innerHTML
Sposoby wyprowadzania:
  • metoda alert()
  • pola formularzy (document.getElementById(id).value)
  • metody document.write() i document.writeln()
  • elementy strony, własność innerHTML
  • konsola console.log()

KONWENCJE

W języku JavaScript wielkość liter ma znaczenie.

Instrukcje oddzielamy średnikiem ; który na końcu linii jest opcjonalny (ale zalecany).

KOMENTARZE

  • jednoliniowy: // tekst komentarza 
  • wieloliniowy: /* tekst komentarza */

INNE

  • nowa linia: \n

 Przykład interaktywny 2. Konwencje leksykalne


Więcej na: http://plotkarka.eu/PI/js/conlex.html

TYPY ZMIENNYCH

  • Undefined - niezdefiniowany, wartość undefined
  • Null - pusty, wartość null
  • Boolean - logiczny, wartości: true i false
  • String - ciąg znaków, wartości w cudzysłowiu " " lub ' '
  • Number - numeryczny, liczby całkowite, wymierne (separatorem dziesiętnym jest kropka)
  • Object - obiekty języka EcmaScript i DOM
Deklaracja
Deklarację zmiennej poprzedzamy var (w trybie ścisłym obowiązkowo).
Typ zmiennej w języku JavaScript zostaje określony poprzez przypisanie wartości.

Przykład interaktywny 3. Typy zmiennych


W przykładzie zastosowano operator typeof, który zwraca typ argumentu.

Więcej na: http://plotkarka.eu/PI/js/types.html
Więcej na: http://plotkarka.eu/PI/js/conlex.html

KONWERSJA ZMIENNYCH

W języku JavaScript zmienne są konwertowane automatycznie (na podstawie tablic konwersji).

np. +"l" (zwraca 1)

WYRAŻENIA

Literały

Obiektu
  • {} literał obiektu
Przykład
var o = {a:1, b:2}
Pary klucz : wartość. Odwołujemy się przez zmienna.klucz np. o.a

Tablic
  • []
Przykład
var t = [] 

Tablice indeksujemy od zera. Odwołujemy się przez np. t[i], gdzie t jest zmienną, i jest indeksem elementu.

Operatory

Operatory arytmetyczne
Dodawanie (+)
Operator dodawania zwraca sumę argumentów lub

jeśli chociaż jeden argument był łańcuchem znaków, ich konkatenacje.
Odejmowanie (-)
Operator odejmowania zwraca różnicę między odjemną, a odjemnikiem.
Mnożenie (*)
Operator mnożenia zwraca iloczyn czynników.
Dzielenie (/)
Operator dzielenia zwraca iloraz. Po lewej stronie jest dzielna, a po prawej dzielnik.
Dzielenie modulo (%)
 Operator modulo zwraca resztę z dzielenia pierwszej liczby przez drugą.
Inkrementacja (++)
Operator inkrementacji zwiększa o 1 wartość argumentu i zwraca taką wartość
(x++ definiujemy jako x=x+1). 
  • Przyrostek (x++) będzie działał jako postinkrementacja, zwracana wartość nie będzie powiększona.
  • Przedrostek (++x) będzie działał jako preinkrementacja, zwracana wartość będzie powiększona.
Dekrementacja (--)
 Operator dekrementacji zmniejsza o 1 wartość argumentu i zwraca taką wartość
(x-- definiujemy jako x=x-1).
  • Przyrostek (x--) będzie działał jako postdekrementacja, zwracana wartość nie będzie pomniejszona.
  • Przedrostek (--x) będzie działał jako predekrementacja, zwracana wartość będzie pomniejszona.

Operatory przypisania
  • podstawowy (=),
  • mieszane (+=), (*=), (-=), (/=)
np. x+=y <=> x=x+y
Operatory porównania
zwracają wartość logiczną true lub false zależną od tego, czy wartość porównania jest fałszywa czy prawdziwa.
  • równe (==), 
  • większe (>), 
  • mniejsze (<), 
  • większe lub równe (>=), 
  • mniejsze lub równe (<=), 
  • ściśle równe (===) (sprawdzany jest typ argumentów)
Operatory logiczne
 łącza zdania logiczne
  • i (&&),
  • lub (||)
  • nie (!)

Inne

Kolejność wykonywania
Nawiasy ()

Przykład interaktywny 4. Wyrażenia




Więcej na:

Sprawdzian JS[1] - JavaScript część 1. Wyrażenia

Zadania:

 

2. Instrukcje i funkcje

INSTRUKCJE

  • {} - blok instrukcji
  • var - deklaracja zmiennych

WARUNKOWE

  • if
  • if else
  • switch

PĘTLE

  • while
  • do while
  • for
Więcej na: 

FUNKCJE

Definiowanie funkcji
function nazwa_funkcji(argumenty) {instrukcje;}
nazwa_funkcji - musi być poprawnym identyfikatorem JavaScript
argumenty - opcjonalne, oddzielone przecinkami
instrukcje - umieszczone w bloku {}
  • function
  • return
  • this
  • new
Więcej na:

 

OBIEKTY

nazwaobiektu.mazwametody()

Funkcje globalne
  • isNaN
  • NaN
  • parseInt()
  • parseFloat()

PREDEFINIOWANE

  • Date: Date(), getMonth(), getDay() 
  • Math: Math.max(), Math.pow()
  • .substring
  • .length - długości napisu (stringa) lub tablicy
  • array
Więcej na: http://plotkarka.eu/PI/js/objects.html

Sprawdzian JS[3] - JavaScript część 3. 

Zadania:

 

DOM

DOM - (ang. Document Object Model, obiektowy model dokumentu) dostarcza metod i własności, które w języku JavaScript pozwalają na pobieranie i modyfikowanie elementów strony wyświetlonej przez przeglądarkę.

window

  • prompt()
  • alert()

document

  • document.write()
  • document.getElementById() - metoda odwołuje się do znacznika o podanym id.
  • document.createElement()
  • document.getElementsByClassName() - metoda odwołuje się do podanej klasy.

 element

  • .innerHTML() 
  • .appendChild()
  • .setAttribute()
  • .nazawa_atrybutu - np. style (style.color),

zdarzenia

  • onkeydown
  • ondblclick - podwójne kliknięcie elementu
  • onload
  • onclick - kliknięcie elementu, np. przycisku
  • onselect
 

Sprawdzian JS[4] - JavaScript część 4. 

Zadania:

 

Zadania z JavaScript

 

Uwaga: 

Hiperłącza otwierają strony dokumentacji JavaScrip MDN w języku angielskim ale większość z nich jest przetłumaczona na język polski co można sprawdzić za pomocą listy JĘZYKI.

ŹRÓDŁA

[HTML5.1]
HTML5.1; W3C Recommendation 1 November 2016;
URL: http://www.w3.org/TR/html/
[DOM]
Anne van Kesteren; et al. W3C DOM4. 19 November 2015. Recommendation
URL: https://www.w3.org/TR/dom/
[ECMA-262]
ECMAScript Language Specification.
URL: https://tc39.github.io/ecma262/

 

Aktualizacja
Etykiety: , , , ,