CS2413: Web Site Development
Weekly Materials - Week 13
Click Topic to Open | Open All | Close All
Objectives
Chapter 14: A Brief Look at JavaScript
  • Describe the common uses of JavaScript in web pages
  • Describe the purpose of the Document Object Model (DOM) and list some common events
  • Create a simple JavaScript using the script element and the alert() method
  • Use variables, operators, and the if control structure
  • Create a basic form validation script
  • Describe common uses of jQuery
  • Describe how to obtain jQuery
  • Use jQuery selectors and methods
  • Configure an image gallery with jQuery
  • Describe the purpose of jQuery plugins
Assignments and Due Dates

Assignments and Due Dates: View

Required Readings

Web Development & Design Foundations with HTML5 - 7th Edition by Terry Felke-Morris
Chapter 14: A Brief Look at JavaScript

Required Tutorials
  1. Text's Companion Website - VideoNotes: http://wps.pearsoned.com/ecs_felke_webdevdesf_7/
    (Page number indicates related page in the textbook)
    • Chapter 14: JavaScript Message Box (Page 562)

If you are new to programming and/or JavaScript, and need a little more information about basic form validation, the following optional tutorials may be helpful. Use as needed. You may want to "fast-forward" through some of the parts. The text uses forms[0] to reference the form but the video used the form's name attribute. forms[0] is the preferred method.
(Note: In the video, the JavaScript is in a separate .js file. This is not required. The use of a .js file is the preferred method, for this course the JavaScript may be included in the HTML file as is done in the text.)

Sample Code and/or Data Files
  • Textbook's Chapter and Web Site Case Study Data Files
    • http://wps.pearsoned.com/ecs_felke_webdevdesf_7/243/62410/15977113.cw/index.html
    • Click on Student Resources
      Click on Student Data Files in left margin
    • Download the Zip file for the current chapter
    • Extract/unzip the file
    • Chapter files will be visible or accessible by opening various folders
    • "If" needed for this chapter's Case Study Hands-On, the files for Pacific Trails are located in the casestudystarters/pacific folder.
Supplemental Materials
  1. PowerPoint from Text: Chapter 14 - View (ppt) | Print (pdf)

  2. Author's Web Site: http://www.webdevfoundations.net/7e /chapter14.html
    (Scroll to the bottom of each chapter's web page for the chapter updates AKA errata sheet )

  3. Textbook's Website: http://wps.pearsoned.com/ecs_felke_webdevdesf_7/
    4. (The access code is located in the front of the text. For those with used text's the code is available online. Click on the link above.)
Software

No new software

Chapter Questions and Test Reviews

Chapter 14 Reviews:
Although no points are earned for the Quizlet tests, it is highly recommended that students know the answers. It is an excellent way to prepare for both the weekly quizzes and major tests.

Test 3 Review Sheet: Test 3 Review
It is highly recommended that students work through the test review sheets as each chapter is studied. It will help with learning the material and may reduce the amount of study time required for the major tests.

Required Assignments

WSD11: PacificTrails - JavaScript (Publish to Apollo, submit the URL in the LMS)
QUIZ: Chapter 14 (LMS)

Professor's Class Notes and Comments

This week...

Times flies when you are having fun! Can you believe we are already on the last chapter in the text. We are getting closer and closer to the end of the course.

It is highly, highly recommended that you to all of the Hands-On Practice exercises in this chapter.  But if you can't, at least do 14.8 which begins on p. 582 and 14.13 which begins on p. 598. You will need to know this for the test and your final project.

Caveat: JavaScript is case-sensitive so using the same combination of upper and lower case is extremely important. Also most JavaScript lines end with a ; (semi-colon). Many students have spent many hours trying to determine why their code will not work. Inconsistent use of upper or lower case can be the culprit. Be forewarned.

As you work through this chapter, the thought may cross your mind, "But can't I do this more easily with HTML5?" Keep in mind that all browsers are not compatible with all of the features of HTML5 and CSS3. Also, there may be times additional customization is needed. And, there may also be times that you have to maintain JavaScript code written by someone else. So at this point in time, it is still essential that web developers learn scripting languages.

At the time of this writing, Opera, FireFox, Chrome, and Internet Explorer 10 and later recognized HTML5 validation. Safari and earlier version of Internet Explorer do not. Be sure to read the information below about HTML5 vs Java validation and methods for implementing the code.

Use the Error Console in FireFox to help track your errors. It could make your life easier.

Chapter 14:

p. 562

The comment tags <!--   //--> tags that surround JavaScript code is important to stop errors for browsers that do not have JavaScript enabled. But there is still the issue that those users may miss out on important content or processing.  One solution to this problem is the use of <noscript> </noscript> tags.  The web developer can include coding for non-JavaScript users.

Check out http://www.w3schools.com/tags/tag_noscript.asp

While this example will only display a short message, it would be more beneficial to include alternate text or perhaps a link to a non-script version.

p. 563 Practice with Debugging, p. 575 FAQ What can I do when my JavaScript code does not seem to be working?

Page 563 take time to read this and try it out. Also, check out the information using alerts for finding errors which is on page 575. You will probably use both of these methods to find errors. It may save you time and frustration.

p. 565 document.lastModified

The text briefly mentions this property. However, how many times have you found an article on the Internet and wondered how current is the information? I have spent great deal of time trying to determine if the article was written recently? This short JavaScript snippet can update your web page automatically with the date of the last modification.

This code will be required on all pages of your final project.

p. 582 Hands-On Practice 14.8 - HIGHY RECOMMENDED!!

If you need help understanding the concepts, review the videos listed under Required Videos at the top of this web page.

p. 586 Accessibility

Interested in seeing how webpages that do not use JavaScript display your pages? This can be a factor when determining accessibility. Try disabling JavaScript and then viewing your web pages.

p. 588 Access jQuery via Content Delivery Network (CDN)

Unless there is no Internet connection, normally I use the CDN versus including the actual .js file with my code.