Functions
- What is a function?
- Pre-defined functions
- Scope of Variables
- Function Expressions
- Anonymous Functions
- Callback Functions
Objects
- What is an object?
- Accessing Object Properties
- Calling an Object’s Methods
- Altering Properties/Methods
Array Properties and Methods
- The length property
- Stack Methods
- Queue Methods
- Reordering Methods
- Manipulation Methods
- Location Methods
- Iterative Methods
- Working with array of objects
DOM
- The Document Object Model
- Node Relationships
- Working with the Contents of Elements
- Getting Elements by ID, Tag Name, or Class
- Adding and removing element
Built-in Objects
Using Events in JavaScript
Handling Input and Output
Ajax and JSON
Web pages are much more than just static displays of text and graphics. JavaScript gives web pages interactivity and the ability to perform useful work. An important part of JavaScript’s ability to perform useful functions in the browser is its ability to respond to events.
Events are the things that happen within the browser (such as a page loading) and things the user does (such as clicking, pressing keys on the keyboard, moving the mouse, and so on). Events happen all the time in the browser. The HTML DOM gives JavaScript the ability to identify and respond to events in a web browser. Responding to events is known as event handling. Event handling lets us decide what needs to be done when these events occur.
Some of the common types of events in JavaScript are:
- Mouse events.
- Keyboard events.
- Form events.
- Window events.
Mouse events
Mouse events occur whenever we interact with the HTML document with the mouse. For example, click, double click, mouseover, mouseenter, mouseleave, mousemove etc.
Lets go through some of these mouse events below.
click: The click event occurs when we click on a HTML element with the mouse or touchpad. Whenever we click on any buttons or tabs, this click event is fired.
dblclick: The dblclick event occurs when we double click on any element.
mouseover: The mouseover event occurs when we hover the mouse pointer over any element.
mouseenter: The mouseenter event occurs when the mouse pointer enters onto an element.
mouseleave: The mouseleave event occurs when the mouse pointer moves out of an element.
mousemove: The mousemove event occurs whenever the mouse pointer moves.
contextmenu: The contextmenu event occurs whenever we right click on any element.
Keyboard events
Keyboard events occur whenever we perform key actions on the keyboard. There are three keyboard events:
keypress: The keypress event occurs whenever we press a key on the keyboard.
keydown: The keydown event occurs whenever we press down a key on the keyboard.
keyup: The keyup event occurs whenever we release a key on the keyboard.
Form events
Form events occur when we perform actions on HTML forms. Below are the form events:
submit: The submit event occurs when we submit a form by clicking on a submit button(<button> or <input type=”submit”>).
reset: The reset event occurs when we reset the form by clicking on a reset button(<button> or <input type=”reset”>)
Window events
Window events are various events that can happen in a particular window like scrolling the page, resizing the window etc. Examples:
scroll: The scroll event occurs when we scroll the window by any means like using the mouse scroll wheel or dragging the scrollbar.
resize: The resize event occurs when we resize(increase or decrease the size) the window.
load: The load event occurs when the whole page is fully loaded, including all resources(scripts, stylesheets etc.) and the DOM for a particular window.
We will discuss how to handle these events in the next section.