Fotokopier fra Headfirst Javascript.
Filer kan findes på Headfirst Javascript chapter 1
Samt
W3schools.com/JS
(Læs fra Intro til Comparisons)
| 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 |
Hvad har du egentlig lært på 1.semester?
HTML og CSS:
- Strukturering af indhold som elementer via tags. Tags kan specificere via attributter f.eks. <img src="smiley.jpg" alt="smil" />
- Links
- Forms
- Div elementer til layout( Fix og Liqued layout)
- Styling af indhold via inline, intern eller extern CSS
- XHTML validering
=> Projekt 1.1,e-portfolioer (personlige hjemmeside f.eks.)
Flash programmering via ActionScript:
- Variable, operatorer
- Kontrolstruktur (if/else , for løkker)
- Events og funktioner (addEventListener , gotoAndPlay() )
- Objekter f.eks. movieclips, Instans navne, properties (x, y, alpha), metoder
Dokumentation:
-Strukturdiagram (sitemap)
-Wireframes (pagemap)
-Beskrivelse af central kildekode
-Kommentering i kildekoden
- Problemløsningskompetencer, debugging....
| Prioritet | Sprog | Anvendelse | Overvejelser | Eksempel Head first |
| 1 | HTML | Strukturering af indholdet | Hvad skal brugeren og google kunne finde? |
|
| 2 | CSS | Styling af indholdet | Hvad skal brugeren opleve og føle? | |
| 3 | Javascript | Interaktivitet - Reaktion på bruger input m.m. |
Hvad kan brugeren gøre og hvordan reagere siden? |
HTML+CSS+Javascript = REAL Interactivity = også kaldt DHTML (Dynamisk HTML)
DHTML vs. Flash
Flash kan også skabe Real interactivity samt inddrage rige medier såsom tidsbaseret animation,video og lyd,
med i modsætningen til DHTML kræves der en plugin (rigtige version af en Flashplayer) i Browseren, for at det interaktive multimediale indhold kan vises frem.
For sider der bygget via HTML+CSS+Javascript kan man risikere at brugeren har slået Javascript eller bruger en browser som ikke understøtter CSS (f.eks. en højlæsningsbrowser for svagtseende).
I så tilfælde vil brugeren dog stadigvæk kunne hente det vigtigste, nemlig tekst-indholdet på websiden.
DHTML og Flash kan dog fint spille sammen, sådan at websitet udnytter fordelene ved de forskellige teknologier.
Typer af funktionalitet via Javascript:
2.semester eksempler:
Som følge af at www bliver mere brugergenereret og socialt (fra Web1.0 til Web2.0), kommer der mere funktionalitet på websiderne.
Funktionalitet og interaktivitet fra traditionelle Desktop Applikationer så som Word, Photoshop,Spil bliver i web2.0 gjort tilgængelig i browseren. F.eks. i form af administrationsdelen af webbaserede CMS (content Management Systemer), Blogs, Flashbaserede spil, webside hvor brugeren kan designe varen inden den bestilles m.m.
Sådanne websider/webapplikationer der har en brugergrænseflade som minder om brugergrænsefladen på en Desktop Applikation kaldes også for en Rich Internet Applications (RIA's).
Javascript i form af (AJAX - Asynkron Javascript and XML) er blevet en vigtig teknologi i forbindelse ovenstående udvikling.
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 at grundlæggende programmeringselementer (som også bruges i Actionscript).
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.
DOM betyder bl.a., at JavaScript programmøren har mange præfabrikerede komponenter til sin rådighed (alert, prompt vinduer). DOM'en kan også ses som et API (Application Programmers Interface) til Browseren og den loadede hjemmeside. Uden DOM'en måtte programmøren selv bygge objekterne op fra grunden.
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.
I forhold til client/server modellen, vil JavaScript afvikles/fortolkes i browseren og dermed på klienten. Derfor kaldes JavaScript også et klientside sprog.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 mere ind på dette senere på semesteret, hvor vi skal se på nærmere på PHP.
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 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).
Gem filen som jsintro.html
<!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
</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 |
Øvelse 1: Debugging - Debugging betyder fejlfinding. Browseren kan hjælpe dig lidt på vej, med at finde evt. bugs (kode fejl).
1. Gem en fungerende version af hand's on filen jsintro.html som jsintro1.html.
2. Nu skal men vilje prøve at ændre i noget af den fungerende javascript sådan at der kommer en fejlmeddelse fra browseren.
Prøv f.eks. at fjerne den sidste parentes i kode:
alert("Hello World !"); sådan at der står => alert("Hello World !";
3. Gem så filen (med bug) og test den i Firefox via menu Funktioner>Fejlkonsol.
Hvis du ikke får ovenstående fejlmeddelse, så prøv at trykke på knappen Ryd, genindlæs html filen via (F5) og se på fejlkonsolen igen.
4. Via fejlkonsolen får man en forklaring eller et hint til hvad fejlen er og hvilken linje den befinder sig på. Tjek om det passe med linien du ændrede i editoren.
5. Ret så fejlen i editoren og prøv at indsætte nogle nye fejl (helst en af gangen), og undersøg så om fejlkonsolen kan finde dem.
6. Nogle gange kan fejlkonsolen ikke spore fejlen tydeligt, og man må derfor selv igang med at lege detektiv og finde fejlen.
7. Prøv at lav 2 fejl i koden og få så sidemanden til at finde fejlen. Skift derefter roller sådan at sidemanden laver 2 fejl som du så skal finde.
Skriv et JavaScript program, der medprompt() funktionen 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.
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
<!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");
</script>
</head>
<body>
</body>
</html>