Wt unit 2 ppts client sied technology

Pune Vidyarthi Griha’s
COLLEGE OF ENGINEERING, NASHIK
“CLIENT SIDE
TECHNOLOGYIES”
By
Prof. Anand N. Gharu
(Assistant Professor)
PVGCOE Computer Dept.
10 Jan 2020Note: Thematerial to preparethis presentation hasbeentaken from internet andare generatedonly
for students referenceandnot for commercialuse.

Outline
JavaScript: Overview of JavaScript, using JSin anHTML
(Embedded, External), Data types, Control Structures,
Arrays, Functions and Scopes,Objects in JS,
DOM: DOMlevels, DOMObjects and their properties and
methods, Manipulating DOM,
JQuery: Introduction to JQuery, Loading JQuery, Selecting
elements, changing styles, creating elements, appending
elements, removing elements, handlingevents.

Outline
JavaScript: Overview of JavaScript, using JSin anHTML
(Embedded, External), Data types, Control Structures,
Arrays, Functions and Scopes,Objects in JS,
DOM: DOM levels, DOM Objects and their properties and
methods, Manipulating DOM,
JQuery: Introduction to JQuery, Loading JQuery, Selecting
elements, changing styles, creating elements, appending
elements, removing elements, handlingevents.

JavaScript-Outline
• Overview of JavaScript,
• using JSin an HTML(Embedded, External),
• Data types,
• Control Structures,
• Arrays,
• Functions
• Objects
• Scopes

Overview ofJavaScript,
• JavaScriptis one of the 3 languagesall web developersmust
learn:
• 1. HTMLto define the content of webpages
• 2. CSSto specify the layout of webpages
• 3. JavaScriptto program the behavior of webpages
• JavaScriptis avery powerful client-sidescriptinglanguage.
• Javascriptis adynamic computer programming language.
•

JavaScript
• JavaScript is a front-end scripting language developed by Mr. Brendan
Eich in 1995. He was working in Netscape.(Livescript)
• Lightweight, but with limitedcapabilities
• Canbe usedasobject-oriented language
• Client-sidetechnology
• Embeddedin your HTMLpage
• Interpreted by the Webbrowser
• Simpleandflexible
• Powerful to manipulate theDOM
6

JavaScriptAdvantages
• JavaScriptallows interactivity suchas:
• Implementing form validation
• Reactto user actions, e.g. handlekeys
• Changingan image on moving mouse over it
• Sections of apageappearing and disappearing
• Content loading and changingdynamically
• Performing complex calculations
• CustomHTMLcontrols, e.g. scrollable table
• ImplementingAJAXfunctionality
7

JavaScriptDevelopmenttool
• It is also called as javascript editing tool
• 1. Microsoft Frontpage
• - Product of Microsoft. It provides various tool to create
interactive websites
• .
• 2. Macromedia Dreamweaver MX
• - it provides various javascript component to handle
database and support new standards XHTML & XML.
• 3. Macromedia Homesite 5
• - product of macromedia. It helps to manage personal
website.
7

What CanJavaScriptDo?
• Canhandle events
• Canread and write HTMLelements
• Canvalidate form data
• Canaccess/ modify browsercookies
• Candetect the user’s browser andOS
• Canbe usedasobject-oriented language
• Canhandle exceptions
• Canperform asynchronous server calls (AJAX)
8

JavaScriptSyntax
• JavaScript can be implemented using <script>... </script> HTML tags in a
web page.
• Placethe <script> tags, within the <head>tags.
• Syntax:
• <script language="javascript"type="text/javascript">
• JavaScriptcode
• </script>

JavaScriptSyntax
• Example:
<html>
<body>
<scriptlanguage="javascript" type="text/javascript">

</script>
</body>
</html>
• The comment ends with a "//-->". Here "//" signifies a comment
in JavaScript
• Output
Hello World!

