PricingLoginStart free
Pembangunan Aplikasi Desktop Electron · Pelajaran

Mengintegrasikan HTML, CSS, JavaScript

Fahami cara teknologi web standard membentuk asas UI Electron, yang membolehkan anda menggunakan kepakaran pembangunan web sedia ada.

Pelajaran 1 daripada 411 langkah

Mengintegrasikan HTML, CSS, JavaScript ialah pelajaran Pembangunan Aplikasi Desktop Electron percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pembangunan Aplikasi Desktop Electron, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Aplikasi Desktop Electron merangkumi sejumlah 4 pelajaran.

UI Web dengan HTML, CSS, JS

Selamat datang! Dalam Electron, anda membina antara muka aplikasi desktop menggunakan teknologi yang sama seperti untuk laman web: HTML, CSS dan JavaScript.

Ini bermakna kemahiran pembangunan web sedia ada anda boleh digunakan secara langsung. Mari lihat caranya!

Kenali Proses Renderer

Aplikasi Electron mempunyai Proses Utama dan satu atau lebih Proses Renderer.

  • Proses Utama mengendalikan interaksi dengan OS asli.
  • Proses Renderer pada asasnya ialah tika pelayar web Chromium. Di sinilah HTML, CSS dan JavaScript anda berjalan untuk membentuk antara muka pengguna aplikasi.

Anggap setiap tetingkap Electron sebagai proses renderer tersendiri.

HTML untuk Struktur & Kandungan

HTML (HyperText Markup Language) ialah tulang belakang mana-mana laman web, termasuk UI aplikasi Electron anda.

HTML mentakrifkan struktur dan kandungan:

  • Tajuk (<h1>, <h2>)
  • Perenggan (<p>)
  • Butang (<button>)

Ia umpama pelan tindakan untuk susun atur aplikasi anda.

Memaparkan Kandungan HTML

proses utama Electron memuatkan fail HTML ke dalam proses renderer (tetingkap baharu). Fail HTML ini menjadi paparan awal aplikasi anda.

Begini cara `main.js` memuatkan fail `index.html` yang ringkas:

`index.html` mungkin mengandungi:<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 untuk Menggayakan UI Anda

CSS (Cascading Style Sheets) digunakan untuk mengawal persembahan kandungan HTML anda. CSS menentukan rupa aplikasi anda.

Dengan CSS, anda boleh menentukan:

  • Warna dan latar belakang
  • Fon dan saiz teks
  • Susun atur (jidar, pelapik dan peletakan)

CSS mengubah pelan tindakan HTML anda menjadi antara muka yang menarik secara visual.

Memautkan & Menggunakan Gaya

Anda memautkan fail CSS kepada HTML menggunakan tag <link> dalam bahagian <head> pada `index.html` anda.

Contohnya, untuk menggayakan elemen `h1` terdahulu:

`index.html` anda akan mengandungi:<link rel="stylesheet" href="style.css">

Dan `style.css` boleh mengandungi: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 untuk Interaktiviti

JavaScript (JS) menambahkan tingkah laku dinamik dan interaktiviti pada UI aplikasi Electron anda.

JavaScript membolehkan anda:

  • Memberi respons kepada tindakan pengguna (klik dan penekanan kekunci)
  • Memanipulasi kandungan HTML dan gaya CSS
  • Mendapatkan data daripada API

JS mengubah halaman statik menjadi aplikasi dinamik yang responsif.

Melaksanakan Logik UI dengan JS

Anda boleh membenamkan JavaScript terus dalam HTML menggunakan tag <script> atau memautkan fail .js luaran.

Mari tambahkan butang dan jadikannya memaparkan amaran apabila diklik:

`index.html` anda akan mengandungi:<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, JS: Susunan Teknologi Bersepadu

HTML, CSS dan JavaScript bersama-sama membentuk susunan teknologi yang berkuasa dan biasa digunakan untuk membina antara muka pengguna Electron.

  • HTML menyediakan kandungan dan struktur.
  • CSS mentakrifkan persembahan visual.
  • JavaScript menambahkan interaktiviti dan tingkah laku dinamik.

Ini membolehkan pembangun web menggunakan pengetahuan sedia ada mereka untuk mencipta aplikasi desktop yang kukuh.

Peranan Teknologi Web

Manakah antara pernyataan berikut menerangkan peranan HTML, CSS dan JavaScript dengan betul dalam proses renderer Electron?

Jawab dalam pelajaran interaktif

Imbas Kembali: Asas UI Web

Hari ini, kita mempelajari bahawa Electron menggunakan teknologi web yang biasa—HTML, CSS dan JavaScript—untuk membina antara muka pengguna aplikasi desktop.

  • proses renderer ialah tempat teknologi web ini berjalan.
  • HTML menyusun kandungan.
  • CSS menggayakan penampilan.
  • JavaScript menambahkan tingkah laku dinamik.

Kini anda memahami blok binaan asas UI Electron. Seterusnya, kita akan meneroka cara mengintegrasikan rangka kerja frontend yang popular.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
12
Pelajaran
47
Mula belajar secara percumaLihat kursus penuh

Soalan Lazim

Adakah pelajaran “Mengintegrasikan HTML, CSS, JavaScript” percuma?

Ya — teks penuh “Mengintegrasikan HTML, CSS, JavaScript” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Pembangunan Aplikasi Desktop Electron, tingkat taraf kepada CoddyKit PRO. Kursus Pembangunan Aplikasi Desktop Electron merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Mengintegrasikan HTML, CSS, JavaScript”?

Fahami cara teknologi web standard membentuk asas UI Electron, yang membolehkan anda menggunakan kepakaran pembangunan web sedia ada. Anda berlatih Pembangunan Aplikasi Desktop Electron menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pembangunan Aplikasi Desktop Electron?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Aplikasi Desktop Electron di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Mengintegrasikan HTML, CSS, JavaScript” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pembangunan Aplikasi Desktop Electron ini?

Ya. Setiap pelajaran Pembangunan Aplikasi Desktop Electron menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Mengintegrasikan HTML, CSS, JavaScript
  2. Menggunakan Rangka Kerja Frontend
  3. Reka Bentuk Desktop Responsif
  4. Tema dan Sokongan Mod Gelap
← Kembali ke Pembangunan Aplikasi Desktop Electron