Code Central

Implementing Javascript

With the basic knowledge of HTML and CSS, it is now time to add in the language that allows users to interact with your website.

Learning Goals

  1. Adding Javascript to your website
    1. Embedding the <script></script> tag
  2. Event handlers with buttons
    1. Saying "Hello, World" with a button click
  3. Altering elements in your page
    1. Changing text using innerHTML
    2. Change an image source with a button click
  4. Using input fields
    1. Basic calculator
    2. Making a quick Mad Libs game
  5. Altering the CSS in your page
    1. onmouseover/onmouseout

Javascript In Your Website

Javascript is a powerful piece of the web development puzzle. Without it, many websites wouldn’t function. This isn’t the only language that adds functionality, but it is the most common in basic websites due to its simplicity and easy integration.

Adding <script> tags

Just like learning CSS in the previous web dev course, javascript has many ways of being used in a site

  1. Create a new project folder and call it something like "javascriptwebsite"
  2. Create a subfolder called "stylesheet".
  3. Create a file called "stylesheet.css" in that subfolder.
  4. Create the "index.html" file in the main folder (or root folder), and add the following code. 

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="stylesheet/stylesheet.css">
    <meta charset="utf-8">
    <title>Javascripting</title>
  </head>

  <script>
    alert("Hello, World!")
  </script>

  <body>
  </body>

</html>

The <script></script> tags allow us to use javascript in our website.
Here, we added an "alert()" function that gave us a popup message when we first load in our page.

Handling Events

alert()

Basic alerts are cool and all, but how does this add functionality at all? The first step is to see how the onclick property works. 


<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="stylesheet/stylesheet.css">
    <meta charset="utf-8">
    <title>Javascripting</title>
  </head>

  <script>
    function sayHello(message){
      alert(message);
    }
  </script>

  <body>
    <h1>Press the button</h1>
    <button onclick="sayHello('Hello, World!')">Click Me!</button>
  </body>

</html>

Press the button

A lot of this should look familiar, the function in the <script></script> tag will display an alert with the message of a variable.

That variable’s value is determined in the <button></button> tags "onclick" property. You should see that it is equal to a function called "sayHello()" (which was defined in the <script></script> tags above.)


innerHTML

We’ve used the button to make alerts, but there is so much more we can do. Let’s explore a few of the different possibilities from a button click.

Changing Text


<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="stylesheet/stylesheet.css">
    <meta charset="utf-8">
    <title>Javascripting</title>
  </head>

  <script>
    function change(message){
      var par = document.getElementById("changeMe");
      par.innerHTML = message;
    }
  </script>

  <body>
    <h1>Press the button</h1>
    <button onclick="change('What have you done?!?!?')>Click Me!</button>
    <p id="changeMe">I'm a simple paragraph...</p>
  </body>

</html>

Press the button

I'm a simple paragraph...

document.getElementById(): Using this function is how javascript can access the properties of the HTML elements through their id.

Notice the paragraph tag with it’s id? That is how the getElementById() function is able to find and change that value

innerHTML: Is exactly as it sounds. The HTML inside of the element


src

Other things that you can do is change pictures based on what was pressed.

Changing an image


<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="stylesheet/stylesheet.css">
    <meta charset="utf-8">
    <title>Javascripting</title>
  </head>

  <script>
    function change(message){
      var img = document.getElementById("changeMe");
      img.src = "images/after.jpg"
    }
  </script>

  <body>
    <h1>Press the button</h1>
    <img id="changeMe" src="images/before.jpg"/>
    <button onclick="change()">Transform</button>
  </body>

</html>

Press the button


Similar to how we change "innerHTML", but in this case we change the "src" property.

Input

Beyond buttons, input fields are a very common form of HTML elements that use javascript functionality. Because this one is a little more complicated, we’ll do this in multiple steps.

Calculator

 
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="stylesheet/stylesheet.css">
    <meta charset="utf-8">
    <title>Javascripting</title>
  </head>

  <script>
  </script>

  <!-- Add this stuff! -->
  <body>
    <h1>Calculate stuff</h1>
    First Number: <input type="number" id="num1"><br>
    Second Number: <input type="number" id="num2"><br>
    <button onclick="add()">Add</button>
    <p id="answer"></p>
  </body>
  <!-- Add this stuff! -->

</html>

Calculate stuff

First Number:
Second Number:

<input> allows the user to enter information.

The "type" property determines what values can be put in. In this case, numbers.

