JavaScript Tutorial for Beginners –Learn JavaScript Online

JavaScript Tutorial provides the basic and advanced concepts of JavaScript and this Tutorial is designed for beginners and professionals to learn JavaScript Tutorial Online. JavaScript is an interpreted language with a C like syntax. While many people brush the language off as nothing more than a browser scripting language, it actually supports many advanced concepts such as object-oriented-programing, recursion, lambda, and closures.

JavaScript is a rich and expressive language in its own right.

JavaScript Tutorial for Beginners

What is JavaScript? 

JavaScript allows you to create ‘dynamic, interactive’ web pages: web pages that do things in response to what your readers do, without having a separate page for each possible response. In this tutorial, I’m going to cover some of the very basics of using JavaScript in your web pages. I’m going to assume that you know a little bit about HTML, but nothing about programming or JavaScript. 

JavaScript has nothing to do with Java. Java is a separate programming language. JavaScript is a language for scripting web browsers and web servers, although it is seeing other uses as it becomes popular. Java was created by Sun and is designed for complete software applications, while JavaScript was created separately by Netscape Corporation and was later standardized as the ECMAScript standard.

JavaScript Functions

What do these four lines do? The first three lines create a “function”. A function is a collection of scripting lines that you can call by name elsewhere in your script file and anywhere on your web page. We’ll be creating a lot of functions over the course of this tutorial. This function has the name “manageLinks”. The lines of a function are contained between the opening curly bracket and the closing curly bracket.

function manageLinks(event) {
return false;
}
document.onclick=manageLinks;

Functions often accept “parameters” or “arguments”. The manage Links function accepts one parameter, which it names “event”. Functions often return data to whoever called the function. The manage Links function always returns “false”. That’s its only purpose for the moment: it is its only line. All JavaScript lines that do something, such as the “return” line, end in a semicolon.

JavaScript Objects and Events

The final line overrides an event. The “onclick” event happens every time someone clicks

something anywhere on the web page. The web page itself is an object. In JavaScript the we age is the “document”. We’re telling the document—the web page—that every time the visitor creates an “onclick” event (by clicking something) to call our manageLinks function.

So, what happens when the visitor clicks on a link on the web page? The link itself is an object, usually an HTMLAnchorElement (we’ll deal with that sort of thing later).

Whatever object they clicked on generates an event, in this case an onclick, and starts bubbling that event up through the document. If the link is contained in a paragraph element, the onclick bubbles up through the paragraph. If the paragraph is contained in a body element, the onclick bubbles up through the body, and so on, until it hits the topmost parent of all of the elements in the web page, the document. Once the onclick event hits the document, we’ve told document that all onclicks need to call manageLinks.

The manageLinks function always returns false. That tells the document not to do anything else. If we returned nothing, or if we returned true, the document would know to continue doing what it otherwise would have done.

JavaScript Tag

Most elements are contained within other elements. What actually gets the click? The bottommost element. That’s important, because sometimes the <a> tag is not the bottom-most element. Try clicking on the two images to the right and left of the headline at the top of the page. The alert box will say that the URL for IMG is undefined, but those images are linked. The problem is that it’s the <img> tag that is getting the click—the <a> tag surrounds the <img> tag but the <img> tag is the bottom-most tag. The URL is stored on the <a> tag. If we’re going to do something special with the URL, we need to find the <a> tag first.

Change the manageLinks function to:

function manageLinks(event) {
var link = event.target;
//go up the family tree until we find the A tag
while (link.tagName != 'A') {
link = link.parentNode;
}
var url = link.href;
var tag = link.tagName;
window.alert("The url for " + tag + " is " + url);
return false;
}

Now, whenever you click on a link, the alert will tell you what URL applies to that object, even if (as for an <img> tag) the element you clicked on does not itself contain the href.

JavaScript Comments

The first new line in this version of the manageLinks function is a comment. JavaScript completely ignores all lines that begin with two slashes. We can use this to place comments I our script to remind us of what the script is doing. Whenever it isn’t immediately obvious what a section of the script is doing, you should add a comment to that section describing the purpose of those lines.

JavaScript While loops

The second new line in this version of manageLinks is a while statement. Notice that the line with the while ends in an open curly bracket, and there is a new close curly bracket two lines below it. Just like a function, a while contains JavaScript code that only gets performed if special conditions are met. For functions, the special condition is that you call the function by name. For whiles, the special condition is that some condition is true.

JavaScript Variables

JavaScript is not a strongly typed language which means you rarely have to concern yourself with the type of data a variable is storing (JavaScript Variables), only what the variable is storing and in JavaScript, variables can store anything, even functions.

