New User Special Price Expires in

Let's log you in.

Sign in with Facebook


Don't have a StudySoup account? Create one here!


Create a StudySoup account

Be part of our community, it's free to join!

Sign up with Facebook


Create your account
By creating an account you agree to StudySoup's terms and conditions and privacy policy

Already have a StudySoup account? Login here

Intro to Web Development

by: Mrs. Amelia Baumbach

Intro to Web Development IT 3203

Mrs. Amelia Baumbach

GPA 3.57

Robert Brown

Almost Ready


These notes were just uploaded, and will be ready to view shortly.

Purchase these notes here, or revisit this page.

Either way, we'll remind you when they're ready :)

Preview These Notes for FREE

Get a free preview of these Notes, just enter your email below.

Unlock Preview
Unlock Preview

Preview these materials now for free

Why put in your email? Get access to more of this material and other relevant free materials for your school

View Preview

About this Document

Robert Brown
Class Notes
25 ?




Popular in Course

Popular in Information technology

This 11 page Class Notes was uploaded by Mrs. Amelia Baumbach on Tuesday October 20, 2015. The Class Notes belongs to IT 3203 at Southern Polytechnic State University taught by Robert Brown in Fall. Since its upload, it has received 27 views. For similar materials see /class/225462/it-3203-southern-polytechnic-state-university in Information technology at Southern Polytechnic State University.


Reviews for Intro to Web Development


Report this Material


What is Karma?


Karma is the currency of StudySoup.

You can buy or earn more Karma at anytime and redeem it for class notes, study guides, flashcards, and more!

