Scribd
Upload
10 views

Web Technology1

Javascript is a weakly typed, multi-paradigm scripting language that can be used for both client-side and server-side web development. It contains a standard library of objects for arrays, dates, and math, as well as core language elements like operators, control structures, and statements. The DOM and HTML DOM allow Javascript to access and modify elements in HTML documents.

Uploaded by

sabiha mahveen
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
10 views

Web Technology1

Javascript is a weakly typed, multi-paradigm scripting language that can be used for both client-side and server-side web development. It contains a standard library of objects for arrays, dates, and math, as well as core language elements like operators, control structures, and statements. The DOM and HTML DOM allow Javascript to access and modify elements in HTML documents.

Uploaded by

sabiha mahveen
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 122

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)
• (X|Y) FIND ANY OF THE ALTERNATIVES SPECIFIED
• 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
• 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.
• FEATURES OF DHTML
• CHANGING THE TAGS AND PROPERTIES
• REAL-TIME POSITIONING
• REAL-TIME POSITIONING
• DATA BINDING
• ENHANCING VISUAL EFFECTS
• IMPROVED NAVIGATION
• DYNAMIC CONTENT
• VALIDATION OF USER INPUT
• 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
DOCUMENT.WRITE() METHOD:
• THE DOCUMENT.WRITE() METHOD OF JAVASCRIPT, WRITES THE OUTPUT TO A WEB PAGE.
• THE FOLLOWING EXAMPLE SIMPLY USES THE DOCUMENT.WRITE() METHOD OF JAVASCRIPT IN THE
• DHTML. IN THIS EXAMPLE, WE TYPE THE JAVASCRIPT CODE IN THE <BODY> TAG.
• <HTML>
• <HEAD>
• <TITLE>
• METHOD OF A JAVASCRIPT
• </TITLE>
• </HEAD>
• <BODY>
• <SCRIPT TYPE="TEXT/JAVASCRIPT">
• DOCUMENT.WRITE("JAVATPOINT");
• </SCRIPT> </BODY> </HTML>
JAVASCRIPT EVENTS
• HTML EVENTS ARE "THINGS" THAT HAPPEN TO HTML ELEMENTS.
• WHEN JAVASCRIPT IS USED IN HTML PAGES, JAVASCRIPT CAN "REACT" ON THESE EVENTS.
• AN HTML EVENT CAN BE SOMETHING THE BROWSER DOES, OR SOMETHING A USER DOES.
• HERE ARE SOME EXAMPLES OF HTML EVENTS:
• AN HTML WEB PAGE HAS FINISHED LOADING
• AN HTML INPUT FIELD WAS CHANGED
• AN HTML BUTTON WAS CLICKED
• JAVASCRIPT LETS YOU EXECUTE CODE WHEN EVENTS ARE DETECTED.
• HTML ALLOWS EVENT HANDLER ATTRIBUTES, WITH JAVASCRIPT CODE, TO BE ADDED TO HTML
ELEMENTS.
• WITH SINGLE QUOTES:
• IN THE FOLLOWING EXAMPLE, AN ONCLICK ATTRIBUTE
(WITH CODE), IS ADDED TO A <BUTTON> ELEMENT:
• <!DOCTYPE HTML>
• <HTML>
• <BODY>
• <H1>JAVASCRIPT HTML EVENTS</H1>
• <H2>THE ONCLICK ATTRIBUTE</H2>
• <BUTTON
ONCLICK="DOCUMENT.GETELEMENTBYID('DEMO').INNERHTML=DATE()">THE
TIME IS?</BUTTON>
• <P ID="DEMO"></P>
• </BODY>
• </HTML>
• JAVASCRIPT AND HTML DOM
• WITH VERSION 4 OF HTML, JAVASCRIPT CODE CAN ALSO CHANGE
THE INNER CONTENT AND ATTRIBUTES OF THE HTML EVENT.
THE DOM PROGRAMMING INTERFACE
• 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).
• THE FOLLOWING EXAMPLE CHANGES THE CONTENT (THE
INNERHTML) OF THE <P> ELEMENT WITH ID="DEMO":
• THE GETELEMENTBYID METHOD
• THE MOST COMMON WAY TO ACCESS AN HTML ELEMENT IS TO USE
THE ID OF THE ELEMENT.
• IN THE EXAMPLE ABOVE THE GETELEMENTBYID METHOD USED
ID="DEMO" TO FIND THE ELEMENT.
• THE INNERHTML PROPERTY
• THE EASIEST WAY TO GET THE CONTENT OF AN ELEMENT IS BY
USING THE INNERHTML PROPERTY.
• THE INNERHTML PROPERTY IS USEFUL FOR GETTING OR REPLACING
• DHTML EVENTS:
• AN EVENT IS DEFINED AS CHANGING THE OCCURRENCE OF AN
OBJECT.
• IT IS COMPULSORY TO ADD THE EVENTS IN THE DHTML PAGE.
WITHOUT EVENTS, THERE WILL BE NO DYNAMIC
• CONTENT ON THE HTML PAGE. THE EVENT IS A TERM IN THE HTML,
WHICH TRIGGERS THE ACTIONS IN THE WEB
• BROWSERS.
• SUPPOSE, ANY USER CLICKS AN HTML ELEMENT, THEN THE
JAVASCRIPT CODE ASSOCIATED WITH THAT ELEMENT IS EXECUTED.
ACTUALLY, THE EVENT HANDLERS CATCH THE EVENTS PERFORMED
BY THE USER AND THEN EXECUTE THE CODE.
Example of events:
1. Click a button.
2. Submitting a form.
3. An image loading or a web page loading, etc.
• ADVANTAGES OF DHTML
• THOSE WEB SITES AND WEB PAGES WHICH ARE CREATED USING
THIS CONCEPT ARE FAST.
• THERE IS NO PLUG-IN REQUIRED FOR CREATING THE WEB PAGE
DYNAMICALLY.
• DUE TO THE LOW-BANDWIDTH EFFECT BY THE DYNAMIC HTML,
THE WEB PAGE FUNCTIONALITY IS ENHANCED.
• THIS CONCEPT PROVIDES ADVANCED FUNCTIONALITIES THAN
THE STATIC HTML.
• IT IS HIGHLY FLEXIBLE, AND THE USER CAN MAKE CHANGES
EASILY IN THE WEB PAGES.
• DISADVANTAGES OF DHTML
• THE SCRIPTS OF DHTML DOES NOT RUN PROPERLY IN VARIOUS
WEB BROWSERS. OR IN SIMPLE WORDS, WE CAN SAY THAT
VARIOUS WEB BROWSERS DO NOT SUPPORT THE DHTML. IT IS
ONLY SUPPORTED BY THE LATEST BROWSERS.
• THE CODING OF THOSE WEBSITES THAT ARE CREATED USING
DHTML IS LONG AND COMPLEX.
• FOR UNDERSTANDING THE DHTML, USERS MUST KNOW ABOUT
HTML, CSS, AND JAVASCRIPT. IF ANY USER DOES NOT KNOW
THESE LANGUAGES, THEN IT IS A TIME-CONSUMING AND LONG
PROCESS IN ITSELF.
• JSON INTRODUCTION
• JSON STANDS FOR JAVASCRIPT OBJECT NOTATION
• JSON IS A TEXT FORMAT FOR STORING AND TRANSPORTING DATA
• JSON IS "SELF-DESCRIBING" AND EASY TO UNDERSTAND
• WHAT IS JSON?
• JSON STANDS FOR JAVASCRIPT OBJECT NOTATION
• JSON IS A LIGHTWEIGHT DATA-INTERCHANGE FORMAT
• JSON IS PLAIN TEXT WRITTEN IN JAVASCRIPT OBJECT NOTATION
• JSON IS USED TO SEND DATA BETWEEN COMPUTERS
• JSON IS LANGUAGE INDEPENDENT *
• EXAMPLE
• '{"NAME":"JOHN", "AGE":30, "CAR":NULL}'
• IT DEFINES AN OBJECT WITH 3 PROPERTIES:
• NAME
• AGE
• CAR
• EACH PROPERTY HAS A VALUE.
• IF YOU PARSE THE JSON STRING WITH A JAVASCRIPT PROGRAM,
YOU CAN ACCESS THE DATA AS AN OBJECT:
• LET PERSONNAME = OBJ.NAME;
• LET PERSONAGE = OBJ.AGE;
• WHY USE JSON?
• THE JSON FORMAT IS SYNTACTICALLY SIMILAR TO THE
CODE FOR CREATING JAVASCRIPT OBJECTS. BECAUSE OF
THIS, A JAVASCRIPT PROGRAM CAN EASILY CONVERT JSON
DATA INTO JAVASCRIPT OBJECTS.
• SINCE THE FORMAT IS TEXT ONLY, JSON DATA CAN EASILY
BE SENT BETWEEN COMPUTERS, AND USED BY ANY
PROGRAMMING LANGUAGE.
• JAVASCRIPT HAS A BUILT IN FUNCTION FOR
CONVERTING JSON STRINGS INTO JAVASCRIPT
OBJECTS:
• JSON.PARSE()
• JAVASCRIPT ALSO HAS A BUILT IN FUNCTION FOR
CONVERTING AN OBJECT INTO A JSON STRING:
• JSON.STRINGIFY()
JSON SYNTAX
• THE JSON SYNTAX IS A SUBSET OF THE JAVASCRIPT SYNTAX.
• JSON SYNTAX RULES
• JSON SYNTAX IS DERIVED FROM JAVASCRIPT OBJECT NOTATION
SYNTAX:
• DATA IS IN NAME/VALUE PAIRS
• DATA IS SEPARATED BY COMMAS
• CURLY BRACES HOLD OBJECTS
• SQUARE BRACKETS HOLD ARRAYS
• JSON DATA - A NAME AND A VALUE
• JSON DATA IS WRITTEN AS NAME/VALUE PAIRS (AKA
KEY/VALUE PAIRS).