JavaScriptSyntax
• TheJavaScriptsyntaxis similar to C#andJava
• Operators (+, *, =, !=, &&,++, …)
• Variables (typeless)
• Conditional statements (if, else)
• Loops(for, while)
• Arrays(my_array[]) and associative arrays
(my_array['abc'])
• Functions (canreturn value)
• Function variables (like the C#delegates)
12

Enabling JavaScriptin
Browsers
• JavaScriptin Firefox
• Openanew tab →type about:configin the address bar.
• Thenyou will find the warningdialog.
• SelectI’ll becareful,I promise!
• Then you will find the list of configureoptions in the browser.
• In the searchbar,typejavascript.enabled.
• Thereyou will find the option to enable or disable javascript by
right-clicking on the value of that option →selecttoggle.

JavaScript EditorandExtension
UseNotepad to write thecode
Savethe document using .html (if embedded
JavaScript)
Savedocument with .js (if externalJavaScript)
Runthe code in brower

JavaScript- Placementin
HTMLFile
• There is a flexibility given to include JavaScript code anywhere
in an HTMLdocument.
• However the most preferred ways to include JavaScript in an
HTMLfile are as follows−
• Script in <head>...</head> section.
• Script in <body>...</body> section.
• Script in <body>...</body> and <head>...</head> sections.
• Script in an external file and then include in
<head>...</head> section.

JavaScriptin <head>...</head>
section
<html>
<head>
<script type="text/javascript">
 </script>
</head>
<body>
<inputtype="button"onclick="sayHello()"value="SayHello"/>
</body>
</html>
• Thiscodewill producethefollowingresults −
Note: Comments are not
displayed by the browser, but
they can help document your
HTML source code.

JavaScriptin <body>...</body>
section <html>
<head></head>
<body>
<scripttype="text/javascript">

</script>
<p>Thisis web pagebody </p>
</body>
</html>
• Thiscodewill produce the following results
−
Hello World
Thisis web pagebody

JavaScriptin <body>and<head>
<html>
<head>

</script>
</head>
<body>

</script>
<input type="button" onclick="sayHello()" value="SayHello" />
</body> </html>
• Thiscodewill produce the following result−

JavaScriptin ExternalFile
• HTMLFile
<html>
<head>
<scripttype="text/javascript" src="filename.js">
</script>
</head>
<body> ....... </body>
</html>
• JavaScriptFile– filename.js
function sayHello()
{ alert("Hello World")}

The FirstScript
20
first-script.html
<html>
<body>
alert('Hello JavaScript!');
</script>
</body>
</html>

Another SmallExample
21
small-example.html
<html>
<body>
document.write('JavaScript rulez!' ) ;
</script>
</body>
</html>

UsingJavaScriptCode
22
• TheJavaScriptcodecanbe placed in:
• <script> tag in the head
• <script> tag in the body – not recommended
• External files, linked via <script> tag the head
• Filesusually have. j s extension
• Highly recommended
• The. j s files get cachedby the browser

JavaScript– When is Executed?
• JavaScript code is executed during the page loading or
whenthe browser fires anevent
• All statements are executed at pageloading
• Some statements just define functions that can be called
later
• Function calls or code can be attached as "event handlers"
via tag attributes
• Executed when the event is fired by thebrowser
23

<html>
<head>
function test (message)
{
alert(message);
}
</script>
</head>
<body>
<img src="logo.gif"
onclick="test('clicked!')" />
</body>
</html>
Callinga JavaScriptFunctionfrom
Event Handler– Example
image-onclick.html
24

UsingExternal ScriptFiles
• Using external script files:
25
<html>
<head>
<script src="sample.js" type="text/javascript">
</script>
</head>
<body>
<button onclick="sample()" value="Call JavaScript
function from sample.js" />
</body>
</html>
• External JavaScript file:
function sample() {
alert('Hello from sample.js!')
}
external-JavaScript.html
sample. j s
The<script>tagisalways empty.

DataTypes
26
• JavaScriptdata types:
• Numbers(integer,floating-point)
• Boolean(true / false)
• Stringtype –string of characters
var myName = "You can use both single or double
quotes for strings";
• Arrays
var my_array = [ 1 , 5.3, "aaa"];
• Associativearrays(hashtables)
var my_hash = {a:2, b:3, c:"text"};

DataTypes
26
Data types in Javascripts :
1. Primitives 2. Non-Primitives
Primitives Data Type :
• String : Represent sequence of character
• Number : Represent Numberic value
• Boolean : boolean value either true or false
• Undefined : undefined value
• Null : null means no value
Non-Primitives Data Type :
• Object : Represent instance, which helps to access member
• Array : Represent set of same value
• RegExp : Represent Regular Expression

Everything isObject
27
var test = "somestring";
alert(test[7]) ; / / shows letter ' r '
alert(test.charAt(5)); / / shows letter ' s '
alert("test".charAt(1)); //shows letter ' e '
alert("test".substring(1,3)); //shows 'es'
var arr = [1,3,4];
alert (arr.length); / / shows 3
arr.push(7); / / appends7 to end of array
alert ( a r r [ 3 ] ) ; / / shows 7
• Everyvariable canbe consideredasobject
• Forexamplestrings and arrayshavemember functions:
objects.html

StringOperations
• The+ operator joinsstrings
• What is "9" +9?
• Converting string to number:
28
string1 = "fat ";
string2 = "cats";
alert(string1 + string2); / / f a t cats
alert("9" + 9); / / 99
alert(parseInt("9") + 9); / / 18

Different ways to create an Arrays
• Empty array without element
• Array with two string element :
• Array with different types of element :
• Two dimensional array with object literal :
• 3rd element is undefined :
29
var empty = [ ];
var days = [ S u n d a y, M o n d a y ];
Var mixed = [true, 100, “Hello”];
Var arr = [[1, {x:10, y:20}], [2, {x:30, y:40}]] ;
Var color = [“Red”, “Blue”, undefined];
No value in 1st position : var hobbies = [ , “sports”];

Arrays Operations andProperties
• Declaring new empty array:
• Declaring an array holding few elements:
• Appending an element / getting the last element:
• Readingthe number of elements (arraylength):
• Finding element's index in thearray:
29
var arr = new Array();
var arr = [ 1 , 2, 3, 4, 5];
arr.push(3);
var element = arr.pop();
arr.length;
arr.indexOf(1);

ARRAY METHODS
concat() Joins two or more arrays, and returns a copy of the joined arrays
copyWithin(
)
Copy array elements within the array, to and from specified positions
entries() Returns a key/value pair Array Iteration Object
every() Checks if every element in an array pass a test
fill() Fill the elements in an array with a static value
filter() Creates a new array with every element in an array that pass a test
find() Returns the value of the first element in an array that pass a test
findIndex() Returns the index of the first element in an array that pass a test
forEach() Calls a function for each array element
from() Creates an array from an object
includes() Check if an array contains the specified element
indexOf() Search the array for an element and returns its position
isArray() Checks whether an object is an array
join() Joins all elements of an array into a string
keys() Returns a Array Iteration Object, containing keys of original array
lastIndexOf(
)
Search the array for an element, starting at the end, and returns its
position

ARRAY METHODS
pop() Removes the last element of an array, and returns that element
push() Adds new elements to the end of an array, and returns the new
length
reduce() Reduce the values of an array to a single value (going left-to-right)
reduceRig
ht()
Reduce the values of an array to a single value (going right-to-left)
reverse() Reverses the order of the elements in an array
shift() Removes the first element of an array, and returns that element
slice() Selects a part of an array, and returns the new array
some() Checks if any of the elements in an array pass a test
sort() Sorts the elements of an array
splice() Adds/Removes elements from an array
toString() Converts an array to a string, and returns the result
unshift() Adds new elements to the beginning of an array, and returns the

Standard PopupBoxes
• Alert boxwith text and[OK] button
• Justamessageshown in adialog box:
• Confirmation box
• Containstext, [OK]button and [Cancel]button:
• Promptbox
• Containstext, input field withdefault value:
30
alert("Some text here");
confirm("Are you sure?");
prompt ("enter amount", 10);

JavaScriptVariables

</script>

Sumof Numbers – Example
32
sum-of-numbers.html
<html>
<head>
<title>JavaScript Demo</title>
func t ion calcSum() {
value1 =
par seInt(document.mainFor m.textBox1. value) ;
value2 =
parseInt(d ocument.mainForm.textBox2. value);
sum = value1 + value2;
document.mainForm.textBoxSum.value = sum;
}
</script>
</head>

Sumof Numbers – Example (2)
sum-of-numbers.html (cont.)
33
<body>
<form name="mainForm">
<input type="text" name="textBox1" /> <br/>
<input type="text" name="textBox2" /> <br/>
<input type="button" value="Process"
onclick="javascript: calcSum()" />
<input type="text" name="textBoxSum"
readonly="readonly"/>
</form>
</body>
</html>

JavaScriptPrompt – Example
prompt.html
34
price = prompt("Enterthe price", "10.00");
alert('Price + VAT = ' + price * 1.2);

JavaScript-Operators
• Arithmetic Operators
• ComparisonOperators
• Logical (or Relational)Operators
• Assignment Operators
• Conditional (or ternary)Operators

Symbol Meaning
> Greater than
< Less than
>= Greater than or equal to
<= Lessthan or equalto
== Equal
!= Not equal
Conditional Statement(if)
36
unitPrice = 1.30;
i f (quantity > 100) {
unitPrice = 1.20;
}

SwitchStatement
• Theswitch statement works like inC#:
37
switch (variable) {
case 1:
/ / do something
break;
case ' a ' :
/ / do something else
break;
case 3.14:
/ / another code
break;
default:
/ / something completely different
}
switch-statements.html

Loops
• Likein C#
• f o r loop
• while loop
• do … while loop
39
var counter;
for (counter=0; counter<4; counter++)
{
alert(counter);
}
while (counter < 5)
{
alert(++counter);
}
loops.html

While-loopExample
• <html>
• <body>
• <script type="text/javascript">
•  </script>
• <p>Setthe variable to different value and then
try...</p>
</body> </html>

Functions
• Codestructure – splitting code into parts
• Data comes in, processed,result returned
41
function average(a, b, c)
{
var total;
total = a+b+c;
return total/3;
}
Parameterscomein
here.
Declaringvariables
isoptional. Typeis
never declared.
Valuereturned
here.

FunctionArguments & ReturnValue
42
• Functions are not required to returnavalue
• When calling function it is not obligatory to specify all of its arguments
• Thefunction hasaccessto all the argumentspassed
via arguments array
function sum() {
var sum = 0;
for ( var i = 0; i < argument s .l ength; i ++)
sum += parseInt(arguments[i]);
return sum;
}
alert(sum(1, 2, 4 ) ) ;
functions-demo.html

JavaScriptFunctionSyntax
• function name(parameter1, parameter2, parameter3){
code to beexecuted
}
• var x= myFunction(4, 3); // Function is called, return value
will end up inx
function myFunction(a, b){
// Function returns the product of areturn a* b;
and b
}

ObjectinJavaScript
An object is nothing but an entity having its own state and
behaviour (properties and methods).
e.g. Flower is an object having properties like color, fragrance etc
Ways to create object in JavaScripts :
1. By object Literal : property and value is seperated by
seperator : (colon)
Syntax: object = {property1 = value, property2: value……..}
2. By creating instance of object directly
New keyword is used to create object
Syntax : var objectname=new Object();
3. By using an object constructor
This keyword is used to refer current object.
Syntax : this.Object(variable name) e.g. this.id

DOM-Document Object Mode
• When aweb pageisloaded, the browser createsaDocument Object
Model of thepage.
• TheHTMLDOMmodel isconstructed asatree of Objects:

Benefits of DOMtoJavaScript
• With the object model, JavaScriptgets all the power it needs to create
dynamicHTML:
• JavaScriptcanchangeall the HTMLelements in thepage
• JavaScriptcanchangeall the HTMLattributes in thepage
• JavaScriptcanchangeall the CSSstyles in thepage
• JavaScriptcanremove existing HTMLelements and attributes
• JavaScriptcanadd new HTMLelements and attributes
• JavaScriptcanreact to all existing HTMLevents in thepage
• JavaScriptcancreate new HTMLevents in the page

What is theDOM?
• TheDOMis aW3C(World Wide WebConsortium) standard.
• TheDOMdefines astandard for accessingdocuments:
• "The W3C Document ObjectModel (DOM) is a platformand language-
neutralinterfacethatallowsprogramsandscriptsto dynamicallyaccess
and updatethecontent,structure,and styleofadocument.“
• TheW3CDOMstandard is separated into 3 different parts:
1. CoreDOM- standard model for all documenttypes
2. XMLDOM- standard model for XMLdocuments
3. HTMLDOM- standard model for HTMLdocuments

DOMLevels
• DOMLevel1
• DOMLevel2
• DOMLevel3
• ForMore details regarding DOMlevels click on belowsite.
https://developer.mozilla.org/fr/docs/DOM_Levels

DOMLevel 1
• TheDOMLevel1 specification isseparated into two parts:
1. Coreand
2. HTML.
• Core Level 1 provides a low-level set of fundamental interfaces that can
represent any structured document, as well as defining extended interfaces for
representing anXML document.
• HTML Level 1 provides additional, higher-level interfaces that are used with
the fundamental interfaces defined in Core Level 1 to provide a more
convenient view of an HTML document. Interfaces introduced in DOM1
include, among others, the Document, Node,Attr, Element, andText interfaces.

DOMLevel 2
• TheDOMLevel2 specification contains sixdifferent
specifications:
• TheDOM2 Core,
• Views,
• Events,
• Style,
• Traversaland Range,and
• the DOM2HTML.Most of the DOMLevel2 issupportedin
Mozilla.

DOMLevel 2
Specification Description
DOMLevel2 Core
helps the programs and scripts to accessandupdate
the content and structure of documentdynamically
DOMLevel2 Views
allows programs and scripts to dynamically accessand
update the content of an HTMLor XMLdocument
DOMLevel2 Events
provides ageneric event system to programs and
scripts
DOMLevel2 Style
update the content of stylesheets
DOMLevel2 Traversal
and Range
allows programs and scripts to dynamicallytraverse
and identify arange of content in adocument
DOMLevel2 HTML
update the content and structure of HTML4.01 and
XHTML1.0 documents

DOMLevel 3
• TheDOMLevel 3 specification contains five different
specifications:
1. TheDOM3 Core,
2. Loadand Save,
3. Validation,
4. Events, and
5. XPath.

DOMLevel 3
Specification Description
DOMLevel3 Core
update the content, structure, and documentstyle
DOMLevel3 Load
and Save
allows programs and scripts to dynamically loadthe
content of an XMLdocument into aDOMdocument
DOMLevel3
Validation
allows programs and scripts to dynamically updatethe
content and structure of documents and ensures that the
document remains valid

DOMObjects and their
properties andmethods
• In the DOM,all HTMLelements are defined asobjects.
• The programming interface is the properties and methods of each
object.
• HTMLDOMpropertiesare values(of HTMLElements) that
you canset or change.
• HTML DOM methods are actions you can perform (on HTML
Elements). Amethod is an action you can do (like add or deleting an
HTMLelement).

DOMExample 1
• Thefollowing examplechangesthe content (the innerHTML)of the
<p>element with id="demo":
• Example
• <html>
<body>
<pid="demo"></p>
<script>
document.getElementById("demo").innerHTML ="Hello World!";
</script>
</body>
</html>
• In the exampleabove,getElementByIdisamethod,while
innerHTMLisaproperty.
Output

getElementById &innerHTML
• ThegetElementById 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
theelement.
• TheinnerHTMLProperty
• The easiest way to get the content of an element is by using the innerHTML
property.S
• TheinnerHTMLproperty isuseful for getting or replacingthe
content of HTMLelements.
• The innerHTML property can be used to get or change any HTML element,
including <html> and <body>.

Finding HTMLElements
Method Description
document.getElementById(id) Find an element by element id
document.getElementsByTagName(name) Find elements by tag name
document.getElementsByClassName(name) Find elements by classname

Changing HTMLElements
Method Description
element.innerHTML=new htmlcontent
Changethe inner HTMLof an
element
element.attribute = newvalue
Changethe attribute value ofan
HTMLelement
element.setAttribute(attribute, value)
Changethe attribute value ofan
HTMLelement
element.style.property = newstyle
Changethe style of anHTML
element

Adding and DeletingElements
Method Description
document.createElement(element) Createan HTMLelement
document.removeChild(element) Removean HTML element
document.appendChild(element) Add an HTMLelement
document.replaceChild(element) Replacean HTML element
document.write(text) Write into the HTMLoutput stream

Adding EventsHandlers
Method Description
document.getElementById(id).onclick
=function(){code}
Adding event
handler code to an
onclick event

Finding HTMLObjects
Property Description DOM
document.baseURI
Returns the absolute baseURIof the
document
3
document.body Returns the <body> element 1
document.cookie Returns the document's cookie 1
document.doctype Returns the document's doctype 3
document.forms Returns all <form> elements 1
document.head Returns the <head>element 3
document.images Returns all <img>elements 1

Changing HTMLContent
• Example
<html><body>
<h2>JavaScriptcanChangeHTML</h2>
<pid="p1">HelloWorld!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
<p>Theparagraphabovewaschangedby ascript.</p>
</body></html>
• Output
JavaScriptcanChangeHTML
Newtext!
Theparagraphabovewaschangedby ascript.

Changingthe Valueof anAttribute
• Example
<html><body>
<img id="image" src="smiley.gif" width="160"height="120">
<script>
document.getElementById("image").src ="landscape.jpg";
</script>
<p>Theoriginal imagewassmiley.gif, but the script changeditto
landscape.jpg</p>
</body></html>
• Output

jQuery -Introduction
• jQuery isaJavaScriptLibrary.
• jQuery greatly simplifies JavaScriptprogramming.
• jQuery isalightweight
• jQuery alsosimplifies alot of the complicated thingsfrom JavaScript,like
AJAXcallsand DOMmanipulation.
• ThejQuery library contains the followingfeatures:
• HTML/DOMmanipulation
• CSSmanipulation
• HTMLevent methods
• Effectsandanimations
• AJAX

Adding jQuery to YourWeb
Pages
• Thereare severalwaysto start usingjQuery on yourweb
site.Youcan:
• Download the jQuery library fromjQuery.com
• Include jQuery from aCDN,likeGoogle

DownloadingjQuery
• Thereare two versionsof jQuery available fordownloading:
• Production version - this is for your live website because it has been minified and
compressed
• Development version- this isfor testing anddevelopment
• Both versionscanbe downloaded from jQuery.com.
• The jQuery library is a single JavaScript file, and you reference it with the
HTML <script> tag (notice that the <script> tag should be inside the <head>
section):
<head>
<script src="jquery-3.2.1.min.js"></script>
</head>
• Tip: Place the downloaded file in the same directory as the pages where you
wish to useit.

jQueryCDN
• If you don't want to download and host jQuery yourself, you can
include it from aCDN(Content DeliveryNetwork).
• Both Googleand Microsoft hostjQuery.
• TousejQuery from Googleor Microsoft, useone of the following:
• GoogleCDN:
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
">
</script>
</head>

jQuerySyntax
• With jQuery you select (query) HTMLelements and perform "actions" on
them.
• syntax:
• $(selector).action()
• A$signto define/access jQuery
• A(selector)to "query (or find)" HTMLelements
• AjQuery action()to be performed on theelement(s)
• Examples:
• $(this).hide() - hides the currentelement.
• $("p").hide() - hides all <p>elements.
• $(".test").hide() - hidesall elements withclass="test".
• $("#test").hide() - hidesthe element withid="test".

jQuerySelectors-Selecting
elements
• jQuery selectors allow you to select and manipulate HTML
element(s).
• jQuery selectors are used to "find" (or select) HTML elements
based on their name, id, classes, types, attributes, values of
attributes and much more. It's based on the existing CSS Selectors,
and in addition, it hassome owncustom selectors.
• All selectors in jQuery start with the dollar sign and
parentheses:$().

The elementSelector
• ThejQuery element selector selectselements basedon the element
name.
• Youcanselect all <p>elements on apagelike this:
• $("p")
• Example
• When auser clickson abutton, all <p>elements will be
hidden:
• $(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});

