Presentation is loading. Please wait.

Presentation is loading. Please wait.

Programming in JavaScript

Similar presentations


Presentation on theme: "Programming in JavaScript"— Presentation transcript:

1 Programming in JavaScript
University of Management and Technology 1901 Fort Myer Drive, Suite 700 Arlington, VA 22009 Voice: (703) Fax: (703) Website:

2 Learning Objectives Upon completing this module, the student should be able to: Understand and Use Operators Understand and Use Flow Control Answer all questions at the end of Chapters 5 and 6 of the book.

3 Operators Now that we know about variables and functions, it’s time to learn about doing real things with variables and functions. To do that, we need to be able to do things like add, subtract, multiply, and so on to variables and we need to be able to make decisions about what to do based on the results. Operators allow us to do that! The book makes understanding operators easy. Here is a little detail for those without experience with binary numbers: Generally, humans think about numbers in the decimal (base 10) system. In the base 10 system: We use the digits 0 through 9 and when we add 1 to 9, the answer is 0 with a carry of 1. So, 9+1 is written as 10 and we call it ten, but it is really 1 in the “tens” place and 0 in the “zeros” place.. We might say 5 plus 5 = 10 or we might say 5 and 5 = 10. Generally, computers work in binary (base 2). In the base 2 system: Only the digits 0 and 1 are used so when we add 1 to 1, the answer is 0 with a carry of 1. So 1+1 is written as 10. If we say 1 plus 1, the answers is 10 (one, zero -- not ten!) If we say 1 and 1, the answer is 1! That’s because “and” is a bitwise logic operator with the rule: If both bits are 1 then 1 else 0. Consider 110 and 101 (6 and 5): the answer is 100 (4). You should have already learned this in CST120. If you don’t understand so far, then search the Internet for binary numbers, binary arithmetic, and/or binary math and learn about it before going on because for some programming jobs, you must understand bitwise operators.

4 The Logical AND Operator, &&
The logical operators are usually used with Boolean operands, the details of which have been covered in the book. Additionally, the logical operators can be used with non-Boolean operands. Here is how the logical && operator works. First the operand (which can be an expression) to the left of the logical operator is evaluated. If the value of this expression can be converted to False, the operator returns the value of the left-hand expression. The value of an expression can be converted to False, if the expression evaluates to null, 0, “”, or undefined. Otherwise, the second operand (to the right of the logical operator) is evaluated and the operator returns the value of that expression.

5 Logical AND Operator, &&, Examples
The expression 3 && 4 evaluates to: 4 The expression 0 && 4 evaluates to: 0 The expression 3 && 0 evaluates to: 0 The expression "" && 4 evaluates to: The expression 4 && "" evaluates to: The expression x && y evaluates to: 4, when x = 3 and y = 4 The JavaScript code to produce the above results is: var x=3; var y=4; // Logical AND operator, && document.write("<br />The expression 3 && 4 evaluates to: " + (3 && 4)); document.write("<br />The expression 0 && 4 evaluates to: " + (0 && 4)); document.write("<br />The expression 3 && 0 evaluates to: " + (3 && 0)); document.write('<br />The expression "" && 4 evaluates to: ' + ("" && 4)); document.write('<br />The expression 4 && "" evaluates to: ' + (4 && "")); document.write("<br />The expression x && y evaluates to: " + (x && y) + ", when x = 3 and y = 4");

6 The Logical OR Operator, ||
The logical operators are usually used with Boolean operands, the details of which have been covered in the book. Additionally, the logical operators can be used with non-Boolean operands. Here is how the logical && operator works. First the operand (which can be an expression) to the left of the logical operator is evaluated. If the value of this expression can be converted to True, the operator returns the value of the left-hand expression. Otherwise, the second operand (to the right of the logical operator) is evaluated and the operator returns the value of that expression.

