Lesson 01: Introduction to JavaScript

Fundamentals of JavaScript

Introduction

JavaScript is a programming language used to perform operations on a webpage. It is used as a supplement to HTML. It can also be combined with CSS. JavaScript is a web-based computer language that provides functionality that was neither created nor available when HTML and the Internet were created. The JavaScript language was created to perform operations such as calculations, file loading/reading, communication (email, networking, etc), clock (dates and times), etc, things that HTML could not do.

The JavaScript language is automatically installed (built) in almost every browser. This means that you don't have to include or "load" it in your webpage before using it. Still, because it is not HTML, you must indicate that you want to use its role in your HTML code. You have two main options.

Creating a JavaScript Section in a Webpage

The traditional way to use JavaScript is to put it in the head section of a webpage. In this case, start the JavaScript section with <script> and end it with </script>. Here is an example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>

</script>
</head>
<body>

</body>
</html>

Optionally, to specify that your code will use JavaScript, add an attribute named type and whose value is text/javascript. Here is an example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">

</script>
</head>
<body>

</body>
</html>

By the way, you can include the script section before or after the other tags in the head section. Also, the <script> and the </script> declarations, and the type="text/javascript" are not case-sensitive, but by tradition, they are written in lowercase.

In some cases, your webpage or the document on which you are working will not have a head section. Also in some case, for some reason, you will not have access to the head section. In some cases, by choice or constraints, you will not want to use/work on the head section. The second option you have is to include your script inside the body section section of the webpage. In this case, create the script section the same way as seen above. Here is an example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>

<script>

</script>

</body>
</html>

A JavaScript File

If you create a script section in a webpage, the script can be accessed only by that page. In some cases, you may want more than one webpage to use the same code. In this case, you can put the script code in its own file. In this case, you don't have to include the <script> and </script> lines. Simply type your code. Save the file with the .js extension.

To access the code of a JavaScript file in a webpage, in the code of the webpage, create a link to the JavaScript file. To do this, create a script tag. Add an attribute named src to it. Assign the path and name of the JavaScript file to this attribute. In some cases, you can create the link in the head section of the webpage. Here is an example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="Scripts/Exercise.js"></script>
</head>
<body>

</body>
</html>

In some cases, you can add the link in the body section of the webpage. Here is an example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>

<script src="Scripts/Exercise.js"></script>

</body>
</html>

Comments

Single-Line Comments

A comment is a line or paragraph of text that will not be considered as part of your code. There are two types of comments recognized by JavaScript.

To display a comment on a line of text, start the line with two forward slashes //. Anything on the right side of // would be ignored. Here is an example:

<!DOCTYPE html>

<html>
<head>
<title></title>
</head>
<body>

<script>
    // This line will be ignored. I can write in it anything I want.
</script>

</body>
</html>

Multi-Line Comments

The above type of comment is used on only one line. You can also start a comment with /*. This type of comment ends with */. Anything between this combination of /* and */ would not be analyzed by the compiler. Therefore, you can use this technique to span a comment on more than one line.

While you can manually create comments, Microsoft Visual Studio provides a tool that can assist you. To add a comment on a line, click anything on that line. Then, on the Standard toolbar, click the Comment Out the Selected Lines button . To add comments to many adjacent lines, select the text on those lines and click the Comment Out the Selected Lines button . To remove the comments, click the line or select text on the lines. Then, on the Standard toolbar, click the Uncomment the Selected Lines button .

Introduction to Variables

Introduction

A variable is an area of the computer memory where you want to store a valuey.

Declaring a Variable

Before using a variable, you must let the computer know. This aspect is referred to as declaring a variable. To let you declare a variable, the JavaScript language provides the var keyword.

The Name of a Variable

A variable must have a name:

A name can consist of one letter
A name can start with an underscore _, followed by one or more letters
A name can start with a letter, followed by underscores, letters, and digits in any combination
The name cannot contain space or any special character

When naming your variables, you must avoid reserved words, also called keywords.

Here are examples of declaring variables:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
<script type="text/javascript">
    var number;
</script>
</head>
<body>

<script>
    var name;
</script>

</body>
</html>

Initialyzing a Variable

Unlike as done in C#, if you declare a variable in JavaScript using the var keyword, you don't have to immediately initialize it. Still, before using the variable in JavaScript in JavaScript, you should assign a value to it. This is done using the = operator. Here are examples:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
<script type="text/javascript">
    var number = 128;
</script>
</head>
<body>

