HTML/CSS/java Script/Jquery

HYPER TEXT MARKUP LANGUAGE
CASCADING STYLE SHEETS(CSS)
JAVA SCRIPT
JQUERY

WHAT IS HTML?
HTML STANDS FOR HYPER TEXTMARKUP LANGUAGE
HTML IS AMARKUP LANGUAGE
AMARKUP LANGUAGE IS A SET OF MARKUP TAGS
THE TAGS DESCRIBE DOCUMENT CONTENT
HTML DOCUMENTS CONTAIN HTML TAGS AND PLAIN TEXT
HTML DOCUMENTS ARE ALSO CALLED WEB PAGES

HTMLTAGS
HTML TAGS ARE KEYWORDS (TAG NAMES) SURROUNDED BY
ANGLE BRACKETS LIKE <HTML>
HTMLTAGS NORMALLY COME IN PAIRS LIKE <P> AND </P>
THE FIRST TAG IN A PAIR IS THE START TAG, THE SECOND TAG IS
THE END TAG
THE END TAG IS WRITTEN LIKE THE START TAG, WITH A SLASH
BEFORE THE TAG NAME
START AND END TAGS ARE ALSO CALLED OPENING TAGS AND
CLOSING TAGS
EXAMPLE
<TAGNAME>CONTENT</TAGNAME>

HTML EXAMPLE
<HTML>
<BODY>
<H1>MY FIRST HEADING</H1>
<P>MY FIRST PARAGRAPH.</P>
</BODY>
</HTML>
EXAMPLE EXPLAINED
 THE TEXT BETWEEN <HTML> AND </HTML> DESCRIBES THE WEB
PAGE
 THE TEXT BETWEEN <BODY> AND </BODY> IS THE VISIBLE PAGE
CONTENT
 THE TEXT BETWEEN <H1> AND </H1> IS DISPLAYED AS A HEADING
 THE TEXT BETWEEN <P> AND </P> IS DISPLAYED AS A PARAGRAPH

HTML EDITORS
WRITE HTMLUSING NOTEPAD OR TEXTEDIT
HTML CAN BE EDITED BY USING A PROFESSIONAL HTML
EDITOR LIKE:
ADOBE DREAMWEAVER
MICROSOFT EXPRESSIONWEB
COFFEECUP HTML EDITOR
HOWEVER, FOR LEARNING HTML WE RECOMMEND A TEXT
EDITOR LIKE NOTEPAD (PC) OR TEXTEDIT (MAC).
WHEN SAVING AN HTML FILE, USE EITHER THE .HTM OR THE
.HTML FILE EXTENSION. THERE IS NO DIFFERENCE, IT IS
ENTIRELY UP TO YOU.

HTML TAG
HTML HEADINGS ARE DEFINED WITH THE <H1> TO <H6> TAGS
<H1>THIS IS A HEADING</H1>
HTML PARAGRAPHS ARE DEFINEDWITH THE <P> TAG
<P>THIS IS A PARAGRAPH.</P>
HTML LINKS ARE DEFINEDWITH THE <A> TAG
<A HREF="HTTP://ESPESOLUTIONS.COM">THIS IS A LINK</A>
HTML IMAGES ARE DEFINEDWITH THE <IMG> TAG
<IMG SRC=“ESPELOGO.JPG” ALT=“ESPESOLUTIONS.COM”
WIDTH=“105” HEIGHT=“105”>
HTML USES TAGS LIKE <B> AND <I> FOR FORMATTING OUTPUT,
LIKE BOLD OR ITALIC TEXT.
<B>THIS TEXT IS BOLD</B>,<I>THIS TEXT IS ITALIC</I>

HTML ATTRIBUTES
HTML ELEMENTS CAN HAVE ATTRIBUTES
ATTRIBUTES PROVIDE ADDITIONAL INFORMATIONABOUT AN
ELEMENT
ATTRIBUTES ARE ALWAYS SPECIFIED IN THE START TAG
ATTRIBUTES COME IN NAME/VALUE PAIRS LIKE:
NAME="VALUE“
<IMG SRC=“ESPELOGO.JPG” WIDTH=“105” HEIGHT=“105”>
↓ ↓ ↓ ↓ ↓ ↓
NAME VALUE NAME VALUE NAME VALUE

HTML TABLES
 TABLESARE DEFINED WITH THE <TABLE> TAG.
 TABLESARE DIVIDED INTO TABLE ROWS WITH THE <TR> TAG.
 TABLE ROWSARE DIVIDED INTO TABLE DATA WITH THE <TD> TAG.
 A TABLE ROW CAN ALSO BE DIVIDED INTO TABLE HEADINGS WITH THE