• A NAME/VALUE PAIR CONSISTS OF A FIELD NAME (IN


DOUBLE QUOTES), FOLLOWED BY A COLON, FOLLOWED BY
A VALUE:
• EXAMPLE
• "NAME":"JOHN"
JSON DATA TYPES
• VALID DATA TYPES
• IN JSON, VALUES MUST BE ONE OF THE FOLLOWING DATA
TYPES:
A STRING
A NUMBER
AN OBJECT (JSON OBJECT)
AN ARRAY
A BOOLEAN
NULL
• JSON STRINGS
• STRINGS IN JSON MUST BE WRITTEN IN DOUBLE
QUOTES.
• EXAMPLE:
• {"NAME":"JOHN"}
• JSON NUMBERS
• NUMBERS IN JSON MUST BE AN INTEGER OR A
FLOATING POINT.
• EXAMPLE:
• {"AGE":30}
• JSON OBJECTS
• VALUES IN JSON CAN BE OBJECTS.
• EXAMPLE:
•{
• "EMPLOYEE":{"NAME":"JOHN", "AGE":30,
"CITY":"NEW YORK"}
•}
• JSON ARRAYS
• VALUES IN JSON CAN BE ARRAYS.
• EXAMPLE:
•{
• "EMPLOYEES":["JOHN", "ANNA", "PETER"]
•}
• JSON BOOLEANS
• VALUES IN JSON CAN BE TRUE/FALSE.
• EXAMPLE:
• {"SALE":TRUE}
• JSON NULL
• VALUES IN JSON CAN BE NULL.
• EXAMPLE:
• {"MIDDLENAME":NULL}
• ORDERED LIST OF VALUES: IT INCLUDES
ARRAY, LIST, VECTOR OR SEQUENCE ETC.
• USES OF JSON
• IT IS USED WHILE WRITING JAVASCRIPT BASED APPLICATIONS
THAT INCLUDES BROWSER EXTENSIONS AND WEBSITES.
• JSON FORMAT IS USED FOR SERIALIZING AND TRANSMITTING
STRUCTURED DATA OVER NETWORK CONNECTION.
• IT IS PRIMARILY USED TO TRANSMIT DATA BETWEEN A SERVER
AND WEB APPLICATIONS.
• WEB SERVICES AND APIS USE JSON FORMAT TO PROVIDE PUBLIC
DATA.
• IT CAN BE USED WITH MODERN PROGRAMMING LANGUAGES.
• CHARACTERISTICS OF JSON
• JSON IS EASY TO READ AND WRITE.
• IT IS A LIGHTWEIGHT TEXT-BASED
INTERCHANGE FORMAT.
• JSON IS LANGUAGE INDEPENDENT.
FUNCTION FILES:
• FUNCTION FILES CAN RECEIVE AND RETURN DATA
THROUGH THE INPUT AND OUTPUT PARAMETERS
RESPECTIVELY,SCRIPT FILES DO NOT INCLUDE THIS
POSSIBILITY AND THEIR PARAMETERS MUST BE
WRITTEN DIRECTLY INTO THE FILE OR INPUTTED
USING THE INPUT COMMANDS.
• ONLY FUNCTION FILES CAN BE USED AS FUNCTIONS
IN OTHER FILES OR IN THE COMMAND WINDOW
• A COMMON USE OF JSON IS TO READ DATA FROM A
WEB SERVER, AND DISPLAY THE DATA IN A WEB
PAGE.

