Category: JavaScript Answers

To do simple web scraping using jQuery, we can use the jQuery’s $.get method to make GET requests to the web pages we want to scrape.

Then in the success callback, we can parse the HTML string obtained from the GET request and parse the elements we want with jQuery.

For instance, we can write:

$.get('https://jsfiddle.net/', (html) => {
  [...$(html).find("div")].forEach((el) => {
    const text = $(el).text();
    console.log(text)
  })
})

We call $.get with the URL we want to get data from and the callback that’s run when that succeeds.

In the callback, we parse the HTML result into a DOM object with $(html).

Then we spread the div elements returned by the find method into an array.

Finally, we call forEach on the array and get the element from the el parameter.

We then call get the text content of each element with $(el).text().

It is likely that we will run into CORS issues if we try to use $.get to scrape data from a web page unless the page is in the same domain as where the code is hosted.

To change an ISO date string to a JavaScript date object, we can use the Date constructor to convert it to a JavaScript date object.

For instance, we can write:

const d = new Date('2021-11-03T19:00:34.203Z');
const n = d.getUTCDate();

We just pass the ISO date string as the argument of the Date constructor.

Then we call getUTCDate to return the date of the month in UTC.

Therefore, n is 3.

To create an HTML canvas with JavaScript, we can use the document.createElement method.

For instance, we can write:

const canvas = document.createElement('canvas');
canvas.width = 100;
canvas.height = 100;
document.body.appendChild(canvas)
const ctx = canvas.getContext("2d");

We call document.createElement with 'canvas' to create a canvas element.

Then we set its width and height by setting the width and height properties.

Next, we call document.body.appendChild with canvas to attach it to the body element as its child.

Finally, we call canvas.getContext to get the 2d context.

To access a camera from a browser with JavaScript, we can use the WebRTC API to access the camera when permission is granted.

To do this, we write:

const video = document.createElement("video");
video.setAttribute("playsinline", "");
video.setAttribute("autoplay", "");
video.setAttribute("muted", "");
video.style.width = "200px";
video.style.height = "200px";

const facingMode = "user";
const constraints = {
  audio: false,
  video: {
    facingMode
  }
};

navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
  video.srcObject = stream;
});

document.body.appendChild(video);

to create a video element with some attribute with:

const video = document.createElement("video");
video.setAttribute("playsinline", "");
video.setAttribute("autoplay", "");
video.setAttribute("muted", "");
video.style.width = "200px";
video.style.height = "200px";

We set the width, height, autoplay attribute, and more with setAttribute and setting style properties.

Then we call navigator.mediaDevices.getUserMedia with the constraints to access the camera.

audio is set to false to disable picking up audio.

And video.facingMode is set to 'user' to let the code access the front camera.

Once the camera can be accessed, the then callback is run, and the video.srcObject is set to the stream to disable what the camera picks up onto the screen via the video element.

Finally, we call document.body.appendChild with video to display the video element onto the screen.

Now once we granted permission for the code to access the camera, we should see the stuff picked up by the front camera on the browser’s screen.