<TH> TAG.
EXAMPLE
<TABLE>
<TR>
<TH>NAME</TH><TH>QUALIFICATION</TH>
</TR>
<TR>
<TD>SANDEEP</TD><TD>CSE</TD>
</TR>
</TABLE>

HTML LIST
HTML CAN HAVE UNORDERED LISTS, ORDERED LISTS
UNORDERED HTMLLIST
 THE FIRST ITEM
 THE SECOND ITEM
 THE THIRD ITEM
 THE FOURTH ITEM
ORDERED HTMLLIST
1. THE FIRST ITEM
2. THE SECOND ITEM
3. THE THIRD ITEM
4. THE FOURTH ITEM

EXAMPLE
UNORDERD LIST:
<UL>
<LI>JAVA</LI>
<LI>C</LI>
<LI>C++</LI>
</UL>
ORDERD LIST:
<OL>
<LI>JAVA</LI>
<LI>C</LI>
<LI>C++</LI>
</OL>

HTML FORMS
HTML FORMS ARE USED TO SELECT DIFFERENT
KINDS OF USER INPUT.
HTML FORMS ARE USED TO PASS DATA TO A SERVER.
AN HTML FORM CAN CONTAIN INPUT ELEMENTS
LIKE TEXT FIELDS, CHECKBOXES, RADIO-BUTTONS,
SUBMIT BUTTONS AND MORE. A FORM CAN ALSO
CONTAIN SELECT LISTS, TEXTAREA, FIELDSET,
LEGEND, AND LABEL ELEMENTS.
SYNTAX:
<FORM>
INPUT ELEMENTS
</FORM>

INPUT ELEMENT
 THE MOST IMPORTANT FORM ELEMENT IS THE <INPUT>
ELEMENT.
 THE <INPUT> ELEMENT IS USED TO SELECT USER
INFORMATION.
AN <INPUT> ELEMENT CAN VARY IN MANY WAYS,
DEPENDING ON THE TYPE ATTRIBUTE.
AN <INPUT> ELEMENT CAN BE OF TYPE TEXT FIELD,
CHECKBOX, PASSWORD, RADIO BUTTON, SUBMIT BUTTON,
AND MORE.

TEXT FIELDS
DEFINES ONE LINE INPUT FIELDWHERE USER CAN ENTER TEXT.
EXAMPLE:
<FORM>
FIRST NAME: <INPUT TYPE="TEXT“ NAME="FIRSTNAME"><BR>
LAST NAME: <INPUT TYPE="TEXT" NAME="LASTNAME">
</FORM>
OUTPUT:
FIRST NAME:
LAST NAME:

PASSWORD FIELD
 PASSWORD DEFINES A PASSWORD FIELD.
<INPUT TYPE=“PASSWORD”>
THE TEXT ENTERED IN THE TEXTFIELD WILL VIEW AS *******.
SYNTAX:
PASSWORD:<INPUT TYPE =“PASSWORD” NAME=“ PASSWORD”>
OUTPUT:
PASSWORD: *********

RADIO BUTTONS
RADIO BUTTONS LET A USER SELECT ONLY ONE
OF A LIMITED NUMBER OF CHOICES.
<INPUT TYPE="RADIO“>
SYNTAX:
<FORM>
<INPUT TYPE="RADIO" NAME=“GENDER"
VALUE="MALE">MALE<BR>
<INPUT TYPE="RADIO" NAME=“GENDER"
VALUE="FEMALE">FEMALE
</FORM>
OUTPUT:
MALE
FEMALE

CHECKBOXES
CHECKBOXES LET A USER SELECT ZERO OR MORE OPTIONS
OF A LIMITED NUMBER OF CHOICES.
<INPUT TYPE="CHECKBOX“>
SYNTAX:
<FORM>
<INPUT TYPE="CHECKBOX" NAME="VEHICLE"
VALUE="BIKE">I HAVE A BIKE<BR>
<INPUT TYPE="CHECKBOX" NAME="VEHICLE" VALUE="CAR">I
HAVE A CAR
</FORM>
OUTPUT:
I HAVE A BIKE
I HAVE A CAR

