Today community session with batch fsr060523 04 july

JavaScript Conversations
#1

1- How do you use setTimeout to execute a function after a specified delay?

1 Like
#2
#3

Click Button
function fun3(){
setTimeout(function(){
document.getElementById(‘demo1’).style.background=“green”;
},5000)
}

1 Like
#4 
To use `setTimeout` to execute a function after a specified delay, you can follow this syntax:

``setTimeout(function, delay, arg1, arg2, ...)

Here’s a breaakdown of the parameters:

  • function: The function that you want to execute after the delay.
  • delay: The delay (in milliseconds) before executing the function.
  • arg1, arg2, ...: Optional arguments that you can pass to the function.

Here’s an example:

function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

setTimeout(() => {
  sayHello("John");
}, 2000);

In this example, the arrow function () => { sayHello("John"); } will be executed after a delay of 2000 milliseconds (2 seconds). It calls the sayHello function with the argument “John”, which will output “Hello, John!” to the console after the specified delay.

We can also use a regular function instead of an arrow function:

function delayedExecution() {
  console.log("Delayed function execution");
}

setTimeout(delayedExecution, 3000);

In this case, the delayedExecution function will be executed after a delay of 3000 milliseconds (3 seconds), and it will output “Delayed function execution” to the console.

1 Like
#5
#modal{ height: 100px; width: 200px; background-color: aquamarine; display: flex; display: none; justify-content: center; } 
<div id="modal">Modal Box</div>  
<button onclick="fun1()">click me</button>

    <script>
        function fun1(){
          var a =  document.getElementById("modal");
          setTimeout(function(){
            a.style.display = "flex"
          },1000)
        }
    </script>
1 Like
#6

2- What parameters does the setTimeout function take?

#7

function func4(){
setTimeout(function(){
document.getElementById(‘click1’).style.background= “red”;
},4000)
}

1 Like
#8

setTimeout has 2 parameter 1st is the function itself and 2nd is time in milisecond

1 Like
#9

What parameters does the setTimeout function take?
milli second

1 Like
#10

Click the button. Wait 3 seconds for alert "Hello".

<button onclick="myFunction()">Try it</button>

<script>
  let timeout;

  function myFunction() {
    timeout = setTimeout(alertFunc, 3000);
  }

  function alertFunc() {
    alert("Hello!");
  }
</script>
1 Like
#11

function fun1(){
setTimeout(function(){
document.getElementById(‘demo1’).style.color= “yellow
”;
},2000)
}

1 Like
#12

setTimeout function:- for this function we have two parameters .one is for function , another is for setting time
syntax : setTimeout (funnctionName(),2000);

1 Like
#13 
 The `setTimeout` function in JavaScript takes two main parameters:

1. `function` This is the function that you want to execute after a specified delay. It can be a reference to an existing function or an anonymous function defined inline.
2. `delay`: This is the delay in milliseconds before the execution of the function. It determines how long the script should wait before executing the specified function.

Additionally, `setTimeout` can accept optional parameters:

3. `arg1, arg2, ...`: These are additional arguments that can be passed to the function specified in the first parameter. They are optional and can be used if the function requires any specific arguments.

Here is an example of the syntax for `setTimeout`:

``
setTimeout(function, delay, arg1, arg2, ...);

In this example, function represents the function to be executed, delay is the delay in milliseconds, and arg1, arg2, ... are optional arguments to be passed to the function.

It’s important to note that the order of the parameters is significant, and the function and delay are the minimum required parameters for `setTimeout.

1 Like
#14

Its parameters are function - a function containing a block of code and milliseconds - the time after which the function is executed.

1 Like
#15

3-Explain briefly Key events!!

#16 
Key events in JavaScript are events triggered by keyboard interactionsThey allow us to capture and respond to user input from the keyboard. These events can be useful for implementing various keyboard-related functionalities in web applications.

There are several key events available in JavaScript, including:

1. `keydown`: This event is triggered when a key is pressed down.
2. `keyup`: This event is triggered when a key is released.
3. `keypress`: This event is triggered when a key is pressed down and released.

When a keey event occursJavaScript provides information about the key that was pressed or released through the event object. We can access properties such as `event.key` to determine which key was involved in the event. The `event.keyCode` property is also available for legacy support but is being deprecated.

Here's a brief overview of the key events and their typical use cases

'keydown` event: Useful for detecting when a key is initially pressed down. It can be used to perform actions while a key is held down, such as continuous scrolling or movement.

Example:

``
document.addEventListener("keydown", function(event) {
  if (event.key === "ArrowUp") {
    // Perform an action when the Up arrow key is pressed down
    // e.g., move an object up
  }
});
  • keyup event: Useful for detecting when a key is released. It can be used to trigger actions after a key is no longer pressed, such as submitting a form or updating a UI element.

Example:

``
document.addEventListener(“keyup”, function(event) {
if (event.key === “Enter”) {
// Perform an action when the Enter key is released
// e.g., submit a form
}
});


- `keypress` event: Useful for capturing actual character input, such as typing alphanumeric characters. It provides access to the actual character value of the key pressed.

Example:

document.addEventListener(“keypress”, function(event) {
if (event.key === “a”) {
// Perform an action when the ‘a’ key is pressed and released
// e.g., add a new item to a list
}
});


Thesee are just a few examples of how key events can be used in JavaScript to handle keyboard interactions. By attaching event listeners to key events, we can respond to specific key presses or releases and perform the desired actions in our web applications.
1 Like
#17

Events : Event is nothing but a state user . If user is performing any thing by using key events , at that moment , if you want to do some task that s nothing but an event.
ex:- onmouseout event,onmouseover event,onclick, onblur …

1 Like
#18

onmouseup :- when we release the mouse button and function triggers.
onmusedown :- when we click a mouse button and function triggers.
ondblclick :- when we double click on mouse button and function triggers.
oncopy : when we copy something we can deliver a message/alert.

onkeyup:- we we release a keyboard button we can add some function
onkedown:- we we press a keyboard button we can add some function

we also have

onfocus
onblur

1 Like
#19

Well done guys!! @aasmasulthana @akshithasams @noorkhan6868 @koushikgowdavk @khanazra1979 @Vnrvishnusastha29

2 Likes
#20

Thank you mam @drishtinayak2828-TA !

1 Like