Murachs JavaScript jQuery 3E_Chapter 01 (1).pptx

HElps to read the documents

1. Chapter 1 Introduction to web development Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 1

2. Applied objectives Run JavaScript applications that are on the Internet, your computer, or a local server by loading their HTML documents into your browser. Use Chrome’s developer tools to find the JavaScript statement that caused an error in a JavaScript application. Use a text editor or IDE like Aptana Studio 3 to edit HTML, CSS, and JavaScript files. If you’re using an IDE like Aptana Studio 3 that lets you run applications from it, run an application from the IDE. Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 2

3. Knowledge objectives (part 1) Describe the components of a web application. Describe HTTP requests and responses. Distinguish between the way a web server processes static web pages and dynamic web pages. Describe the use of JavaScript in a web application. Describe the use of HTML and CSS. Distinguish between the HTML5 semantic elements and the HTML div and span elements. Describe the use of these HTML attributes: id, class, title, for, and name. Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 3

4. Knowledge objectives (part 2) Describe the coding for these types of CSS selectors: type, id, and class. Describe the components of a CSS style rule. Describe the components of a URL. Describe the issue of cross-browser compatibility as it relates to the development of web pages and JavaScript applications. Describe the ECMAScript specification and the use of ES2015 and ES2016 with older browsers.   Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 4

5. The components of a web application Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 5

6. Terms related to web applications client web browser web server network intranet local area network (LAN) Internet wide area network (WAN) Internet Service Provider (ISP) Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 6

7. A static web page (index.html) Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 7

8. How a web server processes a static web page Terms Hypertext Markup Language (HTML) static web page HTTP request HTTP response rendering a page Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 8

9. A dynamic web page at amazon.com Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 9

10. How a web server processes a dynamic web page Terms dynamic web page application server database server round trip server-side processing Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 10

11. A web page with image swaps and rollovers Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 11

12. How JavaScript fits into this architecture Terms scripting language JavaScript engine jQuery client-side processing Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 12

13. Three of the many uses of JavaScript and jQuery Data validation Image swaps and rollovers Slide shows Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 13

14. The versions and release dates of the ECMAScript specification Version Release date 1 June 1997 2 June 1998 3 December 1999 4 Abandoned (never released) 5 December 2009 5.1 June 2011 2015 June 2015 2016 June 2016 The URL for a browser compatibility table http://kangax.github.io/compat-table/es6/ Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 14

15. Some additions in recent specifications (part 1) ECMAScript 5 (ES5) Allows you to run in strict mode. Adds several methods that make it easier to work with arrays. Adds a safer way to create an object and more control over an object’s properties. Adds a built-in way to work with JavaScript Object Notation (JSON). Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 15

16. Some additions in recent specifications (part 2) ECMAScript 2015 (ES6) Adds Promises, which is a simpler syntax for callback functions. Adds several syntactic improvements that make code easier to read and understand. Adds block scope and easier ways to work with classes. Adds several built-in methods for working with strings, numbers, objects, and arrays. ECMAScript 2016 (ES7) Adds a simpler syntax for computation with powers. Adds an array method to check if an array includes a specified element . Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 16

17. An HTML file (index.html) in a browser with no CSS applied to it Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 17

18. The HTML file named index.html (part 1) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Join Email List</title> <!-- link, style, and script elements go here --> </head> <body> <main> <h1>Please join our email list</h1> <form id=" email_form " name=" email_form " action="join.html" method="get"> <label for="email_address1">Email Address: </label> <input type="text" id="email_address1" name="email_address1"> <span id="email_address1_error">*</span>< br > Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 18

19. The HTML file named index.html (part 2) <label for="email_address2">Re-enter Email Address:</label> <input type="text" id="email_address2" name="email_address2"> <span id="email_address2_error">*</span>< br > <label for=" first_name ">First Name</label> <input type="text" id=" first_name " name=" first_name "> <span id=" first_name_error ">*</span>< br > <label>& nbsp ;</label> <input type="button" id=" join_list " value="Join our List"> </form> </main> </body> </html> Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 19

20. The web page in a browser after CSS has been applied to it Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 20

21. The link element that applies the CSS file <link rel ="stylesheet" href ="email_list.css"> The CSS file named email_list.css (part 1) body { font-family: Arial, Helvetica, sans-serif; background-color: white; margin: 0 auto; width: 670px; border: 3px solid blue; padding: 0 2em 1em; } h1 { color: blue; } Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 21

22. The CSS file named email_list.css (part 2) label { float: left; width: 11em; text-align: right; } input { margin-left: 1em; margin-bottom: .5em; } span { color: red; } Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 22

23. The web page in a browser with JavaScript used for data validation The script element in the HTML head element that adds the JavaScript file <script src ="email_list.js"></script> Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 23

24. The JavaScript file: email_list.js (part 1) var $ = function(id) { return document.getElementById (id); } ; var joinList = function() { var emailAddress1 = $("email_address1").value; var emailAddress2 = $("email_address2").value; var isValid = true; if (emailAddress1 == "") { $("email_address1_error"). firstChild.nodeValue = "This field is required."; isValid = false; } else { $("email_address1_error"). firstChild.nodeValue = ""; }   if (emailAddress1 != emailAddress2) { $("email_address2_error"). firstChild.nodeValue = "This entry must equal first entry."; isValid = false; } else { $("email_address2_error"). firstChild.nodeValue = ""; }   Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 24

25. The JavaScript file: email_list.js (part 2) if ($(" first_name ").value == "") { $(" first_name_error "). firstChild.nodeValue = "This field is required."; isValid = false; } else { $(" first_name_error "). firstChild.nodeValue = ""; }   if ( isValid ) { // submit the form if all entries are valid $(" email_form ").submit(); } }; window.onload = function() { $(" join_list ").onclick = joinList ; $("email_address1").focus(); } ;   Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 25

26. The primary HTML5 semantic elements header main section article aside nav figure footer Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 26

27. A page that’s structured with HTML5 elements <body> <header> <h1>San Joaquin Valley Town Hall</h1> </header> <main> <p>Welcome to San Joaquin Valley Town Hall. We have some fascinating speakers for you this season! </p> </main> <footer> <p>&copy; San Joaquin Valley Town Hall.</p> </footer> </body> Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 27

28. The HTML in a web browser Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 28

29. The div and span elements Element Description div A block element that provides a container for other elements. span An inline element that lets you identify text that can be formatted with CSS. Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 29

30. HTML div elements for a JavaScript application <section id=" faqs "> <h1>jQuery FAQs</h1> <h2>What is JavaScript?</h2> <div> // contents </div> <h2>What is jQuery?</h2> <div> // contents </div> <h2>Why is jQuery becoming so popular?</h2> <div> // contents </div> </section> Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 30

31. HTML span elements for a JavaScript application <label for="email_address1">Email Address:</label> <input type="text" id="email_address1" name="email_address1"> <span id="email_address1_error">*</span> < br >   <label for="email_address2">Re-enter Email Address:</label> <input type="text" id="email_address2" name="email_address2"> <span id="email_address2_error">*</span> < br >   <label for=" first_name ">First Name</label> <input type="text" id=" first_name " name=" first_name "> <span id=" first_name_error ">*</span> Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 31

32. The basic HTML attributes id class name for title Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 32

33. HTML that uses these attributes <body> <h1>San Joaquin Valley Town Hall</h1> <h2 class="first_h2" >Welcome to San Joaquin Valley Town Hall.</h2> <p>Please enter your e-mail address to subscribe to our newsletter.</p> <form id=" email_form " name=" email_form " action="join.html" method="get"> <label for="email" >E-Mail: </label> <input type="text" id="email" name="email" title="Enter e-mail address here." > <input type="button" value="Subscribe"> </form> </body> Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 33

34. The HTML in a web browser with a tooltip displayed for the text box Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 34

35. Two ways to provide styles Use an external style sheet by coding a link element in the head section <link rel ="stylesheet" href ="styles/main.css"> Embed the styles in the head section <style> body { font-family: Arial, Helvetica, sans-serif; font-size: 87.5%; } h1 { font-size: 250%; } </style> The sequence in which styles are applied Styles from an external style sheet Embedded styles Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 35

36. A head element that includes two style sheets <head> <title>San Joaquin Valley Town Hall</title> <link rel ="stylesheet" href ="../styles/main.css"> <link rel ="stylesheet" href ="../styles/speaker.css"> </head> The sequence in which styles are applied From the first external style sheet to the last Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 36

37. HTML that can be selected by type, id, or class <body> <main> <h1>The Speaker Lineup</h1> <p class="blue">October 19: Jeffrey Toobin </p> <p class="blue">November 16: Andrew Ross Sorkin</p> </main> <footer> <p id="copyright" class="blue right"> Copyright SJV Town Hall</p> </footer> </body> Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 37

38. CSS style rules that select by type, id, and class Three elements by type body { font-family: Arial, Helvetica, sans-serif; width: 400px; margin: 1em auto; } main { display: block; padding: 1em; border: 2px solid black; } h1 { margin: 0 0 .25em; } p { margin: .25em 0 .25em 3em; } One element by ID #copyright { font-size: 90%; } Two elements by class .blue { color: blue; } .right { text-align: right; } Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 38

39. The HTML elements displayed in a browser Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 39

40. The CSS file for a typical application in this book body { font-family: Arial, Helvetica, sans-serif; background-color: white; margin: 0 auto; width: 670px; border: 3px solid blue; padding: 0 2em 1em; } h1 { color: blue; } label { float: left; width: 11em; text-align: right; } input { margin-left: 1em; margin-bottom: .5em; } span { color: red; } Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 40

41. Terms related to CSS style rule property declaration property name property Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 41

42. The web page at c:/javascript/book_apps/ch01/email_list/index.html Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 42

43. Four ways to run an HTML page that’s on your own server or computer From your browser, use the Ctrl+O shortcut key combination to start the Open command. Then, browse to the HTML file and double-click on it. Use the file explorer on your system to find the HTMTL file, and double-click on it. Use the features of your text editor or IDE. Click on a link in the current web page to load the next web page. Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 43

44. Two ways to run an HTML page on the Internet Enter the URL of a web page into the browser’s address bar. Click on a link in the current web page to load the next web page. Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 44

45. The components of an HTTP URL on the Internet What happens if you omit parts of a URL If you omit the protocol, http:// will be used. If you omit the filename, the default document name for the web server will be used. The default document name is typically index.html, default.htm, or some variation. Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 45

46. Chrome with an open Console panel that shows an error Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 46

47. How to open or close Chrome’s developer tools To open the developer tools, press F12 or Ctrl+Shift+I . Or, click on the Menu button in the upper right corner of the browser and select More Tools  Developer Tools. To close the developer tools, click on the X in the upper right corner of the tools panel or press F12. Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 47

48. How to find the JavaScript statement that caused the error Open the Console panel by clicking on the Console tab. You should see an error message along with the line of code that caused the error. Click on the link to the right of the error message that indicates the line of code. That will open the Sources panel with the portion of JavaScript code that contains the statement displayed and the statement highlighted. Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 48

49. The Sources panel after the link in the Console panel has been clicked Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 49

50. The HTML5 ratings of current browsers Perfect score is 555 Browser Release HTML5 Test Rating Google Chrome 52 492 Opera 37 489 Mozilla Firefox 48 461 Apple Safari 9.1 370 Internet Explorer 11 312 Microsoft Edge 14 460 The website for these ratings http://www.html5test.com Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 50

51. The CDN for the JavaScript shiv for HTML5 compatibility http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js The URL for downloading the normalize.css style sheet http://necolas.github.io/normalize.css/ What the normalize.css style sheet does Normalize.css is a style sheet that makes adjustments to browser defaults so all browsers render HTML elements the same way. Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 51

52. The CDNs for the ECMAScript compatibility shims and shams https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/ es5-shim.min.js https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/ es5-sham.min.js https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/ es6-shim.min.js https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/ es6-sham.min.js https://wzrd.in/standalone/ es7-shim@latest The difference between the shim and sham files The shim.js files contain features that will run properly in older browsers. A shim.js file can run without its associated sham.js file. The sham.js files contain features that can’t be implemented in older browsers. A sham.js file requires and must come after its associated shim.js file. The URLs for the Babel transpiler website and its live transpiler page https://babeljs.io/ https://babeljs.io/repl Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 52

53. Terms related to cross-browser compatibility cross-browser compatibility JavaScript shiv normalize.css style sheet CDN (Content Delivery Network) shim.js files sham.js files transpiler Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 53

54. The dialog boxes for importing an Aptana project Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 54

55. How to create a new project Use the File  New  Web Project command. How to import a project with Aptana 3.4 or later Use the File  Import command to display the Import dialog box, click on Existing Folder as New Project, and click Next. In the Promote to Project dialog box, browse to the top-level folder for the application, enter a project name, and click the Finish button. The folder that contains the folders for all of the book applications C:\murach\javascript_jquery\book_apps Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 55

56. Aptana with the App Explorer shown and a JavaScript file in the second tab Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 56

57. How to open a file within a project Use the drop-down list in the App Explorer to select the project. Locate the file in the App Explorer and double-click on it. How to open a file that isn’t in a project Use the Project Explorer to locate the file, and double-click on it. Use the File  Open File command. How to close one or more files To close one file, click on the X in the tab for the file. To close all of the files except one, right click on the tab you don’t want to close and select Close Others. To close all of the files, right click on any tab and select Close All. Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 57

58. How to start a new file To start an HTML, CSS, or JavaScript file, select the File  New  File command. In the New File dialog box, select the folder that the file should be stored in, enter a filename for the new file with an extension (.html, . css , or . js ), and click the Finish button. To start a new file from another file, use the File  Save As command to save the file with a new name. Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 58

59. Aptana with an auto-completion list How to use the auto-completion feature The auto-completion feature displays a list of items that start with what you’ve typed. To insert one of those items, double-click on it or use the arrow keys to highlight it and press the Tab key. For some JavaScript statements, like an if-else statement, the editor will insert a snippet that contains the starting code including parentheses and braces. Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 59

60. How to identify errors in Aptana An error marker is a red circle that contains a white X at the start of a line. A warning marker is a yellow triangle that contains an exclamation mark. These markers are displayed as you enter and edit code. To get the description for an error or warning marker, hover the mouse over the marker. Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 60

61. How to hide and restore the Project and App Explorers To hide the Project or App Explorer, click on the X in its tab. To display the Project or App Explorer, use the Window  Show View  App Explorer or Project Explorer command. To hide the pane on the left side of the window, click on its minimize button. To restore the pane, click on the Restore icon at the top of the vertical bar that’s to the left or right of the editing window. Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 61

62. How to set the colors used to highlight the syntax Use the Window  Preferences command to open the Preferences dialog box. Click on Aptana Studio, and then click on Themes to display the Themes dialog box. Choose a theme from the Editor Theme list. Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 62

63. To run a web page, click on Aptana’s Run button Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 63

64. To rerun a web page in a browser, click on the Reload button Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 64

65. How to run a JavaScript application from Aptana Before you run a file, you should save any changes that you’ve made to it or any of its related files. To do that, you can click on the Save or Save All button in the toolbar. To run a JavaScript application in the default browser, open the HTML file for the application or, if it’s already open, select its tab. Then, click on the Run button. To run a JavaScript application in another browser, select the tab for its HTML file, click the down-arrow to the right of the Run button, and select the browser. Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 65

66. Short 1-1 Test the Email List app Estimated time: 5 to10 minutes. Use Chrome’s developer tools to locate an error, and then fix the error. Murach's JavaScript & jQuery (3rd Ed.) © 2017, Mike Murach & Associates, Inc. C1, Slide 66