| Answers.com | Client-server http://www.answers.com/topic/client-server |
|
| Wikipedia | JavaScript http://en.wikipedia.org/wiki/JavaScript |
|
| W3schools | JavaScript overblik m.m. http://www.w3schools.com/js/default.asp |
|
| Thau: | Thau's JavaScript Tutorial http://www.webmonkey.com/webmonkey/programming/javascript/tutorials/tutorial1.html |
The important stuff you need to know
Link til bogens download og tutorial side
HTML og CSS
- Strukturering af indhold som elementer via tags. Tags kan specificere via attributter
- Links
- Forms
- Div elementer til layout
- Fix og Liqued layout
- Styling af indhold via inline, intern eller extern CSS
Flash programmering via ActionScript
- Variable, operatorer
- Kontrolstruktur
- Events og funktioner
- Objekter f.eks. movieclips, Instans navne, properties (x, y, alpha), metoder
- Andet?
Spørgsmål:
Hvad er det mest motiverende ved programmering?
Hvad er det mindst motiverende ved programmering?
Hvordan hjælper man bedst hinanden med at lære programmering?
I daglig tale og i mange lærebøger siger man, at computere kun kan forstå ét sprog, nemlig maskinkode. Det er selvfølgelig unuanceret, men det er dog en del af sandheden, idet det sprog som computeren skal rette sig efter i form af kommandoer og programsætninger, skal være oversat til maskinkode for at computerens processor kan udføre det.
Oprindeligt kunne og skrev programmører ofte direkte i maskinkode. Det var det var en omstændelig og ineffektivt proces, som tog lang tid.
Programmeringssprogene, der afløste maskinsprog, kaldes højniveau-sprog. De kommandoer og ordrer, der skrives i disse sprog, har en tilstræbt lighed med naturligt sprog. Højniveau sprogene skrives som almindelig (engelsk) tekst. Der må derfor et mellemled ind for at oversætte det næsten naturlige tekstsprog til maskinsprog eller maskinkode. Et sådan mellemled kaldes en compiler.
I forbindelse med applikationsudvikling til Internet, er der opstået mange nye programmeringssprog, der ikke er kompilerede, men som er fortolkede sprog. Fortolkningen foregår under programmets udførelse. Det er mao. først under udførelsen, programkoden bliver fortolket til maskinkode. Disse sprog kaldes også scriptsprog.
Det er smart, fordi scriptsprog i princippet er platformsuafhængige. Det er fortolkeren (f.eks. Browseren, Flash playeren), på den platform de afvikles på, der varetager oversættelsen til maskinkode. Omkostningen er, at programmet afvikles langsommere, fordi koden skal fortolkes inden instruktionerne som maskinkode videregives til mikroprocessoren.
Vi kender i virkeligheden en række fortolkere. Et operativsystems kommandofortolker, kaldet "shell" er et eksempel, dvs skriver man en kommando til UNIX eller DOS, eller klikker på en ikon i Windows, så afleveres dette til en fortolker, der gør det maskinforståeligt.
De fortolkere vi skal arbejde med her i forbindelse med JavaScript er browsere som Microsoft Internet Explorer, Firefox og Opera. Det er således webbrowseren, der er ansvarlig for at oversætte JavaScript-instruktionerne til maskinkode.
I forhold til client/server modellen, ser vi at JavaScript afvikles via browseren og dermed på klienten. Derfor kaldes JavaScript også et klientside sprog. Undertiden optræder JavaScript dog også i rollen som serverside sprog, men her er sprogets udbredelse langt mindre. Af andre browserfortolkede klientside sprog kan nævnes VBScript og JScript. De er begge udviklet af Microsoft, og af den grund er det kun Internet Explorer, der er i stand til at fortolke dem.
Herover for står serversside sprog som fx PHP (Hypertext Preprocessor), ASP (Active Server Pages), JSP (Java Server Pages) og ColdFusion m.fl., der alle er serverside scriptsprog, som fortolkes på webseveren. Af webservere er Apache og IIS (Internet Information Services) de mest udbredte. Vi kommer meget mere ind på dette senere på semesteret, hvor vi skal se på nærmere på PHP.
Nogle forskellige former for client-server modeller
Client/Server model præsenteret på 1 semester
Model fra http://deformation.org/mdu/eng2/sem2/pr01s03.html#csphpudb
XHTML og CSS leverer en statisk gengivelse af en side. Her ændrer indholdet på siden ikke ændrer sig ikke. Anderledes med anvendelse af scriptsprog. Her er det muligt at ændre indholdet dynamnisk over tid, eller ændre det som et resultat af bestemte handlinger (eng. events).
JavaScript - der oprindeligt hed oprindeligt LiveScript, og før det Mocha - blev udviklet af NetScape Communications. Skønt navnelighed er det et helt andet sprog en programmeringssproget Java som det kun har lidt til fælles med. Java er et kompileret sprog, JavaScript et fortolket sprog, og mens Java er et objektorienteret sprog, er JavaScript objektbaseret og bygger på ideen om prototyper. Ligheden mellem de to sprog bygger på deres fælles gæld til C sprogets syntaks.
JavaScript består af to hovedkomponenter:
JavaScript kernen består af det område inden for sproget som det i hovedsagen strukturelt set deler med andre programmeringssprog. Det består af elementer som:
Dokumentobjekterne (DOM) består af et hierarki browserspecifikke objekter som:
Dokument Objekt Modellen (DOM) er hierarkisk, svarende til den hierarkiske opbygning af et XHTML-dokument, hvor de enkelte elementer er indlejret i hinanden og topknudepunktet er det første, oprindelige vindue.
Billedligt talt kan man sammenligne sprogets kerneområde med ledninger eller kabler, der forbinder og styrer den dynamiske afvikling af DOM's komponenter.
Det betyder bl.a. at JavaScript kernen og DOM kan tænkes uafhængigt af hinanden. Man kan fx forestille sig JavaScript kernen anvendt til andre formål. Rent faktisk har JavaScript har været anvendt sammen med ASP til serverside programmering. Tilsvarende kan man forestille sig DOM komponenterne forbundet med andre sprog. Det er fx tilfældet for Internet Explores vedkommende, hvor dokumentobjekterne i denne browser også kan programmeres med VBScript (VisualBasic Script).
DOM betyder bl.a., at JavaScript programmøren har mange præfabrikerede komponenter til sin rådighed. Uden disse browserbaserede objekter måtte programmøren selv bygge objekterne op fra grunden. Situationen svarer lidt til at gå i en hobbyforretning og fx købe et samlesæt til et modelfly, frem for selv at opbygge de enkelte dele fra grunden. Mens programmøren tidligere typisk byggede det hele op selv, har JavaScript programmøren allerede en lang række komponenter (DOM) til sin rådighed.
Når man derfor ofte læser, at JavaScript er et objektorienteret sprog, er det ikke helt korrekt. Man kan ganske vist også i JavaScript definere sine egne objekter, men et af JavaScipts centrale karakteristika er netop, at en lang række browserbaserede objekter er defineret på forhånd. Det er derfor mere korrekt at betegne JavaScript som et objektbaseret sprog.
For at skrive JavaScript er en simpel teksteditor som fx Notepad tilstrækkelig. Det kan dog være en god ide, at anvende en editor med farvekodning som fx Notepad++ eller HomeSite. Det er også muligt af anvende et mere avanceret IDE (Integrated Development Environment) som fx Dreamweaver eller Aptana, der et et opensource IDE og specialudviklet til netop JavaScript.
JavaScript koden fortolkes af en webbrowser. Det er webbrowseren, der sørger for, at den JavaScript-kode du skriver, bliver læst, fortolket og oversat til maskinkode. For at skrive JavaScript behøver du derfor ikke at have adgang til en webserver. Af den grund kaldes JavaScript - som allerede nævnt - for et "client-side" sprog.
JavaScript er enkelt at arbejde med, men er alligevel et komplet programmeringssprog. I takt med du lærer de mere komplicerede aspekter af JavaScript, får du derfor samtidig en introduktion til grundlæggende programmering. Hvis du senere ønsker at gå i gang med andre programmeringssprog som fx C++ eller Java, er JavaScript en glimrende introduktion.
Praktisk talt alle webbrowsere understøtter JavaScript, men forskellige browsere fortolker ikke altid JavaScript på den samme måde. Der er variationer mellem de enkelte browserleverandører og -versioner. Du bør derfor altid checke din JavaScript kode i så mange forskellige browsere - og platforme - som muligt eller alternativt - og bedre - anvende litteratur, der dokumenterer, hvordan JavaScript er implementeret i de mest udbredte browsere. Samtidig bør du overveje, hvordan dine sider vil se ud uden JavaScript. For dine brugere ("klienter") kan vælge at deaktivere JavaScript i browseren.
Lad os starte med at lave et simpelt JavaScript-eksempel:
Hand’s on eksempel (Jeg skriver og I skriver med).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hands on day 1</title>
<script type="text/javascript">
alert('Hello Javascript World');
// Kommentar
// variable med tal og tekst
// Udskrivning af variable
// Aritmetiske operatorer
// Tekst input via prompt
// Array
</script>
</head>
<body>
</body>
</html>
Gem hand's on eksemplet som handson_dag1.html
Det er flere ting, som det er vigtigt at lægge mærke til i ovenstående kode:
<script type="text/javascript">
og </script>.// og slutningen på linjen er en kommentar
og vil blive ignoreret. /* og */ omkring som her:
/* her er en tekstblok
der løber over flere linjer,
som jeg har udkommenteret */
Det første eksempel på et JavaScript kalder en simpel dialogboks frem med teksten: "Hello JavaScript World" indeni:
alert('Hello JavaScript World');
alert kommandoen er faktisk en metode i DOM'ens window objekt. Derfor kan også skrive kommandoen således.
window.alert(Hello JavaScript World');
Variable kendes f.eks. matematik, hvor man i algebra kan arbejde med bogstaver som repræsentere en talværdi a = 2 og b = 3.
I JavaScript kan en variabel repræsenteres ved et bogstave eller flere sammenhængende bogstave og tal . Det er i programmering en god skik at man giver variablerne meningfulde navne.
En variable skabes eller erklæres formelt via keywordet var og det er god programmeringsskik at et programs variable erklæres i starten af programmet. Da javascript er Loose typed skal man ikke ved skabelsen af variablen angive, hvilken datatype variablen skal indeholde. Dette skal man huske i Strong typed programmeringssprog som f.eks. ActionScript 3.0 og Java.
Når variablen bliver skabt indeholder den ingen ting dvs. værdien NULL. Variablen tildeles (eng. assign )først et indhold, når man bruger = symbolet.
var name;
var age,a,b,c,bilNummer,camelBagging, cprNummer;
age = 10; // variablen age tildeles tallet 10
name ="Hal"; // variablen name tildeles en String bestående af karakterene H+a+l
alert("The age is of the computer is now "+ age);
age = 20; // variablen age tildeles en ny værdi
alert("The age is now " + age + "years");
alert("The name of the computer is "+ name);
document.write("<h1>The evil computer from 2001 </h1>"); // skrivning af HTML kode til browser documentet
Forskellen på addition af variabler indeholdenden Number og/ eller String.
| a | b | a + b |
| 2 | 3 | 5 |
| "2" | " 3" | "23" |
| 2 | " Kr." | "2 Kr." |
+ symbolet betyder i forbindelse med Strings for Concatenation som på dansk betyder sammensvejsning.
I tilfælde af variable indeholdende Numbers kan man en række aritmetiske operatorer.
Arithmetic operators are used to perform arithmetic between variables and/or values.
Given that y=5, the table below explains the arithmetic operators:
| Operator | Description | Example | Result |
|---|---|---|---|
| + | Addition | x=y+2 | x=7 |
| - | Subtraction | x=y-2 | x=3 |
| * | Multiplication | x=y*2 | x=10 |
| / | Division | x=y/2 | x=2.5 |
| % | Modulus (division remainder) | x=y%2 | x=1 |
| ++ | Increment | x=++y | x=6 |
| -- | Decrement | x=--y | x=4 |
Assignment operators are used to assign values to JavaScript variables.
Given that x=10 and y=5, the table below explains the assignment operators:
| Operator | Example | Same As | Result |
|---|---|---|---|
| = | x=y | x=5 | |
| += | x+=y | x=x+y | x=15 |
| -= | x-=y | x=x-y | x=5 |
| *= | x*=y | x=x*y | x=50 |
| /= | x/=y | x=x/y | x=2 |
| %= | x%=y | x=x%y | x=0 |
Arrays er en af de mest anvendte datastrukturer i JavaScript. Et array er defineret som et ordnet sæt af værdier, der er associeret med et enkelt variabelnavn eller med en alternativ formulering som en indekseret samling af elementer. Dataelementerne/værdierne i et array kan være alle datatyper, også objekter.
Arrays kan med andre ord opfattes som en flerværdiet variabeltype, der overflødiggør gentagelse af variable af samme type og med næsten enslydende navne. Forstil dig for eksempel, at du skal implementere en "frugtkurv" i et JavaScript program. Uden brug af arrays ville du da være nødt til at oprette en ny variabel for hver ny frugt: var frugt1 = "æbler"; var frugt2 = "ananas"; var frugt3 = "kirsebær"; var frugt4 = "ferskner";
Med arrays kan du i stedet definere én enkelt variabel, der består af en samling frugter, hvor hver frugt indgår som et element i arrayet:
var frugtKurv = new Array("æbler", "ananas", "kirsebær", "ferskner");
Hvis du skal forestille dig et array, kan du sammenligne med en tabel, der blot består af to kolonner og et antal rækker. Hvor mange rækker bestemmer du selv. De to kolonner har overskrifterne Indeks og Værdi, og hver række indeholder et nummer og data. Numrene på de enkelte rækker starter ved 0 og kaldes index:
| Index | Værdi |
|---|---|
| 0 | "æbler" |
| 1 | "ananas" |
| 2 | "kirsebær" |
| 3 | "ferskner" |
Arrays i JavaScript kan oprettes på flere måder. Den første måde ser sådan ud:
var ugedage = new Array(7);
ugedage[0] = "mandag";
ugedage[1] = "tirsdag";
ugedage[2] = "onsdag";
ugedage[3] = "torsdag";
ugedage[4] = "torsdag";
ugedage[5] = "fredag";
ugedage[6] = "søndag";
Der erklæres en variabel, og dernæst angives, at variablen skal oprettes som et array. Det sker med det reserverede ord Array. Det reserverede ord new foran Array skal angives, fordi Array som datatype er et objekt. Tallet i parentesen efter Array angiver, at det nyoprettede array indeholder 7 elementer. Det er frivilligt om du vil angive, hvor mange elementer et array skal indeholde. Antallet markerer heller ingen maksimumsgrænse for hvor mange elementer arrayet kan indholdeholde. Tilføjer du ekstraelementer, udvider JavaScript det automatisk.
I de følgende linjer tilføjes elementer til arrayet. På hver linje er indexnummeret angivet i skarpe parenteser til højre for navnet på arrayet. Det er indeksnummeret, der identificerer de enkelte elementer. Ved hjælp af indeksnumrene er det muligt at referere til et bestemt element. Til højre for lighedstegnet den værdi angivet, elementet skal tildeles. Da ugenavnene er tekststrenge, er de sat i citationstegn.
Alternativt kan et array oprettes uden at angive indeksnumre:
var ugedage = new Array("mandag", "tirsdag", "onsdag", "torsdag", "fredag", "lørdag", "søndag");
eller endnu kortere
var ugedage = ["mandag", "tirsdag", "onsdag", "torsdag", "fredag", "lørdag", "søndag"];
I dette tilfælde tildeles det nye array værdier samtidig med at det oprettes. JavaScript indekserer i dette tilfælde selv de enkelte elementer fra 0 til 6.
Da index værdierne i et array starter ved 0, er antallet af rækker i et array altid én større end array'ets højeste index værdi.
For at få adgang til en oplysning i et array, skal man kende navnet på arrayet og nummeret på rækken.
Eksempel på at hente data fra et array:
document.write (ugedage[3]);
Udtrykket ugedage[3] refererer til det fjerde element med indeksnummer 3 i arrayet ugedage, og JavaScript-koden udskriver derfor "torsdag".
Som objekt har array egenskaben length. Denne egenskab indeholder oplysning om, hvor mange elementer et array indeholder. Fx:
var ugedage = new Array("mandag", "tirsdag", "onsdag", "torsdag", "fredag", "lørdag", "søndag")
antalUgedage = ugedage.length;
Variablen ugedage.length er i dette tilfælde identisk med 7, fordi arrayet ugedage indeholder 7 elementer i alt.
Via Array metoden push( ) kan man tilføje et ny element til et array.
frugtKurve.push("banan");
På W3schools' javascript reference kan man se flere eksempler på Array metoder.
| Method | Description | FF | IE |
|---|---|---|---|
| concat() | Joins two or more arrays and returns the result | 1 | 4 |
| join() | Puts all the elements of an array into a string. The elements are separated by a specified delimiter | 1 | 4 |
| pop() | Removes and returns the last element of an array | 1 | 5.5 |
| push() | Adds one or more elements to the end of an array and returns the new length | 1 | 5.5 |
| reverse() | Reverses the order of the elements in an array | 1 | 4 |
| shift() | Removes and returns the first element of an array | 1 | 5.5 |
| slice() | Returns selected elements from an existing array | 1 | 4 |
| sort() | Sorts the elements of an array | 1 | 4 |
| splice() | Removes and adds new elements to an array | 1 | 5.5 |
| toSource() | Represents the source code of an object | 1 | - |
| toString() | Converts an array to a string and returns the result | 1 | 4 |
| unshift() | Adds one or more elements to the beginning of an array and returns the new length | 1 | 6 |
| valueOf() | Returns the primitive value of an Array object | 1 | 4 |
Ref: http://www.w3schools.com/jsref/jsref_obj_array.asp
På grundbogen site kan man se hvordan de forskellige Array metoder virker på et konkret array.
http://www.sawmac.com/missing/javascript/tutorials/examples/chapter02/array_methods.html#
Typing a html page with javascript and test it in different Browsers
<html> <head> <title>Exercise 1</title> </head> <body> <script type = "text/javascript"> alert("Hello World !"); </script> </body> </html>
3. Save the code as ex1.html in your javascript folder.
4. Open the file ex1.html with Firefox and Microsoft Explorer. What happens?
5. View the source code using View>Source in the browser. What happens?
Exercise 2: Finding bugs.
1. Open ex1.html in an editor.
2. Change the javascript code by removing the last ´)´ in the code.
alert("Hello World !"); => alert("Hello World !";
This little change will create a bug = error in the code.
3. Save the file as helloBug.html in the javascript folder and test it using preview. What happens in Internet Explorer, Firefox ?
4. Write the typical bugs/errors that the textbook describes in chapter 1 in the helloBug document.
Exercise 3: Versioning
1. Make a file start.html that will write the sentence ‘This is the start of something new’ in an alert box when open in a browser. Save it and test it.
Save it also as start1.html (version 1).
2. Change the javascript code of start1.html so that instead of one alert box,
the Browser will display the text ‘This is the start’ in its document part (use document.write)
and the words ‘of’, ‘something’, ’new’ in 3 different alert boxes.
3. Save it and test it. Save it also as start2.html .
4. Write e.g. your name and some other comments in the javascript part by using // and /* */ and save start2.html
Why do you think it a good practice to make different version of your programs?
Skriv et JavaScript program, der med window objektets metode prompt() giver brugeren mulighed for at indtaste sin alder. Lad herefter programmet udskrive den pågældendes alder på skærmen: "Du er x år gammel", hvor x repræsenterer den alder brugeren indtastede.
Skriv et JavaScript program, der lavet laver et Array kaldet favorits, som indeholder 4 af dine favorit URL'er.
Udskriv det sidste element i favorits via en document.write( ); kommando.
Udskriv antallet af elementer i favorits vha. Array egenskaben/property Length.
Prøv at anvende nogle af Array metoderne på favorits
Exercise 6: Variables Use the Textbook “JavaScript – Missing Manual”. Make the Tutorial: Using Variables to Create Messages (p.53 ), Remember to download the source files from the tutorial page.
Exercise 7: Variables and prompt input Use the Textbook “JavaScript – Missing Manual”. Asking for Information (p.54) Var name = prompt(‘What is your name?’, ‘ ‘);
Exercise 8: Arrays Tutorial: Write to a Web Page Using Arrays (p.67)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hands on day 1</title>
<script type="text/javascript">
alert('Hello Javascript World');
// Kommentar
// variable med tal og tekst
var age = 25;
var name = "Klaus";
// Udskrivning af variable
alert(name);
alert("Min alder er "+ age);
document.write("<h1>Mit navn er "+ name + " og jeg er "+ age + " år </h1>");
// Aritmetiske operatorer
var days = age*365;
var hours = days*24;
document.write("<h2>Dvs. "+ days + " dage eller "+ hours + " timer gammel.</h2>");
name = name + " Hansen";
age = age + 10; // bedre end = age + "10" !
alert(name);
alert("Min alder er "+ age);
// Tekst input via prompt
var userName = prompt("Hvad hedder du?","Kim?");
var userAge = prompt(" Hvor gammel er du?",2);
alert("Goddag "+ userName);
alert("Så er du "+ userAge*365*24 + " timer gammel");
// Array
var klasseListe = new Array("Niels", "Hans", "Mette", "Louise" );
document.write(klasseListe);
alert(klasseListe[0]);
alert(klasseListe.length);
document.write("<br />Omvendt: "+ klasseListe.reverse() );
</script>
</head>
<body>
</body>
</html>