Zenn
Open9

HTMLとJavascript

Amane OtsukaAmane Otsuka

値の入力とその値に応じた処理を行う

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>世界よ！こんにちは</title>
    </head>
    <body>
        <script>
            function isEven(num) {
                if (num % 2 == 0) {
                    return true
                } else {
                    return false
                }
            }
            function inputNum() {
                var num = prompt("調べる数値は?", "0");
                var res = isEven(num);
                document.getElementById("msgout").innerHTML = "判定結果は" + res + "です。"
            }
        </script>
        <p>偶数判定します</p>
        <button type="button" onclick="inputNum()">数を入力する</button>
        <p id="msgout"></p>
    </body>
</html>
Amane OtsukaAmane Otsuka

ボタンを押すことで色が変わる

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>世界よ！こんにちは</title>
    </head>
    <body>
       <p id = "id1" style="color: gray;">ボタンを押すと色が変わる</p>
       <script>
           function chgColor(colorName) {
               document.getElementById("id1").style.color = colorName
           }
       </script>
       <button type="button" onclick="chgColor('red')">赤</button>
       <button type="button" onclick="chgColor('blue')">青</button>
       <button type="button" onclick="chgColor('green')">緑</button>
    </body>
</html>
Amane OtsukaAmane Otsuka

ボタンを押すことでpタグに含まれる文章を書き換えたり書き加えたりする。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>世界よ！こんにちは</title>
    </head>
    <body>
       <p id = "id1" style="color: gray;">ボタンを押すと色が変わる</p>
       <script>
           function chgColor(colorName) {
               document.getElementById("id1").style.color = colorName
           }
       </script>
       <button type="button" onclick="chgColor('red')">赤</button>
       <button type="button" onclick="chgColor('blue')">青</button>
       <button type="button" onclick="chgColor('green')">緑</button>
    </body>
</html>
Amane OtsukaAmane Otsuka

円の色が変えるボタンを作成

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>世界よ！こんにちは</title>
        <style>
            #circle{
            height: 300px;
            width: 300px;
            border-radius:50%;
            background-color:red;
            border: solid 1px black;
            position: absolute;
            left: 0;
            top: 0x;
        }
        </style>
        <script>
            function chgColor(colorName) {
                document.getElementById("circle").style.backgroundColor = colorName
            }
        </script>
    </head>
    <body>
        <h1>テスト</h1>
        <h2>色を変更する</h2>
        <button type="button" onclick="chgColor('red')">赤</button>
        <button type="button" onclick="chgColor('blue')">青</button>
        <button type="button" onclick="chgColor('green')">緑</button>
        <div id="circle"></div>
    </body>
</html>
Amane OtsukaAmane Otsuka

HTMLとCSSとJavascriptにファイルを分ける。

index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="circle.css">
        <script src="index.js"></script>
        <title>世界よ！こんにちは</title>
        <script>
        </script>
    </head>
    <body>
        <h1>テスト</h1>
        <h2>色を変更する</h2>
        <button type="button" onclick="chgColor('red')">赤</button>
        <button type="button" onclick="chgColor('blue')">青</button>
        <button type="button" onclick="chgColor('green')">緑</button>
        <div id="circle"></div>
    </body>
</html>
circle.css
#circle{
    height: 300px;
    width: 300px;
    border-radius:50%;
    background-color:red;
    border: solid 1px black;
    position: absolute;
    left: 0;
    top: 0x;
}
index.js
function chgColor(colorName) {
    document.getElementById("circle").style.backgroundColor = colorName
}
Amane OtsukaAmane Otsuka

Blockly でテキストを表示し、構文をアラートで表示する

