Understanding JavaScript part - 1 (getting started): Javascript, learn javascript

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big article at a time. You may also get in confusion with it and complexity is also high. So lets learn JavaScript we will together will have lots of fun and good company. :-)

Things you should know before you start learning JavaScript

To get started with JavaScript, you should have a basic, comfortable working knowledge of:

Basic HTML (Hyper Text Markup Language)

Basic CSS (Cascaded Style Sheets)

If you do not have a comfortable working knowledge of these topics, I suggest you read up on them before you continue.

If you are a programmer then, great! But if you not, then even better!

Everyone is welcome in JavaScript. We will be learning JavaScript from scratch. So, if you know another programming language, you may want to skip some of the basic topics, but I suggest you resist that temptation because it may cause you confusion ahead. For those who are new to programming, you're in the right place.

"NO PROGRAMMING KNOWLEDGE IS REQUIRED TO GET STARTED WITH JavaScript".

History

JavaScript was formed by Netscape developers in 1995. They named it as "LiveScript" that time. But in same period Sun's java was come into fame sun and Netscape collaborate and after that it is term to be as a JavaScript. Lets not go in detailed of that and lets move on to next topic that is,

Introduction

JavaScript is a client side scripting language i.e., it has a control of user. JavaScript is a dynamic language and gives lots of interactivity to the websites. Unlike HTML, JavaScript can validate user forms , run on some events, and is user friendly. The main point to notice is that JavaScript is DYNAMIC while HTML is STATIC.

What JavaScript Can Do

Give user friendly interactivity.

Can validate data on data.

Can do certain things using event-handlers.

What JavaScript Can't Do

JavaScript cannot write anything on system files.

It can not be use to enter in DB (database) or change it.

OK, so lets quickly move on to...

Getting Started

Let's get start with JavaScript. You will need text editor to write JavaScript code. if you are a Windows user, then I will recommend you to use notepad++ but if you are a Mac user, then you will like BBedit. But, it does not matter what editor you use, the output you will get will be the same in all. Also make sure your browser supports JavaScript, and it is enabled. If not, then you can enable it from preferences tab under setting.Check it out this information about "How to enable JavaScript in browsers.
So lets see your first JavaScript code

<script type='JavaScript'>
alert("Hello Expert-Exchange");
</script>

1:
2:
3:

Select all Open in new window

Feel Free to copy above code and paste it in your HTML document's head tag, and check what happens when you run this code. The browser will pop up a box, which will say: "Hello Experts-Exchange".
By now, you have certainly noticed that JavaScript is enclosed in <script></script> tags. While you may place JavaScript in anywhere in HTML document, you should normally write JavaScript in the <head> tag whenever possible. Check the minor differences by writing JavaScript in head tag and body tag. You can also embed externally by using 'scr' attribute in Script tag, like:

<script type='JavaScript' src='main.js'>
//some code
//some more code
</script>

1:
2:
3:
4:

Select all Open in new window

Embedding files is very much easy and save lot of time. So, Let's check below steps to embed your first JavaScript program in your .html document,

Steps to implement JavaScript using embeded technique,

1: Open / Run editor. (whichever editor you have) like notepad++

2: Write you HTML program with script attribute.

<html>
<head>
<title>Simple Page</title>
<script type="text/javascript" src="alert.js">
</script>
</head>
<body>
	<h1>Simple HTML Page</h1>    
    	<p>
    	This is a very simple HTML page.
    	</p>

	<p>It's about as basic as they come. It has:<p>

	<ul>
		<li>An H1 Tag</li>
		<li>Two paragraphs</li>
		<li>An unordered list</li>
	</ul>
</body>
</html>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:

Select all Open in new window

3: Then go to file > save > type any name like sample.html

4: Open / Run editor

5: Type your JavaScript code

alert("Hello, World");

1:

Select all Open in new window

6: Then go to file > save > type any name like alert.js

7: And finally run your sample.html file.

8: Make sure both .js and .html files are in same directory.

9: Same you can do with your exercise too.

I have attach both alert.js and sample.html files. So please download it and save both files in same folder and see the output.It will help you to get better experience.

But if you want to try it internal technique then follow this steps,

Steps to implement JavaScript using internal technique,

1: Open / Run editor. (whichever editor you have) like notepad++

2: Write you HTML program with script attribute.

<html>
<head>
<title>Simple Page</title>
<script type="text/javascript">
alert("Hello, World");
</script>
</head>
<body>
	<h1>Simple HTML Page</h1>    
    	<p>
    	This is a very simple HTML page.
    	</p>

	<p>It's about as basic as they come. It has:<p>

	<ul>
		<li>An H1 Tag</li>
		<li>Two paragraphs</li>
		<li>An unordered list</li>
	</ul>
</body>
</html>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:

Select all Open in new window

3: Then go to file > save > type any name like sample1.html

4: And finally run your sample.html file.

Check sample1.html file which is attach to the article

Let's now do some practice exercises so you can perfect your knowledge and experience of JavaScript:

Exercise

Make a alert box in JavaScript popping "My first program in JavaScript." using internal technique

Make a alert box in JavaScript popping "My second program in JavaScript." using embedded technique

Create one HTML document add some HTML tags then make alert box and check what happens when you placed it in head tag and what happens when you place it in above </body> tag.(do not forgot to add script tag with alert box.)

After you complete your first JavaScript program, you can move on to the next lesson where you will learn how to create a variable, and how to store any value in your JavaScript program.Lot more to come, please do not miss it!

Please vote 'YES' if you like this article, or share it to your friends using the share buttons to the left.

If you have questions, feel free to ask them in the comments below.

Please read next part of this series Understanding JavaScript part - 2 (Introdution to variables and pop-up boxes)

Understanding JavaScript part - 1 (getting started)

Things you should know before you start learning JavaScript

If you are a programmer then, great! But if you not, then even better!

"NO PROGRAMMING KNOWLEDGE IS REQUIRED TO GET STARTED WITH JavaScript".

History

Introduction

What JavaScript Can Do

What JavaScript Can't Do

Getting Started

Steps to implement JavaScript using embeded technique,

Steps to implement JavaScript using internal technique,

Exercise

Javascript

learn javascript

JavaScript

About The Author

More Articles From d4durvesh

Comments

Add your Comment

Join Experts Exchange Today

Gain Access to all our Tech Resources

Get personalized answers

Access Proven Solutions

Read In-Depth How-To Guides

Watch Step by Step Tutorials

And Much More!

Top JavaScript Experts