Programming

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.

Write a comment about “Javascript”

Nickname:

Type your comment:

  • 1. Safety. Do the following:
      a. Show your counselor your current, up-to-date Cyber Chip.
      b. Discuss first aid and prevention for the types of injuries or illnesses that could occur during programming activities, including repetitive stress injuries and eyestrain.

    2. History. Do the following:
      a. Give a brief history of programming, including at least three milestones related to the advancement or development of programming.
      b. Describe the evolution of programming methods and how they have improved over time.

    3. General knowledge. Do the following:
      a. Create a list of 10 popular programming languages in use today and describe which industry or industries they are primarily used in and why.
      b. Describe three different programmed devices you rely on every day.

    4. Intellectual property. Do the following:
      a. Explain how software patents and copyrights protect a programmer.
      b. Describe the difference between licensing and owning software.
      c. Describe the differences between freeware, open source, and commercial software, and why it is important to respect the terms of use of each.

    5. Projects. Do the following:
      a. With your counselor’s approval, choose a sample program. Then, as a minimum, modify the code or add a function or subprogram to it. Debug and demonstrate the modified program to your counselor.
      b. With your counselor’s approval, choose a second programming language and development environment, different from those used for requirement 5a and in a different industry from 5a. Then write, debug, and demonstrate a functioning program to your counselor, using that language and environment.
      c. With your counselor’s approval, choose a third programming language and development environment, different from those used for requirements 5a and 5b and in a different industry from 5a or 5b. Then write, debug, and demonstrate a functioning program to your counselor, using that language and environment.
      d. Explain how the programs you wrote for requirements 5a, 5b, and 5c process inputs, how they make decisions based on those inputs, and how they provide outputs based on the decision making.

    6. Careers. Find out about three career opportunities in programming. Pick one and find out the education, training, and experience required. Discuss this with your counselor and explain why this career might be of interest to you.

  • Earning the Cyber Chip can help you learn how to stay safe while you are online and using social networks or the latest electronic gadgets.

    Topics include cell phone use, texting, blogging, gaming, cyberbullying, and identity theft. Find out more about the Cyber Chip at www.scouting.org/cyberchip.