• EXAMPLE READS A MENU FROM MYTUTORIALS.JS,


AND DISPLAYS THE MENU IN A WEB PAGE:
• CREATE A JAVASCRIPT FUNCTION TO DISPLAY ARRAY.
CREATE A FUNCTION MYFUNCTION() THAT LOOPS THE
ARRAY OBJECTS, AND DISPLAY THE CONTENT AS HTML
LINKS:
• WHAT ARE SCRIPT FILES?
• A SCRIPT FILE IS AN M-FILE THAT CONTAINS A
SEQUENCE OF INSTRUCTIONS BUT IS NOT A
FUNCTION. A SCRIPT FILE IS
• CREATED BY WRITING LINES OF CODE JUST AS YOU
WOULD AT THE COMMAND PROMPT. A SCRIPT FILE
IS RUN WHEN YOU PRESS THE RUN BUTTON IN THE
TOP TOOLBAR.
HTTP REQUEST IN JAVASCRIPT?

• THERE ARE SEVERAL WAYS TO MAKE HTTP


REQUESTS IN JAVASCRIPT. THE MOST COMMON WAY
IS TO USE THE XMLHTTP REQUEST OBJECT, WHICH
ENCAPSULATES ALL THE NECESSARY METHODS
AND PROPERTIES FOR MAKING AN HTTP REQUEST.
THE XMLHTTPREQUEST OBJECT CAN BE USED TO
MAKE BOTH ASYNCHRONOUS AND SYNCHRONOUS
REQUESTS.
• ANOTHER POPULAR METHOD OF MAKING HTTP
REQUESTS IN JAVASCRIPT IS BY USING THE FETCH
API. FETCH IS A MODERN REPLACEMENT FOR
XMLHTTPREQUEST AND PROVIDES AN EASY-TO-USE
INTERFACE FOR MAKING REQUESTS. IT ALSO
SUPPORTS MORE FEATURES THAN
XMLHTTPREQUEST, SUCH AS STREAMING
RESPONSES, AUTOMATIC JSON PARSING AND MORE.
• ASYNCHRONOUS IS A NON-BLOCKING ARCHITECTURE,
WHICH MEANS IT DOESN’T BLOCK FURTHER EXECUTION
WHILE ONE OR MORE OPERATIONS ARE IN PROGRESS.
WITH ASYNC PROGRAMMING, MULTIPLE RELATED
OPERATIONS CAN RUN CONCURRENTLY WITHOUT
WAITING FOR OTHER TASKS TO COMPLETE.
•.
• SYNC IS A SINGLE-THREAD, SO ONLY ONE
OPERATION OR PROGRAM WILL RUN AT A TIME.
ASYNC IS NON-BLOCKING, WHICH MEANS IT WILL
SEND MULTIPLE REQUESTS TO A SERVER. SYNC IS
BLOCKING — IT WILL ONLY SEND THE SERVER ONE
REQUEST AT A TIME AND WAIT FOR THAT REQUEST
TO BE ANSWERED BY THE SERVER

You might also like