Web Development Archive

You are here: Home / Archives for JavaScript

JavaScript

List of all JS Array Methods

console.log(Object.getOwnPropertyNames(Array.prototype).filter(item => typeof Array.prototype[item] === "function"));
Array(39) [ "toString", "toLocaleString", "join", "reverse", "sort", "push", "pop", "shift", "unshift", "splice", … ]
​
0: "toString"
​1: "toLocaleString"
​2: "join"
​3: "reverse"
​4: "sort"
​5: "push"
​6: "pop"
​7: "shift"
​8: "unshift"
​9: "splice"
​10: "concat"
​11: "slice"
​12: "lastIndexOf"
​13: "indexOf"
​14: "forEach"
​15: "map"
​16: "filter"
​17: "reduce"
​18: "reduceRight"
​19: "some"
​20: "every"
​21: "find"
​22: "findIndex"
​23: "copyWithin"
​24: "fill"
​25: "entries"
​26: "keys"
​27: "values"
​28: "includes"
​29: "flatMap"
​30: "flat"
​31: "at"
​32: "findLast"
​33: "findLastIndex"
​34: "toReversed"
​35: "toSorted"
​36: "toSpliced"
​37: "with"
​38: "constructor"
​length: 39

ESBuild – JS

npm install esbuild esbuild-sass-plugin --save-dev
npm install @wordpress/blocks @wordpress/element

package.json

{
  "name": "twentyfive-child",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "node build.js",
    "start": "node build.js --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "esbuild": "^0.24.2",
    "esbuild-sass-plugin": "^3.3.1"
  },
  "dependencies": {
    "@wordpress/blocks": "^14.3.0",
    "@wordpress/element": "^6.14.0"
  }
}

build.js

const esbuild = require('esbuild');

(async () => {
  const ctx = await esbuild.context({
    entryPoints: ['src/index.js'],
    bundle: true,
    minify: true,
    sourcemap: false,
    outfile: 'dist/bundle.js',
    target: ['es2015'],
    loader: { '.js': 'jsx' },
  });

  await ctx.watch();
  console.log('Watching for changes...');
})();

JavaScript – If statement in one line

Van olyan JS szintaxis, amivel ezt egy sorba lehet írni?

if (post.meta.inperson !== '') {
  this.modal.appendChild(rowAppointment);
}

Igen, ezt a feltételt egy sorba írhatod a rövidzárlatos értékeléssel (logical short-circuiting) az alábbi módon:

post.meta.inperson !== '' && this.modal.appendChild(rowAppointment);

Magyarázat:

  • Az && operátor balról jobbra kiértékel.
  • Ha az első feltétel igaz (post.meta.inperson !== ''), akkor végrehajtja a jobb oldali kifejezést (this.modal.appendChild(rowAppointment)).
  • Ha az első feltétel hamis, akkor a jobb oldali kifejezés nem fut le.

Ez tömör, és egy sorban leírható, de figyelj arra, hogy olvashatóság szempontjából egyes projektekben a hagyományos if jobb választás lehet.

JavaScript Class Template – ES6

class Search {
  constructor() {
    this.searchToggle = document.getElementById('searchToggle');
    this.onSearchToggle();
  }

  onSearchToggle() {
    this.searchToggle.addEventListener('click', () => {
      console.log(123);
    });
  }
}

document.addEventListener('DOMContentLoaded', () => {
  new Search();
});

export default Search;

Fetch API – Local text, json, external API – with Arrow Functions

Get Local Text File Data

function getText() {
  fetch('test.txt')
    .then(res => res.text())
    .then(data => {
      console.log(data);
      document.getElementById('output').innerHTML = data;
    })
    .catch(err => console.log(err));
}

Get Local JSON Data

function getJson() {
  fetch('posts.json')
    .then(res => res.json())
    .then(data => {
      console.log(data);
      // This is an array so we have to loop through it
      let output = '';

      data.forEach(function(post){
        output += `<li>${post.title}</li>`;
      });
      document.getElementById('output').innerHTML = output;

    })
    .catch(err => console.log(err));
}

