Found 9313 Articles for Object Oriented Programming

Remove and add new HTML Tags with JavaScript?

AmitDiwan
Updated on 03-Sep-2020 06:12:57

639 Views

To remove and add new HTML tags, use the concept of hide() and show().Let’s say the following are our buttons −Click Me To hide above content Click Me To show above content To remove and add tags on button clicks, use hie() and show() −$(document).ready(function(){    $("#hide").click(function(){       $("h1").hide();    });    $("#show").click(function(){       $("h1").show();    }); });Example Live Demo Document Test JavaScript Click Me To hide above content Click Me To show above content    $(document).ready(function(){       $("#hide").click(function(){       ... Read More

Looping in JavaScript to count non-null and non-empty values

AmitDiwan
Updated on 03-Sep-2020 06:09:15

917 Views

Let’s say the following are our values −let subjectNames = ['JavaScript', 'Angular', 'AngularJS', 'Java'];To count the non-empty and non-null values, use the forEach(). The syntax is as follows −yourArrayName.forEach(anyVariableName =>{    yourStatement1    .    .    .    N    } } )Now, use the if statement and check −var count=0 subjectNames.forEach(subject =>{    if(subject!=' ' || subject!=null){       count+=1;       }    } )Examplelet subjectNames = ['JavaScript', 'Angular', 'AngularJS', 'Java']; var count=0 subjectNames.forEach(subject =>{    if(subject!=' ' || subject!=null){          count+=1;       }    } ) console.log("Number of subject=="+count);To ... Read More

How to remove an object using filter() in JavaScript?

AmitDiwan
Updated on 03-Sep-2020 06:00:17

510 Views

Let’s say, we have the following objects in JavaScript −ObjectValue =[    { "id": "101", "details": { Name:"John", subjectName:"JavaScript" }},    { "id": "102", "details": { Name:"David", subjectName:"MongoDB" }},    { "id": "103" } ]To remove an object using filter(), the code is as follows −ExampleObjectValue =[    { "id": "101", "details": { Name:"John", subjectName:"JavaScript" }},    { "id": "102", "details": { Name:"David", subjectName:"MongoDB" }},    { "id": "103" } ] output=ObjectValue.filter(obj=>obj.details) console.log(output)To run the above program, you need to use the following command −node fileName.js.Here, my file name is demo46.js.OutputThis will produce the following output −PS C:\Users\Amit\JavaScript-code> node demo46.js ... Read More

Is an empty iframe src valid in JavaScript?

AmitDiwan
Updated on 02-Sep-2020 06:37:59

1K+ Views

For empty iframe src, use the element and set it like the following for an empty src −Example Live Demo Document To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS Code editor.OutputThis will produce the following output −

How to transform object of objects to object of array of objects with JavaScript?

AmitDiwan
Updated on 02-Sep-2020 06:19:44

660 Views

To transform object of objects to object of array of objects, use the concept of Object.fromEntries() along with map().Exampleconst studentDetails = {    'details1': {Name: "John", CountryName: "US"},    'details2': {Name: "David", CountryName: "AUS"},    'details3': {Name: "Bob", CountryName: "UK"}, }; console.log(    Object.fromEntries(Object.entries(studentDetails).map(([key,    value]) => [key, [value]])) );To run the above program, you need to use the following command −node fileName.js.Here, my file name is demo45.js.OutputThis will produce the following output −PS C:\Users\Amit\JavaScript-code> node demo45.js {    details1: [ { Name: 'John', CountryName: 'US' } ],    details2: [ { Name: 'David', CountryName: 'AUS' } ],    details3: ... Read More

Why can't my HTML file find the JavaScript function from a sourced module?

AmitDiwan
Updated on 02-Sep-2020 06:14:29

2K+ Views

This may happen if you haven’t used “export” statement. Use “export” before the function which will be imported into the script file. The JavaScript file is as follows which has the file name demo.js.demo.jsconsole.log("function will import"); export function test(){    console.log("Imported!!!"); }Here is the “index.html” file that imports the above function −index.htmlExample Live Demo Document    import { test } from "./demo.js"    test(); To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS ... Read More

Refresh page after clearing all form fields in jQuery?

AmitDiwan
Updated on 01-Sep-2020 12:30:34

2K+ Views

To refresh page, use the location.reload() in JavaScript. The sample JavaScript code is as follows −Example Live Demo Document UserName: Password: Refresh Page    $('#RefreshPage').click(function() {       location.reload();    }); To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS Code editor.OutputThis will produce the following output −After filling the form, the snapshot is as follows −When you click the button “Refresh Page”, the page will refresh and the following output is visible −

Lose input hints (get focus) after pressing mouse cursor in a textbox with JavaScript

AmitDiwan
Updated on 01-Sep-2020 12:27:37

324 Views

Let’s say the following is our input text −StudentName:To lose input hints on pressing mouse cursor, use onFocus and onBlur concept.Example Live Demo Document StudentName:    function guessFocus() {       if (this.value == this.defaultValue)          this.value = '';    }    function guessBlur(event) {       if (this.value == '')       this.value = this.defaultValue;    }    var event = document.getElementById('studentName');    event.onfocus = guessFocus;    event.onblur = guessBlur; To run the above program, save the file name “anyName.html(index.html)” and ... Read More

How to inherit CSS properties of parent Element using JavaScript?

AmitDiwan
Updated on 01-Sep-2020 12:23:55

350 Views

You can use classList.add() along with append(). Use the document.createElement() to create a new div and the classList.add() would add the CSS class.(.class selector).Example Live Demo Document    .add-all-subject {       display: grid;       height: 100px;       width: 100px;       grid-template-columns: 2fr 2fr 2fr 2fr 2fr;       grid-template-rows: 2fr;       grid-column-gap: 5.9rem;       grid-row-gap: 2rem;       color: red;       border: 2px solid red;    } Add Subjects    const addSubjectArea = document.getElementById("add-subject"); ... Read More

How to capitalize the first letter of each word in a string using JavaScript?

AmitDiwan
Updated on 01-Sep-2020 12:18:46

3K+ Views

At first, you need to split() the string on the basis of space and extract the first character using charAt(). Use toUpperCase() for the extracted character.Examplefunction capitalizeTheFirstLetterOfEachWord(words) {    var separateWord = words.toLowerCase().split(' ');    for (var i = 0; i < separateWord.length; i++) {       separateWord[i] = separateWord[i].charAt(0).toUpperCase() +       separateWord[i].substring(1);    }    return separateWord.join(' '); } console.log(capitalizeTheFirstLetterOfEachWord("my name is john"));To run the above program, you need to use the following command −node fileName.js.Here, my file name is demo43.js.OutputThis will produce the following output with first letter capitalize −PS C:\Users\Amit\JavaScript-code> node demo43.js My Name ... Read More

Advertisements