Wprowadzenie do JavaScript

Wprowadzenie do JavaScript

Przygotowała: Kamińska Ewelina

JavaScript

To dynamiczny język programowania, który dodaje interaktywność do twojej witryny np. gry, odpowiedzi po naciśnięciu przycisków lub wprowadzeniu danych do formularza, animacja itp.

Kod JavaScript wykonuje i interpretuje przeglądarka internetowa, a cały nasz kod JavaScriptu trafia na nasz lokalny komputer i można do niego zupełnie swobodnie zajrzeć. Jest całkowicie jawny.

JavaScript vs PHP

• JavaScript w przeciwieństwie do PHP wykonywany jest po stronie klienta, a PHP jest wykonywany na serwerze.

• Jest wykonywany lokalnie, w przeglądarce zainstalowanej na naszym komputerze.

JavaScript

-Sprawia, że strona internetowa może mieć żywy, anonimowany, reagujący na poczynania użytkownika interfejs.

-To najciekawszy język frontendowy czyli ten za pomocą którego opisujemy wygląd i zachowanie interfejsu witryny, a nie jej mechanikę czy współpracę z bazami danych jak to czynią PHP, python, ruby.

Multiple Select

Co odpowiada za wygląd i zawartość strony?

• PHP

• HTML

• CSS

• JavaScript

Jak dołączyć plik JavaScript do html?

• 1. W folderze www, utwórz nowy folder o nazwie scripts.

• 2. W Notpadzie++ utwórz nowy plik o nazwie main.js, zapisz go w utworzonym folderze scripts.

• 3. W pliku index.html wprowadź następujący element w nowej linii, tuż przed zamknięciem tagu </body> (czyli pod koniec strony):

  <script src="scripts/main.js"></script>

Podstawy języka JavaScript

Komentarze:

/*

Wszystko pomiędzy to komentarz.

*/

Jeśli Twój komentarz nie zawiera przerw między wierszami, często łatwiej jest umieścić go za dwoma ukośnikami:

// To jest komentarz

OPERATORY

+ dodawanie

- odejmowanie

* mnożenie

/ dzielenie

= przypisanie wartości

=== operator porównania, zwraca True albo False

!, !== zaprzeczenie, nie równa się

Więcej operatorów: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators

Mieszanie typów danych może powodować dziwne efekty podczas wykonywania obliczeń, dlatego należy uważać, aby prawidłowo odwoływać się do zmiennych i uzyskać spodziewane wyniki. Na przykład wprowadź "35" + "25" do konsoli. Dlaczego nie dostaniesz oczekiwanego rezultatu? Ponieważ znaki cudzysłowów zmieniają liczby w ciągi znaków, więc skończyłeś na łączeniu łańcuchów zamiast dodawać liczby. Jeśli wpiszesz, 35 + 25 otrzymasz poprawny wynik.

Zmienne

Zmienne są kontenerami w których można zapisywać wartości.

Zmienną deklarujemy od słowa kluczowego var, a następnie piszemy dowolną nazwę np.:

var a;

var b;

Sprawdzanie nazwy zmiennej

JavaScript rozróżnia małe i duże litery — myVariablejest inną zmienną niż myvariable. Jeśli pojawiają się problemy w kodzie, sprawdź wielkość liter!

Aby upewnić się czy nazwa twojej zmiennej jest prawidłowa możesz użyć do tego:

https://mothereff.in/js-variables#WEacsd

Typy danych

• string- tekst, ciąg znaków, łańcuch (Aby potwierdzić, że zmienna jest ciągiem, należy zamknąć jej wartość w apostrofach. np. var imie='Ewelina';

• number- liczba np. var x=10;

• boolean - zwraca true albo false np. var y=true;

• array- konstrukcja, która pozwala na przechowywanie wielu wartości w jednym odniesieniu np. var dane = [1,'Bob','Steve',10];

  Odwołanie się do każdego elementu tej tablicy: dane[0], dane[1], itd.

Funkcje

Są sposobem na zapakowanie funkcjonalności, które chcesz wykorzystać ponownie. Gdy potrzebujesz procedury, zamiast pisać cały kod za każdym razem, możesz wywołać funkcję z nazwą funkcji.

Funkcja alert () 

Powoduje pojawienie się okna podręcznego wewnątrz okna przeglądarki, ale musimy dać mu ciąg znaków jako argument, aby powiedzieć użytkownikowi o tym, co należy wyświetlić w wyskakującym okienku. np.

{

 alert('Witaj na mojej stronie');

}

Definiowanie własnej funkcji

Przykład:

Prosta funkcja, która przyjmuje dwie liczby jako argumenty i mnoży je:

function multiply(num1,num2) {

var result = num1 * num2;

return result;

}

Aby uruchomić funkcję należy wpisać multiply i w nawiasie dane testowe np. :

multiply(4,7);

multiply(20,20);

multiply(0.5,3);

RETURN

Informuje przeglądarkę o zwróceniu zmiennej result z funkcji, dzięki czemu jest ona dostępna. Jest to konieczne, ponieważ zmienne zdefiniowane wewnątrz funkcji są dostępne tylko w tych funkcjach. Jest to tak zwany zakres zmiennej.

ZDARZENIA

Prawdziwa interaktywność na stronie internetowej potrzebuje zdarzeń. Są to struktury kodu nasłuchające rzeczy, które dzieją się w przeglądarce i uruchamiajace kod w odpowiedzi. Najbardziej oczywistym przykładem jest zdarzenie kliknięcia, które jest uruchamiane przez przeglądarkę po kliknięciu na coś za pomocą myszy. 

Istnieje wiele sposobów dołączania zdarzenia do elementu.

Można wybrać element <html> i ustawiamy obsługę jego właściwości onclick równą funkcji anonimowej (tj. bezimiennej), która zawiera kod, który ma być uruchamiany.

np.

document.querySelector('html').onclick = function() {};