index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Blockltことはじめ</title>
        <script src="../blockly_compressed.js"></script>
        <script src="../blocks_compressed.js"></script>
        <script src="../javascript_compressed.js"></script>
        <script src="../DefineBlocks.js"></script>
        <script src="../defineFunction.js"></script>
        <script src="../ja.js"></script>
    </head>
    <body>
        <h1>Blocklyをはじめよう</h1>
        <p>
            <button onclick="showCode()">Show JavaScript</button>
            <button onclick="runCode()">Run JavaScript</button>
        </p>
        <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
        <xml id="toolbox" style="display: none">
            <category name="Text">
                <block type="text"></block>
                <block type="text_length"></block>
                <block type="text_print"></block>
            </category>
          </xml>
          <script>
            var blocklyArea = document.getElementById('blocklyArea');
            var blocklyDiv = document.getElementById('blocklyDiv');
            var demoWorkspace = Blockly.inject(blocklyDiv,
                {toolbox: document.getElementById('toolbox')});
            var onresize = function(e) {
              // Compute the absolute coordinates and dimensions of blocklyArea.
              var element = blocklyArea;
              var x = 0;
              var y = 0;
              do {
                x += element.offsetLeft;
                y += element.offsetTop;
                element = element.offsetParent;
              } while (element);
              // Position blocklyDiv over blocklyArea.
              blocklyDiv.style.left = x + 'px';
              blocklyDiv.style.top = y + 'px';
              blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
              blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
              Blockly.svgResize(workspace);
            };
            window.addEventListener('resize', onresize, false);
            onresize();
            Blockly.svgResize(workspace);

            function runCode() {
      // Generate JavaScript code and run it.
      window.LoopTrap = 1000;
      Blockly.JavaScript.INFINITE_LOOP_TRAP =
          'if (--window.LoopTrap == 0) throw "Infinite loop.";\n';
      var code = Blockly.JavaScript.workspaceToCode(demoWorkspace);
      Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
      try {
        eval(code);
      } catch (e) {
        alert(e);
      }
    }

    function showCode() {
      // Generate JavaScript code and display it.
      Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
      var code = Blockly.JavaScript.workspaceToCode(demoWorkspace);
      alert(code);
    }

          </script>
    </body>
</html>
Amane OtsukaAmane Otsuka

geogebraファイルを埋め込む

<!DOCTYPE html>
<html>
    <head>
        <title>Single applet</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="navigation.js"></script>
    </head>
    <body>
        <div>
        <h1>Single applet</h1>
        <p>This is an example of an HTML file containing a GeoGebra applet.</p>
        <script type="text/javascript" src="https://www.geogebra.org/apps/deployggb.js"></script>

        <script type="text/javascript">

                var parameters = {
                        "width":600,
                        "height":600,
                        "prerelease":false,
                        "showToolBar":true,
                        "borderColor":null,
                        "showMenuBar":false,
                        "showAlgebraInput":false,
                        "customToolbar":"0 || 1",
                        "showResetIcon":true,
                        "enableLabelDrags":false,
                        "enableShiftDragZoom":true,
                        "enableRightClick":false,
                        "capturingThreshold":null,
                        "showToolBarHelp":true,
                        "errorDialogsActive":true,
                        "useBrowserForJS":false,
                        "ggbBase64":"UEsDBBQACAAIAPl5ZEMAAAAAAAAAAA=="};

                var applet = new GGBApplet(parameters, '5.0', 'applet_container');
              //  when used with Math Apps Bundle, uncomment this:
              //  applet.setHTML5Codebase('GeoGebra/HTML5/5.0/web/');

                window.onload = function() { applet.inject(); }
        </script>
        <div id="applet_container"></div>
        </div>
     </body>
</html>
Amane OtsukaAmane Otsuka

テキストフィールドからAPI叩いてオブジェクトを配置する

<!DOCTYPE html>
<html>

<head>
        <title>Single applet + API</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="navigation.js"></script>
</head>

<body>
<div>
        <h1>Single applet + API</h1>
        <p>This is an example of an HTML file containing a GeoGebra applet with buttons triggering the GeoGebra Javascript API.</p>

        <script type="text/javascript" src="https://cdn.geogebra.org/apps/deployggb.js"></script>
        <script type="text/javascript">

                var parameters = {"prerelease":false,"width":1600,"height":450,"showToolBar":false,"borderColor":null,"showMenuBar":false,"showAlgebraInput":false,
				"showResetIcon":true,"enableLabelDrags":false,"enableShiftDragZoom":true,"enableRightClick":false,"capturingThreshold":null,"showToolBarHelp":false,
				"errorDialogsActive":true,"useBrowserForJS":false,
				"filename":"../ggb/material-bnwdwts8.ggb"};

                var applet = new GGBApplet('5.0', parameters);
              
                //when used with Math Apps Bundle, uncomment this:
                //applet.setHTML5Codebase('GeoGebra/HTML5/5.0/webSimple/');

                window.onload = function() {
                        applet.inject('applet_container');
                        }
        </script>

        <div id="applet_container"></div>

        <form>
                <input value="Set point A invisible" onclick="ggbApplet.setVisible('A', false)" type="button">
                <input value="Set point A visible" onclick="ggbApplet.setVisible('A', true)" type="button">
				
        </form>
		<script type="text/javascript"> 
function evalInput(strInput) {
  ggbApplet.evalCommand(strInput);
  return false;
}
</script> 
<form action="" onsubmit="evalInput(inputField.value);inputField.value='';return false;"> 
Input field: <input type="text" name="inputField" size="30"> 
</form> 
</div>
</body>

</html>
Amane OtsukaAmane Otsuka

作成したgeogebraファイル(.ggb)をエンコードし、配置する。

<!DOCTYPE html>
<html>

<head>
        <title>Single applet + API</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<div>
        <script type="text/javascript" src="https://cdn.geogebra.org/apps/deployggb.js"></script>
        <script type="text/javascript">

                var parameters = {"prerelease":false,"width":1600,"height":450,"showToolBar":false,"borderColor":null,"showMenuBar":false,"showAlgebraInput":false,
				"showResetIcon":true,"enableLabelDrags":false,"enableShiftDragZoom":true,"enableRightClick":false,"capturingThreshold":null,"showToolBarHelp":false,
				"errorDialogsActive":true,"useBrowserForJS":false,
				"ggbBase64":"UEsDBBQACAgIAEkAOVIAAAAAAAAAAAAAAAAXAAAAZ2VvZ2VicmFfZGVmYXVsdHMyZC54bWztmk9z4yYUwM/dT8Fwag+xhWzZTibKTnZnOs1MNptpMp1esYRlGgyqQLGcT18EsiSvrTSWnbWT3RyCHuKP+L3HNDb5dU74NPo8J3gxCjLfjZBB0JTW15OxC5nH8KL1GPU37CB66Wh9L3Hgg8jZh/SkryiuLmDVUxSi6eVkbENLRVTFE5F8BFkTMs+gUe6k9DgpLaYLvOLJu6Gs+fA/e7FLGzBoE+o5bSwqZBHxyq2sblafyBX03UGzTIFTIbdRv8gUx9yAvrjcuIscoSAc9GpQtBq6EVWHq5KzYWarZkjImZLGF3smAQNnyNFzAXVgoEtHk90I5ZhJl9U1qY4ggCffKhh58jgJD3PK7P50MGXSkKshvp26MsqaXmPjf7J/ri5nYXZiIgPdAoFAdF467khUTFFCwrFTqg8cN0Y/dtDeqhAwk8i7MHwTqqCa4Wi1MezF04FOFC5STWnrAyF+PI/beIIPgGGnhIuNUmG+5lCTidAPpuqBFoVeSx51lKcGiu0aosFcMNypHhDPXTxdvZ+UK39FFakWo7Z871NYGmOlDy8pfS/YXR7swYEay/n2VicmEueG1sUEsBAhQAFAAICAgASQA5UnG55R6rLwAAljAAABYAAAAAAAAAAAAAAAAAnA4AAGdlb2dlYnJhX3RodW1ibmFpbC5wbmdQSwUGAAAAAAUABQBMAQAAiz4AAAAA"};

                var applet = new GGBApplet('5.0', parameters);
              
                //when used with Math Apps Bundle, uncomment this:
                //applet.setHTML5Codebase('GeoGebra/HTML5/5.0/webSimple/');

                window.onload = function() {
                        applet.inject('applet_container');
                        }
        </script>

        <div id="applet_container"></div>

        <form>
                <input value="Set point A invisible" onclick="ggbApplet.setVisible('A', false)" type="button">
                <input value="Set point A visible" onclick="ggbApplet.setVisible('A', true)" type="button">
				
        </form>
		<script type="text/javascript"> 
function evalInput(strInput) {
  ggbApplet.evalCommand(strInput);
  return false;
}
</script> 
<form action="" onsubmit="evalInput(inputField.value);inputField.value='';return false;"> 
Input field: <input type="text" name="inputField" size="30"> 
</form> 
</div>
</body>

</html>