Short Javascript Tutorial

=========================
Short JavaScript Tutorial
=========================

This tutorial is meant for people who understand the basic concepts of
programming and who wish to get an overview of Javascript.

You must also know HTML to get this.

Javascript is a scripting language for adding interactivity to HTML pages.
It is usually embedded directly into HTML pages and executes as an interpreted
language without being compiled.

To use Javascript in HTML, place your javascript code between the HTML
tags. For example:

<html><body><script type="text/javascript">document.write("Hello World!");
</script></body></html>

As you can see, javascript is object-oriented. One object it used in the above
example was the ‘document’ object, which represents the document loaded into the
browser window. This object provides access to all HTML elements in a page from
within the script.

One function found in this document object was the ‘Write’ function. This
function displays it’s arguments as text on the webpage.

To call a function specify it’s parent object followed by a dot, then the
function or member name, followed by the arguments in parenthesis.

object.function(arguments);

Don’t forget that each statement in Javascript ends with a semi-colon.

When using the write function, you can also specify HTML code in your string
argument, for example:

document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<font face=\"Lucida Console\">This is Lucida Console</font>");

Notice on the last example how I used double quotes within the string argument.
I escaped it with a backslash. Use this to escape special characters in string
such as the double quote.

Comments in javascript:

\\ Single line comment

/*
This is
a multi-line
comment
*/

Single line comments don’t have to start at the beginning of the line, they may
also appear at the end of a statement on a line.

Now the most important part of most programming or scripting languages is the
use of variables.

Declaring and assigning variables:

var x;
x=5;
var y=24;
var msg="Hello World!";

As you can see the data types assigned to the variables vary in format.
String values are enclosed in single or boudle quotes and integers are just
given their number values without format.

You may also use the current values of variables for assigning a value to a
variable:

y=5;x=3;y=x+2;x=x-1;

When using math with variables in javascript the following operators can be
used:

Addition: x=y+2
Subtraction: x=y-2
Multiplication: x=y*2
Division: x=y/2
Modulus: x=y%2
Increment: x=++y or y++;x=x+y
Decrement x=–y or y–;x=–y

In case you don’t know modulus division is dividing by the given number and
any remainders from the division is the result. Example 5 % 3 = 2, 7 % 7 = 0.

Condition statements:

if (condition) {
\\ code executed if condition is true
}

when checking a condition, the following comparison operators can be used:

== is equal to
=== value and type are equal to
!= is not equal to
> is greater than
= is greater than or equal to
<= is less than or equal to

Example of a conditional statement:

If (age>12) {
document.write("Welcome to the forum! (noob)");
}

Checking for multiple conditions using logical operators can be used:

&& AND, || OR, ! NOT

if (age<12 && name!="jakash3") {
document.write("Either you're too young or you tried to steal jakash3's nick");
}
if (money<50||money>100) {
document.write("You don't have enough money");
document.writE("or you tried to make a payment over 100");
else {
document.write("Thank you!");
}

Notice I used Else to represent something else to do if the condition is false.

Example for Else If statments:

if (you=="black") {
document.write("You are black.");
else if (you=="white") {
document.write("You are white.");
else {
document.write("The game of chess does not have that color.");
}

A convienient way of executing conditional code based on the value of a variable
is using the Switch statment:

switch (n) {
case 1:
document.write("The light is on");
break;
case 0:
document.write("The light is off");
break;
default:
document.write("The light is broken");
}

Here we have the expression or variable n that is evaluated. The value of it is
then compared to each value specified in each case statement within the block,
if the values are equal then the code following that case statement is executed.
The break statement is used to prevent code from running into the next case
statement and skip to the next code after the switch block.

The line labeled 'default' will run as a case if no other case statements have a
matching value.

To declare a function, specify the keyword 'function' at the beginning of your
statement with syntax like this:

function functionname(var1,var2,var3) {
\\function code here
\\return var1*var2+var3
}

Functions may be called in javascript or even in HTML:

<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage()" />
</form>
</body>
</html>

HTML used the button as an input object with the onClick attribute set to the
function name of the function found in the javascript code to execute.

So when the button is clicked, displaymessage() will be ran.
It uses the alert built-in function which displays a message box.

The For loop in javascript is exactly the same the for loop in c++:

for (var=startvalue;var<=endvalue;var=var+i) {
\\do stuff
}

Three statements are used within the parameters of For. The first is an
assignment of the starting value of a variable, the next is a conditional
statement which keeps the loop going as long as that condition is true, and the
last is what to do with the variable with each loop in For.

While statement introduces the while loop which loops a block of code while a
condition is true:

while (condition) {
\\loop this code
}

Also, you may use the break command anytime to get out of a loop.

To learn more java or find a reference, visit w3schools.com

3 thoughts on “Short Javascript Tutorial

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: