OOP-Midterm PDF

# The JavaScript Programming Language The JavaScript programming language is an object-based language. What do we mean of an object? An object is an item or a thing that we can see in real world. Object has its own attributes or properties which describe our object. I will give you an example of an object let say we have a car, the color of the car is red, it weight is 4,009 pounds. The color of the car that is red and its weight of 4,009 pounds is already a property which describes the physical aspect of the car. Another important aspect of an object is its method. It refers to the action that can be perform by the object in our example the car can start the engine, move forward, stop and move backward or reverse. This method is also known as the behaviour of our object. The basic JavaScript command to display something in our webpage is the use of document command basically the keyword document is an object itself. We can simply use a command document.bgcolor to assign a background color of our webpage. But most of the time we use the write method to display the result of the screen. ```javascript document.write("This is just a test."); ``` ## Example No. 1 ```html <html> <head> <title> Using of Write Method </title> </head> <body> <script> document.write("<h1> This is just a test. </h1>"); </script> </body> </html> ``` ## Sample Output A screenshot of a webpage with the title "Using of Write Method" and the text "This is just a test." is displayed. ## Example No. 2 In this example I will set the properties or attributes of our document using bgColor and fgColor properties command in JavaScript. ```html <html> <head> <title> Using of Write Method </title> </head> <body> <script> document.bgColor = "Green"; document.fgColor = "White"; document.write("<h1> This is just a test. </h1>"); </script> </body> </html> ``` ## Sample Output A screenshot of a webpage with the title "Using of Write Method" and the text "This is just a test." is displayed. This time the background color is green and the text color is white. ## Explanation In this sample program I wrote the JavaScript tag after the `<body>` tag of HTML in this example I want to change the background color of our web page from white color into green I'm using this command statement in JavaScript `document.bgColor = "Green";`. By using the attribute command of JavaScript `bgColor` it mean background color and then I was able to assign a value of green it changes the web page back ground color into green. The second document command `document.fgColor = "White";` I use the fgColor properties in JavaScript to change the foreground color of our font by default if the background color of our web page is white the font color is black. In this case we have already change the background color into green. In order for us to match our font color I have to change it into white our foreground color. The third command statement is `document.write(“<h1> This is just a test. </h1>”);` is the message that I want to display on our web page as of the moment we were able to change the background color of our web page from white to green. Next we change the foreground color or font color from black into white in order to match with our green background color. This time I want to display a message using the HTML tag `<h1>` means header one the biggest header size in HTML tags used primarily for web page title. The message that I want to display in our web page is This is just a test. ## Document Object Model (DOM) Basically we are using here is the Document Object Model (DOM) in JavaScript it refer as a template built into the browser that specifies all of the objects and properties in a web document that the browser can identify and allows you to access and manipulate, plus all of the methods you can perform with or on those objects. In the example above we use `document.write` to display output in our web browser the most common method of accepting input from the user is the use of prompt dialog box in JavaScript which allows us to accept an input value from our user. ## Example No. 3 Write a program the will ask the user to give his or her name and then our program will say hello to our user. ## Program Listing ```html <html> <head> <title> Prompt Dialog Box </title> </head> <body> <script> user_name = prompt("Enter your Name : "); document.write("<h1> Hello " + user_name + ". </h1>"); </script> </body> </html> ``` ## Sample Program Output A screenshot of a webpage with the title "Prompt Dialog Box" and the text "Hello Jake Pomperada." is displayed. The prompt dialog box asks the user to enter their name and then displays "Hello" followed by the user's name. ## Explanation In this third example that we have basically this program will ask the user's name and then it will greet the user by saying the world Hello and the name of the user. One of the most interesting aspect of this program is not because of its simplicity but the commands that is being used. The first thing that I do is to use a variable `user_name` actually in JavaScript you can declare and user a variable without declaring its data type. Next I use an assignment statement or operator using the = equal symbol and then write the command prompt to call the prompt dialog box to ask input value from our user. By default is we use the command prompt it only accepts string as our input values. In this case it is not a problem because all we need is to get the name of the user and then greet the user in our program. This command statement will ask the user to give his or her name `user_name = prompt("Enter your Name : ");`. The second part of our program is to display a greeting message to our user by saying the word Hello followed by the name of the user. We are able to accomplish this task by using the following commands `document.write("<h1> Hello " + user_name +". </h1");`. You should be aware that I am using the plus (+) symbol to separate the work Hello and the name of the user of our program. ## Example No. 4 Write a program that will calculate the sum of three input numbers. ## Program Listing ```html     <html> <head> <title>Addition of Three Numbers</title> </head> <body> <h2> Addition of Three Numbers </h2> <script type="text/javascript"> var a = parseInt(prompt("Enter First Number")); var b = parseInt(prompt("Enter Second Number")); var c = parseInt(prompt("Enter Third Number")); var sum = (a+b+c); document.write("<h2> The sum of " + a + ", " + b + " and " + c + " is " + sum + ".</h2>"); document.write("<h3>======== End of Program </h3>"); </script> </body> </html> ``` ## Sample Program Output A screenshot of a webpage with the title "Addition of Three Numbers" and the text "The sum of 1, 2 and 3 is 6." is displayed. ## Explanation One of the most common task of any computer program is to ask the user values, process the values being provided by the user and then display the process results to the user in a computer screen. In this example our program basically will ask the user to give three integer number and then it will compute the sum of the three numbers and display the results on the web page. The first task that I do is to declare three variables using the keyword `var` I declare variable `a,b` and `c`. Now the interesting part of our program is that we need to have some conversion to take place in our program. The prompt dialog box that is available in JavaScript by default it can only accept string values. What is a string a string is a series of character enclose of single or double quotes. If we don't use a built in conversion command in JavaScript that is `parseInt` any number that we put in our prompt dialog box will be treated as a string it means we can't give the total sum of the three numbers that we ask from our user of our program. Here is the command statement that will accept three integer values from our user. ```javascript var a = parseInt(prompt("Enter First Number")); var b = parseInt(prompt("Enter Second Number")); var c = parseInt(prompt("Enter Third Number")); ``` The second part of our program is to compute the sum of the three numbers that our user given to our program. In order to do that I declare another variable I named the variable `sum` and then I use the assignment operator equal sign to hold the sum value of `a,b` and `c`. Let say our variable A we store a value of 1, for variable B I store a value 2 and lastly for our variable C I store a value of 3 using the arithmetic operator plus sign (+) we can able to derive with the total sum of 6. We are using the following mathematical expression in JavaScript to get the result that we want `var sum = (a+b+c);`. After we perform the input of three integer values, we already compute the total sum of the three numbers the last part is to display the computed result in our web page. Doing this is quite easier all we need to do is to use the following commands `document.write("<h2> The sum of " + a + "," + b + " and " + c + " is " + sum + ".</h2>");`. In this command we can separate each variable one by one by using the plus (+) symbol we can able to achieve our desired results of our program. # Conditional Statements In our day to day life we make decisions whether our decisions good or bad it all depends on the conditions that we make. The same is also true in programming we use conditions to make our programs intelligent enough to give us a right results when we needed most. Conditions are very important primarily it helps our program to derive with correct and accurate decisions based on the values given by our user of our program. This is a programming language statement that selects an execution path based on whether some condition is true or false. It also describes some action or operation that takes place based on whether or not a certain condition is true. In JavaScript programming language there are two most common conditional statements that is being used. 1. If Else Statement 2. Switch Statement ## If-Else Statement This is a control statement that executes a block of code if a Boolean expression evaluates to TRUE. An if statement sometimes uses the form if condition then code, where condition is a Boolean expression and code is code that is executed if the condition is TRUE but if the condition is not true it will give us FALSE statement result. ## Syntax of If – Else Statement ```javascript if (condition) { statement_one; // Execute this statement if it is TRUE } else { statement_two; // Execute this statement if it is FALSE } ``` ## Example No. 1 ```javascript var age = 60; if (age>=60) { document.write("You are entitled for pension benefits."); } else { document.write("You are still young to retire from work."); } ``` ## Explanation In this example code let say we make a program that if an employee reaches the retirement age of 60 years old he or she is already entitled for pension benefits from the company. I declare a variable named `age` with a data type of integer it means it can only accepts whole number, zero and positive number. Let us assume that all age values are positive numbers. As we can see in this example I initialize our variable `age` with a value of 60 which refers to the age of the employee. In our if else statement we have a condition `if (age>=60)` the rules in using this conditional statement is that the first statement should be always be true provided that the given input or initialized value is TRUE and was able to meet the criteria of our condition. In this case our variable `age` with an initialized value of 60 was able to meet the criteria of our condition that the retirement age will start at the age of 60 years old so the first statement is being execute and displayed by our program which tells us that the employee is entitled for the pension benefits being provided by the company. But is the age of the employee is less than or not equal to 60 years old our program will display a message on the screen "You are still young to retire from work". Another tip that I would like to share with you if that I use greater than equal `>=` sign in our condition because if we just put greather `>` if the age of the employee is 60 instead of giving us the result of "You are entitled for pension benefits" it will give us the result "You are still young to retire from work.". ## Example No. 2 ```javascript x = parseInt(prompt("Please enter a number")); if (x>0) { alert("The number given is positive number"); } else { alert("The number given is negative number"); } ``` ## Explanation In this code snippet we are trying to ask the user to give a number if the number given by the user is greater than zero our program will display an alert dialog box with the message “The number given is positive number." But if the given number by our user is negative our program will display the following message on our web page using alert dialog box "The number given is negative number."

Document Details

Tags

Related

Summary

Full Transcript

Upgrade to continue