jquery

Jquery

1. The basics of Jquery

Voordat je deze cursus kunt starten heb je eerst voldoende kennis van HTML en CSS. Kennis van Javascript is prettig maar niet speciaal noodzakelijk

Wat is Jquery?

Jquery is een framework. Het is ontwikkeld om met weinig code veel te kunnen bereiken. Je kunt er bijvoorbeeld HTML of CSS mee bewerken zonder dat de HTML- en CSSbestanden worden aangepast. De aanpassing vindt dus plaats in de browser. 

Er zijn allerlei effecten mee te bereiken. Deze website maakt gebruik van Jquery. Klik het menu maar eens op deze Jquery plugin waarin een opdrachtenvenster opent.

Dit is een Jquery plugin om opdrachten in deze website te laten zien. Er is veel mogelijk.  Klik maar eens op deze pagina waar een voorbeeld is te zien hoe je met blokken op een HTML-pagina kunt schuiven. Nog veel meer demonstraties zie je op de demo pagina.

Jquery is niet alleen voor webpagina's. Je kunt er ook mobiele apps mee programmeren zoals te zien is op de pagina van Jquery Mobile.

 

Codecademycodecademy

Een aantal onderwerpen over Jquery leer je op Copecademy. Het verschil met Codecademy is echter dat we het in de praktijk zullen toepassen via Netbeans. Deze oefeningen lever je telkens in via Google Classroom. Hoe Netbeans werkt heb je geleerd in de cursus HTML and CSS with Codecademy and Netbeans. In lesonderdeel 3 doen we desondanks hiervan een korte herhaling want misschien ben je het een en ander vergeten.

 

Tooltips

In de leerstof vind je ook de zogenaamde tooltips. Deze hebben een groene kleur.  Als je er met de muis overheen gaat komt er een tekst tevoorschijn die uitleg geeft over de term.

tooltip

 

 Hyperlinks

We werken in deze cursus met hyperlinks. Deze zijn onderstreept en hebben een blauwe kleur.

Deze hyperlinks zullen altijd in een nieuwe pagina openen, tenzij deze verwijzen naar een pagina binnen de eigen site 

2. Werken met Netbeans

Omdat de cursus HTML and CSS with Codecademy and Netbeans de basis vormt voor deze cursus moet je ook bekend zijn met het werken met Netbeans. We gaan echter toch een korte herhaling doen door te beginnen met de link Starten met Netbeans. Hier vind je een aantal opdrachten: opdracht 1 t/m opdracht 4. Deze opdrachten ga je  nu eerst maken. Ze vormen de basis voor de verdere opdrachten.

Maak de genoemde opdrachten en lever de war-file van je project in, in Google Classroom volgens de instructie van de docent (hier wordt in de les aandacht aan besteed). Als je gewend bent aan het werken in Netbeans kunnen de opdrachten vrij vlot worden gemaakt. 

Opdracht 2

3. Starten met Jquery

In lesonderdeel heb je een nieuw project gemaakt. Dat gaan we nu koppelen aan Jquery. In de <head> van je index.html zet je de volgende link:

jquery download

De link kun je downloaden op de Jquery downloadpagina.

Je hebt nu Jquery gekoppeld aan je project. Je hoeft niet, zoals vroeger type="text/javascript" binnen de tag te plaatsen. In HTML5 is dat niet meer nodig.

eigen scripts

Natuurlijk is het doel van deze cursus om eigen scripts te maken. Dit doen we in een apart bestand genaamd scripts.js. Maak in je Netbeans project een apart mapje js (zoals hier is uitgelegd) en maak daarin een een bestand scripts.js. Het aanmaken van een nieuw bestand gaat op dezelfde manier als het aanmaken van een mapje. In het filter type je dan "javascript".

creating a js file

Sleep het bestand hierna in je index.html. Netbeans maakt automatisch de link. Let er altijd op dat je eigen scripts.js na de Jquery download link komt. Dus eerst Jquery inladen en daarna pas je eigen scripts.

link the script js

 

Je bent nu klaar om te je eerst Jquery script te maken.

 

4. Je eerste script

Deze cursus zal in de toekomst verder worden afgemaakt.