SUBMIT
A SUBMIT BUTTON IS USED TO SEND FORM DATA TO A
SERVER.
THE DATA IS SENT TO THE PAGE SPECIFIED IN THE FORM'S
ACTION ATTRIBUTE. T
THE FILE DEFINED IN THE ACTION ATTRIBUTE USUALLY
DOES SOMETHING WITH THE RECEIVED INPUT.
<INPUT TYPE="SUBMIT“>
TYPE: SUBMIT.
NAME: VALUE USED BY THE CGI (COMMON GATEWAY
INTERFACE)SCRIPT FOR PROCESSING.
VALUE: DETERMINES THE TEXT LABEL ON THE BUTTON,
USUALLY SUBMIT QUERY.
CGI: EXTERNAL PROGRAM USE STANDARD INPUT AND
OUTPUT FOR DATA EXCHANGE.

SUBMIT
SYNTAX:
<FORM NAME="INPUT" ACTION="DEMO" METHOD="GET">
USERNAME: <INPUT TYPE="TEXT" NAME="USER">
PASSWORD:<INPUT TYPE=“PASSWORD” NAME=“PASS”>
<INPUT TYPE="SUBMIT“ VALUE=“SUBMIT” >
</FORM>
OUTPUT:

RESET
IT ALLOWS THE SURFER TO CLEAR ALL THE INPUT IN THE
FORM.
FOR RESET GIVE <INPUT TYPE=“RESET”>
THE BROWSER DISPLAY RESET BUTTON.

DROP-DOWN LIST
LET A USER SELECT ONE OR MORE CHOICES FROM LIMITED
NUMBER OF OPTIONS.
SYNTAX:
<HTML>
<BODY>
<SELECT>
<OPTION VALUE=“FIAT">FIAT</OPTION>
<OPTION VALUE="AUDI">AUDI</OPTION>
</SELECT>
</BODY>
</HTML>

TEXTAREA
THE <TEXTAREA> TAG DEFINES A MULTI-LINE TEXT INPUT
CONTROL.
THE SIZE OF A TEXT AREA CAN BE SPECIFIED BY THE COLS AND
ROWS ATTRIBUTES, OR EVEN BETTER; THROUGH CSS' HEIGHT
ANDWIDTH PROPERTIES.
Syntax:
<html>
< body>
<textarea rows="10"
cols="30">
</textarea>
</body>
</html>
output

WHAT IS CSS?
CSS STANDS FOR CASCADING STYLE SHEETS
STYLES DEFINE HOWTO DISPLAY HTML ELEMENTS
STYLESWERE ADDED TO HTML 4.0 TO SOLVE A PROBLEM
EXTERNAL STYLE SHEETS CAN SAVE A LOT OFWORK
EXTERNAL STYLE SHEETS ARE STORED IN CSS FILES
CSS SYNTAX
A CSS RULE SET CONSISTS OF A SELECTOR AND A DECLARATION
BLOCK:

CSS EXAMPLE
A CSS DECLARATION ALWAYS ENDS WITH A SEMICOLON, AND
DECLARATION GROUPS ARE SURROUNDED BY CURLY BRACES:
P {
COLOR: RED;
TEXT-ALIGN: CENTER;
}
CSS SELECTORS
 CSS SELECTORS ARE USED TO "FIND" (OR SELECT) HTML
ELEMENTS BASED ON THEIR ID, CLASSES, TYPES, ATTRIBUTES,
VALUES OF ATTRIBUTES AND MUCH MORE.
 ELEMENT SELECTOR
 ID SELECTOR
 CLASS SELECTOR

THE ELEMENT SELECTOR
THE ELEMENT SELECTOR SELECTS ELEMENTS BASED ON THE
ELEMENT NAME.
P {
TEXT-ALIGN: CENTER;
COLOR: RED;
}
THE ID SELECTOR
THE ID SELECTOR USES THE ID ATTRIBUTE OF AN HTML TAG TO
FIND THE SPECIFIC ELEMENT.
AN ID SHOULD BE UNIQUE WITHIN A PAGE, SO YOU SHOULD
USE THE ID SELECTOR WHEN YOU WANT TO FIND A SINGLE,
UNIQUE ELEMENT.

<P ID=“PARA1”>HI</P>
#PARA1
{
TEXT-ALIGN: CENTER;
COLOR: RED;
}
THE CLASS SELECTOR
 THE CLASS SELECTOR FINDS ELEMENTS WITH THE SPECIFIC CLASS.
 THE CLASS SELECTOR USES THE HTML CLASS ATTRIBUTE.
 HTML ELEMENTS WITH CLASS="CENTER"
.CENTER{
TEXT-ALIGN : CENTER;
COLOR: RED;
}

