JavaScript-syntaksi

Sisällysluettelo

    Näytä sisällysluettelo

JavaScript-syntaksi on joukko sääntöjä, miten JavaScript-ohjelmia rakennetaan:

// How to create variables:
var x;
let y;

// How to use variables:
x = 5;
y = 6;
let z = x + y;

JavaScript-arvot

JavaScript-syntaksi määrittelee kahdenlaisia arvoja:

  • Kiinteät arvot

  • Muuttuvat arvot

Kiinteitä arvoja kutsutaan Literaaleiksi.

Muuttujien arvoja kutsutaan muuttujiksi.

JavaScript Literaalit

Kiinteiden arvojen kaksi tärkeintä syntaksisääntöä ovat:

1. Numerot kirjoitetaan tai ilman desimaaleja:

10.50

1001

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>Number can be written with or without decimals.</p>

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

<script>
document.getElementById("demo").innerHTML = 10.50;
</script>

</body>
</html>

2. Josut ovat tekstiä, joka on kirjoitettu kaksois- tai yksittäislainausmerkkeihin:

"John Doe"

'John Doe'

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings</h2>

<p>Strings can be written with double or single quotes.</p>

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

<script>
document.getElementById("demo").innerHTML = 'John Doe';
</script>

</body>
</html>

JavaScript-muuttujat

Ohjelmointikielessä muuttujat käytetään tallentamaan tietoarvoja.

JavaScript käyttää avainsanoja var, anna ja const ilmoittaa muuttujat.

Yhtäysmerkkiä käytetään arvojen määrittämiseen muuttujille.

Tässä esimerkissä x on määritelty muuttujaksi. Sitten x on annettu (annettu) arvo 6:

let x;
x = 6;

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>In this example, x is defined as a variable.
Then, x is assigned the value of 6:</p>

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

<script>
let x;
x = 6;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

JavaScript-operaattorit

JavaScript käyttää aritmeettisia operaattoreita ( + - * / ) osoitteeseen laske arvot:

(5 + 6) * 10

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Operators</h2>

<p>JavaScript uses arithmetic operators to compute values (just like algebra).</p>

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

<script>
document.getElementById("demo").innerHTML = (5 + 6) * 10;
</script>

</body>
</html>

JavaScript käyttää määritysoperaattoria ( = ) määrittämiseen muuttujien arvot:

let x, y;
x = 5;
y = 6;

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>Assigning JavaScript Values</h2>

<p>In JavaScript the = operator is used to assign values to variables.</p>

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

<script>
let x, y;
x = 5;
y = 6;
document.getElementById("demo").innerHTML = x + y;
</script>

</body>
</html>

JavaScript-lausekkeet

Lauseke on yhdistelmä arvoja, muuttujia ja operaattoreita, joka laskee arvon.

Laskutoimitusta kutsutaan arvioimiseksi.

Esimerkiksi 5 * 10 evaluoituu 50:ksi:

5 * 10

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Expressions</h2>

<p>Expressions compute to values.</p>

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

<script>
document.getElementById("demo").innerHTML = 5 * 10;
</script>

</body>
</html>

Lausekkeet voivat sisältää myös muuttuvia arvoja:

 x * 10

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Expressions</h2>

<p>Expressions compute to values.</p>

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

<script>
var x;
x = 5;
document.getElementById("demo").innerHTML = x * 10;
</script>

</body>
</html>

Arvot voivat olla erityyppisiä, kuten numeroita ja merkkijonoja.

Esimerkiksi "John" + " " + "Doe", arvo on "John Doe":

 "John" + " " + "Doe"

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Expressions</h2>

<p>Expressions compute to values.</p>

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

<script>
document.getElementById("demo").innerHTML = "John" + " "  + "Doe";
</script>

</body>
</html>

JavaScript-avainsanat

JavaScriptin avainsanoja käytetään tunnistaa suoritettavat toimet.

The anna avainsana kertoo selaimen luomaan muuttujia:

let x, y;
x = 5 + 6;
y = x * 10;

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>The <b>let</b> Keyword Creates Variables</h2>

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

<script>
let x, y;
x = 5 + 6;
y = x * 10;
document.getElementById("demo").innerHTML = y;
</script>

</body>
</html>

The Avainsana var käskee selaimen myös luomaan muuttujia:

 var x, y;
x = 5 + 6;
y = x * 10;

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>The var Keyword Creates Variables</h2>

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

<script>
var x, y;
x = 5 + 6;
y = x * 10;
document.getElementById("demo").innerHTML = y;
</script>

</body>
</html>

Näissä esimerkeissä käyttämällä vara tai antaa tuottaa saman tuloksen.

Saat lisätietoja varista ja anna myöhemmin tässä opetusohjelmassa.

JavaScript-kommentit

Kaikki JavaScript-lauseet eivät ole "suoritettuja".

Koodi kaksoisviivan jälkeen // tai välillä /* ja */ käsitellään kommenttina.

Kommentit jätetään huomiotta, eikä niitä jätetäkään teloitettu:

let x = 5;   // I will be executed
// x = 6;   I will 
NOT be executed

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comments are NOT Executed</h2>

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

<script>
let x;
x = 5;
// x = 6; I will not be executed
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Saat lisätietoja kommenteista myöhemmässä luvussa.

JavaScript tunnisteet/nimet

Tunnisteet ovat JavaScript-nimiä.

Tunnisteita käytetään muuttujien ja avainsanojen sekä funktioiden nimeämiseen.

Virallisia nimiä koskevat säännöt ovat samat useimmissa ohjelmointikielissä.

JavaScript-nimen tulee alkaa seuraavasti:

  • kirjain (A-Z tai a-z)

  • Dollarin merkki ($)

  • Tai alaviiva (_)

Seuraavat merkit voivat olla kirjaimia, numeroita, alaviivoja tai dollarimerkkejä.

Huomautus

Numerot eivät ole sallittuja nimien ensimmäisinä merkkinä.

Näin JavaScript voi helposti erottaa tunnisteet numeroista.

JavaScript on kirjainkoon erottelukyky

Kaikki JavaScript-tunnisteet ovat kirjainkoolla on merkitystä.

muuttujat lastName ja sukunimi, on kaksi eri muuttujaa:

let lastname, lastName;
lastName = "Doe";
lastname = "Peterson";

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript is Case Sensitive</h2>

<p>Try to change lastName to lastname.</p>

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

<script>
let lastname, lastName;
lastName = "Doe";
lastname = "Peterson";
document.getElementById("demo").innerHTML = lastName;
</script>

</body>
</html>

JavaScript ei tulkitse LET tai Let avainsanaksi let.

JavaScript ja Camel Case

Historiallisesti ohjelmoijat ovat käyttäneet erilaisia tapoja yhdistää useita sanoja yhdeksi muuttujan nimeksi:

Tavuviivat:

etunimi, sukunimi, master-kortti, kaupunkien välinen.

Tavuviivat eivät ole sallittuja JavaScriptissä. Ne on varattu vähennyksiin.

Alleviivaus:

etunimi, sukunimi, master_card, inter_city.

Upper Camel Case (Pascal Case):

Etunimi, sukunimi, MasterCard, InterCity.

Alakamelikotelo:

JavaScript-ohjelmoijat käyttävät yleensä kamelin kirjainta, joka alkaa pienellä kirjaimella:

etunimi, sukunimi, masterCard, interCity.

JavaScript-merkkijoukko

JavaScript käyttää Unicode-merkistöä.

Unicode kattaa (melkein) kaikki maailman merkit, välimerkit ja symbolit.

Jos haluat tarkastella lähemmin, tutustu täydelliseen Unicode-viitteeseen.