JavaScript Introduction


JavaScript is the programming language of HTML and the Web. It is a high-level, dynamic, untyped, and interpreted programming language. It is, along with HTML and CSS, one of the three essential technologies of World Wide Web content production. JavaScript is not difficult to learn.

Douglas Crockford has written a good book on JavaScript called JavaScript: The Good Parts. In it he says: “Most programming languages contain good and bad parts, but JavaScript has more than its share of the bad, having been developed and released in a hurry before it could be refined”. He goes on to say: “… good ideas that make JavaScript an outstanding object-oriented programming language-ideas such as functions, loose typing, dynamic objects, and an expressive object literal notation. Unfortunately, these good ideas are mixed in with bad and downright awful ideas, like a programming model based on global variables.”

JavaScript Posts

JavaScript in WordPress
Since WordPress is a Content Management System (CMS) adding JavaScript in WordPress is a bit different.
JavaScript in WordPress Part 2
A general discussion on where in your HTML document you may place your JavaScript code. If you are working in WordPress you should read the next article on WordPress’ Enqueue.
WordPress Enqueue
Here is an article on the proper way to add JavaScript to WordPress.
JavaScript in Customizr Theme
JavaScript IRock of Head First JavaScript
This post demonstrates the onclick event, if, alert, getElementById and changing the src property of the image.
JavaScript Simple Multiplier Calculator
This post briefly discusses data types and data naming. It shows how to get input from the user. It show you getElementById, parseFloat, and isNaN (is not a number). It also mentions formatting and toFixed()
JavaScript Simple Multiplier Calculator Improved
If the user enters a non-number in either field, the result will be zero instead of NaN. NaN stands for not a number. Also, the size of the boxes are smaller. A third improvement disallows the user to enter anything in the result box.
JavaScript Arrays Part 1
JavaScript code has primitives — simple strings, numbers and booleans, Arrays are zero-based. There is no requirement in JavaScript that all the values in an array be of the same type.
JavaScript Functions Part 1
JavaScript Functions Part 2
JavaScript Functions Part 3
JavaScript Objects Part 1
JavaScript Objects Part 2
JavaScript Document Object Model (DOM)
JavaScript DOM Part 2
JavaScript Data Validation
JavaScript Data Validation Multi-selection List Box
JavaScript Data Validation Check Boxes
JavaScript Data Validation Radio Buttons

What can JavaScript Do?

  • JavaScript can change HTML content
  • JavaScript can change HTML attributes
  • JavaScript can change HTML styles
  • JavaScript can validate data

Change HTML Content

You can try this example yourself. The web page code is shown below and is from w3schools.com.

<!DOCTYPE html>
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button"
onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">
Click Me!</button>
</body>
</html>

One of many HTML methods is getElementById(). This example uses the method to “find” an HTML element (with id=”demo”), and changes the element content (innerHTML) to “Hello JavaScript”. Here are the two before and after images as shown on w3schools.com

JavaScriptContentBefore

JavaScriptContentAfter

Change HTML Attributes

In this example, the src attribute of the img tag is changed with a function that is defined in the head of the HTML page. This code was adopted from w3schools.com. The function is called when the user clicks the picture of the light bulb. They have created names for the function itself (“changeImage”) the id (“myImage”) the declared variable (“imagebulb”) and of course the names of the two images (“pic_bulboff.gif” and “pic_bulbon.gif”). There is a JavaScript function used in this code that of important note: getElementById(). Also take note of the call to the function: onclick=”changeImage()”.

<!DOCTYPE html>
<html>
<head>
<script>
function changeImage() {
    var imagebulb = document.getElementById('myImage');
    if (imagebulb.src.match("bulbon")) {
        imagebulb.src = "pic_bulboff.gif";
    } else {
        imagebulb.src = "pic_bulbon.gif";
    }
}
</script>
</head>
<body>

<h3>JavaScript Can Change Images</h3>

<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">

<p>Click the light bulb to turn on/off the light.</p>

</body>
</html>

Change HTML Styles (CSS)

Changing the style of an HTML element, is a variant of changing an HTML attribute.

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    var x = document.getElementById("demo");
    x.style.fontSize = "25px";           
    x.style.color = "red"; 
}
</script>
</head>
<body>
    <h1>What Can JavaScript Do?</h1>
    <p id="demo">JavaScript can change the style of an HTML element.</p>
    <button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html> 

Validate Data

JavaScript is often used to validate input. The user is presented with an input box to type in a number between one and ten. There is also a submit button. This example just gives the user a message as to whether their input was valid or not once they click the submit button. Note that the user may enter decimals such as 5.7 and get a valid result. The JavaScript isNaN() function determines whether a value is an illegal number (Not-a-Number). This function returns true if the value is NaN, and false if not. Notice that the code gets the value of the input box that has an id of “numb”. Note that the innerHTML property is used to give the paragraph it’s text to display.

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Can Validate Input</h1>
<p>Please input a number between 1 and 10:</p>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
    var x, text;
    // Get the value of the input field with id="numb"
    x = document.getElementById("numb").value;
    // If x is Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 1 || x > 10) {
        text = "Input not valid";
    } else {
        text = "Input OK";
    }
    document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html> 

Further Topics

Some things to look in to: JavaScript HTML DOM.

Leave a comment

Your email address will not be published. Required fields are marked *