Trending

6/recent/ticker-posts

Introduction To JavaScript | A complete guide to Beginner (Part 1)

JavaScript

JavaScript abbreviated as JS is a programming language. It was created in 1995 by Brendan Eich. It is designed to run as a scripting language in a host environment, and it is up to the host environment to provide mechanisms for communicating with the outside world. 
The most common host environment is the browser. 

Features:
  • JS is used to make live web pages. 
  • These scripts works on client ad well as server side. 
  • These scripts are written inside the HTML page and run as page loads. 
  • It is a light-weight cross platform, scripting language. 
  • It is a fundamental aspect in web development. 

JavaScript

JavaScript is a powerful and an interactive language. 

Client-Side Scripting : means everything on the web application page available on the user's end. 

Server-Side Scripting : means everything on the web application  page available on the server end. 

---------------------

What is HTML ? | HTML Tags and their uses---------------------

Ways to add JS in your file:

  1. Internal JS : This type is used anywhere inside the HTML file using <script> tag.
  2. External JS : This type of JS is used outside the HTML file by creating a .js extension file and adding the JavaScript code inside it. It is added in the HTML file using src attribute and script tag. 

Syntax:

JS code is inserted in between the <script> & </script> tag. 
Always add a semicolon ( ; ) at the end of every JS function code.
<script>
   JavaScript code
</script>

Let's print a basic code in JS- Hello World! using document.write(): 

Embed JS:

<!DOCTYPE html> 
     <html> 
        <head>
          <title>
             Introduction To JavaScript 
          </title> 
        </head>          
        <body> 
           <script>
              document.write("Hello World!");
           </script>
        </body>
     </html>

Output:


External JS:

index.html
<!DOCTYPE html> 
     <html> 
                <head>
                        <title>
                            External JS 
                        </title> 
                        <script src="script.js" type="script/js">
                </head>          
                <body> 
                </body>
     </html>

script.js
          document.write("Welcome to JS!");


Comment in JS:

<script>
        //This is a single line comment
        document.write("Hello World!");

        /* This is a multiline comment 
        It can consist of 2 or more lines */
</script>

Data types & Variables in JS:

  • JavaScript variables are containers for storing data values.
  • Data type is a type of data any variable can hold.
  • The following data types are used in JavaScript:


Primitive Data Types

They are the common data types in JS.

var is used to declare primitive datatypes in JavaScript.
  • Number - This datatype can be an Integer, Floating value, Exponential value or InfinityUsed to perform Arithmetic operations (+,-,*,/,%). 
    • Ex: var x = 4 ; //integer value
    • var y = 23.78; //decimal or floating point value
    • var z = 10e6; //this means 10 raised to the power of 6
  • String - Any information written using single or double quotes in JavaScript is called a String. Example: Name, Address, etc
    • Ex: var name = "Ravi" ; 
    • var city = 'Mumbai' ; 
  • Boolean - This datatype has only 2 values - true & false. It is used to check a logical condition or comparison operations. 
    • var a = 15; 
    • var b = 10;
    • (a>b)

  • Null - In JS null means nothing in value. When an value does not exist it can be defined as null. 
    • var name = "Simran";
    • name = null;
       This means that the value is null but name is still an object. 
  • Undefined - In JS any variable that exists with no value is called undefined variable. 
    • var email;
            This returns the value of variable email as undefined.
            The value as well as the type both are undefined.
--------------------

Composite Data Types

  • Object -  In JavaScript all the data types are objects ie. Boolean, string, numbers, etc. Objects are variables that contains multiple values.  

  • Arrays - An array is a type of object variable which has the capability of holding multiple values in one array. Array holds keyed collection of values. 

    • There are two syntaxes for creating an empty.
      1.  arr = new Array();
      2. arr = [] ; 
    • Let's create a new array of vegetables using the second syntax
      • var veges = ["Potato", "Tomato", "Carrot", "Cucumber" , "Onion"];
These elements in the array are accessed using the key numbers starting from zero for the first element and so on. 
We can get any element in an array using square brackets. 
for (i=0;i<veges.length;i++){  
document.write(veges[i] + "<br>");  
}
Output:
Potato
Tomato
Carrot
Cucumber
Onion
  • Functions - These are used in JavaScript to perform operations. They can be used multiple times in the same code. 
  • With the help of functions we don't have have to write many lines of code to perform any particular task common to this function. 
  • We can call the function to perform any task. 
    • function fname(arg1, arg2, ...)
            {
                function code to be executed
            }
Example: 
function AddValues(a,b){
    document.write("Result: " + (a+b));
}
AddValues(18, 39);

Output:
Result: 57

  • Operators:

JavaScript operators are symbols that are used to assign values, compare values, perform arithmetic operations and more. 

Operators


Arithmetic operators:

Performs mathematical operations on numbers.
Arithmetic Operators

Comparison operators:

Performs mathematical operations on numbers.
Are used to test for TRUE or FALSE.
Used in logical statements to determine equality or difference between values.
Comparison Operators

Logical operators:

Are used to test for TRUE or FALSE.
Used to determine logic between values.
Logical Operators

Bitwise operators:

Works on 32 bits numbers. 
Any numeric operand in the operation is converted into a 32 bit number.
The result is converted back to a JavaScript number.
Bitwise Operators


Assignment operators:

Assign values to JavaScript variables.

Assignment Operators

String operators:

Used to determine type of data being stored in a variable.

String operators:


Typeof operators:

Used to determine type of data being stored in a variable.


Happy Learning!!

Post a Comment

0 Comments