Get External API Data

function getExternal() {
  fetch('https://api.github.com/users')
    .then(res => res.json())
    .then(data =>  {
      console.log(data);
      let output = '';

      data.forEach(function(user){
        output += `<li>${user.login}</li>`;
      });
      document.getElementById('output').innerHTML = output;

    })
    .catch(err => console.log(err));
}

Fetch API – Local text, json, external API

View Demo

Fetch API is a new standard for dealing with http requests.

Get Local Text File Data

document.getElementById('button1').addEventListener('click', getText);

function getText() {
  fetch('test.txt')
    .then(function(res){
      return res.text();
    })
    .then(function(data) {
      console.log(data);
      document.getElementById('output').innerHTML = data;
    })
    .catch(function(err){
      console.log(err);
    });
}

Get Local JSON Data

document.getElementById('button2').addEventListener('click', getJson);

// Get local json data
function getJson() {
  fetch('posts.json')
    .then(function(res){
      return res.json();
    })
    .then(function(data) {
      console.log(data);
      // This is an array so we have to loop through it
      let output = '';

      data.forEach(function(post){
        output += `<li>${post.title}</li>`;
      });
      document.getElementById('output').innerHTML = output;

    })
    .catch(function(err){
      console.log(err);
    });
}

Get external API data

document.getElementById('button3').addEventListener('click', getExternal);

function getExternal() {
  fetch('https://api.github.com/users')
    .then(function(res){
      return res.json();
    })
    .then(function(data) {
      console.log(data);
      // This is an array so we have to loop through it
      let output = '';

      data.forEach(function(user){
        output += `<li>${user.login}</li>`;
      });
      document.getElementById('output').innerHTML = output;

    })
    .catch(function(err){
      console.log(err);
    });
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" />
  <link rel="icon" href="#">
  <title>Ajax Sandbox</title>
</head>
<body>
  <div class="container">
    <h1>Fetch API Sandbox</h1>
    <button id="button1">Get Text</button> 
    <button id="button2">Get JSON</button>
    <button id="button3">Get API Data</button>
    <br><br>
    <div id="output"></div>
  </div>

  <script src="app.js"></script>
</body>
</html>

Receive data from JSON file with Ajax

View Demo
document.getElementById('button1').addEventListener('click', loadCustomer);
document.getElementById('button2').addEventListener('click', loadCustomers);

// Load Single Customer
// Create a function named LoadCustomer and passing the Event Object 
function loadCustomer(e){
    const xhr = new XMLHttpRequest();

    xhr.open('GET', 'customer.json', true);

    xhr.onreadystatechange = function(){

        if(this.readyState === 4 && this.status === 200){

            const customer = JSON.parse(this.responseText);

            const output = `
                <ul>
                    <li>ID: ${customer.id}</li>
                    <li>Name: ${customer.name}</li>
                    <li>Company: ${customer.company}</li>
                    <li>Phone: ${customer.phone}</li>
                </ul>
            `;

            document.getElementById('customer').innerHTML = output;
        }
    }

    xhr.send();

    e.preventDefault();
}

// Load Customers
function loadCustomers(e){
    const xhr = new XMLHttpRequest();

    xhr.open('GET', 'customers.json', true);

    xhr.onreadystatechange = function(){

        if(this.readyState === 4 && this.status === 200){

            const customers = JSON.parse(this.responseText);

            let output = '';

            // We can't just output the data, we need to loop through

            customers.forEach(function(customer)  {

                output += `
                <ul>
                    <li>ID: ${customer.id}</li>
                    <li>Name: ${customer.name}</li>
                    <li>Company: ${customer.company}</li>
                    <li>Phone: ${customer.phone}</li>
                </ul>
            `;  
            });

            document.getElementById('customers').innerHTML = output;
        }
    }

    xhr.send();

    e.preventDefault();
}