A Beginner JavaScript Tutorial Series: An Introduction to JavaScript - Identifying Basic Requirements

Some Initial Considerations: HTML, Text Editor, & JavaScript

Before you begin this tutorial you will need a text editor and some knowledge of HTML. I have created a series of tutorials which cover the basic HTML features so if you do not have a background in HTML that might be somewhere you might want to start. The tutorials in that series begins with A Web Tutorial Series: Creating Your Own Presence on the World Wide Web With Little or No Prior Experience or Costs. which lays the groundwork for working with HTML. Working partway through that tutorial series will allow you to work with HTML and this series on JavaScript concurrently.

The second thing you will need is a text editor, which for beginners I would recommend Notepad++. (This information or the rationale for using Notepad++ is contained in the introductory chapters of the HTML series as well.)

A Sanity Check for JavaScript

Ninety percent of the problems new users encounter are related to some small error or typo in entering an initial script or program code. For your convenience, here is the first script a sanity check that your environment is correct. You may cut and paste it into your editor (Notepad++ is suggested). Remember to save the file as type html. The reason for doing this is that JavaScript may have been disabled in your browser (unlikely, but this is a check).

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8 />
<title>HTML Template</title>
<link rel="stylesheet" href="main_stylesheet.css">
</head>
<body>
<script type="text/javascript">
document.write("Hi there, tutorial users!");
</script>
</body>
</html>

Running the Initial JavaScript

The input and resulting output for the preceding part of the tutorial.
The input and resulting output for the preceding part of the tutorial.

Comments in JavaScript

There are really four types of comments to consider with JavaScript. Two inherited from HTML, the single and multi-line comments in HTML, have no adverse effect if they are included between the <script> </script> tags as the examples thus far indicate. The reverse of including JavaScript comments outside the tags results in the comments being treated as unformatted text.
a single line comment denoted by // which can also follow at the end of a text line and
a mult-line or block comment delineated by /* and */

Thus care must be taken in positioning JavaScript comments.

Comment Examples in JavaScript

Note this is a valid JavaScript comment, however it has been placed outside the  tags. HTML does not complain, however it will be interpreted as untagged text and just displayed as such.
Note this is a valid JavaScript comment, however it has been placed outside the tags. HTML does not complain, however it will be interpreted as untagged text and just displayed as such.
Note the difference in the way the text is colored in this example. That is why using a good text editor is important. The error in the previous screen shot would have be caught during development.
Note the difference in the way the text is colored in this example. That is why using a good text editor is important. The error in the previous screen shot would have be caught during development.

Variables in JavaScript

Variables in JavaScript are not strongly typed. The definition of a variable is simply this: using the word var, one follows it by the assignment operator, "=", and a value which can be an integer value, a decimal value, a string, Boolean value, or null.

Simple examples would be:

var x = 5;

var y = 6.999;

var z = "This is a string";

var a = true;

var b = false;

var c = null;

Variables must begin with a underscore or letter, followed by underscore, letters, or numbers. No special characters are permitted within a variable name. The strings are delineated by quotes and if there are quotes within the string, they must be escaped by a backslash as in the following example:

var = “She said, \”Help!\” “;

Concatenation in JavaScript

With strings, such as

var name = “Chipmunk”;

write.document(name + “ is my name");

The result is: Chipmunk is my name

A common mistake for beginners is to place the variable name within the string. in this case the

write.document("name is my name"); is just the string:

name is my name .JavaScript provides for no recognition of variables being embedded in a string.

What happens if

var x = 5;
var y = 7;

write.document(x+y); The result is as expected 12.

But, if
var x = ”5”;

and

var y = 6:

then document.write( x+y);

So, the string operator is understood rather than the arithmetic operator and the result becomes 56 rather than 11.

And the rule bears out if x + y + z where any one of the three is a string the operator is interpreted as concatenation rather than addition.

One more example,

write document(z = x + y);
write.document(z);

It doesn't matter if the statement:

var z = 3; has occurred prior to the write.document statement in this case, z now represents the concatenated value.

Functions in JavaScript

A function definition takes the form:

function functionname() {

<function statements>

}

and the call later in the code is

functionname();

Functions can be called with zero arguments, one argument, or n arguments it makes no difference, there is no inherent limitation.

Functions Called With Arguments and Returning Values

In this example, the function is called with two arguments: a and b. The function returns the value c.
In this example, the function is called with two arguments: a and b. The function returns the value c.

The Return Value

The return value in the previous example by itself does nothing more than just that it returns the value to the caller. It is up to the caller as how to proceed with the value. In the example, perhaps all that would happen is that the caller might invoke the document.write() function to display the text or it might used the returned value c is some further calculation.

JavaScript - Creating Dynamic Web Pages

JavaScript is one of the best scripting languages for creating dynamic web pages.
JavaScript is one of the best scripting languages for creating dynamic web pages.

Recap of Information Presented and What's Next

A good deal of initial ground has been covered in this tutorial. We've learned that JavaScript is contained between the <script> and </script> tags. We have learned about comments in JavaScript and the subtle distinction that although JavaScript "resided" within the HTML framework and that it recognizes HTML comments within its script envelope, the opposite is not true.

Variables in JavaScript were discussed. The concept and their presentation is rather simple, but the examples portrayed in concatenation especially is that care must be taken as to the intended meaning. Whether the operator "+" means concatenation or addition is dependent upon the "mix" of the variables.

Function calls were discussed with zero or more arguments being passed. The use of the return statement was indicated.

In the next tutorial, we will look more at functions and see integration of JavaScript functions within the web page by looking at deferred function invocation. Our first example, will look at a function being called after some user interaction, specifically, a button being clicked on a form resulting in the running of some JavaScript.

Practice with some of the examples. They may seem trivial but they are very important.

Till next time, happy prospecting!

Please Rate the Clarity and Completeness of This Tutorial

Cast your vote for this tutorial on clarity and completeness.

More by this Author


2 comments

Eric Calderwood profile image

Eric Calderwood 2 years ago from USA

Thanks for the tutorial. I'll have to come back and spend more time on this. I have just recently decided to learn JavaScript. Do you have a specific book that you recommend as the best for a beginner to learn from?


Johnf512 2 years ago

griseofulvin isoelectric point acbkgedeeccc

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working