![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
ざっくりいうと…
JavaScriptから「Pythonなどのプログラム」を実行できるしくみです．
JavaScriptとプログラム間で，値の受け渡しもできます．
（研究室のサーバで動かすときは，ちょっと手こずるので，
注意してください．）
HTMLで2つの値を入力してもらい，JavaScriptでそれらをプログラムに送り，
プログラム内でそれらの積を求めて，それを返す
HTMLとJavaScript，Pythonの例です．
/index.html
<!DOCTYPE html>
<html lang = 'ja'>
<head>
<meta charset = 'UTF-8'>
</head>
<body>
<input id = "input1" type = "text">ｘ<input id = "input2" type = "text">＝
<span id = "result"></span>
<br>
<input type = 'button' value = 'EXECUTE' onClick = 'execute()'>
<script type = 'text/javascript' src = 'main.js'></script>
</body>
</html>
/main.js
async function execute(l, r) {
const url = "./cgi-bin/program.py";
// プログラムの相対パス
//（プログラムは「/cgi-bin」下にいれるのが定石です）
const left = document.getElementById("input1").value;
const right = document.getElementById("input2").value;
// 入力された値を読みとります
const data = {
"left": left,
"right": right,
};
// プログラムに送りたい値を，連想配列で書きます
const request = {
"method": "POST",
"headers": {"Content-Type": "application/json", "charset":"utf-8"},
"body": JSON.stringify(data),
};
const responce = await fetch(url, request);
// ここでプログラムを実行させます
//「responce」には，プログラムからやってきたデータなどが入ります
const receivedData = await responce.json();
// プログラムからやってきたデータを，使いやすいように連想配列に変換します
const html = receivedData["result"];
// あとはふつうの連想配列とおんなじように使えます
document.getElementById("result").innerHTML = html
// HTMLに反映します
};
/cgi-bin/program.py
#!C:\Users\ユーザ名\AppData\Local\Programs\Python\Python38\python.exe
# coding: utf-8
# 1行目で，「#!」に続けて，Pythonのインタプリタを絶対パスで指定します
import sys
import io
import json
sys.stdin = io.TextIOWrapper(sys.stdin.buffer, encoding = "utf-8")
sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding = "utf-8")
# 日本語（2バイト文字）をふくむデータを送受信するときに
# 文字化けしないようにするためのおまじない
received_data = json.loads(sys.stdin.readline())
# 「received_data」に，JavaScriptからやってきたデータが，辞書形式で入ります
left = received_data["left"]
right = received_data["right"]
# 個々の値を使うときは，こういうふうにします
result = left + right
send_data = {
"result": result
}
# JavaScriptに送りたいデータを，辞書形式で書きます
print("Content-type: text/html; charset=utf-8\r\n")
print(json.dumps(send_data))
# JavaScriptにデータを送ります
exit()
HTML，CSS，JavaScriptなど
/var/www/html/
プログラム
/var/www/cgi-bin/
（プログラムを「/var/www/html/」下（「/var/www/html/.../cgi-bin/」など）においても
動かないので注意！）
/usr/local/pyenv/versions/3.8.5/bin/python3.8
（プログラムの1行目には，これを指定します．）
