JavaScript Tutorial : Introduction for beginners (Basic)

JavaScript Tutorial : Introduction for beginners (Basic)

1) What is JavaScript?

Javascript is a client-side scripting language. it’s used for developing websites.

Also Read :

2) How to use JavaScript in HTML code.

<!DOCTYPE html>
<html>
  <head>
    <title>Java Script Tutorial</title>
  </head>

  <body>
    <h1> My First JavaScript Program</h1>
    
    <script type=”text/javascript”>
	//JavaScript code
    </script>
  </body>
</html>

Check this – How to create a WordPress Website using XAMPP

3) Variables

var [variable name] = [data type];

var firstName = String;

Main Data Types

  • String – letters or numbers
  • Numbers – only numbers
  • Boolean – True or False

// String

<script type="text/javascipt">
  var firstName = String;
  firstName = ("James");
  document.write(firstName);
</script>
CtechF - JavaScript - 1

//Number

<script type="text/javascript">
  var Age = Number(25);
  document.write(Age);
</script>
CtechF - JavaScript - 2
<script type="text/javascript">
   var firstNo = Number(50);
   var secondNo = Number(25);
   document.write(firstNo + secondNo);
</script>
CtechF - JavaScript - 3

4) Array

<script type="text/javascript">
   var firstNames = new Array();
   firstNames [0] = "Name 1 ";
   firstNames [1] = "Name 2 ";
   document.write("1) " + firstNames [0]);
   document.write("2) " + firstNames [1]);
</script>
CtechF - JavaScript - 4
<script type="text/javascript">
   var mobileNo = new Array();
   mobileNo [0] =  112455775878;
   mobileNo [1] =  115785745725;
   document.writeln("1) " + mobileNo [0] +"<br>");
   document.writeln("2) " + mobileNo [1] +"<br>");
</script>
CtechF - JavaScript - 5

5) Operators

5.1) Mathematical Operators

  • (+) – Adding
  • (-) – Subtracting
  • (*) – Multiplication
  • (/) – Dividing
  • (%) – Mod
<script type="text/javascript">
   var No1 = Number(101);
   var No2 = Number(20);
   document.writeln(No1 + No2 +  "<br>");
   document.writeln(No1 - No2 +  "<br>");
   document.writeln(No1 / No2 +  "<br>");
   document.writeln(No1  * No2 +  "<br>");
   document.writeln(No1 % No2 +  "<br>");
</script>
CtechF - JavaScript - 6

5.2) Assignment Operators

  •  (=) – Normal equation
  • (+=) – Addition with equation
  • (-=) – Subtraction with equation
  • (*=) – Multiplication with equation
  • (/=) – dived and equation
  • (%=) – Mod and equation
<script type="text/javascript">
   var No1 = Number(101);
   var No2 = Number(20);
   document.writeln(No1 += No2); // No1 = No1 + No2
   document.writeln(No1 -= No2); // No1 = No1 - No2
   document.writeln(No1 /= No2); // No1 = No1 / No2
   document.writeln(No1  *= No2); // No1 = No1 * No2
   document.writeln(No1 %= No2); // No1 = No1 % No2
</script>

5.3) Logical Operators

  • && (AND)
  • || (OR)
  • ! (NOT)
<script type="text/javascript">
   var No1 = Number(100);
   var No2 = Number(25);
   document.writeln(No1 > 120 && No2 < 30);
   document.writeln(No1 < 120 || No2 < 30);
   document.writeln(!(No1 > No2));
</script>
CtechF - JavaScript - 8

5.4) Relational Operators

  • (!=) – not equal to
  • (==) – equal
  • (>) – greater than
  • (<) – less than
  • (>=) – greater than or equal to
  • (<=) – less than or equal to
<script type="text/javascript">
   var No1 = new Number(101);
   var No2 = new Number(20);
   document.writeln(No1 != No2);
   document.writeln(No1 == No2);
   document.writeln(No1 > No2);
   document.writeln(No1  < No2);
   document.writeln(No1 >= No2); 
   document.writeln(No1 <= No2);
</script>
CtechF - JavaScript - 9

5.5) Increment and decrements

  • (++) – Increment
  • (–) – Decrement
<script type="text/javascript">
   var No1 = new Number(101);
   var No2 = new Number(20);
   document.writeln(++No1); // No1 + 1
   document.writeln(++ No2); //No2 - 1
</script>
CtechF - JavaScript - 10

6) Order of operators

  • () – Brackets
  • (++, –) – Increments and Decrements
  • (*, /, %) – Multiplication, Divided, Mod
  • (+, -) – Addition and Subtraction
  •  (>, <, >=, <=) – greater, less, greater or equal, less or equal
  • (==, !=) – equal, not equal
  • (!) – NOT
  • (&&) – AND
  • (||) – OR
<script type="text/javascript">
   var No1 = new Number(101);
   var No2 = new Number(20);
   document.write((No1+No2)/2*5);
</script>
CtechF - JavaScript - 2

7) Special Symbol

  • (\’) – to show single quotation (‘) mark
  • (\”) – to show double quotation (“) mark
  • (\\) – to show backslash (\) mark
<script type="text/javascript">
   var txt = "\"CtechF\" -  \\2019\\, \'Technology\'";
   document.write(txt);
</script>
CtechF - JavaScript - 11

8) Comments

8.1) One-line comments

<script type="text/javascript">
   // Welcome to my Website
   document.write("<h3>ctechf.com</h3>");
   //document.write("<p>Hello World!</p>");
</script>
CtechF - JavaScript - 12

8.2) Multi-line comments

<script type="text/javascript">
  /* 
   Welcome to my Website
   document.write("<p>Hello World!</p>");
  */
   document.write("<h3> Welcome to my Website</h3>");
</script>
CtechF - JavaScript - 13

9) Conditional Statement

9.1) if condition (only if)

if (condition){
  // statements
}
<script type="text/javascript">
  var date = new Date();
  var time = date.getHours();
  document.writeln("<h2>" +time+ "</h2>");
    if (time > 18) {
      document.writeln("<h5>Good Night</h5>");
    }
</script>
CtechF - JavaScript - 14

9.2) if condition (if – else)

if (condition){
  // statements
} else {
  // statements
}
<script type="text/javascript">
  var date = new Date();
  var time = date.getHours()
  document.writeln("<h2>" +time+ "</h2>");
    if (time < 12) {
      document.writeln("<h5>Good Morning</h5>");
    }else {
      document.writeln("<h5>Good Day</h5>");
    }
</script>
CtechF - JavaScript - 15

9.3) if condition (if – elseif – else)

if (condition){
  // statements
} else if (condition) {
  // statements
} else if (condition) {
  // statements
} else {
  // statements
}
<script type="text/javascript">
  var Marks = Number(98);
  document.writeln("<h2>" +Marks+ "</h2>")
  if (Marks < 36) {
    document.writeln("<h5>WEAK</h5>");
  }else if  (Marks < 56) {
    document.writeln("<h5>GOOD</h5>");
  }else if  (Marks < 66) {
    document.writeln("<h5>VERY GOOD</h5>");
  }else {
    document.writeln("<h5>EXCELLENT</h5>");
  }
</script>
CtechF - JavaScript - 16

9.4) switch condition

switch (condition){
  case “value”:
    //Statement
    break;
  case “value”:
    //Statement
    break;
  case “value”:
    //Statement
    break;
 .
 .
 .
 .
  default:
    //statement
    break;
}
<script type="text/javascript">
  var monthNo = Number(3);
  document.writeln("<h2>" +monthNo+ "</h2>")
  var monthName = String();

  switch (monthNo) {
    case 1: monthName = "January"
    break; 
    case 2: monthName = "February"
    break; 
    case 3: monthName = "March"
    break; 
    case 4: monthName = "April"
    break; 
    case 5: monthName = "May"
    break; 
    case 6: monthName = "June"
    break; 
    case 7: monthName = "July"
    break; 
    case 8: monthName = "August"
    break;
    case 9: monthName = "September"
    break; 
    case 10: monthName = "October"
    break; 
    case 11: monthName = "November"
    break; 
    case 12: monthName = "December"
    break;

    default: 
      monthName = "Invalid"
    break;
  }
  document.writeln("<h5>" +monthName+ "</h5>");
</script>
CtechF - JavaScript - 17

10) Loop

10.1) for loop

for (//) {
  //Statement
}
<script type="text/javascript">
  var a = Number(0);
  for (a=0; a<=5; a++) {
    document.write("This number is " +a);
    document.write("<br>");
  }
</script>
CtechF - JavaScript - 18

10.2) do while loop

do {
  //Statement
} while(condition)
<script type="text/javascript">
  var a = Number(1);
  
  do {
    a = a + 1;
  } while (a <= 10);
  document.write(a);
</script>
CtechF - JavaScript - 19

10.3) while loop

while (condition){
  //Statement
}
<script type="text/javascript">
  var a = Number(1);
  
  while (a <= 8) {
    a = a + 1;
  }
  document.write(a);
</script>
CtechF - JavaScript - 20

Also Read :


Sources:


Hi Friends,

Hope this post will help you to Learn something, If you enjoy my work then please share my posts with your buddies and anyone who might be interested in programming and don’t forget to subscribe.

If you had any problem with this post, please do mention it in the comment section.

Liked it? Take a second to support CtechF on Patreon!

Leave a Reply

117 Shares
Share
Tweet
Share
Pin
Share