Hello, World!
I'm learning JavaScript
Hello, World!
I'm learning JavaScript
first paragraph
second paragraph
I am a paragraph
+ ``` ```js @@ -151,6 +197,8 @@ const para = document.getElementById("para"); para.setAttribute("class", "my-class"); ``` +::: + ## Event Object - **Definition**: The `Event` object is a payload that triggers when a user interacts with your web page in some way. These interactions can be anything from clicking on a button or focusing an input to shaking their mobile device. All `Event` objects will have the `type` property. This property reveals the type of event that triggered the payload, such as keydown or click. These values will correspond to the same values you might pass to `addEventListener()`, where you can capture and utilize the `Event` object. @@ -159,14 +207,33 @@ para.setAttribute("class", "my-class"); - **`addEventListener` Method**: This method is used to listen for events. It takes two arguments: the event you want to listen for and a function that will be called when the event occurs. Some common examples of events would be click events, input events, and change events. +:::interactive_editor + +```html + + +``` + ```js const btn = document.getElementById("btn"); btn.addEventListener("click", () => alert("You clicked the button")); ``` +::: + - **`removeEventListener()` Method**: This method is used to remove an event listener that was previously added to an element using the `addEventListener()` method. This is useful when you want to stop listening for a particular event on an element. +:::interactive_editor + +```html + +Hover over me to disable the button's click event
+ + + +``` + ```js const bodyEl = document.querySelector("body"); const para = document.getElementById("para"); @@ -186,16 +253,25 @@ para.addEventListener("mouseover", () => { }); ``` +::: + - **Inline Event Handlers**: Inline event handlers are special attributes on an HTML element that are used to execute JavaScript code when an event occurs. In modern JavaScript, inline event handlers are not considered best practice. It is preferred to use the `addEventListener` method instead. + +:::interactive_editor + ```html ``` +::: + ## The Change Event - **Definition**: The change event is a special event which is fired when the user modifies the value of certain input elements. Examples would include when a checkbox or a radio button is ticked. Or when the user makes a selection from something like a date picker or dropdown menu. +:::interactive_editor + ```html + ``` ```js @@ -219,6 +296,8 @@ selectEl.addEventListener("change", (e) => { }); ``` +::: + ## Event Bubbling - **Definition**: Event bubbling, or propagation, refers to how an event "bubbles up" to parent objects when triggered. @@ -236,13 +315,52 @@ selectEl.addEventListener("change", (e) => { - **`Element.style` Property**: This property is a read-only property that represents the inline style of an element. You can use this property to get or set the style of an element. +:::interactive_editor + +```html +This paragraph will turn red.
+ +``` + ```js const paraEl = document.getElementById("para"); paraEl.style.color = "red"; ``` +::: + - **`Element.classList` Property**: This property is a read-only property that can be used to add, remove, or toggle classes on an element. +:::interactive_editor + +```html + +This paragraph will have classes added and removed.
+ + + +``` + +```css +.highlight { + background-color: yellow; +} + +.blue-background { + background-color: lightblue; +} + +.menu { + display: none; + padding: 10px; + background-color: #f0f0f0; +} + +.menu.show { + display: block; +} +``` + ```js // Example adding a class const paraEl = document.getElementById("para"); @@ -258,19 +376,27 @@ const toggleBtn = document.getElementById("toggle-btn"); toggleBtn.addEventListener("click", () => menu.classList.toggle("show")); ``` +::: + ## Working with the `setTimeout()` and `setInterval()` Methods - **`setTimeout()` Method**: This method lets you delay an action for a specified time. +:::interactive_editor + ```js setTimeout(() => { console.log('This runs after 3 seconds'); }, 3000); ``` +::: + - **`setInterval()` Method**: This method keeps runs a piece of code repeatedly at a set interval. Since `setInterval()` keeps executing the provided function at the specified interval, you might want to stop it. For this, you have to use the `clearInterval()` method. +:::interactive_editor + ```js setInterval(() => { console.log('This runs every 2 seconds'); @@ -286,6 +412,8 @@ setTimeout(() => { }, 5000); ``` +::: + ## The `requestAnimationFrame()` Method - **Definition**: This method allows you to schedule the next step of your animation before the next screen repaint, resulting in a fluid and visually appealing experience. The next screen repaint refers to the moment when the browser refreshes the visual display of the web page. This happens multiple times per second, typically around 60 times (or 60 frames per second) on most displays. @@ -304,6 +432,23 @@ function animate() { - **Definition**: The Web Animations API lets you create and control animations directly inside JavaScript. +:::interactive_editor + +```html + + + +``` + +```css +#square { + width: 100px; + height: 100px; + background: red; +} + +``` + ```js const square = document.querySelector('#square'); @@ -318,12 +463,17 @@ const animation = square.animate( ); ``` +::: + ## The Canvas API - **Definition**: The Canvas API is a powerful tool that lets you manipulate graphics right inside your JavaScript file. To work with the Canvas API, you first need to provide a `canvas` element in HTML. This element acts as a drawing surface you can manipulate with the instance methods and properties of the interfaces in the Canvas API. This API has interfaces like `HTMLCanvasElement`, `CanvasRenderingContext2D`, `CanvasGradient`, `CanvasPattern`, and `TextMetrics` which contain methods and properties you can use to create graphics in your JavaScript file. +:::interactive_editor + ```html + ``` ```js @@ -340,16 +490,21 @@ ctx.fillStyle = 'crimson'; ctx.fillRect(1, 1, 150, 100); ``` +::: + ## Opening and Closing Dialogs and Modals with JavaScript - **Modal and Dialog Definitions**: Dialogs let you display important information or actions to users. With the HTML built-in dialog element, you can easily create these dialogs (both modal and non-modal dialogs) in your web apps. A modal dialog is a type of dialog that forces the user to interact with it before they can access the rest of the application or webpage. In contrast, a non-modal dialog allows the user to continue interacting with other parts of the page or application even when the dialog is open. It doesn't prevent access to the rest of the content. - **`showModal()` Method**: This method is used to open a modal. +:::interactive_editor + ```html + ``` ```js @@ -361,14 +516,19 @@ openButton.addEventListener('click', () => { }); ``` +::: + - **`close()` Method**: This method is used to close the modal. +:::interactive_editor + ```html + ``` ```js @@ -385,6 +545,8 @@ closeButton.addEventListener('click', () => { }); ``` +::: + # --assignment-- Review the DOM Manipulation and Click Events with JavaScript topics and concepts.