Date Created: 10/20/15
IT 3204 Introduction to Web Development JavaScn39pt and HTML September 27 Syllabus Error Corrected The first exam is October 2 Please correct yourpaper syllabus This error has been corrected in the online syllabus Labeling Systems Feedback in a conversation is immediate Feedback when we converse via a Web site is at best delayed What we call things labels are an important part ofthe conversation Here is a Web Page nuv vrlllm Kinds of Labels Navigation system choices Contextual links Headings Index terms MIND ampSPRIT Labels Within Navigation Sstems Labels as Contextual Links yBIue Book HIE IL Labels as Headings Kelley Blue unk Labels as Index Items snzindex About Iconic Labels Blue HowJet Blue Fixed It ItIBlue Considerations in Designing Labels I Content I Users I Context General Guidelines Narrow scope Labeling systems not labels consider I Style I Presentation I Syntax I Granularity I Comprehensiveness I Audience Sources of Labels I Your current site I Your competitors I Controlled vocabularies thesauri I Search logs Creating Labeling Systems Content analysis Content authors Subject matter experts User advocates Users Usability testing Tuning and Tweaking I Review the list I Remove duplicates I Resolve synonyms I Review for consistency I Plan ahead ClientSide JavaScript Clientside JavaScript is core JavaScript embedded in HTML All JavaScript variables are properties of some object The Window object is the largest outermost environment The HTML page is the document object A Simple JavaScrIpt Example lt mm mm mm wmum m mummmc m we 4m lthndYgt cunt type textljavascxlpt gt mnel kxahlw w natal ltugtltthgtllmhexltlthgtltthgt5q1meltlthgtltuugtcuheltlthgtltltxgt l r l 1 ltltdgt 1 ltItdgtltltxgt l A Simple JavaScript Example var i5 documentwrite quotlttab1egtquot document write quotlttrgtltthgtllumberltthgt ltthgtsquareltlthgtltthgtCubeltlthgtltltrgtquot documentwrite quotlttrgtlttdgtquotiquotlt tdgt lttdgtquotiiquotlttdgtlttdgtquotiiiquotlttdgtlttrgtquot documentwrite quotlttab1egtquot Result of the Example A tworow table With headings and data Elle gal Mew in aakmavks Number Squme Cube am The Document Object I The document object is a container for the displayed HTML it is a property of Window I The document object has properties and methods One ofthe methods is the Write method Which sends HTML to the browser s rendering engine The HTML elements displayed by the browser are properties of the document object The Document Object Model De nes an interface between HTML and applications D M 0 Notastandard ad hoc model for early support of J avaScript DOM 1 HTML and XlVIL 1998 2 Added style sheet support 2000 Netscape 6 not complete in DOM 3 XML content future An HTML Document is a Tree The DOM Interface 39 An abstract interface Logically a treehke structure notnecessarily implemented as a tree There mustbe a correspondence binding between language and model There can be more than one tree In a document DOM objects have propemes and methods The DOM Tree DOM Example ltinput type text name address gt one object two properties e value text value address name is deprecated in XHTML Use id instead ofname othet than mfotm elements Ifid and name are both present they should generally be the same name DOM Objects Contain Arrays HTML elements are usually not required to have an ID attribute The DOM uses arrays to make anonymous elements accessible to JavaScript The document object contains afonns array The forms array contains an e1ements array DOM Example Imenl nuns elemenls doc What about introduction ofnew elements7 Name Il Name III Address I Address I cw l III cw III Identifying Elements ltin meridian my typeetttexu meetauumst rue adores Ter Strict does not you don t needit ei er You do need name on ltin up and example shows the name and1D attributes as identical allow name on ltformgt and 39 Finding Elements by Identifier ltform iduorderquotgt ltinput typevitextll nameuaddressquot iduaddressquotgt var xdoculnentgetElementByIdquotaddressquot Retums a reference to the named element id must be unique within the document var yxva1ue EventDriven Programming In normal progmmming the physical sequence of instructions determines the order of execution JavaScript functions are o en written to be executed when something happens what happens event handler code to execute Events are objects Names are casesensitive Events and Tag Attributes ltinput typeusubmitquot onclickv39a1ert395utton C11cked quot gt or onclick buttonhand1er 39quot Event Attributes and Legal Tags Not all event attributes apply to all HTML tags Example onabo may be used only with ltimggt ltimg srcupicturejpgquot onabort quotalert39lley You stopped my picture39 quot eight gt Focus and Blur An element has focus when acting acw on that element An element gem focus with a mouse click a tab or the focus method To blur an element is to move focus away from it The Load and Unload Events Laud occurs when a page or frame is fully loaded Caution about multiple frames the fact that the quotlastquot one is loaded doesn t mean the others are Unload occurs when the browser user navigates away Used for cleanup to pop up obnoxious stuff Event Handlers for Buttons unclick Occurs when button is clicked Also checkboxes and radio buttons Radio buttons separate event handlers for each button or loop through looking for checkedtrue Radio Button Example var e1ementsdocumentgetElementById quotmyE ormquote1ements all elements for var i0ilte1ements1engthi if e1ementslilchecked resu1te1ementsliva1ue Radio Buttons Checking One Group ltform idquotorderquotgt ltinput typequotradioquot namequot1anguagequot valuequotenquot gt ltinput typequotradioquot namequot1anguagequot valuequotfrquot gt ltformgt Radio Buttons Checking One Group var xdoculllent getElementById quotorderquot elements 39 var for i0iltx1ength1 if xliname vvcreditquot as xi hecked selectedxiva1ue Validating Form Input Why check on client I fast no network access I immedi e dbac Why check on server I secure I can do database lookups Which Way is right hone lt1nput type t namequotphonequot gtltbr gt ltinput typevisubmitii valuequotsubmitquotgt ltformgt The verify Function function verify i else return true The HTML Document imTYPE HTML PUBLIC ellwacllm39n quotmy Ln hansiunnalllm gt 4m ltLitlegtvexify saxnu mm language Javascxipl We Lexljavascxipl gt y t hasExxnx 3159 phlhlm docmnlqel lem nu y1dt phone Luallle Ilum senchtlAd3 d3 d4lii 10 nus alexlt Invalid phnne mlmhex p i if thasExxnxi xeunn false 1quot 1mm nus gt 77gt on mgfnmcqi nnsuhmit xeunn unify gt dam m nxdex and Phone ltinplll type text hnne um phone gt ltinplll type submit in w gt dim ltlhndygt ltlhun1gt Steps to ClientSide Validation Verify eld by eld setting a ag alert message clear complete and polite Focus on erroneous element errdocumentgetElementByIdquotphonequot errfocus 0 Select the text possibly errse1ect Return false to stop form submission Where to Call verify This Works when the button is clicked but not if the form is submitted another Way such as With the submit method of the form object ltinput typequotsubmitquot onclickquotreturn verify quot gt This always works and so is the preferred method ltform actionquotmy form cgiquot onsubmitquotreturn verify quot gt Comparing Passwords Scenario Routine to change passwords We want the user to type it twice Algorithm lst password blank error l and 2 not equal error otherwise return true Registering the Event Handler document passi orm onsubmit chkPass What39s the other Way Why is this placed a er ltformgt 7 Why not chkPas5 7 The Function function chkPassU if documentpassForminitialvalue quotquot alertquotYou did not enterquot document passForm initial focus return false Another Approach The change event can validate data as entered feels more interactive document order phone onchangechkPhone Will this approach work for the password example What are the general conditions where it works N rr R 500 MED our NbT ownND 0 394 OTHER F L The Function Continued if document passForm initial value 1 document passForm seeondvs1ue alertquotThe two passwords are differentquot document passE orm initial focus document passFoz m initial se1eet return false else return true A Word About Security UNSEC IRE Because JavaScript code executes in the client browser a malicious user can change it Nev er de endu on JavaScri t for it The DOM 0 Event Model An event occurs on an object If that object has an event handler for that event type the event handler is executed The DOM 2 Event Model Does not include the DOM 0 event model ut don t worry too much Is not support by IE 6 Microso was on the committee Microsoft had plenty of time 999 The idea allow events to be handled at the highest level possible DOM 2 Event Propagation An event occurs The event starts at document propagates down through the DOM tree At each level if handlers exist they are run A handler can capture the event The handler on the target is run ifit exisw Some but not all events bubble back up DOM 2 Event Registration Call addEventListener with event nam handler function name Boolean call only during capture phase document order phone addEventLi stener quotchangequot chkPhone false If true called only during capture phase39 if false can be called at target node or during bubbling Stopping Propagation stopPropagation method of event A um nt w v nh n Inan Can be applied during downward propagation or during bubbling Do this when the event has been completely handled Stopping Default Action InDOM 0 return false In DOM 2 preventDefault method documentorder submitpreventne au1t DOM 2 Reminder The DOM 2 event model is very powerful It doesn t work on IE6 because MS didn t implement it that s why Therefore it s mostly useless today The Navigator Object Provides information about the browser var browser v39Browser Informationnquot for var propname in navigator browser p me quot quot navigator propname quot nquot a1 ert browser P The Navigator Object M a Don mumquot and information MSIE claims to be Mozilla


