Datavalidering med JavaScript

Slides:



Advertisements
Liknande presentationer
Snabbguide och tips.
Advertisements

IT för personligt arbete F5
Selektion, iteration och datastrukturer
Logga in och använda vårt nya Intranet NAVET
Händelsehantering i grafiska gränssnitt byggda med Tkinter
En introduktion till programmeringsspråket Python
Intagningssystemets databas Ögonblicksbild Kopia av intagningsdatabasen Uppdateras 3 ggr per dag 07:15 – 12:15 – 15:15 Roller Skola, kommun Periodiseras.
HTML - grunder. Program •Html kan skrivas i anteckningar, eller vilket annat textbehandlingsprogram som helst. Mitt tips: Notepad ++ Notepad ++ •Grafiska.
II130V Konstruktion av webbsidor Välkommen till föreläsning 3 September 2007.
XHTML.
FTP, HTTP, HTML, XML och XHTML
1 MSPEL Föreläsning 1 DSV Peter Mozelius XML, XHTML, CSS och Java applets.
Programmering B PHP Lektion 1
Funktioner och programorganisation
Programmering?. Förslag till innehåll programmeringens grundläggande teori webbredigering, webbprogrammering html xml wml (wap 1) xhtml css javascript.
DCV Idéskiss Design Jag tror att jag ska ha en mörk och stilren design på mitt DCV. Det ska finnas dynamisk funktionalitet där designen byts utan att sidan.
HEAD – HUVUDET I huvudet hittar du information om dokumentets titel, sökord, referenser till stildokument och annan information som normalt inte visas.
Programmeringteknik Webbdelen. HTML H yper T ext M arkup L anguage Märker upp sidans innehåll så att webbläsaren kan avgöra hur innehållet ska visas.
1 ITK:P2 F9 HTTP, Java servlets och Apache Tomcat DSV Peter Mozelius.
Webbteknik En kort introduktion. Innehåll Historisk återblick Tim Berners Lee 1992 Teknisk beskrivning Märkspråk Standardisering Trender.
Metoder i java Det finns två typer av metoder i java
Att programmera i språket Java
1 ITK:P1 Föreläsning 4 Grafiska gränssnitt och händelsehantering DSV Peter Mozelius.
Webbteknik lektion 2 Det handlar om stilmallar Per K, 2012.
Föreläsning 2 Datalogi för E1 2D1343
Strömmar Vid läsning och skrivning används något som kallas strömmar.
IT för personligt arbete F6
En PowerPoint om PowerPoint
XSLT – en introduktion Digitalisering av kulturarvet.
1 ITK:P1 Föreläsning 5 Iteration, slumpning och arrayer DSV Peter Mozelius.
Föreläsning 11 Arrayer.
Sid 1 CD5250 OOP med C++ Daniel Flemström MDH/IDT CD5250 OOP med C++
Programmering B PHP Lektion 1 Mahmud Al Hakim Folkuniversitetet
Programmering B PHP Lektion 2
Datasamlingar och generiska enheter
DHTML Designa din egen webbsida.
1 ITK:P1 Föreläsning 7 Algoritmer och datastrukturer DSV Marie Olsson.
Vektorer (klassen Vector) Sortering
XSLT – en introduktion Elektronisk publicering.
Min första hemsida Hello world!. Byt bakgrundsfärg Hello world!
Programmeringsteknik för Media1 & K1
Internet A Javaskript.
1 ITK:P2 F2 Stilsättning av XHTML DSV Peter Mozelius.
Jonny Karlsson INTRODUKTION TILL PROGRAMMERING Föreläsning 7 ( ) INNEHÅLL: -Klasser -Att definiera egna klasser -Klassvariabler -Klassmetoder.
Föreläsning 14 ”Enkel” Filhantering.
Java servlets och databaskopplingar
1 Föreläsning 6 Programmeringsteknik och Matlab 2D1312/2D1305 Metoder & parametrar Array API och klassen ArrayList.
XHTML & CSS Introduktion Erik Nahkala
1 ITK:P1 Föreläsning 8 Multimedia för spelkonstruktion DSV Peter Mozelius.
Föreläsning 10 Stränghantering.
Föreläsning 1 Reserverade ord Javas API Identifierare Litteraler Variabler Kompilering och interpretering.
Föreläsning 5 Arrayer & ArrayList Hur man använder API:n
XHTML – Dokumentets grundstruktur Body - head. Grundläggande dokument
En fråga per elev – bråk år 6
1 ITK:P2 F6 Sortering av generiska containerklasser DSV Peter Mozelius.
1. Ett problem/uppgift.
XSLT 2 Digitalisering av kulturarvet.
1 Synchronized Multimedia Integration Language DSV Peter Mozelius Resurssnålt och plattformsoberoende.
ITK:P2 F8 Strömmar och filhantering DSV Peter Mozelius.
2I1073 Lektion 1 KTH-MI Peter Mozelius XHTML, stilmallar och Javascript.
1 2I1073 Föreläsning 1 KTH-MI Peter Mozelius XHTML, stilmallar och Javascript.
Föreläsning 2 2D1312 Introduktion till Python Kap 1 och 2 i kursboken.
CSS del 1 Kvarnbrink I början… Bakgrunden var det enda man kunde byta färg på Allt var satt i Times Texten flödade över hela webbläsarfönstrets.
Copyright, Mahmud Al Hakim, Hakimdata.se Agenda  Kunskapstest  Windows Skrivbord (Desktop)  Aktivitetsfält  Fönster och menyer  Systemåterställning.
Föreläsning 7 programmeringsteknik och Matlab 2D1312/2D1305 Metoddeklaration och parametrar Arrayer och ArrayList.
1 Föreläsning 9 Object cast Klassen Vector Skillnad mellan Arrayer och Vector.
Medicinska webbapplikationer
Nya hemsidan Övergripande adress:
Hej användare! Välkommen till nya mallar.
Hej användare! Välkommen till nya mallar.
Presentationens avskrift:

Datavalidering med JavaScript ITK:P2 F7 Datavalidering med JavaScript DSV Peter Mozelius

Javascript Ett interpreterat skriptspråk Objektbaserat men INTE objektorienterat Används på klientsidan för t ex: animeringar beräkningar Datavalidering ”Browser sniffing”

Javascript - Java Syntaxen är ofta lik Javas MEN, det finns mycket som skiljer T ex svag typning Java har int, long, float, String ... JavaScript har enbart var

Ett objektbaserat språk Objekt och metoder document write() Används i ett HTML-dokument enligt: document.write(”Hej ITKP2!”);

Javascript inne i XHTML <head> <title>ITKP2 – Exempel1</title> </head> <body> <script type="text/javascript"> <!-- <![CDATA[ document.write("Hej ITKP2!"); // ]] --> </script> </body> </html>

DOM (Document Object Model) En modell för att komma åt alla element i ett HTML-dokument Dokumentet i sig är också ett objekt: document Ett annat användbart objekt är window window.navigator rör att komma åt själva webbläsaren

Browser sniffing //Kräver att popup-fönster är på i IE7 var surfare = prompt("Vad heter du som besöker denna sida?", ”Hannibal"); var lasare = window.navigator.appName; document.write("<h3>Hej ",surfare, ", jag ser att du använder " ,lasare, ".</h3>");

Popup-fönster i webbläsare

Javascript inlänkat från fil Det blir lätt grötigt och svårläst om allt ligger i samma fil. Lägg Javascriptet i en egen fil och länka in i XHTML-filen <script type="text/javascript" src=”exempel2.js"> </script> Skriptet ligger i filen: exempel1.js

Model - View - Controller MVC en vanlig bra princip som vi tidigare har pratat om för javaprogrammering Ett annat exempel på MVC är Model = innehållet/XHTML-filen View = stilsättningen/CSS-filen Controller = javascriptet Håll sakerna separerade i olika filer

Paus

Händelsehantering JavaScript kan hantera olika typer av händelser t ex: onclick: När användaren klickar  onload:  När dokumentet laddas onmouseover:  Muspekaren är över onmouseout: Muspekaren lämnar onunload: Surfaren lämnar sidan ...

DOM – ”cross-browser patch” Hur får vi händelsehanteringen att fungera i olika webbläsare? Jo, javascriptet inleds med ett litet tillägg som gör att dokumentets olika delar kan nås på olika sätt Här i det följande exemplet triggas en funktion både för Mozilla och IE

DOM - för flera webbläsare IE=(document.all) ? true:false; //IE4+ DOM2=((document.getElementById)&& (!IE))?true:false;//Mozilla setEventByID(id,ev,fu) { if(DOM2) { document.getElementById(id).addEventListener(ev,fu,false); } if(IE) { document.getElementById(id).attachEvent("on" + ev,fu); } } + setEventByID("knapp", "click", validera);

Datavalidering i JavaScript Att kontrollera inmatade värden redan innan de skickas vidare Som i de följande exemplet för Ett telefonnummer Som i UppgiftC för Ett Visa-kort

Datavalidering – exempel 3 Du vill kontrollera att ett telefon-nummer enbart innehåller siffror function validera() { var indata = document.getElementById("ruta").value; if(isNaN(telnr)) window.alert(telnr + " är inte ett giltigt telefonnummer!"); } setEventByID("knapp", "click", validera);

Mozillas felkonsol

JavaScript Debugger

Uppgift C Exemplet är krypterat <script language = JavaScript type=text/javascript> alert("OBS, exemplet längst ner fungerar endast i Internet Explorer"); </script>

Uppgift C Klientsidevalidering av ett Visa-kort

Tack för år! Det var allt för mig nu på ITKP2 Tack för mig!