1 / 24

CISC474 - JavaScript

CISC474 - JavaScript. 03/02/2011. Some Background…. Great JavaScript Guides: https://developer.mozilla.org/en/JavaScript/Guide http://www.w3schools.com/js/default.asp Client Side Scripting AJAX (Asynchronous JavaScript And XML) – has brought JavaScript back to mainstream.

eris
Download Presentation

CISC474 - JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CISC474 - JavaScript 03/02/2011

  2. Some Background… • Great JavaScript Guides: • https://developer.mozilla.org/en/JavaScript/Guide • http://www.w3schools.com/js/default.asp • Client Side Scripting • AJAX (Asynchronous JavaScript And XML) – has brought JavaScript back to mainstream

  3. JavaScript vs. Java

  4. What is JavaScript Used for? • Handling User Interaction • Doing small calculations • Checking for accuracy and appropriateness of data entry from forms • Doing small calculations/manipulations of forms input data • Search a small databased embedded in the downloaded page • Save data as cookie so it is there upon visiting the page • Generating Dynamic HTML documents • Examples • Bookmarklets • Google Maps • Google Suggest

  5. DOM • JavaScript is Object-Oriented • JavaScript Interacts with Document Object Model • DOM Not Totally Standardized

  6. JavaScript Syntax - Variables and Literals • Dynamic Typing - Variables can hold any valid type of value: • Number ... varmyInt = 7; • Boolean ... varmyBool = true; • Function ... [Discussed Later] • Object ... [Discussed Later] • Array ... varmyArr = new Array(); • String ... varmyString = "abc"; • null, a special keyword denoting a null value; null is also a primitive value. Because JavaScript is case-sensitive, null is not the same as Null, NULL, or any other variant • undefined, a top-level property whose value is undefined; undefinedis also a primitive value. • ... and can hold values of different types at different times during execution

  7. Control Structures • ‘if’ statement if ( boolean statement ) { ... } else { ... } • ‘switch’ statement switch ( myVar ) { case 1: // if myVar is equal to 1 this is executed case "two": // if myVar is equal to "two" this is executed case default: // if none of the cases above are satisfied OR if no // ‘break’ statement are used in the cases above, // this will be executed }

  8. Assignment Operators

  9. Math Operators

  10. JavaScript Functions functionfunction_name(parameters) { JavaScript commands } • parameters are the values sent to the function (note: not all functions require parameters) • { and } are used to mark the beginning and end of the commands in the function.

  11. JavaScript Functions • Function names are case-sensitive. • The function name must begin with a letter or underscore ( _ ) and cannot contain any spaces. • There is no limit to the number of function parameters that a function may contain. • The parameters must be placed within parentheses, following the function name, and the parameters must be separated by commas.

  12. Function Examples

  13. Where to Place Functions… • The function definition must be placed before the command that calls the function. • One convention is to place all of the function definitions in the <head> section. • A function is executed only when called by another JavaScript command. • It’s common practice for JavaScript programmers to create libraries of functions located in external files.

  14. Conditional Statements if (condition) { JavaScript Commands } • condition is an expression that is either true or false • if the condition is true, the JavaScript Commands in the command block are executed • if the condition is not true, then no action is taken

  15. Comparison, Logical, and Conditional Operators To create a condition, you need one of three types of operators: • a comparison operator compares the value of one element with that of another, which creates a Boolean expression that is either true or false • a logical operator connects two or more Boolean expressions • a conditional operator tests whether a specific condition is true and returns one value if the condition is true and a different value if the condition is false

  16. JavaScript Comparison Operators

  17. JavaScript Logical Operators

  18. A Conditional Operator tests whether a specific condition is true and returns one value if the condition is true and a different value if the condition is false. • Message = (mail == "Yes") ? "You have mail": "No mail"; • tests whether the mail variable is equal to the value "Yes" • if it is, the Message variable has the value "You have mail"; • otherwise, the Message variable has the value "No mail".

  19. If...Else Statement if (condition) { JavaScript Commands if true } else JavaScript Commands if false } • condition is an expression that is either true or false, and one set of commands is run if the expression is true, and another is run if the expression is false

  20. Arrays • An array is an ordered collection of values referenced by a single variable name. • The syntax for creating an array variable is: varvariable = new Array(size); • variable is the name of the array variable • size is the number of elements in the array (optional) • To populate the array with values, use:variable[i]=value;where i is the ith item of the array. The 1st item has an index value of 0.

  21. Arrays To create and populate the array in a single statement, use: varvariable = new Array(values); • values are the array elements enclosed in quotes and separated by commas • varMonthTxt=new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"); • What will January’s index value be?

  22. For Loops for (start; condition; update) { JavaScript Commands } • start is the starting value of the counter • condition is a Boolean expression that must be true for the loop to continue • update specifies how the counter changes in value each time the command block is executed

  23. While Loops • The While loop runs a command group as long as a specific condition is met, but it does not employ any counters. • The general syntax of the While loop is: while (condition) { JavaScript Commands } • condition is a Boolean expression that can be either true or false

More Related