JOBS4TIMES

Java Script Tutorial Point

Agenda :

Introduction to JavaScript

<body>
 <script type="text/javascript">
  <!-- 
   document.write("Welcome to JavaScript");
   //-->
 </script>   
</body>

JavaScript - Comments and Statements

<body>
 <script type="text/javascript">
 
  // comment goes here
  
  /*
    This is multiline comment
  */
  
 </script>   
</body>

JavaScript - Variables

<body>

 <script type="text/javascript">
  var x=234;
  document.write(x); //234
  document.write(X); //no output
  
 </script>
    
</body>

JavaScript - Different Types of Variables

<body>

 <script type="text/javascript">
 
  var cap=234;
  document.writeln(cap);
  
  var rap=12.23456;
  document.writeln(rap);
  
  var tap=-12.23456;
  document.writeln(tap);
  
  var nap="Text Here <br>";
  document.writeln(nap);
  
  
  var text="swamy said, \"Strength is Life Weakness is Death\" ";
  document.write(text);
  
  var text1=null;
  document.write(text1);
  
  var text2=false;
  document.write(text2);
 
  
 </script>

JavaScript - Using Variables with Strings

<body>

 <script type="text/javascript">
 
  var name="Ashok";
  var age=25;
  document.writeln(name +" is my name and age is : "+ age); 
  
 </script>
    
</body>

JavaScript - Functions

<body>

 <script type="text/javascript">
 
 function fun(){
   alert("Hai");
 }
 
 fun(); 
  
 </script>
    
</body>

<body>

 <script type="text/javascript">
 
 function fun(){
   alert("Hai");
 }
 
 </script>
 
 <form>
  <input type="button" value="Touch Me" onclick="fun()">
 </form>
    
</body>

JavaScript - Using Parameters with Functions

<body>

 <script type="text/javascript">
 
 function fun(x){
   alert("I Love : "+x);
 }
 
 fun("Ashok");
 </script>

<body>
 <script type="text/javascript">
 
 function fun(x){
   alert("I Love : "+x);
 }
 
 fun("Ashok");
 fun("Cricket");
 fun("Footboll");
 </script>
</body>

JavaScript - Functions with Multiple Parameters

<body>
 <script type="text/javascript">
 
 function apples(one, two){
   document.write(one+ " is better than  " +two+"<br/>");
 }
 
 apples("Ashok","Akash");
 apples("Movies","Videos");
 apples("Coconut","Grapes");
 </script>
</body>

JavaScript - The return Statement

<body>
 <script type="text/javascript">
 
 function funReturn(){
  return "very easy";
 }
 
 document.write(funReturn());
 </script>
</body>

<body>
 <script type="text/javascript">
 
 function addNumbers(a,b){
  var c=a+b;
  return c;
 }
 
 document.write(addNumbers(23,56));
 </script>
</body>

JavaScript - Calling a Function From Another Function

<body>
 <script type="text/javascript">
 
 function doFirst(){
  document.write("I'm First !");
 }
 function doSecond(){
  document.write(" I'm Second ");
 }
 function start(){
  doFirst();
  doSecond();
 }
 
 start();
 </script>
</body>

<body>
 <script type="text/javascript">
 
 function doFirst(){
  document.write("I'm First !");
   doSecond()
 }
 function doSecond(){
  document.write(" I'm Second ");
   doFirst();
 }
 
  doFirst();
 </script>
</body>

output : Infinite loop

JavaScript - Global, Local Variables

<body>
 <script type="text/javascript">
 var flower=" rose "; 
 function fly(){
  var flower=" rose1 ";
  document.write(flower);
 }
 
 fly();
 document.write(flower);
 </script>
</body>

JavaScript - Math Operators

<body>
 <script type="text/javascript">
   var count=12+23+23;
   document.write(count+"<br>");
   
   var count=12+23-234;
   document.write(count +"<br>");
   
   var count=8/2;
   document.write(count+"<br>");
   
   var count=23%3;
   document.write(count+"<br>");
   
   var count=23;
   count=count+1;
   document.write(count+"<br>");
   
   var count=23;
   count++;
   document.write(count+"<br>");
   
   var count=23;
   count--;
   document.write(count+"<br>");
         
 </script>
</body>

JavaScript - Assignment Operators

<body>
 <script type="text/javascript">
   
   var count=23;
   count%=34;
   document.write(count+"<br>");
   
   var count=23;
   count/=5;
   document.write(count+"<br>");
   
   var count=23;
   count*=7;
   document.write(count+"<br>");
   
   var count=23;
   count+=7;
   count-=7;
   count/=7;
   count*=7;
   count%=7;
   document.write(count);  
   
 </script>
</body>