THREE WAYS TO INSERT CSS
THERE ARE THREEWAYS OF INSERTING A STYLE SHEET:
EXTERNAL STYLE SHEET
INTERNAL STYLE SHEET
INLINE STYLE
EXTERNAL STYLE SHEET
AN EXTERNAL STYLE SHEET IS IDEAL WHEN THE STYLE IS
APPLIED TO MANY PAGES. WITH AN EXTERNAL STYLE SHEET,
YOU CAN CHANGE THE LOOK OF AN ENTIRE WEB SITE BY
CHANGING JUST ONE FILE.
<HEAD>
<LINK REL="STYLESHEET" TYPE="TEXT/CSS“
HREF="MYSTYLE.CSS">
</HEAD>

INTERNAL STYLE SHEET
AN INTERNAL STYLE SHEET SHOULD BE USED WHEN A SINGLE
DOCUMENT HAS A UNIQUE STYLE. YOU DEFINE INTERNAL
STYLES IN THE HEAD SECTION OF AN HTML PAGE, INSIDE THE
<STYLE> TAG, LIKE THIS:
<HEAD>
<STYLE>
BODY {
BACKGROUND-COLOR: LINEN;
}
H1 {
COLOR: MAROON;
MARGIN-LEFT: 40PX;
}
</STYLE>
</HEAD>

INLINE STYLES
AN INLINE STYLE LOSES MANY OF THE ADVANTAGES OF A
STYLE SHEET (BY MIXING CONTENT WITH PRESENTATION). USE
THIS METHOD SPARINGLY!
TO USE INLINE STYLES, ADD THE STYLE ATTRIBUTE TO THE
RELEVANT TAG. THE STYLE ATTRIBUTE CAN CONTAIN ANY CSS
PROPERTY.
EXAMPLE:
<H1 STYLE="COLOR:BLUE;MARGIN-LEFT:30PX;">THIS IS
AHEADING.</H1>

STYLING LINKS
LINKS CAN BE STYLED WITH ANY CSS PROPERTY (E.G. COLOR,
FONT-FAMILY, BACKGROUND, ETC.).
THE FOUR LINKS STATES ARE:
A:LINK - A NORMAL, UNVISITED LINK
A:VISITED - A LINK THE USER HAS VISITED
A:HOVER - A LINK WHEN THE USER MOUSES OVER
IT
A:ACTIVE - A LINK THE MOMENT IT IS CLICKED

EXAMPLE:
/* UNVISITED LINK */
A:LINK {
COLOR: #FF0000;
}
/* VISITED LINK */
A:VISITED {
COLOR: #00FF00;
}
/* MOUSE OVER LINK */
A:HOVER {
COLOR: #FF00FF;
}
/* SELECTED LINK */
A:ACTIVE {
COLOR: #0000FF;
}

LIST
 IN HTML, THERE ARE TWO TYPES OF LISTS:
 UNORDERED LISTS - THE LIST ITEMS ARE MARKED WITH
BULLETS
 ORDERED LISTS - THE LIST ITEMS ARE MARKED WITH
NUMBERS OR LETTERS
UL {
LIST-STYLE-IMAGE: URL('SQPURPLE.GIF');
}
UL {
LIST-STYLE-TYPE: CIRCLE;
}
OL{
LIST-STYLE-TYPE: UPPER-ROMAN;
}

TABLE BORDERS
TO SPECIFY TABLE BORDERS IN CSS, USE THE BORDER
PROPERTY.
TABLE,TH,TD
{
BORDER : 1PX SOLID BLACK;
}
COLLAPSE BORDERS
THE BORDER-COLLAPSE PROPERTY SETS WHETHER THE
TABLE BORDERS ARE COLLAPSED INTO A SINGLE BORDER
OR SEPARATED:
TABLE{BORDER-COLLAPSE: COLLAPSE;}
TABLE,TH,TD
{
BORDER : 1PX SOLID BLACK;
}

TABLE WIDTH, HEIGHT, TEXT ALIGNMENT
AND PADDING
WIDTH AND HEIGHT OF A TABLE IS DEFINED BY THE WIDTH AND
HEIGHT PROPERTIES.
TABLE{
WIDTH: 100%;
}
TH{
HEIGHT: 50PX;
}
TD{
TEXT-ALIGN: RIGHT;
PADDING: 15PX;
}

THE CSS BOX MODEL
ALL HTML ELEMENTS CAN BE CONSIDERED AS BOXES. IN CSS,
THE TERM "BOX MODEL" IS USED WHEN TALKING ABOUT DESIGN
AND LAYOUT.
THE IMAGE BELOW ILLUSTRATES THE BOX MODEL:
Explanation of the different parts:
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent

 client-side programming with JavaScript
scripts vs. programs
JavaScript vs. JScript vs. VBScript
common tasks for client-side scripts
JavaScript
data types & expressions
control statements
functions & libraries
strings & arrays
Date, document, navigator, user-defined classes

