1. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-11-26 Benito Mendoza 1 By Benito Mendoza Department of Computer Science & Engineering Introduction to Programming Algorithms and Control Structures JavaScript

2. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 2 Low-level vs High-level Low-level languages such as assembly language take many months to master and are dependent on the processor hardware used High-level languages have more high end features which are easier to learn Introduction to Programming Algorithms and Control Structures JavaScript A Hierarchy of Languages

3. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 3 Interpreters vs Compilers Languages must be translated into machine code for the computer to execute Interpreters do this on the fly as the program is being executed Compilers convert the program into machine code prior to the program being executed and store the machine code in a file to be run later Compiled programs run faster than interpreted ones Interpreted programs are easier to debug because you do not have to compile each time a change is made Introduction to Programming Algorithms and Control Structures JavaScript A Hierarchy of Languages

4. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 4 Structured vs. Object-Oriented Structured programming languages were developed to solve sloppy programming practices that led to errors. However, these languages did not work well for large programming tasks that involved multiple developers Object-oriented programming languages provide the compartmentalization that the structured languages were missing enabling many developers to work together on the same project Introduction to Programming Algorithms and Control Structures JavaScript A Hierarchy of Languages

5. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 5 Computers make decisions by using control structures in their programs Algorithms are the combination of small steps that allow a particular problem to be solved Introduction to Programming Algorithms and Control Structures JavaScript

6. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 6 Brute Force Traveling Salesman Problem Programming Techniques Introduction to Programming Algorithms and Control Structures JavaScript

7. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 7 New York Boston Washington Philadelphia Chicago Atlanta St. Louis Denver Houston Seattle Los Angeles Programming Techniques Introduction to Programming Algorithms and Control Structures JavaScript

8. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 8 Brute Force Traveling Salesman Problem Algorithm “A detailed sequence of actions to perform to accomplish some task” 1 Al-Khawarizmi Died about 840 A.D. HUGE influence on algebra (name comes from his book) 1. Free On-Line Dictionary of ComputingFree On-Line Dictionary of Computing Programming Techniques Introduction to Programming Algorithms and Control Structures JavaScript

9. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 9 Sequence 1.Do this. 2.Do something else. 3.Do another thing. Programming Techniques Control Structures Introduction to Programming Algorithms and Control Structures JavaScript

10. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 10 Sequence Conditional (if-then, branching) 1.Do this. 2.Do something else. 3.If some condition is true then 3a. Do this bit Otherwise 3b. Do these things. 4.Do another thing. The steps you do if the condition is true The steps you do if the condition is false Programming Techniques Control Structures Introduction to Programming Algorithms and Control Structures JavaScript

11. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 11 Sequence Conditional Looping (iteration) 1.Do this. 2.Do something else. 3.Do the following steps x number of times 3a. Do this sub-step 3b. Do another sub-step. 4.Do another thing. Programming Techniques Control Structures Introduction to Programming Algorithms and Control Structures JavaScript

12. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 12 Sequence Conditional Looping Transfer (go to) 1.Do this. 2.Go to step 4. 3.Do something else. 4.Do another thing. 5.Go to step 1. Never gets executed Programming Techniques Control Structures Introduction to Programming Algorithms and Control Structures JavaScript

13. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 13 Unstructured “Go To Statement Considered Harmful” Edsger W. Dijkstra, 1968 Structured Top-down construction Object-Oriented “Objects” composed of data and instructions Self-contained Programming Techniques Control Structures Introduction to Programming Algorithms and Control Structures JavaScript

14. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 14 Flowcharts (graphical symbols) Programming Techniques Control Structures Introduction to Programming Algorithms and Control Structures JavaScript

15. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 15 Pseudocode (half code, half natural) While the stoplight is red, stop. If the stoplight is green then continue on. Advantages: Avoids programming language technicalities Easy to understand and change Programming Techniques Control Structures Introduction to Programming Algorithms and Control Structures JavaScript

16. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 16 Programming languages C, C++, Java, COBOL, FORTRAN Stand-alone software Scripting languages JavaScript, VBScript “Mini” program that runs inside another program Cannot be used outside that application What is JavaScript? Introduction to Programming Algorithms and Control Structures JavaScript

17. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 17 Compilers Translates entire source file at once Produces a single executable file Interpreters Translates source statements one at a time Immediately executes each statement What is JavaScript? Introduction to Programming Algorithms and Control Structures JavaScript

18. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 18 Browsers have two functions: HTML Translate the tags Display the content appropriately JavaScript Interpret a line Execute the line Both are executed in order What is JavaScript? Introduction to Programming Algorithms and Control Structures JavaScript

19. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 19 JavaScript was introduced by Netscape to validate information entered into text boxes (and other form elements) before it was submitted to a server JavaScript is not Java, and is not a stripped down version of Java What is JavaScript? Introduction to Programming Algorithms and Control Structures JavaScript

20. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 20 JavaScript code composed of: Instructions/Commands/Statements Case sensitive! Inserted directly into HTML element (scripting commands) What is JavaScript? The element Introduction to Programming Algorithms and Control Structures JavaScript

21. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 21 More than one scripting language Must specify JavaScript in XHTML code … Introduction to Programming Algorithms and Control Structures JavaScript What is JavaScript? The element

22. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 22 Don’t confuse HTML with JavaScript … HTML JavaScript Introduction to Programming Algorithms and Control Structures JavaScript What is JavaScript? The element

23. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 23 Can have multiple elements in one HTML document Ch07-Ex-01.htm Introduction to Programming Algorithms and Control Structures JavaScript What is JavaScript? The element

24. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 24 Can access JavaScript code stored in an external file … Only JavaScript code in the.js file, not the tags Introduction to Programming Algorithms and Control Structures JavaScript What is JavaScript? The element

25. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 25 External files Good for repeated code Hides code from casual users Introduction to Programming Algorithms and Control Structures JavaScript What is JavaScript? The element

26. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 26 Entomology: “a branch of zoology that deals with insects ”, i.e., debugging Introduction to Programming Algorithms and Control Structures JavaScript What is JavaScript? The element Entomology of Programming

27. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 27 Syntax Constructed improperly Logic Constructed properly but does not achieve the desired result Introduction to Programming Algorithms and Control Structures JavaScript What is JavaScript? The element Entomology of Programming Error types

28. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 28 alert(“My first JavaScript.) Alert(“Too exciting for words.”) alert[“This is big time stuff.”] Spelling Closing quote Capital letter Square brackets Introduction to Programming Algorithms and Control Structures JavaScript What is JavaScript? The element Entomology of Programming

29. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 29 Message box: Line number – not always accurate Error – not always informative Skips: Invalid line and All subsequent lines in same element Introduction to Programming Algorithms and Control Structures JavaScript What is JavaScript? The element Entomology of Programming Browser errors

30. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 30 Fixing errors Correct line by line Use trial and error Rewrite code entirely Use comments to eliminate items Introduction to Programming Algorithms and Control Structures JavaScript What is JavaScript? The element Entomology of Programming

31. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 31 Comments Help other readers Help yourself at a later time Eliminate sections of code during debugging Introduction to Programming Algorithms and Control Structures JavaScript What is JavaScript? The element Entomology of Programming

32. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 32 Comments Single-line alert(“Hi!”) // A friendly greeting // End of this script element Introduction to Programming Algorithms and Control Structures JavaScript What is JavaScript? The element Entomology of Programming

33. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 33 Comments Multiple-line /* This is a multiple line comment. */ /* So is this */ Introduction to Programming Algorithms and Control Structures JavaScript What is JavaScript? The element Entomology of Programming

34. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 34 Comments Don’t confuse with HTML comment: <!-- This is an HTML comment --> Introduction to Programming Algorithms and Control Structures JavaScript What is JavaScript? The element Entomology of Programming

35. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 35 Interactivity HTML has form elements like text boxes, check boxes, radio buttons, etc. JavaScript permits processing of these elements Introduction to Programming Algorithms and Control Structures JavaScript Interactivity

36. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 36 Events An action associated with some object Types: Click Select Mouseover Ch07-Ex-03.htm Introduction to Programming Algorithms and Control Structures JavaScript Interactivity

37. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 37 Browser automatically tracks events Programmers job is to write code that responds to events Event Handler Introduction to Programming Algorithms and Control Structures JavaScript Interactivity

38. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 38 User clicks the button Browser automatically detects the click Browser generates a click event Event handler associated with the button is triggered JavaScript commands associated with that event are processed Introduction to Programming Algorithms and Control Structures JavaScript Interactivity Sequence of events

39. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 39 onclick attribute describes the action(s) to take when a click event is detected <input type=“button” … ¬ onclick=“alert(‘You clicked me’)” /> alert is JavaScript exception to rule Introduction to Programming Algorithms and Control Structures JavaScript Interactivity

40. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 40 Interactivity Multiple JavaScript commands are valid <input type=“button” … ¬ onclick=“alert(‘You clicked me’)”; onclick=“alert(‘Well done’)” /> Introduction to Programming Algorithms and Control Structures JavaScript Interactivity

41. CSCE 102 – Chapter 7 (Intro. to Program. & JavaScript ) Benito Mendoza 41 Interactivity Mouse events onmouseover – when cursor is moved over an object onmouseout – when cursor over an object moves away from the object Introduction to Programming Algorithms and Control Structures JavaScript Interactivity