ClientWebAppDevelopmentS16 - Client-Side Web Application...

Info icon This preview shows pages 1–16. Sign up to view the full content.

View Full Document Right Arrow Icon
Client-Side Web Application Development with JavaScript ISYS 350
Image of page 1

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
Types of Web pages Static page: The contents of a web page is predefined by HTML tags and other mark up languages. Example: david chao’s home page. Dynamic page A web page includes contents produced by a programming language when the page is opened. Examples: Pages that display current date/time, visitor counter Yahoo home page Pages that display results based on a database query. Yahoo’s Finance/Enter symbol/Historical prices
Image of page 2
Technologies for Creating Dynamic Pages Client-side technology HTML Browser Document Object Model (DOM) JavaScript Cascade Style Sheet, CSS Server-side technology Microsoft .Net PHP Java Others: Node.js, a server-side JavaScript
Image of page 3

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
Example of Client-side Page using HTML, DOM and JavaScript
Image of page 4
HTML Introduction History: Standard The World Wide Web Consortium (W3C) HTML 5: <!DOCTYPE html> Multimedia controls Video, audio, canvas Controls with build-in validation
Image of page 5

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
Online Resources for Learning HTML w3schools.com
Image of page 6
HTML Tags (Elements) Heading section <head>, <title>, <meta>, <script>, etc. Body section <body>, <div>, <p>, <h1> to <h6>, <a>, <br> Formatting: <b>, <I>, <u>, <center> Comment: <!-- comment --> List <ul> Image Table: <table>, <tr>: a new row in table, <td>: a new cell in a table row. Form: <form>, <input>, <select>
Image of page 7

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
HTML Attributes HTML elements can have attributes that provide additional information about an element. Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value“ Name and value are case-sensitive and lowercase is recommended. Examples: <form id=“tf” name="testForm"> <div id="content"> <h1 class="center"> <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Image of page 8
TABLE Tag <table id="depTable" border="1" width="400"> <thead> <tr> <th>Year</th> <th>Value at BeginYr</th> <th>Dep During Yr</th> <th>Total to EndOfYr</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2000</td> <td>400</td> <td>400</td> </tr> </tbody> </table>
Image of page 9

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
FORM Tag Form attributes: mame: Form’s name, id For server-side form: action: Specify the URL of a program on a server or an email address to which a form’s data will be submitted. method: Get: the form’s data is appended to the URL specified by the Action attribute as a QueryString. Post: A preferred method for database processing. Form’s data is sent in the HTTP body.
Image of page 10
A form may contains: Textbox Check box Listbox Radiobutton Button Etc.
Image of page 11

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
Adding HTML Controls Tools/Palette/HTML, JSPCode Clips
Image of page 12
Creating HTML Form: Double-click Form element
Image of page 13

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
Create a Form Using NetBean
Image of page 14
Step by Step 1. Add a form tag: Name property Action: server-side program; leave it blank for client-side 2. Add lables by typing 3. Add text input 4. Add dropdown list: Number of options 5. Add radiobutton All buttons belong to a group 6. Add button Lable Type: Submit – submit to a server Standard – client-side 7. Add <br> to start a new line
Image of page 15

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
Image of page 16
This is the end of the preview. Sign up to access the rest of the document.

{[ snackBarMessage ]}

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern