Web Technologyunit2

WHAT IS JAVASCRIPT ?
 Javascript is a weakly typed language (dynamically typed).

 javascript can be used for client-side developments as well
as server-side developments.
 javascript is both an imperative and declarative type of
language.
 javascript contains a standard library of objects,
like array, date, and math, and a core set of language elements
like operators, control structures, and statements.
imperative language – in this type of language we are mostly
concerned about how it is to be done. it simply controls the flow
of computation. the procedural programming approach, object,
oriented approach comes under this as async await we are
thinking about what is to be done further after the async call.
declarative programming – in this type of language we are

concerned about how it is to be done, basically here logical
computation requires. her main goal is to describe the desired
result without direct dictation on how to get it as the arrow
function does.
WHAT IS THE DOM?
• The document object model (dom) is the data representation of

the objects that comprise the structure and content of a document
on the web.
• the dom is a w3c (world wide web consortium) standard.
• the dom defines a standard for accessing documents:
• "the w3c document object model (dom) is a platform and
language-neutral interface that allows programs and scripts to
dynamically access and update the content, structure, and style
of a document."
• The document object model (dom) is a programming interface for web
documents. it represents the page so that programs can change the
document structure, style, and content.
• The dom represents the document as nodes and objects; that way,
programming languages can interact with the page.
• A web page is a document that can be either displayed in the browser
window or as the html source.
• In both cases, it is the same document but the document object model
(dom) representation allows it to be manipulated. as an object-oriented
representation of the web page, it can be modified with a scripting
language such as javascript.
 The w3c dom standard is separated into 3 different
parts:
• Core dom - standard model for all document types.

• Xml dom - standard model for xml documents.
• HTML dom - standard model for html documents.
WHAT IS THE HTML DOM?
• The html dom is a standard object model and programming

interface for html. it defines:
• The html elements as objects
• The properties of all html elements
• The methods to access all html elements
• The events for all html elements
• the html dom is a standard for how to get, change, add, or
delete html elements.
• html dom methods are actions you can perform (on html elements).
• html dom properties are values (of html elements) that you can set or
change.
• the html dom can be accessed with javascript (and with other
programming languages).
• in the dom, all html elements are defined as objects.
• The programming interface is the properties and methods of
each object.
• a property is a value that you can get or set (like changing the
content of an html element).
• a method is an action you can do (like add or deleting an html
element)
• <HTML>
<BODY>
<P ID="DEMO"></P>
<SCRIPT>
DOCUMENT.GETELEMENTBYID("DEMO").INNERHT
ML = "HELLO WORLD!";
</SCRIPT>
</BODY>
</HTML>
• JAVASCRIPT FORM VALIDATION
• HTML FORM VALIDATION CAN BE DONE BY JAVASCRIPT.
• IF A FORM FIELD (FNAME) IS EMPTY, THIS FUNCTION ALERTS A MESSAGE, AND RETURNS FALSE,
TO PREVENT THE FORM FROM BEING SUBMITTED:
• <!DOCTYPE HTML>
• <HTML>
• <HEAD>
• <SCRIPT>
• FUNCTION VALIDATEFORM() {
• LET X = DOCUMENT.FORMS["MYFORM"]["FNAME"].VALUE;
• IF (X == "") {
• ALERT("NAME MUST BE FILLED OUT");
• RETURN FALSE;
• }
• }
• </SCRIPT>
• </HEAD>
• <BODY>
• <H2>JAVASCRIPT VALIDATION</H2>
• <FORM NAME="MYFORM" ACTION="/ACTION_PAGE.PHP" ONSUBMIT="RETURN VALIDATEFORM()" METHOD="POST">
• NAME: <INPUT TYPE="TEXT" NAME="FNAME">
• <INPUT TYPE="SUBMIT" VALUE="SUBMIT">
• </FORM>
• The html dom allows javascript to change the content of html
elements.
• The easiest way to modify the content of an html element is by
using the innerhtml property.
• To change the content of an html element, use this syntax
• document.getelementbyid(id).innerhtml = new html
• Innerhtml is an html element property that has two uses for web
developers: 1) you can use it to get the internal html content of any
html element as an html string. 2) you can also use it to set or
change elements' innerhtml content.
• Date and objects:
• The date object is a data type built into the javascript language. date objects
are created with the new date( ) as shown below. once a date object is created,
a number of methods allow you to operate on it.
• most methods simply allow you to get and set the year, month, day, hour,
minute, second, and millisecond fields of the object, using either local time or
utc (universal, or gmt) time.
• syntax you can use any of the following syntaxes to create a date
object using date() constructor.
• new date( )
• new date(milliseconds)
• new date(datestring)
• new date(year,month,date[,hour,minute,second,millisecond ])
There are 9 ways to create a new date object:new date()
new date(date string)
new date(year,month)
new date(year,month,day)
new date(year,month,day,hours)
new date(year,month,day,hours,minutes)
new date(year,month,day,hours,minutes,seconds)
new date(year,month,day,hours,minutes,seconds,ms)
new date(milliseconds)
• 01 >date() : returns today's date and time
• 02 >getdate() : returns the day of the month for the specified date according
local time.
• 03> getday() : returns the day of the week for the specified date according
local time.
• 04> getfullyear() : returns the year of the specified date according to loc
time.
• 05 >gethours() : returns the hour in the specified date according to local time.
• 06> getmilliseconds() : returns the milliseconds in the specified date accordin
to local time.
• 07 >getminutes() : returns the minutes in the specified date according to loc
08> getMonth() : Returns the month in the specified date according to local
time.
09> getSeconds() : Returns the seconds in the specified date according to
local time.
10 > getTime() : Returns the numeric value of the specified date as the
number of milliseconds since January 1, 1970, 00:00:00 UTC.
11> getTimezoneOffset() : Returns the time-zone offset in minutes for the
current locale.
12> getUTCDate() : Returns the day (date) of the month in the specified
date according to universal time.
13> getUTCDay() : Returns the day of the week in the specified date
according to universal time.
14> getUTCFullYear() : Returns the year in the specified date according to
universal time.
• OBJECTS
• OBJECTS: A JAVASCRIPT OBJECT IS AN ENTITY HAVING STATE AND BEHAVIOR (PROPERTIES
AND METHOD).
• FOR EXAMPLE: CAR, PEN, BIKE, CHAIR, GLASS, KEYBOARD, MONITOR
• JAVASCRIPT IS AN OBJECT-BASED LANGUAGE.
• EVERYTHING IS AN OBJECT IN JAVASCRIPT.
• BOOLEANS CAN BE OBJECTS (IF DEFINED WITH THE NEW KEYWORD)
• NUMBERS CAN BE OBJECTS (IF DEFINED WITH THE NEW KEYWORD)
• STRINGS CAN BE OBJECTS (IF DEFINED WITH THE NEW KEYWORD)
• DATES ARE ALWAYS OBJECTS
• MATHS ARE ALWAYS OBJECTS
• REGULAR EXPRESSIONS ARE ALWAYS OBJECTS
• ARRAYS ARE ALWAYS OBJECTS
• FUNCTIONS ARE ALWAYS OBJECTS
• OBJECTS ARE ALWAYS OBJECTS
• JAVASCRIPT PRIMITIVES
• A PRIMITIVE VALUE IS A VALUE THAT HAS NO PROPERTIES OR METHODS.
• A PRIMITIVE DATA TYPE IS DATA THAT HAS A PRIMITIVE VALUE.
• JAVASCRIPT DEFINES 7 TYPES OF PRIMITIVE DATA TYPES:
• EXAMPLES
• STRING
• NUMBER
• BOOLEAN
• NULL
• UNDEFINED
• SYMBOL
• BIGINT
• immutable
• primitive values are immutable (they are hardcoded and cannot be changed).
• if x = 3.14, you can change the value of x, but you cannot change the value of 3.14.
• objects are variables
• javascript variables can contain single values:
let person = "john doe";
• javascript variables can also contain many values.
• objects are variables too. but objects can contain many values.
• object values are written as name : value pairs (name and value separated by a
colon).
let person = {firstname:"john", lastname:"doe", age:50, eyecolor:"blue"};
• <!DOCTYPE HTML>
• <HTML>
• <BODY>
• <H2>JAVASCRIPT OBJECTS</H2>
• <P>CREATING AN OBJECT:</P>
• <P ID="DEMO"></P>
• <SCRIPT>
• LET PERSON = {
• FIRSTNAME : "JOHN",
• LASTNAME : "DOE",
• AGE : 50,
• EYECOLOR : "BLUE"
• };
• DOCUMENT.GETELEMENTBYID("DEMO").INNERHTML = PERSON.FIRSTNAME + " " + PERSON.LASTNAME;
• </SCRIPT>
• </BODY>
A javascript object is a collection of named values
it is a common practice to declare objects with the const
keyword.
• REGULAR EXPRESSIONS:
REGULAR EXPRESSIONS ARE PATTERNS USED TO
MATCH CHARACTER COMBINATIONS IN STRINGS
A REGULAR EXP IS THE PATTERN IS USED FOR
SEARCHING AND REPLACING CHARACTERS IN
STRINGS.
THE REGEXP OBJECT IS A REGULAR EXPRESSION
WITH ADDED PROPERTIES AND METHODS.
•SYNTAX
• /PATTERN/MODIFIER(S);
MODIFIERS
MODIFIERS ARE USED TO PERFORM CASE-
INSENSITIVE AND GLOBAL SEARCHES:
• BRACKETS
• BRACKETS ARE USED TO FIND A RANGE OF CHARACTERS:
• EXPRESSION DESCRIPTION
• [ABC] FIND ANY CHARACTER BETWEEN THE BRACKETS
• [^ABC] FIND ANY CHARACTER NOT BETWEEN THE
BRACKETS
• [0-9] FIND ANY CHARACTER BETWEEN THE
BRACKETS (ANY DIGIT)
• [^0-9] FIND ANY CHARACTER NOT BETWEEN THE
BRACKETS (ANY NON-DIGIT)
• METACHARACTERS
• METACHARACTERS ARE CHARACTERS WITH A SPECIAL MEANING:
• METACHARACTER DESCRIPTION
• . FIND A SINGLE CHARACTER, EXCEPT NEWLINE OR LINE TERMINATOR
• \W FIND A WORD CHARACTER
• \W FIND A NON-WORD CHARACTER
• \D FIND A DIGIT
• \D FIND A NON-DIGIT CHARACTER
• \S FIND A WHITESPACE CHARACTER
• \S FIND A NON-WHITESPACE CHARACTER
• \B FIND A MATCH AT THE BEGINNING/END OF A WORD, BEGINNING LIKE THIS: \BHI, END
LIKE THIS: HI\B
• \0 FIND A NULL CHARACTER
• \N FIND A NEW LINE CHARACTER
• EXCEPTION HANDLING
• AN EXCEPTION SIGNIFIES THE PRESENCE OF AN ABNORMAL
CONDITION WHICH REQUIRES SPECIAL OPERABLE
TECHNIQUES.
• EXCEPTION HANDLING IN JAVASCRIPT IS ONE OF THE POWERFUL
FEATURES FOR HANDLING ERRORS AND HELPS TO AVOID THE SUDDEN
CRASHES OF OUR PROGRAMS AND APPLICATIONS. ADDITIONALLY, IT
HELPS TO MAINTAIN THE NORMAL FLOW OF OUR PROGRAMS.
• EXCEPTION HANDLING IS MADE UP OF TWO WORDS. THE FIRST WORD
EXCEPTION IS KNOWN AS AN UNEXPECTED OR ABNORMAL CONDITION
THAT OCCURS DURING THE RUNTIME OR EXECUTION OF A PROGRAM.
AND SECOND-WORD HANDLING MEANS HOW WE CAN HANDLE THOSE
• EXCEPTION HANDLING IN JAVASCRIPT IS THE PROCESS
OF HANDLING ABNORMAL STATEMENTS THAT OCCUR
DURING THE EXECUTION OF A PROGRAM.
• FOR HANDLING THE CODE, VARIOUS HANDLERS ARE
USED THAT PROCESS THE EXCEPTION AND
• EXECUTE THE CODE. FOR EXAMPLE, THE DIVISION OF
A NON-ZERO VALUE WITH ZERO WILL RESULT INTO
INFINITY ALWAYS, AND IT IS AN EXCEPTION. THUS,
WITH THE HELP OF EXCEPTION HANDLING, IT CAN BE
EXECUTED AND HANDLED.
IN EXCEPTION HANDLING: A THROW STATEMENT IS USED
TO RAISE AN EXCEPTION. IT MEANS WHEN AN
ABNORMAL CONDITION OCCURS, AN EXCEPTION IS THROWN
USING THROW. THE THROWN EXCEPTION IS HANDLED
BY WRAPPING THE CODE INTO THE TRY…CATCH BLOCK. IF
AN ERROR IS PRESENT, THE CATCH BLOCK WILL EXECUTE,
ELSE ONLY THE TRY BLOCK STATEMENTS WILL GET
EXECUTED.
• THROW, AND TRY...CATCH...FINALLY
• THE TRY STATEMENT DEFINES A CODE BLOCK TO RUN
(TO TRY).
• THE CATCH STATEMENT DEFINES A CODE BLOCK TO
HANDLE ANY ERROR.
• THE FINALLY STATEMENT DEFINES A CODE BLOCK TO
RUN REGARDLESS OF THE RESULT.
• THE THROW STATEMENT DEFINES A CUSTOM ERROR.
• JAVASCRIPT TRY AND CATCH
• THE TRY STATEMENT ALLOWS YOU TO DEFINE A BLOCK OF CODE TO BE
TESTED FOR ERRORS WHILE IT IS BEING EXECUTED.
• THE CATCH STATEMENT ALLOWS YOU TO DEFINE A BLOCK OF CODE TO
BE EXECUTED, IF AN ERROR OCCURS IN THE TRY BLOCK.
• THE JAVASCRIPT STATEMENTS TRY AND CATCH COME IN PAIRS:
• TRY {
• BLOCK OF CODE TO TRY
•}
• CATCH(ERR) {
• BLOCK OF CODE TO HANDLE ERRORS
•}
• THE THROW STATEMENT
• THE THROW STATEMENT ALLOWS YOU TO CREATE A CUSTOM
ERROR.
• TECHNICALLY YOU CAN THROW AN EXCEPTION (THROW AN
ERROR).
• THE EXCEPTION CAN BE A JAVASCRIPT STRING, A NUMBER, A
BOOLEAN OR AN OBJECT:
• THROW "TOO BIG"; // THROW A TEXT
• THROW 500; // THROW A NUMBER
• IF WE USE THROW TOGETHER WITH TRY AND CATCH, YOU CAN
CONTROL PROGRAM FLOW AND GENERATE CUSTOM ERROR
• IN A PROGRAMMING LANGUAGE, THERE CAN BE DIFFERENT
TYPES OF ERRORS WHICH MAY DISTURB
• THE PROPER EXECUTION OF THE PROGRAM.
• TYPES OF ERRORS: WHILE CODING, THERE CAN BE THREE
TYPES OF ERRORS IN THE CODE:
• 1. SYNTAX ERROR: WHEN A USER MAKES A MISTAKE IN THE
PRE-DEFINED SYNTAX OF A PROGRAMMING
• LANGUAGE, A SYNTAX ERROR MAY APPEAR.
• 2. RUNTIME ERROR: WHEN AN ERROR OCCURS DURING THE
EXECUTION OF THE PROGRAM, SUCH AN ERROR IS KNOWN AS
RUNTIME ERROR.
• EXCEPTION HANDLERS ARE USED FOR HANDLING RUNTIME
ERRORS.
• 3. LOGICAL ERROR: AN ERROR WHICH OCCURS WHEN
THERE IS ANY LOGICAL MISTAKE IN THE PROGRAM THAT
MAY
• NOT PRODUCE THE DESIRED OUTPUT, AND MAY TERMINATE
ABNORMALLY. SUCH AN ERROR IS KNOWN AS LOGICAL
• ERROR.
• VALIDATION:
• WHEN YOU ENTER DATA, THE BROWSER AND/OR THE
WEB SERVER WILL CHECK TO SEE THAT THE DATA IS IN
THE CORRECT FORMAT AND WITHIN THE CONSTRAINTS
SET BY THE APPLICATION.
• VALIDATION DONE IN THE BROWSER IS CALLED CLIENT-
SIDE VALIDATION, WHILE VALIDATION DONE ON THE
SERVER IS CALLED SERVER-SIDE VALIDATION
• THE DATA ENTERED INTO A FORM NEEDS TO BE IN THE RIGHT
FORMAT AND CERTAIN FIELDS NEED TO BE FILLED IN ORDER TO
EFFECTIVELY USE THE SUBMITTED FORM. USERNAME,
PASSWORD, AND CONTACT INFORMATION ARE SOME DETAILS
THAT ARE MANDATORY IN FORMS AND THUS NEED TO BE
PROVIDED BY THE USER.
• VALIDATION IS A METHOD TO AUTHENTICATE THE USER.
JAVASCRIPT PROVIDES THE FACILITY TO VALIDATE THE FORM
• ON THE CLIENT-SIDE SO DATA PROCESSING WILL BE FASTER
THAN SERVER-SIDE VALIDATION. THROUGH JAVASCRIPT,
• WE CAN VALIDATE NAME, PASSWORD, EMAIL, DATE, MOBILE
• BUILT-IN OBJECTS:
•  BUILT-IN OBJECTS ARE NOT RELATED TO ANY WINDOW OR DOM OBJECT MODEL.
•  THESE OBJECTS ARE USED FOR SIMPLE DATA PROCESSING IN THE JAVASCRIPT.
• JAVASCRIPT ALSO HAS FOUR BUILT-IN OBJECTS: ARRAY, DATE, MATH, AND STRING. EACH
OBJECT HAS SPECIALPURPOSE
• PROPERTIES AND METHODS ASSOCIATED WITH IT.
• JAVASCRIPT EVENT HANDLERS
• EVENT HANDLERS CAN BE USED TO HANDLE AND VERIFY
USER INPUT, USER ACTIONS, AND BROWSER ACTIONS:
• THINGS THAT SHOULD BE DONE EVERY TIME A PAGE LOADS
• THINGS THAT SHOULD BE DONE WHEN THE PAGE IS CLOSED
• ACTION THAT SHOULD BE PERFORMED WHEN A USER CLICKS
A BUTTON
• CONTENT THAT SHOULD BE VERIFIED WHEN A USER INPUTS
DATA
• AND MORE ...
• MANY DIFFERENT METHODS CAN BE USED TO LET
JAVASCRIPT WORK WITH EVENTS:
• HTML EVENT ATTRIBUTES CAN EXECUTE JAVASCRIPT
CODE DIRECTLY
• HTML EVENT ATTRIBUTES CAN CALL JAVASCRIPT
FUNCTIONS
• YOU CAN ASSIGN YOUR OWN EVENT HANDLER
FUNCTIONS TO HTML ELEMENTS
• WHEN THE PAGE LOADS, IT IS CALLED AN EVENT.
WHEN THE
• USER CLICKS A BUTTON, THAT CLICK TOO IS AN EVENT.
OTHER EXAMPLES INCLUDE EVENTS LIKE PRESSING
ANY KEY, CLOSING A WINDOW, RESIZING A WINDOW,
ETC.
• TYPES OF EVENTS
• ONCHANGE AN HTML ELEMENT HAS BEEN CHANGED
• ONCLICK THE USER CLICKS AN HTML ELEMENT
• ONMOUSEOVERTHE USER MOVES THE MOUSE OVER AN HTML
ELEMENT
• ONMOUSEOUT THE USER MOVES THE MOUSE AWAY FROM AN HTML
ELEMENT
• ONKEYDOWN THE USER PUSHES A KEYBOARD KEY
• ONLOAD THE BROWSER HAS FINISHED LOADING THE PAGE
• ONCLICK EVENT TYPE:
• THIS IS THE MOST FREQUENTLY USED EVENT TYPE WHICH
OCCURS WHEN A USER CLICKS THE LEFT BUTTON OF HIS
• MOUSE. YOU CAN PUT YOUR VALIDATION, WARNING ETC.,
AGAINST THIS EVENT TYPE.
• ONSUBMIT EVENT TYPE:
• ONSUBMIT IS AN EVENT THAT OCCURS WHEN YOU TRY TO
SUBMIT A FORM. YOU CAN PUT YOUR FORM VALIDATION
• AGAINST THIS EVENT TYPE.
• ONMOUSEOVER AND ONMOUSEOUT:
• THESE TWO EVENT TYPES WILL HELP YOU CREATE
NICE EFFECTS WITH IMAGES OR EVEN WITH TEXT AS
WELL.
• THE ONMOUSEOVER EVENT TRIGGERS WHEN YOU
BRING YOUR MOUSE OVER ANY ELEMENT AND
• THE ONMOUSEOUT TRIGGERS WHEN YOU MOVE
YOUR MOUSE OUT FROM THAT ELEMENT. .
DHTML WITH JAVASCRIPT:
• DHTML STANDS FOR DYNAMIC HYPERTEXT MARKUP

