今後講義でこのブログを使う予定なので、任意のJavaScriptコードを実行できるようにした。

<div>
    <input type="number" id="a">
    <span>+</span>
    <input type="number" id="b">
    <span>=</span>
    <span id="ans"></span>
    <br>
    <input type="button" value="calc" id="calc">
</div>

JavaScript

document.getElementById("calc").onclick = function(){
    let a = parseInt(document.getElementById("a").value,10);
    let b = parseInt(document.getElementById("b").value,10);
    document.getElementById("ans").innerHTML = a+b;
}

cdnからライブラリを読み込んだりも可能


コード
HTML

<canvas id="myChart"></canvas>

JavaScript

if(typeof(script) == "undefined"){
    let script = document.createElement('script');
    script.src = "https://cdn.jsdelivr.net/npm/chart.js"
    document.head.append(script);
    script.onload = function() {
        createChart();
    };
}else{
    createChart();
}

function createChart(){
    new Chart(document.getElementById('myChart'), {
        type: 'pie',
        data: {
            labels: ['A', 'B', 'C'],
            datasets: [{
                label: '割合',
                data: [20,50,30],
                backgroundColor: [
                    'rgb(255, 99, 132)',
                    'rgb(54, 162, 235)',
                    'rgb(255, 205, 86)'
                ],
                hoverOffset: 4
            }]
        },
    });
}