obniz Docs Guides Begin Block Program Step up to JavaScript

Step up to JavaScript

The block program is useful, but if you want to do something more advanced, You should use JavaScript to program it.
For example, you can use deeper programming for example external Dropbox, Twitter, etc.
This is a case where you are creating a game that draws 3D on the screen.
They can also be created using a combination of HTML and JavaScript.

The obniz block program is actually converted to HTML/javascript and executed.

So,If you modify the HTML/javascript created from the block program you created, you can continue to program more detailed movements in JavaScript.

Code-writing

For example, if you create this block program and look at its code

You can check the HTML and javascript by clicking on the file name in the upper left corner of the block program editor and pressing "View Code".
Click on the file name in the upper left corner of the block program editor and click on "View Code" to see the HTML and javascript.

If you do so,
You will see HTML like this.

The program is slightly different depending on the version of the block editor.

 <!-- HTML Example -->
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://obniz.com/js/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <script src="https://unpkg.com/obniz@3.3.0/obniz.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/obniz-parts-kits@0.15.2/iothome/index.js"></script>
    <script src="https://unpkg.com/obniz-parts-kits@0.15.2/ai/index.js"></script>
    <script src="https://unpkg.com/obniz-parts-kits@0.15.2/airobot/index.js"></script>
    <script src="https://unpkg.com/obniz-parts-kits@0.15.2/ui/index.js"></script>
    <script src="https://unpkg.com/obniz-parts-kits@0.15.2/airobot/opencv3.4/opencv.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.13.5"> </script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@0.2.2"> </script>
</head>
<body>
Block Program running...
<div id="OBNIZ_OUTPUT"></div><br/>

<script>
(async function(){
  var obniz, button, dcmotor;


  obniz = new Obniz('8506-3053');
  await obniz.connectWait();
  button = new ObnizUI.Button('text');
  dcmotor = obniz.wired("DCMotor",{"forward":0, "back":1});
  while (true) {
  await ObnizUI.Util.wait(0);
    if (button.isTouching()) {
      dcmotor.move(true);
    } else {
      dcmotor.stop();
    }
  }

})();
</script>
</body>
</html>