Learning Java Script Fundamentals

0
1587
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. v1

  5. After you run it on the web browser you will have the following output :
  6. v2

  7. 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>
    
  8. The code in Notepad++ will look like as shown below :
  9. v3

  10. Thus after you open it using the web browser you will have the following output :
  11. v5

  12. Looping statements in Java are as follows :
    1. For statement
    2. While statement
    3. Do.. while statement
  13. 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>
    
  14. Now your Notepad++ window will look like as shown below:
  15. v6

  16. The output of window will look like as shown :
  17. v7

  18. 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>
    
  19. You will have the following view of the window :
  20. v8

  21. The output of it is given below:
  22. v9

  23. 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++;
    }
    
  24. 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>
    
  25. Your Notepad++ window will look like as shown below:
  26. v10

  27. The output will be as follows :
  28. v11

  29. 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();
  30. 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> 
    
  31. The view of Notepad++ after inserting the code will look like as shown below:
  32. v13

  33. The output of the code will be as shown below:
  34. v14

  35. 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>
    
  36. Now your Notepad++ window will have the following view after writing the code:
  37. v15

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

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here