Basic JavaScript Tutorials

[Mind Freak™]

Basically I have joined a University Where i am being taught Javascript,C,C++,ASP.net and all those stuff so i would be sharing all tutorials here too

So i will be making as many tuts i can and help around and as its a thing for helping so i would like all the "Ub3r" Coders to help around as well.
​

​

 

[Shahrukh]

Looking Forward to iT!

 

[Mind Freak™]

Objective : 1

Objective:
Use Javascript "document.write()" statements to produce the following page output

Commands to be used

1.document.write()

Output

[SLIDE]http://dl.dropbox.com/u/26836391/J/tuts/output1.png[/SLIDE]

Coding To be Used :

<html>
<head>
<script language="javascript">
document.write("<h1>Hi WJ This is MindFreak</h1>");
document.write("This page has been developed by using Simple Javascript coding");
</script>
</head>
</body>
</body>
</html>

Well as per my way of coding a html or a javascript page goes i always write off the basic structure of the coding so that no probs occur later on.

<html>
<head>
<title></title>
<script language="javascript">
</script>
</head>
<body>
</body>
</html>

We have used document.write() to show the above output

Javascript Coding is mostly or always done within the header tags
Document.write is used to display a value on the page.
HTML snipets can also be used within the ()
after every coding its very important to end with a ";"

​

 

[Mind Freak™]

Objective : 2

Objective

Write a program to accept username and display it message with welcome greeting.

Commands to be used

1. prompt
2. alert
3. variable

Output

[SLIDE]http://dl.dropbox.com/u/26836391/J/tuts/output2-1.PNG[/SLIDE]

[SLIDE]http://dl.dropbox.com/u/26836391/J/tuts/output2-2.PNG[/SLIDE]

Coding to be used

<html>
<head>
<title>Display Message</title>
<script language="javascript">
var Name = prompt('Enter Your Name:',"");
alert('Welcome ' + Name)
</script>
</head>
<body>
</body>
</html>

MessageBox's are of various types but here we would be using 2 of them

• Prompt
• Alert

By Using Prompt we would ask the user for their input it would be defined as a variable as we have used the prompt value by assigning it to a variable

After that we will use alert msgbox to display the variable aka the user's input.

​

 

[Mind Freak™]

Objective : 3

Objective

Write a program to display a confirmation box to confirm whether the name entered in the prompt window is correct as shown below

Commands to be used

1. prompt
2. confirm
3. variable

Output

[SLIDE]http://dl.dropbox.com/u/26836391/J/tuts/output3.PNG[/SLIDE]

Coding to be used

<html>
<head>
<title>Display Message</title>
<script language="javascript">
var Name = prompt('Enter your name:',"");
confirm('Your Name is '+ Name + '; is it correct?');
</script>
</head>
<body>
</body>

Here We Are assigning prompt to the variable "Name" and we are using users input in the prompt box and displaying it in the confirm box

​

 

[CyberAff]

thanks alot mind freak. i started learning this all. i don't know if its useful or not but i really want to. gonna take some courses ^_^

thanks alot mate <3 +1 to all objectives

 

[snowmanrene]

Awesome idea :D
Rep'd

 

[NigelART]

Check PM PLZ.

 

[Mind Freak™]

Objective : 4

Objective

Write a program to accept two numbers and display sum of it.

Commands to be used

1. Arithmetic Operators

Output

[SLIDE]http://dl.dropbox.com/u/26836391/J/tuts/output4.PNG[/SLIDE]

Coding to be used

<html>
<head>
<script>
var a = prompt("Enter Your First Number");
var b = prompt("Enter Your Second Number");

document.write("<font size='5' face='Arial'>");
document.write("No.1=" + a +"<br>");
document.write("No.2=" + b +"<br>");
document.write("No.1 + No.2=" +(eval(a) + eval(b)) + "<br>");
document.write("</font>");
</script>
</head>
<body>
</body>
</html>

What We Have Done :

Above We Used Basic Arithmetic Operators to add to variables
(eval(variable) is used to convert the number to a form for the computer to understand so that it add's your given number correctly

In the same above way you can do

Addition
Subtractions
Multiplication
Division.

​

 

[Mind Freak™]

Objective : 5

Objective

Write a program to increment the value of a & b using pre increment and post increment operators

Commands to be used

1. pre & post increment operators

Output

[SLIDE]http://dl.dropbox.com/u/26836391/J/tuts/output5.PNG[/SLIDE]

Coding to be used
​

<html>
<head>
<script type="javascript">

var a=10;
var b=10;

document.write("font size='5'>");
document.write("Post Increment<br><hr>");
document.write("a:" + a);
document.write("<br>");
document.write("a++:" + a++);
document.write("<br>");
document.write("a++:" + a++);
document.write("<br>");
document.write("a++:" + a++);
document.write("<br>");
document.write("a++:" + a++);
document.write("<br>");
document.write("<br><br>Pre Increment<br><hr>");

document.write("b:" + b);
document.write("<br>");
document.write("++b:" + ++b);
document.write("<br>");
document.write("++b:" + ++b);
document.write("<br>");
document.write("++b:" + ++b);
document.write("<br>");
document.write("++b:" + ++b);
document.write("<br>");
document.write("++b:" + ++b);
document.write("</font>");
</script>
<title>Expression Operators</title>
</head>
<body>
</body>
</html>

</script>
</head>
<body>
</body>
</html>

​

 

[tmk]

Thanks...looking forward to it ..would be great if you can share those materials if it's in digital format.

 

[Mind Freak™]

@tmk

i would be making pdfs and videos soon

 

[tmk]

Thank you.

 

[thethinker]

Thanks

I have joined dis forum 2 learn javascript only,it was very cool of u 2 make dis tutorial

 

[Robin H]

Should give jQuery tutorial

 

[alex17]

awesome share <3 Thanks man !

 

[Mind Freak™]

As i said i will be learning along with u guys only

I am not feeling well so had to skip 2 classes

today the new tuts will be posted

 

[Mind Freak™]

Objective : 6

[SLIDE]http://i.imgur.com/pTkRA.png[/SLIDE]

​

 

[Ndoy]

Thank You MindFreak™ <3



Cool & Useful Tutorial



​

 

[b1gj4v]

awesome tutorials. Im going to start learning JavaScript and JQuery