diff --git a/src/data/question-groups/javascript/content/alert-prompt-confirm.md b/src/data/question-groups/javascript/content/alert-prompt-confirm.md new file mode 100644 index 000000000..2f962c1bc --- /dev/null +++ b/src/data/question-groups/javascript/content/alert-prompt-confirm.md @@ -0,0 +1,27 @@ +Let's see how we can use the `alert`, `prompt` and `confirm` functions to interact with the user. + +## alert() + +The `alert()` method displays an alert box with a specified message and an OK button. + +```js +alert('Hello World!'); +``` + +## prompt() + +The `prompt()` method displays a dialog box that prompts the visitor for input. A prompt box is often used if you want the user to input a value before entering a page. The `prompt()` method returns the input value if the user clicks OK. If the user clicks Cancel, the method returns `null`. + +```js +const name = prompt('What is your name?'); +console.log(name); +``` + +## confirm() + +The `confirm()` method displays a dialog box with a specified message, along with an OK and a Cancel button. This is often used to confirm or verify something from the user. + +```js +const result = confirm('Are you sure?'); +console.log(result); // true/false +``` diff --git a/src/data/question-groups/javascript/content/event-bubbling.md b/src/data/question-groups/javascript/content/event-bubbling.md new file mode 100644 index 000000000..a6c0485e3 --- /dev/null +++ b/src/data/question-groups/javascript/content/event-bubbling.md @@ -0,0 +1,19 @@ +Event bubbling is a concept in the Document Object Model (DOM) that describes the way in which events propagate or "bubble up" through the hierarchy of nested elements in the DOM. + +When an event, such as a mouse click, occurs on a DOM element, the event will be handled by the element first, then its parent element, and so on, until the event reaches the root element. This behavior is called event bubbling. + +```js +const parent = document.querySelector('.parent'); +const child = document.querySelector('.child'); + +// Scenario of clicking on the child element +parent.addEventListener('click', () => { + console.log('Handled Last'); +}); + +child.addEventListener('click', () => { + console.log('Handled First'); +}); +``` + +In the above example, when you click on the `child` element, the event will be handled by the `child` element first, then its parent element, and so on, to the root element unless you stop the propagation (`event.stopPropagation()`) of the event. diff --git a/src/data/question-groups/javascript/javascript.md b/src/data/question-groups/javascript/javascript.md index 9020b673b..4c2ffe3b9 100644 --- a/src/data/question-groups/javascript/javascript.md +++ b/src/data/question-groups/javascript/javascript.md @@ -143,4 +143,19 @@ questions: topics: - 'Core' - 'Advanced' + - question: How to enable strict mode in JavaScript? + answer: To enable strict mode in JavaScript, you need to add the following line at the top of the file or function `'use strict';`. + topics: + - 'Core' + - 'Beginner' + - question: Explain `alert()`, `prompt()`, and `confirm()` methods in JavaScript? + answer: alert-prompt-confirm.md + topics: + - 'Core' + - 'Intermediate' + - question: How to handle event bubbling in JavaScript? + answer: event-bubbling.md + topics: + - 'Core' + - 'Beginner' ---