CLIENT-SIDE PROGRAMMING
 client-side programming
programs are written in a separate programming (or scripting)
language
e.g., JavaScript, JScript, VBScript
programs are embedded in the HTML of a Web page, with
(HTML) tags to identify the program component
e.g., <script type="text/javascript"> … </script>
the browser executes the program as it loads the page,
integrating the dynamic output of the program with the static
content of HTML
could also allow the user (client) to input information and
process it, might be used to validate input before it’s submitted
to a remote server

JAVASCRIPT
JAVASCRIPT CODE CAN BE EMBEDDED IN A WEB PAGE USING <SCRIPT>
TAGS
<html>
<!–- COMP519 js01.html 16.08.06 -->
<head>
<title>JavaScript Page</title>
</head>
<body>
<script type="text/javascript">
// silly code to demonstrate output
document.write("<p>Hello
world!</p>");
document.write(" <p>How are <br/> "
+
" <i>you</i>?</p> ");
</script>
<p>Here is some static text as
well.</p>
</body>
</html>
document.write displays text in
the page text to be displayed can
include HTML tags the tags are
interpreted by the browser when
the text is displayed as in
C++/Java, statements end with ;
but a line break might also be
interpreted as the end of a
statement (depends upon
browser).JavaScript comments
similar to C++/Java
// starts a single line comment
/*…*/ enclose multi-line
comments

JAVASCRIPT DATA TYPES & VARIABLES
JAVASCRIPT HAS ONLY THREE PRIMITIVE DATA TYPES
STRING : "FOO" 'HOW DO YOU DO?' "I SAID 'HI'." ""
NUMBER: 12 3.14159 1.5E6
BOOLEAN : TRUE FALSE *FIND INFO ON NULL, UNDEFINED
<html>
<!–- COMP519 js02.html 16.08.06 -->
<head>
<title>Data Types and Variables</title>
</head>
<body>
var x, y;
x= 1024;
y=x; x = "foobar";
document.write("<p>x = " + y + "</p>");
document.write("<p>x = " + x + "</p>");
</script>
</body>
</html>

JAVASCRIPT OPERATORS & CONTROL
STATEMENTS
<html>
<!–- COMP519 js03.html 08.10.10 -->
<head>
<title>Folding Puzzle</title>
</head>
<body>
var distanceToSun = 93.3e6*5280*12;
var thickness = .002;
var foldCount = 0;
while (thickness < distanceToSun) {
thickness *= 2;
foldCount++;
}
document.write("Number of folds = " +
foldCount);
</script>
</body>
</html>
standard C++/Java operators &
control statements are provided in
JavaScript
• +, -, *, /, %, ++, --, …
• ==, !=, <, >, <=, >=
• &&, ||, !,===,!==
• if , if-else, switch
• while, for, do-while, …
PUZZLE: Suppose you took a
piece of paper and folded it in
half, then in half again, and so on.
How many folds before the
thickness of the paper reaches
from the earth to the sun?
*Lots of information is available
online

JAVASCRIPT MATH ROUTINES
<html>
<!–- COMP519 js04.html 08.10.10 -->
<head>
<title>Random Dice Rolls</title>
</head>
<body>
<div style="text-align:center">
var roll1 = Math.floor(Math.random()*6) + 1;
var roll2 = Math.floor(Math.random()*6) + 1;
document.write("<img src='http://www.csc.liv.ac.uk/"+
"~martin/teaching/comp519/Images/die" +
roll1 + ".gif‘ alt=‘dice showing ‘ + roll1 />");
document.write("  ");
document.write("<img src='http://www.csc.liv.ac.uk/"+
"~martin/teaching/comp519/Images/die" +
roll2 + ".gif‘ alt=‘dice showing ‘ + roll2 />");
</script>
</div>
</body>
</html>
the built-in Math
object contains
functions and
constants
Math.sqrt
Math.pow
Math.abs
Math.max
Math.min
Math.floor
Math.ceil
Math.round
Math.PI
Math.E
Math.random
function returns a
real number in [0..1)

INTERACTIVE PAGES USING PROMPT
<html>

<head>
<title>Interactive page</title>
</head>
<body>
var userName = prompt("What is your name?", "");
var userAge = prompt("Your age?", "");
var userAge = parseFloat(userAge);
document.write("Hello " + userName + ".")
if (userAge < 18) {
document.write(" Do your parents know " +
"you are online?");
}
else {
document.write(" Welcome friend!");
}
</script>
<p>The rest of the page...</p>
</body>
</html>
crude user interaction can
take place using prompt
1st argument: the prompt
message that appears in the
dialog box
2nd argument: a default
value that will appear in the
box (in case the user enters
nothing)the function returns
the value entered by the user
in the dialog box (a string)
if value is a number, must
use parseFloat (or parseInt)
to convert
forms will provide a better
interface for interaction
(later)

USER-DEFINED FUNCTIONS
 FUNCTION DEFINITIONS ARE SIMILAR TO C++/JAVA, EXCEPT:
 NO RETURN TYPE FOR THE FUNCTION (SINCE VARIABLES ARE LOOSELY TYPED)
 NO VARIABLE TYPING FOR PARAMETERS (SINCE VARIABLES ARE LOOSELY TYPED)
 BY-VALUE PARAMETER PASSING ONLY (PARAMETER GETS COPY OF ARGUMENT)
function isPrime(n)
// Assumes: n > 0
// Returns: true if n is prime, else false
{
if (n < 2) {
return false;
}
else if (n == 2) {
return true;
}
else {
for (var i = 2; i <= Math.sqrt(n); i++) {
if (n % i == 0) {
return false;
}
}
return true;
}
}
Can limit variable scope
to the function.
if the first use of a
variable is preceded
with var, then that
variable is local to the
function
for modularity, should
make all variables in a
function local

STRING EXAMPLE: PALINDROMES
function strip(str)
// Assumes: str is a string
// Returns: str with all but letters removed
{
var copy = "";
for (var i = 0; i < str.length; i++) {
if ((str.charAt(i) >= "A" && str.charAt(i) <= "Z")
||
(str.charAt(i) >= "a" && str.charAt(i) <=
"z")) {
copy += str.charAt(i);
}
}
return copy;
}
function isPalindrome(str)
// Assumes: str is a string
// Returns: true if str is a palindrome, else false
{
str = strip(str.toUpperCase());
for(var i = 0; i < Math.floor(str.length/2); i++) {
if (str.charAt(i) != str.charAt(str.length-i-1)) {
return false;
}
}
return true;
}
suppose we want to
test whether a word or
phrase is a
palindrome

<html>
<!–- COMP519 js09.html 11.10.2011 -->
<head>
<title>Palindrome Checker</title>
function strip(str)
{
// CODE AS SHOWN ON PREVIOUS SLIDE
}
function isPalindrome(str)
{
// CODE AS SHOWN ON PREVIOUS SLIDE
}
</script>
</head>
<body>
text = prompt("Enter a word or phrase", "Madam, I'm Adam");
if (isPalindrome(text)) {
document.write("'" + text + "' <b>is</b> a palindrome.");
}
else {
document.write("'" + text + "' <b>is not</b> a palindrome.");
}
</script>
</body>
</html>

JAVASCRIPT ARRAYS
• ARRAYS STORE A SEQUENCE OF ITEMS, ACCESSIBLE VIA AN INDEX
SINCE JAVASCRIPT IS LOOSELY TYPED, ELEMENTS DO NOT HAVE TO BE THE
SAME TYPE
• TO CREATE AN ARRAY, ALLOCATE SPACE USING NEW (OR CAN ASSIGN
DIRECTLY)
• ITEMS = NEW ARRAY(10); // ALLOCATES SPACE FOR 10 ITEMS
• ITEMS = NEW ARRAY(); // IF NO SIZE GIVEN, WILL ADJUST DYNAMICALLY
• ITEMS = [0,0,0,0,0,0,0,0,0,0]; // CAN ASSIGN SIZE & VALUES []
• TO ACCESS AN ARRAY ELEMENT, USE [] (AS IN C++/JAVA)
• FOR (I = 0; I < 10; I++) {
• ITEMS[I] = 0; // STORES 0 AT EACH INDEX
• }
• THE LENGTH PROPERTY STORES THE NUMBER OF ITEMS IN THE ARRAY
• FOR (I = 0; I < ITEMS.LENGTH; I++) {
• DOCUMENT.WRITE(ITEMS[I] + "<BR>"); // DISPLAYS ELEMENTS
• }

ARRAY EXAMPLE
<html>
<!–- COMP519 js10.html 11.10.2011 -->
<head>
<title>Die Statistics</title>
<script type="text/javascript"
src="http://www.csc.liv.ac.uk/~martin/teaching/comp519/JS/ran
dom.js">
</script>
</head>
<body>
numRolls = 60000;
dieSides = 6;
rolls = new Array(dieSides+1);
for (i = 1; i < rolls.length; i++) {
rolls[i] = 0;
}
for(i = 1; i <= numRolls; i++) {
rolls[randomInt(1, dieSides)]++;
}
for (i = 1; i < rolls.length; i++) {
document.write("Number of " + i + "'s = " +
rolls[i] + "<br />");
}
</script>
</body>
</html>
suppose we want to
simulate die rolls and
verify even distribution
keep an array of counters:
initialize each count to 0
each time you roll X,
increment rolls[X]
display each counter

DATE OBJECT
STRING & ARRAY ARE THE MOST COMMONLY USED OBJECTS IN
JAVASCRIPT
OTHER, SPECIAL PURPOSE OBJECTS ALSO EXIST
THE DATE OBJECT CAN BE USED TO ACCESS THE DATE AND TIME
TO CREATE A DATE OBJECT, USE NEW & SUPPLY
YEAR/MONTH/DAY/… AS DESIRED
TODAY = NEW DATE(); // SETS TO CURRENT DATE & TIME
NEWYEAR = NEW DATE(2002,0,1); //SETS TO JAN 1, 2002 12:00AM
METHODS INCLUDE:
NEWYEAR.GETYEAR()
NEWYEAR.GETMONTH()
NEWYEAR.GETDAY()
NEWYEAR.GETHOURS()
NEWYEAR.GETMINUTES()
NEWYEAR.GETSECONDS()
NEWYEAR.GETMILLISECONDS()

DATE EXAMPLE
<html>
<!–- COMP519 js11.html 16.08.2006 -->
<head>
<title>Time page</title>
</head>
<body>
Time when page was loaded:
now = new Date();
document.write("<p>" + now + "</p>");
time = "AM";
hours = now.getHours();
if (hours > 12) {
hours -= 12;
time = "PM"
}
else if (hours == 0) {
hours = 12;
}
document.write("<p>" + hours + ":" +
now.getMinutes() + ":" +
now.getSeconds() + " " +
time + "</p>");
</script>
</body>
</html>
by default, a date will be
displayed in full, e.g.,
Sun Feb 03 22:55:20
GMT-0600 (Central
Standard Time) 2002
can pull out portions of the
date using the methods and
display as desired
here, determine if "AM"
or "PM" and adjust so
hour between 1-12
10:55:20 PM

JavaScript and HTML validators
In order to use an HTML validator, and not get error messages
from the JavaScript portions, you must “mark” the JavaScipt sections
in a particular manner. Otherwise the validator will try to interpret
the script as HTML code.
To do this, you can use a markup like the following in your inline
code (this isn’t necessary for scripts stored in external files).
<script type=“text/javascript”> // <![CDATA[
document.write(“<p>The quick brown fox jumped over the lazy
dogs.</p>”); // **more code here, etc.
</script>

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x==null || x=="") {
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return
validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>

JQUERY
 JQUERY IS A JAVASCRIPT LIBRARY.
 JQUERY GREATLY SIMPLIFIES JAVASCRIPT PROGRAMMING.
 JQUERY IS EASY TO LEARN.
EXAMPLE
<HTML>
<HEAD>
$(DOCUMENT).READY(FUNCTION(){
$("P").CLICK(FUNCTION(){
$(THIS).HIDE();
});
});
</SCRIPT>
</HEAD>
<BODY>
<P>CLICK ME AWAY!</P>
<P>CLICK ME TOO!</P>
</BODY>

OUTPUT 1
CLICK ME AWAY!
CLICK ME TOO!
OUTPUT 2
CLICK ME AWAY!
JQUERY SYNTAX
THE JQUERY SYNTAX IS TAILOR MADE FOR SELECTING HTML
ELEMENTS AND PERFORMING SOME ACTION ON THE
ELEMENT(S).
$(SELECTOR).ACTION()
A $ SIGN TO DEFINE/ACCESS JQUERY
A (SELECTOR) TO "QUERY (OR FIND)" HTML ELEMENTS
A JQUERY ACTION() TO BE PERFORMED ON THE ELEMENT(S)

EXAMPLES
$(THIS).HIDE() - HIDES THE CURRENT ELEMENT.
$("P").HIDE() - HIDES ALL <P> ELEMENTS.
$(".TEST").HIDE() - HIDES ALL ELEMENTS WITH CLASS="TEST".
$("#TEST").HIDE() - HIDES THE ELEMENT WITH ID="TEST".
THE DOCUMENT READY EVENT
YOU MIGHT HAVE NOTICED THAT ALL JQUERYMETHODS IN
OUR EXAMPLES, ARE INSIDE A DOCUMENT READY EVENT:]
// JQUERY METHODS GO HERE...
});

