0Pricing
WebAssembly (WASM) for High Performance Apps · درس

استدعاء دوال JavaScript من C/C++

اربط الفجوة في الاتجاه الآخر: استدعِ JavaScript من كود C/C++ WASM المترجم باستخدام أدوات التفاعل البيني في Emscripten.

استدعاء دوال JavaScript من C/C++ درس مجاني في WebAssembly (WASM) for High Performance Apps على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في WebAssembly (WASM) for High Performance Apps، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة WebAssembly (WASM) for High Performance Apps 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

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.

الأسئلة الشائعة

هل درس «استدعاء دوال JavaScript من C/C++» مجاني؟

نعم — نص درس «استدعاء دوال JavaScript من C/C++» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة WebAssembly (WASM) for High Performance Apps، انتقل إلى CoddyKit PRO. تتضمن دورة WebAssembly (WASM) for High Performance Apps 4 دروس في المجموع.

ماذا ستتعلم في «استدعاء دوال JavaScript من C/C++»؟

اربط الفجوة في الاتجاه الآخر: استدعِ JavaScript من كود C/C++ WASM المترجم باستخدام أدوات التفاعل البيني في Emscripten. تتمرن على WebAssembly (WASM) for High Performance Apps مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ WebAssembly (WASM) for High Performance Apps؟

لا تُشترط خبرة سابقة. WebAssembly (WASM) for High Performance Apps على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «استدعاء دوال JavaScript من C/C++»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس WebAssembly (WASM) for High Performance Apps هذا؟

نعم. كل درس في WebAssembly (WASM) for High Performance Apps يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. ترجمة C/C++ إلى WASM باستخدام Emscripten
  2. تحميل WASM وتشغيله في JavaScript
  3. تبادل البيانات الأساسي: الأنواع البدائية
  4. استدعاء دوال JavaScript من C/C++
← العودة إلى WebAssembly (WASM) for High Performance Apps