<script>
    var name = "George Weah;
</script>

</body>
</html>

Declaring many Variables

As done in C#, in JavaScript, you can declare many variables on the same line or section. You can use a single var keyword. Here are examples:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
<script type="text/javascript">
    var firstName, middleName, lastName;
</script>
</head>
<body>

<script>
    var numerator, denominator;
</script>

</body>
</html>

Sometimes, to make your code easier to read, you can put each variable on its own line. Here are examples:

var firstName,
middleName,
lastName;

Indentation is another way to make your code easier to read. Here are examples:

var firstName,
    middleName,
    lastName;

Introduction to Types of Values

Introduction to Strings

A string is an empty space, a character, a word, or a group of words. In JavaScript, a string can be included in double-quotes. An example of a string is "Welcome to the wonderful world of web development!". A string can also be included in single-quotes.

To initialize a variable for a string, include it in single or double-quotes. Here are examples:

var firstName = "William", middleName = "Jefferson", lastName = "Clinton";

Of course, you can also initialize each variable on its own line. Here are examples:

var firstName = "William",
    middleName = "Jefferson",
    lastName = "Clinton";

When using this technique, you don't have to initialize all variables. You can initialize only those whose values you have/know already.

Introduction to Natural Numbers

An integer is a natural number that is made of one or a combination of digits that are 0, 1, 2, 3, 4, 5, 6, 7, 8, and 9 in the sequence of your choice.

This would display a dialog box. Enter the line number and click OK or press Enter.

Constants

Introduction

A constant is a value that never changes. These are constant values you can use in your program any time. You can also create your own constants. To create a constant, type the const keyword to the left of a variable. You must immediately initialize that variable with an appropriate value. Here is an example:

const ConversionFactor = 39.37;

Once a constant has been created and it has been appropriately initialized, you can use its name where the desired constant is needed.

Hoisting

In most computer languages, you must declare a variable before using it, such as before getting its value. Here is an example:

@{
    var aphorism = "Absence of evidence is not evidence of absence";

    <p>@aphorism</p>
}

If you try accessing a variable before it has been declared, you would receive an error. That's the case for the following code:

@{
    <p>@aphorism</p>

    var aphorism = "Absence of evidence is not evidence of absence";
}

The error is because the C# compiler reads and immediately analyzes the code from top to bottom. When the compiler encounters a name, if the name represents a variable, the compiler checks whether it is a declaration, based on the fact that the variable is preceded by a valid data type or a keyword (such as var or dynamic). It that's not the case, the compiler checks whether the variable was already declared or the variable exists in another file that the compiler is already aware of. If none of these conditions can be verified, the compiler presents an error (we say that it throws an exception).

The JavaScript interpreter also reads code from top to bottom but it doesn't immediately start processing everything. It first checks everything and creates a list that resembles a tree (in fact it is called a tree list). The list starts with the variables declarations. This means that as the JavaScript interpreter is reading the code, if it encounters the declaration of a variable, it internally puts that declaration in the top of its virtual list. When the list is ready, then the interpreter starts processing the code. As a result, you can access a variable that has not yet been declared, as long as it is declared somewhere in the code. To put it another way, you can first use a variable before declaring it. Here is an example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
</head>
<body>
<p class="right">Affiche</p>

<script type="text/javascript">
    aphorism = "Absence of evidence is not evidence of absence";
    
    // . . .

    var aphorism;
</script>
</body>
</html>

Hoisting is the ability to access a variable before it has been declared.

Working in a Strict Mode

By default, in JavaScript, as seen above, you don't have to first declare a variable before using it. You can just write a name of a variable and immediately use it. Here is an example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
</head>
<body>

<script>
    evidence;
    
    evidence = = "Absence of evidence is not evidence of absence";
</script>

</body>
</html>

This type of code may create various categories of confusions such as using the same name many times (accidentally thinking that you are using different variables). One solution is to make sure that every variable must be declared before being used. To assist you with this, JavaScript supports a declaration known as use strict. To use it, include this expression in single-quotes somewhere in your code, preferably on its own line, as the first statement of your script. Here is an example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
</head>
<body>

<script>
    'use strict';
    
    . . .
    
</script>

</body>
</html>

Not all browsers support the strict mode; even those that support it don't behave the same. For example, in some browssers (such as Microsoft Edge), the variables that are used without being declared would be ignored.

Practical Learning: Ending the Lesson

Close Microsoft Visual Studio


Home	Copyright © 2001-2019, FunctionX	Next