Topics

Topics • HTML • CSS • Javascript • DHTML • jQuery

Basic HTML Example <html> <head> <title>Title Bar</title> </head> <body> <h1>Header</h1> Regular text. <br/> More Text <hr/> Even More Text </body> </html>

<html> Tag • <html> - signifies the start of an HTML document, should always be the first and last tag on the page • HTML is the root tag <html> <head> <title>TitleBar</title> </head> <body> <h1>Header</h1> Regular text. <br/> More Text <hr/> Even More Text </body> </html>

Basic HTML Tags • <head> - marks the section of the page that will contain basic header information • <title> - text will be shown at the top of the window bar • <body> - text in this area will be displayed inside the main part of the browser window <html> <head> <title>TitleBar</title> </head> <body> <h1>Header</h1> Regular text. <br/> More Text <hr/> Even More Text </body> </html>

Basic HTML Tags • <h1> - <h4> - header tags which make the text larger and bold; there is an automatic <br> after this • <br/> - same as ENTER • <hr> - puts a horizontal rule (line) on the page <html> <head> <title>TitleBar</title> </head> <body> <h1>Header</h1> Regular text. <br/> More Text <hr/> Even More Text </body> </html>

Basic Tags & Attributes • <a> - anchor tag; used for links; main attribute is "href" which defines the location of where the link will go • <font> - font tag; used to define a particular font or style of font to display on the page; attributes used most often: "face", "color", "size" <html> <head> <title>TitleBar</title> </head> <body bgcolor="green"> Regular text. <a href = "http:/google.com"> This is a link.</a> <font face="Arial"> Text in Arial font</font> </body> </html>

More Basic Tags • <i>- italics • <b> - bold • <u> - underline • <img> - image tag; used to place photos, images or graphics within a page; attributes used are "src" and "border” • <p> - paragraph tag; used to separate paragraphs by a break • <ul> - unordered list tag; signifies the start of an unordered list of items • <ol> - same as the unordered list tag, but items are numbered (ordered) • <li> - used within the <ul> or <ol> tags, this signifies a list item • <table> - define a table block along with <tr> and <td>

Important <table> Attributes • align – aligns the table to the left, right, or center • bgcolor – specifies a background color for the entire table • border – specifies a width (in pixels) of the border around the table and its cells • cellpadding – sets the amount of space (in pixels) between the cell border and its contents • cellspacing – sets the amounts of space (in pixels) between table cells • height – specifies the height of the entire table (pixels or percentage) • width – specifies the width of the entire table (pixels or percentage)

Form • <FORM> - basic form tag; signifies the start and end of a form • Must wrap any information sent to server • <INPUT type=“”> a form input control tag; type can vary: text, password, checkbox, radio, submit , reset , hidden • <SELECT> - drop down tag; signifies the start and end of a drop down list • <OPTION> - drop down element tag; signifies element in the drop down list Any Information from a tag that should be passed to the server must be wrapped by a form tag

Input types <input type="text" /> is a standard textbox. <input type="password" /> the characters typed in by the user will be hidden. <input type="checkbox" /> can be toggled on and off <input type="radio" /> the user can only one button <input type="submit" /> a button that when selected will submit the form. <input type="button" /> - is an button <input type="reset" /> is a button that when selected will reset the form fields to their default values. <input type="hidden" /> is a field that will not be displayed

All together example All.html

Summary • Why do we love HTML? • Super easy to learn - you know it already • Readable • It’s a standard • Tree / objects structure • Any better way to present web pages? • What do we miss? • Server-side programming • Reuse of code • Multimedia capabilities (flash / silverlight etc.) • Styling (CSS)

CSS Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML Styles define how to display HTML elements External Style Sheets can save you a lot of work External Style Sheets are stored in CSS files

Inline style Inline style is an attribute of an HTML tag <p style="color: red">text</p> <a href=“google.com” style="background-color: blue; color: yellow;">Yellow text on a blue background.</a> Default properties can be found here: http://www.w3.org/TR/CSS21/propidx.html

Internal <style type="text/css"> p {color: red;} a {color: blue;} </style> Apply on all a/p elements in the page. Must be nested inside the <head> tag.

External Can be on different files e.g. web.css Can link to the external CSS files from the HTML file: <link rel="stylesheet" type="text/css" href="web.css" /> Can be used by more than one file Web.css: body { font-size: 0.8em; color: navy; }

CSS Ordering • the order of importance the browser should follow when it encounters conflicting style rules • Inlinestyle (inside an HTML element) • Internal style sheet (inside the <head> tag) • Externalstyle sheet

Internal/External style for a unique element <p id=“unique7”>unique</p> <style> #unique7 {color:red;} </style> Id attribute # operator

Internal/External style for many elements <p id=“unique7” class=“puni”>unique1</div> <p id=“unique8” class=“puni”>unique2</div> <style> .puni{color:red;} </style> Class attribue Dot operator

CSS Grouping h2, .thisOtherClass, .yetAnotherClass { color: red; } Many #ids .classes and elements See example Zen Garden

Pro and Cons of CSS • Pros • Make it easy to change layout • Readability and size • SEO • Consistency • Fast loading • Code reuse • Maintenance • Cons • Vary among different browser

JavaScript • A scripting language • Usually used for web development • It runs on the client side • What execute it? • Dynamic programming language

JavaScript Features • Structured • If, while, for, … • Dynamic • Variable type can change in run-time • Evaluate string as code in runtime – eval() • Prototype-based • Similar to classes in Java • Run-time environment • Automatic garbage collection • Regular expressions support • Similar to Perl, can do a lot of string manipulation • Functional programming • Functions are objects • Inner functions and closure support

