Bureaublad
Javascript
JavaSript is een bescheiden taal, voor bescheiden programmeurs.Of dat terrecht is weet ik niet, als je bedenkt dat het de meestgebruikte interpreter ter wereld is, een van de eerste object georrienteerde, open source concepten en nu de grondslag van CSS, DHTML en AJAX...
Misschien kan JavaScript het beste worden opgevat als de macrotaal van webbrowsers.
En dat geeft ook aan dat javascript een beperkte taal is, het zal de browser niet kunnen ontstijgen. Je zult er nooit rijk van worden, want de bron ligt open. Daar staat tegenover dat je op de schouders van 's werelds beste programmeurs mag staan.
JavaSript richt zich met name op de HTML objecten, op een paar uitzonderingen na is het niet mogelijk om nieuwe objecten te maken.
Het lesmateriaal staat op:
http://www.w3schools.com/js/default.asp
JavaScript stelt je in staat om elk element van het DOM te manipuleren
DOM staat voor document object model.
HTML is begonnen als een markup taal voor publicaties, oorspronkelijk zag het er net zo uit als bijvoorbeeld de man pages in unix/linux maar dan met hyperlinks, saai en degelijk, geschikt voor het ontsluiten en uitwisselen van wetenschappelijke publicaties.
al vrij vroeg werden hier plaatjes aan toegevoegd.
De informatie brij die het resultaat was van deze benadering werd geformaliseerd in het DOM.
Het browserscherm wordt opgevat als een object, met daarin andere objecten, (er zijn ook nog meta objecten die de browser zelf als object behandelen)
De tekst maar ook de stijl in een stuk HTML zijn een eigenschap van het omhullende object.
Firefox heeft een addin (DOMinspector) die het DOM van een HTML document laat zien (zorg dat je die addin hebt!)
Of gebruik Opera, die heeft een ingebouwde DOM inspector
In objecten worden vorm en inhoud/functie gescheiden
Naam, type, vestigingsplaats, afdeling, docent zijn mogelijke eigenschappen van het object school In ons geval:
Als HTML object zou dat er zo uitzien
<school name = 'Alfa college' type = 'MBO' plaats = 'Groningen' afdeling = 'ICT' docent = 'Goudappel'>
maar er zijn meer docenten, vestigingen.....
In Javascript kunnen we elke eigenschap van het object aanspreken, bijvoorbeeld:
school.docent.value = 'Ronda';
document.write(school.docent);
Het lijkt als variabele nog het meest op een meerdimensionale hash.
| school( | name | => 'Alfa college'; |
| type | => 'MBO', | |
| plaats | => 'Groningen', | |
| afdeling | => 'ICT', | |
| docent | => 'Goudappel'); |
Naast eigenschappen (variabelen of referenties daarnaar) kan een object ook nog methoden (functies) bevatten.
in een object is er dus ondescheid tussen wat het is/heeft en wat het doet.
Dit filosofische concept is de basis van elke vorm van object georrienteerd progammeren
CSS is eigenlijk een subset van het DOM dat alleen over de vorm gaat, niet over de inhoud en niet over de functie.
In XML wordt ook nog betekenis aan de objecten toegekend.
Het meest ingewikkelde object in HTML is het <form> object, dat weer 9 input objecten omvat.
Button, Checkbox, File, Hidden, Password, Radio, Reset, Submit, Text
Samen met het <event> object zijn dit de leukste objecten omdat ze DHTML mogelijk maken, Interactief gedrag van een webpagina.
JavaScript was de laatste jaren een beetje in de versukkeling geraakt, maar is weer helemaal terug.
In AJAX (Asynchronous Javascript And XML) komen vorm, functie en betekenis samen en ontstaat een webbased omgeving waarin de meest voorkomende functies van computers samenkomen. Dit verschijnsel staat bekenet als WEB 2.0.
tekstverwerken, databases, spreadsheets, tekenprogramma's, browsen in informatie in 1 geintegreerde omgeving.
Google is een mooi voorbeeld een zoekmachine, google.docs alles van office en tekenen, google.maps geografisch informatiesysteem, gmail, agendabeheer, bloggen, film youtube, muziek........ en er komt nog meer.
Modern webdesign gaat dus over vorm, functie en betekenis en dat in een interactieve omgeving.
Aangezien alles bestaat uit vorm, functie en betekenis is de sky de limit geworden mede dankzij JavaScript.
Serversided scripting
Al zo lang als er webservers bestaan was het mogelijk om aan deze kant dingen te regelen zoals toegang tot databases het verwerken van formulieren en het dynamisch genereren van HTML.Meestal gaat dat in een van de 'moedertalen' van de server, aangezien de meeste serieuze webservers appache onder linux draaien ligt het voor de hand om BASH of PERL te gebruiken, maar Visual Basic zou ook kunnen op Windows server platforms met IIS.
Omdat het voor velen niet handig is om met een hummer boodschappen te gaan doen bij de aldi is er een smart uitgevonden, de smart van het serversided scripten is PHP.
Voor lange afstanden en zwaar werk of buiten de verharde wegen is de smart ongeschikt en nemen we toch maar de hummer, de hummer van het serversided scripten is PERL.
Je kunt direct PERL programma's draaien op de server, dit gebeurt in de zogenaamde CGI (common gateway interface)
Meestal een afgeschermde directory (cgi-bin) naast de www directory. Logisch want je wilt niet dat elke halvegare een formulier invult met een PERL script en op die manier je server om zeep helpt. De user Apache en de beheerder van de webserver hebben toegang tot deze directory maar de feitelijke gebruiker niet (dat is meestal een anonymus guest of een IP-adres)
De Apache plugin MOD-PERL zorgt ervoor dat niet elke request een nieuw proces oplevert, waardoor de server zou kunnen overlopen.
CGI is sneller en robuuster dan PHP omdat PERL op hetzelfde niveau als apache loopt, PHP loopt als proces onder apache.
Perl is een veel completere programmeertaal dan PHP, geavanceerde datastructuren en referenties maken het mogelijk om databases sneller te doorzoeken, zo is het mogelijk om de hele database te tie-en aan een datastructuur en de elementen van de database direct als variabelen (eigenlijk referenties) te benaderen.
PHP kan bijna alles op webgebied, Perl kan alles en bovedien op meerdere manieren.
Meestal gebruik je PERL pas als je er in PHP niet uitkomt, tenzij je aan de schoonheid en kracht van PERL verslaafd geraakt bent, dan gebruik je het gewoon altijd ;-)
Het is best mogelijk dat je buiten deze lessen nooit meer in een situatie terrecht komt waarin PHP niet voldoet en dat is geen schande. Alle progammeurs gebruiken 90% van de tijd 10% van de mogelijkheden van de beschikbare programmeertalen.
Datzelfde geldt voor word en excel.
PHP dumpt in één klap de hele HTML code, maar soms wil je het in stukjes afleveren bijvoorbeeld een serie geluidsfragmenten.
PERL kan controleren of een geupload bestand ook werkelijk is wat de extensie doet vermoeden, en kan op die manier kwaadaardige bestanden weren.
deze twee voorbeelden zullen als lesmateriaal dienen.
AJAX
Veel mensen denken dat het XMLHttpRequest wat aan de basis van AJAX staat een ingebouwd object is, maar het is een JavaScript object dat gemaakt moet worden.Oorspronkelijk een obscuure activeX gimick in IE5 heeft het nadat het ook in Mozilla en Safari werd geimplementeerd een grote vlucht genomen.
XMLHttpRequest geen W3C-standaard maar er is een aanbeveling om het in DOM level 3 specificatie op te nemen. Dat zou als voordeel hebben dat de namen van de methodes genormaliseerd worden, die zijn nu in principe nog vrij te kiezen.Bovendien kan het dan als standaard object worden ingebouwd in browsers.
Hier is een voorbeeld zoals ik het gebruik:
Function AJAX(php,zoekstring,doel_div){
function createRequestObject() {
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
} else if(window.ActiveXObject) {
request = new ActiveXObject('Microsoft.XMLHTTP');
} else {
alert('Het lukt niet om het XMLHttpRequest object te maken');
}
return request;
}
var http = createRequestObject();
function sendRequestSearch(php,zoekstring) {
http.open('get', php+zoekstring);
http.onreadystatechange = handleResponseSearch;
http.send(null);
}
function handleResponseSearch() {
if(http.readyState == 4 && http.status == 200){
if(http.responseText) {
document.getElementById(doel_div).innerHTML = http.responseText;
} else {
document.getElementById(doel_div).innerHTML = 'Sorry, geen resultaten gevonden';
}
} else {
document.getElementById(doel_div).innerHTML = 'Bezig, nog geen resultaten gevonden';
}
}
}
De object namen en methoden voldoen aan het voorstel voor een norm, de variabelennamen en de responses zijn uiteraard zelf gekozen. kan nog vervangen worden door de bekende animatie
Dit stukje JavaScript zorgt ervoor dat in de bedoelde <div> met de naam doel_div het resultaat van een SQL query wordt geplaatst met de bestandsnaan.php?naamdeel=zoekterm als handler voor de GET
De status van het verzoek.
De vijf mogelijke waarden zijn
0 = uninitialized,
1 = loading,
2 = loaded,
3 = interactive,
4 = completed.
de HTML statuscodes vind je hier
in elk geval 200 = OK
Dus als het script klaar is en er is geen fout opgetreden dan wordt de respons weergegeven, anders is het script busy of er zijn geen resultaten (respons = leeg)
Hier achter zitten:
ten eerste:
een HTML document met daarin
1 het vragende formulier
2 de <div> waarin de resultaten komen
3 het JavaScript of een link/referentie ernaar
en ten tweede:
Een php document dat de query uitvoert en de resultaten terugstuurt naar de <div> in het HTML document.
Maar met AJAX kan nog veel meer dan alleen maar hinten geven
Je hebt vast weleens een zwevend menu gezien, of een menu dat naast een pagina staat en op verzoek tevoorschijn komt en andere schitterende menu oplossingen.
Of plaatjes die je kunt vergroten en erop inzoomen.
Het slepen van content (zoals bij solitaire).
het werken met schuifjes als analoge input.
een hele hoop voorbeelden van wat er met AJAX mogelijk is
timelines
tooltips
mooie popupschermen
mouseovers
kaarten en satelietbeelden
het sorteren van kolommen zoals in verkenner etc.
Tenslotte de enquete en de opdrachten:
In principe is elke
opdracht toegestaan, maar de lat ligt hoog, bij elke keuze geldt dat
er een product moet worden gemaakt waaruit blijkt dat de keuze op een
redelijk niveau is uitgevoerd.
1 Basiskennis
JavaScript / JavaScript voor gevorderden.
Een webpagina die
invoer van de gebruiker controleert op geldigheid (terugkoppeling van
de fout) en dan uitvoert, het algoritme dat wordt uitgevoerd moet een
redelijke complexiteit hebben zie bijvoorbeeld:
http://www.goudappel.org/onderwijs/ABCformule.html
http://www.goudappel.org/onderwijs/Goniometrischegereedschapset.html
Interactieve
menustructuren met een eigen vormgeving, remote control
2 Basiskennis
JavaScript / Basiskennis AJAX.
Een webpagina die
invoer van de gebruiker controleert op geldigheid (terugkoppeling van
de fout) en dan uitvoert, het algoritme dat wordt uitgevoerd mag
redelijk simpel zijn (bv een SQL query). Daarnaast moet tenminste een
hintenlijst (zoals bij google) uit de database gegenereerd worden.
3 PHP/MySQL voor
gevorderden.
Stage database met in-
en uitvoermodules, zoekschermen, etc.
Presentieregistratie
systeem ICT, (met scanner interface),
Competentieregistratiesysteem
ICT. (uit privacyoverwegingen gebruiken we alleen de eigen klas of
een dummyklas maar de database moet wel worden ingericht voor de
gehele opleiding.
4 Voorbij PHP ->
Basiskennis PERL CGI.
Een serversided PERL
CGI-script dat teminste gebruik maakt van mogelijkheden die in PHP
ontbreken zoals gefaseerde uitvoer van embedded geluidsfragmenten en
of het gebruik subroutines. (bv morse code generator met 2 wav
bestanden)
Een upload pagina (met
browse local disks) die controleert of de extensie overeenkomt met
het format van de file en bestanden weigert of toelaat met
terugkoppeling naar de gebruiker.
5 Basiskennis
JavaScript / DOM voor gevorderden CSS.
Een javascript sniffer
en aan de browser aangepaste stylesheets, workarounds voor IE en
andere niet W3 compatible browsers. een aantal HTML of PHP pagina's
die aantonen dat alles naar behoren in willekeurige browsers werkt
dus tenminste:
DOM document functies
(embedded audio/video, flash, tabellen, diverse grafische formaten
gif jpg png svg),
DOM form functies
(formulieren, invoer, uitvoer, buttons),
DOM window functies
(favicon, alert, title, status, linkicon).
6 Technisch
programmeren (utility's, drivers, interfaces, API's)
Een interface die de
WII-mote via bluetooth aan een pc koppelt, platformonafhankelijk of
tenminste gecompileerd voor Linux, windows XP en Vista en mac-OS.
7
Applicatieontwikkeling (compleet programma met interface)
Een tekenprogramma van
tenminste het niveau van paint dat op een doorzichtige laag op het
bureaublad werkt zodat je over openstaande applicaties heen kunt
schrijven (powerpresenter, muis en tekentablet)
8 Ik kan vloeiend HTML, PHP, CSS, SQL en al redelijk JavaScript en
wil AJAX leren en een web 2.0 applicatie maken.
Een web 2.0 applicatie
ontwerpen en bouwen zoals google.docs of livelink. verwerken analoge
input, floating remote control / floating menu.
Deze opdrachten zijn niet bindend, een goed voorstel voor een programma / script met een duidelijke beschrijving van het resultaat kan worden toegestaan mits het niveau voldoende is en het project oorspronkelijk en nieuw is (Java applets).
Niet alle code hoeft
zelf te worden gemaakt, componenten uit andere open source software
mogen worden gebruikt. (bv bluetooth stacks, wiimote interface) met
vermelding van de herkomst. De JavaScripting, PERL, CSS, AJAX moet
wel helemaal eigen handwerk zijn! Plagiaat/diefstal van broncode
leidt onherroepelijk tot een onvoldoende.
Het gehele project is
zelf ook weer open source en moet dus uitgebreid gedocumenteerd zijn.
Opdrachtgever / klant
beoordelaar zijn:
1 De vakdocent
(beoordeelt resultaat technisch en inhoudelijk,
werkhouding/professionele opstelling, documentatie) 50% en voorwaarde
voor 2
2 Een potentiele
gebruiker (kan een newbie zijn) (beoordeelt werking, intuïtiviteit,
handleiding/uitleg)
50%
Oplevering: voorlaatste
schoolweek zodat er voldoende tijd is voor beoordeling, herkansing:
herkansingsweek.
60% is een voldoende.
boven de 80% geeft
recht op pizza met de beoordelaars.