「情報Ⅰ」に向けたプログラミング研修会 ～文科省教員研修用教材(JavaScript版)のポイントを踏まえたプログラミング入門～

上記研修のサポートページです。

スライド資料

本日のメインのスライド資料をダウンロード

ソースコード

桁あふれ

JavaScript①

<script>
    x = 1.7976931348623157e+308;
    document.writeln(x+"<br>");
    x = 1.797693134862315799999e+308;
    document.writeln(x+"<br>");
    x = 1.8e+308;
    document.writeln(x+"<br>");
</script>

JavaScript②

<script>
    x = 28-27;
    document.write(x+"<br>");
    y = 0.28-0.27;
   document.write(y+"<br>")
</script>

複利計算

<script>
    yokin = 100000;
    riritsu = 0.05;
    for(i = 0;i < 10;i++) {
        risoku = yokin*riritsu;
        yokin = yokin+risoku
        document.write(i+1," 年目:",yokin,"<br>");
    }
</script>

複利計算のグラフ表示

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js">
</script>

<body onload="plot()">
    <div id="myDiv"></div>
</body>
</html>

JavaScript

<script>
function plot() {
   var riritsu = 0.05;
   var yokin = [100000];
   for (var i = 0; i < 10; i++) {
       var risoku = (yokin[i] * riritsu);
       yokin.push(yokin[i] + risoku);
   }
   var trace1 = {
       y: yokin,
       mode: 'lines+markers',
       type: 'scatter'
   };
   var layout = {
       title:"FUKURI KEISAN",
       xaxis: {title:"Year"},
       yaxis: {title:"Yokin[YEN]"}
   }
   var data = [trace1];
   Plotly.newPlot('myDiv', data, layout);
}
</script>

WebAPI

JavaScript

<script>
    var url = 'https://api.anko.education/zipcode?zipcode=100-0013';
        fetch(url)
            .then(function(response) {
                return response.json();
            })
            .then(function(address) {
                document.write(address.pref + address.city + address.area);
            });
</script>

その他