Integrera HTML, CSS och JavaScript
Förstå hur standardiserade webbtekniker utgör grunden för Electrons användargränssnitt och låter Er använda Era befintliga kunskaper inom webbutveckling.
Integrera HTML, CSS och JavaScript är en gratis lektion i Utveckling av skrivbordsappar med Electron på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Utveckling av skrivbordsappar med Electron, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Utveckling av skrivbordsappar med Electron innehåller totalt 4 lektioner.
Webbgränssnitt med HTML, CSS och JS
Välkomna! I Electron bygger ni gränssnitt för datorappar med samma tekniker som används för webbplatser: HTML, CSS och JavaScript.
Det innebär att era befintliga kunskaper inom webbutveckling kan användas direkt. Vi ska se hur!
Möt Renderer Process
En Electron-app har en Main Process och en eller flera Renderer Processes.
- Main Process hanterar interaktioner med operativsystemet.
- Renderer Process är i praktiken en instans av webbläsaren Chromium. Det är där HTML, CSS och JavaScript körs och bildar appens användargränssnitt.
Tänk på varje Electron-fönster som en egen renderingsprocess.
HTML för struktur och innehåll
HTML (HyperText Markup Language) är grunden för alla webbsidor, inklusive användargränssnittet i er Electron-app.
HTML definierar struktur och innehåll:
- Rubriker (
<h1>,<h2>) - Stycken (
<p>) - Knappar (
<button>)
Det fungerar som en ritning för appens layout.
Visa HTML-innehåll
Electron-processen main process läser in en HTML-fil i en renderer process (ett nytt fönster). Den här HTML-filen blir appens ursprungliga vy.
Så här läser `main.js` in en enkel `index.html`-fil:
`index.html` kan innehålla:<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 för att utforma gränssnittet
CSS (Cascading Style Sheets) används för att styra presentationen av HTML-innehållet. CSS bestämmer hur appen ser ut.
Med CSS kan ni definiera:
- Färger och bakgrunder
- Teckensnitt och textstorlekar
- Layout (marginaler, utfyllnad och positionering)
CSS förvandlar HTML-ritningen till ett visuellt tilltalande gränssnitt.
Länka och tillämpa stilar
Ni länkar en CSS-fil till HTML med en <link>-tagg i avsnittet <head> i `index.html`.
Om ni till exempel vill utforma det föregående `h1`-elementet:
kan `index.html` innehålla:<link rel="stylesheet" href="style.css">
Och `style.css` kan innehålla: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 för interaktivitet
JavaScript (JS) lägger till dynamiskt beteende och interaktivitet i Electron-appens användargränssnitt.
Det gör det möjligt att:
- Reagera på användaråtgärder (klick och tangenttryckningar)
- Manipulera HTML-innehåll och CSS-format
- Hämta data från API:er
JS förvandlar en statisk sida till en dynamisk och responsiv applikation.
Implementera gränssnittslogik med JS
Ni kan bädda in JavaScript direkt i HTML med <script>-taggar eller länka till externa .js-filer.
Vi lägger till en knapp och låter den visa en avisering när den klickas:
`index.html` kan innehålla:<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 och JS: en enhetlig stack
Tillsammans bildar HTML, CSS och JavaScript en kraftfull och välbekant stack för att bygga Electron-användargränssnitt.
- HTML tillhandahåller innehållet och strukturen.
- CSS definierar den visuella presentationen.
- JavaScript lägger till interaktivitet och dynamiskt beteende.
Det gör det möjligt för webbutvecklare att använda sina befintliga kunskaper för att skapa robusta datorappar.
Webbteknikernas roller
Vilka av följande påståenden beskriver korrekt vilken roll HTML, CSS och JavaScript har i en Electron-renderingsprocess?
Sammanfattning: Grunderna i webbgränssnitt
Idag har vi lärt oss att Electron använder välbekanta webbtekniker – HTML, CSS och JavaScript – för att bygga användargränssnitt för datorappar.
- renderingsprocessen är där dessa webbtekniker körs.
- HTML strukturerar innehållet.
- CSS utformar utseendet.
- JavaScript lägger till dynamiskt beteende.
Nu förstår ni de grundläggande byggstenarna i ett Electron-gränssnitt. Därefter utforskar vi hur populära frontend-ramverk kan integreras.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 12
- Lektioner
- 47
Vanliga frågor
Är lektionen ”Integrera HTML, CSS och JavaScript” gratis?
Ja – hela texten till ”Integrera HTML, CSS och JavaScript” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Utveckling av skrivbordsappar med Electron, kan Ni uppgradera till CoddyKit PRO. Kursen i Utveckling av skrivbordsappar med Electron innehåller totalt 4 lektioner.
Vad lär jag mig i ”Integrera HTML, CSS och JavaScript”?
Förstå hur standardiserade webbtekniker utgör grunden för Electrons användargränssnitt och låter Er använda Era befintliga kunskaper inom webbutveckling. Ni övar på Utveckling av skrivbordsappar med Electron med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Utveckling av skrivbordsappar med Electron?
Du behöver inga förkunskaper. Utbildningen i Utveckling av skrivbordsappar med Electron på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Integrera HTML, CSS och JavaScript”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Utveckling av skrivbordsappar med Electron-lektionen?
Ja. Varje Utveckling av skrivbordsappar med Electron-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Integrera HTML, CSS och JavaScript
- Använda frontendramverk
- Responsiv skrivbordsdesign
- Teman och stöd för mörkt läge