JavaScript - funkcje
Funkcje
function nazwaFunkcji(){kod funkcji
}
utworzenie i wywołanie funkcji
<script type="text/javascript">
function wyswietlNapis(){
document.write("Koko Koko Euro spoko.");
}
wyswietlNapis();
</script>
wynik skryptu
<script type="text/javascript">
function sayYourName1(){
const name = "Adam";
document.write('My name is ' + name +'.');
}
sayYourName1();
</script>
wynik skryptu
<script type="text/javascript">
function sayYourName2(){
const name = "Benjamin";
document.write(`My name is ${name}.`);
}
sayYourName2();
</script>
wynik skryptu
<script type="text/javascript">
function sayYourName3(){
const name = "Czesława";
return 'My name is ' + name + '.';
}
const result03 = sayYourName3();
document.write(result03);
</script>
wynik skryptu
<script type="text/javascript">
function sayYourName4(){
const name = 'Dorota';
return `My name is ${name}.`;
}
const result04 = sayYourName4();
document.write(result04);
</script>
wynik skryptu
function declaration, function expression, arrow function
<script type="text/javascript">
function powitanie1(){
document.write("cześć <br />");
};
const powitanie2 = function(){
document.write("cześć wszystkim <br />");
};
const powitanie3 = () => {
document.write("siema siema <br />");
};
powitanie1();
powitanie2();
powitanie3();
</script>
wynik skryptu
<script type="text/javascript">
pozegnanie1();
pozegnanie2();
pozegnanie3();
function pozegnanie1(){
document.write("żegnaj <br />");
}
const pozegnanie2 = function(){
document.write("pa pa <br />");
}
const pozegnanie3 = () => {
document.write("sajonara <br />");
}
</script>
wynik skryptu
opis:
funkcje (function declaration):
function pozegnanie1(){}
function powitanie1(){}
są dostępne z każdego miejscatworzą kontekst
funkcje (function expression):
powitanie2 = function(){}
pozegnanie2 = function(){}
są dostępne tylko po inicjalizacjitworzą kontekst
funkcje strzałkowe (arrow function):
pozegnanie3 = () => {}
pozegnanie3 = () => {}
są dostępne tylko po inicjalizacjinie tworzą kontekstu
Immediately-invoked Function Expression IIFE (samowywołująca się funkcja)
zmienne w funkcji są dostępne tylko w niej, a nie są dostępne poza niąDo ograniczania zasięgu zmiennej wystarczą nawiasy klamrowe { }
(() => {
})()
samowywołująca się funkcja (zapis strzałkowy => )
<script type="text/javascript">
(() => {
const name = 'Heihachi';
const age = '75';
document.write('cześć ' + name + "<br />");
document.write(typeof name);
})()
document.write(age);
</script>
wynik skryptu
samowywołująca się funkcja
<script type="text/javascript">
(function(){
const name = 'Kazuya';
document.write('cześć ' + name + "<br />");
document.write(typeof name);
}())
</script>
wynik skryptu
zwykła funkcja
<script type="text/javascript">
function nazwaFunkcji(){
const name = 'Jin';
document.write('cześć ' + name + "<br />");
document.write(typeof name);
}
nazwaFunkcji();
</script>
wynik skryptu
Zasięg zmiennych
zasięg globalny
Zmienna globalna jest zdefiniowana poza wnętrzem funkcji oraz jest widoczna w każdym miejscu skryptu.Można się do niej odwoływać w dowolnym miejscu kodu, również we wnętrzach funkcji.
<script type="text/javascript">
var liczba = 128;
function func(){
document.write("Wartość zmiennej w funkcji: " + liczba);
}
func();
document.write("<br />");
document.write("Wartość zmiennej poza funkcją: " + liczba);
</script>
wynik skryptu
zasięg lokalny
Zmienna lokalna jest zdefiniowana wewnątrz funkcji oraz jej zasięg jest ograniczony tylko do wnętrza funkcji, w której została zdefiniowana.Próba odwołania w innym miejscu skryptu spowoduje powstanie błędu.
<script type="text/javascript">
function func(){
var liczbaA = 256;
document.write("Wartość zmiennej w funkcji: " + liczbaA);
}
func();
</script>
wynik skryptu
this (automatyczne przypisywanie czegoś do słowa this)
<script type="text/javascript">
var personOne = {
name: 'Hans',
showName: function(){
document.write(this.name + "<br />");
}
};
var personTwo = {
name: 'Helmut',
showName: function(){
document.write(this.name + "<br />");
}
};
personOne.showName();
personTwo.showName();
</script>
wynik skryptu
<script type="text/javascript">
var personThree = {
name: 'Helga',
surname: 'Helgowska',
showFullName: function(){
document.write(this.name + " " + this.surname);
}
};
personThree.showFullName();
</script>
wynik skryptu
<script type="text/javascript">
var person = {
name: 'Jan',
showName: function(){
document.write(this.name + "<br />");
},
address: {
city: 'Katowice',
street: 'Sokolska',
showAddress: function(){
document.write(this.city + "<br />" + this.street);
}
}
};
person.showName();
person.address.showAddress();
</script>
wynik skryptu
<script type="text/javascript">
var personX = {
name: 'Janek',
showName(){
document.write(this.name + "<br />");
},
address: {
city: 'Kraków',
street: 'Floriańska',
showAddress(){
document.write(this.city + "<br />" + this.street);
}
}
};
personX.showName();
personX.address.showAddress();
</script>
wynik skryptu
<script type="text/javascript">
var person1 = {
imie: 'Jan',
zarobki: 500,
wydatki: 460,
oszczednosci: function() {
return this.zarobki - this.wydatki;
}
};
document.write('imię: ' + person1.imie + '<br />');
document.write('zarobki: ' + person1.zarobki + '<br />');
document.write('wydatki: ' + person1.wydatki + '<br />');
document.write("oszczędności: " + person1.oszczednosci());
</script>
wynik skryptu
<script type="text/javascript">
var person2 = {
imie: 'Jann',
zarobki: 5000,
wydatki: 4600,
showName: function() {
document.write('imię: ' + this.imie);
},
oszczednosci: function() {
return this.zarobki - this.wydatki;
}
};
person2.showName();
document.write("<br />oszczędności: " + person2.oszczednosci());
</script>
wynik skryptu
<script type="text/javascript">
var person3 = {
imie: 'Jannn',
zarobki: 50000,
wydatki: 46000,
showName: function() {
document.write('imię: ' + this.imie + '<br />');
},
oszczednosci: function() {
document.write("oszczędności: " + (this.zarobki - this.wydatki));
}
};
person3.showName();
person3.oszczednosci();
</script>
wynik skryptu
this oraz call()
call() umożliwia wykorzystanie funkcji napisanej w jednym obiekcie w innym obiekcie
<script type="text/javascript">
const human = {
name: 'Hans',
surname: 'Hansowski',
showName(){
document.write('My name is ' + this.name + "<br />");
},
showFullName(){
document.write('My name is ' + this.name + ' ' + this.surname + '<br />');
}
};
const personA = {
name: 'Adam',
surname: 'Adamowski'
};
const personB = {
name: 'Benjamin',
surname: 'Benjamiński'
};
human.showName();
human.showName.call(personA);
human.showName.call(personB);
human.showFullName();
human.showFullName.call(personA);
human.showFullName.call(personB);
</script>
wynik skryptu
<script type="text/javascript">
const humanX = {
showName(){
document.write('My name is ' + this.name + "<br />");
},
showFullName(){
document.write('My name is ' + this.name + ' ' + this.surname + '<br />');
},
shwoPersonalDetails(){
document.write('My name is ' + this.name + ' ' + this.surname + ' ' + this.age + '<br />');
}
};
const people = [
{
name: 'Czesław',
surname: 'Czesławski',
age: 22
},
{
name: 'Dariusz',
surname: 'Dariuszowski',
age: 33
},
{
name: 'Emil',
surname: 'Emilski',
age: 44
}
];
people.forEach(p => humanX.showName.call(p));
people.forEach(p => humanX.showFullName.call(p));
people.forEach(p => humanX.shwoPersonalDetails.call(p));
</script>
wynik skryptu
argumenty funkcji
function nazwaFunkcji(argument1, argument2, ... , argumentn){kod funkcji
}
funkcja przyjmująca argument
<script type="text/javascript">
function wyswietl(argument){
document.write(argument);
}
wyswietl();
</script>
wynik skryptu
<script type="text/javascript">
function wyswietlWartosc(wartosc){
document.write(wartosc);
}
wyswietlWartosc("Koko dżambo i do przodu.");
document.write("<br />");
wyswietlWartosc(123.456);
</script>
wynik skryptu
operacje na argumentach
<script type="text/javascript">
function dodawanieLiczb(wartosc1, wartosc2){
document.write(wartosc1 + " + " + wartosc2 + " = " + (wartosc1 + wartosc2));
}
dodawanieLiczb(1, 2);
</script>
wynik skryptu
zwracanie wartości przez funkcje
function nazwaFunkcji(argumenty){kod funkcji
return wartość;
}
zwracanie wyniku działania funkcji
<script type="text/javascript">
function dodaj(wartosc1, wartosc2){
var wynik = wartosc1 + wartosc2;
return wynik;
}
var wartosc = dodaj(2, 3);
document.write("Wynikiem dodawania 2 + 3 jest " + wartosc + ".");
</script>
wynik skryptu
<script type="text/javascript">
function dodaj(a, b){
return a + b;
}
const resultat = dodaj(2, 3);
document.write(resultat);
</script>
wynik skryptu
<script type="text/javascript">
function sayHello(name){
return 'Witaj ' + name + '!';
}
const result01 = sayHello("Adam");
document.write(result01);
</script>
wynik skryptu
<script type="text/javascript">
function sayHello02(name){
return `Witaj ${name}!`;
}
const result02 = sayHello02('Benjamin');
document.write(result02);
</script>
wynik skryptu
<script type="text/javascript">
function sayHello1(name, surname){
document.write('Witaj ' + name + ' ' + surname + '!');
}
sayHello1("Adam", "Adamowski");
</script>
wynik skryptu
<script type="text/javascript">
function sayHello2(name, surname){
document.write(`Witaj ${name} ${surname}!`);
}
sayHello2("Benjamin", "Benjamiński");
</script>
wynik skryptu
<script type="text/javascript">
function sayHello3(name, surname){
return 'Witaj ' + name + ' ' + surname + '!';
}
const result3 = sayHello3('Czesława', 'Czesławska');
document.write(result3);
</script>
wynik skryptu
<script type="text/javascript">
function sayHello4(name, surname){
return `Witaj ${name} ${surname}!`;
}
const result4 = sayHello4('Dorota', 'Dorotowska');
document.write(result4);
</script>
wynik skryptu