- JQuery [In Progress]
- NodeJS [In Progress]
- Express.js [In Progress]
Made a Project with JQuery (12 May 2024)
About Game Game is about play song and will harder while level is going up and need to memorize the random color tracks
What I have learned : JQuery animation : JQuery DOM : How to search if I dun know anything
What I considered : need more logical thinking : how to search if I dun know anything
Made 3 projects with NodeJS.
- File system(fs): create, write and read file with NodeJS.
- NPM: node package manager - learned packages.
- Qr Code Generator: generate a qr code depend on user input. Used inquirer package to get the user input(URL) and File system(fs) to create file for qr code and url history.
NPM standard package for Node.js
- Express.js - framework for Node.js
- Nodemon - to restart Node.js server everytime code is updated
- body-parser - Node.js body parsing middleware
- validator - string validator and sanitizers
- uuid - to generate UniqueId
- axios
- path
Node file system enables interacting with file system. Official documentation, W3 School, Geeksforgeeks
To use this -
old - const fs = require('fs');
modern - import fs from "fs";
fs.readFile - read contents of file, replacing the file if it
fs.readFile(file, option, callback)
file
- file path
option
- encoding(utf-8)
Callback - to return error
and data
Example:
fs.readFile("message.txt", "utf-8", (err, data) => {
if (err) throw err;
console.log(data);
});
fs.writeFile - writes data to a file, replacing the file if it is already exists.
fs.writeFile(file, data:String, option)
file
- file name
data
- data inside file
option
- to return callback function and others
Example:
fs.writeFile("message.txt", "Hello World(Node File System)", (err) => {
if (err) throw err;
console.log("The file has been saved.");
});
fs.appendFile - writes data to a file, replacing the file if it is already exists. Similar with fs.writeFile
fs.appendFile(file, data:String, option)
file
- file name
data
- data inside file
option
- to return callback function and others
Example:
fs.appendFile('qrcode_urls.txt', url, (err) => {
if (err) throw err;
console.log("The file has been saved.");
});
Express.js is a Node.js web framework.
To get started
-
install express
npm install express
ornpm i express
-
import express
import express from "express";
-
declare express to app(variable)
const app = express()
-
start the app and listen on port(eg: 3000)
app.listen(3000, () => { console.log("Server is running on port: 3000"); });
Example:
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(port, () => {
console.log(`Example app listening on port ${port}`);
});
path - provides utilities for working with files and directory paths.
- path.dirname(path) - return directory name of the
path
url - provides utilities for URL resolution and parsing
- url.fileUrlToPath(url[, option]) - convert URL to file path.
res.sendFile(path, [, option] [, fn])
- transfers the file at given path
res.render(view)
- method to render view and send rendered HTML(EJS) string to client.
Middleware functions are function that have access to the request object (req), the response object (res), and the next middleware function in the application's request-response cycle.
Middleware functions can perform the following tasks:
- Execute any code.
- Make changes to the request and the response objects.
- End the request-response cycle.
- Call the next middleware function in the stack.
If the current middleware function does not end the request-response cycle, it must call next() to pass control to the next middleware function. Otherwise, the request will be left hanging.
An Express application can use the following types of middleware:
- Application-level middleware
- Router-level middleware
- Error-handling middleware
- Built-in middleware
- Third-party middleware
EJS is templating language to generate HTML markup with plain JavaScript
run npm i ejs
to install ejs
<% %>
- to render JavaScript file<%= %>
- return value inside HTML<%- %>
- render EJS inside HTML markup<%# %>
- comment<%_ %>
<%%
- return<%