JQUERY EVENT METHODS
ALL THE DIFFERENT VISITOR'S ACTIONS THAT A WEB PAGE CAN
RESPOND TO ARE CALLED EVENTS.
AN EVENT REPRESENTS THE PRECISE MOMENT WHEN SOMETHING
HAPPENS.
MOUSE EVENTS
 CLICK
 DBLCLICK
MOUSEENTER
MOUSELEAVE
KEYBOARD EVENTS
KEYPRESS
KEYDOWN
KEYUP

FORM EVENTS
SUBMIT
CHANGE
FOCUS
BLUR
DOCUMENT/WINDOWEVENTS
LOAD
RESIZE
SCROLL
UNLOAD

EXAMPLE
<HEAD>
<SCRIPT>
$("#P1").MOUSEENTER(FUNCTION(){
ALERT("YOU ENTERED P1!");
});
});
</SCRIPT>
</HEAD>
<BODY>
<P ID="P1">ENTER THIS PARAGRAPH.</P>
</BODY>

OUTPUT 1
ENTER THIS PARAGRAPH
OUTPUT 2

JQUERY HIDE() AND SHOW()
WITH JQUERY, YOU CAN HIDE AND SHOW HTML ELEMENTS WITH
THE HIDE() AND SHOW() METHODS:
EXAMPLE
<SCRIPT>
$("#HIDE").CLICK(FUNCTION(){
$("P").HIDE();
});
$("#SHOW").CLICK(FUNCTION(){
$("P").SHOW();
});
});
</SCRIPT>

