One common task for Internet of Things (IoT) applications is for a page to send information to a “thing” on the internet. Whether it’s a web-controlled robot, a remote-controlled alarm system, or whatever else you can imagine, the principle is pretty much the same: the JavaScript code has to be able to accept an input, and send information to the Internet thing about the input it received.
Before sending info to your Activity Board's Propeller microcontroller through the Wi-Fi module, let’s start with using JavaScript to change text in a web page.
<html> <button onclick = "changeText()">Change Text</button> <p id = "myText">Click button to change this text.</p> <script> function changeText() { document.getElementById("myText").innerHTML = "Hey, look, the text changed!!!"; } </script> </html>
In this example, the paragraph <p> tag was expanded to <p id = “myText”>. With this identifier, the JavaScript can modify this paragraph element using document.getElementById(“myText”).innerHTML = “Hey, look, the text changed!!!”;
In JavaScript, document is an example of an object. Objects have methods, which are actions that can be performed on their data, like getElementById(“myText”), which finds the element with the myText ID. Objects also have properties, and innerHTML is an example of one of the document object’s properties. By setting that innerHTML equal to “Hey, look, the text has changed!!!”, it replaces the existing innerHTML - Click button to change this text.”
We’ve given HTML button and paragraph elements IDs so that JavaScript can access and modify them. In this example, JavaScript uses a text input’s ID to get information, adds some text to it, and then displays that text in the web page.
<html> <p>Type something, then click Enter: </p> <input type = "text" id = "textField"> <button onclick = "changeText()">Enter</button> <p id = "myText">Waiting...</p> <script> function changeText() { var x = document.getElementById("textField").value; document.getElementById("myText").innerHTML = "You typed: " + x; } </script> </html>
This creates the text input and gives it an ID <input type = "text" id = "textField">. The button and paragraph also have IDs: <button onclick = "changeText()">Enter</button> and <p id = "myText">Waiting...</p>.
Inside the changeText function, var x = document.getElementById("textField").value declares a variable named x that receives the value contained in the text input. Next, document.getElementById("myText").innerHTML = "You typed: " + x; adds “You typed: “ to whatever you typed in the text input and puts it in the paragraph with the myText ID.
This application of client server communication through JavaScript is called AJAX, and there’s some great tutorials on it too:
Links
[1] http://www.w3schools.com/ajax/default.asp
[2] http://www.tutorialspoint.com/ajax/index.htm