Learning Java Script Fundamentals

0
1460
Learning JavaScript Fundamentals

In this session we will study the fundamentals of Java script which will teach us how to display the text in a browser window, implement looping statements(for,while,do while),Functions and arrays.

  • To understand the Java script fundamentals follow the step given below :

  1. For adding java script to an HTML page we can embed the code in two ways:
    1. Internally(i.e within your same page).
    2. Externally(i.e we can import from outside the java script file.

  2. Now write the following code in Notepad++.
    <html>
    <title>Java script</title>
    <head>
         <script>
                  alert("THIS IS THE FIRST JAVA SCRIPT PROGRAM");
         </script>	
    </head>
    <body>
         <h1>Wecome to java script program</h1>
    </body>
    </html>
    
  3. After writing the code the Notepad++ window will look like as shown below :

  4. After you run it on the web browser you will have the following output :

  5. We can print the text on browser using document.write statement as shown in the code below,so write the following code in Notepad++:
    <!DOCTYPE html>
    <html>
    <body>
    <h1>This is my First Web Page</h1>
        <script>
                document.write("<p>My First JavaScript</p>"); 
        </script>
    </body>
    </html>
    
  6. The code in Notepad++ will look like as shown below :

  7. Thus after you open it using the web browser you will have the following output :

  8. Looping statements in Java are as follows :
    1. For statement
    2. While statement
    3. Do.. while statement
  9. For implementing the FOR STATEMENT in Java write the following code in Notepad++.
    <!DOCTYPE html>
    <html>
    <head>
    
                   <h1>This is the for statement</h1>
    <script>
    	var i;
    		for(i=0;i<10;i++)
    		{
    			document.write("Number is" +i+" <br />");
    		}
    </script>
    <head>
    <body>
    </body>
    </html>
    
  10. Now your Notepad++ window will look like as shown below:

  11. The output of window will look like as shown :

  12. For implementing WHILE STATEMENT in Java script write the following code in Notepad++:
    <!DOCTYPE html>
    <html>
    <head>
    
    <h1>This is the while statement</h1>
    
    <script>
    	var i=0;
    		while(i<10)
    		{
    		     document.write("Number is" +i+" <br />");
    		     i++;
    		}
    </script>
    </head>
    <body>
    </body>
    </html>
    
  13. You will have the following view of the window :

  14. The output of it is given below:

  15. The do.. while loop work similar to while loop but it initializes the variable and statement within the do block then check the condition of the while loop.

    Syntax :

    do{
    var i=0;
    document.write(“number is”+i+);
    }
    While(i<10){
    Document.write(“number”+i+”<br>);
    i++;
    }
    
  16. For example of do…While loop write the following code in Notepad++:
    <html>
    
    <head>
    <script type="text/javascript">
    
    var count = 0;
    document.write("Starting Loop" + "<br />");
    	do
    	{
    		document.write("Current Count : " + count + "<br />");
    		count++;
    	}
    	while (count < 10);
    	document.write("Loop stopped!");
    
    </script>
    </head>
    <body>
    </body>
    
    </html>
    
  17. Your Notepad++ window will look like as shown below:

  18. The output will be as follows :

  19. For implementing functions in Java script use the syntax given below :

    Syntax:- CREATE THE FUNCTION

    function   myFunction()
    {
       alert(“This is the function”);
    }
    

    Syntax:- CALL THE FUNCTION

    myFunction();
  20. Write the following code in Notepad++ to display the function.
    <!DOCTYPE html> 
    <html> 
    <body> 
    
    <h1>My First JavaScript</h1> 
    
    
    <button type="button" onclick="myFunction()">CLICK IT</button> 
    
    <script> 
          function myFunction() 
          { 
             alert("WELCOME TO EDUONIX LEARNIG SOLUTION"); 
          } 
    </script> 
    
    </body> 
    </html> 
    
  21. The view of Notepad++ after inserting the code will look like as shown below:

  22. The output of the code will be as shown below:

  23. For implementing Array in Java script, write the following code in Notepad++ to display the array:
    <!DOCTYPE html>
    <html>
    <body>
    <h1> Welcome to eduonix learning solution</h1>
    
    
    	<script>
    		var i;
    		var mycars = new Array();
    		mycars[0] = "Saab";
    		mycars[1] = "Volvo";
    		mycars[2] = "BMW";
    
    		for (i=0;i<mycars.length;i++)
    		{	
    	             document.write(mycars[i] + "<br>");
    		}
            </script>
    
    </body>
    </html>
    
  24. Now your Notepad++ window will have the following view after writing the code:

  25. You will get the following window as the output after you open it in the web browser.

  26. Thus we have studied about the Java Script Fundamentals.

LEAVE A REPLY

Please enter your comment!
Please enter your name here