LANGUAGE I.E., DYNAMIC HTML..
• DYNAMIC HTML IS NOT A MARKUP OR
PROGRAMMING LANGUAGE BUT IT IS A TERM THAT
COMBINES THE FEATURES OF VARIOUS WEB
DEVELOPMENT TECHNOLOGIES FOR CREATING THE
WEB PAGES DYNAMIC AND INTERACTIVE.
• (DYNAMIC HTML) REFERS TO THE CODE BEHIND INTERACTIVE
WEBPAGES THAT NEED NO PLUGINS LIKE FLASH OR JAVA.
DHTML AGGREGATES THE COMBINED FUNCTIONALITY OF
HTML, CSS, THE DOM, AND JAVASCRIPT.
• WHAT IS THE DIFFERENCE BETWEEN HTML AND DHTML?
• HTML IS A MARKUP LANGUAGE WHILE DHTML IS A COLLECTION
OF TECHNOLOGIES. HTML IS USED TO CREATE STATIC
WEBPAGES WHILE DHTML IS CAPABLE OF CREATING DYNAMIC
WEBPAGES. DHTML IS USED TO CREATE ANIMATIONS AND
DYNAMIC MENUS BUT HTML NOT USED.
• WHAT IS THE DIFFERENCE BETWEEN DHTML AND
JAVASCRIPT?
• DHTML IS ESSENTIALLY DYNAMIC HTML. JAVASCRIPT IS AN
INTERPRETED COMPUTER PROGRAMMING LANGUAGE.
• DHTML ALLOWS ONE TO INCORPORATE A CLIENT-SIDE
SCRIPTING LANGUAGE, SUCH AS JAVASCRIPT, A
• PRESENTATION DEFINITION LANGUAGE, SUCH AS CSS, AND
THE DOCUMENT OBJECT MODEL IN HTML WEB
• PAGES. DHTML IS NOT AN INDIVIDUAL TECHNOLOGY.
• WHAT IS THE ROLE OF JAVASCRIPT IN DHTML?
• JAVASCRIPT IS A SCRIPTING LANGUAGE WHICH IS DONE
ON A CLIENT-SIDE. THE VARIOUS BROWSER SUPPORTS
JAVASCRIPT TECHNOLOGY.
• DHTML USES THE JAVASCRIPT TECHNOLOGY FOR
ACCESSING, CONTROLLING, AND MANIPULATING THE
HTML ELEMENTS.
• THE STATEMENTS IN JAVASCRIPT ARE THE COMMANDS
WHICH TELL THE BROWSER FOR PERFORMING AN ACTION.
• COMPONENTS OF DYNAMIC HTML:
• DHTML CONSISTS OF THE FOLLOWING FOUR
COMPONENTS OR LANGUAGES
• HTML 4.0
• CSS
• JAVASCRIPT
• DOM.
• HTML4.0:
• HTML IS A CLIENT-SIDE MARKUP LANGUAGE, WHICH IS A
CORE COMPONENT OF THE DHTML.
• IT DEFINES THE STRUCTURE OF A WEB PAGE WITH VARIOUS
DEFINED BASIC ELEMENTS OR TAGS.
• CSS:
• CSS STANDS FOR CASCADING STYLE SHEET, WHICH
ALLOWS THE WEB USERS OR DEVELOPERS FOR
CONTROLLING THE STYLE AND LAYOUT OF THE HTML
ELEMENTS ON THE WEB PAGES.
• JAVASCRIPT:
• JAVASCRIPT IS A SCRIPTING LANGUAGE WHICH IS DONE ON
A CLIENT-SIDE. THE VARIOUS BROWSER SUPPORTS
JAVASCRIPT TECHNOLOGY.
• DHTML USES THE JAVASCRIPT TECHNOLOGY FOR
ACCESSING, CONTROLLING, AND MANIPULATING THE HTML
ELEMENTS.
• THE STATEMENTS IN JAVASCRIPT ARE THE COMMANDS
WHICH TELL THE BROWSER FOR PERFORMING AN ACTION.
• DOM:
• DOM IS THE DOCUMENT OBJECT MODEL. IT IS A
W3C STANDARD, WHICH IS A STANDARD
INTERFACE OF PROGRAMMING FOR HTML.
• IT IS MAINLY USED FOR DEFINING THE OBJECTS
AND PROPERTIES OF ALL ELEMENTS IN HTML.
• USES OF DHTML:
• FOLLOWING ARE THE USES OF DHTML (DYNAMIC HTML):
• IT IS USED FOR DESIGNING THE ANIMATED AND
INTERACTIVE WEB PAGES THAT ARE DEVELOPED IN
REALTIME.
• DHTML HELPS USERS BY ANIMATING THE TEXT AND
IMAGES IN THEIR DOCUMENTS.
• IT ALLOWS THE AUTHORS FOR ADDING THE EFFECTS ON
THEIR PAGES.
• IT ALSO ALLOWS THE PAGE AUTHORS FOR INCLUDING THE
DROP-DOWN MENUS OR ROLLOVER BUTTONS.
• THIS TERM IS ALSO USED TO CREATE VARIOUS BROWSER-
BASED ACTION GAMES.
• IT IS ALSO USED TO ADD THE TICKER ON VARIOUS
WEBSITES, WHICH NEEDS TO REFRESH THEIR CONTENT
AUTOMATICALLY.
• WEB TICKER IS A JQUERY PLUGIN THAT ALLOWS YOU TO
HAVE ITEMS SCROLLING INDEFINITELY ACROSS THE
SCREEN. IT USES SOME FANCY CALCULATIONS TO ENSURE
SMOOTH CONTINUOUS TRANSITIONS.
FEATURES OF DHTML:
 FOLLOWING ARE THE VARIOUS CHARACTERISTICS OR
