Scripts /JavaScripts

Scripts - Overskrifter:

Find på denne side (IE):

Du kan også søge på siden med Ctrl + b (Ctrl + f)
(Hold Ctrl nede mens du taster b eller f)

Javascripts oversigt og links på denne side:

Har du problemer med at din browser ikke kan vise Java,
så kan du downloade et program HER

OBS! - Der er forskel på Java og JavaScripts.

Du får en god forklaring HER (Engelsk)

Her et par udpluk af teksten:
" Now let's talk about how Java and JavaScript differ. The main difference is that Java can stand on its own while JavaScript must be placed inside an HTML document to function. Java is a much larger and more complicated language that creates "standalone" applications. A Java "applet" (so-called because it is a little application) is a fully contained program.
JavaScript is text that is fed into a browser that can read it and then is enacted by the browser."
/" JavaScript is text-based. You write it to an HTML document and it is run through a browser."
/"Java applets run independent of the HTML document that is calling for them. Sure, they appear on the page, but the HTML document did little more than call for the application and place it."

Dette er også forklaret kort hos JavaScriptMadeEasy.com

Om JavaScripts på denne side

Jeg har her valgt nogle af de mere umiddelbart nyttige og enkle java-scripts, som det skulle være let at bruge. Lad være med at kopiere <head> og <body> hvis de allerede står i html koden på din side!

Klik på titlerne nedenfor, for at få koden.

OBS! Når du klikker, bliver der på nogle links åbnet et html dokument.
Du skal derefter højreklikke, på et bart sted på siden, og vælge vis kilde! (View page sourse)
Så får du teksten, og du kan så vælge at kopiere og gemme denne til senere eksperimenter.

Klik på - for at se, hvordan det færdige resultat bliver.

Nogle scripts virker desværre kun i IE
Står der: (IE) = Virker i Internet Explorer, men muligvis ikke i andre browsere.

Fejl i scripts eller på denne side? - Giv mig besked, tak!

God fornøjelse!

JavaScripts:

Tilbage knap history.back()

Print page text & botton 1. window.print()

Print page botton 2. varitext()

Close window botton javascript:window.close()

Up botton / Op knap document.location='#top'

Home button parent.location=' '

(Du kan linke til hvad du vil med parent.location=)

Reload/opdater siden knap window.location.reload()

Der er eksempel sammen med koden

Navigation bar

Se hvordan du kan ændre udseende på knapper,
bruge billeder og lave tekstlink HER

Link: Creating Back Buttons For You Page

JavaScript knapper/JavaScript menu: Se her.

Pull-down menu

Drop down menu

Link Box

Links:

CSS based menu scripts (søgemaskinevenlige foldudmenuer med javascript)
CSS and XHTML drop-down menu (vertical and horizontal)
(søgemaskinevenlige foldudmenuer med javascript)
Free flash audio button downloads
Klappe-ud-menu med ren html
Foldud træ og Faldned menu: Hintzmann.dk (søgemaskinevenlig foldudmenu med javascript)

På Teknik og Sjov:

Se evt. "menu med CSS" på siden CSS
Se evt. " Menu med linksbeskivelse (i lille vindue på siden) ved mouse over"
JavaScript knapper (med billeder)/JavaScript menu: Se her.

Mouse over :

Mouse over tabel (farve skift)

Mouse over link/description - title og alt (html)

(Der er et eksempel sammen med beskrivelsen)

Mouse over billede Der kommer et andet billede ved mouse over

Gennemsigtigt billede (HTML Huskeliste)

Link: Image Roll Overs

Link: CSS popop uden JavaScript. På denne hjemmeside er det vist, hvordan du f.eks i en menu, kan få vist en beskrivelse af indholdet i en box - f.eks over eller under menuen - ved mouse over (med CSS uden brug af JavaScript).
Se også dette på Teknik og Sjov her.

Mail/Formmail:

Spam beskyttet email-adresse

(Der er et eksempel sammen med koden)

Respons formular /form-mail

Formmail med emnevalg

Link: Input Tag & Attributes - om de forskellige muligheder,
når man laver formularer.
Link: Skjul din e-mail adresse for spam-robotter

Værktøjer:
www.html.dk: Lav et spam-beskyttet e-mail link
www.falkenbjerg.dk: Kryptering af din mail adresse

Formular tricks:

Cursor i tekst felt /focus på felt. (øverst på siden der kommer frem)

Tekst i felt forsvinder når man vil skrive (nederst på siden der kommer frem)

Der er eksempler sammen med koderne.

Anbefal side:

Anbefal side - Dette kan du også finde på html.dk

Link: Anbefal til en ven - Hjemmesideskolen

