Mobirise

INTRODUCTION TO JAVASCRIPT

Lesson 2b.

What Is JavaScript?

    JavaScript is the programming language that adds interactivity and custom behaviors to our sites. It is a client-side scripting language, which means it runs on the user’s machine and not on the server, as other web programming languages such as PHP and Ruby do. That means JavaScript (and the way we use it) is reliant on the browser’s capabilities and settings. It may not even be available at all, either because the user has chosen to turn it off or because the device doesn’t support it, which good developers keep in mind and plan for.


JavaScript is also what is known as a dynamic and loosely typed programming language. Don’t sweat this description too much; I’ll explain

what all that means later.

First, I want to establish that JavaScript is kind of misunderstood.


What it isn’t

    Right off the bat, the name is pretty confusing. Despite its name, JavaScript has nothing to do with Java. It was created by Brendan Eich at Netscape in 1995 and originally named “LiveScript.” But Java was all the rage around that time, so for the sake of marketing, “LiveScript” became “JavaScript.” Or just “JS,” if you want to sound as cool as one possibly can while talking about JavaScript.


JavaScript has always allowed developers a tremendous amount of control over how pages are rendered and how our browsers behave, and it’s up to us to use that control in responsible ways.


What it is

    JavaScript is a lightweight but incredibly powerful scripting language. We most frequently encounter it through our browsers, but JavaScript has snuck into everything from native applications to PDFs to ebooks. Even web servers themselves can be powered by JavaScript.


As a dynamic programming language, JavaScript doesn’t need to be run through any form of compiler that interprets our human-readable code into something the browser can understand. The browser effectively reads the code the same way we do and interprets it on the fly.


JavaScript is also loosely typed. All this means is that we don’t necessarily have to tell JavaScript what a variable is. If we’re setting a variable to a value of 5, we don’t have to programmatically specify that variable as a number.

As you may have noted, 5 is already a number, and JavaScript recognizes it as such.


Now, you don’t necessarily need to memorize these terms to get started writing JS, mind you—to be honest, I didn’t. Even now my eyes gloss over a little as I read them. This is just to introduce you to a few of the terms you’ll hear often while you’re learning JavaScript, and they’ll start making more and more sense as you go along. This is also to provide you with conversation material for your next cocktail party! “Oh, me? Well, I’ve been really into loosely typed dynamic scripting languages lately.” People will just nod silently at you, which I think means you’re doing well conversationally. I don’t go to a lot of cocktail parties.


What JavaScript can do

    Most commonly we’ll encounter JavaScript as a way to add interactivity to a page. Where the “structural” layer of a page is our markup and the “presentational” layer of a page is made up of CSS, the third “behavioral” layer is made up of our JavaScript. All of the elements, attributes, and text on a web page can be accessed by scripts using the DOM (Document Object Model). We can also write scripts that react to user input, altering either the contents of the page, the CSS styles, or the browser’s behavior on the fly.


You’ve likely seen this in action if you’ve ever attempted to register for a website, entered a username, and immediately received feedback that the username you’ve entered is already taken by someone else (see the picture below).

The red border around the text input and the appearance of the “sorry, this username is already in use” message are examples of JavaScript altering the contents of the page, and blocking the form submission is an example of JavaScript altering the browser’s default behavior.


In short, JavaScript allows you to create highly responsive interfaces that improve the user experience and provide dynamic functionality, without waiting for the server to load up a new page.


Adding JavaScript to a Page

Like CSS, you can embed a script right in a document or keep it in an external file and link it to the page. Both methods use the script element.


Embedded script

To embed a script on a page, just add the code as the content of a script element:

    <script>

        … JavaScript code goes here

    </script>


External scripts

The other method uses the src attribute to point to a script file (with a .js suffix) by its URL. In this case, the script element has no content.

        <script src="my_script.js"></script>

The advantage to external scripts is that you can apply the same script to multiple pages (the same benefit external style sheets offer). The downside, of course, is that each external script requires an additional HTTP request of the server, which slows down performance.

Advertise Your Products & Services Here

Mail: info@fast.org.ng

Call: +234 706 883 3966


Script placement

    The script element go anywhere in the document, but the most common places for scripts are in the head of the document and at the very end of the body. It is recommended that you don’t sprinkle them throughout the document,

because they would be difficult to find and maintain.


For most scripts, the end of the document, just before the </body> tag, is the preferred placement because the browser will be done parsing the document and its DOM structure. Consequently, that information will be ready and available by the time it gets to the scripts and they can execute faster. In addition, the script download and execution blocks the rendering of the page, so moving the script to the bottom improves the perceived performance. However, in some cases, you might want your script to do something before the body completely loads, so putting it in the head will result in better performance.


The basics

    There are a few common syntactical rules that wind their way though all of JavaScript.

It is important to know that JavaScript is case-sensitive. A variable named “myVariable”, a variable named “myvariable”, and a variable named

“MYVariable” will be treated as three different objects. Also, whitespace such as tabs and spaces are ignored, unless they’re part of a string of text and enclosed in quotes.


Statements

    A script is made up of a series of statements. A statement is a command that tells the browser what to do. Here is a simple statement that makes the browser display an alert with the phrase “Thank you.”

            alert("Thank you.");


The semicolon at the end of the statement tells JavaScript that it’s the end of the command, just as a period ends a sentence. According to the JavaScript standard, a line break will also trigger the end of a command, but it is a best practice to end each statement with a semicolon.


Comments

    JavaScript allows you to leave comments that will be ignored at the time the script is executed, so you can leave reminders and explanations throughout your code. This is especially helpful if this code is likely to be edited by another developer in the future.


There are two methods of using comments. For single-line comments, use two slash characters (//) at the beginning of the line. You can put singleline comments on the same line as a statement, as long as it comes after the statement. It does not need to be closed, as a line break effectively closes it.


            // This is a single-line comment.


Multiple-line comments use the same syntax that you’ve seen in CSS. Everything within the /* */ characters is ignored by the browser. You can use it to “comment out” notes and even chunks of the script when troubleshooting.


                 /* This is a multi-line comment. Anything between these sets of characters will be completely ignored when the script is executed.     

                This form of comment needs to be closed. */


We’ll be using the single-line comment notation to add short explanations to example code, and we’ll make use of the alert() function we saw earlier (in the first picture above) so we can quickly view the results of our work.


To avoid information overloaded, we shall be pursing this lesson here. It is quite interesting to know that, security systems, social networks - Facebook, Twitter, WhatsApp and many other apps and site that gives you notification messages uses JavaScript...it is our pleasure to teach you indepth but space and time won't permit.


We will recommend some ebooks and video clips that will teach you indepth.

Ask your questions and comments below

Your questions and comments should be based on the lesson.