Introduction to JavaScript DOM and User Input.pptx

Introduction to JavaScript DOM and User Input.pptx

• 1.
  INTRODUCTION TO JAVASCRIPT DOMAND USER INPUT By Gevita Chinnaiah
• 2.
  OVERVIEW  Introduction toJavaScript  What the DOM is  Importance of handling user input
• 3.
  INTRODUCTION TO JAVASCRIPT JavaScript is a popular programming language that is primarily used to create interactive and dynamic features on websites.  JavaScript has grown into a powerful tool used in many different contexts, including server-side programming, mobile app development, and even desktop applications.
• 4.
  WHAT IS THEDOM?  The Document Object Model (DOM) is a programming interface provided by browsers that allows scripts to dynamically access and update the content, structure, and style of a document.  DOM represents an HTML (or XML) document as a tree structure wherein each node is an object representing a part of the document
• 5.
  DOM REPRESENTS ANHTML DOCUMENT
• 6.
  WHY MANIPULATE THEDOM?  Manipulating the Document Object Model (DOM) is a Important aspect of creating interactive and dynamic web applications.  Dynamic Content Updates  Real-time Interactions  User Feedback:  Interactive User Interfaces (UIs)  Rich Interactions  Personalization  Accessibility Enhancements
• 7.
  ACCESSING THE DOM The Document Object Model (DOM) is a programming interface that allows scripts to update the content, structure, and style of a document.  DOM provides a structured representation of the HTML or XML document  JavaScript interacts with the DOM to dynamically manipulate web pages. ‘document’
• 8.
  METHODS FOR ACCESSING ELEMENTS getElementById(id):  Usage: document.getElementById('header').  Returns: The first element with the given ID, or null if no such element exists.  getElementsByClassName(className):  Usage: document.getElementsByClassName('active').  Returns: A live HTMLCollection of elements with the given class names. It updates automatically when elements are added or removed.  querySelector(selector):  Usage: document.querySelector('.menu-item') for classes, document.querySelector('#menu') for IDs, or document.querySelector('div') for tags.  Returns: The first element that matches the specified CSS selector, or null if no matches are found.
• 9.
  ADVANCED SELECTION WITH QUERYSELECTORALL Method  querySelectorAll(selector)  Purpose  Similar to querySelector, but selects all elements that match the specified CSS selector.  Usage  document.querySelectorAll('.highlight').  Returns  A static NodeList containing all the elements that match the selector. Unlike HTMLCollection, NodeList does not update automatically.
• 10.
  COMMON DOM METHODS 1. innerHTML  Example: element.innerHTML = "<strong>Hello World!</strong>"; sets the inner HTML of the element to include a bolded "Hello World".  2. textContent  Example: element.textContent = "Hello World"; updates the text within an element, removing any existing HTML or text formatting.  3. createElement  Example: var newDiv = document.createElement('div'); creates a new <div> element which can later be added to the DOM.  4. appendChild  Example: document.body.appendChild(newDiv); adds the previously created <div> element to the body of the document.  5. removeChild  Example: document.body.removeChild(existingDiv); removes the specified existingDiv element from the body of the document.
• 11.
  USER EVENTS INJAVASCRIPT  In JavaScript, events are actions or occurrences that happen in the browser, often as a result of user interaction or system-generated triggers  Common Event Types:  Click Event  Load Event  Input Event  Submit Event  Mouse Events (e.g., mouseover, mouseout)
• 12.
  EVENT LISTENERS  Eventlisteners in JavaScript are used to respond to various events that occur on HTML elements, such as clicks, mouse movements, keypresses, form submissions.  The addEventListener method is a basic tool for attaching event listeners to elements in the DOM.
• 13.
  EVENT LISTENERS AND ADDEVENTLISTENER Event listeners allow JavaScript to "listen" for specific events on HTML elements and execute code in response to those events.  The addEventListener method is used to register event handlers on HTML elements.  Syntax of addEventListener:
• 14.
  ADDING AN EVENTLISTENER TO A BUTTON  Consider an HTML button element with the id "myButton":  use addEventListener to attach a click event listener.
• 15.
  HANDLING FORM INPUT Handling form input in JavaScript involves capturing user input from HTML form elements and responding to user actions such as typing or selecting options.  Input  Change events.
• 16.
  INPUT EVENT  Theinput event is triggered whenever the value of an input field changes.
• 17.
  CHANGE EVENT  Thechange event is triggered when the value of an input field changes and then the element loses focus.
• 18.
  PRACTICAL EXAMPLE: INTERACTIVE FORM 1.Dynamic Form Validation 2. Live Character Count 3. Dropdown Selection
• 19.
  THANK YOU