Du kan også benytte metoden der er beskrevet på html-huskelisten

Startside:

Startside (IE)

Med dette script kan du få folk til at få din side som startside.
Eksempel på min forside.

(Virker ikke i Mozilla Firebird)

Gem i foretrukne:

1. Add to favorits (Bookmark)

2. Gem i foretrukne (Bookmark)

Pop up:

Popup vindue uden at der skal kode i <HEAD>

Popper up når man klikker på linket.

Centreret Pop-up window on click

Se eksempel på min forside

Pop up on mouse over

Åbner pop-up når musen føres hen over. (Vælg Vis kilde)

Vindue lukker sig selv

LINK: Pop-up image viewer script

Visit:

Sidst besøgt/Last visit

Se eksempel øverst.

Viser antal gange brugeren har set siden

(Der er et eksempel sammen med koden)

(Virker kun hvis brugeren ikke sletter den cookie, som lagres i computeren. Hvis den slettes tælles der forfra.)

Kalender:

Kalender der viser den aktuelle måned - med dags dato fremhævet

(Der er et eksempel sammen med koden)

Tekst:

Text: Skrivemaskine effekt (IE)

(eksempel under koden)

Text: Farveskift (IE)

Tekst i statusbar:

Link beskrivelse som rulletekst i status bar

Tekst i status bar

Link beskrivelse i status bar ved mouse over

Du kan også benytte dette i forbindelse med links (IE):
onmouseover="window.status='Link beskrivelse'; return true;"

Skift - alt efter hvilken tid på døgnet det er....

Besked der skifter efter tidspunkt på døgnet

Se eksempel øverst på denne side og på forsiden

Se hvordan man laver dette i ASP her

Nedtælling

Ned tælling til... Her har jeg lavet det til d. 24. dec. 2004

(Det er på min side: "Pauseskærme")

Søg. Find på side:

Find på denne side/find on page (IE ??)

Find in page (IE) - se eksempel øverst på denne side

Script på Dynamic drive: www.dynamicdrive.com/dynamicindex11/findpage.htm

Hvis du vil at folk skal kunne søge på hele dit websted, så kan jeg anbefale denne service:
FreeFind.com

Med Ctrl + b kan man også søge på din side i Windows Internet Explorer
Mozilla: Ctrl + f

META-tag-builder:

META-tag-builder
(Description og keywords)

Viser hvor på siden man er..

Where-on-site

Eksempel:

Se hvordan man kan udskrive dette med ASP her

Markér - Highlight tekst:

Select/marker - highlight text (and copy)

Markér/highlight tekst

Dato:

Dato:

Markør/Cursor og Efter Musen

Tekst - der følger musen

Dynamic drive Mouse Trail effects

Se evt. også HTML Huskelisten: Cursor

Skærm og Browser

Javascripts til billeder

Sætte maximum bredde og højde på et billede:

Sådan:
onload="if(this.width > 400) {this.width=400;} if(this.height > 400) {this.height=400;}"
Indsættes: <img src="billede.jpg" HER alt=" " />

Hvis du vil forhindre at billedet alligevel blive større, hos folk der har slået javascript fra, kan du lave det sådan, at den i de tilfælde istedet ikke viser noget billede:

