Post
Ask Question

Getting Started With JavaScript

What is JavaScript?

  • JavaScript is the programming language of the web.
  • It is a dynamic scripting language that supports prototype-based object construction.
  • Many of the basic syntax and language are constructs that are similar to Java and C++.
Getting JavaScript onto your webpage.
  1. Write it right on the HTML page.
    1. <script>  
    2.    // All JavaScript Code goes here   
    3. </script>   
  2. Import the JavaScript file:
    1. <script src="sampleJavaScript.js" type="text/javascript"></script>   
    Note: <script> tag will go inside <head> tag on HTML page.
Before We Get Started,
  • It is important to understand how variables work differently in JavaScript.
Scoping of Variables
  • Variables in JavaScript are either considered to be local or global.
  • Local Variable Scope:- Local variables can only be created in function.
  • There is no such thing as block-level scope variables.
Any variables created in any other block of code (code surrounded by curly brackets) will be considered global.
 
Example: Variables that are part of an if statement are not local to the if statement, it is considered as a global variable.
 
Global Variable Scope
  1. var color = "blue";  
  2. if (color)  
  3. {  
  4.     var color = "purple"; // this is a global variable,so color will changed to purple.    
  5.     console.log(color); // this statement will print purple    
  6. }  
  7. console.log(color); // this statement will print purple  
As you can see the color variable in the if statement is global and though it is declared as new a variable in the if statement, it is not considered local because it is not in a function.
 
Local Variable Scope
  1. var color = "blue";  
  2.   
  3. function printColor()  
  4. {  
  5.     var color = "purple"; // this is a local  variable    
  6.     console.log(color); // this statement will print purple    
  7. }  
  8. printColor();  
  9. console.log(color); // this statement will print blue  
As you can see the local color variable is labeled as purple, and is only purple within the printColor function.
 
Though both the local and global variable has the same name, the local variable will take precedence over the global variable in the printColor function
 
Functions in JavaScript
  • Just like functions in other languages, functions in JavaScript are a block of code used to perform a particular task.
  • A function is defined with the function keyword, followed by the name of the function and then a pair of parentheses, which will contain the parameters.
  • Functions in JavaScript have other capabilities that they do not have in other object-oriented languages.
Example:
  1. var x = 3;  
  2.   
  3. function numSquare(x)  
  4. {  
  5.     return x * x;  
  6. }  
When you run this code, you will get 9 as output.
 
As we know that function can do different things. Assign one variable result into another variable.
 
Example 1:
  1. var x = 3;  
  2.   
  3. function numSquare(x)  
  4. {  
  5.     return x * x;  
  6. }  
  7. var sentence = "The Square of " + x + " is equal to " + numSquare(x);  
  8. console.log(sentence);  
When you run this code
 
Output: The Square of 3 is equal to 9
 
Example 2:
  1. var num = numSquare(5);   
  2. console.log(num);   
When you run this code
 
Output: 36
 
Self Invoking Function
  1. A Special type of function that can be created within JavaScript.
  2. These functions run automatically. No call to the function needed.
  3. They can be anonymous or not.
  1. ((function selfPrint()  
  2. {  
  3.     console.log("This function will automatically print this statement);      
  4. })());  
  5. //Be sure to wrap the function in parentheses and add another pair of parentheses at the end  of the function.  
Next Recommended Reading Get And Set Variable Values From One JavaScript File To Another JavaScript File Using Local Storage