INFLUENCE OF NANOSILICA ON THE PROPERTIES OF CONCRETE
Wt unit 2 ppts client sied technology
1. 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.
2. 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.
3. 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.
4. JavaScript-Outline
• Overview of JavaScript,
• using JSin an HTML(Embedded, External),
• Data types,
• Control Structures,
• Arrays,
• Functions
• Objects
• Scopes
5. 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.
•
6. 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
7. 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
8. 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
12. 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>
14. 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
15. 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.
16. JavaScript EditorandExtension
UseNotepad to write thecode
Savethe document using .html (if embedded
JavaScript)
Savedocument with .js (if externalJavaScript)
Runthe code in brower
17. 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.
24. 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
25. 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
26. <html>
<head>
<script type="text/javascript">
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
27. 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.
28. 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"};
29. 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
30. 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
31. 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
32. 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”];
33. 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);
34. 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
35. 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
36. 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);
42. 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;
}
43. 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
45. 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
46. While-loopExample
• <html>
• <body>
• <script type="text/javascript">
• <!-- var count =0;
• document.write("Starting Loop ");
• while (count <10){
• document.write("Current Count : " +count +
"<br />"); count++; }
• document.write("Loop stopped!");
• //--> </script>
• <p>Setthe variable to different value and then
try...</p>
</body> </html>
47. 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.
48. 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
49. 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
}
50. 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
51. 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.
52. DOM-Document Object Mode
• When aweb pageisloaded, the browser createsaDocument Object
Model of thepage.
• TheHTMLDOMmodel isconstructed asatree of Objects:
53. 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
54. 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
56. 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.
57. DOMLevel 2
• TheDOMLevel2 specification contains sixdifferent
specifications:
• TheDOM2 Core,
• Views,
• Events,
• Style,
• Traversaland Range,and
• the DOM2HTML.Most of the DOMLevel2 issupportedin
Mozilla.
58. 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
allows programs and scripts to dynamically accessand
update the content of stylesheets
DOMLevel2 Traversal
and Range
allows programs and scripts to dynamicallytraverse
and identify arange of content in adocument
DOMLevel2 HTML
allows programs and scripts to dynamically accessand
update the content and structure of HTML4.01 and
XHTML1.0 documents
59. DOMLevel 3
• TheDOMLevel 3 specification contains five different
specifications:
1. TheDOM3 Core,
2. Loadand Save,
3. Validation,
4. Events, and
5. XPath.
60. DOMLevel 3
Specification Description
DOMLevel3 Core
allows programs and scripts to dynamically accessand
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
61. 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).
62. 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
63. 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>.
65. 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
66. 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
68. 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
70. 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
71. 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.
73. Adding jQuery to YourWeb
Pages
• Thereare severalwaysto start usingjQuery on yourweb
site.Youcan:
• Download the jQuery library fromjQuery.com
• Include jQuery from aCDN,likeGoogle
74. 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.
75. 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>
76. 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".
77. 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:$().
78. 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();
});
});
79. 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(){
$("button").click(function(){
$("#test").hide();
});
});
80. 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");
85. 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
87. 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