JahveScript

Den kabbalistiske version af JavaScript. Vi siger tak til min telefon og dens dårlige tastatur.

Events

Events sker hele tiden - siden loader, musen føres hen over noget eller brugeren klikker på et eller andet.
Event handlers bruges til at styre hvad der skal ske i tilfælde af et event. Her er nogle event-navne:

onload

onclick

onmouseover

onblur

onfocus

Her er et helt simpelt eksempel på brug af en event:

onclick="alert('Hej med dig');"

Her er et lidt mere kompliceret eksempel med event handlersne onblur og onfocus:

var emailField = document.getElementById("email");

emailField.onfocus = function() {

   if ( emailField.value=="your email") {
   };

emailField.onblur = function() {
   if (emailField.value == "") {
   emailField.value = "your email";
   }
};

Timers

Der er tre forskellige timers:

setTimeout: Denne funktion gør, at man kan indsætte en enkelt event efter et stykke tid er gået. 

setInterval: Denne funktion skaber et loop, hvor en event indtræffer hver gang et antal sekunder er gået. 

clearInterval: Denne funktion "resetter" setInterval.

Tid angives i millisekunder.

Her er et eksempel fra Lynda.com på en billedserie med timer:

var myImage = document.getElementById("mainImage");


var imageArray = ["_images/overlook.jpg", "_images/winery.jpg", "_images/lunch.jpg"];


var imageIndex = 0;

function changeImage() {
   myImage.setAttribute("src", imageArray[imageIndex]);

   imageIndex++;

   if (imageIndex >= imageArray.length) {

        imageIndex = 0;
   }

}


setInterval(changeImage,5000);

Scriptet her henter altså et billede fra en lille array af billeder. 

Linking

Det er egentlig ret intuitivt, når man har arbejdet med CSS, men bare som en reminder til mig selv:
JavaScript kan skrives inline, det kan skrives i header eller man kan linke til det i et separat dokument.
Det sidste gøres sådan her:

<script src="path/myscript.js" type="text/javascript"></script>

Type er ikke strengt nødvendigt, men bare meget god stil. 

Lynda.com-instruktøren anbefaler, at man indsætter scriptet nederst på siden, så hele siden når at indlæse inden scriptet kommer med. 

Hvad er et objekt?

Lad os sige for nemheds skyld, at et objekt er en slags beholder, der samler koncept og handling. 

Et objekt giver mulighed for at samle funktioner og variable, og give dem et fælles navn.

Her er nogle eksempler på objekter:

Math object

Array object

Date object

Window object

Jeg kan også lave mine egne objekter. Hvis jeg fx ikke har lyst til at bruge en array, kan jeg lave et objekt, der ikke benytter sig af et indeks. Jeg bruger "dot"-systemet, hvor første ord (foran punktum) er mit objekt, og ordet derefter er min variable. Der er altså to niveauer angivet i sætningen.

Når en variabel står inde i et objekt, kaldes den for en "property".

Fx sådan her:

var player = new Object();

player.name = "Fred";

player.score = 10000;

player.rank = 1;

Dette kan også skrives i shorthand:

var player1 = { name: "Fred", score: 1000, rank: 1 };

var player2 = { name: "Sam", score: 1000, rank: 5 };

Dagens link

https://www.zoho.com/creator/

Zoho er en online databaseservices, som jeg glæder mig til at se nærmere på.

JavaScriptordforråd

Dette skulle være en god ressource:

http://developer.mozilla.org/en/JavaScript/Reference

Men jeg synes ikke den er specielt overskuelig - i hvert fald ikke for en nybegynder som mig.

Her er hvad jeg selv har skrevet ned so far:

Values

-numericals (tal)
-Strings (skrives inden i gåseøjne, og kan være en hvilken som helst tekst)

Hvert bogstav har en værdi. Store bogstaver har mindre værdi end små.

Boolean values: 
-true (fx 2<3 vil give outputtet "true")
-false (fx 2>3)

Man kan desuden lave sine egne values.
Et stykke kode, der producerer en value, hedder et expression.
Et statement er sat sammen af expressions. Programmer består af statements. Det mindste program er et expression med et semikolon efter, fx:
1;
!false;

Operatorer:

-: Trækker fra
*: ganger
/: Dividerer
+: lægger til
typeof: siger hvilken type value man har tastet ind
>= : Betyder 'er større end eller lig med'
<= : Er mindre end eller det samme som
== : Er lig med
===: Er præcis lig med
!= : Er ikke lig med
+= : Læg dette nr til denne variable


3 operatorer, der bruges sammen med boolean values:

and, skrives &&: linker to values

or, skrives | |: bruges hvis en af to values er "true"

not, skrives ! : (fx "grass" != "green")

Variable: 

Variable, var, er et navn på en eller anden enhed, ligesom x og y i en ligning. Man kan selv definere hvad den hedder. Et environment er samlingen af variables og values, som ligger indbygget i browseren.

Eksempler på indbyggede variable:
alert : er en variabel, der åbner et lille dialogvindue i browseren

confirm : stiller brugeren et ok/cancel- spørgsmål

prompt : stil et åbent spørgsmål, som brugeren selv besvarer i et tekstfelt

while : skaber et loop. Skriv derfor et expression bagefter, der definerer hvor længe loopen kører

Invoke/call/apply: når man aktiverer koden. Dette skriver man i paranteser, fx alert("Sanne");

Dagens JavaScript-lektion: Arrays

11. dag på JavaScript-kurset...
Olle har anbefalet, at jeg opretter en blog. Så det er hermed gjort. Den er mest til mig selv, for at jeg kan dokumentere min udvikling, men hvis nogen har lyst til at komme forbi og sige noget klogt, skal de være velkomne.
Altså, javascriptkursus er jo så meget sagt. Jeg er på et 6-ugers kursus i at lave webb apps hos firmaet IT-Kompetence. Jeg vil ikke på nogen måde anbefale det. I stedet for at føle, at jeg opkvalificerer mig, føler jeg mig totalt mismodig. Holdene er overfyldte, og kursisternes kunnen er så varieret, at man lige så godt kunne sætte en indskolingselev på hold med en universitetsstuderende. På mit hold er der både garvede programmører, der har levet af at vedligeholde databaser hele deres voksne liv, og så - well, mig. Hvis eneste forudsætninger for at være på kurset er, at jeg kan HTML og CSS.

Ok, nok brok. Der er sket det rigtigt fine i løbet af de sidste par dage, at jeg har fået taget hul på et javascriptkursus på Lynda.com. Det er rigtig godt! Dermed ikke sagt at jeg synes det er let, men det er absolut bedre end at sidde og lytte til min underviser, der udgyder underlige lyde.

I dag har jeg arbejdet på at lære om arrays. Så vidt jeg forstår:
En array er en liste over variable. Fordelen ved at skrive dem op på listeform viser sig først tydeligt, når man når op i databasestørrelser. I forhold til mit eget projekt (som jeg vil komme ind på en anden gang) har de også den fordel, at man kan manipulere tallene. Jeg kan vælge to numre fra indekset, og lægge dem sammen. Eller sammenligne dem. Eller noget andet.

Her er en meget simpel lille array, som jeg skrev ned i dag:

Den skriver sådan set bare punkt tre ud.

Jeg kan se, at der er flere forskellige måder at skrive en array op på. Dette her er den lange.

Jeg kan også godt lide denne her måde at skrive en array op på:

var groceryList = [] ;

Men af en eller anden grund kunne jeg ikke få den til at virke. Så det kommer måske senere.

Det samme gælder hvad min tålmodige Lynda.com-instruktør kalder for "shorthand":

var groceryList = ["Agurk", "Gulerod", Vindruer"];

Det er jo meget mere elegant. Det virker bare ikke for mig lige nu.

 Arrays har indbyggede funktioner. Her er tre eksempler: 

groceryList.reverse(); : Reverse giver en ny array, der "vender" indekset om i omvendt rækkefølge

groceryList.join(); : Join lægger indholdet af arrayen sammen, og outputter dem som en enkelt string