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 :
- For adding java script to an HTML page we can embed the code in two ways:
- Internally(i.e within your same page).
- Externally(i.e we can import from outside the java script file.
- 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> - After writing the code the Notepad++ window will look like as shown below :
- After you run it on the web browser you will have the following output :
- 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> - The code in Notepad++ will look like as shown below :
- Thus after you open it using the web browser you will have the following output :
- Looping statements in Java are as follows :
- For statement
- While statement
- Do.. while statement
- 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> - Now your Notepad++ window will look like as shown below:
- The output of window will look like as shown :
- 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> - You will have the following view of the window :
- The output of it is given below:
- 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++; } - 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> - Your Notepad++ window will look like as shown below:
- The output will be as follows :
- For implementing functions in Java script use the syntax given below :
Syntax:- CREATE THE FUNCTIONfunction myFunction() { alert(“This is the function”); }Syntax:- CALL THE FUNCTION
myFunction();
- 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> - The view of Notepad++ after inserting the code will look like as shown below:
- The output of the code will be as shown below:
- 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> - Now your Notepad++ window will have the following view after writing the code:
- You will get the following window as the output after you open it in the web browser.
- Thus we have studied about the Java Script Fundamentals.
