Javascript Articles - Page 438 of 671

The JavaScript arrayBuffer.slice() method returns a new arrayBuffer whose contents are copy of the another arrayBuffer from begin, inclusive till end, exclusive.Following is the code for the arrayBuffer.slice() method −Example Live Demo Document body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample, .result {       font-size: 18px;       font-weight: 500;       color: red; } .result {    color: black; } JavaScript arrayBuffer.slice() property Original array buffer: Sliced array buffer: CLICK HERE Click on the above button to slice the array buffer to make ... Read More

The JavaScript File WebAPI file.type property indicated the media type of the file.Following is the code for the File WebApi File.type property −Example Live Demo Document body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result {    font-size: 18px;    font-weight: 500;    color: red; } JavaScript file.type property Upload a file using the above input type to get its file type let resultEle = document.querySelector(".result"); document .querySelector(".fileInput") .addEventListener("change", (event) => {    resultEle.innerHTML +=    "File name = " + event.target.files[0].name + "";    resultEle.innerHTML += "File type = " + event.target.files[0].type; }); OutputOn clicking the “Choose file” button −

The JavaScript File WebAPI file.size property returns the size of file in bytes.Following is the code for the File WebApi File.size property −Example Live Demo Document body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result {    font-size: 18px;    font-weight: 500;    color: red; } JavaScript file.size property Upload a file using the above input type to get its file size let resultEle = document.querySelector(".result"); document .querySelector(".fileInput") .addEventListener("change", (event) => {    resultEle.innerHTML += "File name = " + event.target.files[0].name + ‘;    resultEle.innerHTML ... Read More

To detect the pressed arrow key in JavaScript, the code is as follows;Example Live Demo Document body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample {    font-size: 18px;    font-weight: 500; } Detecting the pressed arrow key Press any arrow key to know which arrow key has been pressed let fillEle = document.querySelector(".sample"); document.body.addEventListener("keydown", (event) => {    switch (event.keyCode) {       case 37:          fillEle.innerHTML = "Left key pressed";       break;       case 38:          fillEle.innerHTML = "Up key pressed";       break;       case 39:          fillEle.innerHTML = "Right key pressed";       break;       case 40:          fillEle.innerHTML = "Down key pressed";       break;    } }); OutputOn pressing any of the arrow key −

Following is the code for detecting a mobile browser in JavaScript −Example Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample {    font-size: 18px;    font-weight: 500; } Detecting a mobile browser CLICK HERE Click on the above button to see if it is a mobile device or not let fillEle = document.querySelector(".sample"); let date = new Date(); let primitiveDef = date[Symbol.toPrimitive]("default"); let primitiveNum = date[Symbol.toPrimitive]("number"); document.querySelector(".Btn").addEventListener("click", () => {    var checkMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);    if (checkMobile) {       fillEle.innerHTML = "This ... Read More

The JavaScript date.@@toPrimitive() function converts the date object into a primitive value.Following is the code for date formats in JavaScript −Example Live Demo Document body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample {    font-size: 18px;    font-weight: 500; } JavaScript date.@@toPrimitive() functiont CLICK HERE Click on the above button to see the date as primitive value let fillEle = document.querySelector(".sample"); let date = new Date(); let primitiveDef = date[Symbol.toPrimitive]("default"); let primitiveNum = date[Symbol.toPrimitive]("number"); document.querySelector(".Btn").addEventListener("click", () => {    fillEle.innerHTML += "Hint = default :" + primitiveDef + "";    fillEle.innerHTML += "Hint = number :" + primitiveNum; }); OutputOn clicking the “CLICK HERE” button −

We can express the knowledge in various forms to the inference engine in the computer system to solve the problems. There are two important representations of knowledge namely, procedural knowledge and declarative knowledge. The basic difference between procedural and declarative knowledge is that procedural knowledge gives the control information along with the knowledge, whereas declarative knowledge just provides the knowledge but not the control information to implement the knowledge. Read through this article to find out more about procedural knowledge and declarative knowledge and how they are different from each other. What is Procedural Knowledge? Procedural or imperative knowledge clarifies ... Read More

Following is the code to create a full screen search box with CSS and JavaScript −Example Live Demo body {    font-family: Arial; } * {    box-sizing: border-box; } .showBtn {    background: #008b0c;    border: none;    color:white;    padding: 10px 15px;    font-size: 20px;    cursor: pointer;    opacity: 0.8; } .showBtn:hover {    opacity: 1; } .overlaySearch {    height: 100%;    width: 100%;    display: none;    position: fixed;    z-index: 1;    top: 0;    left: 0;    background-color: rgba(132, 150, 155, 0.747); } .searchBar {    position: relative;    top: ... Read More

To copy text to the clipboard, we will use the HTMLInputElement methods, select() and setSelectionRange(). With that, we have also used the document execCommand() method to copy. Create an Input Text We will create an input text. This will the text that we will copy to the clipboard Set a Button We will click this button to copy the clipboard text − Copy text You can also style the button accordingly − button { border: none; outline: none; background-color: rgb(191, 187, 255); ... Read More

Following is the code to create an image zoom:Example Live Demo    * {box-sizing: border-box;}    .img{       display: inline-block;    }    .img-zoom-container {       position: relative;    }    .img-zoom-zoomLens {       position: absolute;       border: 1px solid #d4d4d4;       width: 50px;       height: 50px;    }    .myresult{       display: inline-block;    }    .img-zoom-result {       border: 1px solid #d4d4d4;    } Image Zoom Example Hover over the image on ... Read More