The #idSelector
• ThejQuery #id selector usesthe id attribute of anHTMLtag tofind the specific
element.
• Anid should be unique within apage,soyou should usethe#id selector when you
want tofind asingle, unique element.
• Tofind anelement with aspecificid, write ahashcharacter, followed by the id
ofthe HTMLelement:
• $("#test")
• Example
• Whenauserclicks on abutton, the element with id="test" will be hidden:
• $(document).ready(function(){
$("#test").hide();
});
});

jQuery css()Method-ChangingStyle
• jQuerycss()Method
• Thecss()method setsor returns one or morestyle
properties for the selectedelements.
• ReturnaCSSProperty
• Toreturn the valueof aspecified CSSproperty, usethe following
syntax:
• css("propertyname");
• SetaCSSProperty
• Toset aspecified CSSproperty, usethe following syntax:
• css("propertyname","value");

ChangingStyle-
Returna CSSPropertyExample
<html><head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></sc
ript>
<script>
$(document).ready(function(){
alert("Backgroundcolor="+$("p").css("background-color"));
});
});
</script>
</head><body>
<pstyle="background-color:#ff0000">Thisis a paragraph.</p>
<button>Returnbackground-colorof p</button>
</body></html>

ChangingStyle-
Returna CSSProperty Exampleo/p
OutputofPrevious Code

