Front End
Onderdeel van Front End 4
Link binnen een pagina
Vraag
Hoe maak je een hyper link die verwijst naar de bovenkant van dezelfde pagina?
Antwoord
het is relatief eenvoudig om een link te maken die naar de bovenkant van dezelfde HTML-pagina verwijst. Dit kan worden gedaan door het href attribuut van de tag in te stellen op "#top" . Meestal wordt hiervoor een HTML-element met id="top" aan het begin van de pagina geplaatst, zodat de link weet waar naartoe te verwijzen.
Hier is een eenvoudig voorbeeld:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
a1 | a2 | a3 |
b1 | b2 | b3 |
zet die voor de laatste twee
op 0px. Stap 11 Pas gelijk de breedte even aan. Weet je niet meer hoe dat moet? Zoek dan even op css width Stap 12 Nu de kleur van de
aanpassen. Stap 13 En het font. We gebruiken weer een Google font zoals we dat eerder hebben gedaan. Pas de CSS aan. Tip het gebruikte font is Pacifico Stap14 Als laatste gaan we de regelafstand aanpassen. Hoe? Zie: https://www.w3schools.com/cssref/pr_dim_line-height.php -- DOM Manipulation English The DOM is the Document Object Model, which is essentially the entire HTML page. You can modify the DOM using JavaScript. For example, you can change the color of an element, or modify the content of an element. This can also be done with PHP, but that requires a (return) trip to the server. With JS, you can make local (front-end) adjustments. This is often faster and usually looks better. To modify the DOM, you need a few specific commands. The most important ones are discussed here. 1. Accessing Elements To manipulate the content, you first need to access the elements. Common methods to access DOM elements include: document.getElementById(id) : Selects a single element by its ID. document.getElementsByTagName(name) : Returns a collection of elements with the given tag name. document.getElementsByClassName(name) : Returns a collection of elements that have the given class name. document.querySelector(selector) : Returns the first element that matches a specified CSS selector. document.querySelectorAll(selector) : Returns a list of all elements that match a specified CSS selector. 2. Changing Element Properties Once you have a reference to an element, you can modify its properties. This includes changing the element's inner HTML, text content, attributes, and style. For example: element.innerHTML : Gets or sets the HTML or XML markup contained within the element. element.textContent : Sets or returns the textual content of an element and its descendants. element.setAttribute(name, value) : Adds a specified attribute to an element, or updates its value if it already exists. element.style.property : Changes the style of an element, where property is a CSS property (in camelCase, e.g., backgroundColor ). 3. Creating and Removing Elements JavaScript allows you to create new elements and insert them into the DOM or remove existing elements: document.createElement(tagName) : Creates a new element with the given tag name. parentNode.appendChild(childNode) : Appends a node as the last child of a parent node. parentNode.insertBefore(newNode, referenceNode) : Inserts a new node before the reference node as a child of a specified parent node. parentNode.removeChild(child) : Removes a child node from the DOM. element.remove() : Removes the element from the DOM. 4. Event Handling Adding event listeners to elements enables you to execute code in response to user actions, such as clicks, keyboard input, or mouse movements: element.addEventListener(event, function, useCapture) : Attaches an event handler to an element. Common events include click , mouseover , mouseout , keydown , keyup , etc. 5. Traversal and Modification The DOM provides methods and properties to traverse and modify nodes: element.childNodes : Returns a live NodeList of child nodes of an element. element.parentElement : Returns the parent element of the specified element. element.nextSibling : Returns the next sibling in the tree. element.previousSibling : Returns the previous sibling in the tree. Nederlands DOM is het Document Object Model, dat is zeg maar de hele HTML pagina. Je kunt met JavaScript de DOM anapassen. Je kunt bijvoorbeeld een kleur van een element aanpassen, of de inhoud van een element aanpassen. Dit kan natuurlijk ook met PHP, maar daarvoor moet je (terug) naar de server. Met JS kan je lokaal (front End) dingen aanapssen. Dat is vaak sneller en ziet er vaak beter uit. Om de DOM aan te passen, heb je een paar specifieke commando's. De belangrijkste worden hier besproken. 1. Toegang krijgen tot Elementen Om de inhoud te manipuleren, moet je eerst toegang krijgen tot de elementen. Veelgebruikte methoden om toegang te krijgen tot DOM-elementen zijn: document.getElementById(id) : Selecteert een enkel element op basis van zijn ID. document.getElementsByTagName(name) : Geeft een verzameling van elementen terug met de gegeven tag-naam. document.getElementsByClassName(name) : Geeft een verzameling van elementen terug die de gegeven klassenaam hebben. document.querySelector(selector) : Geeft het eerste element terug dat overeenkomt met een gespecificeerde CSS-selector. document.querySelectorAll(selector) : Geeft een lijst terug van alle elementen die overeenkomen met een gespecificeerde CSS-selector. 2. Wijzigen van Elementeigenschappen Zodra je een referentie naar een element hebt, kun je de eigenschappen ervan wijzigen. Dit omvat het wijzigen van de innerlijke HTML, tekstinhoud, attributen en stijl van het element. Bijvoorbeeld: element.innerHTML : Haalt op of stelt de HTML- of XML-markering in die binnen het element is opgenomen. element.textContent : Stelt de tekstuele inhoud van een element en zijn nakomelingen in of retourneert deze. element.setAttribute(name, value) : Voegt een gespecificeerd attribuut toe aan een element, of werkt de waarde ervan bij als het al bestaat. element.style.property : Wijzigt de stijl van een element, waarbij property een CSS-eigenschap is (in camelCase, bijvoorbeeld backgroundColor ). 3. Creëren en Verwijderen van Elementen JavaScript stelt je in staat om nieuwe elementen te creëren en deze in het DOM in te voegen of bestaande elementen te verwijderen: document.createElement(tagName) : Creëert een nieuw element met de gegeven tag-naam. parentNode.appendChild(childNode) : Voegt een knooppunt toe als het laatste kind van een ouder knooppunt. parentNode.insertBefore(newNode, referenceNode) : Voegt een nieuw knooppunt in vóór het referentieknooppunt als een kind van een gespecificeerd ouderknooppunt. parentNode.removeChild(child) : Verwijdert een kindknooppunt uit het DOM. element.remove() : Verwijdert het element uit het DOM. 4. Event Handling Het toevoegen van event listeners aan elementen stelt je in staat om code uit te voeren als reactie op gebruikersacties, zoals klikken, toetsenbordinvoer of muisbewegingen: element.addEventListener(event, function, useCapture) : Voegt een event handler toe aan een element. Veelvoorkomende events zijn click , mouseover , mouseout , keydown , keyup , enz. 5. Doorlopen en Wijzigen Het DOM biedt methoden en eigenschappen om knooppunten te doorlopen en te wijzigen: element.childNodes : Geeft een live NodeList van kindknooppunten van een element terug. element.parentElement : Geeft het ouder-element van het gespecificeerde element terug. element.nextSibling : Geeft de volgende sibling in de boom terug. element.previousSibling : Geeft de vorige sibling in de boom terug. DOM manipulation opdrachten Inleiding Neem eerste de theorie door op de vorige pagina! De opdrachten van dit blok sluiten op elkaar aan. Je moet ze dus in de jusite volgorde maken. Waarschuwing: als je de opdrachten met ChatGPT maakt en je snapt niet wat je doet dan loop je met de laatste opdrachten vast. Deze opdrachtnen zijn getest en kunnen niet met behulp van ChatGPT 4.0 integraal worden opgelost. Kom je ergens niet verder, ga dan niet verder met de volgende opdracht maar vraag hulp! Opdracht 1, kleur aanpassen (via id) Je hebt de volgende HTML/JS-code.
Dit is een voorbeeldtekst.
De JavaScript-functie wordt aangeroepen vanuit de onclick attribuut van de HTML-knop. Wanneer de knop wordt ingedrukt, moet de kleur van de tekst in het paragraafelement veranderen. Maak hiervoor het script af. Zorg dat je in het script zoekt naar het element met het id "tekst". Als je het element hebt gevonden dan kan je de daarna de kleur aanpassen. Inleveren Zet jouw naam als commentaar in de JS-code en lever het geteste en werkende HTML-pagina in. Opdracht 2, kleur aanpassen (via class) Je hebt de volgende HTML/JS-code:Dit is een voorbeeldtekst 1.
Dit is een voorbeeldtekst 2.
Dit is een voorbeeldtekst 3.
Dit is een voorbeeldtekst 4.
De JavaScript-functie wordt aangeroepen vanuit de onclick attribuut van de HTML-knop. Wanneer de knop wordt ingedrukt, moet de kleur van de tekst in alle paragraafelement met de class kleurVerander veranderen. Maak hiervoor het script af. Maak gebruik van document.getElementsByClassName en gebruik een for-loop. Denk erom dat document.getElementsByClassName een array met elementen terug geeft en dat je met de loop door het array moet heenlopen. Bedek zelf een mooie kleur. Inleveren Zet jouw naam als commentaar in de JS-code en lever het geteste en werkende HTML-pagina in. Opdracht 3, stijl toggle Je hebt de volgende HTML/JS-code:Dit is een gewone paragraaf.
Dit is een speciale paragraaf.
Nog een speciale paragraaf.
Nog een speciale paragraaf.
Vul de code aan op de puntje en zorg ervoor dat zodra op de knop wordt gedrukt: alle elementen met de class speciaal groen, vet en schuingedrukt worden. Als er weer op de knop wordt gedrukt dan worden: alle elementen met de class speciaal worden weer zwarte, niet vet en niet schuingedrukt. De knop wisselt dus telkens de stijl alle tekst met de class speciaal . Inleveren Zet jouw naam als commentaar in de JS-code en lever het geteste en werkende script in. Zet jouw naam als commentaar in de JS-code en lever het geteste en werkende HTML-pagina in. Opdracht 4, counter Bekijk het volgende voorbeeld.Schaatser | Aantal Rondes |
---|---|
Mo Mot | 0 |
Ayoub Allemaal | 0 |
Klaas Kaas | 0 |
Goedele Goedgeluk | 0 |
Roos Rommelhuis | 0 |
Lars Leeghoofd | 0 |
Product | Categorie |
---|---|
iPhone 13 | Smartphone |
Merk: Apple | Opslag: 128GB | Kleur: Zwart | |
Samsung Galaxy S21 | Smartphone |
Merk: Samsung | Opslag: 256GB | Kleur: Phantom Gray | |
Dell XPS 13 | Laptop |
Merk: Dell | Scherm: 13.3 inch | CPU: Intel i7 | |
MacBook Air | Laptop |
Merk: Apple | Scherm: 13.3 inch | CPU: M1 | |
Sony WH-1000XM4 | Hoofdtelefoon |
Merk: Sony | Type: Over-ear | Noise Cancelling: Ja | |
Google Nest Hub | Smart Home |
Merk: Google | Scherm: 7 inch | Assistent: Google Assistent |