SlideShare a Scribd company logo
Web creation languages : Jason Learn Jason
JSON - JavaScript Object Notation is a lightweight data-interchange format that is easy for
humans to read and write and easy for machines to parse and generate.
Syntax:
JSON syntax is derived from JavaScript object notation syntax:
Data Types: JSON supports primitive data types like strings, numbers, booleans, and null,
as well as complex data types like arrays and objects.
Format: Data is represented in key-value pairs. Keys must be strings enclosed in double
quotes, and values can be any valid JSON data type.
https://youtu.be/iiADhChRriM?si=y_whC20WOnxNDjco
Introduction to JSON
Web creation languages : Jason Learn Jason
Example:
{
"name": "John Doe",
"age": 30,
"isStudent": false,
"courses": ["Math", "Science"],
"address": {
"city": "New York",
"zipCode": "10001"
}
}
Data Format
Text-Based: JSON data is stored as plain text, making it easy to transmit
and store.
Hierarchy: Supports nested structures using arrays and objects,
allowing complex data relationships to be represented.
Platform Independence: Widely supported across programming
languages and platforms, making it ideal for interoperability.
Use Cases:
JSON is commonly used for:
APIs: Many web APIs use JSON for data interchange between servers and
clients.
Configuration Files: Often used for configuration settings due to its
simplicity and readability.
Data Storage: Storing and transmitting structured data in web applications
and databases.
Serialization: Converting objects into JSON format for transmission or
storage, and deserialization vice versa.
JSON's simplicity, readability, and flexibility make it a popular choice for
exchanging data between systems and applications on the web.
Creating JSON objects in JavaScript involves defining and structuring
data using JavaScript syntax, which closely resembles the JSON format
itself. Here’s how you can create and manage JSON objects, including
nesting and handling complex data structures:
JSON Objects
Basic JSON Object Creation:
You can create a JSON object directly in JavaScript by
defining it as a JavaScript object literal enclosed in curly
braces { }
// Define a JSON object
let person = {
"name": "John Doe",
"age": 30,
"isStudent": false,
"courses": ["Math", "Science"],
"address": {
"city": "New York",
"zipCode": "10001"
}
};
console.log(person);
Managing Nesting:
JSON supports nested objects and arrays, allowing you to
represent hierarchical data structures
// Nested JSON object
let nestedObject = {
"name": "John Doe",
"contacts": [
{
"type": "email",
"value": "john.doe@example.com"
},
{
"type": "phone",
"value": "123-456-7890"
}
],
"address": {
"city": "New York",
"zipCode": "10001"
}
};
Dynamically Creating JSON:
You can dynamically add properties and values to a JSON object using
JavaScript’s object notation
// Dynamic JSON creation
let dynamicObject = {};
dynamicObject.name = "Jane Smith";
dynamicObject.age = 25;
dynamicObject.skills = ["JavaScript",
"HTML", "CSS"];
dynamicObject.address = {
"city": "San Francisco",
"zipCode": "94105"
};
console.log(dynamicObject);
Complex Data Structures:
JSON in JavaScript can handle complex data structures such as arrays of
objects or nested objects within arrays
// Complex JSON structure
let complexData = {
"employees": [
{
"name": "Alice",
"department": "Engineering",
"skills": ["JavaScript", "Python"]
},
{
"name": "Bob",
"department": "Marketing",
"skills": ["SEO", "Social Media"]
}
],
"company": {
"name": "TechCo",
"location": "San Francisco"
}
};
console.log(complexData);
Stringification
To convert a JavaScript object into a JSON string for transmission or
storage, use
JSON.stringify():
let jsonString =
JSON.stringify(complexData);
console.log(jsonString);
Parsing JSON:
To convert a JSON string back into a JavaScript object, use
JSON.parse():
let parsedObject = JSON.parse(jsonString);
console.log(parsedObject);
This covers the basics of creating, managing nesting, and handling complex data
structures with JSON objects in JavaScript, essential for web development and data
interchange scenarios.
Document Object Model (DOM) Manipulation
The DOM is:
Structured Representation: It represents the structure of a document as a tree of
objects, where each object corresponds to a part of the document.
Platform- and Language-Neutral: It provides a platform-neutral and language-neutral
interface, meaning it allows programs and scripts to dynamically access and update
the content, structure, and style of documents.
Dynamic: It allows JavaScript and other scripting languages to interact with the
structure and content of web pages, enabling dynamic updates and changes without
needing to reload the entire page.
Hierarchy: Elements in the document (such as elements, attributes, and text) are
organized in a hierarchical tree structure. Each node in the tree represents an object
corresponding to a part of the document.
DOM Manipulation:
DOM manipulation refers to the process of accessing or modifying
elements within the DOM tree using programming languages like
JavaScript. Developers commonly use DOM manipulation to
Update Content: Change text or attributes of elements.
Modify Structure: Add or remove elements dynamically.
Respond to Events: Attach event listeners to elements to respond to user
actions (e.g., clicks, inputs).
Animate Elements: Change CSS styles or properties to create animations
or transitions.
Example:
A basic example of how DOM manipulation works in JavaScript
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation Example</title>
<script>
// JavaScript for DOM manipulation
document.addEventListener("DOMContentLoaded", function() {
// Find an element by id
let header = document.getElementById("main-header");
// Change its text content
header.textContent = "Updated Header";
// Create a new element
let newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
// Append it to the document
document.body.appendChild(newParagraph);
});
</script>
</head>
<body>
<h1 id="main-header">Original Header</h1>
</body>
</html>
In this example:
JavaScript accesses the <h1> element with id="main-header".
It changes the text content of this element.
It creates a new <p> element and appends it to the <body> of the document.
DOM manipulation is fundamental for creating interactive web
pages and web applications, allowing developers to dynamically
update and interact with page content based on user actions or
application logic.
Event Handling:
Adding Event Listeners:
Use addEventListener() method to attach event handlers to elements.
Syntax: element.addEventListener(eventType, handlerFunction);
const button =
document.getElementById('myButton');
button.addEventListener('click',
function(event) {
// Handle click event
});
Handling Events:
Common events include click, submit, keypress, etc.
Each event type triggers specific actions or behaviours.
Event Object and Event Propagation:
Accessing Event Properties:
Use the event object to access information about the event.
Example properties: event.target, event.preventDefault(), event.stopPropagation().
Understanding Event Propagation:
Event Bubbling: Events bubble up from the target element through
its ancestors.
Event Capturing: Events propagate down from the document root
to the target element.
AJAX (Asynchronous JavaScript and XML)
Introduction to AJAX:
Asynchronous Nature of JavaScript Requests:
Allows web pages to dynamically update content without reloading the entire page.
Enhances user experience by providing smoother and faster interactions.
Evolution from Traditional Synchronous Requests:
Traditional synchronous requests block the browser until the request completes.
AJAX enables asynchronous requests, allowing other operations to continue while waiting
for the response.
XMLHttpRequest Object:
Creating and Configuring XMLHttpRequest:
Core object for making asynchronous requests in JavaScript.
Methods: open(), send(), abort().
https://youtu.be/tNKD0kfel6o?si=OHECiO6EWKXb24er
Example
let xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.send();
Sending GET and POST Requests:
GET requests retrieve data from a server.
POST requests send data to a server for processing.
Fetch API:
Modern Approach to AJAX with Fetch API:
Simplifies fetching resources asynchronously.
Returns a Promise that resolves to the response to the request.
Example:
fetch('data.json')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching data:', error));
Handling JSON Responses and Error Management:
Fetch API automatically parses JSON responses.
Handle errors using .catch() to manage network issues or failed requests.
Handling AJAX Responses
Using Callbacks, Promises (then, catch), and async/await:
Callbacks: Traditional approach for handling asynchronous operations.
Promises: Provides cleaner syntax for chaining asynchronous operations (then, catch).
Async/Await: Modern ES8 feature for synchronously writing asynchronous code.
Examples of Retrieving and Displaying Data Asynchronously:
Demonstrate fetching data from an API and updating the DOM dynamically based on the retrieved
data.
Web creation languages : Jason Learn Jason
Web creation languages : Jason Learn Jason

More Related Content

PPTX
Jason programming object oriented programming it- Updated.pptx
devmith2005
 
PDF
JavaScript Lessons 2023 V2
Laurence Svekis ✔
 
PPTX
JSON & AJAX.pptx
dyumna2
 
PPTX
Cordova training : Day 4 - Advanced Javascript
Binu Paul
 
PDF
22519 - Client-Side Scripting Language (CSS) chapter 1 notes .pdf
sharvaridhokte
 
PPTX
JSON
Yoga Raja
 
PPT
Reversing JavaScript
Roberto Suggi Liverani
 
PPTX
Javascript for web Programming creating and embedding with html
E.M.G.yadava womens college
 
Jason programming object oriented programming it- Updated.pptx
devmith2005
 
JavaScript Lessons 2023 V2
Laurence Svekis ✔
 
JSON & AJAX.pptx
dyumna2
 
Cordova training : Day 4 - Advanced Javascript
Binu Paul
 
22519 - Client-Side Scripting Language (CSS) chapter 1 notes .pdf
sharvaridhokte
 
JSON
Yoga Raja
 
Reversing JavaScript
Roberto Suggi Liverani
 
Javascript for web Programming creating and embedding with html
E.M.G.yadava womens college
 

Similar to Web creation languages : Jason Learn Jason (20)

PPTX
Introduction to java script, how to include java in HTML
backiyalakshmi14
 
PPTX
Java script
Adrian Caetano
 
PPTX
javaScript and jQuery
Mehrab Hossain
 
PDF
Intro to JSON
George McKinney
 
PDF
Basics of JSON (JavaScript Object Notation) with examples
Sanjeev Kumar Jaiswal
 
PDF
HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPT
AAFREEN SHAIKH
 
PDF
Basics of JavaScript
Bala Narayanan
 
PDF
Fundamental Node.js (Workshop bersama Front-end Developer GITS Indonesia, War...
GITS Indonesia
 
PPTX
module 2.pptx for full stack mobile development application on backend applic...
HemaSenthil5
 
PPT
Introduction to Javascript
Amit Tyagi
 
PPT
Introduction to mean and mern || Event by DSC UNIDEB
Muhammad Raza
 
PDF
full javascript Book by Abhishek singh.pdf
AbhishekSingh961152
 
PPTX
An introduction to DOM , JAVASCRIPT , JQUERY, AJAX and JSON
Syed Moosa Kaleem
 
PPTX
Javascript note for engineering notes.pptx
engineeradda55
 
PPT
jQuery with javascript training by Technnovation Labs
Prasad Shende
 
PDF
Javascript: the important bits
Chris Saylor
 
PPTX
Web Development Study Jam #2 _ Basic JavaScript.pptx
SekarMaduKusumawarda1
 
PDF
Introduction to JavaScript Object Notation, Lindsay Bassett, 2015
Alaz Tetik
 
PDF
GDG-USAR Tech winter break 2024 USAR.pdf
raiaryan174
 
Introduction to java script, how to include java in HTML
backiyalakshmi14
 
Java script
Adrian Caetano
 
javaScript and jQuery
Mehrab Hossain
 
Intro to JSON
George McKinney
 
Basics of JSON (JavaScript Object Notation) with examples
Sanjeev Kumar Jaiswal
 
HSC INFORMATION TECHNOLOGY CHAPTER 3 ADVANCED JAVASCRIPT
AAFREEN SHAIKH
 
Basics of JavaScript
Bala Narayanan
 
Fundamental Node.js (Workshop bersama Front-end Developer GITS Indonesia, War...
GITS Indonesia
 
module 2.pptx for full stack mobile development application on backend applic...
HemaSenthil5
 
Introduction to Javascript
Amit Tyagi
 
Introduction to mean and mern || Event by DSC UNIDEB
Muhammad Raza
 
full javascript Book by Abhishek singh.pdf
AbhishekSingh961152
 
An introduction to DOM , JAVASCRIPT , JQUERY, AJAX and JSON
Syed Moosa Kaleem
 
Javascript note for engineering notes.pptx
engineeradda55
 
jQuery with javascript training by Technnovation Labs
Prasad Shende
 
Javascript: the important bits
Chris Saylor
 
Web Development Study Jam #2 _ Basic JavaScript.pptx
SekarMaduKusumawarda1
 
Introduction to JavaScript Object Notation, Lindsay Bassett, 2015
Alaz Tetik
 
GDG-USAR Tech winter break 2024 USAR.pdf
raiaryan174
 
Ad

Recently uploaded (20)

PPTX
3. Introduction to Materials and springs.pptx
YESIMSMART
 
PDF
SS27 Women's Fashion Trend Book Peclers Paris
Peclers Paris
 
PPTX
佛罗伦萨大学文凭办理|办理UNIFI毕业证学费单购买文凭在线制作
1cz3lou8
 
PDF
AUB Collaborative Book Project - Keiko Toyoda
keikotrush02
 
PPTX
UCSP-Ppt-Lesson-7 Powe point Presentation
EmyMaquiling1
 
PDF
Unlimited G+12 Dubai DM exam questions for contractor
saniyashaik2089
 
PDF
10 Best UI UX Design Company in UK for User-Centric Solutions
Tenet UI UX
 
PPTX
Landscape assignment for historical garden
aditikoshley2
 
PPTX
Introduction-to-Graphic-Design-and-Adobe-Photoshop.pptx
abdullahedpk
 
PDF
Zidane ben hmida _ Portfolio
Zidane Ben Hmida
 
PDF
Shape Language for Character Design by Adhec Saputra
Adhec Saputra
 
PDF
Fashion project1 kebaya reimagined slideshow
reysultane
 
PPTX
Brown Beige Vintage Style History Project Presentation.pptx
mb3030336
 
DOCX
prepare sandwiches COOKERY.docx123456789
venuzjoyetorma1998
 
DOCX
Personalized Jewellery Guide: Engraved Rings, Initial Necklaces & Birthstones...
Dishis jewels
 
PPTX
MALURI KISHORE-.pptxdsrhbcdsfvvghhhggggfff
sakthick46
 
PDF
Portfolio Arch Estsabel Chourio - Interiorism,
arqeech
 
PPTX
Style and aesthetic about fashion lifestyle
Khushi Bera
 
PPTX
UCSP-Quarter 1-Week 6-Powerpoint Presentation
EmyMaquiling1
 
PPTX
Template of Different Slide Designs to Use
kthomas47
 
3. Introduction to Materials and springs.pptx
YESIMSMART
 
SS27 Women's Fashion Trend Book Peclers Paris
Peclers Paris
 
佛罗伦萨大学文凭办理|办理UNIFI毕业证学费单购买文凭在线制作
1cz3lou8
 
AUB Collaborative Book Project - Keiko Toyoda
keikotrush02
 
UCSP-Ppt-Lesson-7 Powe point Presentation
EmyMaquiling1
 
Unlimited G+12 Dubai DM exam questions for contractor
saniyashaik2089
 
10 Best UI UX Design Company in UK for User-Centric Solutions
Tenet UI UX
 
Landscape assignment for historical garden
aditikoshley2
 
Introduction-to-Graphic-Design-and-Adobe-Photoshop.pptx
abdullahedpk
 
Zidane ben hmida _ Portfolio
Zidane Ben Hmida
 
Shape Language for Character Design by Adhec Saputra
Adhec Saputra
 
Fashion project1 kebaya reimagined slideshow
reysultane
 
Brown Beige Vintage Style History Project Presentation.pptx
mb3030336
 
prepare sandwiches COOKERY.docx123456789
venuzjoyetorma1998
 
Personalized Jewellery Guide: Engraved Rings, Initial Necklaces & Birthstones...
Dishis jewels
 
MALURI KISHORE-.pptxdsrhbcdsfvvghhhggggfff
sakthick46
 
Portfolio Arch Estsabel Chourio - Interiorism,
arqeech
 
Style and aesthetic about fashion lifestyle
Khushi Bera
 
UCSP-Quarter 1-Week 6-Powerpoint Presentation
EmyMaquiling1
 
Template of Different Slide Designs to Use
kthomas47
 
Ad

Web creation languages : Jason Learn Jason

  • 2. JSON - JavaScript Object Notation is a lightweight data-interchange format that is easy for humans to read and write and easy for machines to parse and generate. Syntax: JSON syntax is derived from JavaScript object notation syntax: Data Types: JSON supports primitive data types like strings, numbers, booleans, and null, as well as complex data types like arrays and objects. Format: Data is represented in key-value pairs. Keys must be strings enclosed in double quotes, and values can be any valid JSON data type. https://youtu.be/iiADhChRriM?si=y_whC20WOnxNDjco Introduction to JSON
  • 4. Example: { "name": "John Doe", "age": 30, "isStudent": false, "courses": ["Math", "Science"], "address": { "city": "New York", "zipCode": "10001" } }
  • 5. Data Format Text-Based: JSON data is stored as plain text, making it easy to transmit and store. Hierarchy: Supports nested structures using arrays and objects, allowing complex data relationships to be represented. Platform Independence: Widely supported across programming languages and platforms, making it ideal for interoperability.
  • 6. Use Cases: JSON is commonly used for: APIs: Many web APIs use JSON for data interchange between servers and clients. Configuration Files: Often used for configuration settings due to its simplicity and readability. Data Storage: Storing and transmitting structured data in web applications and databases. Serialization: Converting objects into JSON format for transmission or storage, and deserialization vice versa. JSON's simplicity, readability, and flexibility make it a popular choice for exchanging data between systems and applications on the web.
  • 7. Creating JSON objects in JavaScript involves defining and structuring data using JavaScript syntax, which closely resembles the JSON format itself. Here’s how you can create and manage JSON objects, including nesting and handling complex data structures: JSON Objects
  • 8. Basic JSON Object Creation: You can create a JSON object directly in JavaScript by defining it as a JavaScript object literal enclosed in curly braces { } // Define a JSON object let person = { "name": "John Doe", "age": 30, "isStudent": false, "courses": ["Math", "Science"], "address": { "city": "New York", "zipCode": "10001" } }; console.log(person);
  • 9. Managing Nesting: JSON supports nested objects and arrays, allowing you to represent hierarchical data structures // Nested JSON object let nestedObject = { "name": "John Doe", "contacts": [ { "type": "email", "value": "[email protected]" }, { "type": "phone", "value": "123-456-7890" } ], "address": { "city": "New York", "zipCode": "10001" } };
  • 10. Dynamically Creating JSON: You can dynamically add properties and values to a JSON object using JavaScript’s object notation // Dynamic JSON creation let dynamicObject = {}; dynamicObject.name = "Jane Smith"; dynamicObject.age = 25; dynamicObject.skills = ["JavaScript", "HTML", "CSS"]; dynamicObject.address = { "city": "San Francisco", "zipCode": "94105" }; console.log(dynamicObject);
  • 11. Complex Data Structures: JSON in JavaScript can handle complex data structures such as arrays of objects or nested objects within arrays // Complex JSON structure let complexData = { "employees": [ { "name": "Alice", "department": "Engineering", "skills": ["JavaScript", "Python"] }, { "name": "Bob", "department": "Marketing", "skills": ["SEO", "Social Media"] } ], "company": { "name": "TechCo", "location": "San Francisco" } }; console.log(complexData);
  • 12. Stringification To convert a JavaScript object into a JSON string for transmission or storage, use JSON.stringify(): let jsonString = JSON.stringify(complexData); console.log(jsonString);
  • 13. Parsing JSON: To convert a JSON string back into a JavaScript object, use JSON.parse(): let parsedObject = JSON.parse(jsonString); console.log(parsedObject); This covers the basics of creating, managing nesting, and handling complex data structures with JSON objects in JavaScript, essential for web development and data interchange scenarios.
  • 14. Document Object Model (DOM) Manipulation The DOM is: Structured Representation: It represents the structure of a document as a tree of objects, where each object corresponds to a part of the document. Platform- and Language-Neutral: It provides a platform-neutral and language-neutral interface, meaning it allows programs and scripts to dynamically access and update the content, structure, and style of documents. Dynamic: It allows JavaScript and other scripting languages to interact with the structure and content of web pages, enabling dynamic updates and changes without needing to reload the entire page. Hierarchy: Elements in the document (such as elements, attributes, and text) are organized in a hierarchical tree structure. Each node in the tree represents an object corresponding to a part of the document.
  • 15. DOM Manipulation: DOM manipulation refers to the process of accessing or modifying elements within the DOM tree using programming languages like JavaScript. Developers commonly use DOM manipulation to Update Content: Change text or attributes of elements. Modify Structure: Add or remove elements dynamically. Respond to Events: Attach event listeners to elements to respond to user actions (e.g., clicks, inputs). Animate Elements: Change CSS styles or properties to create animations or transitions.
  • 16. Example: A basic example of how DOM manipulation works in JavaScript <!DOCTYPE html> <html> <head> <title>DOM Manipulation Example</title> <script> // JavaScript for DOM manipulation document.addEventListener("DOMContentLoaded", function() { // Find an element by id let header = document.getElementById("main-header"); // Change its text content header.textContent = "Updated Header"; // Create a new element let newParagraph = document.createElement("p"); newParagraph.textContent = "This is a new paragraph."; // Append it to the document document.body.appendChild(newParagraph); }); </script> </head> <body> <h1 id="main-header">Original Header</h1> </body> </html>
  • 17. In this example: JavaScript accesses the <h1> element with id="main-header". It changes the text content of this element. It creates a new <p> element and appends it to the <body> of the document. DOM manipulation is fundamental for creating interactive web pages and web applications, allowing developers to dynamically update and interact with page content based on user actions or application logic.
  • 18. Event Handling: Adding Event Listeners: Use addEventListener() method to attach event handlers to elements. Syntax: element.addEventListener(eventType, handlerFunction); const button = document.getElementById('myButton'); button.addEventListener('click', function(event) { // Handle click event }); Handling Events: Common events include click, submit, keypress, etc. Each event type triggers specific actions or behaviours.
  • 19. Event Object and Event Propagation: Accessing Event Properties: Use the event object to access information about the event. Example properties: event.target, event.preventDefault(), event.stopPropagation(). Understanding Event Propagation: Event Bubbling: Events bubble up from the target element through its ancestors. Event Capturing: Events propagate down from the document root to the target element.
  • 20. AJAX (Asynchronous JavaScript and XML) Introduction to AJAX: Asynchronous Nature of JavaScript Requests: Allows web pages to dynamically update content without reloading the entire page. Enhances user experience by providing smoother and faster interactions. Evolution from Traditional Synchronous Requests: Traditional synchronous requests block the browser until the request completes. AJAX enables asynchronous requests, allowing other operations to continue while waiting for the response. XMLHttpRequest Object: Creating and Configuring XMLHttpRequest: Core object for making asynchronous requests in JavaScript. Methods: open(), send(), abort(). https://youtu.be/tNKD0kfel6o?si=OHECiO6EWKXb24er
  • 21. Example let xhr = new XMLHttpRequest(); xhr.open('GET', 'data.json', true); xhr.send(); Sending GET and POST Requests: GET requests retrieve data from a server. POST requests send data to a server for processing.
  • 22. Fetch API: Modern Approach to AJAX with Fetch API: Simplifies fetching resources asynchronously. Returns a Promise that resolves to the response to the request. Example: fetch('data.json') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error fetching data:', error)); Handling JSON Responses and Error Management: Fetch API automatically parses JSON responses. Handle errors using .catch() to manage network issues or failed requests.
  • 23. Handling AJAX Responses Using Callbacks, Promises (then, catch), and async/await: Callbacks: Traditional approach for handling asynchronous operations. Promises: Provides cleaner syntax for chaining asynchronous operations (then, catch). Async/Await: Modern ES8 feature for synchronously writing asynchronous code. Examples of Retrieving and Displaying Data Asynchronously: Demonstrate fetching data from an API and updating the DOM dynamically based on the retrieved data.

Editor's Notes

  • #22: Handling JSON Responses and Error Management: Fetch API automatically parses JSON responses. Handle errors using .catch() to manage network issues or failed requests.