Author: John Au-Yeung

(Source code is at https://github.com/jauyeunggithub/rook-hotel-answers/blob/master/q2.txt)

The modulo operator (%) in JavaScript lets us get the remainder when we divide one number by the other.

In this article, we’ll look at how to use modulo operator (%) in JavaScript.

How to use modulo operator (%) in JavaScript?

We can use the modulo operator to get the remainder of the left operand divided by the right one.

For instance, we write:

const numFn = (num) => {
  if (num % 14 === 0) {
    console.log('foobar')
    return
  } else if (num % 7 === 0) {
    console.log('foo')
    return
  } else if (num % 2 === 0) {
    console.log('bar')
    return
  }
  console.log('NUMBER')
}

We check if num can be divided by 14 evenly with num % 14 === 0.

If it is, we log 'foobar'.

Similarly, we do the same checks when dividing num by 7 and 2 and log different values.

Otherwise, we log 'NUMBER' if none of the conditions are true.

Conclusion

We can use the modulo operator to get the remainder of the left operand divided by the right one.

Sometimes, we want to get div tag scroll position using JavaScript.

In this article, we’ll look at how to get div tag scroll position using JavaScript.

How to get div tag scroll position using JavaScript?

To get div tag scroll position using JavaScript, we can use the scrollTop property.

For instance, we write:

<div style='height: 100px; overflow-y: auto'>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
</div>

to add a scrollable div.

Then we write:

const div = document.querySelector('div')
div.addEventListener('scroll', () => {
  console.log(div.scrollTop)
})

to select the div with document.querySelector.

Then we call div.addEventListener with 'scroll' to add a scroll event listener.

And in the listener, we log the value of div.scrollTop.

Now when we scroll the div up and down, we should see the scroll position of the div in pixels.

Conclusion

To get div tag scroll position using JavaScript, we can use the scrollTop property.

Sometimes, we want to pass variable through JavaScript from one html page to another page.

In this article, we’ll look at how to pass variable through JavaScript from one html page to another page.

How to pass variable through JavaScript from one html page to another page?

To pass variable through JavaScript from one html page to another page, we can use local storage to store the variable’s value.

Then we can get the value in the other page.

For instance, we write:

localStorage.setItem("name", 'jane');

to store an item with key 'name' and value 'jane' into local storage with localStorage.setItem.

Then on the other page, we can get the value with localStorage.getItem by writing:

localStorage.getItem("name");

which should return 'jane'.

Conclusion

To pass variable through JavaScript from one html page to another page, we can use local storage to store the variable’s value.

Then we can get the value in the other page.

Sometimes, we want to read a file as binary with the HTML5 File API.

In this article, we’ll look at how to read a file as binary with the HTML5 File API.

How to read a file as binary with the HTML5 File API?

To read a file as binary with the HTML5 File API, we can use the readAsArrayBuffer method.

For instance, we write:

<input type='file'>

to add a file input element.

Then, we write:

const reader = new FileReader()
reader.onload = () => {
  console.log(reader.result)
}

const input = document.querySelector('input')
input.addEventListener('change', e => {
  const [file] = e.target.files
  reader.readAsArrayBuffer(file)
})

to create a new FileReader instance.

And we set the reader.onload property to a function that logs the reader.result property, which has the read array buffer.

Then we select the input with document.querySelector.

And then we call input.addEventListener with 'change' to add a change event listener.

Then in the change listener, we get the file from e.target.files with destructuring.

And then we call reader.readAsArrayBuffer with the file.

Now when we select a file, we should see the array buffer logged.

Conclusion

To read a file as binary with the HTML5 File API, we can use the readAsArrayBuffer method.