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 the 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 that code 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.

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 Comment Out the Selected Lines. To add comments to many adjacent lines, select the text on those lines and click the Comment Out the Selected Lines button Comment Out the Selected Lines. 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 Uncomment the Selected Lines.

Introduction to HTML Events

Overview

An event is something that occurs to an object on a webpage. An example is that a user moves the mouse on a piece of text, clicks something on the screen, or types with the keyboard. The object on which the event occurs is said to fire the event.

HTML supports various type of events. Some events can be fired by any HTML tag and some events are made for some particular tags or some specific situations. Each event has a name.

One of the ways you use an event is to apply it to the desired tag in your webpage. The event is applied by adding its attribute to the tag. To specify what will happen when the object fires the event, you must assign something to the attribute. This would be done as follows:

<!DOCTYPE html>
<html>
<head>
<title>Exercise</title>
</head>
<body>
<form name="EmploymentApplication">
    <p><input type="button" name="btnCreateName" value="Create Full Name" someEvent="" /></p>
</form>
</body>
</html>

The Click Event

When a user clicks an object, such as a piece of text, a section of a web, or a button, the item fires an event named onclick. To use it, add it as attribute to the desired tag.

Practical LearningPractical Learning: Ending the Lesson
Home Copyright © 2001-2019, FunctionX Next