WebAssembly (WASM) for High Performance Apps · Pelajaran

Memanggil Fungsi JavaScript dari C/C++

Jembatani celah ke arah sebaliknya: panggil JavaScript dari kode WASM C/C++ yang telah dikompilasi menggunakan alat interoperabilitas Emscripten.

Pelajaran 4 dari 413 langkah

Memanggil Fungsi JavaScript dari C/C++ adalah pelajaran WebAssembly (WASM) for High Performance Apps gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar WebAssembly (WASM) for High Performance Apps, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus WebAssembly (WASM) for High Performance Apps mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Two-Way Interop

So far you have called C/C++ from JavaScript. But WASM code often needs to reach back into JS, to log, manipulate the DOM, or call browser APIs.

Emscripten provides several ways for your C/C++ code to call JavaScript.

Why Call JS at All?

WASM is sandboxed, it cannot touch the DOM, fetch, or timers directly. Anything outside pure computation must go through JavaScript.

  • Update the page
  • Read user input
  • Use Web APIs like localStorage

EM_JS: Inline JavaScript

The EM_JS macro lets you define a C function whose body is JavaScript. Call it like any C function.

#include <emscripten.h>

EM_JS(void, js_log, (int x), {
  console.log('Value from C: ' + x);
});

int main() { js_log(42); return 0; }

EM_ASM: Quick Inline Snippets

For one-off JS, EM_ASM runs a JavaScript snippet inline without declaring a separate function.

EM_ASM({
  document.title = 'Set from C++';
});

Passing Values to JS

EM_ASM_ variants let you pass arguments and receive return values.

int sum = EM_ASM_INT({
  return $0 + $1;
}, 10, 20);
// sum == 30

Passing Strings

Strings live in WASM memory. Use Emscripten helpers like UTF8ToString to read a C string pointer in JS.

EM_JS(void, show, (const char* msg), {
  console.log(UTF8ToString(msg));
});

JavaScript Library Files

For larger interop, put JS functions in a library file and link it with --js-library.

// mylib.js
mergeInto(LibraryManager.library, {
  beep: function() { console.log('beep'); }
});

Declaring Imported Functions in C

Functions from a JS library are declared extern in C so the compiler links them.

extern void beep();
int main() { beep(); return 0; }

Calling Exported C Functions Back

JS can hand a C function pointer back, useful for callbacks, via Module.cwrap or function pointers passed across the boundary.

const tick = Module.cwrap('tick', 'number', []);
setInterval(() => console.log(tick()), 1000);

Performance Note

Crossing the JS/WASM boundary has overhead. Keep hot loops inside WASM and call JS only at boundaries (I/O, DOM), not inside tight inner loops.

Best Practices Summary

For calling JS from C/C++:

  • Use EM_JS for named JS functions, EM_ASM for snippets
  • Convert pointers with UTF8ToString
  • Use a JS library file for substantial interop
  • Minimize boundary crossings in hot paths

Quick Check

Which Emscripten macro defines a C-callable function whose body is written in JavaScript?

Recap

You can now call JavaScript from your WASM code:

  • EM_JS and EM_ASM embed JS in C/C++
  • EM_ASM_INT passes args and returns values
  • JS library files handle larger interop
  • Keep boundary crossings out of hot loops

Two-way interop unlocks the full power of the browser from compiled code.

Gratis untuk memulai

Belajar WebAssembly (WASM) for High Performance Apps dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus
12
Pelajaran
48

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Memanggil Fungsi JavaScript dari C/C++” gratis?

Ya — teks lengkap “Memanggil Fungsi JavaScript dari C/C++” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus WebAssembly (WASM) for High Performance Apps, upgrade ke CoddyKit PRO. Kursus WebAssembly (WASM) for High Performance Apps mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Memanggil Fungsi JavaScript dari C/C++”?

Jembatani celah ke arah sebaliknya: panggil JavaScript dari kode WASM C/C++ yang telah dikompilasi menggunakan alat interoperabilitas Emscripten. Kamu berlatih WebAssembly (WASM) for High Performance Apps dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai WebAssembly (WASM) for High Performance Apps?

Tidak diperlukan pengalaman sebelumnya. WebAssembly (WASM) for High Performance Apps di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Memanggil Fungsi JavaScript dari C/C++” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran WebAssembly (WASM) for High Performance Apps ini?

Ya. Setiap pelajaran WebAssembly (WASM) for High Performance Apps menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Mengompilasi C/C++ ke WASM dengan Emscripten
  2. Memuat & Menjalankan WASM dalam JavaScript
  3. Pertukaran Data Dasar: Primitif
  4. Memanggil Fungsi JavaScript dari C/C++
← Kembali ke WebAssembly (WASM) for High Performance Apps