https://github.com/xenioushk/javascript_101
A dialy used javascript code repository
https://github.com/xenioushk/javascript_101
beginner-javascript javascript javascript-codes
Last synced: 4 months ago
JSON representation
A dialy used javascript code repository
- Host: GitHub
- URL: https://github.com/xenioushk/javascript_101
- Owner: xenioushk
- Created: 2024-09-05T08:54:57.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-02-10T11:36:20.000Z (5 months ago)
- Last Synced: 2025-02-10T12:25:31.515Z (5 months ago)
- Topics: beginner-javascript, javascript, javascript-codes
- Homepage: https://bluewindlab.net
- Size: 99.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JavaScript 101
A dialy used javascript code repository
## Define functions (3 styles)
### Style 1
```javascript
// regular style.
function helloWorld() {
console.log('hello world')
}
// call the function
helloWorld()
```
### Style 2
```javascript
// assigned to a constant
const helloWorld = function () {
console.log('hello world')
}
// call the function
helloWorld()
```
### Style 3
This type of function declaration often use in react application.
```javascript
// arrow function.
const helloworld3 = () => {
console.log('hello world')
}
// call the function
helloWorld()
```
## Array map
**Example 1**
```javascript
const myArray = ['JS', 'CSS', 'HTML5', 'PHP', 'JAVA']
myArray.map((value, index) => {
console.log(value)
console.log(index)
})
```
**Example 2**
```javascript
const myNumbers = [1, 2, 3, 4, 5, 6]
const newMyArray = myNumbers.map((val) => {
return val * 4
})
```
**Output:** [4,8,12,16,20,24]
## Template literals
**Example: 1**
If `isBlobUrl(url)` returns `true` then output class name will be `my-class-img is-loading`. Else, it outputs `my-class-img`
```javascript
```
## Conditional
**Example: 1**
If `isBlobUrl(url)` returns `true` then the `` component will be excuted.
```javascript
{
isBlob(url) &&
}
```
**Example: 2**
If the URL is true, then application will print `Do something here`.
```javascript
{
url &&
Do something here
}
```
## Puppeteer Project Used functions
### Import a node package to JS file
Install the package.
```bash
npm i puppeteer
```
Open the JS file (example.js) and add the following code to import puppeteer.
```javascript
const puppeteer = require('puppeteer')
```
### Better version of settimeout
```javascript
// This script will pause the application for 1 second
await new Promise((resolve) => setTimeout(resolve, 1000))
```
## Export a JavaScript for as CJS module.
Let create a file called common.js. Add the following lines of code into that file.
```javascript
// Define some constants
const APP_NAME = 'My App'
const VERSION = '1.0.0'
const baseDomain = 'https://app.me/'
const baseFolderName = 'app'
const baseDir = `./${baseFolderName}` // Base directory for offline files (Folder name)
const zipFileName = `${baseFolderName}.zip`
const zipFileOutputDir = './' // root directory of the script.
const logDir = `./log`
const dynamicPageUrl = 'https://app.me/mahbub'
// Define a common function
function greet(name = '') {
return `Hi ${name}, Welcome to ${APP_NAME} v${VERSION}`
}
// Export constants and function
module.exports = {
baseDomain,
baseDir,
baseFolderName,
zipFileName,
zipFileOutputDir,
dynamicPageUrl,
APP_NAME,
VERSION,
logDir,
greet,
}
```
Open the JS file (example.js) and add the following code to import puppeteer.
```javascript
//Destructuring all the variables and methods
const { baseDomain, baseDir, baseFolderName, zipFileName, logDir, greet } = require('common')
//Use the method of exported file.
const sayHello = greet('Mahbub')
// Will print 'Hi Mahbub, Welcome to My App v1.0.0'
console.log(sayHello)
```
## ESM VS CJS
## Acknowledgement:
[https://bluewindlab.net](https://bluewindlab.net)