Javascript. Mer om layout Kirsten Ribu 04.10.04 Kirsten Ribu - Webpublisering - HiO -2004 1
Men først. Hvordan går det med klasser og blokker? Hjalp det med mailene? Litt mer om klasser og blokker ;-) Kirsten Ribu - Webpublisering - HiO -2004 2
Klasser Hvorfor bruke egendefinerte klasser (class): Ofte vil man angi en stil som bare skal brukes på utvalgte steder i dokumentet. Det kan også være at man vil angi et bestemt utseende på en spesiell del av teksten. Da kan man bruke egendefinerte klasser. Eksempel:.min-tekst { color: #909000; backgroundcolor: #000000; font-weight: bold; fontfamily: Arial; } Kirsten Ribu - Webpublisering - HiO -2004 3
Klasser forts. Klassen angis med et selvvalgt navn, her 'min-tekst', og innledes med punktum. Så skriver man stilene inn i parantesene som vanlig Når klassen skal brukes, angir man dette inne i en eksisterende tagg. Feks slik: <p class="min-tekst"> Her kommer teksten</p> Legg merke til at her brukes ikke punktumet! Kirsten Ribu - Webpublisering - HiO -2004 4
Eksempel http://www.iu.hio.no/~kirstenr/webpubli sering2004/eksempler/klasser.htm Kirsten Ribu - Webpublisering - HiO -2004 5
Blokker Blokker = Egendefinerte inndelinger. Man angir formattering på en del av dokumentet med taggene <div>... </div> div = forkortelse for division, eller del, som avgrenser et rektangulært område av dokumentet. Inne i dette kan man da ha avsnitt, overskrifter, bilder osv. Kirsten Ribu - Webpublisering - HiO -2004 6
Div Man _må _ ikke sette et klassenavn på alle blokker, (div), men bruken av class (og id) er et kraftigere virkemiddel Det holder å skrive <div> for å dele opp siden i avsnitt (deler = blokker) <div> sørger da for at innholdet starter på en ny linje (som <p>) ellers ingenting Kirsten Ribu - Webpublisering - HiO -2004 7
Eksempler: Enkel blokk med bare <div>.. </div> Større blokker med klasser: Kirsten Ribu - Webpublisering - HiO -2004 8
Med bruk av klasser i <div>: div.tittel1 {font-size: 100pt; background: green; color: #ccccdd; font-family: "Times New Roman"; text-align: center} div.tittel2 {font-weight: bold; font-size: 36pt; color: #000066; font-style: italic; font-family: "Courier New"; background-color: red; textalign: center} Kirsten Ribu - Webpublisering - HiO -2004 9
Koden forts. <body> <h1>blokk-eksempler</h1> <!-- Her kommer blokken tittel1 --> <div class=tittel1>min første blokk</div> Her plasseres tekst inne i den første blokken, tittel1. <!-- Her kommer blokken tittel2 --> <div class=tittel2>min andre blokk</div> Her plasseres tekst inne i den andre blokken, tittel2. </body> Kirsten Ribu - Webpublisering - HiO -2004 10
Fonter på web Man kan ikke være sikker på at fontene man velger er de som alltid blir vist Nettlesere viser fonter forskjellig, dvs. ikke alle fonter vil kunne vises i alle nettlesere Kirsten Ribu - Webpublisering - HiO -2004 11
Font-familer For å være på den sikre siden spesifiserer man flere fonter Da velger man en gruppe fonter, slik at nettleseren har noe å velge mellom Disse fontene ligner hverandre For å prøve å styre nettleseren kan man legge til en generell font-stil, for eksempel: serif, sans-serif, fantasy Kirsten Ribu - Webpublisering - HiO -2004 12
Eksempel på stil med fonter h1,h2 {font-family: Arial Black, Helvetica Bold, sans-serif} p {font-family: Verdana, Helvetica, sansserif} Font-familien må skrives i anførselstegn : Arial Black Verdana Times New Roman Kirsten Ribu - Webpublisering - HiO -2004 13
Skriftutseende - Fet skrift Font-weight: bold Eller bolder / lighter for å gjøre enda fetere / mindre fet enn bold Ta bort fet: skriv: font-weight: normal Kirsten Ribu - Webpublisering - HiO -2004 14
Kursiv og understreket Font-style: italic Text-decoration: underline, linethrough Eksempel Kirsten Ribu - Webpublisering - HiO -2004 15
Font-størrelse font-size: 16px, 16 pt Eller Small, medium, large xx-small, x-small, small, medium, large, x-large, xx-large Kirsten Ribu - Webpublisering - HiO -2004 16
Linjeavstand line-height: 150% Betyr avstand mellom linjene Å øke denne kan bety at det er lettere å lese teksten på siden Kirsten Ribu - Webpublisering - HiO -2004 17
Tekstfargen Flere muligheter: color: red color: #rrggbb color: rgb(r%,g%,b%) Eksempel h1,h2{font: 20pt Arial Black ; color: red} p{font: 12pt Verdana ; color: #00cccd} Kirsten Ribu - Webpublisering - HiO -2004 18
Plassere tekst Venstre, høyre eller i midten Text-align: center Plasserer teksten i midten Justify: både høyre og venstre Kirsten Ribu - Webpublisering - HiO -2004 19
Innledende om Javascript Eksempel Kirsten Ribu - Webpublisering - HiO -2004 20
Generelt om script Script er programkode som har til hensikt å gjøre en web-side dynamisk (mer attraktiv, bevegelig) + håndtere informasjon som utveksles mellom server og klient. Script deles inn i to hovedklasser: serverscript og klient-script. Vi skal snakke om klient-script Serverscript kommer i senere kurst Kirsten Ribu - Webpublisering - HiO -2004 21
Klient-script Klient-script (normalt Javascript) er programkode som bruker ressurser hos klienten = kjører på klientens maskin. Programkoden sendes med web-siden ((X)HTML-koden) fra server til klient Scriptet starter ikke før den er lastet ned hos klienten. Kirsten Ribu - Webpublisering - HiO -2004 22
Bruk av script De mest brukte anvendelsene av klientscript er Validering (sjekking) av data gitt i et skjema før det sendes tilbake til server dynamikk som skifte av bilder, statusmeldinger, og objekter som beveger seg over web-siden. Begrepet DHMTL (Dynamisk (X)HTML) er ikke et nytt web-språk, men standard (X)HTML-kode der dynamikken er ivaretatt med Javascript. Kirsten Ribu - Webpublisering - HiO -2004 23
Komponenter i JavaScript JavaScript er et eget programmeringsspråk som ikke må forveksles med Java. Som i andre språk har det strukturer som tilordningssetninger, kontrollstrukturer som if else, løkkestrukturer som for og while og tabellstrukturer. Kirsten Ribu - Webpublisering - HiO -2004 24
Funksjoner Programsetninger for et bestemt formål feks: document.write() Skriver setningen på websiden For eksempel document.write( Hei på deg! ) skriver Hei på deg! på skjermen. Kirsten Ribu - Webpublisering - HiO -2004 25
Javascript -koden Kirsten Ribu - Webpublisering - HiO -2004 26
Eksempelet Kirsten Ribu - Webpublisering - HiO -2004 27
Hvordan legge inn JavaScript Et JavaScript kan legges inn på 3 måter i et (X)HTML-dokument: Programkoden kan legges direkte inn i en (X)HTML-tag knyttet til en hendelse. Denne metoden er vanlig dersom programkoden består av en til to setninger. Eksempel: <img src="bilde.gif" alt="bilde" onmouseover="window.status='fint bilde?'; return true" onmouseout="window.status=''; return true"> Kirsten Ribu - Webpublisering - HiO -2004 28
Måte 2 Programkoden kan legges samlet inn mellom <head> og </head>. <script type="text/javascript"> <! /* Her kommer script-koden */ //--> </script> Noen ganger legges det i <body> Kirsten Ribu - Webpublisering - HiO -2004 29
Måte 3 Programkoden kan legges på en egen fil: <script type="text/javascript" src="kode.js"> </script> Kirsten Ribu - Webpublisering - HiO -2004 30
Generelt om JavaScript <script type="text/javascript"> <!-- /*Her kommer script-koden*/ //--> </script> Legg merke til at script-koden står mellom standard (X)HTML kommentar-taggene <!-- og -->. Kirsten Ribu - Webpublisering - HiO -2004 31
forts Legg også merke til // foran -->. Dette er nødvendig forat script-kompilatoren ikke skal tolke linjen som en del av scriptet. Script-kompilatoren ignorerer nemlig resten av en linje etter //. Kommentarer som ikke skal være en del av programkoden må stå mellom /* og */. Slike kommentarer kan strekke seg over flere linjer. Kirsten Ribu - Webpublisering - HiO -2004 32
Window.document.write() window.document.write("<h1>hei på deg etc..</h1>") er et eksempel på hvordan man henter objekter (adresserer objekter). Objektet window er selve web-leseren og underobjektet document refererer til selve (X)HTML-siden som vises. write() er en metode som skriver til htmlsiden (fyller ut html-siden). Kirsten Ribu - Webpublisering - HiO -2004 33
Fra window til document Window Document Kirsten Ribu - Webpublisering - HiO -2004 34
alert() alert ("Hei på deg") er en standard funksjon for å gi en melding på skjermen i et eget lite vindu. Veldig nyttig når du skal teste ut et script for feil! Kirsten Ribu - Webpublisering - HiO -2004 35
alert Kirsten Ribu - Webpublisering - HiO -2004 36
Koden for alert() Kirsten Ribu - Webpublisering - HiO -2004 37
Prompt() Kirsten Ribu - Webpublisering - HiO -2004 38
Eksempelet: prompt() Kirsten Ribu - Webpublisering - HiO -2004 39
Objekter En "ting" i web-sammenheng som skjemafelter, bilder, stilark, (X)HTMLdokumenter, vinduer etc. Disse "tingene" er organisert hierarkisk i det som kalles Document Object Model (DOM). Mer om DOM senere. Kirsten Ribu - Webpublisering - HiO -2004 40
DOM Kirsten Ribu - Webpublisering - HiO -2004 41
Ukeoppgaver uke 41 Dersom du ikke har fått til blokker før: Prøv igjen. Begynn med <div> for å lage avsnitt (blokk), utvid med en klasse for å påvirke det som er inni avsnittet (blokken). Utvid stilarket med font-size, font-weight, font-style der det passer. Prøv med ulike fonter og størrelser. Lag noen javascript som vist i dag på forelesningen lek med mulighetene Besvar: Hva er javascript? Finn ressurser på web. Kirsten Ribu - Webpublisering - HiO -2004 42
Neste gang Rammer Mer javascript Kirsten Ribu - Webpublisering - HiO -2004 43