Client-Side Web Programming Basics
This introduction covers the fundamentals of client-side web programming, including HTML, CSS, JavaScript, and responsive web design. Explore essential concepts like HTML structure, tables, and scripts on an HTML page.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Client side web programming Introduction Jaana Holvikivi, DSc. School of ICT
Course contents Course contents HTML, HTML5 CSS, CSS2, CSS3 Javascript, JQuery Responsive Web Design Being prepared for multiple device types 7.1.2013 Jaana Holvikivi 2
HTML: Basic structure <html> <head> <title>A sample HTML document</title> </head> <body> <p> This is a sample HTML document </p> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>A sample HTML document</title> </head> <body> <h1>HTML document</h1> <p> This is a sample HTML document </p> <div>Created by JHH: 2013 </body> </html> </div>
HTML HTML element markup element markup link: <a href="http://www.google.com">Search engine</a> Start, close element space attribute="value" image: <img src="pete.jpg"/> empty element Space stripped (breaks, tabs, enter)
Tables: Symmetrical structure!! <table> <tr> </tr> <tr> </tr> </table> <td> cell1 </td> <td> cell 2 </td> <td> <img src="photo.gif"/> </td> <td> 1 </td> 7.6
Scripts and styles on an HTML page HTML HEAD STYLEsheet STYLE Javascript file SCRIPT BODY <tag Javascript> <tag> Javascript <tag style> J.Holvikivi
Page requests on the Web User workstation Server HTTP request HTML pages Browser: HTML, scripts HTTP: HTML pages Internet Program Server CGI PHP ASP Java Database server Oracle SQL
Page requests: XMLHTTPRequest Server Application (PHP, Java, XSLT, ASP): Request readyState response Ajax engine: Create server Request Send Monitor status Get response Process returned data XMLHTTPRequest (asynchronous) Returned data Browser: Capture event/ Update page Database server XML User workstation SQL
Javascript Javascript Javascript is always downloaded from the server to the client Either as a file reference Or embedded in HTML Javascript is executed on client side. Less load on server Example: checks on form input (numeric fields, dates, required fields) Javascript understands the structure of the HTML page (document); DOM 11 EVTEK J.Holvikivi
HTML document HTML document Javascript can recognize the tree structure <html> <head> <title>This is a test page</title> </head> <body id= trunk > <span>Below is a table... </span> <table border=1> <tr> <td>row 1 cell 1</td> <td>row 1 cell 2</td> </tr> <tr> <td>row 2 cell 1</td> <td>row 2 cell 2</td> </tr> </table> </body> </html> 12 J.Holvikivi
Tree of the page <HTML> <HEAD> <BODY> <TITLE> <SPAN> <TABLE> This is a test page Below is a table <TR> <TR> <TD> <TD> <TD> <TD> data data data 13 J.Holvikivi
Document Object Model (DOM) Used by many programming languages (php, Java, C#, C++, Javascript ) and understood by browsers (Firefox, IE, Chrome, Safari) XML -document is a collection of nodes that make a hierarchical tree structure The hierarchy is used in navigating the tree to locate information Inefficient use of memory: the tree structure is created in the memory DOM enables adding, moving, deleting and changing of nodes 14 J.Holvikivi
Document tree Ancestor Parent / ancestor Node Sibling Attribute Child /descendant Namespace Descendant 15 J.Holvikivi
Processing of the tree Processing of the tree Start with the root node ( document-object) Element properties firstChild lastChild nextSibling parentNode Methods to navigate the tree in Javascript getElementByID(id) getElementsByName(name) getElementsByTagName(name) getAttribute(name) 16 J.Holvikivi