Notice the id set for both inputs and the <p></p> tag, we will need this later. 


<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="stylesheet/stylesheet.css">
    <meta charset="utf-8">
    <title>Javascripting</title>
  </head>

  <!-- Add this stuff! -->
  <script>
    function add(){
      var firstNum = parseInt(document.getElementById("num1").value);
      var secondNum = parseInt(document.getElementById("num2").value);
      var answer = document.getElementById("answer");

      var answerNum = firstNum + secondNum;

      answer.innerHTML = "Answer is: " + answerNum;
    }
  </script>
  <!-- Add this stuff! -->

  <body>
    <h1>Calculate stuff</h1>
    First Number: <input type="number" id="num1"><br>
    Second Number: <input type="number" id="num2"><br>
    <button onclick="add()">Add</button>
    <p id="answer"></p>
  </body>

</html>

Calculate stuff

First Number:
Second Number:

The function called when the button is pressed.

parseInt(): A function that converts values into numbers. This allows us to add these values as numbers (otherwise they would be combined together, for example 1 + 2 = 12)

Running your code you should be able to add two numbers and see your answer.

Mad Libs

 
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="stylesheet/stylesheet.css">
    <meta charset="utf-8">
    <title>Javascripting</title>
  </head>

  <script>
    function addWords(){
      var firstWord = document.getElementById("word1").value;
      var secondWord = document.getElementById("word2").value;

      var firstPlace = document.getElementById("place1")
      var secondPlace = document.getElementById("place2")

      firstPlace.innerHTML = firstWord;
      secondPlace.innerHTML = secondWord;
    }
  </script>

  <body>
    <h1>Calculate stuff</h1>
    First Word: <input type="text" id="word1"><br>
    Second Word: <input type="text" id="word2"><br>
    <button onclick="addWords()">Add</button>
    <p>
      This is a sentance where we talk about <b id="place1">[what?]</b>
      and all that makes it <b id="place2">[what?]</b>.
    </p>
  </body>

</html>

Calculate stuff

First Word:
Second Word:

This is a sentance where we talk about [what?] and all that makes it [what?].

Add words into the input and see your sentence change!


Not much different between this and what you did before. However, you’ll notice a few differences.

"input" is now "text" because we’re using words. We’re also placing an id in a <b></b> tag so that we can change it’s HTML later.

CSS and JS

Hover

Final thing we will cover is a form of event listener and style changing through javascript.


<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="stylesheet/stylesheet.css">
    <meta charset="utf-8">
    <title>Javascripting</title>
  </head>

  <body>
    <h1>Change style on hover</h1>
    <p id="hoverable">Hover over me for something to happen!</p>
  </body>

  <script>
    var hoverElement = document.getElementById("hoverable");

    hoverElement.onmouseover = function(){mouseOver()};
    hoverElement.onmouseout = function(){mouseOut()};

    function mouseOver() {
      hoverElement.style.color = "red";
      hoverElement.style.textDecoration = "underline";
    }

    function mouseOut() {
      hoverElement.style.color = "black";
      hoverElement.style.textDecoration = "none";
    }
  </script>

</html>

Change style on hover

Hover over me for something to happen!

First thing to notice is that the <script></script> tag is after the body instead of before it. This is because we need the script to run after​ ​the elements have been created.

onmouseover/onmouseout: This is used to track when an element is being hovered or not

Requirements

Now that we’ve gone over some of the basic aspects of a website using Javascript, you are going to make a website based on whatever you would like! The requirements of this project are as follows:

  1. Make a basic website with HTML/CSS
    1. Follow the same rules for HTML/CSS that you learned in the last project
      1. Good file structure (index.html, sub folders, etc)
      2. Have a title
      3. Content must be in body
  2. Add one button that performs a function when clicked
    1. Button can change CSS, alter HTML content, or anything else that you think of
  3. Have at least 1 input fields with a button that does something with those values
    1. Cannot be the same calculator unless you add something new to it (like a 3rd number)
    2. Cannot be the Mad Libs game, unless you add something new to it
    3. Examples that you can do
      1. A questionnaire field asking for name, age, and other things
      2. Entering words in the field and pressing "Submit" to add those words somewhere on your page
  4. Have at least one element that does something when hovered over and when not hovered
    1. Can change CSS elements
    2. Can change words
    3. Can have an image change source

The world of javascript is huge, there are many cool ways to implement functionality in your website through javascript. Go to W3 Schools if you’re curious to see more of what you can do.

Challenges

None yet!