(Jeg har dette tip fra http://tjekmig.dk/forum/sitmap/endelig-47.htm)

På @-begynder:
Slideshow med billedfader
og Slideshow med drop-in (man kan indsætte links).

Baggrunde

Er du på udkig efter Julesne på din side,
så se nederst på siden javascript-links.

No right click / forhindre højreklik

Ikke højreklik på bestemte billeder og links.
       Dette på min html huskeliste. Virker i IE, Mozilla og Netscape 6.0

Fjerne det der kommer frem når man holder musen over et billede i IE:
       Min html huskeliste

Forhindre højreklik uden alert - skal indsættes i HEAD
No right click (højre klik) - skal indsættes i BODY (IE)
No right click (højre klik) - skal indsættes i HEAD (IE)
No right click 2 (højre klik) - skal indsættes i HEAD (IE)

No right click 3 (højre klik) - skal indsættes i HEAD og BODY
      (Virker i IE og Mozilla Firebird)

P.S. Der findes ingen metoder, der kan sikre dig helt mod f.eks. kopiering af billeder.
Se evt. her: www.html-faq.dk/1014.asp

    Om HEAD og BODY se evt.:
HTML koder - Et html dokuments opbygning (nyt vindue)

Andre

Vælg et billede i fremviseren. Kilde: http://www.jsmadeeasy.com/javascripts/Navigation/Thumbnail%20Navigator/index.htm

Color wheel. Find hex koden på farven i dette farvehjul
(Der er eksempel med koden)

Break Out Of Frames.
Kilde: http://www.sitetycoon.com/tools/break_out_of_frames.html og http://www.psacake.com/web/as.asp

Du kan evt. selv søge med f.eks Google efter: break out of frames

body resize Genloader siden, når der foreteges resize af browservinduet. Du skal erstatte det almindelige <body>

Links

Forskellige Scripts og Tips (www.webworksite.com)
JavaScript help (www.felgall.com)

Se også links nederst på siden HTML Huskeliste

Download:

DOWNLOAD en pakke med alle disse java-scripts, - plus/minus et par stykker. (Zip 34,7 KB)

HTML - Huskeliste

Se også min HTML Huskeliste med blandt andet:

Siden loades på ny når den indlæses (cache)
Gennemsigtigt billede
Åben link i nyt vindue
Vis hånd ved mouse over link-knap
Vindue lukker sig selv
Relevante LINKS

FLERE SCRIPTS? Se LINKS HER

- eller prøv nogle links på siden "
Gratis tjenester"

Kender du til andre gode færdig scripts, så send dem til mig!

Home button:

Mouse over link:

Peg med musen HER

Navigation bar:

Om JavaScripts og W3C standarder

Det kan være et problem at bruge JavaScripts, og samtidig gerne vil have nul fejl, når man validerer sine sider efter W3C standarden. Men fortvivl ikke. Det betyder ikke, at de ikke virker. De fleste systemer/browsere kan godt læse ordentlige JavaScripts. Hvis du er glad for nogle af de funktioner JavaScripts giver dig så - behold dem indtil videre. Men hold et vågent øje med udviklingen - og med dine sider set på andre computere med andre browsere
Ved nogle scripts står der hvilke browsere de er "Compatibility with" (compatibility: kompatibilitet; forenelighed; forligelighed; overensstemmelse; egnethed).

Det er en god ide at vælge scripts der både egner sig til Internet Explorer (IE) og Mozilla. (Ellers se denne artikel)

Du skal være opmærksom på, at folk der har slået javascript fra i deres browser, ikke kan se det.

Det drejer sig først og fremmest om scripts der starter med:
script type="text/javascript" (som er den korrekte måde at indlede et javascript på) eller script language=
Mange DHTML og javascripts virker ikke i alle browsere.

I W3C (World Wide Web Consortium) forsøger man at gøre noget ved alle de forskellige og uregelmenterede måder at skrive html på i dag. Dette ved at forsøge at regelrette koderne, så de er ens for alle. De forsøger at samarbejde med -og påvirke programudviklerne til at følge en standard.

De nye standarder er ikke en lov - men anbefalinger, og mange er efterhånden med på ideen. Det kniber dog stadig med at få browserproducenterne til at udvikle så de virker ens, men de er dog ved at komme godt efter det. Det er også stadig programmer, der genererer koder der ikke følger standarden.
Udviklingen sker altså gradvist.

Den standard du evt. vælger at kode efter, kan du fortælle browseren ved øverst at tilføje !DOCTYPE

Jeg synes godt om, at man vil prøve at standardisere html så den bliver mere ens for alle. Læs evt. mere om dette under Om Om webdesign/XHTML.

Men tilbage til javascripts.. Du skal altid overveje om brugen af JavaScripts er nødvendig, og du kan godt få problemer med at programere efter standarden, hvis du har JavaScripts på dine sider. Du kan også risikere at andre browsere ikke kan køre nogle JavaScripts.
Hvis du vil at flest muligt kan se din side fornuftigt, skal du altid tænke dig godt om.
Se evt. også hvad jeg skriver om mit arbejde med denne hjemmeside

Her et par artikler du kan læse, hvis du vil vide mere om W3C:
www.html.dk/artikler/00031/
www.hinnerup.net/reference/w3c/xhtml/1.1/introduction/dk/

Et eksempel på et simpelt script, der ikke føler standarden i xhtml er f.eks "Tilbage-knappen" som du også finder på denne side (Simpel back botton). Html'en ser således ud:

Hvis du vil følge xhtml standarden skal botton sættes i anførselstegn og onClick skal skrives med små bogstaver. Desuden skal det hele afsluttes med et mellemrum plus /

Det kommer så til at se således ud:

(Dette eksempel er dog mere html end det er et javascript)

Mange færdige html-koder, som man får når man vil sætte en tæller ind på sin side - eller bannere m.v. er også stadig langt fra W3C standarden (xhtml strict/1.0/1.1)
(Jeg har dog fundet ud af, at mange tæller og banner scripts kan valideres i HTML 4.01 Transitional, hvis der er et & og man ændrer & til & )

Læs mere om xhtml HER.

Valider dine sider: W3C's validator.

Til top