Funkcje
1. Tworzenie funkcji
<script>
/* Tworzenie własnych funkcji
function nazwaFunkcji(parametr1, parametr2){
instrukcja do wykonania;
}
*/
function powitanie(){
console.log("Hello world");
}
//wywołanie funkcji poprzez wypisanie jej nazwy
powitanie()
</script>
//wywołanie funkcji po kliknięciu na button w strukturze html
<div>
<button onclick='powitanie()'>START<button>
</div>
2. Zasięg zmiennych w funkcji
<script>
const klasa = "1p";
const lekcja = true;
document.write(" <h1>Programowanie aplikacji internetowych. Klasa: "+klasa+" </h1>");
function wypiszInfo(){
if(lekcja === true){
var liczbaUczniow = 17;
let obecni =11;
document.write(`<h2>Ilość osób w klasie ${klasa} wynosi: ${liczbaUczniow} osób</h2>`);
document.write(`<h2>Ilość osób obecnych na lekcji wynosi: ${obecni} osób</h2>`);
}else{
document.write("<h2>Nie ma lekcji</h2>");
}//koniec bloku if
//zasięg zmiennych
console.log(liczbaUczniow);
//console.log(obecni); //obecni is not defined, ponieważ zmienna tworzona "let" ma zasięg blokowy (jest ograniczona {} )
}//koniec funkcji
//console.log(liczbaUczniow); //liczbaUczniow is not defined, ponieważ zmienna tworzona "var" ma zasięg funkcyjny
wypiszInfo();
</script>
3. Parametry, wartości domyślne w funkcji
<script>
function osoba(imie, nazwisko){
return imie+" "+nazwisko;
//wszystkie instrukcje po return nie są wykonywane
document.write(imie+" "+nazwisko); //ta instrukcja się nie wykona
}
let infoOsoba = osoba("Adam","Nowak");
let infoOsoba2 = osoba("Ola","Kowalska");
document.write(infoOsoba);
document.write(infoOsoba2);
//wartości domyślne
function wypiszImie(imie){
var imie = imie || "Alicja";
document.write(`Mam na imię ${imie}`);
}
wypiszImie("Monika");
wypiszImie();
function wypiszImie2(imie="Piotr"){
document.write(`Mam na imię ${imie}`);
}
wypiszImie2();
wypiszImie2("Konstantyn");
</script>
3. Funkcje strzałkowe
<script>
//klasyczny zapis
/*
function returnName(name){
return "My name is "+ name;
}
*/
//zapis w postaci f. strzałkowej:
const returnName = (name) => {
return "My name is "+ name;
}
document.write(returnName("Ola"));
//zapis skrócony
const returnName2 = (name) => `My name is ${name}`;
document.write(returnName2("Ala"));
</script>
4. Obsługa zdarzeń - sposoby wywoływania funkcji
<button id="b1" onclick="f1()">funkcja 1 </button>
<button id="b2">funkcja 2 </button>
<button id="b3">funkcja 3 </button>
<div id="wynik"></div>
<script>
//1. wywołanie funkcji poprzez onclick w html
function f1(){
var wynik = document.getElementById("wynik");
wynik.innerHTML = "Uruchomiono funkcję nr 1";
}
//2. wywołanie funkcji z metodą adEventListener()
let bt2 = document.querySelector("#b2");
bt2.addEventListener("click", f2);
function f2(){
let wynik = document.querySelector("#wynik");
wynik.innerHTML = "Uruchomiono funkcję nr 2";
}
//3. wywołanie funkcji po atrybucie obiektu
let bt3 = document.querySelector("#b3");
bt3.onclick = function(){
let wynik = document.querySelector("#wynik");
wynik.innerHTML = "Uruchomiono funkcję nr 3";
}
</script>