Buy Material

Are you sure you want to buy this material for

25 Karma

Buy Material

BOOM! Enjoy Your Free Notes!

We've added these Notes to your profile, click here to view them now.


You're already Subscribed!

Looks like you've already subscribed to StudySoup, you won't need to purchase another subscription to get this material. To access this material simply click 'View Full Document'

Why people love StudySoup

Bentley McCaw University of Florida

"I was shooting for a perfect 4.0 GPA this semester. Having StudySoup as a study aid was critical to helping me achieve my goal...and I nailed it!"

Kyle Maynard Purdue

"When you're taking detailed notes and trying to help everyone else out in the class, it really helps you learn and understand the I made $280 on my first study guide!"

Jim McGreen Ohio University

"Knowing I can count on the Elite Notetaker in my class allows me to focus on what the professor is saying instead of just scribbling notes the whole time and falling behind."


"Their 'Elite Notetakers' are making over $1,200/month in sales by creating high quality content that helps their classmates in a time of need."

Become an Elite Notetaker and start selling your notes online!

Refund Policy


All subscriptions to StudySoup are paid in full at the time of subscribing. To change your credit card information or to cancel your subscription, go to "Edit Settings". All credit card information will be available there. If you should decide to cancel your subscription, it will continue to be valid until the next payment period, as all payments for the current period were made in advance. For special circumstances, please email


StudySoup has more than 1 million course-specific study resources to help students study smarter. If you’re having trouble finding what you’re looking for, our customer support team can help you find what you need! Feel free to contact them here:

Recurring Subscriptions: If you have canceled your recurring subscription on the day of renewal and have not downloaded any documents, you may request a refund by submitting an email to

Satisfaction Guarantee: If you’re not satisfied with your subscription, you can contact us for further help. Contact must be made within 3 business days of your subscription purchase and your refund request will be subject for review.

Please Note: Refunds can never be provided more than 30 days after the initial purchase date regardless of your activity on the site.