Javascript একটি client side scripting language বা browser scripting যার অর্থ হচ্ছে Browser এই script গুলোকে execute করবে যেমন server side scripting language (PHP, ASP.NET, C++, Java) গুলোর কোড  Web Server এর মাধ্যমে execute হয়। JAVA এবং Javascript সম্পূর্ন আলাদা ল্যাংগুয়েজ। JAVA হচ্ছে পূর্নাঙ্গ একটা Object Oriented Programming Language আর Javascript ও Programming Language তবে এটা শুধু Browser কাজ করে যেখানে JAVA দিয়ে সম্পূর্ন এপ্লিকেশন বানানো যায়।

JavaScript Variable

Data Type

  • Numerical – 1.Integer 2.Floating-point
  • Boolean – true 1 and false 0
  • undefined – Variable declaration without assign anything
  • string – text
  • null – Variable declaration with assign anything
<!DOCTYPE html>
<html>
<head>
<script>
var workratio;
document.write (typeof workratio + '<br/>') ;

var workratio = 'Hi workratio';
document.write (typeof workratio + '<br/>');

var workratio = 15;
document.write (typeof workratio + '<br/>');

var workratio = 20.325;
document.write (typeof workratio + '<br/>');

var workratio = false;
document.write (typeof workratio + '<br/>');

var workratio = null;
document.write (typeof workratio + '<br/>');
</script>
</head>
<body>
<!-- HTML element here -->
</body>
</html>

JavaScript Operator

Arithmetic Operator

  • +
  • *
  • /
  • %
  • ++

Assignment Operator

  • =
  • +=
  • -=
  • *=
  • /=
  • %=

Comparison Operator

  • ==
  • >
  • <
  • <=
  • >=
<!DOCTYPE html>
<html>
<head>
   <script>
//( + ) plus operator
     var x = 15;
     var y = 10;
     output = x + y;
     document.write('x + y : ' + output + '<br/>');

// ( - ) minus operator
    output = x - y;
    document.write('x - y : ' + output + '<br/>');

// ( * ) multiply operator
    output = x * y;
    document.write('x * y : ' + output + '<br/>');

// ( / ) division operator
    output = x / y;
    document.write('x / y : ' + output + '<br/>');

// ( % ) modulas operator
    output = x % y;
    document.write('x % y : ' + output + '<br/>');

// ( ++ ) post increment operator
    x++;
    document.write('x++ : ' + x + '<br/>');

// ( ++ ) pre increment operator
    ++x;
    document.write('++x : ' + x + '<br/>');

// ( -- ) post decrement operator
    y--;
    document.write('y-- : ' + y + '<br/>');

// ( -- ) pre decrement operator
    --y;
    document.write('-- y : ' + y + '<br/>');

   </script>
</head>
<body>
 <!-- any HTML element here -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
   <script>
     var x = 15;
     var y = 10;
     x += y;
     document.write('x += y : ' + x + '<br/>');

     x -= y;
     document.write('x -= y : ' + x + '<br/>');

      x *= y;
     document.write('x *= y : ' + x + '<br/>');

     x /= y;
     document.write('x /= y : ' + x + '<br/>');

     x %= y;
     document.write('x %= y : ' + x);

   </script>
</head>
<body>
<!-- any HTML element here -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
  var x = 15;
  var y = 16;
  if (x == y) {
   document.write('values are equal');
  } 
  else {
  document.write('values are not equal');
  }
</script>
</head>
<body>
<!-- any HTML element here -->
</body>
</html>

JavaScript Function

<html>
<head>
<script type="text/JavaScript">
function popup() {
alert("Hello World")
}
</script>
</head>
<body>
<input type="button" onclick="popup()" value="Click">
</body>
</html>
<html>
<head>
<!-- Function with Parameters -->
<script type="text/javascript">
function getAddition(firstNumber,secondNumber){
var result;
result = firstNumber + secondNumber;
return result;
}
var myResult = getAddition(10,20);
document.write(myResult);
</script>
</head>
<body>
</body>
</html>

JavaScript Events

<!DOCTYPE html>
<html>
<body>
<button onclick="displayDate()">The time is?</button>
<script>
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
</body>
</html>

JavaScript Statement

  • Conditional Statement – if, else, switch
  • Loop Statement – while, for
  • Jump Statement – return, break
  • Expression Statement – Assigned var value
<!DOCTYPE html>
<html>
<head>
<!-- if statement -->
<script>
var x = 'hi';
if(x == 'hi'){
document.write('yes "x" is equal to "hi"');
}
</script>
</head>
<body>
<!-- any HTML element here -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!-- if else statement -->
<script>
var x = 5;
var y = 8;
if(x == y){
  document.write('IF statement executed');
}else{
document.write('condition not true.ELSE statement executed');
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!-- else if statement --> 
<script>
var i = 5;
if(i < 3){
document.write('Hi "i" is small than 5');
}else if(i == 5){
document.write('Hi "i" is equal to 5');
}else{
document.write('Hi "i" is greater then 5');
}
</script>
</head>
<body>
<!-- any HTML element here -->
</body>
</html>
<!DOCTYPE html>
 <html>
<head>
<!-- while loop -->
 <script>
    var i = 0;
	while( i < 20){
		if(i % 2 != 0){
			document.write(i + '<br/>');
		}
		i++;
	}
 </script>
</head>
<body>
<!-- any HTML element here -->
</body>
</html>
<!DOCTYPE html>
 <html>
<head>
<!-- do while loop -->
  <script>
   var i = 0;
do 
   {
document.write(i+ '<br>');
   i++;
   }
 while (i <= 8)
  </script>
</head>
<body>
<!-- any HTML element here -->
</body>
</html>
<!DOCTYPE html>
 <html>
<head>
<!-- for loop -->
  <script>
    for(i = 10; i > 0; i--){
    document.write(i + '<br/>');
   }
  </script>
</head>
<body>
<!-- any HTML element here -->
</body>
</html>