JavaScript Tutorial

Life is 10% what happens to us and 90% how we react to it. If you don't build your dream, someone else will hire you to help them build theirs.

JavaScript Tutorial

JavaScript is a client-side scripting language. This means the web surfer’s browser will be running the script. The opposite of client-side is server-side, which occurs in a language like PHP or Asp.Net.

Programs in JavaScript are called scripts. They need no compilation, you just write a script, append it to HTML-page and it works. Some people say JavaScript is like Python, some find it similar to Ruby or Self. The truth is that JavaScript is on its own, a really elegant but specific language.
Javascript can modify the content of web page, add/remove tags/change style etc. in short javascript can alter the web page only on the browser (client end). It cannot modify the data on server side. For server interaction, java script takes help of server side languages.

Setup your environment

Java script environment setup is simpler than other languages. It need only two tools:
1. First we need a code editor.
2. Supported Browser.

JavaScript is an interpreted language. That means: no compilation. You just write code and attach it to HTML. The simplest way is to put JavaScript directives into SCRIPT tag somewhere inside the page. Here is a SCRIPT tag containing single JavaScript statement.

<!DOCTYPE  HTML>
  <html>
  <head>
  </head>
  <body>
  <h2>Heading  text</h2>
  <script type="text/JavaScript">
  alert(‘hellow  world’);
  </script>
  <p>here  is paragraph text</p>
  </body>
  </html>

This example makes use of following elements:

<script> … </script>
<script> tag tells browser that there is executable content inside. In older HTML standard, namely HTML4, a special attribute type was required. Although more up-to-date, HTML5 makes it optional.
alert(…)
Outputs a message window on the screen and awaits until visitor presses OK.

You can place the java script code within the HTML code or you can create a separate file called “script file”. This script file is saved with .js extension.

Operators and variable in JavaScript

Almost all operators are supported in JavaScript as in other programing languages i.e. Arithmetic operator, Comparison operator and increment/decrement operator.

Variables are declared in javascript with “var” keyword. for example:
var a=2;
var b=10;
var c=a+b;

In JavaScript you don’t have to declare variables before you use them. If you don’t know what declaring is, don’t worry about it. It isn’t important!

JavaScript variable names may not start with a numeral (0-9). These variable names would be illegal: 7lucky, 99bottlesofbeer, and 3zacharm.

A good rule of thumb is to have your variable names start with a lowercase letter (a-z) and use underscores to separate a name with multiple words (i.e. my_var, strong_man, happy_coder, etc).

Function in JavaScript

A function that does not execute when a page loads should be placed inside the head of your HTML document. All you have to do is tell the browser you’re making a function, give the function a name, and then write the JavaScript like normal. for example:

<script type="text/javascript">  
<!--  
function popup() 
{      
alert("Hello World");  
}  
//-->  
</script>

This function popup() can be called on any HTML event like button click, page load etc.

These functions can then be called when needed, and the code contained within them will be run. This makes it very easy to reuse code without having to repeat it within your script. Functions can be declared in two ways:

1. Normal function declaration.

<script  type=”text/javascript”>
  function  myFunc(){
  // function  code here…..
  }
</script>

2. Anonymous function, assigned to a variable. Here function name is not defined at the time of declaration. Function is assigned to a variable and called by this.

<script  type=”text/javascript”>
  functionName=function(variables){
                  ///code here
  }
  </script>

This function is called as:

  <pre>
  functionName(listofVariables);
  </pre>
passing values to function

Values can be passed to a function as arguments. When a function is called, value(s) passed to the function are assigned to the variables in the brackets of function declaration. for example:

<script  type=”text/javascript”>
  function  stringlen(str){
  if(str!=””){
    alert(str.length);
  }
  }
  //function call
  stringlen(“hello  world”);
</script>
return statement

If a function is returning any value then this value is specified with return keyword. return statement cause a function to stop execution.

<script  type=”text/javascript”>
  function sum(a,b){
                  var c=a+b;
                  return c;
  }
  </script>
Writing with script

Script can be written in two ways. Which are:

1. Writing while the page is still loading

In this method, script is executed while page in still loading state. It run as a part of initial layout of the page. For example:

<script type=”text/javascript”>
  document.write(“Initial text while loading”);
</script>

Loop is used to perform the same routine over and over. There are two different kinds of loops: for and while.

The for loop is used when you know in advance how many times the script should perform.
For example if you wanted it to create exactly 10 lines.

For Loop
for (a=1; a<=10; a=a+1)
{
// Here goes the script lines you want to loop.
}
Enter a variablename where it says variable.
Enter the startvalue of the loop where it says startvalue.
Enter the endvalue of the loop where it says endvalue.
Enter the factor each loop should increment where it says 
incrementfactor.
while Loop

The while loop is used when you want the loop to continue until a certain condition becomes true. for example

var a=1;
while (a<=10)
{
// Here goes the script lines you want to loop.
a=a+1;
} 
BREAK & CONTINUE

Two special commands can be used in loops: break and continue.
break simply breaks the loop and continues with what might follow after the loop. An example would be if you had a loop calculate the squareroot of numbers decrementing from 50.
Since calculating the square root of a negative number is an illegal mathemathic operation you would like the loop to end when the square root of zero had been calculated.
To do this you would add this inside your loop:

if (value==0) {break};

continue breaks the current loop and continues with the next value. An example would be if you had a loop that divided a certain value with a factor of numbers ranging from -50 to +50. Since division by zero is an illegal mathemathic procedure the loop would look like this:

for (value=-50; value<=50; value=value+1)
{
if (value==0) {continue};
document.write((100/value)+"
"); }