SlideShare a Scribd company logo
1 of 35
Download to read offline
CORDOVA TRAINING
SESSION: 3 – ADVANCED JAVASCRIPT
OBJECTS
 JavaScript is an Object Oriented Programming (OOP) language.
 Objects are composed of attributes.
 If an attribute contains a function, it is considered to be a method.
OBJECT PROPERTIES
 Object properties can be any of the three primitive data types, or any of the abstract
data types, such as another object.
 Object properties are usually variables that are used internally in the object's methods,
but can also be globally visible variables that are used throughout the page.
 The syntax for adding a property to an object is:
objectName.objectProperty = propertyValue;
OBJECT METHODS
 Methods are the functions that let the object do something or let something be done
to it.
 There is a small difference between a function and a method.
 A function is a standalone unit of statements and a method is attached to an object
and can be referenced by the this keyword.
USER DEFINED OBJECTS
 All user-defined objects and built-in objects are descendants of an object called Object.
 The new operator is used to create an instance of an object. To create an object, the
new operator is followed by the object name method.
 The object name method is called a ‘constructor’.
var employee = new Object();
var books = new Array("C++", "Perl", "Java");
var day = new Date("August 15, 1947");
OBJECT CONSTRUCTOR
 A constructor is a function that creates and initializes an object.
 JavaScript provides a special constructor function called Object() to build the object.
The return value of the Object() constructor is assigned to a variable.
 The variable contains a reference to the new object.
var book = new Object();
book.subject = “Introduction to JavaScript ";
book.author = “Binu Paul";
OBJECT METHODS
 An object method is created by defining functions with in an object.
function book(title, author){
this.title = title;
this.author = author;
this.addPrice = addPrice;
}
BUILT-IN OBJECTS
 JavaScript has several built-in or native objects. These objects are accessible anywhere
in your program and will work the same way in any browser running in any operating
system.
 Some of the popular objects are:
 Date
 Math
 String
 Array
DATE OBJECT
 The Date object is a datatype built into the JavaScript language. The date methods
simply allow you to get and set the year, month, day, hour, minute, second, and
millisecond fields of the object
 Some of the popular methods are:
 getDay();
 getMonth();
 getFullYear();
 getHours();
 getMinutes();
 getSeconds();
MATH OBJECT
 The math object provides you properties and methods for mathematical constants and
functions. Unlike other global objects, Math is not a constructor.
 Some of the popular methods are:
 Math.PI;
 Math.abs(x);
 Math.cos(x);
 Math.sin(x);
 Math.tan(x);
 Math.random();
MATH OBJECT
 Math.floor(x)
 Math.ceil(x);
 Math.log(x);
 Math.max(x1, x2,…);
 Math.min(x1, x2, …);
 Math.sqrt(x);
 Math.pow(x, y);
STRING OBJECT
 The String object lets you work with a series of characters; it wraps Javascript's string
primitive data type with a number of helper methods.
 You can get the length of a sting using length attribute.
 Some of the popular methods are:
 toUpperCase();
 toLowerCase();
 substr(startPosition, length);
 concat(str1, str2, …);
 split(separator, limit);
ARRAY OBJECT
 The Array object lets you store multiple values in a single variable. It stores a fixed-size
sequential collection of elements of the same type.
 An array is used to store a collection of data, but it is often more useful to think of an
array as a collection of variables of the same type.
 We can get the length of array using the length attribute.
 Some of the popular methods are:
 push(element1, element2, …);
 pop();
ARRAY OBJECT
 reverse();
 sort();
 shift();
 join(seperator);
ACCESSING HTML DOM
 Every web page resides inside a browser window which can be considered as an object.
 DOM stands for Document Object Model.
 A Document object represents the HTML document that is displayed in that window.
The Document object has various properties that refer to other objects which allow
access to and modification of document content.
DOM HIERARCHY
DOM HIERARCHY
 Window object − Top of the hierarchy. It is the outmost element of the object hierarchy.
 Document object − Each HTML document that gets loaded into a window becomes a
document object. The document contains the contents of the page.
 Form object − Everything enclosed in the <form>...</form> tags sets the form object.
DOM ATTRIBUTES
 This DOM model provides several read-only properties, such as title, URL, and
lastModified provide information about the document as a whole.
 The most popular document properties are:
 alinkColor
 anchors[ ]
DOM ATTRIBUTES
 domain
 forms[ ]
 images[ ]
 location
 referrer
 title
 URL
DOM METHODS
 There are various methods provided by DOM model which can be used to set and get
document property values.
 document.getElementById(id);
 document.getElementsByName(name);
 document.getElementsByTagName(tagName);
DOM - WINDOW
 The window object represents a window containing a DOM document; the document
property points to the DOM document loaded in that window. A window for a given
document can be obtained using the document.defaultView property. The popular
methods are:
 window.forward();
 window.back();
 window.home();
 window.open(url);
 window.close();
DOM - LOCATION
 The Location interface represents the location (URL) of the object it is linked to. The
mostly used properties are:
 location.href;
 location.protocol;
 location.host;
 location.pathname;
 location.port;
DOM - LOCATION
 The mostly used methods are:
 location.reload();
 location.replace(url);
DOM - SCREEN
 The Screen interface represents a screen, usually the one on which the current window
is being rendered. The mostly used properties are:
 screen.height;
 screen.width;
 screen.top;
 screen.left;
DOM - CSS
 The HTML DOM allows JavaScript to change the style of HTML elements. To change the
style of an HTML element, use this syntax:
document.getElementById(id).style.property=new style;
JAVASCRIPT - 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
 Often, when events happen, you may want to do something. JavaScript lets you
execute code when events are detected.
JAVASCRIPT - EVENTS
 JavaScript can be executed when an event occurs, like when a user clicks on an HTML
element.
 The syntax is:
<some-HTML-element some-event="some JavaScript">
JAVASCRIPT - EVENTS
 The common event elements are:
 onchange
 onclick
 onload
 onkeydown
 onfocus
 onblur
JSON
 JSON stands for JavaScript Object Notation.
 JSON is a format for storing and transporting data.
 JSON format is text only.
 JSON is often used when data is sent from a server to a web page.
 The JSON Format Evaluates to JavaScript Objects.
JSON SYNTAX RULE
 Data is in name/value pairs.
 Data is separated by commas.
 Curly braces hold objects.
 Square brackets hold arrays.
JSON DATA
 JSON data is written as name/value pairs, just like JavaScript object properties.
 A name/value pair consists of a field name (in double quotes), followed by a colon,
followed by a value.
"firstName":"John“
{ "employees":[
{"firstName":“Steve”, "lastName":“Jobs"},
{"firstName":“Tim“, "lastName":“Cook"}
] }
JSON OBJECT
 JSON objects are written inside curly braces.
 Just like in JavaScript, objects can contain multiple name/value pairs.
{"firstName":"John", "lastName":"Doe"}
JSON ARRAY
 JSON arrays are written inside square brackets.
 Just like in JavaScript, an array can contain objects.
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
JSON PARSING
 A common use of JSON is to read data from a web server, and display the data in a
web page.
 We can use the JavaScript built-in function JSON.parse() to convert the string into a
JavaScript object.
var obj = JSON.parse(text);
THANK YOU

More Related Content

What's hot

Functions and Objects in JavaScript
Functions and Objects in JavaScript Functions and Objects in JavaScript
Functions and Objects in JavaScript Dhananjay Kumar
 
12. session 12 java script objects
12. session 12   java script objects12. session 12   java script objects
12. session 12 java script objectsPhúc Đỗ
 
jQuery. Write less. Do More.
jQuery. Write less. Do More.jQuery. Write less. Do More.
jQuery. Write less. Do More.Dennis Loktionov
 
Javascript, DOM, browsers and frameworks basics
Javascript, DOM, browsers and frameworks basicsJavascript, DOM, browsers and frameworks basics
Javascript, DOM, browsers and frameworks basicsNet7
 
Xsd restrictions, xsl elements, dhtml
Xsd restrictions, xsl elements, dhtmlXsd restrictions, xsl elements, dhtml
Xsd restrictions, xsl elements, dhtmlAMIT VIRAMGAMI
 
11. session 11 functions and objects
11. session 11   functions and objects11. session 11   functions and objects
11. session 11 functions and objectsPhúc Đỗ
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQueryZeeshan Khan
 
Easy data-with-spring-data-jpa
Easy data-with-spring-data-jpaEasy data-with-spring-data-jpa
Easy data-with-spring-data-jpaStaples
 

What's hot (20)

Functions and Objects in JavaScript
Functions and Objects in JavaScript Functions and Objects in JavaScript
Functions and Objects in JavaScript
 
Jquery
JqueryJquery
Jquery
 
12. session 12 java script objects
12. session 12   java script objects12. session 12   java script objects
12. session 12 java script objects
 
jQuery. Write less. Do More.
jQuery. Write less. Do More.jQuery. Write less. Do More.
jQuery. Write less. Do More.
 
Json
JsonJson
Json
 
Session 09 - OOPS
Session 09 - OOPSSession 09 - OOPS
Session 09 - OOPS
 
Javascript, DOM, browsers and frameworks basics
Javascript, DOM, browsers and frameworks basicsJavascript, DOM, browsers and frameworks basics
Javascript, DOM, browsers and frameworks basics
 
Spring Data JPA
Spring Data JPASpring Data JPA
Spring Data JPA
 
Xsd restrictions, xsl elements, dhtml
Xsd restrictions, xsl elements, dhtmlXsd restrictions, xsl elements, dhtml
Xsd restrictions, xsl elements, dhtml
 
11. session 11 functions and objects
11. session 11   functions and objects11. session 11   functions and objects
11. session 11 functions and objects
 
Reversing JavaScript
Reversing JavaScriptReversing JavaScript
Reversing JavaScript
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
Jscript part2
Jscript part2Jscript part2
Jscript part2
 
Java Script Basics
Java Script BasicsJava Script Basics
Java Script Basics
 
Ajax
AjaxAjax
Ajax
 
jQuery
jQueryjQuery
jQuery
 
Easy data-with-spring-data-jpa
Easy data-with-spring-data-jpaEasy data-with-spring-data-jpa
Easy data-with-spring-data-jpa
 
Jquery 2
Jquery 2Jquery 2
Jquery 2
 
jQuery Introduction
jQuery IntroductionjQuery Introduction
jQuery Introduction
 
jQuery
jQueryjQuery
jQuery
 

Similar to Cordova training : Day 4 - Advanced Javascript

Web Development Introduction to jQuery
Web Development Introduction to jQueryWeb Development Introduction to jQuery
Web Development Introduction to jQueryLaurence Svekis ✔
 
INTRODUCTION TO CLIENT SIDE PROGRAMMING
INTRODUCTION TO CLIENT SIDE PROGRAMMINGINTRODUCTION TO CLIENT SIDE PROGRAMMING
INTRODUCTION TO CLIENT SIDE PROGRAMMINGProf Ansari
 
HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPT
HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPTHSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPT
HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPTAAFREEN SHAIKH
 
Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02Sopheak Sem
 
Document Object Model (DOM)
Document Object Model (DOM)Document Object Model (DOM)
Document Object Model (DOM)GOPAL BASAK
 
Oop features java presentationshow
Oop features java presentationshowOop features java presentationshow
Oop features java presentationshowilias ahmed
 
JavaScript Workshop
JavaScript WorkshopJavaScript Workshop
JavaScript WorkshopPamela Fox
 
Javascript Templating
Javascript TemplatingJavascript Templating
Javascript Templatingbcruhl
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingeXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingHoat Le
 
JavaScript - Chapter 8 - Objects
 JavaScript - Chapter 8 - Objects JavaScript - Chapter 8 - Objects
JavaScript - Chapter 8 - ObjectsWebStackAcademy
 

Similar to Cordova training : Day 4 - Advanced Javascript (20)

Web Development Introduction to jQuery
Web Development Introduction to jQueryWeb Development Introduction to jQuery
Web Development Introduction to jQuery
 
Javascript.ppt
Javascript.pptJavascript.ppt
Javascript.ppt
 
INTRODUCTION TO CLIENT SIDE PROGRAMMING
INTRODUCTION TO CLIENT SIDE PROGRAMMINGINTRODUCTION TO CLIENT SIDE PROGRAMMING
INTRODUCTION TO CLIENT SIDE PROGRAMMING
 
JS basics
JS basicsJS basics
JS basics
 
HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPT
HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPTHSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPT
HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPT
 
JavsScript OOP
JavsScript OOPJavsScript OOP
JavsScript OOP
 
J Query
J QueryJ Query
J Query
 
Dom
Dom Dom
Dom
 
Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02
 
Understanding XML DOM
Understanding XML DOMUnderstanding XML DOM
Understanding XML DOM
 
Document Object Model (DOM)
Document Object Model (DOM)Document Object Model (DOM)
Document Object Model (DOM)
 
Jquery beltranhomewrok
Jquery beltranhomewrokJquery beltranhomewrok
Jquery beltranhomewrok
 
Jquery beltranhomewrok
Jquery beltranhomewrokJquery beltranhomewrok
Jquery beltranhomewrok
 
Oop features java presentationshow
Oop features java presentationshowOop features java presentationshow
Oop features java presentationshow
 
JavaScript Workshop
JavaScript WorkshopJavaScript Workshop
JavaScript Workshop
 
Oop java
Oop javaOop java
Oop java
 
Javascript Templating
Javascript TemplatingJavascript Templating
Javascript Templating
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingeXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction Training
 
JavaScript - Chapter 8 - Objects
 JavaScript - Chapter 8 - Objects JavaScript - Chapter 8 - Objects
JavaScript - Chapter 8 - Objects
 
Introduction to JSON
Introduction to JSONIntroduction to JSON
Introduction to JSON
 

More from Binu Paul

Cordova training - Day 9 - SQLITE
Cordova training - Day 9 - SQLITECordova training - Day 9 - SQLITE
Cordova training - Day 9 - SQLITEBinu Paul
 
Cordova training - Day 8 - REST API's
Cordova training - Day 8 - REST API'sCordova training - Day 8 - REST API's
Cordova training - Day 8 - REST API'sBinu Paul
 
Cordova training - Day 7 - Form data processing
Cordova training - Day 7 - Form data processingCordova training - Day 7 - Form data processing
Cordova training - Day 7 - Form data processingBinu Paul
 
Cordova training : Cordova plugins
Cordova training : Cordova pluginsCordova training : Cordova plugins
Cordova training : Cordova pluginsBinu Paul
 
Cordova training : Day 6 - UI development using Framework7
Cordova training : Day 6 - UI development using Framework7Cordova training : Day 6 - UI development using Framework7
Cordova training : Day 6 - UI development using Framework7Binu Paul
 
Cordova training : Day 5 - UI development using Framework7
Cordova training : Day 5 - UI development using Framework7Cordova training : Day 5 - UI development using Framework7
Cordova training : Day 5 - UI development using Framework7Binu Paul
 
Cordova training : Day 3 - Introduction to Javascript
Cordova training : Day 3 - Introduction to JavascriptCordova training : Day 3 - Introduction to Javascript
Cordova training : Day 3 - Introduction to JavascriptBinu Paul
 
Cordova training - Day 3 : Advanced CSS 3
Cordova training - Day 3 : Advanced CSS 3Cordova training - Day 3 : Advanced CSS 3
Cordova training - Day 3 : Advanced CSS 3Binu Paul
 
Cordova training - Day 2 Introduction to CSS 3
Cordova training - Day 2 Introduction to CSS 3Cordova training - Day 2 Introduction to CSS 3
Cordova training - Day 2 Introduction to CSS 3Binu Paul
 
Cordova training : Day 1 : Introduction to Cordova
Cordova training : Day 1 : Introduction to CordovaCordova training : Day 1 : Introduction to Cordova
Cordova training : Day 1 : Introduction to CordovaBinu Paul
 

More from Binu Paul (11)

GIT
GITGIT
GIT
 
Cordova training - Day 9 - SQLITE
Cordova training - Day 9 - SQLITECordova training - Day 9 - SQLITE
Cordova training - Day 9 - SQLITE
 
Cordova training - Day 8 - REST API's
Cordova training - Day 8 - REST API'sCordova training - Day 8 - REST API's
Cordova training - Day 8 - REST API's
 
Cordova training - Day 7 - Form data processing
Cordova training - Day 7 - Form data processingCordova training - Day 7 - Form data processing
Cordova training - Day 7 - Form data processing
 
Cordova training : Cordova plugins
Cordova training : Cordova pluginsCordova training : Cordova plugins
Cordova training : Cordova plugins
 
Cordova training : Day 6 - UI development using Framework7
Cordova training : Day 6 - UI development using Framework7Cordova training : Day 6 - UI development using Framework7
Cordova training : Day 6 - UI development using Framework7
 
Cordova training : Day 5 - UI development using Framework7
Cordova training : Day 5 - UI development using Framework7Cordova training : Day 5 - UI development using Framework7
Cordova training : Day 5 - UI development using Framework7
 
Cordova training : Day 3 - Introduction to Javascript
Cordova training : Day 3 - Introduction to JavascriptCordova training : Day 3 - Introduction to Javascript
Cordova training : Day 3 - Introduction to Javascript
 
Cordova training - Day 3 : Advanced CSS 3
Cordova training - Day 3 : Advanced CSS 3Cordova training - Day 3 : Advanced CSS 3
Cordova training - Day 3 : Advanced CSS 3
 
Cordova training - Day 2 Introduction to CSS 3
Cordova training - Day 2 Introduction to CSS 3Cordova training - Day 2 Introduction to CSS 3
Cordova training - Day 2 Introduction to CSS 3
 
Cordova training : Day 1 : Introduction to Cordova
Cordova training : Day 1 : Introduction to CordovaCordova training : Day 1 : Introduction to Cordova
Cordova training : Day 1 : Introduction to Cordova
 

Recently uploaded

Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Jaydeep Chhasatia
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampVICTOR MAESTRE RAMIREZ
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfTobias Schneck
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorShane Coughlan
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesShyamsundar Das
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?AmeliaSmith90
 
Enterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze IncEnterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze Incrobinwilliams8624
 
Fields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxFields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxJoão Esperancinha
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionsNirav Modi
 
Streamlining Your Application Builds with Cloud Native Buildpacks
Streamlining Your Application Builds  with Cloud Native BuildpacksStreamlining Your Application Builds  with Cloud Native Buildpacks
Streamlining Your Application Builds with Cloud Native BuildpacksVish Abrams
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...OnePlan Solutions
 
Webinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptWebinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptkinjal48
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyRaymond Okyere-Forson
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmonyelliciumsolutionspun
 
ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxAutus Cyber Tech
 
Introduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntroduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntelliSource Technologies
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilVICTOR MAESTRE RAMIREZ
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadIvo Andreev
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeNeo4j
 

Recently uploaded (20)

Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - Datacamp
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS Calculator
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security Challenges
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?
 
Enterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze IncEnterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze Inc
 
Fields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxFields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptx
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspections
 
Streamlining Your Application Builds with Cloud Native Buildpacks
Streamlining Your Application Builds  with Cloud Native BuildpacksStreamlining Your Application Builds  with Cloud Native Buildpacks
Streamlining Your Application Builds with Cloud Native Buildpacks
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
 
Salesforce AI Associate Certification.pptx
Salesforce AI Associate Certification.pptxSalesforce AI Associate Certification.pptx
Salesforce AI Associate Certification.pptx
 
Webinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptWebinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.ppt
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human Beauty
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
 
ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptx
 
Introduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntroduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptx
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-Council
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and Bad
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG time
 

Cordova training : Day 4 - Advanced Javascript

  • 1. CORDOVA TRAINING SESSION: 3 – ADVANCED JAVASCRIPT
  • 2. OBJECTS  JavaScript is an Object Oriented Programming (OOP) language.  Objects are composed of attributes.  If an attribute contains a function, it is considered to be a method.
  • 3. OBJECT PROPERTIES  Object properties can be any of the three primitive data types, or any of the abstract data types, such as another object.  Object properties are usually variables that are used internally in the object's methods, but can also be globally visible variables that are used throughout the page.  The syntax for adding a property to an object is: objectName.objectProperty = propertyValue;
  • 4. OBJECT METHODS  Methods are the functions that let the object do something or let something be done to it.  There is a small difference between a function and a method.  A function is a standalone unit of statements and a method is attached to an object and can be referenced by the this keyword.
  • 5. USER DEFINED OBJECTS  All user-defined objects and built-in objects are descendants of an object called Object.  The new operator is used to create an instance of an object. To create an object, the new operator is followed by the object name method.  The object name method is called a ‘constructor’. var employee = new Object(); var books = new Array("C++", "Perl", "Java"); var day = new Date("August 15, 1947");
  • 6. OBJECT CONSTRUCTOR  A constructor is a function that creates and initializes an object.  JavaScript provides a special constructor function called Object() to build the object. The return value of the Object() constructor is assigned to a variable.  The variable contains a reference to the new object. var book = new Object(); book.subject = “Introduction to JavaScript "; book.author = “Binu Paul";
  • 7. OBJECT METHODS  An object method is created by defining functions with in an object. function book(title, author){ this.title = title; this.author = author; this.addPrice = addPrice; }
  • 8. BUILT-IN OBJECTS  JavaScript has several built-in or native objects. These objects are accessible anywhere in your program and will work the same way in any browser running in any operating system.  Some of the popular objects are:  Date  Math  String  Array
  • 9. DATE OBJECT  The Date object is a datatype built into the JavaScript language. The date methods simply allow you to get and set the year, month, day, hour, minute, second, and millisecond fields of the object  Some of the popular methods are:  getDay();  getMonth();  getFullYear();  getHours();  getMinutes();  getSeconds();
  • 10. MATH OBJECT  The math object provides you properties and methods for mathematical constants and functions. Unlike other global objects, Math is not a constructor.  Some of the popular methods are:  Math.PI;  Math.abs(x);  Math.cos(x);  Math.sin(x);  Math.tan(x);  Math.random();
  • 11. MATH OBJECT  Math.floor(x)  Math.ceil(x);  Math.log(x);  Math.max(x1, x2,…);  Math.min(x1, x2, …);  Math.sqrt(x);  Math.pow(x, y);
  • 12. STRING OBJECT  The String object lets you work with a series of characters; it wraps Javascript's string primitive data type with a number of helper methods.  You can get the length of a sting using length attribute.  Some of the popular methods are:  toUpperCase();  toLowerCase();  substr(startPosition, length);  concat(str1, str2, …);  split(separator, limit);
  • 13. ARRAY OBJECT  The Array object lets you store multiple values in a single variable. It stores a fixed-size sequential collection of elements of the same type.  An array is used to store a collection of data, but it is often more useful to think of an array as a collection of variables of the same type.  We can get the length of array using the length attribute.  Some of the popular methods are:  push(element1, element2, …);  pop();
  • 14. ARRAY OBJECT  reverse();  sort();  shift();  join(seperator);
  • 15. ACCESSING HTML DOM  Every web page resides inside a browser window which can be considered as an object.  DOM stands for Document Object Model.  A Document object represents the HTML document that is displayed in that window. The Document object has various properties that refer to other objects which allow access to and modification of document content.
  • 17. DOM HIERARCHY  Window object − Top of the hierarchy. It is the outmost element of the object hierarchy.  Document object − Each HTML document that gets loaded into a window becomes a document object. The document contains the contents of the page.  Form object − Everything enclosed in the <form>...</form> tags sets the form object.
  • 18. DOM ATTRIBUTES  This DOM model provides several read-only properties, such as title, URL, and lastModified provide information about the document as a whole.  The most popular document properties are:  alinkColor  anchors[ ]
  • 19. DOM ATTRIBUTES  domain  forms[ ]  images[ ]  location  referrer  title  URL
  • 20. DOM METHODS  There are various methods provided by DOM model which can be used to set and get document property values.  document.getElementById(id);  document.getElementsByName(name);  document.getElementsByTagName(tagName);
  • 21. DOM - WINDOW  The window object represents a window containing a DOM document; the document property points to the DOM document loaded in that window. A window for a given document can be obtained using the document.defaultView property. The popular methods are:  window.forward();  window.back();  window.home();  window.open(url);  window.close();
  • 22. DOM - LOCATION  The Location interface represents the location (URL) of the object it is linked to. The mostly used properties are:  location.href;  location.protocol;  location.host;  location.pathname;  location.port;
  • 23. DOM - LOCATION  The mostly used methods are:  location.reload();  location.replace(url);
  • 24. DOM - SCREEN  The Screen interface represents a screen, usually the one on which the current window is being rendered. The mostly used properties are:  screen.height;  screen.width;  screen.top;  screen.left;
  • 25. DOM - CSS  The HTML DOM allows JavaScript to change the style of HTML elements. To change the style of an HTML element, use this syntax: document.getElementById(id).style.property=new style;
  • 26. JAVASCRIPT - 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  Often, when events happen, you may want to do something. JavaScript lets you execute code when events are detected.
  • 27. JAVASCRIPT - EVENTS  JavaScript can be executed when an event occurs, like when a user clicks on an HTML element.  The syntax is: <some-HTML-element some-event="some JavaScript">
  • 28. JAVASCRIPT - EVENTS  The common event elements are:  onchange  onclick  onload  onkeydown  onfocus  onblur
  • 29. JSON  JSON stands for JavaScript Object Notation.  JSON is a format for storing and transporting data.  JSON format is text only.  JSON is often used when data is sent from a server to a web page.  The JSON Format Evaluates to JavaScript Objects.
  • 30. JSON SYNTAX RULE  Data is in name/value pairs.  Data is separated by commas.  Curly braces hold objects.  Square brackets hold arrays.
  • 31. JSON DATA  JSON data is written as name/value pairs, just like JavaScript object properties.  A name/value pair consists of a field name (in double quotes), followed by a colon, followed by a value. "firstName":"John“ { "employees":[ {"firstName":“Steve”, "lastName":“Jobs"}, {"firstName":“Tim“, "lastName":“Cook"} ] }
  • 32. JSON OBJECT  JSON objects are written inside curly braces.  Just like in JavaScript, objects can contain multiple name/value pairs. {"firstName":"John", "lastName":"Doe"}
  • 33. JSON ARRAY  JSON arrays are written inside square brackets.  Just like in JavaScript, an array can contain objects. "employees":[ {"firstName":"John", "lastName":"Doe"}, {"firstName":"Anna", "lastName":"Smith"}, {"firstName":"Peter", "lastName":"Jones"} ]
  • 34. JSON PARSING  A common use of JSON is to read data from a web server, and display the data in a web page.  We can use the JavaScript built-in function JSON.parse() to convert the string into a JavaScript object. var obj = JSON.parse(text);