7 Logical OR Operator, ||, Examples
The expression 3 || 4 evaluates to: 3 The expression 0 || 4 evaluates to: 4 The expression 3 || 0 evaluates to: 3 The expression "" || 4 evaluates to: 4 The expression 4 || "" evaluates to: 4 The expression x || y evaluates to: 3, when x = 3 and y = 4 The JavaScript code to produce the above results is: var x = 3; var y = 4; // Logical OR operator,|| document.write("<br />The expression 3 || 4 evaluates to: " + (3 || 4)); document.write("<br />The expression 0 || 4 evaluates to: " + (0 || 4)); document.write("<br />The expression 3 || 0 evaluates to: " + (3 || 0)); document.write('<br />The expression "" || 4 evaluates to: ' + ("" || 4)); document.write('<br />The expression 4 || "" evaluates to: ' + (4 || "")); document.write("<br />The expression x || y evaluates to: " + (x || y) + ", when x = 3 and y = 4");

8 Flow Control What the book refers to as “Conditional Statements and Loops” is normally called flow control by programmers. So far, the assignments have required you to write instructions for each line a JavaScript statement or function outputs. If the assignment was changed to require 20 down to 0 rather than 10 down to 0, you would have to write at least 10 more lines of code to make the program do what is required. With flow control, you can make decisions based on variables and write code that lets you execute a single statement, or a group of statements that change their actions based on passed parameters (variables). Once you understand flow control, you are ready to write useful programs that don’t need to be rewritten each time something changes. Be sure to fully understand chapters one through six of the book, and make sure you can answer all the questions at the back of those chapters before going to the next slide!

9 Your Third Graded Assignment
The purpose of the assignment is to demonstrate your ability to use operators and flow control logic, and to create a function which accepts an input parameter, and uses the data passed to the function. Using only the techniques from modules one through three, and chapters one through six of the book: Create two files, one named third.html and the other named third.js Write code to create a web page that uses a JavaScript program to output a NASA style count down: Ten Nine … One Ignition Start Liftoff We have Liftoff! Each line must be displayed in the browser window. An alert must be used to control when the next line is displayed.

10 Your Third Graded Assignment, cont.
Create a generic function that outputs one line of the countdown on the web page, followed by an alert, and receives the data to output as an input parameter. Use that function to output each line of the countdown, and an alert. Please note that you are outputting the countdown to the browser window this time, not to an alert! The alert is only being used to signal when to output the next line. Important Note: Depending on which browser you are using to view your web page, the alert messages may or may not be displayed alternately with each line output to the web page. Some browsers (Internet Explorer) display all the alerts first and then display the countdown on the page. The program should have fewer lines of code than assignment 2. Hint: use a loop when displaying the numeric part of the countdown. You can output the countdown numbers as before or as digits (Ten or 10, Nine or 9, etc.) Use comments and lay the code out so it can be easily followed!

11 Your Third Graded Assignment, Cont.
Each file in the assignment must have a comment at the top, using the correct commenting technique for the file type, like this: Your Name Your Student ID CST140 Assignment 2 Test your program by opening the web page in your browser. You should see the NASA countdown displayed on the Web page, and a series of alerts. Click the OK button to display the next line in the countdown. Important Note: Depending on which browser you are using to view your web page, the alert messages may or may not be displayed alternately with each line output to the web page. Some browsers (Internet Explorer) display all the alerts first and then display the countdown on the page.

12 Submitting Assignments for Grading
Your assignment must be uploaded to your instructor via your Student Portal. ed assignments are NOT accepted for this course! You can only upload one file per assignment. Since this assignment requires multiple files, you must create a .zip file. If you are using a recent version of Microsoft windows, you can create the ZIP file (compressed folder) by creating a new folder anywhere in your computer’s file system and putting the files in that folder. Then right-click on the folder and select “Send to” and then “compressed (zipped) folder”. Alternatively, you can use a program such as WinZIP (winzip.com). It doesn’t matter what you name the file you upload except that the file extension must be .zip.

13 Submitting Assignments for Grading, Cont.
Once uploaded you cannot upload the assignment again unless reset by your instructor – please take the time to do it right the first time!


Download ppt "Programming in JavaScript"

Similar presentations


Ads by Google