Utvikling av Electron-skrivebordsapper · leksjon

Integrere HTML, CSS og JavaScript

Forstå hvordan standard webteknologier utgjør grunnlaget for brukergrensesnittet i Electron, slik at De kan bruke den eksisterende kompetansen Deres innen webutvikling.

Leksjon 1 av 411 trinn

Integrere HTML, CSS og JavaScript er en gratis leksjon i Utvikling av Electron-skrivebordsapper på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Utvikling av Electron-skrivebordsapper, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Utvikling av Electron-skrivebordsapper inneholder totalt 4 leksjoner.

Nettbrukergrensesnitt med HTML, CSS og JS

Velkommen! I Electron bygger du grensesnitt for skrivebordsapper ved hjelp av de samme teknologiene som brukes på nettsteder: HTML, CSS og JavaScript.

Det betyr at eksisterende ferdigheter innen webutvikling kan brukes direkte. La oss se hvordan!

Bli kjent med Renderer Process

En Electron-app har en Main Process og én eller flere Renderer Processes.

Main Process håndterer samhandling med operativsystemet.
Renderer Process er i praksis en Chromium-nettleserforekomst. Det er her HTML, CSS og JavaScript kjører og danner appens brukergrensesnitt.

Tenk på hvert Electron-vindu som sin egen renderer-prosess.

HTML for struktur og innhold

HTML (HyperText Markup Language) er grunnlaget for alle nettsider, også brukergrensesnittet i Electron-appen din.

HTML definerer struktur og innhold:

Overskrifter (<h1>, <h2>)
Avsnitt (<p>)
Knapper (<button>)

Det fungerer som en plantegning for appens oppsett.

Vise HTML-innhold

Electron-appen din laster en HTML-fil inn i en renderer-prosess (et nytt vindu) fra hovedprosessen. Denne HTML-filen blir appens første visning.

Slik laster `main.js` inn en enkel `index.html`-fil:

`index.html` kan inneholde:<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 for styling av brukergrensesnittet

CSS (Cascading Style Sheets) brukes til å styre presentasjonen av HTML-innholdet. CSS bestemmer hvordan appen ser ut.

Med CSS kan du definere:

Farger og bakgrunner
Skrifttyper og tekststørrelser
Oppsett (marger, innvendig marg og plassering)

CSS gjør HTML-plantegningen om til et visuelt tiltalende grensesnitt.

Koble til og bruke stiler

Du kobler en CSS-fil til HTML ved hjelp av en <link>-tagg i <head>-delen av `index.html`.

For eksempel for å style det forrige `h1`-elementet:

`index.html` vil inneholde:<link rel="stylesheet" href="style.css">

Og `style.css` kan inneholde: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 for interaktivitet

JavaScript (JS) tilfører dynamisk atferd og interaktivitet til brukergrensesnittet i Electron-appen din.

Det lar deg:

Reagere på brukerhandlinger (klikk og tastetrykk)
Endre HTML-innhold og CSS-stiler
Hente data fra API-er

JS gjør en statisk side om til en dynamisk og responsiv applikasjon.

Implementere logikk for brukergrensesnittet med JS

Du kan bygge inn JavaScript direkte i HTML ved hjelp av <script>-tagger eller koble til eksterne .js-filer.

La oss legge til en knapp og få den til å vise et varsel når det klikkes på den:

`index.html` vil inneholde:<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 teknologistakk

Til sammen utgjør HTML, CSS og JavaScript en kraftig og velkjent teknologistakk for å bygge Electron-brukergrensesnitt.

HTML leverer innholdet og strukturen.
CSS definerer den visuelle presentasjonen.
JavaScript tilfører interaktivitet og dynamisk atferd.

Dette gjør at webutviklere kan dra nytte av eksisterende kunnskap for å lage robuste skrivebordsapplikasjoner.

Rollene til webteknologiene

Hvilke av følgende påstander beskriver riktig hvilken rolle HTML, CSS og JavaScript har i en Electron-renderer-prosess?

Besvar den i den interaktive leksjonen

Oppsummering: Grunnleggende om webgrensesnitt

I dag lærte vi at Electron bruker velkjente webteknologier – HTML, CSS og JavaScript – til å bygge brukergrensesnitt for skrivebordsapplikasjoner.

Renderer-prosessen er der disse webteknologiene kjører.
HTML strukturerer innholdet.
CSS styrer utseendet.
JavaScript tilfører dynamisk atferd.

Nå forstår du de grunnleggende byggesteinene i et Electron-brukergrensesnitt. Deretter skal vi se på hvordan populære frontend-rammeverk kan integreres.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 12
Leksjoner: 47

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Integrere HTML, CSS og JavaScript» gratis?

Ja – hele teksten i «Integrere HTML, CSS og JavaScript» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Utvikling av Electron-skrivebordsapper-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Utvikling av Electron-skrivebordsapper inneholder totalt 4 leksjoner.

Hva lærer jeg i «Integrere HTML, CSS og JavaScript»?

Forstå hvordan standard webteknologier utgjør grunnlaget for brukergrensesnittet i Electron, slik at De kan bruke den eksisterende kompetansen Deres innen webutvikling. Du øver på Utvikling av Electron-skrivebordsapper med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Utvikling av Electron-skrivebordsapper?

Ingen tidligere erfaring er nødvendig. Utvikling av Electron-skrivebordsapper på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Integrere HTML, CSS og JavaScript»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Utvikling av Electron-skrivebordsapper-leksjonen?

Ja. Alle Utvikling av Electron-skrivebordsapper-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Utvikling av Electron-skrivebordsapper