JavaScript - if Statement

<body>
 <script type="text/javascript">
   
   var count=23;
   var temp=23;
   if(count==temp){
	   document.write("Ya it's work");
   }
      
 </script>
</body>

Note : Instead of == we are using !=, <, <=, >, >= . these will be work fine

JavaScript - if else Statement

<body>
 <script type="text/javascript">
   
   var blue=23;
   var red=23;
   
   if(blue==red){
	   document.write("condition is true");
   }
   else{
	  document.write("condition id false"); 
   }
      
 </script>
</body>

JavaScript - Nesting and Fridays!

<body>
 <script type="text/javascript">
   
   var firstName = "Ashok";
   var lastName = "Aggidi";
   
   if(firstName=="Ashok"){
	if(lastName=="Aggidi"){
	  document.write("Welcome to Ashok Aggidi");
    }
    else{
	 document.write("Welcome to Some Other"); 
    }
   }
      
 </script> 
</body>

JavaScript - Complex Conditions

<body>
 <script type="text/javascript">
   
   var firstName = "Ashok";
   var lastName = "Aggidi";
   
   if((firstName=="Ashok") && (lastName=="Aggidi")){
	 document.write("Welcome to Ashok Aggidi");
    }
          
 </script> 
</body>

JavaScript - switch

<body>
 <script type="text/javascript">
 var girl="beauty";
 
 switch(girl){
 
  case "beauty":
  document.write("She is beauty");
  break;
  
  case "rosy":
  document.write("She is rosy");
  break;
  
  default:
  document.write("It is default");
 }
 </script> 
</body>

JavaScript - for Loop

<body>
 <script type="text/javascript">
 for(x=0;x<10;x++){
 document.write("welcome to JS"+"<br>")
 }
 </script> 
</body>

JavaScript - while Loop

<body>
 <script type="text/javascript">
 var x=1;
 while(x<10){
 document.write(x+" welcome to JS <br>");
 x++;
 }
 </script> 
</body>

JavaScript - do while

<body>
 <script type="text/javascript">
 var x=11;
 do{
 document.write(x+" welcome to JS <br>");
 x++;
 }while(x<=10);
 </script> 
</body>

JavaScript - Event Handlers

 <form>
  <input type="button" value="Touch Me" onclick="alert('Hai'); alert('Hello');"/>
 </form>

JavaScript - onMouseOver onLoad

 <a href="http://jobs4times.com" onmouseover="alert('mouse over')">Mouse over !</a> 
   <br><br>  
 <a href="http://jobs4times.com" onmouseout="alert('mouse out')">Mouse out !</a>

<body onload="alert('Your site is Loaded')">
  text text text text text text
</body>

<body onunload="alert('Good Bye !')">
  text text text text text text
</body>

JavaScript - Objects

<body>
 <script type="text/javascript">
  var name="Hai I'm Ashok";
  document.write(name.length);
 </script> 
</body>

JavaScript - Creating Our Own Objects

<html>
<head>
 <script type="text/javascript">
  function person(name,age){
   this.name=name;
   this.age=age;
  }
  var ashok=new person("Ashok Times", 25);
  var jobs=new person("Jobs Times", 27);
 </script>    
</head>
  
<body>
 <script type="text/javascript">
  document.write(ashok.name);
  document.write(ashok.age +"<br>");
  document.write(jobs.name);
  document.write(jobs.age);
 </script> 
</body>
</html>

JavaScript - Object Initializers

<html>
<head>
 <script type="text/javascript">
   james={name:"James Times", age:25};
   jobs={name:"jobs Times", age:20};
 </script>    
</head>
  
<body>
 <script type="text/javascript">
  document.write(james.name+" loves "+jobs.name+" because she is "+jobs.age);
 </script> 
</body>
</html>

JavaScript - Adding Methods to Our Objects

<html>
<head>
 <script type="text/javascript">
  function people(name, age){
   this.name=name;
   this.age=age;
   this.yearsUntilRetire=yearsLeft;
  }
  function yearsLeft(){
   var numYears=65-this.age;
   return numYears;
  }
  
  var james=new people("JamesOne",25);
  var jocobs=new people("jocobs roberts",55);
 </script>    
</head>
  
<body>
 <script type="text/javascript">
  document.write(jocobs.yearsUntilRetire());
 </script> 
</body>
</html>

JavaScript - Arrays

<body>
 <script type="text/javascript">
  var mobile=new Array("Aircel","Airtel","BSNL","TataDocomo","Vodofone");
 
  document.write(mobile+"<br>");
  document.write(mobile[4]);
 </script> 
</body>

JavaScript - Other Ways to Create Arrays

