In lessons, we control obniz by using HTML and javasript.
This lesson shows you how to do this.
HTML is just a text
HTML is a document format for browser.
It is written with attributions like size of text, location of text, and where to jump when something is clicked.
For example, by opening the HTML below, you can see "Hello" on browser.
You can do this on the program page on our website, or create a text file, put HTML into it and open it on browser.
<!-- HTML Example -->
<html>
<body>
Hello
</body>
</html>
As you can see, it is enclosed with <html>and</html>, which means "anything between these are HTML".
In HTML, an area enclosed by <> is considered one block.
Browser recognizes this and decides, "Ah, so this is HTML. OK, I will display it".
The HTML above shows a minimal composition to display letters.
What is actually shown on browser is anything enclosed by body.
The area enclosed by body gets displayed on screen as it is.
Attribution
HTML has various attributions. For instance, surrounding texts by <strong> will turn them into bold texts.obniz idTest Open
<!-- HTML Example -->
<html>
<body>
<strong>Hello</strong>
</body>
</html>
You can specify more attributions by writing more commands. For example, you can change the text color by supplying "style".
<!-- HTML Example -->
<html>
<body>
<strong style="color:red">Hello</strong>
</body>
</html>
Besides texts, you can also display images by using <img>.
Let's try to show https://obniz.com/images/obnizfront.jpgobniz idTest Open
<!-- HTML Example -->
<html>
<body>
<strong style="color:red">Hello</strong>
<img src="https://obniz.com/images/obnizfront.jpg">
</body>
</html>
This suffices to display an image. Can you see the image?
Although <img> is not enclosed by </img>, some attributions do not require enclosure.
All websites are written in HTML like this.
You can design websites freely, including the size, color and location of texts, as well as the size and location of images.
JavaScript
Additionally, HTML can contain a program called "JavaScript".
A program is an area enclosed by <script>.obniz idTest Open
<!-- HTML Example -->
<html>
<body>
<strong style="color:red">Hello</strong>
<script>
console.log("This is JavaScript");
</script>
</body>
</html>
You can still see "Hello", but cannot see console.log("This is JavaScript"); on browser.
That is because the area between script is recognized as a program by browser.
It is thus not just texts but a program to be executed.
It is executed line by line from the top.
You might wonder what JavaScript can do.
First, JavaScript can control HTML.
Let's rewrite the HTML above, "Hello", from JavaScript.obniz idTest Open
<!-- HTML Example -->
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<strong>Hello</strong>
<script>
$("strong").text("What's up")
</script>
</body>
</html>
You can see "What's up" on browser.
But it still says "Hello" in between the body!
Take a closer look at the program.
There is a program written in JavaScript $("strong").text("What's up").
It means "rewrite texts enclosed by strong to "What's up"".
It is thus overwritten by JavaScript to show "What's up", even though it is originally written to display "Hello".
This process is not visible anyway and thus redundant. Just providing "What's up" in HTML would have been enough.
However, this is just an example to show what JavaScript can do.
JavaScript can be connected to the internet to read/write information. It can therefore retrieve news from news websites to display the information within HTML.
In this case, it would not be redundant.
That was just an introduction.
The previous example was on overwriting a HTML text. Let's now try the reverse - controlling JavaScript using HTML.obniz idTest Open
<!-- HTML Example -->
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<strong id="here">Please touch this text</strong>
<script>
$("#here").on("click", function(){
$("#here").text("Touched!")
})
</script>
</body>
</html>
You can see "Please touch this text" on browser.
By clicking or tapping on this text, it changes into "Touched!".
JavaScript would change the text only when someone taps/clicks the text.
Just like this, JavaScript can be controlled through HTML as well.
You may notice <strong id="here">.
In HTML, you can specify name of an area.
JavaScript also uses a name like$("#here"), which means an "area which has id=here".
So the program works in such a way that if you click id=here, id=here gets changed.
strong means bold, which you might use more than twice in a single HTML. So it sometimes becomes difficult to identify which lines you want to apply bold to.
That is when id becomes useful.
Incorporating external JavaScript
The HTML above has the below line added.
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
It is a JavaScript program called "jQuery", which is hosted on another website.
You can see its code by opening https://code.jquery.com/jquery-3.3.1.js.
It is a very long code.
By writing <script>, you can incorporate and execute this long code as though this code is written in that area.
There are various JavaScript libraries on the web, which can be incorporated and used right away as shown above. It is one of the benefits of using JavaScript.
obniz.js
obniz.js is also publicly available on the web. It lets you connect to and use obniz via the internet from your JavaScript easily.
You have already used it in LED lesson.
https://unpkg.com/obniz@3.3.0/obniz.js
This is obniz.js. obniz can be used just by incorporating this.
By using obniz.js, you can connect to obniz via the internet just by providing your obniz id.
Change OBNIZ_ID_HERE to your obniz id, then the connect function will be called.
If you do not know what "function" and "variable" are, please visit websites for beginners by searching "JavaScript beginner". There are tons of great websites available.
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {
// connected!
}
It is easy to update text once connection is established.
<!-- HTML Example -->
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://unpkg.com/obniz@3.31.0/obniz.js"></script>
</head>
<body>
<strong id="here">Not online</strong>
<script>
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {
$("#here").text("Online")
}
</script>
</body>
</html>
id=here can be updated to "Online" once connected to the specified obniz.
You already know how to handle a program that changes certain texts by clicking/tapping them.
So it should be easy to make LED turn on from HTML when certain texts are clicked/tapped.obniz idTest Open
<!-- HTML Example -->
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://unpkg.com/obniz@latest/obniz.js"></script>
</head>
<body>
<strong id="here">Touch to turn on LED</strong>
<script>
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {
var led = obniz.wired("LED", {anode:0, cathode:1});
$("#here").on("click", function(){
led.on();
});
}
</script>
</body>
</html>
By touching "Touch to turn on LED", wired LED will be turned on.
You have already done this in LED lesson.
If you connect a temperature sensor instead of LED, you could display the current temperature or draw a temperature graph by incorporating JavaScript chart library.