https://github.com/learnwithfair/javascript-documentation
javascript-documentation with [learnwithfair, Learn with fair, Rahatul Rabbi, Md Rahatul Rabbi ,rahatulrabbi]
https://github.com/learnwithfair/javascript-documentation
documentation javascript js learn-with-fair learnwithfair rahatul-rabbi rahatulrabbi webdevelopment
Last synced: 7 days ago
JSON representation
javascript-documentation with [learnwithfair, Learn with fair, Rahatul Rabbi, Md Rahatul Rabbi ,rahatulrabbi]
- Host: GitHub
- URL: https://github.com/learnwithfair/javascript-documentation
- Owner: learnwithfair
- Created: 2024-05-01T04:02:18.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-02T18:19:11.000Z (about 2 years ago)
- Last Synced: 2025-02-26T16:50:00.618Z (over 1 year ago)
- Topics: documentation, javascript, js, learn-with-fair, learnwithfair, rahatul-rabbi, rahatulrabbi, webdevelopment
- Homepage:
- Size: 796 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JAVASCRIPT-DOCUMENTATION
Thanks for visiting my GitHub account!
**JavaScript** is the most powerful and versatile programming language used in the web. It is a lightweight, cross-platform, single-threaded and interpreted programming language. It is a commonly used programming language to create dynamic and interactive elements in web applications. It is easy to learn, compiled language. [more](https://www.w3schools.com/js/)
- JavaScript is the world's most popular programming language.
- JavaScript is the programming language of the Web.
- JavaScript is easy to learn.
### [Code-Example](https://github.com/learnwithfair/java-script)
## Source Code (Download)
[Click Here](https://mega.nz/folder/RGFiUApD#PoKIVCwF8IkQhE2PHw1XxQ)
## Required Software (Download)
- VS Code, Download ->https://code.visualstudio.com/download
## Project Roadmap
| |
| :----------------------------: |
| Roadmap |
|  |
## Mistakes
| | |
| :--------------------------------: | :--------------------------------: |
|  |  |
|  |  |
|  |  |
|  |  |
|  |  |
## Table of Contents
1. [Basic Javascript Topics](#1-basic-javascript-topics)
[1.1 Introduction to Javascript](#11-introduction-to-javascript)
[1.2 Output Console Object & comment](#12-output--comment)
[1.3 Tokens - variables, data types, operators](#13-tokens)
[1.4 Control Flow](#14-control-statement)
[1.5 Function](#15-function---traditional)
[1.6 Hositing, scope of variables and closures](#16-hoisting-scope-of-variables--closures)
- [1.6.1 Hositings](#161-hoisting)
- [1.6.2 Scope of variables and closures](#162-scope-and-closures)
- [1.6.3 var, let, const](#163-var-let-const)
[1.7 Objects](#17-objects)
[1.8 Arrays](#18-arrays)
[1.9 Built-in methods](#19-built-in-methods)
[1.10 Error Handling](#110-errors-and-errors-handling)
[1.11 JSON and JSDoc](#111-json-and-jsdoc)
2. [Intermediate JavaScript Topics](#2-intermediate-javascript-topics)
[2.1 Document Object Model (DOM) and Events](#21-document-object-model-dom-and-events)
[2.2 Browser Object Model (BOM)](#22-browser-object-model-bom)
[2.3 Local storage](#23-local-storage)
[2.4 ES6 Features](#24-es6-features)
[2.5 Higher order and callback functions](#25-higher-order-and-callback-functions)
[2.6 Best Practices](#26-best-practices)
[2.7 npm & ESLint setup](#27-npm--eslint-setup)
[2.8 You must know](#28-you-must-know)
[2.9 API Calling](#29-api-calling)
3. [Advanced JavaScript Topics](#3-advanced-javascript-topics)
[3.1 OOP](#31-object-oriented-programming-oop)
[3.2 Bank Demo](#32-bank-demo)
[3.3 Prepare for technical test](#33-prepare-for-technical-test)
[3.2 Testing and Debugging]()
- [Unit testing with frameworks like Jest]()
- [Debugging tools and techniques]()
[3.3 Security]()
- [Cross-Site Scripting (XSS) prevention]()
- [Cross-Site Request Forgery (CSRF) prevention]()
- [Content Security Policy (CSP)]()
[3.4 Performance Optimization]()
- [Code optimization]()
- [Network optimization (lazy loading, asset compression)]()
- [Rendering optimization (requestAnimationFrame)]()
[3.5 Design Patterns]()
- [Singleton pattern]()
- [Module pattern]()
- [Observer pattern]()
- [Factory pattern]()
[3.6 Project ideas]()
- Caclulator - basics, BMI
- Converter - Temperature
- guessing game, dynamic cards, user preference (youtube)
- API - Weather, Joke, Dog, Products
- [Todo CRUD APP](https://todo-crud-app-2023.netlify.app/)
## 1. Basic Javascript Topics
### 1.1 Introduction to Javascript
- What is Javascript?
- A programming language for web.
- it can be used in front-end and back-end
- It adds interactivity to the web page such as adding items to the carts, form validation etc.
- Example: Create a button with HTML, Style with CSS and add clicking functionality by using javascript
- A demo
```js
// index.html
Document
Welcome to JS
Delete
// style.css
button {
background-color: green;
color: white;
padding: 0.5rem;
border: none;
border-radius: 5px 5px;
}
// index.js
function deleteItem() {
alert("The item is deleted!");
}
```
- What are the ways to add javascript?
- **Inline JavaScript:**
Inline JavaScript is directly embedded within an HTML document using the `` tag. It's placed directly within the HTML code and typically used for small scripts or quick actions.
```html
<!DOCTYPE html>
<html>
<head>
<title>Inline JavaScript Example</title>
</head>
<body>
<h1>Welcome to JS</h1>
<button onclick="alert('The item is deleted!')">Delete</button>
</body>
</html>
```
In this example, the JavaScript code `alert('The item is deleted!')` is executed when the button is clicked.
- **Internal JavaScript:**
Internal JavaScript is placed within the HTML document, but it's placed in the `<script>` tag within the `<head>` or `<body>` section of the HTML. This allows you to keep your JavaScript separate from your HTML content.
```html
<!DOCTYPE html>
<html>
<head>
<title>Internal JavaScript Example</title>
<script>
function deleteItem() {
alert("The item is deleted!");
}
Internal JavaScript Example
Delete