<body>
 <script type="text/javascript">
  var mobile=new Array(4);
  mobile[0]="Airtel";
  mobile[1]="BSNL";
  mobile[2]="TataDocomo";
  mobile[3]="Vodofone";
   
  document.write(mobile+"<br>");
  document.write(mobile[3]);
 </script> 
</body>

<body>
 <script type="text/javascript">
  var mobile=new Array();
  mobile[0]="Airtel";
  mobile[1]="BSNL";
  mobile[2]="TataDocomo";
  mobile[3]="Vodofone";
   
  document.write(mobile+"<br>");
  document.write(mobile[3]);
 </script> 
</body>

JavaScript - Array Properties and Methods

<body>
 <script type="text/javascript">
  var mobile=new Array("Airtel","BSNL","IDEA");
  var city=new Array("HYD","Bang","Chennai")
  
  var mobileCities=mobile.concat(city);   
  document.write(mobileCities[5]+"<br>"); // Chennai
  
  var citiMobiles=city.concat(mobile);
  document.write(citiMobiles[5]); //IDEA
 </script> 
</body>

JavaScript - join and pop

 <script type="text/javascript">
  var mobile=new Array("Airtel","BSNL","IDEA");
  var string1=mobile.join(" - "); 
  document.write(string1); //Airtel - BSNL - IDEA
   
  document.write("<br>");
  var movies=new Array("BadMen","Xmen","IronMen");
  document.write(movies[2]+"<br>");
  movies.pop();
  document.write(movies[2]);  
 </script>

JavaScript - reverse, push, sort

 <script type="text/javascript">
  var mobile=new Array("Airtel","IDEA","BSNL");
  
  mobile.reverse();
  mobile.push("Aircel","Tata")
  mobile.sort();
  
  var string1=mobile.join(); 
  document.write(string1);   
 </script>

JavaScript - Add Array Elements Using a Loop

 <script type="text/javascript">
  var pie=prompt("Enter your name :", "") 
  document.write("Hello "+pie);
 </script>

 <script type="text/javascript">
  var city=new Array(3);
  for(i=0;i<3;i++){
   city[i]=prompt("Add something to Array :"+ " ");
  } 
  document.write(city[0] + city[1] + city[2]);  
 </script>

JavaScript - Cool Technique to Print Array Elements

 <script type="text/javascript">
  var stuff=new Array("mobiles","movies","videos","songs");
  stuff.sort();
  for(i=0;i<stuff.length;i++){
   document.write(stuff[i]+"<br>");
  }  
 </script>

JavaScript - Associative Arrays

 <script type="text/javascript">
  var johny=new Array();
  johny["food"]="Pizza";
  johny["color"]="red";
  
  document.write("johny favorate food is : "+ johny["food"]);  
 </script>

JavaScript - Math Objects

 <script type="text/javascript">
  
  document.write(Math.PI +"<br>"); 
  document.write(Math.E +"<br>"); 
  
  var n=prompt("Enter a Number ");
  var answer=Math.sqrt(n);
  document.write("The sqrt of "+n+" is : "+answer);
 </script>

JavaScript - Date Objects

 <script type="text/javascript">
  function printTime(){
   var now=new Date();
   var hours=now.getHours();
   var minutes=now.getMinutes();
   var seconds=now.getSeconds();
   var milliSec=now.getMilliseconds();
   document.write(now +"<br>");
   document.write(hours +":"+minutes+":"+seconds+":"+milliSec +"<br>");
  }
  setInterval("printTime()",1000);
 </script>

JavaScript - Accessing Forms

<body>
 <form>
  UserName : <input type="text"/>
  <input type="button" value="Submit"/>
 </form>

 <script type="text/javascript">
  var x=document.forms[0].length;
  document.write(x);
 </script> 
</body>

JavaScript - Accessing Form Elements

<body>
 <form name="registerForm">
  UserName : <input type="text" name="username"/>
  Password : <input type="password" name="password"/>
  <input type="button" value="Submit"/>
 </form>

 <script type="text/javascript">
  var x=document.forms[0].elements[0].name;
  document.write(x + "<br>");
  
  var y=document.forms[0].elements[1].name;
  document.write(y + "<br>");
  
  var z=document.registerForm.username.name;
  document.write(z + "<br>");
 </script> 
</body>

JavaScript - Simple Form Validation

<html>
<head>
 <script type="text/javascript">
  function validator(){
   if(document.registerForm.box.checked)
    alert("Yes ! It's Checked");
   else
    alert("It's not Checked");
  }
 </script>   
</head>
  
<body>
 <form name="registerForm">
  <input type="checkbox" name="box"/>
  <input type="button" value="Press Me!" onclick="validator()"/>
 </form> 
</body>
</html>

BACK