EXAMPLE CON
<BODY>
<P>IF YOU CLICK ON THE "HIDE" BUTTON, I WILL DISAPPEAR.</P>
<BUTTON ID="HIDE">HIDE</BUTTON>
<BUTTON ID="SHOW">SHOW</BUTTON>
</BODY>
OUTPUT 1
IF YOU CLICK ON THE "HIDE" BUTTON, I WILL DISAPPEAR.
OUTPUT 2

OUTPUT 3
OUTPUT 4
IF YOU CLICK ON THE "HIDE" BUTTON, I WILL DISAPPEAR.

JQUERY SLIDING METHODS
JQUERYYOU CAN CREATE A SLIDING EFFECT ON ELEMENTS.
JQUERY HAS THE FOLLOWING SLIDE METHODS:
SLIDEDOWN()
SLIDEUP()
SLIDETOGGLE()
SYNTAX:
$(SELECTOR).SLIDEDOWN(SPEED, CALLBACK);
THE OPTIONAL SPEED PARAMETER SPECIFIES THE DURATION
OF THE EFFECT. IT CAN TAKE THE FOLLOWING VALUES: "SLOW",
"FAST", OR MILLISECONDS.

EXAMPLE:
<SCRIPT>
$("#FLIP").CLICK(FUNCTION(){
$("#PANEL").SLIDEDOWN("SLOW");
});
});
</SCRIPT>
<BODY>
<DIV ID="FLIP">CLICK TO SLIDE DOWN PANEL</DIV>
<DIV ID="PANEL">HELLO WORLD!</DIV>
</BODY>

