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.

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)

Terms • Hypertext Markup Language (HTML) • static web page • HTTP request • HTTP response • rendering a page

Terms • dynamic web page • application server • database server • round trip

Image Image rollover swap

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

Please join our email list

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; }

label { float: left; width: 11em; text-align: right; } input { margin-left: 1em; margin-bottom: .5em; } span { color: red; }

The HTML script element for the JavaScript file

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(); }

header section article nav aside figure footer

San Joaquin Valley Town Hall

Welcome to San Joaquin Valley Town Hall. We have some fascinating speakers for you this season!

jQuery FAQs

What is jQuery?

// contents

Why is jQuery becoming so popular?

// contents

Which is harder to learn: jQuery or JavaScript?

// contents

Re-enter Email Address: *

First Name *

San Joaquin Valley Town Hall

Welcome to San Joaquin Valley Town Hall.

Please enter your e-mail address to subscribe to our newsletter.

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 Embed the styles in the head section The sequence in which styles are applied • Styles from an external style sheet • Embedded styles

San Joaquin Valley Town Hall The sequence in which styles are applied • From the first external style sheet to the last

The Speaker Lineup

October 19: Jeffrey Toobin

November 16: Andrew Ross Sorkin

Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 35 CSS rule sets that select by type, id, and class Type selectors body { font-family: Arial, Helvetica, sans-serif; width: 400px; margin: 1em auto; } section { border: 2px solid black; padding: 1em; } p { margin: .25em 0 .25em 3em; } ID selectors #first_heading { margin: 0 1em .25em; } Class selectors .blue { color: blue; } .right { text-align: right; }

/* The CSS workaround for HTML5 semantic elements */ article, aside, figure, footer, header, nav, section { display: block; } 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 38 The CSS file for a typical application (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 41 Four ways to run an HTML page that’s on your own server or computer • Use the FileOpen command or the FileOpen File. • Find the file in the Windows Explorer 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 and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 42 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.

http://www.modulemedia.com/ourwork/index.html protocol domain name path filename

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 and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 44 The HTML5 ratings of current browsers Perfect score is 500 Browser Release HTML5 Test Rating Chrome 22 437 Opera 12 385 Firefox 15 346 Safari 6 376 IE 9 138 The web site for these ratings http://www.html5test.com

Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 45 Guidelines for cross-browser compatibility • Test your web pages on all of the major browsers, including older versions. • Use the HTML5 and CSS3 features that are supported by all of the modern browsers. • Use the workarounds so HTML5 pages will run on the older browsers too.

Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 46 The workarounds for using HTML5 semantics The JavaScript shiv The CSS rule set article, aside, figure, figcaption, footer, header, nav, section { display: block; }

Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 47 How to test your web pages in older browsers • One of the problems in cross-browser testing is that you can’t install all of the old browsers on one system. • The solution is to use programs or web sites that offer this type of testing.

Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 49 How to create a project • Use the FileNewWeb Project command to display the New Web Project dialog box. • In the New Web Project dialog box: Enter a name for the project. Uncheck the Use Default Location box. Click the Browse button. Select the top-level folder for the project. Read the warning message. Click the Finish button. The folder that contains the folders for all of the book applications c:\murach\jquery\book_apps

Murach's JavaScript and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 51 How to open a file within an Aptana 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 an Aptana 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 in Aptana • 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 and jQuery, C1 © 2012, Mike Murach & Associates, Inc. Slide 53 How to apply a new theme for Aptana • 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 drop-down list.

Run button

Reload button