Chapter 1 Slides

Chapter 1 Introduction to web development Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 1 Objectives Applied 1. Run JavaScript applications that are on the Internet, your computer, or a local server by loading their HTML documents into your browser. 2. Use a text editor or IDE like Aptana Studio 3 to edit HTML, CSS, and JavaScript files. 3. 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 and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 2 Objectives (continued) Knowledge 1. Describe the components of a web application. 2. Describe HTTP requests and responses. 3. Distinguish between the way a web server processes static web pages and dynamic web pages. 4. Describe the use of JavaScript and jQuery. 5. Describe the use of HTML and CSS. 6. Distinguish between the HTML div and span elements and the HTML5 semantic elements. 7. Describe the use of these HTML attributes: id, class, title, for, and name. Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 3 Objectives (continued) 8. Describe the coding for these types of CSS selectors: type, id, and class. 9. Describe the components of a CSS rule set. 10. Describe the components of a URL. 11. Describe the issue of cross-browser compatibility as it relates to the development of web pages and JavaScript applications. 12. In general terms, describe the two workarounds for using the HTML5 semantic elements with old browsers. Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 4 The components of a web application ` Computer The Internet Web Server Tablet Smart Phone Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 5 Terms • client • web server • network • intranet • local area network (LAN) • Internet • wide area network (WAN) • Internet Service Provider (ISP) Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 6 A static web page at http://www.modulemedia.com/ourwork/index.html Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 7 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 and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 8 A dynamic web page at amazon.com Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 9 How a web server processes a dynamic web page Terms • dynamic web page • application server • database server • round trip Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 10 A web page with image swaps and rollovers Image Image rollover swap Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 11 How JavaScript fits into this architecture Terms • scripting language • JavaScript engine • jQuery • client-side processing • server-side processing Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 12 Some of the uses of JavaScript and jQuery • Data validation • Image swaps and rollovers • Accordions • Carousels • Slide shows • Collapsible panels • Tabs Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 13 An HTML file (index.html) in a browser after CSS has been applied to it Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 14 The code for the HTML file named index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Join Email List</title> <link rel="stylesheet" href="email_list.css"> <script src="email_list.js"></script> </head> <body> <section> <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 and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 15 The HTML file named index.html (continued) <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> </label> <input type="button" id="join_list" value="Join our List"> </form> </section> </body> </html> Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 16 The code for the CSS file named email_list.css body { font-family: Arial, Helvetica, sans-serif; background-color: white; margin: 0 auto; width: 650px; border: 3px solid blue; } h1 { color: blue; } section { padding: 0 2em 1em; } Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 17 The CSS file named email_list.css (continued) label { float: left; width: 11em; text-align: right; } input { margin-left: 1em; margin-bottom: .5em; } span { color: red; } Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 18 The web page in a browser with JavaScript used for data validation The HTML script element for the JavaScript file <script src="email_list.js"></script> Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 19 The code for the JavaScript file (email_list.js) 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 = ""; } Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 20 The JavaScript file (continued) if (emailAddress1 !== emailAddress2) { $("email_address2_error").firstChild.nodeValue = "This entry must equal first entry."; isValid = false; } else { $("email_address2_error").firstChild.nodeValue = ""; } if ($("first_name").value == "") { $("first_name_error").firstChild.nodeValue = "This field is required."; isValid = false; } else { $("first_name_error").firstChild.nodeValue = ""; } if (isValid) { $("email_form").submit(); } } window.onload = function () { $("join_list").onclick = joinList; $("email_address").focus(); } Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 21 The primary HTML5 semantic elements header section article nav aside figure footer Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 22 A page that’s structured with HTML5 elements <body> <header> <h1>San Joaquin Valley Town Hall</h1> </header> <section> <p>Welcome to San Joaquin Valley Town Hall. We have some fascinating speakers for you this season! </p> </section> <footer> <p>© San Joaquin Valley Town Hall.</p> </footer> </body> Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 23 The HTML in a web browser Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 24 The JavaScript shiv that tells older browsers about the HTML5 elements <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 25 Terms • HTML5 semantics • semantic elements • JavaScript shiv • JavaScript shim Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 26 HTML div elements for a JavaScript application <section id="faqs"> <h1>jQuery FAQs</h1> <h2>What is jQuery?</h2> <div> // contents </div> <h2>Why is jQuery becoming so popular?</h2> <div> // contents </div> <h2>Which is harder to learn: jQuery or JavaScript? </h2> <div> // contents </div> </section> Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 27 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 and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 28 The basic HTML attributes id class title for name Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 29 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 and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 30 The HTML in a web browser with a tooltip displayed for the text box Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 31 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">

Chapter 1 Slides

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support