Module 5 Module-5: Introduction to JavaScript: Functions, DOM, Forms, and Event Handlers 1, Explain how forms are processed in Client side and server side a) So client side scripting runs code like JavaScript on your phone or desktop while server- dle scripting runs on the back-end server. That way, it can deliver dynamic content to web pages in response to the client dev b) Clientside vs. server-side languages Client side uses the following scripting languages: » CSS + HTML + JavaScript Italso sends requests via web browsers like Firefox, Google Chrome, Internet Explorer, and Safari, This allows you to receive server information within seconds, Server side uses coding languages like: + PHP + Java - cH Forms and How They’re Processed: Client-Side Versus Server-Side ‘+ There are two basic strategies for processing a form’s input data. ‘+ The calculations may occur on the client side (on the browser’s computer) or on the server side {on the web server's computer). + With server-side processing, the form input values are transmitted across the Internet to the server computer. ‘+ The server then does the calculations and transmits the answers back to the client computer. ‘+ The answers are in the form of @ new web page or an updated version of the original web page ‘+ With client-side processing, there’s no need to go back and forth across the Internet with user input and generated results. After the web page downloads, + the client computer does all the work. Therefore, client-side processing tends to be faster. So normally, you should use client-side processing for relatively simple web pages. Module 5 Page 1 @ scanned with OKEN ScannerList some of the more popular controls and the elements used to implement them FIGURE 8.6 shows some of the more popular controls and the elements used to implement them | Sput Element —_—— a 01 list box | number | radio butt | checkbox =| [texcarea Element | | textarea control FIGURE 8.6 Some of the more popular controls and the elements used to implement them form Element form element's syntax: with example

| label | text-box, list-box, check-box, etc. | label | text-box,list-box, check-box, etc. | submit-button |

| cforms | | First Name: |

button" value="Generate Email" onclick="generateEmail (this. form) ;"> | | text" id="first" size: 15">
Module 5 Page 2 @ scanned with OKEN Scanner4. Explain how to Access a Form’s Control Values with an example. chead> [parameter that holds the {form object. ctitle>fmail Address Generator «script> // This function generates an email address. function generatefmail (form) document .getElementayI¢ ("email form.elements ("first") value form-elements["last"] .value + "epark.ed ") innerHTML = u's form. reset (); form.elements ("first") focus () : } // end generatezmail 5 Develop a JavaScript program to print Hello World message using Function ‘eIDOCTYPE heml> cheat Lani heads creta charsi Seta nane-tauthor™ content tlentielloc/title> ction diaplayteliol { var sg: kag = docunent .gotElenentByld ("nessage" Sog-outerHTN = *chisitello, workdt* ebedy> eh? id="sesi ‘fo ace the traditional {iret-pregram greetis cinpat types Tees

| document mimi tangent root | body we ra. oa | | Hero | [iseimessace| | Toseemeveatonita | [ypecnaar) [ vaueccmuer | proram greeting, cick below, | FIGURE 8.3 Node tree for simplified Hello web page Module age @ scanned with OKEN Scanner