Javascript and the industry • Sites like Facebook and Gmail have more Javascriptcode than any other language • Recent versions of web browser can run JavaScript 2-30 times faster than older versions • The demand for JavaScript developers increased recently in more than 300%

Syntax • The script tag • The saved word document provide access to the current location of the page <head> <script> alert(“hello world”); </script> </head> <body> <script type="text/javascript"> document.write(“<b>Hello World!</b>"); </script> </body>

External JS file • Sometimes you might want to use the same JavaScript on several pages, without having to write the same script on every page • <script src=“aaa.js"></script>

Variables Dynamic-type variables <script> varnum = 8; num= num+2; varstr = “abc”; num= “Javascript is a dynamic lang”; document.write(num); </script> Like many other languages we can use many types of operators like ++,--,+=,/=,%,!=,==

If Statement • 1st option var x=“8”; If (x==8){ alert(“8”); } • 2nd option variablename=(condition)?value1:value2 ;

Functions Syntax: function func(var1,var2,...,varX){code} • You can call a function after the browser read it. • Function can return a value Example: function displaymessage(msg) { alert(msg); { displaymessage(“Javscript”); displaymessage(“function”);

What else • For, while • Switch/cases • Do while loop • Break/Continue • Try/Catch/throws

Array/For each • Array first index is 0 var x; varmycars = new Array(); mycars[0] = “Suzuki"; mycars[1] = "Volvo"; mycars[2] = "BMW"; for (x in mycars) { document.write(mycars[x] + "<br />"); }

Javascript is an OO language • Objects has properties and methods • Text Variables are Strings var txt="Hello World!"; document.write(txt.length); document.write(txt.toUpperCase());

Creating new object • Object Constructor function cat(name) { this.name = name; this.talk= function() {alert( this.name + " say meeow!" ) } } cat1 = new cat("felix") cat1.talk(); //"felixsays meeow!" cat2 = new cat("ginger") cat2.talk(); //"ginger says meeow!" ; Pay attention: you can add function and properties anytime!

Prototyping • We use the prototype keyword in order to add functions to all instances of an object cat.prototype.changeName = function(name){ this.name = name; } firstCat = new cat("pursur"); firstCat.changeName("Bill") ; firstCat.talk(); //"Bill says meeow!"

Closure • creating function in runtime • a closure is a stack-frame which is not deallocated when the function returns function sayHello(name) { vartext = 'Hello ' + name; // local variable varsayAlert = function() { alert(text); } return sayAlert; } var say = sayHello(“Jane”);say();

DHTML • DHTML stands for Dynamic HTML. • Accessing HTML elements (JS objects) • Modifying HTML elements • Modifying CSS properties • Handling Events

Document Object Model (DOM) • A standard object model for representing HTML or XML and related formats. • Tree of elements • Web browser using the DOM structure to renderHTML faster • DOM is the way JavaScript sees its containingHTML page and browser state • DOM lets you access directly any node in the tree of element, it’s parent or children.

The Document tree

Document • Document is the main element • Get element by unique id • document.getElementById(id) • To replace the content of an HTML element use: • document.getElementById(“someId”).innerHTML=new HTML; • To change the attribute of an HTML element use: • document.getElementById(“someId”).attribute=new value; • Other methods: • getElementsByTagName() • document.createElement(“tagNameHere”) • getElementsByName(“name”)

Events • HTML is an event-oriented language • Each element has events that can be handled using JavaScript code • HTML events are attributes of HTML elements • Simple code example: <a href=“google.com“ onclick="alert ('wow. Events!')">Click me</a>

Event list • onblur (executed when an element loses focus) • onchange(executed when something is changed) • onclick(executed when a mouse is clicked on an element) • onfocus(executed when an element gains focus) • onkeydown(executed when a key is pressed down) • onkeyup(executed when a key is released) • onload(from the body tag and executed when the page loads) • onmousedown(executed when the button of a mouse is pressed down) • onmouseout(executed when the mouse cursor moves away) • onmouseover(executed when mouse cursor moves over an element) • onselect(executed when an element is selected) • onsubmit(executed when a form is submitted) • onkeypress,onunload, onreset , onmouseup, • onmousemove, ondblclick

This Keyword • This keyword represents the specific element <html> <head> <script type="text/javascript"> function changetext(id) { id.innerHTML="Ooops!"; } </script> </head> <body> <h1 onclick="changetext(this)">Click on this text</h1> </body> </html>

DHTML example SimpleExample_DHTML.html

jQuery(http://jquery.com/ ) • Open source • jQueryis a fast and concise JavaScript framework that simplifies HTML document traversing, event handling, and animating for rapid web development. • jQueryhas been adopted by companies like Microsoft and Adobe • Addition of only 15kb • Small example: $("a").addClass("test");

jQuery example SimpleExample_jQuery.html

Examples - jQuery • Zoom • Menu • Validation • Model window • Drag & Drop • Table sorting • And more …

Web Resources • W3 School http://www.w3schools.com/html/default.asp • Javascriptkit http://www.javascriptkit.com • DTHML Methods http://msdn.microsoft.com/en-us/library/ms535205.aspx

Topics

Topics

Presentation Transcript

TOPICS

Topics

Topics

Topics

Topics

Topics

Topics:

Topics

Topics

Topics

Topics

Topics

TOPICS

Topics

Topics:

Topics

Topics

Topics

Topics