How JavaScript works

JavaScript controls the dynamic behavior of your website. JavaScript can be used for the front end or back end. In this unit we’ll focus on the front end and how it incorporates into HTML documents.

JavaScript is too complex to cover all of it in this unit. What we will cover are some coding concepts, including data types and built-in objects. We’ll also code a button whose actions are controlled by JavaScript so you can see it in action.

HTML tags create objects, and JavaScript lets you manipulate those objects. Example objects can be an image, text or a button. To use JavaScript in a web page, you can embed the code directly into the HTML document or create an external file with the extension of ‘.js’ as in ‘myScript.js’.

JavaScript is used to interact with users in two ways – validate user input and enhancement. For instance, when you fill out a form and you get an error message, you can be sure that JavaScript was used to validate the field to make sure the right type of entry was input. Enhancements cover a wide range of functionality from button scripts to changing elements on the screen.

The tools for writing JavaScript are simple. You’ll need a text editor (Sublime Text) and a browser, such as Chrome or Safari to view the resulting web page. Writing JavaScript follows a specific format. The code is enclosed in the <script> and </script> tags and creates what is called a script block:
<script>
// JavaScript goes here
</script>

The script can be inserted in an HTML document inside the header tags (<head></head>) or directly before the closing body tag (</body>). Another method is to create a separate JavaScript file that is linked to from the HTML document. For example, with a JavaScript file named ‘myScript.js’, the reference code looks like this

The web browser will read this code and include the file contents as part of your web page. The biggest advantage of using an external file is that the code can be reused for other web pages.

JavaScript is executed by the web browser as soon as it is read. Below is some sample code to illustrate this concept:


<!doctype HTML>

<HTML>

<head>

<title>JavaScript Sample</title>

</head>

      <body>

      <p> Printed before JavaScript runs.</p>

      <p>

                  <script>

                              document.write("Printed by JavaScript.");

                  </script>

      <p>Printed after JavaScript has run.</p>

      </body>

 

</HTML>

The output of this code in the browser looks like this:

As you can see in the browser window, the second line of text was produced by the JavaScript. This text was printed between the other two paragraphs, demonstrating that the JavaScript code was read in order.

Let’s look at the structure of the JavaScript code in the above sample. Let’s look at the line “document.write(). Document is the ‘thing’ and write is the ‘message’. You need content for the message, which in this case is ‘Printed by JavaScript’. In JavaScript, the ‘thing’ is called an Object and the ‘message’ is called a Method. The content of the method is called the ‘Argument’. The document object is a representation of the current page that is accessible by JavaScript. Whenever you manipulate the page using JavaScript, you do so by calling methods of the document object.

An ‘expression’ is a code snippet that is evaluated to return a result. Here is an example of an expression that uses multiplication as an ‘operator.

The operator ‘*’ stands for multiply. There are many other operators, and here are some of the most common ones.

The next building block of JavaScript is variables. A variable is a user-defined container that can hold a number, text or an object. Let’s look at a sample of a variable declaration:
var message = “My message”;

The first word ‘var’ stands for variable and indicates that is a variable declaration. The assignment operator ‘=’ is used to assign a value to the variable. You can also declare a variable without assigning a value. That looks like this:
Var message;

Variable names can include only letters, numbers, the underscore (_) or the dollar sign ($). They cannot start with a number. As a common practice, variables start with a lower-case letter. If the variable name is two words, then they are joined with an underscore, like this: my_Variable.

Control Structures are what gets your script to do something. There are two types of control structures – conditional statements using ‘if’ and ‘then’, and loops which enable you to repeat the same statement more than once.

Functions are a way of grouping code together so that it can be called whenever you like. The following code demonstrates a function:
Function writeParagraph(myString) {
Document.write(“,p.” myString “</p>”
}

The declaration starts with the function keyword, the function name (writeParagraph) and it accepts a single argument ‘myString’. After the function is declared, it can be used anywhere in the HTML document. So, using the above function ‘writeParagraph’ can be used like this:
writeParagraph(“This is my new paragraph.”);w

which will output the following HTML code:,
p>This is my new paragraph. </p>

All of the above code samples occur immediately as the browser encounters them. To add user interactivity, you need to bind your JavaScript code to events. For instance, to make a button interactive on a web page, you would bind the button with the JavaScript Event Hander ‘onclick’. Here’s an example of that event binding and function to a button.
<button onclick=”myFunction()”>Click me</button>
<script>
function myFunction() {
alert(‘Button was clicked!’);
}
</script>

And the resulting display after clicking the button in the browser looks like this:

JavaScript enables you to add scripts to an HTML page without any other processing other than the browser. We learned about scripts, how they’re built and how they are used. There is much more JavaScript knowledge available online and in books. If you’re interested in learning more, https://www.w3schools.com/js/default.asp is a good place to start.