Recent Comments

Javascript

Javascript is a programming language that is used to bring websites to life.  You see it in action every time you visit a website that has any interaction. Learning Javascript is quick, easy and fun because you already have all the tools needed on your computer and you see the results instantly.  Try the simple step-by-step example below and you will be on your way!

Download software: None needed

Cost: Free

Instructions to setup software: None needed

Hardware requirements: PC, Mac, Robotic, Mobile device

Operating systems supported: Win, Mac, Linux

Difficulty level: 1 out of 5


TRY IT!

1. Create a folder on your hard drive – call it “JS Demo”

2. Copy this Javascript code:

// JavaScript Document
// Note: lines that start with two backslashes are comments - not code!

var bePrepared = function () {
       // = = = = = = = declare all the variables = = = = = = = = 
       var tempF, tempC, myActionText, newText;
       //get the temp (F) from the HTML page
       tempF = document.getElementById('MyInputTemp').value;

       // = = = = = = = convert the temp to Celsius (with only one decimal place)
       tempC = (5 / 9 * (tempF - 32)).toFixed(1);

      // = = = = = = = evaluate the temp (three categories) = = = = = = =  
      if (tempF < 60) {
            myActionText = " Take long-johns!";
        }
      if ((tempF >= 60) && (tempC < 75)) {
                myActionText = " Have Fun!";
            }
      if (tempF >= 75) {
                myActionText = " Take Sunscreen!";
            }

      // = = = = = = = build a complete sentence = = = = = = =  
      newText = "If the temperature is " + tempF + " &deg;F (" + tempC + " &deg;C): " + myActionText;
      //push the sentence back to the HTML page (using the ID of the markup element: 'myAnswer')
      document.getElementById('myAnswer').innerHTML = newText;
    };

And paste into your favorite text editor. Windows notepad works fine.

3. Save the File as “JS-Example.js” in the new folder you created in step 1.

4. Now copy this HTML code:

<!DOCTYPE html>

<html>
<head>
  <title>Example Javascript Program for Boy Scout Merit Badge</title>
  <script src='JS-Example.js' type='text/javascript'></script>
</head>

<body>
	
	<h1>Javascript Programming Example</h1>
 
        <h2>Enter Temperature (&deg;F):
            <input type="text" id="MyInputTemp"/>
            <input type="button" value="Go!" onclick="bePrepared();"/>
        </h2>
        <h3 id="myAnswer"></h3>

</body>
</html>

And paste into your favorite text editor. Windows notepad works fine.

5. Save this HTML code in the same folder and call it “JS-HTML.htm”

6. Double click on the JS-HTML file to launch a browser. Enter a temperature and click the GO Button to see the result. Try several different temperatures.


ABOUT THE PROGRAM – A WALK THROUGH

1. The HTML file defines the text and formatting information for a simple web page. You can change anything you want to see how it affects the formatting of the page. This isn’t really programming, but it is fun to play with. It:

a. Creates a title for the website
b. Tells the HTML code to use Javascript and where to find the code
c. Formats the displayed text
d. Specifies a text entry box with ID = “MyInputTemp” (Javascript will need this)
e. Specifes a button labled “Go!”
f. When the mouse button is pressed, runs the javascript bePrepared() function
g. displays the string in “myAnswer” which is created in the javascript program.

2. The Javascript file has a single function called “bePrepared().” It is run anytime the GO button is clicked (look at the “onclick” method for the “input” = “Button” tag in the HTML file to see the function call.)

3. The “bePrepared()” function

a. Obtains the value entered in the “Input”-“Text” tag by using it’s ID: “MyInputTemp”
b. The value is converted to Celcius (with a single decimal place).
c. The Celsius value is evaluated with a seris of IF Statements and a suggested action phrase is assigned to the variable: “myActionText”
d. A sentence is created by combining or “concatenating” some static text along with the temperature values (deg F and Deg C) and the action phrase.
e. The new phrase is inserted onto the last line of theHTML page by using the ID of the tag on that line: “myAnswer”


TRY THIS

1. Change the temperatures used in the decisions – change the lower temperature from 60 to 30 degrees, for example. Make sure you change it in two places! Save the file and refresh the browser (or restart the web page), and enter new numbers – did the answers change at the new temperature?

2. Create a new temperature range from 30 to 60 degrees and have it display – “Bring hat and gloves!”

3. Change the wording of the phrases.

4. Add another text input – ask for the wind speed, for example.

5. Add some conditional statements that evaluate the wind chill factor.

6. Add some text to display the wind chill result.


LEARN MORE

W3schools.com – A well organized tutorial with a lot of working examples and source code

Webmonkey – A five part Javascript tutorial


RESOURCES, TIPS, TRICKS AND HINTS

1. Google Chrome has a neat feature.

— Install Google Chrome if you don’t have it already.

— Open the above JS-HTML example in Google Chrome (Right Click on the JS-HTML file you created above and select “Open With ..” and choose Chrome)

— Click on settings >> Tools >> Javascript Console

This opens a console window that displays error messages (and a bunch of other tools) to help you debug your code.

This console is very helpful when debugging javascript errors. Most browsers have plugins that do similar things.

2. Notepad++ is a great free text editor designed specifically for programmers. Check it out here.

10 Comments on Javascript

  1. Ive done this kind of this stuff before, but i had forgotten it. Now I remember.

  2. I don’t understand what to do to make it work!

  3. hotsaucekid1234 // December 30, 2014 at 2:42 am // Reply

    cool stuff

  4. hotsaucekid1234 // December 30, 2014 at 2:42 am // Reply

    Javascript is pretty fun to play with

  5. Pretty cool, but a little complicated at the beginning!

  6. Dosen’t work, lol

  7. Spicymexican46 // June 6, 2014 at 1:06 pm // Reply

    Really fun to mess around with and pretty cool!!!!

Leave a Comment

Please do not use your real name.