Javascript tutorial for beginners

JavaScript, the programming language of the web, is mainly a client-side scripting language, mostly used as a part of modern web browsers. It is high-level, dynamic, and multi-paradigm in nature, supporting object–oriented, imperative and functional programming styles.

JavaScript is not related to “Java” in anyway. But it derives syntax from Java and ultimately from C. It has got its first-class functions from language “Scheme”, and its prototype based inheritance is taken from the language “Self”. But you do not need to know any of these languages to learn JS.

You should have clear understanding of the difference between HTML, CSS, and JavaScript.

HTML specifies the content of web pages.

CSS handles the look and feel of web pages and its content, its decoration and presentation.

JavaScript specifies the behavior of web pages, controls its dynamic changes according to geographical, environmental and logical parameters e.g.,

Automatically change a formatted date on a web page
Cause a linked-to page to appear in a popup window
Cause text or a graphic image to change during a mouse rollover

The standardization name of the language is “ECMAScript”.

Now, let’s get started with the practical things.

Platform

JavaScript needs only a basic text editor (Notepad++ recommended) to write code and a web browser to display the result of that code. Support for JavaScript is built-in all modern web browser. So, no extra thing is required to start coding. You already have on your computer what you need.

Code Example

Here is a quick example to get familiar with JS. The code is to display current date. JavaScript is written inside HTML or as an external file to a HTML. I will show this example in both the ways.

Inside HTML

All the JavaScript codes comes inside <script>tag in HTML which can be put either in <head> or <body>section of the page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8"/>
<title>JavaScript Code Example</title>
</head>
<body>
<h2>This is an example of JavaScript code</h2>
<p>Date will be shown</p>
<p id="date_here"><font color="red">here</font></p>
<button type="button" onclick="showDate()">Show Date</button>

<script><!-- JavaScript code starts from here -->

function showDate()
{
document.getElementById("date_here").innerHTML = Date(); <!-- displaying date at the place of element with id = date_here -->
}

</script><!-- ends here -->
</body>
</html>

External JavaScript file to HTML

Create a file “myScript.js”. “.js” is the extension of file which contain only JavaScript code without any HTML. This file will be called from another file say “learning_js.html” which will have the html code with <script> tag to specify which file to call. Again, <script> can be put in any of the <head> or <body> section.


<script src=”myScript.js”></script>

Content :myScript.js

function showDate()
{
document.getElementById("date_here").innerHTML = Date(); <!-- displaying date at the place of element with id = date_here -->
}

Content :learning_js.html

<!DOCTYPE html>

<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8"/>
<title>JavaScript Code Example</title>
<script src=”myScript.js”></script><!—specifying JS file name to use its code -->
</head>
<body>
<h2>This is an example of JavaScript code</h2>
<p>Date will be shown</p>
<p id="date_here"><font color="red">here</font></p>
<button type="button" onclick="showDate()">Show Date</button>
</body>
</html>

JavaScript Introduction for Beginners