1. ECA 225 Applied Interactive Programming1 ECA 225 Applied Online Programming basics

2. ECA 225 Applied Interactive Programming2 JavaScript: What it is  client-side, interpreted scripting language  JavaScript is run and interpreted by the user’s browser  adds interactivity to web pages  interact with a visitor  respond to a visitor’s actions  create slideshows  create new windows  write cookies  validate form input  Object-based

3. ECA 225 Applied Interactive Programming3 JavaScript: What it is NOT  it is NOT Java  Java apps run independent of web pages  Java is a strongly typed language  it is NOT a way to process form input safely

4. ECA 225 Applied Interactive Programming4 JavaScript – Client Side 1. Request for HTML files 2. Connection to server 3. Response 4. Files stored in browser cache 5. Users views files, including JavaScript, from cache

5. ECA 225 Applied Interactive Programming5 JavaScript – Client Side  The software that interprets JavaScript is the browser  We will use JavaScript to write HTML  JavaScript, like HTML, has cross-browser compatibility issues  ECMA  European Computer Manufacturers Association

6. ECA 225 Applied Interactive Programming6 Events  onClick: when user clicks the mouse  onLoad: when a web page finishes loading into the browser  onMouseOver: when a user rolls the mouse over an object  onFocus: when an object such as a form text box is selected actions performed by a user, eg: scripts can be associated with any of these events

7. ECA 225 Applied Interactive Programming7 Syntax  tagset  with a couple of exceptions, all JavaScript that we write will be placed inside opening and closing tags  do not place any HTML inside tags, unless it is being written by your script  attributes for the tags  language language=“javascript”  type type=“text/javascript”  src

8. ECA 225 Applied Interactive Programming8 Syntax cont …  case sensitivity  keywords, variables, function names are case sensitive  FirstName does not match firstname  Boolean value of True will produce an error – correct value is lowercase true  whitespace  JavaScript ignores whitespace – use tabs, indents, carriage returns to make code readable

9. ECA 225 Applied Interactive Programming9 Syntax cont …  reserved words  may not be used as variable or function names for a list, see my website  semicolons  semicolon to end statements is optional in JavaScript  use of a semicolon, however, is good programming practice  may make it easier to debug problems

10. ECA 225 Applied Interactive Programming10 Syntax cont …  comments  to comment a single line use two forward slashes  to comment a block of code use /* */ // this is a comment /* These symbols comment a whole block of code */

11. ECA 225 Applied Interactive Programming11 Syntax cont …  comments  use comments to  document why you are doing something in a particular way  document the logic of a program  label parts or sections of code  debug *** To receive full credit for lab assignments, your code must be documented with comments ***

12. ECA 225 Applied Interactive Programming12 Where to put JavaScript  JavaScript can be placed just about anywhere inside an HTML document  tagset  place most of your code here, especially functions, variables, etc, which must be defined before the entire page loads  tagset  if your code generates HTML, place it in the body, precisely where the generated HTML will appear  Code may appear in both sections at once

13. ECA 225 Applied Interactive Programming13 Hiding from older browsers  to hide JavaScript code, place it inside HTML comment tags  code would look like this: < ! - - JavaScript code // - - >

14. ECA 225 Applied Interactive Programming14  users may turn off JavaScript, or use browsers which don’t support it  provide alternative information by placing info inside tagset  alternate information is displayed if JavaScript is not supported You must have JavaScript enabled to view this page.

15. ECA 225 Applied Interactive Programming15 Data Types  Numbers  Strings  printing single and double quotes  Boolean Yes/No 1/0 True/False  null  undefined Type Conversion

16. ECA 225 Applied Interactive Programming16 Variables  Naming Rules:  first character must be a letter or an underscore  following characters can be letters, numbers, or underscores  no spaces in variable name  case sensitive  no keywords  make the variable name descriptive a place in computer memory that temporarily stores a value

17. ECA 225 Applied Interactive Programming17 Variables cont …  It is good programming practice to declare a variable before using it with var keyword  Declare multiple variables using comma operator  Until assigned a value, a variable is undefined  Assign a value using the assignment operator ( = )  read the assignment operator as “gets the value of” rather than “equals” var first_name = “Bob”;

18. ECA 225 Applied Interactive Programming18 Operators +Addition + Concatenation -Subtraction *Multiplication /Division %Modulus + +Increment - -Decrement parseInt( ) changes string to number

19. ECA 225 Applied Interactive Programming19 Operators examples addition subtraction multiplication total = tax + subtotal; range = beginDate – endDate ; tax = taxRate * subtotal ;

20. ECA 225 Applied Interactive Programming20 Operators examples division modulus (remainder) monthlyAve = numberOfTimes / numberOfMonths remainder = counter1 % counter2 remainder = 7 % 3; // answer is 1

21. ECA 225 Applied Interactive Programming21 Concatenation  to combine, to connect, to link in a chain  concatenation operator is +  do not confuse with addition var first_name = “Bob”; var last_name = “Palmer”; var full_name = first_name + “ “ + last_name;

22. ECA 225 Applied Interactive Programming22 Concatenation cont …  example var firstName = “Bob”; var lastName = “Palmer”; var city = “Canton”; var state = “Ohio”; document.write( “My name is “ + firstName + “ “ + lastName + “. I live in “ + city + “, “ + state + “.” ); variables string literals

23. ECA 225 Applied Interactive Programming23 Operators examples increment + + increases a variable by 1 counter = counter + 1; counter++; ++counter;

24. ECA 225 Applied Interactive Programming24 Operators examples increment + + var x = 10; counter = 1; total = x + counter++; // total is 11, counter becomes 2 total = x + ++counter; // total is 12

25. ECA 225 Applied Interactive Programming25 Operators examples decrement – – decreases a variable by 1 counter = counter – 1; counter – – ; – – counter;

26. ECA 225 Applied Interactive Programming26 Operators examples decrement – – var x = 10; counter = 1; total = x + counter – – ; // total is 11, counter becomes 0 total = x + – – counter; // total is 10

27. ECA 225 Applied Interactive Programming27 Assignment Operators =Assignment + =Add by value - =Subtract by value * =Multiply by value / =Divide by value % =Modulus by value

28. ECA 225 Applied Interactive Programming28 Assignment Operator Examples counter = counter + 1; counter ++; counter += 1; counter += 5; counter = counter * 2; counter *= 2; counter *= 10;

29. ECA 225 Applied Interactive Programming29 Comparison Operators ==Equals ! =Does not equal >Greater than >=Greater than or equal to <Less than < =Less than or equal to

30. ECA 225 Applied Interactive Programming30 Comparison Operators one equal sign means “gets the value of” two equal signs means “equals” name = “Bob” if( name == “Bob” )

31. ECA 225 Applied Interactive Programming31 Boolean Operators & &And | |Or !Not For examples of all operators, visit: http://www.justustwo.com/ECA225/lectures/operators.htm

32. ECA 225 Applied Interactive Programming32 Boolean Operators if( name == “Bob” && age > 40 ) if( name == “Bob” || name == “Carol” ) if( name == “Bob” && !( name == “Carol” ) )