teachers, students, everyone
Tools | Blog | Account | Learn
Login Status

Graphical Javascript for Beginners
Getting started with Javascript the easy way
Feb 22, 2017

In this tutorial I'll show you how to get started with Javascript and the HTML 5 Canvas for displaying data graphically. We'll start by examining the bare minimum you need to get up and running and then we'll add some simple graphics and animation.

Step 1: Download Brackets: We use Javascript within HTML files. To edit these files I recommend Brackets. Brackets is an open source HTML editor that is lightweight and easy to use. You can download it here (it's free!) http://brackets.io/

Step 2: SAVE FILE: Create a new file in Brackets. Go to FILE, NEW. This create a file, but you need to give it a proper name and location. This is important: go to File, Save As and name the file myfile.html and it's very important that you save it either to your desktop or in documents - anywhere you will remember how to access later. DO NOT, save it to the default location that Brackets give you. This is a bad idea - your code might not run properly if you do.

Step 3: Add Some HTML. HTML is a tag based language. What this means is that everything is contained within a series of tags. And for every tag you create you need to create an end tag. A nice feature of brackets is that it does this for you. Give it a try. All tags are contained within less then and greater then signs. Thus, go ahead and type "<html>", You'll notice that brackets created the end tag "</html>" It looks the same but has a "/" after the less then sign. Create some space between the html starter and ending tag by pressing the enter key. Next, add a <head> tag, then <title> tag, then a <body> tag. Lastly, in the body tage add a <div> tag with an id of "starter"

Your code should look like this... click here.

The <header> tag is for metadata such as search keywords and such. We placed the <title> tag here. That is what is displayed in the tab of your browser. It's your name for the page.
The <body> tag is where the content of your page should reside.
We placed a simple <div> tag here with an "id" in the body. Right now the" id" is not really doing anything, but it is used to identify specific <divs> and we will refer to it later.

Step 4: Run the Code: Click on the lightning bolt at the right side of the brackets page (see below)


This is the live preview button and once you click it your default web browser should display your page. It should look like the image below:


Congrats, you just launched your first web page. It's not much to look at, but we'll work to make it more dynamic.

We can start by adding a button. Place these just after the openning body tags.

STEP 5: Button

<input type="submit" value="Submit" onClick="changeText()">

STEP 6: Script Tag - Before the closing body tag add some Script tags and a function called callData.


function changeText(){

 console.log("Hello There");



I recommend you use Google Chrome. Open up the Developer Console (View --> Developer --> Javascript Console). You'll notice now when you run the code and click the submit button that "Hello There" appears in the console. The console is a great spot for testing out code and making sure everything is working OK.

STEP 6: Text Field - Now let's add a text field and some code to display text from textField to the screen

<input type="text" id="myTextField">

  var myVar = document.getElementById("myTextField").value;

document.getElementById("myText").innerHTML = myVar 

Now, when you save and run the code you should be able to click the submit button and the text in the "myText" div tag should change to whatever you typed in the text field.

VALUE vs. innerHTML

Value is what is in a HTML form. innerHTML is the contents of a div or other tag.

PART TWO: Form Validation

Use the "==" sign in an if statement is test if someone has filled in the text field.

myText.length = size of the string

isNaN() = test to see if variable is not a number

indexOf() = test to see if a certain character exist in a string

PART THREE: Guessing Game

Let's create a Guessing Game! This will be a simple game. The user will put a number between 1 and 10 into the text field in attempts to guess the number generated by our code.

Add the following to the top of the changeText method:

var randomNum = Math.floor((Math.random() * 10) + 1);

this line generates a random number between 1 and 10 and saves it to the randomNum variable.

The myVar variable should be converted to an integer (by default it is a String). To do so, aded the follow line (after the "var myVar" line)

var myInt = parseInt(myVar);

Next we'll compare this number to the random number and display the result to screen

We use "==" or double equal signs to compare and an if statement to produce two different results

For example:

if(myInt == randomNum){

  document.getElementById("myText").innerHTML = "You guessed right!";

} else {

document.getElementById("myText").innerHTML ="Sorry, try again!";



PART FOUR: Adding Styles

Background color and font color

style="background-color: lightblue;color:blue;font-size:46px;"

background-image: url(http://site1.com/images/background.jpg);

inline vs css header vs external file (javascript external file)

inline example is what we did above.

CSS header is when you class the css code in the head of the HTML file like such:

#top {     
background-color: #ccc;
padding: 20px

.intro {
color: red;
font-weight: bold;

These would be place in between < style > tags.

Then you would call them with their class or id names inside tags within the body of the HTML file.

for example:

<p  class="intro" >Hello, World</p>

External file: you would place following in head tag of HTML page
 <link rel = "stylesheet"    type = "text/css"    href = "myStyle.css" />

For Javascript: <script type="text/javascript" src="myFile.js"></script>

CSS class vs id

The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.

link to www consortium website: https://www.w3schools.com

iFrames and LMS formatting

When using CSS tags use span tag

<iframe src="https://learnedu.us/learn/tuts/gravity.php" width="400" height="640"></iframe>


Next we'll add some graphics to the screen and create some animation, click here>>.



No comments posted


Past Posts

Dropbox Public Folder Alternative
Jun 4, 2017

Getting Started with NodeJS
May 1, 2017

Scratch Intro: Racing Game
Jan 15, 2017

Five Best Educational Tools For Teachers
Feb 3, 2017

Coding Gravity
Feb 22, 2017

Drones in Eduction
March 2, 2017

Javascript Intro
April 1, 2017

iPhone Streaming Audio App
April 15, 2017

Installing MySQL
May 15, 2017




Thank You!