Integration af HTML, CSS og JavaScript
Forstå, hvordan standardwebteknologier udgør fundamentet for Electrons brugergrænseflade, så De kan anvende Deres eksisterende webudviklingserfaring.
Integration af HTML, CSS og JavaScript er en gratis Udvikling af desktopapps med Electron-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Udvikling af desktopapps med Electron, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Udvikling af desktopapps med Electron-kurset indeholder 4 lektioner i alt.
Webbrugergrænseflade med HTML, CSS og JS
Velkommen! I Electron bygger du grænseflader til desktop-apps ved hjælp af de samme teknologier, som du ville bruge til et websted: HTML, CSS og JavaScript.
Det betyder, at dine eksisterende færdigheder inden for webudvikling kan bruges direkte. Lad os se hvordan!
Mød renderer-processen
En Electron-app har en hovedproces og en eller flere renderer-processer.
- Hovedprocessen håndterer interaktioner med det oprindelige operativsystem.
- Renderer-processen er grundlæggende en Chromium-webbrowserinstans. Det er her, din HTML, CSS og JavaScript kører og danner appens brugergrænseflade.
Betragt hvert Electron-vindue som sin egen renderer-proces.
HTML til struktur og indhold
HTML (HyperText Markup Language) er rygraden i enhver webside, inklusive brugergrænsefladen i din Electron-app.
Det definerer strukturen og indholdet:
- Overskrifter (
<h1>,<h2>) - Afsnit (
<p>) - Knapper (
<button>)
Det fungerer som en tegning af appens layout.
Visning af HTML-indhold
Din Electron-hovedproces indlæser en HTML-fil i en renderer-proces (et nyt vindue). Denne HTML-fil bliver appens første visning.
Sådan indlæser `main.js` en enkel `index.html`-fil:
`index.html` kan indeholde:<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 til styling af brugergrænsefladen
CSS (Cascading Style Sheets) bruges til at styre præsentationen af dit HTML-indhold. Det bestemmer, hvordan din app ser ud.
Med CSS kan du definere:
- Farver og baggrunde
- Skrifttyper og tekststørrelser
- Layout (margener, indvendig afstand og placering)
Det forvandler din HTML-tegning til en visuelt tiltalende grænseflade.
Tilknytning og anvendelse af typografier
Du knytter en CSS-fil til din HTML ved hjælp af et <link>-tag i sektionen <head> i din `index.html`.
Hvis du f.eks. vil style det tidligere `h1`-element:
Din `index.html` skal indeholde:<link rel="stylesheet" href="style.css">
Og `style.css` kan indeholde: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 til interaktivitet
JavaScript (JS) tilføjer dynamisk funktionalitet og interaktivitet til brugergrænsefladen i din Electron-app.
Det giver dig mulighed for at:
- Reagere på brugerhandlinger (klik og tastetryk)
- Ændre HTML-indhold og CSS-typografier
- Hente data fra API'er
JS forvandler en statisk side til en dynamisk og responsiv applikation.
Implementering af brugergrænsefladens logik med JS
Du kan indlejre JavaScript direkte i din HTML ved hjælp af <script>-tags eller tilknytte eksterne .js-filer.
Lad os tilføje en knap og få den til at vise en alarm, når der klikkes på den:
Din `index.html` skal indeholde:<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 og JS: En samlet stak
HTML, CSS og JavaScript udgør tilsammen en stærk og velkendt stak til opbygning af Electron-brugergrænseflader.
- HTML leverer indholdet og strukturen.
- CSS definerer den visuelle præsentation.
- JavaScript tilføjer interaktivitet og dynamisk funktionalitet.
Det giver webudviklere mulighed for at bruge deres eksisterende viden til at skabe robuste desktop-applikationer.
Webteknologiernes roller
Hvilke af følgende udsagn beskriver korrekt HTML, CSS og JavaScripts rolle i en Electron-renderer-proces?
Opsamling: Grundlæggende webbrugergrænseflader
I dag lærte vi, at Electron bruger velkendte webteknologier – HTML, CSS og JavaScript – til at bygge brugergrænseflader til desktop-applikationer.
- Renderer-processen er det sted, hvor disse webteknologier kører.
- HTML strukturerer indholdet.
- CSS styler udseendet.
- JavaScript tilføjer dynamisk funktionalitet.
Du forstår nu de grundlæggende byggesten i en Electron-brugergrænseflade. Som det næste undersøger vi, hvordan populære frontend-frameworks integreres.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 12
- Lektioner
- 47
Ofte stillede spørgsmål
Er lektionen “Integration af HTML, CSS og JavaScript” gratis?
Ja — hele teksten til “Integration af HTML, CSS og JavaScript” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Udvikling af desktopapps med Electron-kurset, skal du opgradere til CoddyKit PRO. Udvikling af desktopapps med Electron-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Integration af HTML, CSS og JavaScript”?
Forstå, hvordan standardwebteknologier udgør fundamentet for Electrons brugergrænseflade, så De kan anvende Deres eksisterende webudviklingserfaring. Du øver dig i Udvikling af desktopapps med Electron med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Udvikling af desktopapps med Electron?
Der kræves ingen tidligere erfaring. Udvikling af desktopapps med Electron på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “Integration af HTML, CSS og JavaScript”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Udvikling af desktopapps med Electron-lektion?
Ja. Alle Udvikling af desktopapps med Electron-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Integration af HTML, CSS og JavaScript
- Brug af frontend-frameworks
- Responsivt desktopdesign
- Temaer og understøttelse af mørk tilstand