{"id":20003650,"url":"https://github.com/xenioushk/javascript_101","last_synced_at":"2025-03-02T00:26:15.438Z","repository":{"id":256078193,"uuid":"852693292","full_name":"xenioushk/javascript_101","owner":"xenioushk","description":"A dialy used javascript code repository ","archived":false,"fork":false,"pushed_at":"2025-02-10T11:36:20.000Z","size":102,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-10T12:25:31.515Z","etag":null,"topics":["beginner-javascript","javascript","javascript-codes"],"latest_commit_sha":null,"homepage":"https://bluewindlab.net","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xenioushk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-05T08:54:57.000Z","updated_at":"2025-02-10T11:36:23.000Z","dependencies_parsed_at":"2024-09-08T21:53:59.349Z","dependency_job_id":null,"html_url":"https://github.com/xenioushk/javascript_101","commit_stats":null,"previous_names":["xenioushk/javascript_101"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xenioushk%2Fjavascript_101","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xenioushk%2Fjavascript_101/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xenioushk%2Fjavascript_101/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xenioushk%2Fjavascript_101/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xenioushk","download_url":"https://codeload.github.com/xenioushk/javascript_101/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241443002,"owners_count":19963717,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["beginner-javascript","javascript","javascript-codes"],"created_at":"2024-11-13T05:26:36.508Z","updated_at":"2025-03-02T00:26:15.431Z","avatar_url":"https://github.com/xenioushk.png","language":null,"readme":"# JavaScript 101\n\nA dialy used javascript code repository\n\n## Define functions (3 styles)\n\n### Style 1\n\n```javascript\n// regular style.\nfunction helloWorld() {\n  console.log('hello world')\n}\n\n// call the function\nhelloWorld()\n```\n\n### Style 2\n\n```javascript\n// assigned to a constant\nconst helloWorld = function () {\n  console.log('hello world')\n}\n\n// call the function\nhelloWorld()\n```\n\n### Style 3\n\nThis type of function declaration often use in react application.\n\n```javascript\n// arrow function.\n\nconst helloworld3 = () =\u003e {\n  console.log('hello world')\n}\n\n// call the function\nhelloWorld()\n```\n\n## Array map\n\n**Example 1**\n\n```javascript\nconst myArray = ['JS', 'CSS', 'HTML5', 'PHP', 'JAVA']\n\nmyArray.map((value, index) =\u003e {\n  console.log(value)\n  console.log(index)\n})\n```\n\n**Example 2**\n\n```javascript\nconst myNumbers = [1, 2, 3, 4, 5, 6]\n\nconst newMyArray = myNumbers.map((val) =\u003e {\n  return val * 4\n})\n```\n\n**Output:** [4,8,12,16,20,24]\n\n## Template literals\n\n**Example: 1**\n\nIf `isBlobUrl(url)` returns `true` then output class name will be `my-class-img is-loading`. Else, it outputs `my-class-img`\n\n```javascript\n\u003cdiv className={`my-class-img ${ isBlobUrl(url) ? \"is-loading\" : \"\" }`} \u003e\n```\n\n## Conditional\n\n**Example: 1**\n\nIf `isBlobUrl(url)` returns `true` then the `\u003cSpinner /\u003e` component will be excuted.\n\n```javascript\n{\n  isBlob(url) \u0026\u0026 \u003cSpinner /\u003e\n}\n```\n\n**Example: 2**\n\nIf the URL is true, then application will print `Do something here`.\n\n```javascript\n{\n  url \u0026\u0026 \u003cdiv\u003eDo something here\u003c/div\u003e\n}\n```\n\n## Puppeteer Project Used functions\n\n### Import a node package to JS file\n\nInstall the package.\n\n```bash\nnpm i puppeteer\n```\n\nOpen the JS file (example.js) and add the following code to import puppeteer.\n\n```javascript\nconst puppeteer = require('puppeteer')\n```\n\n### Better version of settimeout\n\n```javascript\n// This script will pause the application for 1 second\nawait new Promise((resolve) =\u003e setTimeout(resolve, 1000))\n```\n\n## Export a JavaScript for as CJS module.\n\nLet create a file called common.js. Add the following lines of code into that file.\n\n```javascript\n// Define some constants\nconst APP_NAME = 'My App'\nconst VERSION = '1.0.0'\nconst baseDomain = 'https://app.me/'\nconst baseFolderName = 'app'\nconst baseDir = `./${baseFolderName}` // Base directory for offline files (Folder name)\nconst zipFileName = `${baseFolderName}.zip`\nconst zipFileOutputDir = './' // root directory of the script.\nconst logDir = `./log`\n\nconst dynamicPageUrl = 'https://app.me/mahbub'\n\n// Define a common function\nfunction greet(name = '') {\n  return `Hi ${name}, Welcome to ${APP_NAME} v${VERSION}`\n}\n\n// Export constants and function\nmodule.exports = {\n  baseDomain,\n  baseDir,\n  baseFolderName,\n  zipFileName,\n  zipFileOutputDir,\n  dynamicPageUrl,\n  APP_NAME,\n  VERSION,\n  logDir,\n  greet,\n}\n```\n\nOpen the JS file (example.js) and add the following code to import puppeteer.\n\n```javascript\n//Destructuring all the variables and methods\nconst { baseDomain, baseDir, baseFolderName, zipFileName, logDir, greet } = require('common')\n//Use the method of exported file.\n\nconst sayHello = greet('Mahbub')\n// Will print 'Hi Mahbub, Welcome to My App v1.0.0'\nconsole.log(sayHello)\n```\n\n## ESM VS CJS\n\n![ESM VS CJS](/previews/esm_vs_cjs.png)\n\n## Acknowledgement:\n\n[https://bluewindlab.net](https://bluewindlab.net)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxenioushk%2Fjavascript_101","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxenioushk%2Fjavascript_101","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxenioushk%2Fjavascript_101/lists"}