TRAVERSING
JQUERY TRAVERSING, WHICH MEANS "MOVE THROUGH", ARE
USED TO "FIND" (OR SELECT) HTML ELEMENTS BASED ON THEIR
RELATION TO OTHER ELEMENTS. START WITH ONE SELECTION
AND MOVE THROUGH THAT SELECTION UNTIL YOU REACH THE
ELEMENTS YOU DESIRE.

TRAVERSING – ANCESTORS
AN ANCESTOR IS A PARENT, GRANDPARENT, GREAT-GRANDPARENT,
AND SO ON.
WITH JQUERY YOU CAN TRAVERSE UP THE DOM TREE TO FIND
ANCESTORS OF AN ELEMENT.
THREE USEFUL JQUERY METHODS FOR TRAVERSING UP THE
DOM TREE ARE:
PARENT()
PARENTS()
PARENTSUNTIL()

JQUERY PARENT() METHOD
<SCRIPT>
$("SPAN").PARENT().CSS({"COLOR":"RED","BORDER":"2PX SOLID
RED"});
});
</SCRIPT>
<BODY>
<DIV STYLE="WIDTH:500PX;">DIV (GRANDPARENT)
<P>P (DIRECT PARENT)
<SPAN>SPAN</SPAN>
</P>
</DIV>
</BODY>

HTML/CSS/java Script/Jquery

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to HTML/CSS/java Script/Jquery (20)

More from FAKHRUN NISHA (17)

Recently uploaded (20)

HTML/CSS/java Script/Jquery