Een introductie in Javascript. (Ruwe text moet ik nog opschonen en beter uitleggen)

Variabelen en Literals.

Literals zijn de waarden die we opslaan in variabelen. 

 Variabelen in JS hoeven niet expliciet gedeclareerd te worden.
JS is niet heel erg streng.

 JS kent hexedecimale, integers,octals floating points en strings.
met het woord "Var" wordt de variabele gedeclareerd:

In booleans kunnen maar 1 van 2 mogelijke waarden  opgeslagen worden:

true of false

1 of 0

yes of no

Bij nummerieke waarden moeten we geen aanhalingstekens gebruiken, of de waarden worden als text behandeld.

Als we strings aan elkaar willen knopen doen we dat met het plusteken: +

Als we een nieuwe regel willen, gebruiken we  \n .

Dit kan in de string zelf gebeuren.   

Er zijn gewone variabele, ofwel primitieve variaben. En er zijn object variabelen.
Een primitieve variabele declarareer je zo:

Escape teken \
Het \ teken is een escape teken, net als bij Php. Dus ook voor aanhalingstekens e.d
Als we een slach wilen zien moeten we er twee gebruiken. 

String functies.

charAt() geeft de positie aan van een string. met -1 kunnen we van de achterkant beginnen.
charCodeAt() geeft de AscII code aan van een string.

indexOf() substring functies.
lastindexOf() substring begint van einde.

substr() stuk uit string halen. Beide functies doen hetzelfde met andere parameters.
substring() van de parameters zijn sommige optioneel sommige niet.

Arrays
Arrays kun je alleen gebruiken als de data erin van hetzelfe type is.
Dus of een array met cijfers, of een array met strings.

Zal dan de steden afdrukken met een komma ertussen.

Array functies.

concat() arrays aan elkaar plakken
slice() deel van arrays kopiëren.
join() arrays samenvoegen inéén string.
sort() sorteren van arrays (nummeriek of alfabet)
reverse() de sortering omdraaien.

Datum functies.
get(set)date()  instellen of verkrijgen van datum.
get(set)day() instellen of verkrijgen van dag.
get(set)month() instellen of verkrijgen van maand.
get(set)fullyear()  instellen of verkrijgen van jaar.

Bovenstaande kan ook met de tijd: time, hour, minute, second etc.

Objecten
Bij objecten kunnen we wel verschillende type data gebruiken:

Met de punt geven we dus aan welk onderdeel we van het object willen zien.

zal Amsterdam afdrukken. 

We kunnen ook een heel stel objecten in een array opslaan.

 Operators (wiskundig)

 + optellen

- aftrekken

* vermenigvuldigen

/ delen

% modules (restwaarde)

Operators (vergelijkend)

== gelijk aan(2 x = dus !)

<> niet geljk aan

> groter dan

< kleiner dan

!= niet gelijk aan

Operators (combinatie logische vergelijking)

|| = OR

&& = And 

Operators (aan elkaar plakken)

 + voor strings

+= als we 2 strings aan elkaar willen plakken. 

Ophogen en aftellen.(vooralhandig in loops e.d.)

++   ophogen.

--    aftellen.

Operators hebben soms voorrang op elkaar vermenigvuldigen, gaat voor optellen, Als we dat anders willen zetten we wat we eerder berekend willen hebben tussen haakjes.

If....Else

Switch

Met break voorkom je dat er meerdere cases worden geevalueerd als de eerste is gevonden.
Bij een switch kan je ook 2 of meerder cases bij elkaar zetten en die dezelfde code laten uitvoeren.

FOR (for (initiatlisatie, testen, ophogen of verminderen))

For....In (speciaal voor arrays)

Do..while (gebeurd in ieder geval 1 keer)

While (zal nooit draaien als de conditie niet klopt)

Ook handig met een while:
vanaf achteren terugtellen(kijken) icm met een indexOf functie (positie gevonden van een bepaalde string):

Statements en de punt-komma.

alle statements kunnen afgesloten worden met een punt komma ;
Deze zijn niet verplicht maar kunnen helpen bij  het debuggen.

Onthoudt wel dat statements in block geen punt komma mogen hebben.

functies

Functies kunnen ook afgekort worden:

De code tussen de haakjes word gelijk uitgevoerd.
Zo kan je ook een dergelijke functies in een inline tag. Voor de browser lijkt het of het één regel code is.
Maar in feite kan je er dus een hele functie bouwen. Je kan ze ook nesten.  Bij JQuery word dat nog wel gedaan.

Ingebouwde  functies.

JS heeft ook veel ingebouwde functies. 

pareInt() is om van een string een getal te maken.
Vooral makkelijk als we gegevens van de gebruiker nodig hebbendie het als text invuld, daar mee willen rekenen.

 Voor floats is er: parseFloat();

isNaN() is een funtie om te kijken of iets überhaubt wel een nummer is
(NaN staat voor Not a Number atall)

Objecten.
Er zijn veel ingebouwde objecten in JS.

Een voorbeeldje met Date()

Je kan ook bij het initialiseren van een object variabele gelijk een waarde meegeven:

Van arrays kan je ook objecten maken door ze te declarere als New Array()

Window.

window.defaultstatus = "De text die onder in beeld staat van de browser"

history.go(2), zo gaan we 2 pagina's verder, met een - voor de 2 gaan we terug.
history.back, zo gaan we een terug
history.forward, zo gaan we 1 verder.

location.href, de huidige pagina.
location.protocol, het protocol van de huidige pagina.
location.port, de poort van de huidige pagina. 

navigator. met dit object kunnen we gegevens opvragen over de browser.
screen. de resolutie e.d. van de coputer waar we opwerken.

Document.

een document (de huidige pagina) heeft arrays met elementen:

forms[], images[], links[]

Hier kunnen we dus door heen lopen en kijken of we er iets mee moeten. 

Events.

De normale events kennen we, maar die kunnen we ook op een andere manier gebruiken:

Binnen script tags (let op zonder () ):

Forms
Er kunnen meerdere forms per pagina zijn, alleen er word er maar 1 per keer gesubmit naar de server. (klopt dit?)

Met form.elements[] hebben we alle elementen in een form, behalve de img elementen.
We kunnen length erachter zetten en dan hebben de hoeveelheid elementen.
Met form.elements.type krijgen we om welke soort element het gaat: text, button enz.

Met form.reset kunnen we een form terugbrengen in de originele staat, dus ook eventuele default waarden worden dan weer ingesteld.

De form heeft een onsubmit event. Door deze false te geven kunnen we die cancelen, of met true door laten gaan.

Alle elementen in een form hebben de form property, en die geeft de huidige form terug waarin ze zich bevinden.

Alle elementen in een form hebben de events: onfocus en onblur()

en functies (of methoden) onfocus() en onblur().

Buttons 

Er zijn verschillende soorten knoppen:

submit, reset, button en hidden

events: onmousseup en onmousedown

Textboxen

Als van een textarea de wrap property ingesteld word op hard (ipv soft) dan worden de enters doorgegeven aan de server als de
form word gesubmit.

Er zijn ook hidden textvelden die we kunnen bereiken door JS en ook kunnen vullen.
Vooral handig om info door te geven aan andere pagina's.

Selects
Het verschil tussen een keuzelijst en een combobox is dat er bij een lijst staat:
size= (getal meer dan 1).

Als we bij een lijst:
multiple meegeven dan  kunnen er meer opties geselecteerd worden (met ctrl of shift toets)

Als we bij een select: selected meegeven in de <option>tag dan word die geselecteerd.

In JS kunnen we de select zo bereiken:

We kunnen met value de optiewaarde zien, en met text de text waarde van de option.
Met Index krijgen we de plaats in de lijst van de option.
Met selectedIndex kunnen we zien welke waarde de gebruiker heeft geselecteerd.

De options komen in een array, dus daar moeten we dan doorheen stappen.
Als we een option willen weghalen moeten we deze op null zetten.
Met length kunnen we weer zien hoeveelkeuzes er gemaakt zijn. 

IE heeft zijn eigen add() en remove()  functies als het gaat om options.
(getest en werkt ook in FF 3)

Selects hebben ook events: onfocus, onblur en onchange.

 Radio.
Als we in JS een radiobutton willen benaderen dan doen we dat zo: