Easy to Learn Complete Basics of Javascript

By Unknown 8/15/2013 Leave a Comment
JavaScript Data Types
There are five simple data types in JavaScript: Undefined,Null,Boolean,Number,String JavaScript has one complex data type: Object. Object is an unordered list of name-value pairs.

Asynchronous Scripts
The async attribute applies only to external scripts. It signals the browser to begin downloading the file immediately. The scripts marked as async are not guaranteed to execute in the specified order.
 <!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
    <script type="text/javascript" async src="first1.js"></script>
    <script type="text/javascript" async src="second2.js"></script>
</head>
<body>
</body>
</html>
 
In this code, the second script file might execute before the first. For XHTML documents, specify the async attribute as async="async".
Case-sensitivity
Javascript is case-sensitive. The variables, function names, and operators are all case-sensitive. A variable named test is different from a variable named Test.

<!DOCTYPE HTML><html><head><title>Example</title>  <script type="text/javascript">      var a = 'devang';      var A = 'DEVANG';    document.writeln(a);    document.writeln(A);  </script></head><body></body></html>
  
Identifiers
An identifier is the name of a variable, function, property, or function argument. The following two rules apply to Javascript identifiers:
The first character must be a letter, an underscore (_), or a dollar sign ($). All other characters may be letters, underscores, dollar signs, or numbers.
The camel case is recommended. The first letter of the camel case is lowercase and each letters in the additional words are uppercase:

<!DOCTYPE HTML><html><head><title>Example</title>  <script type="text/javascript">      var name= 'Devang';      var rest= 'are you ios developer??';    document.writeln(name);
    document.writeln(rest);
  </script></head><body></body></html>
 

Comments
JavaScript uses C-style comments for both single-line and block comments.
A single-line comment begins with two forward-slash characters: //single line comment

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
  <script type="text/javascript">
      // var firsetName = 'firsetName';

  </script>
</head>
<body>
</body>
</html>
 

A block comment begins with a forward slash and asterisk (/*) and ends with the opposite (*/):

/*
* This is a multi-line
* Comment
*/

<!DOCTYPE HTML><html><head><title>Example</title>  <script type="text/javascript">     /* var firseName = 'firseName';
      var thisIsAnotherVariable = 'this Is Another Variable';    document.writeln(firseName);    document.writeln(thisIsAnotherVariable);     */
  </script></head><body></body></html>
 
Strict Mode
Javascript strict mode has a different parsing and execution model. Some of the erratic behavior is addressed and errors are thrown for unsafe activities in strict mode. To enable strict mode for an entire script, include the following at the top:
"use strict";
This is a pragma that tells the JavaScript engines to change into strict mode.

<!DOCTYPE HTML><html><head><title>Example</title>  <script type="text/javascript">     "use strict";
     /* var firseName = 'firseName';
      var thisIsAnotherVariable = 'this Is Another Variable';    document.writeln(firseName);    document.writeln(thisIsAnotherVariable);     */
  </script></head><body></body></html>
 
You may specify a function to execute in strict mode:

<!DOCTYPE HTML><html><head><title>Example</title>  <script type="text/javascript">        function doSomething(){
            "use strict";
            //function body
        }
        doSomething();  </script></head><body></body></html>
 

Keywords And Reserved Words

The complete list of JavaScript keywords is:
 
break        do           instanceof    typeof 
case         else         new           var 
catch        finally      return        void 
continue     for          switch        while 
debugger     function     this          with 
default      if           throw 
delete       in           try
The following is the complete list of reserved words for future use:
 
abstract      enum           int             public          yield
boolean       export         interface       short
byte          extends        long            static
char          final          let             super
class         float          native          synchronized 
const         goto           package         throws 
debugger      implements     private         transient 
double        import         protected       volatile


Variables
JavaScript variables are loosely typed. The loosely typed means that the same variable can hold any type of data. To define a variable, use the var operator:

<!DOCTYPE HTML><html><head><title>Example</title>  <script type="text/javascript">       var aVariable;
  </script></head><body></body></html>
 

This code defines a variable named aVariable. aVariable can hold any value.
The code above defines aVariable without initialization. Without initialization aVariable holds the special value undefined.
In JavaScript it's possible to define the variable and set its value at the same time:
 <!DOCTYPE HTML><html><head><title>Example</title>  <script type="text/javascript">       var aVariable = "hi";
  </script></head><body></body></html>
 

To define more than one variable using a single statement:

<!DOCTYPE HTML><html><head><title>Example</title>  <script type="text/javascript">       var aVariable = "hi",found = false, age = 29;
  </script></head><body></body></html>
 

The var operator defines a variable local to the scope where it was defined. Variables that are defined in a function are local variables and are available for use only within that function. Variables that are defined directly in the script element are global variables and can be accessed anywhere, including in other scripts.
The following code defines a variable inside function using var. aVariable is destroyed as soon as the function exits:

<!DOCTYPE HTML><html><head><title>Example</title>  <script type="text/javascript">        function test(){
            var aVariable = "hi"; //local variable
            document.writeln(aVariable);
        }        test();
        document.writeln(aVariable); //error!
  </script></head><body></body></html>
 

The following code shows how to share variables between <script> tags.

<!DOCTYPE HTML><html><head><title>Example</title></head><body>  <script type="text/javascript">    var myGlobalVar = "A";    function myFunc(name) {      var myLocalVar = "B";      return ("Hello " + name + ". Today is " + myLocalVar + ".");    };    document.writeln(myFunc("C"));  </script>  <script type="text/javascript">    document.writeln("I like " + myGlobalVar);  </script></body></html>

We can define a variable globally by omitting the var operator:

<!DOCTYPE HTML><html><head><title>Example</title>  <script type="text/javascript">        function test(){
            aVariable = "hi";
            document.writeln(aVariable);
        }        test();
        document.writeln(aVariable);  </script></head><body></body></html>

By removing the var operator the aVariable becomes global. Strict mode throws a ReferenceError when an undeclared variable is assigned a value.

JavaScript Data Types

There are five simple data types in JavaScript: Undefined,Null,Boolean,Number,String JavaScript has one complex data type: Object. Object is an unordered list of name-value pairs.
typeof Operator
The typeof operator tells the data type of a given variable. The typeof operator returns one of the following strings:
Returned Value
Meanings
"undefined"
if the value is undefined
"boolean"
if the value is a Boolean
"string"
if the value is a string
"number"
if the value is a number
"object"
if the value is an object or null
"function"
if the value is a function

<!DOCTYPE html><html><head>    <title>typeof Example</title>    <script type="text/javascript">     var aString = "string";    //The typeof is an operator and not a function, no parentheses are required.
    document.writeln(typeof aString);    //"string"
    document.writeln(typeof(aString));   //"string"
    document.writeln(typeof 10);         //"number"
   
    </script></head><body></body></html>
 

Calling typeof null returns a value of "object" <!DOCTYPE html><html><head>    <title>typeof Example</title>    <script type="text/javascript">         var aString = null;        document.writeln(typeof aString);    //"object"
   
    </script></head><body></body></html>
 

The following code calls typeof on an undefined variable.

<!DOCTYPE html><html><head>    <title>typeof Example</title>    <script type="text/javascript">         var aString;        document.writeln(typeof aString);    //"undefined"
   
    </script></head><body></body></html>
 

The Undefined Type
The Undefined type has only one value, undefined. When a variable is declared without initialization, it is assigned the value of undefined:
 <!DOCTYPE html><html><head>    <title>Undefined Example</title>    <script type="text/javascript">       
        var aString;        document.writeln(aString == undefined);    //true
        </script> </head><body>
</body></html>
 

We can explicitly assign undefined to a variable.

<!DOCTYPE html><html><head>    <title>Undefined Example</title>    <script type="text/javascript">       
        var aString = undefined;        document.writeln(aString == undefined);    //true
     </script></head><body></body></html> 

A variable containing undefined value is different from an undefined variable.

<!DOCTYPE html><html><head>    <title>Undefined Example</title>    <script type="text/javascript">       
        var aString;  
     
        document.writeln(aString);           //"undefined"
        document.writeln(anotherValue);      //causes an error
   
    </script> </head><body></body></html>
 

null Type
The null type has only one value: null. A null value is an empty object pointer. typeof returns "object" for typeof null.

<!DOCTYPE html><html><head>    <title>Null Example</title>    <script type="text/javascript">       
        var aString = null;        document.writeln(typeof aString);   //"object"
        document.writeln(typeof null);      //"object"
    </script> </head><body>
</body></html>
 

The value undefined is a derivative of null, so JavaScript defines them to be equal:

<!DOCTYPE html><html><head>    <title>Null Example</title>    <script type="text/javascript">       
        document.writeln(null == undefined);
           
    </script> </head><body>
</body></html>

We can check for null to see if the variable has been assigned a value:

<!DOCTYPE html><html><head>    <title>Null Example</title>    <script type="text/javascript">       
        var aString = null;        if(aString == null){           document.writeln("Not assigned");        }        aString = "some value";        if(aString == null){           document.writeln("Not assigned");        }else{           document.writeln("Assigned");        }     
    </script> </head><body>
</body></html>
 

Boolean() casting function
Boolean() casting function converts a value into its boolean equivalent. The following table lists the outcomes of Boolean() casting function:
Data Type
True
False
Boolean
true
false
String
nonempty string
empty string("")
Number
nonzero number and infinity
0, NaN(NotANumber)
Object
Any object
null
undefined
N/A
Undefined
The following code converts a nonempty string to Boolean type:

<!DOCTYPE html><html><head>    <title>Boolean Example</title>    <script type="text/javascript">       
        var aString = "Hello world!";        var aBoolean = Boolean(aString);     
        document.writeln(aBoolean); //true
    </script></head><body>
</body></html>
 

The following code converts a zero value to Boolean type:

<!DOCTYPE html><html><head>    <title>Boolean Example</title>    <script type="text/javascript">       
        var anInt = 0;        var aBoolean = Boolean(anInt);     
        document.writeln(aBoolean); //false
            
    </script> </head><body>
</body></html>
 

Some statment, such as the if statement, automatically perform this Boolean conversion:

<!DOCTYPE html><html><head>    <title>Boolean Example</title>    <script type="text/javascript">       
        var aString = "Hello world!";
     
        if (aString){
           document.writeln("value is true");
        }         aString = "";        if (aString){
           document.writeln("value is true");
        }else{           document.writeln("value is false");
        }         aString = null;        if (aString){
           document.writeln("value is true");
        }else{           document.writeln("value is false");
        }
           
    </script> </head><body>
</body></html> 

The Literials of Number Type

JavaScript uses the IEEE-754 format to represent both integers and floating-point values.

Decimal Integer

The literal format of a decimal integer can be entered directly:
 
<!DOCTYPE html><html><head>    <title>Number Example</title>    <script type="text/javascript">       
       var intNum = 123; //integer
                  </script> </head><body>
</body></html>
 

Integers can be represented as either octal (base 8) or hexadecimal (base 16) literals.

Octal Integer
For an octal literal, the first digit must be a zero (0). The octal literal can have numbers from 0 to 7.

<!DOCTYPE html><html><head>    <title>Octal Number Example</title>    <script type="text/javascript">       
       var octalNum = 053;
           
       document.writeln(octalNum);//octal for 43
    </script> </head><body>
</body></html>
 

If a number out of 0 to 7 is used, then the leading zero is ignored and the number is considered as a decimal.

<!DOCTYPE html><html><head>    <title>Octal Number Example</title>    <script type="text/javascript">       
       var octalNum = 079; //invalid octal
           
       document.writeln(octalNum); //79
    </script> </head><body>
</body></html>
 

Octal literals are invalid in strict mode.
The octal numbers are converted to decimal numbers in all arithmetic operations.

<!DOCTYPE html><html><head>    <title>Octal Number Example</title>    <script type="text/javascript">       
       var octalNum = 056;
        document.writeln(octalNum); //46
    
       var aNum = 123;
    
       document.writeln(octalNum + aNum); //169
    </script> </head><body>
</body></html> 

Hexadecimal
To create a hexadecimal literal, you make the first two characters 0x or 0X. The hexadecimal digits are 0 through 9, and A through F. Letters may be in uppercase or lowercase.

<!DOCTYPE html><html><head>    <title>Number Example</title>    <script type="text/javascript">       
       var hexNum = 0xA;
           
       document.writeln(hexNum); //10
    </script> </head><body>
</body></html>
 

The hexadecimal numbers are converted to decimal numbers in all arithmetic operations.

<!DOCTYPE html><html><head>    <title>Number Example</title>    <script type="text/javascript">       
       var hexNum = 0xA;
           
       document.writeln(hexNum); //10
    
       var aNum = 123;
    
       document.writeln(hexNum + aNum); //133    
    </script> </head><body>
</body></html>
 

Floating-Point Values

A floating-point value literal must have a decimal point and at least one number after the decimal point.
 
<!DOCTYPE html><html><head>    <title>Number Example</title>    <script type="text/javascript">       
       var floatNum = 1.2;
                     document.writeln(floatNum);
           </script></head><body></body></html>
 

If there is no digit after the decimal point, the number becomes an integer.
 
<!DOCTYPE html><html><head>    <title>Number Example</title>    <script type="text/javascript">       
       var floatNum = 1.;
                     document.writeln(floatNum); // an integer
    
    </script></head><body></body></html>
 

If the number being represented is a whole number, it is converted into an integer:
 
<!DOCTYPE html><html><head>    <title>Number Example</title>    <script type="text/javascript">       
       var floatNum = 1.0;
                     document.writeln(floatNum);
           </script></head><body></body></html>
 
Scientific notation
 
<!DOCTYPE html><html><head>    <title>Number Example</title>    <script type="text/javascript">       
       var floatNum = 1.234e7;
                     document.writeln(floatNum);
           </script></head><body></body></html> 

Scientific notation says take 1.234 and multiply it by 107.
 
<!DOCTYPE html><html><head>    <title>Number Example</title>    <script type="text/javascript">       
       var floatNum = 1.234e-7;           
       document.writeln(floatNum);
           </script></head><body></body></html>
 

Scientific notation says take 1.234 and multiply it by 10-7.

Value range
Number.MIN_VALUE represents the smallest value in JavaScript. Number.MAX_VALUE stores the largest number. Number.NEGATIVE_INFINITY is the negative infinity. Number.POSITIVE_INFINITY is the positive infinity.
isFinite() function determines if a value is finite. This function returns true if the argument is between the minimum and the maximum values:

<!DOCTYPE html><html><head>    <title>Number Example</title>    <script type="text/javascript">       
            var result = Number.MAX_VALUE + Number.MAX_VALUE;
            document.writeln(isFinite(result));
     
    </script></head><body></body></html>
 




0 comments:

Post a Comment