ChangingStyle-
Set a CSSPropertyExample
<html><head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$("p").css("background-color", "yellow");
});
});
</script>
</head>
<body>
<pstyle="background-color:#ff0000">Thisis a paragraph.</p>
<button>Setbackground-colorof p</button>
</body></html>

ChangingStyle-
Set a CSSProperty Exampleo/p
OutputofPrevious Code
After clickingonbutton

jQuSery - AddElements
• Wewill look at four jQuery methods that are usedto add new content:
• append() - Inserts content at the end of the selected
elements
• prepend() - Inserts content at the beginning of the
selected elements
• after() - Inserts content after the selectedelements
• before() - Inserts content before the selectedelements

jQuery append() Method-Example
<html><head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></scrip
t>
<script>
$("#btn1").click(function(){
$("ol").append("<li>Listitem3</li>");
});}); </script>
</head>
<body>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
<buttonid="btn1">Append list items </button>
</body></html>
After Clickingonbutton

jQuery - RemoveElements
• RemoveElements/Content
• Toremove elements and content, there are mainly two jQuery methods:
• remove() - Removesthe selected element (andits child
elements)
• empty() - Removesthe child elements fromthe
selected element

jQuery remove() Method-Example
• <html ><head>
• <script src="https://code.jquery.com/jquery-1.10.2.js">
</script>
• </head>
• <body>
• <p>Hello</p>
• howare you?
• <button>Remove</button>
• <script>
• $("button").click(function() {
• $("p" ).remove();
• });
• </script>
• </body></html>
After Clickingonbutton

References
• https://www.slideshare.net/rakhithota/js-ppt
• https://www.tutorialspoint.com/javascript/javascript_quic
k_guide.htm
• https://www.w3schools.com/js
• https://www.w3schools.com/js/js_htmldom.asp
• https://developer.mozilla.org/fr/docs/DOM_Levels
• https://codescracker.com/js/js-dom-levels.htm
• https://www.w3schools.com/jquery/jquery_get_started.a
sp
• https://www.w3schools.com/jquery/jquery_css.asp
• https://www.w3schools.com/jquery/jquery_dom_add.asp

Thank You
90
gharu.anand@gmail.com
Blog : anandgharu.wordpress.com
Prof. Gharu Anand N. 90

Wt unit 2 ppts client sied technology

More Related Content

What's hot

Similar to Wt unit 2 ppts client sied technology

More from PUNE VIDYARTHI GRIHA'S COLLEGE OF ENGINEERING, NASHIK

Recently uploaded

Wt unit 2 ppts client sied technology