var thisIsAString = 'This is a string';
var alsoAString = '25';
var isANumber = 25;
var isEqual = (alsoAString==isANumber); // This is true, they are both 25.
var isEqual = (alsoAString===isANumber); // False one is a number, the other a string.
var concat=alsoAString + isANumber; // concat is now 2525
var addition=isANumber + isANumber; // addition is now 50
var alsoANumber=3.05; // is equal to 3.05 (usually).
var floatError=0.06+0.01; // is equal to 0.06999999999999999
var anExponent=1.23e+3; // is equal to 1230
var hexadecimal = 0xff; // is equal to 255.
var octal = 0377; // is equal to 255.
var isTrue = true; // This is a boolean, it can be true or false.
var isFalse= false; // This is a boolean, it can be true or false
var isArray = [0, 'one', 2, 3, '4', 5]; // This is an array.
var four = isArray[4]; // assign a single array element to a variable.
// in this case four = '4'
var isObject = { 'color': 'blue', // This is a Javascript object
'dog': 'bark',
'array': [0,1,2,3,4,5],
'myfunc': function () { alert('do something!'); }
}
var dog = isObject.dog; // dog now stores the string 'bark';
isObject.myfunc(); // creates an alert box with the value "do something!"
var someFunction = function() {
return "I am a function!";
}
var alsoAFunction = someFunction; //No () so alsoAFunction becomes a function
var result = alsoAFunction(); // alsoAFunction is executed here because ()
// executes the function so result stores the
// return value of the function which is
// "I am a function!"

A variable may not be a JavaScript reserved word or begin with a number or any symbol other than $ or _. In Internet explorer you should also avoid variable names with the same name as html elements you have named.

var someDiv = document.getElementByID('someDiv');

The use of a leading underscore (_) is generally useful to indicate a global variable or a variable that has been set outside the current scope.

JavaScript Scope

Variables in Javascript have FUNCTION scope (JavaScript Scope). That is, all variables are global unless they are explicitly defined inside a function and even then child-functions have access to their parent’s variables. if a function defines a new variable WITHOUT using the var keyword, that variable will be global in scope.

var global = 'this is global';
function scopeFunction() {
alsoGlobal = 'This is also global!';
var notGlobal = 'This is private to scopeFunction!';
function subFunction() {
alert(notGlobal); // We can still access notGlobal in this child function.
stillGlobal = 'No var keyword so this is global!';
var isPrivate = 'This is private to subFunction!';
}
alert(stillGlobal); // This is an error since we haven't executed subfunction
subFunction(); // execute subfunction
alert(stillGlobal); // This will output 'No var keyword so this is global!'
alert(isPrivate); // This generate an error since isPrivate is private to
// subfunction().
alert(global); // outputs: 'this is global'
}
alert(global); // outputs: 'this is global'
alert(alsoGlobal); // generates an error since we haven't run scopeFunction yet.
scopeFunction();
alert(alsoGlobal); // outputs: 'This is also global!';
alert(notGlobal); // generates an error.

The concept that a variable will continue to exist, and can be referenced after the function that created it has ceased executing is known as CLOSURE. In the above example, stillGlobal, and alsoGlobal can be considered closures because they persist after the function that creates them has ceased to operate.

JavaScript Arrays

Arrays are zero-indexed lists of values. They are a handy way to store a set of related items of the same type (such as strings), though in reality, an array can include multiple types of items, including other arrays.

A simple array

var m y Array = [ ’ hello ’ , ’ world ’ ];

Accessing array items by index

var my Array = [ ’ hello ’ , ’ world ’ , ’ foo ’ , ’ bar ’ ];
console. log ( myArray [ 3 ] ) ; // logs ’ bar ’

Testing the size of an array

var my Array = [ ’ hello ’ , ’ world ’ ];
console. log ( my Array. length); // logs 2

Changing the value of an array item

var m y A r r a y = [ ’ hello ’ , ’ world ’ ];
m y A r r a y [1] = ’ changed ’;

While it’s possible to change the value of an array item as shown in “Changing the value of an array item”, it’s generally not advised.

Adding elements to an array

var my Array = [ ’ hello ’ , ’ world ’ ];
my Array . push ( ’ new ’);

Working with arrays

var my Array = [ ’h ’ , ’e ’ , ’l ’ , ’l ’ , ’o ’ ];
var my String = my Array. join ( ’ ’); // ’ hello ’
var my Split = my String . split ( ’ ’); // [ ’h ’ , ’e ’ , ’l ’ , ’l ’ , ’o ’ ]

JavaScript Tutorial

Tutorial #1: What is In-line and External JavaScript

Tutorial #2: JavaScript Output Writeln,alert and getElementByld

Tutorial #3: JavaScript comments With Examples

Tutorial #4: JavaScript Boolean

Tutorial #5: JavaScript User Input

Tutorial #6:JavaScript Function

Tutorial #7: JavaScript “this” Keyword

Tutorial #8: JavaScript Scope

Tutorial #9: JavaScript Node.js

Tutorial #10:JavaScript Event

JavaScript Tutorial for beginners explain what JavaScript, and it gives a brief understanding of messaging and important JavaScript concepts are explained above post. I will be adding more posts in JavaScript tutorial, so please bookmark the post for future reference too.