HTML, CSS en JavaScript integreren
Begrijp hoe standaardwebtechnologieën de basis vormen van de UI van Electron, zodat u uw bestaande expertise in webontwikkeling kunt gebruiken.
HTML, CSS en JavaScript integreren is een gratis Desktopapplicaties ontwikkelen met Electron-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Desktopapplicaties ontwikkelen met Electron. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Desktopapplicaties ontwikkelen met Electron bevat in totaal 4 lessen.
Webgebruikersinterface met HTML, CSS en JS
Welkom! In Electron bouwt u interfaces voor desktopapps met dezelfde technologieën als voor een website: HTML, CSS en JavaScript.
Dit betekent dat u uw bestaande vaardigheden in webontwikkeling direct kunt gebruiken. Laten we kijken hoe!
Maak kennis met het rendererproces
Een Electron-app heeft een hoofdproces en een of meer rendererprocessen.
- Het hoofdproces verwerkt interacties met het systeemeigen besturingssysteem.
- Het rendererproces is in wezen een exemplaar van de Chromium-webbrowser. Hier worden uw HTML, CSS en JavaScript uitgevoerd en wordt de gebruikersinterface van uw app gevormd.
Zie elk Electron-venster als een afzonderlijk rendererproces.
HTML voor structuur en inhoud
HTML (HyperText Markup Language) vormt de basis van elke webpagina, inclusief de gebruikersinterface van uw Electron-app.
HTML definieert de structuur en inhoud:
- Koppen (
<h1>,<h2>) - Alinea's (
<p>) - Knoppen (
<button>)
U kunt het zien als de blauwdruk voor de indeling van uw app.
HTML-inhoud weergeven
Uw Electron-hoofdproces laadt een HTML-bestand in een rendererproces (een nieuw venster). Dit HTML-bestand wordt de eerste weergave van uw app.
Zo laadt `main.js` een eenvoudig `index.html`-bestand:
Het `index.html`-bestand kan het volgende bevatten:<h1>Hello Electron!</h1><p>My first desktop UI.</p>
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false,
contextIsolation: true
}
});
// Load the index.html file
win.loadFile(path.join(__dirname, 'index.html'));
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});CSS voor de opmaak van uw gebruikersinterface
CSS (Cascading Style Sheets) wordt gebruikt om de weergave van uw HTML-inhoud te bepalen. CSS bepaalt hoe uw app eruitziet.
Met CSS kunt u het volgende definiëren:
- Kleuren en achtergronden
- Lettertypen en tekstgroottes
- Indeling (marges, opvulling en positionering)
Zo verandert u uw HTML-blauwdruk in een visueel aantrekkelijke interface.
Stijlen koppelen en toepassen
U koppelt een CSS-bestand aan uw HTML met een <link>-tag in de sectie <head> van uw `index.html`.
Als u bijvoorbeeld het vorige `h1`-element wilt opmaken:
Uw `index.html` bevat dan:<link rel="stylesheet" href="style.css">
En `style.css` kan het volgende bevatten:h1 { color: #3366ff; text-align: center; }
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false,
contextIsolation: true
}
});
win.loadFile(path.join(__dirname, 'index.html'));
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});JavaScript voor interactiviteit
JavaScript (JS) voegt dynamisch gedrag en interactiviteit toe aan de gebruikersinterface van uw Electron-app.
Hiermee kunt u:
- Reageren op acties van gebruikers (klikken en toetsaanslagen)
- HTML-inhoud en CSS-stijlen aanpassen
- Gegevens ophalen uit API's
JS verandert een statische pagina in een dynamische, responsieve applicatie.
Gebruikersinterfacelogica implementeren met JS
U kunt JavaScript rechtstreeks in uw HTML opnemen met <script>-tags of externe .js-bestanden koppelen.
Voeg een knop toe en laat deze een melding weergeven wanneer erop wordt geklikt:
Uw `index.html` bevat dan:<button id="myButton">Click Me!</button><script>document.getElementById('myButton').addEventListener('click', () => { alert('Hello from Electron!'); });</script>
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false,
contextIsolation: true
}
});
win.loadFile(path.join(__dirname, 'index.html'));
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});HTML, CSS en JS: één geheel
Samen vormen HTML, CSS en JavaScript een krachtige en vertrouwde technologiestack voor het bouwen van gebruikersinterfaces in Electron.
- HTML levert de inhoud en structuur.
- CSS bepaalt de visuele weergave.
- JavaScript voegt interactiviteit en dynamisch gedrag toe.
Hierdoor kunnen webontwikkelaars hun bestaande kennis gebruiken om robuuste desktopapplicaties te maken.
Rollen van webtechnologieën
Welke van de volgende uitspraken beschrijven correct de rol van HTML, CSS en JavaScript in een Electron-rendererproces?
Samenvatting: basisprincipes van webinterfaces
Vandaag hebben we geleerd dat Electron vertrouwde webtechnologieën — HTML, CSS en JavaScript — gebruikt om gebruikersinterfaces voor desktopapplicaties te bouwen.
- In het rendererproces worden deze webtechnologieën uitgevoerd.
- HTML structureert de inhoud.
- CSS bepaalt de vormgeving.
- JavaScript voegt dynamisch gedrag toe.
U begrijpt nu de fundamentele bouwstenen van een Electron-gebruikersinterface. Vervolgens bekijken we hoe u populaire frontendframeworks kunt integreren.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 12
- Lessen
- 47
Veelgestelde vragen
Is de les “HTML, CSS en JavaScript integreren” gratis?
Ja — de volledige tekst van “HTML, CSS en JavaScript integreren” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Desktopapplicaties ontwikkelen met Electron wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Desktopapplicaties ontwikkelen met Electron bevat in totaal 4 lessen.
Wat leer ik in “HTML, CSS en JavaScript integreren”?
Begrijp hoe standaardwebtechnologieën de basis vormen van de UI van Electron, zodat u uw bestaande expertise in webontwikkeling kunt gebruiken. Je oefent met Desktopapplicaties ontwikkelen met Electron door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Desktopapplicaties ontwikkelen met Electron te beginnen?
Ervaring vooraf is niet nodig. Desktopapplicaties ontwikkelen met Electron op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “HTML, CSS en JavaScript integreren”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Desktopapplicaties ontwikkelen met Electron?
Ja. Elke les over Desktopapplicaties ontwikkelen met Electron bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- HTML, CSS en JavaScript integreren
- Frontendframeworks gebruiken
- Responsief desktopontwerp
- Thema's en ondersteuning voor de donkere modus