JavaScript-toiminnot

Sisällysluettelo

JavaScript-funktio on koodilohko, joka on suunniteltu suorittamaan a erityinen tehtävä.

JavaScript-toiminto suoritetaan, kun "jotain" kutsuu sitä (kutsuu sitä).

Esimerkki

//  Function to compute the product of p1 and p2
function myFunction(p1, p2) {
    return p1 * p2;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>

<p>Call a function which performs a calculation and returns the result:</p>

<p id="demo"></p>

<script>
function myFunction(p1, p2) {
  return p1 * p2;
}

let result = myFunction(4, 3);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

JavaScript-funktion syntaksi

JavaScript-funktio määritellään avainsanalla funktio, jota seuraa nimi ja sen jälkeen sulkeet ().

Toimintojen nimet voivat sisältää kirjaimia, numeroita, alaviivoja ja dollarimerkkejä (samat säännöt kuin muuttujat).

Suluissa voi olla parametrien nimiä pilkuilla erotettuina:
(parametri1, parametri2, ...)

Toiminnon suorittama koodi sijoitetaan hakasulkeisiin: {}

function
name(parameter1, parameter2, parameter3) {
    // code to be executed
}

Funktioiden parametrit on lueteltu suluissa() in funktion määritelmä.

Funktioiden argumentit ovat arvoja funktio vastaanottaa, kun sitä kutsutaan.

Funktion sisällä argumentit (parametrit) toimivat paikallisina muuttujina.

Toiminnon kutsuminen

Toiminnon sisällä oleva koodi suoritetaan, kun "jotain" kutsua (kutsuu) toiminto:

Kun tapahtuma tapahtuu (kun käyttäjä napsauttaa painiketta)
Kun se kutsutaan (kutsutaan) JavaScript-koodista
Automaattisesti (itse kutsuttu)

Opit paljon lisää funktioiden kutsumisesta myöhemmin tässä opetusohjelma.

Toiminnon palautus

Kun JavaScript saavuttaa return-lauseen, toiminto lopettaa suorittamisen.

Jos funktio kutsuttiin käskystä, JavaScript tekee sen "return" suorittaa koodin kutsuvan käskyn jälkeen.

Funktiot laskevat usein palautusarvon. Palautusarvo on "palasi" takaisin soittaja":

Esimerkki

Laske kahden luvun tulo ja palauta tulos:

// Function is called, the return value will end up in x
let x = myFunction(4, 3);

function myFunction(a, b) {
// Function returns the product of a and b
    return a * b;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>

<p>Call a function which performs a calculation and returns the result:</p>

<p id="demo"></p>

<script>
let x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;

function myFunction(a, b) {
  return a * b;
}
</script>

</body>
</html>

Miksi toiminnot?

Toiminnoilla voit käyttää koodia uudelleen

Voit kirjoittaa koodia, jota voidaan käyttää monta kertaa.

Voit käyttää samaa koodia eri argumenteilla erilaisten tulosten tuottamiseksi.

Operaattori

()-operaattori kutsuu (kutsuu) funktion:

Esimerkki

Muunna Fahrenheit Celsiuksiksi:

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

let value = toCelsius(77);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>

<p>Invoke (call) a function that converts from Fahrenheit to Celsius:</p>
<p id="demo"></p>

<script>
function toCelsius(f) {
  return (5/9) * (f-32);
}

let value = toCelsius(77);
document.getElementById("demo").innerHTML = value;
</script>

</body>
</html>

Funktion käyttäminen väärillä parametreilla voi palauttaa väärän vastauksen:

Esimerkki

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

let value = toCelsius();

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>

<p>Invoke (call) a function to convert from Fahrenheit to Celsius:</p>
<p id="demo"></p>

<script>
function toCelsius(f) {
  return (5/9) * (f-32);
}

let value = toCelsius();
document.getElementById("demo").innerHTML = value;
</script>

</body>
</html>

Funktion käyttäminen ilman() palauttaa funktion, ei funktion tulosta:

Esimerkki

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

let value = toCelsius;

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>

<p>Accessing a function without () returns the function and not the function result:</p>
<p id="demo"></p>

<script>
function toCelsius(f) {
  return (5/9) * (f-32);
}

let value = toCelsius;
document.getElementById("demo").innerHTML = value;
</script>

</body>
</html>

Huomautus

Kuten yllä olevista esimerkeistä näet, toCelsius viittaa funktioobjektiin ja toCelsius() viittaa funktion tulokseen.

Muuttujaarvoina käytetyt funktiot

Funktioita voidaan käyttää samalla tavalla kuin muuttujia, kaikentyyppisissä kaavoissa, tehtävissä ja laskelmat.

Esimerkki

Sen sijaan, että käyttäisit muuttujaa funktion palautusarvon tallentamiseen:

let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";

Voit käyttää funktiota suoraan muuttujan arvona:

let text = "The temperature is " + toCelsius(77) + " Celsius";

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<p>Using a function as a variable:</p>

<p id="demo"></p>

<script>
let text = "The temperature is " + toCelsius(77) + " Celsius.";
document.getElementById("demo").innerHTML = text;

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
} 
</script>

</body>
</html>

Opit paljon lisää toiminnoista myöhemmin tässä opetusohjelmassa.

Paikalliset muuttujat

JavaScript-funktiossa ilmoitetuista muuttujista tulee PAIKALLINEN toiminto.

Vain paikalliset muuttujat ovat käytettävissä toiminnon sisältä.

Esimerkki

// code here can NOT use carName

function myFunction() {
  let carName = "Volvo";
  // code here CAN use carName
}

// code here can NOT use carName

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>

<p>Outside myFunction() carName is undefined.</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
let text = "Outside: " + typeof carName;
document.getElementById("demo1").innerHTML = text;

function myFunction() {
  let carName = "Volvo";
  let text = "Inside: " + typeof carName + " " + carName; 
  document.getElementById("demo2").innerHTML = text;
}

myFunction();
</script>

</body>
</html>

Koska paikalliset muuttujat tunnistetaan vain niiden funktioiden sisällä, samannimisiä muuttujia voidaan käyttää eri funktioissa.

Paikalliset muuttujat luodaan, kun toiminto käynnistyy, ja poistetaan, kun toiminto on valmis.