Vocademy

JavaScript Tutorial

Your web browser interprets JavaScript, so you don't need a web server to learn the language. You need only to type the following examples into a text file, save it as [something].html, then double-click the file to load it into your default browser. However, you will need access to a web server to run the scripts that interact with PHP scripts. You should type the scripts rather than copy and paste them because you learn through your hands.

Hello World!

<script>
  document.write("Hello World<br>");
</script>

This will print Hello World! to the screen but you can just do that in your html. JavaScript is usually event-driven so the following scripts show how to trigger JavaScript upon clicking a button.

Button to print Hello World!

<button id="btnPHW">Print Hello World!</button> <span id="PrintOutputHere"></span><br>

<script>
  let t1 = document.getElementById("btnPHW");
  t1.addEventListener("click", function() {
    document.getElementById("PrintOutputHere").innerHTML = "Hello World!";
  });
</script>

The first line of HTML code above the script displays a button on the screen then prepares a place to print the script output. The output goes between the <span> and </span> tags.

The first line of the script transfers the metadata about the specified button to the variable t1. This includes real-time events, allowing the script to detect when the button is clicked.

The id name, btnPHW, is arbitrary and just represents a button to print Hello World. You can name it whatever you want, but it must match the references later in the script. In other words, if you rename the button to "Fred," you must change every reference to "btnPHW" to "Fred."

The id parameter in the <span> tag allows the script to identify the place to print the output.

The variable name "t1" is arbitrary. Variables can have any name made up by the developer. The directive "let t1 = document.getElementById("btnPHW");" is used by the script interpreter to identify the button.

The line "t1.addEventListener("click", function() {" detects clicks on the button specified in the variable t1. When clicked, the directives between the braces are executed.

The line "document.getElementById("PrintOutputHere").innerHTML = "Hello World!";" finds the element identified by "PrintOutputHere" (the <span> tag in this case) and puts the text (Hello World!) between the tags of the element. As formatted above, the <span> tag comes immediately after the button, so the text is printed immediately after the button.

The line "});" closes the addEventListener directive and the generic function within the directive.

Button to print Hello World! with text specified as button value

<button id="btnPHW2" value="Hello, World!">Print Hello World!</button> <span id="PrintOutputHere2"></span><br>

<script>
  let t2 = document.getElementById("btnPHW2");
  let t3 = document.getElementById("btnPrintHelloWorld2").value;
  t2.addEventListener("click", function() {
    document.getElementById("PrintOutputHere2").innerHTML = t3;
  });
</script>

Notes:

The first line of the script transfers the metadata about the specified button to the variable t2. Notice that value="Hello, World" is added to the button tag. This is transferred to the variable t3 by adding .value to the appropriate getElementById directive. Without the .value added to the directive, the variable t3 will get metadata about the button as the variable t2 does instead of getting the value specified in the tag.

Text box where a button prints the text typed into the box

<button id="btnPrintText">Print Text Below</button><br>
<input type="text" id="textbox"> <span id="PrintTextHere"></span><br>

<script>
  let t4 = document.getElementById("btnPrintText");
  t4.addEventListener("click", function() {
    var text = document.getElementById('textbox').value;
    document.getElementById(where).innerHTML = text;
  });
</script>

Nothing new here except the text box element.

Some code added below to clear the text box when the page refreshes and to print a reminder if the user doesn't type anything in the box.

<button id="btnPrintText">Print Text Below</button><br>
<input type="text" id="textbox"> <span id="PrintTextHere"></span><br>

<script>
  //clear text box on refresh
  window.onload = document.getElementById('textbox').value = '';

  let t4 = document.getElementById("btnPrintText");
  t4.addEventListener("click", function() {
    var text = document.getElementById('textbox').value;
    if (text == ""){text = "type something in the box first";}
    document.getElementById(where).innerHTML = text;
  });
</script>

Two buttons print different text by passing arguements to the same function

<button id="btnPrintHi">Print Hi</button> <span id="PrintHiHere"></span><br>
<button id="btnPrintHello">Print Hello</button> <span id="PrintHelloHere"></span><br>

<script>
  let t5 = document.getElementById("btnPrintHi");
  let t6 = document.getElementById("btnPrintHello");

  t5.addEventListener("click", function() {
    myFunction("Hi!","PrintHiHere");
  });

  t6.addEventListener("click", function() {
    myFunction("Hello", "PrintHelloHere");
  });

function myFunction(what, where) {
document.getElementById(where).innerHTML = what;
}
</script>

Notes:

The generic functions in the addEventListener directives pass arguments to the myFunction function. The first argument becomes the what variable and the second argument becomes the where variable.  

Vocademy