47
Topics HTML CSS Javascript DHTML jQuery 2
2
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><head>
<title>TitleBar</title></head><body>
<h1>Header</h1>Regular text. <br/>More Text<hr/>Even More Text
</body></html>
<html> - signifies the start of an HTML document, should always be the first and last tag on the page
HTML is the root tag
Basic HTML Tags<html><head>
<title>TitleBar</title></head><body>
<h1>Header</h1>Regular text. <br/>More Text<hr/>Even More Text
</body></html>
<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
Basic HTML Tags<html><head>
<title>TitleBar</title></head><body>
<h1>Header</h1>Regular text. <br/> More Text<hr/> Even More Text
</body></html>
<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
Basic Tags & Attributes<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>
<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"
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 Any Information from a tag that should be passed to the
server must be wrapped by a form tag
<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
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
Inline style (inside an HTML element) Internal style sheet (inside the <head>
tag) External style 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 attribueDot operator
CSS Grouping
h2, .thisOtherClass, .yetAnotherClass { color: red; }
Many #ids .classes and elements
See example Zen Garden
Pro and Cons of CSSPros
Make it easy to change layout Readability and size SEO Consistency Fast loading Code reuse Maintenance
Cons Vary among different browser
23
JavaScript A scripting language
Usually used for web development
It runs on the client side What execute it?
Dynamic programming language
24
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
25
Javascript and the industry Sites like Facebook and Gmail have more Javascript code
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%
26
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>
27
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>
28
Variables
Dynamic-type variables
<script> var num = 8; num = num+2; var str = “abc”; num = “Javascript is a dynamic lang”; document.write(num);</script>
Like many other languages we can use many types of operators like ++,--,+=,/=,%,!=,==
29
If Statement 1st option
var x=“8”;If (x==8){
alert(“8”);}
2nd option
variablename=(condition)?value1:value2 ;
30
FunctionsSyntax:
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”);
31
What else
For, while Switch/cases Do while loop Break/Continue Try/Catch/throws
32
Array/For each
Array first index is 0
var x;var mycars = new Array();mycars[0] = “Suzuki";mycars[1] = "Volvo";mycars[2] = "BMW";for (x in mycars) { document.write(mycars[x] + "<br />");}
33
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());
34
Creating new objectObject Constructorfunction cat(name) {
this.name = name;this.talk = function()
{alert( this.name + " say meeow!" ) }}
cat1 = new cat("felix") cat1.talk(); //"felix says meeow!" cat2 = new cat("ginger") cat2.talk(); //"ginger says meeow!" ;
Pay attention: you can add function and properties anytime!
35
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!"
36
Closure creating function in runtime a closure is a stack-frame which is not deallocated when the
function returns
function sayHello(name) {var text = 'Hello ' + name; // local variablevar sayAlert = function() { alert(text); }return sayAlert;
}var say = sayHello(“Jane”);say();
37
DHTML
DHTML stands for Dynamic HTML. Accessing HTML elements (JS objects) Modifying HTML elements Modifying CSS properties Handling Events
38
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 render HTML faster
DOM is the way JavaScript sees its containing HTML page and browser state
DOM lets you access directly any node in the tree of element, it’s parent or children.
39
The Document tree
40
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”)
41
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>
42
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
43
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 onthis text</h1>
</body></html>
44
DHTML example
SimpleExample_DHTML.html
45
jQuery (http://jquery.com/ )
Open source
jQuery is a fast and concise JavaScript framework that simplifies HTML document traversing, event handling, and animating for rapid web development.
jQuery has been adopted by companies like Microsoft and Adobe Addition of only 15kb Small example:
$("a").addClass("test");
46
jQuery example
SimpleExample_jQuery.html
47
Examples - jQuery
Zoom Menu Validation Model window Drag & Drop Table sorting And more …
48
Web Resources W3 School
http://www.w3schools.com/html/default.asp
Javascript kit http://www.javascriptkit.com
DTHML Methods http://msdn.microsoft.com/en-us/library/ms535205.aspx
