Lehekülje JavaScript lähteteksti vaatamine

== Süntaks ==

JavaScripti süntaks pärineb suuresti [[C (programmeerimiskeel)|C]]-st, millest on üle võetud if- ja switch-tingimuslaused, for- ja while-tsüklid ja -operaatorid. [[Java]]st pärinevad throw- ja try-catch-konstruktsioonid erindite viskamiseks ja püüdmiseks.

===Hello world===

[[Hello world]] on programm, mis avab dialoogiakna:

<syntaxhighlight lang="javascript">
alert("Hello world");
</syntaxhighlight>

Alternatiivne variant, mis kirjutab teksti otse veebilehele:

<syntaxhighlight lang="javascript">
document.write("Hello world");
</syntaxhighlight>

===Objektid ja massiivid===

[[Massiiv (programmeerimine)|Massiiv]]ide loomiseks saab kasutada eraldi literaali:

<syntaxhighlight lang="javascript">
var myArray = [2, 3, 5, 7, 11];
</syntaxhighlight>

Samuti objektide jaoks:

<syntaxhighlight lang="javascript">
var myObject = {name: "John", age: 15};
</syntaxhighlight>

Nii massiivide kui ka harilike objektide liikmetele pääseb ligi C-st tuttava konstruktsiooniga:

<syntaxhighlight lang="javascript">
myArray[1]; // tagastab 3
myObject["name"]; // tagastab "John"
</syntaxhighlight>

Lisaks saab nimekujulistele liikmetele ligi punkt-notatsiooniga:

<syntaxhighlight lang="javascript">
myObject.name; // tagastab "John"
myArray.length; // tagastab 5 (massiivi pikkuse)
</syntaxhighlight>

JavaScripti objektide ja massiivide süntaksil põhineb [[JSON]] (''JavaScript Object Notation'') andmevahetusvorming,<ref name="FiSP4" /> mida kasutatakse ohtralt koos [[Ajax]]iga.

===Funktsioonid===

[[Funktsioon (programmeerimine)|Funktsioon]]e luuakse funktsiooniliteraali abil:

<syntaxhighlight lang="javascript">
function factorial(n) {
    if (n > 1) {
        return n * factorial(n-1);
    } else {
        return 1;
    }
}
</syntaxhighlight>

Funktsioonile saab panna nime, nagu näites on tehtud, kuid saab kasutada ka [[anonüümne funktsioon|anonüümseid funktsioone]]. Viimaseid on hea anda parameetritena kõrgemat järku funktsioonidele. Näiteks järgmise koodiga sorteeritakse massiivi kasutades võrdlemiseks anonüümset funktsiooni:

<syntaxhighlight lang="javascript">
[4,7,1,3,6].sort(function(a, b) {
    return a > b ? 1 : (a < b ? -1 : 0);
});
</syntaxhighlight>

Üks levinud anonüümsete funktsioonide kasutus on kohalike muutujate globaalsesse nimeruumi sattumise vältimine. Selleks mähitakse kogu kood ühe suure anonüümse funktsiooni sisse, mis kohe käivitatakse:

<syntaxhighlight lang="javascript">
(function(){
    // ...kogu kood siia...
})();
</syntaxhighlight>

===Konstruktorfunktsioonid ja prototüübid===

Kui on vaja luua mitu sarnaste omadustega objekti, luuakse esmalt konstruktorfunktsioon, mille prototype atribuut määrab ära loodavate objektide jagatud tunnused:

<syntaxhighlight lang="javascript">
function Person(name) {
    this.name = name;
}
Person.prototype = {
    greet: function(person) {
        alert("Hello " + person.name + ", my name is " + this.name);
    }
};
</syntaxhighlight>

Seejärel saab new-operaatori abil luua objekte, mis viitavad konstruktorfunktsiooni Person prototüübile:

<syntaxhighlight lang="javascript">
var john = new Person("John");
var mary = new Person("Mary");
john.greet(mary); // väljastab: Hello Mary, my name is John
mary.greet(john); // väljastab: Hello John, my name is Mary
</syntaxhighlight>

Siiani näeb kõik välja nagu klassipõhises objektorienteeritud programmeerimises. Kuid Person pole siiski klass, vaid hoopis dünaamilisem kooslus. Näiteks võime Personi prototüüpi jooksvalt täiendada ning kõik muudatused kajastuvad automaatselt selle konstruktoriga loodud objektides:

<syntaxhighlight lang="javascript">
Person.prototype.age = 25;
john.age; // tagastab: 25
mary.age; // tagastab: 25
</syntaxhighlight>

Objektid aga võivad prototüübis defineeritud välju üle kirjutada:

<syntaxhighlight lang="javascript">
john.age = 82;
john.age; // nüüd 82
mary.age; // endiselt 25
Person.prototype.age; // endiselt 25
</syntaxhighlight>

Või luua uusi välju:

<syntaxhighlight lang="javascript">
john.nationality = "Estonian";
john.nationality; // tagastab: "Estonian"
mary.nationality; // tagastab: undefined
</syntaxhighlight>

=== Kaasamine veebilehele ===

JavaScripti kaasamiseks [[HTML]]-dokumenti kasutatakse <script>-elementi:

<syntaxhighlight lang="html">
<script type="text/javascript">
  document.write('Terekest!');
</script>
</syntaxhighlight>

Alternatiivne variant on linkida <script>-elemendi abil eraldi JavaScripti faili:

<syntaxhighlight lang="html">
<script type="text/javascript" src="script.js"></script>
</syntaxhighlight>

Enamasti kaasatakse JavaScript lehele tavalise lähtekoodi kujul. Mahukamaid faile minimeeritakse, et vähendada allalaaditavat andmehulka ja kiirendada veebilehe laadimist.<ref name="210N6" />

Mitte kõik brauserid ei toeta JavaScripti ja ka nendel, mis toetavad, saab selle välja lülitada. Kuna pole garanteeritud, et leheküljel olev JavaScript lehe avanedes käivitub, saab kasutada JavaScripti nii, et see üksnes täiustab ilma JavaScriptitagi toimivat lehekülge.<ref name="7f9ad" />