JavaScript event prevent default

-

JavaScript event preventdefault is a method for intervening event actions preventing normal events behavior

Take for instance you have an anchor on a page when a user clicks on it the browser by default navigates to a url in it's href attribute

preventdefault syntax

/// HTML
<a href="/" id="home">
    home
</a>

/// JavaScript
home.addEventListener('click', function(event){
    event.preventdefault()
    // rest of
    // the code
})

Comments

Post a Comment

Popular posts from this blog

How to wait for a promise within a loop block

-
JavaScript promises enable developers to write asynchronous applications in JavaScript Loops are ways of iterating elements For instance doing an asynchronous task within a for loop can be done as follows; Note that lag is used to emulate some delay. const items = [1, 2, 3, 4] const lag = async (delay) => {     return new Promise((resolve) =>         setTimeout(() => res(`${delay / 1000} sec`), delay)) } items.forEach(async (item) => {     const seconds = await lag(1000 * item)     console.log(seconds) }) expected output 1 sec 2 sec 3 sec 4 sec After running the code above every second some text was printed
Read more

JavaScript math methods

-
JavaScript comprehensive list of all JavaScript Math methods Math.round () {type} method {parameter} {Number} {description} It returns a given number rounded off to the nearest integer. ie Math.round(0.6251) // returns 1 or Math.round(1.7252) // returns 2 Math . pow () {type} method {parameter} {Number}, {Number} {description} It returns a given number raised to the power the exponent. ie Math.pow(2, 5) // returns 32 or Math.pow(7, 2) // returns 49 Math.sqrt () {type} method {parameter} {Number} {description} It returns the square root of a given integer. ie Math.sqrt(25) // returns 5 or Math.sqrt(64) // returns 8 Math.abs () {type} method {parameter} {Number} {description} It returns absolute positive value of a given number ie Math.abs(-10) // returns 10 or Math.abs(52) // returns 52 Math.ceil () {type} method {parameter} {Number} {description} It returns a smaller number which is greater or equal to the given integer. ie Math.ceil(9.87) // returns 10 or...
Read more

How to iterate array elements using 'for loop' in JavaScript

-
JavaScript arrays are similar to arrays in c and in c like programming languages such as php among others In JavaScript arrays are simply collections of elements for instance Objects Numbers or other Arrays Declaring an array An array may be declared using the array constructor for instance const array = new Array() or as const array = [] Iterating an array using 'for' loop This is the implest and most common method to iterate an array is by using the 'for loop' am sure you're familiar with the syntax. take for Instance you want to iterate an array of integers and print each one of them. var ints = [1, 2, 3, 4] To iterate ints using for loop. for (var i = 0; i < ints.length; i++){         console.log(ints[i]) } // output will be // 1 // 2 // 3 // 4 In between the parentheses they are three procedures in three segments separated by colons first segment declares var i an index which gets incriminated in the third segment as long as...
Read more

How to use canvas context rect method for drawing rectangles

-
canvas context rect method does as it says. It's used for drawing a rectangle on a canvas context Parameters context.rect(positionX, positionY, Width, Height) PositionX specifies the x coordinate at which the rectangle should be drawn at on the context PositionY specifies the y coordinate at which the rectangle should be drawn at on the context Width specifies the width of the rectangle Height specifies the height of the rectangle Stroking and filling the rectangle In order for the rectangle to be actually visible you have to either stroke it or fill it with a color. Stroke Stroking a rectangle means to draw a line that joins all of it's vertices To specify the fill color you should set it and call stroke to draw context.strokeStyle = "#colors" context.stroke() Fill Similar to srokings filling a rectangle means to paint it's inner bounding box with a specified color context.fillStyle = "#colors" context.fill() Example context.rect...
Read more

How to set content disposition header for nginx server to force content download

-
Image
Nginx (pronounced as engine x) is an HTTP server, reverse proxy server, as well as a mail proxy server Nginx is well known for its high performance, stability, efficiency, rich feature set, simple configuration, and low resource consumption. content disposition headers direct web browsers to save content instead of attempting to render it To set content disposition open your desired server configuration in "/etc/nginx/sites-available/" within your configuration add code below within your server {block} location ~* (mp3|ogg|wav)$ {     add_header Content-Disposition "attachment"; } mp3, ogg and wav are example file extensions matched by regular expressions rules Test configuration by acessing mp3, ogg and wav files from your webserver Alternatively you can force custom filenames as shown below "$1" substitutes filenames sent to clients. As an example its value corresponds to the requested file's extension lo...
Read more