FEATURES OF DHTML (DYNAMIC HTML):
 ITS SIMPLEST AND MAIN FEATURE IS THAT WE CAN
CREATE THE WEB PAGE DYNAMICALLY.
 DYNAMIC STYLE IS A FEATURE, THAT ALLOWS THE USERS
TO ALTER THE FONT, SIZE, COLOR, AND CONTENT OF A WEB
PAGE.
IT PROVIDES THE FACILITY FOR USING THE EVENTS,
METHODS, AND PROPERTIES. AND, ALSO PROVIDES THE
FEATURE OF CODE REUSABILITY.
IT ALSO PROVIDES THE FEATURE IN BROWSERS FOR DATA
BINDING.
USING DHTML, USERS CAN EASILY CREATE DYNAMIC
FONTS FOR THEIR WEB SITES OR WEB PAGES.
 WITH THE HELP OF DHTML, USERS CAN EASILY CHANGE
THE TAGS AND THEIR PROPERTIES.
 THE WEB PAGE FUNCTIONALITY IS ENHANCED BECAUSE
THE DHTML USES LOW-BANDWIDTH EFFECT.
• CHANGING THE TAGS AND PROPERTIES
• REAL-TIME POSITIONING
• REAL-TIME POSITIONING
• DATA BINDING
• DIFFERENCE BETWEEN HTML AND DHTML
• FOLLOWING TABLE DESCRIBES THE DIFFERENCES
BETWEEN HTML AND DHTML
DHTML STANDS FOR DYNAMIC HYPERTEXT MARKUP
LANGUAGE. DHTML COMBINES HTML, CSS, AND
JAVASCRIPT TO CREATE INTERACTIVE AND DYNAMIC
WEB PAGES. IT ALLOWS FOR CUSTOMIZATION AND
CHANGES TO THE CONTENT BASED ON USER INPUTS.
DHTML introduced JavaScript and the Document Object Model (DOM) to make web pages dynamic. With DHTML, the web
page can be manipulated and updated in response to user actions, eliminating the need for creating separate static pages for each
user.
DHTML COMPONENTS
• HTML 4.0
• IT STANDS FOR HYPERTEXT MARKUP LANGUAGE.
•
• IT IS USED TO GIVE STRUCTURE TO OUR WEBPAGE.
•
• HTML 4. O IS AN HTML VERSION WITH SEVERAL NEW FEATURES LIKE SCRIPTING LANGUAGES, STYLE SHEETS,
MULTIMEDIA OPTIONS, AND BETTER PRINTING FACILITIES.
• CSS
• CSS STANDS FOR CASCADING STYLE SHEETS.
•
• IT HANDLES AN IMAGE'S ALIGNMENT SIZE AND BORDER IN A BLOG OR POST.
•
• IT’S LIKE A GROUP OF INSTRUCTIONS THAT GIVES STRUCTURE AND STYLE TO OUR WEBPAGE.
•
• CSS IS USED TO PROVIDE STYLE TO OUR WEBPAGE BY DESIGNING HTML TAGS.
•
• IT ADDS FONTS, COLORS, AND LAYOUTS TO OUR WEBPAGE.
•
• USING CSS, WE CAN ALSO CREATE ANIMATIONS BY USING “@KEYFRAMES.” IT IS USED FOR CONTROLLING INTERMEDIATE STEPS IN A CSS ANIMATION SEQUENCE.
• JAVASCRIPT
• AS WE HAVE PROVIDED STRUCTURE AND DESIGN TO OUR WEBSITE, THE NEXT STEP INVOLVES
PROVIDING FUNCTIONALITY TO OUR WEBPAGE.
• USING JAVASCRIPT, WE CAN ADD INTERACTIVITY AND DYNAMIC FUNCTIONALITY TO OUR WEB
PAGES.
• IT HELPS US IN EXECUTING COMPLEX ACTIONS.
• USING JAVASCRIPT, WE CAN ENABLE THE INTERACTION OF WEBSITES WITH VISITORS.
• WE CAN ALSO LOAD THE CONTENT IN A DOCUMENT WITHOUT RELOADING THE WEBPAGE.
• USING PLUGINS IS MADE MORE ACCESSIBLE BY JAVASCRIPT. THEY EXTEND THE
FUNCTIONALITY OF A WEBPAGE.
• dom(document object model)
• is a programming interface for accessing and manipulating html
elements.
• using dom, we can interact with the content and structure of a webpage.
• when a webpage is loaded, a document object model is created by the
browser.
• the html dom model is like a tree of objects.
• Using the object model, javascript gets the power for creating dynamic
html. therefore javascript can change all the html elements and
attributes, css styles, remove existing html elements and attributes, add
new html existing elements and attributes, and can react to all existing
html events in the page using dom

Web Technologyunit2

Uploaded by

Copyright:

Available Formats

Web Technologyunit2

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Technologyunit2

Uploaded by

Copyright:

Available Formats

WHAT IS JAVASCRIPT ?

 Javascript is a weakly typed language (dynamically typed).

declarative programming – in this type of language we are

• The document object model (dom) is the data representation of

• Core dom - standard model for all document types.

• The html dom is a standard object model and programming

• DHTML STANDS FOR DYNAMIC HYPERTEXT MARKUP

• IT STANDS FOR HYPERTEXT MARKUP LANGUAGE.

• CSS STANDS FOR CASCADING STYLE SHEETS.

You might also like