<

Go Premium for a chance to win a PS4. Enter to Win

x

Understanding JavaScript part - 1 (getting started)

Published on
9,943 Points
3,443 Views
5 Endorsements
Last Modified:
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>

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>

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>

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");

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>

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)
alert.js
sample.html
sample1.html
5
Comment
Author:d4durvesh
2 Comments
 
LVL 32

Expert Comment

by:DrDamnit
If you've worked with him before, do you want to take it?
0
 

Expert Comment

by:mikeplastic
Nice article, I know more now than I did before.  Thank you for your effort.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Join & Write a Comment

The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month