Web / HTML / Javascript / IOT�Intro to Automation
Living beyond yourself.
By James Newton @ MassMind.org
This document copyright 2014, James Newton, for copying conditions see:�http://www.gnu.org/licenses/fdl-1.3-standalone.html
Overview
This presentation is divided into three sections, with more time spent on the earlier sections:
The class will focus on "old school" methods because they work everywhere; even in old browsers. When you become professional web techs, you should learn more up to date techniques.
Web Page Examples
Web pages answer questions for people. If you are the person who has to answer questions, then a web page can automate that work for you, and help people get answers even when you aren't available. That has value. Here are some examples:
"Are there any Open Source Industrial Robot Arms?" https://www.hdrobotic.com/ Answer: Dexter, by Haddington Dynamics
"Who invented the web?" Answer: Tim Berners-Lee.
"How can I learn about making web pages?" Answer: Join this class!
Imagine if everyone of those questions could only be answered by phone call during business hours, a trip to the library, or randomly bumping into the right person. The automation of answering questions is a world changing advance. What information do you want people to know? What questions do you need to answer?
Hyper Text Markup Language:
HTML was invented in 1989 by Tim Berners-Lee. The volume of data available at CERN, where Mr. Berners-Lee worked, was exceeding their ability to communicate it to others. He made the WWW and HTML to reduce the amount of time he spent answering emails and communicating to others. He automated himself.
Hyper Text Markup Language: HTML
HTML tells your computer's web browser how to display a document. The bulk of the document will be just the text or words or pictures that you actually see. But some text might be bolded or made a little bigger to grab your attention. Or italicized. Some text is presented in a list, with bullets or numbers. Some text is highlighted in a special way that makes the browser take you to another document when you click it; called a link, this is the fundamental advance of the world wide web. HTML is what tells the browser when there is something more than just text.
Just text. <something special> More text. <something else special>
To set the special stuff apart from the regular text, HTML uses "tags" which are made from a "<", a special word, and is closed with a ">". For example, to make the word "is" bold in the text "This is a test." you would write:
This <b>is</b> a test.
and it would show up as This is a test. Notice that there is an opening tag for bolding <b> and a closing tag </b> to stop the bolding.
HTML Tag Examples
If you understand the idea of tags, you won't have much trouble with HTML. Here are some examples (on the left) and how they appear (on the right)
This <i><b>is</b> a test</i>. | This is a test | Notice how the <b> (bold) tag is inside the <i> (for italic) tag which goes a little further. |
<h1>This is a heading</h1> | This is a heading | A level 1 heading. <h2> is level 2, or a sub heading. <h3> is under that, and so on. |
<a href="page2.html">this is a link</a> | If you click the text, you go to page2.html Notice the href="page2.html" is inside the opening tag with the "a" | |
<img src="picture.jpg" width="104" height="142"> | | This is how you insert a picture. The picture itself is in a separate file, picture.jpg. We don't have to set the dimensions but it helps the page load faster |
<p>Paragraph 1</p> <p>Paragraph 2</p> | Paragraph 1 Paragraph 2 | Note that the extra spaces before "2" don't show up and that the extra line between "Paragraph" and "1" does NOT start a new line.. |
HTML Documents
How do we give the browser the title? It's in a different part of the HTML, away from the main content, or body, of the document. The title is in the head, and both the head and body are in the HTML. Here is what a complete HTML document actually contains:
<html>
<head><title>Here is the title</title></head>
<body>
<h1>Here is the main content</h1>
</body>
</html>
Web pages have a "title" as well as content. If you open a web page, and look at the browser above the address, you will see it. Here's an example:
The "(1) Facebook" is the title. The "https://www.facebook.com" is the address, and the "facebook" and so on below that is the actual content.
HTML Local Files
Making an HTML file is as simple as making any other document, you just need an editor program for plain text files. Notepad, TextEdit*, gEdit or any number of other text editors will do. (not Word, Docs, Writer, those are document editors.) Assuming a Windows system, just click Start / Programs / Accessories / Notepad. Then type in something like this:
<html>
<head><title>Page 1</title></head>
<body>
<h1>Hello World!</h1>
</body>
</html>
And save it in My Documents as index.html (don't close the file)
Click on Start / My Documents, find the index file, and double click it. It should open in your browser and show Hello World! in big, bold, heading text. Congratulations, you wrote your first web page!
Actually do this now!
*On a Mac, use the Finder and enter TextEdit. In TextEdit, use the top level menu to select Format / Make Plain Text, then click Ok, and if asked, Overwrite, to confirm. Then select File / Save… and enter a name. Change the extension from .txt to .html and leave the encoding on UTF-8. When asked, confirm the use of the .html extension.
HTML hosted at GitHub.com
<html>
<head><title>Page 1</title></head>
<body>
<h1>Hello World!</h1>
</body>
</html>
5. Commit the file and, in a new tab, go to https://username.github.io�E.g. https://JamesNewton.github.io
�By the way, GitHub and Git are fantastic tools that you should learn
If you don't want to, or can not create an account, you can also do these exercises at:�glitch.com or jsfiddle.net
HTML Fun and Failure
With the index.html file you made before, change the content in the body to add all sorts of fun stuff. Bold things, italicize things, write paragraphs, add links... then use File / Save as... to make the files you linked to, and make links back to the first file. Play around, try things, ask questions, and most of all: MAKE MISTAKES. You MUST get it wrong before you can get it right, and the faster you get it wrong, the faster you learn to get it right. Some good web pages to find examples to try:
http://www.w3schools.com/html/html_basic.asp
http://sheldonbrown.com/web_sample1.html
http://www.quackit.com/html/examples/
http://www.htmldog.com/examples/
Once you are happy with your web pages, you can open an account with a real web hosting provider, and with that, you can put up a page that automatically answers other people's questions for you 24/7/365
HTML Error: <
The most common mistake is accidentally putting a < in a document when you actually wanted a <. Confused? Well, if you want a < and you put a < then the browser thinks you are starting a new tag. It goes looking for the > which is supposed to close the tag, and everything after the < gets eaten. So if you wanted to write:�
1 < 10 in the math I learned.
then you will see:
1
And wonder where the rest went.
Solution:
When you want <, use < instead.
1 <10 in the math I learned.
shows up as
1 < 10 in the math I learned.
HTML Error: �Unmatched Tags
Every opening tag needs a matching closing tag. E.g. Your opening <html> needs a closing </html> tag, and that tag must be at the end of the file. <p>is an exception, you don't have to end a paragraph.
And those tags have to match. You can't have <html> and <body> and then have </html> before </body>.
If things aren't rendering as expected, or parts are missing, check to make sure you have matching tags.
<html>
<head><title>Page Title</title></head>
<body>
<h1>Heading</h1>
<p><b>Bold <i>bold italic</i></b>
</body>
</html>
HTML Common Frustrations
Here are some things people generally have trouble with:
1. Spaces. HTML only "respects" or displays one of many spaces. <b>This that</b> shows up exactly like <b>This that</b>. Both will be displayed as This that. To add more space, use instead of the space or put the words in a table. <b>This that</b> is This that
2. Position. HTML isn't for drawings or charts or other forms of graphics. It's for text. It assumes the text will "flow" or move around the graphics as the display is re-sized. If you want "that word to stay right there!" then make that word part of a picture, and use the <img tag to insert the picture into the HTML. There are advanced methods for positioning HTML absolutely, but those are best used with an authoring package like Dreamweaver or Visual Web Developer.
3. Size. Image height and width are measured in pixels. Sadly, pixels can be just about any size. A 15" computer screen (diagonal measure) is about 15" wide. IF it is at 1920x1024, then each pixel is 15/1920=0.008" or 0.2mm. At 800x600, same screen, 0.020" or 0.5mm. Most web pages are made for 800x600, but limiting page size by absolute positioning is... stupid of questionable worth in some people's opinion.
HTML Tables
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.
Table Example
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
How the HTML code above looks in a browser:
row 1, cell 1 | row 1, cell 2 |
row 2, cell 2 | row 2, cell 2 |
HTML Alignment.
Sometimes you want something to be to the left or right of something else. HTML has a tag for that... or rather an attribute. Attributes are the other things inside a tag. In the <img tag, the src="picture.jpg" part is the attribute. Images and tables can also have an align tab which tells the browser to put them to the left, right, middle, top, or bottom. Left and right are the interesting ones. They actually change the way the other elements and text "flow" around the image or table. This is really useful in compensating for different screen sizes. Example
This text is flowing around the image. The
image is aligned left so the text flow around it on the right.
This text doesn't start until after the image, because it is aligned top.
<img src="massmind.gif" align="left"><p>This text is flowing around the image. The image is aligned left so the text flows around it on the right.
<img src="massmind.gif" align="top"><p>This text doesn't start until after the image, because it is aligned top.
HTML Forms
Web pages don't just send information out to the world, they can also collect information from people and send that back or use it to provide more detailed answers.
<html>
<body>
<form onSubmit="return false;">
Please enter your name:
<input type="text" name="input">
<input type="button" value="Enter"
onclick="this.form.output.value='Hi '+this.form.input.value;">
<input type="text" name="output">
</form>
</body>
</html>
We can see how that works on the actual page
Javascript: Introduction
"Javascript is a scripting language commonly implemented as part of a web browser in order to create enhanced user interfaces and dynamic websites."
Javascript makes web pages come to life. If you interact with a web page and something changes, giving you a result, that is probably happening because of Javascript, or at least Javascript in concert with a web server.
Javascript is invisible. Like the cooks at the restaurant, or the factory worker, you only see the results, you never see the Javascript... unless you look for it. Peeling back the curtain to see the little man operating the head of Oz is a great joy for some of us. If you like that idea, you will love Javascript.
Javascript lives in the HTML, it controls the HTML, pulling the strings to change what you see on the web page. It edits HTML, either by replacing it, or changing it's attributes. It can replace <b>hi</b> with <i>low</i> to make hi become low. Or it can take <img src="up.png"> and change the src of the img tag to down.png to load a different picture. We will focus on how Javascript works with forms.
Javascript: Hello world
In any programming language, the first program one usually writes is the simplest program able to put the text "Hello world!" on the screen. In Javascript, this might be:
<html>
<body>
<script>
document.write("Hello World!")
</script>
</body>
</html>
Can you guess what shows up on the screen when you load that page?
Javascript: Accessing Form
Javascript works nicely with form fields:
<html>�<body>�<form onSubmit="return false;">� Please enter your name:� <input type="text" name="input">� <input type="button" value="Enter" � onclick="this.form.output.value='Hi '+this.form.input.value;">� <input type="text" name="output">� </form>� </body>�</html>
See it work here. Simple, but it does something, and we can make it do more.
By the way, all the JavaScript examples from this class are on this web site:
https://jamesnewton.github.io/class/index.html
It's hosted (for free) by GitHub.
Javascript: Additional Forms
Now let's try to do something useful:
<html>�<body>�<form onSubmit="return false;">� <input type="text" name="input1"> +� <input type="text" name="input2">� <input type="button" value="Enter" � onclick="this.form.output.value =� this.form.input1.value + this.form.input2.value;">� <input type="text" name="output">� </form>� </body>�</html>
See it work and notice how it doesn't work correctly with numbers. This is because of the way Javascript interprets the value of the form fields. It thinks they are strings vs. numbers. To make it add numerically, change the 9th line to:
parseInt(this.form.input1.value) + parseInt(this.form.input2.value);">
And see that work better.
Javascript: Out of Formation
Javascript isn't limited to working with forms. It can directly change, add and edit HTML elements:
<html>� <head>� <title>Dynamic HTML with Javascript</title>� </head>� <body>� <span onClick="if ('<b>hi</b>'==this.innerHTML) this.innerHTML='<i>low</i>'; else this.innerHTML='<b>hi</b>';">
<b>hi</b>
</span>
</body>
</html>
This example (see it here) simply changes a bold "hi" into an italic "low", but it can do a lot more. Pretty much any HTML can be changed, so that means that pretty much anything can be animated… or automated.
Javascript: Can Be Fun
Here is a game made from a form and some Javascript. Play it, and then hit the "view-source" link to check out the code. It's a long program, but if you look at it for a while, you can figure out what it does. It also introduces two new ideas: Functions and Names.
Functions: If the script gets too long to fit nicely in an "onClick", you can just put a function name there, like ONCLICK="handleClick(this);" and then, in a <script> </script> block, put
function handleClick(thing) {
}
And then you can add as many lines of Javascript as you like between the {}'s. Instead of this, use thing, because this in the onClick, becomes thing in the function.
HTML Elements can have names and id's. You can have a bunch of onClick's that all call the same function, but have different name attributes and thing.name can tell them appart by thier names.
<INPUT TYPE="BUTTON" NAME="xy0_2" VALUE=" " ONCLICK="handleClick(this);">
And in the function, thing.name will be xy0_2
Javascript: More Examples
Here are some web pages that use Javascript to make things come alive:
- The Date and Time display from the Oxherders guide to the Way of Javascript. See? It moves! And the guide is a great way to learn Javascript.
- Drill and Tap calculator. For metal workers.
- Resistor finder. For electronics. These can become apps in a SmartPhone.
�- A simple loan calculator. The script here isn't difficult, but would require some study of programming in general before it could be fully understood.
- What angle will the sun shine on us at a certain place and time very complex.�
- A list of neat games written in Javascript (a.k.a HTML5) and how to write your own. This is top level programming, but there are Javascript game "engines" which do almost all the work for you. A good tutorial to get started is:�http://www.script-tutorials.com/html5-game-development-lesson-1/
IOT: Internet Of Things
There is a limit to what you can do on the internet. But HTML, Javascript, and computers can be connected to the real world.
IOT: SmartPhones
SmartPhones are a great example of the Internet Of Things. You can write programs in HTML5 (which is HTML and Javascript combined) that read the position and other sensors in the phone and turn the Flash LED on or off, speak messages, etc... ^
PhoneGap can make full apps for most SmartPhones using HTML and Javascript: The open source version is Cordova and Ionic is a good extension.��New ways to write apps with Javascript are popping up all the time. For example: AndriodScript
But you can make "apps" from standard HTML5 web pages with a manifest �http://techref.massmind.org/techref/language/html/HTML5webapps.htm
App Inventor is an interesting alternative to HTML5 that allows you to make a SmartPhone app with a very easy "drag and drop" visual block language:�http://appinventor.mit.edu/explore/
IOT:SmartPhones I/O
A great example is this app which turns your Android into a web cam:�https://play.google.com/store/apps/details?id=com.pas.webcam&hl=en
It can also be done with an iPhone:�http://www.makeuseof.com/tag/use-your-iphone-as-a-webcam-heres-how-ios/
The PAWS server app supports text to speech, play a sound, web cam, flash LED control, read temperature, motion, position, etc… And all of those functions can be accessed from Javascript running in your PC browser. So the phone becomes an extension of your web page.
A very simple cable, battery box, and a pair of RC hobby servos will allow you to move two items via your smartphone:�http://makezine.com/projects/make-34/smartphone-servo/�https://github.com/GlueMotor/GlueMotor
Robotics
JavaScript is being used in more and more unusual places. The Dexter OSH robot arm is programmed with JavaScript via it's DDE (Dexter Development Environment) software.
Using JavaScript gives DDE access to thousands of NPM libraries and makes it easy to add in all sorts of functionality. E.g. OpenCV.JS provides image processing.