Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shoeb1989/javascript_practice
A comprehensive guide to learning JavaScript, covering key concepts, functions, objects, DOM manipulation, asynchronous programming, and advanced topics with practical demos.
https://github.com/shoeb1989/javascript_practice
array asynchronous-javascript basics-of-javascript dom-manipulation es6 functions objects
Last synced: 9 days ago
JSON representation
A comprehensive guide to learning JavaScript, covering key concepts, functions, objects, DOM manipulation, asynchronous programming, and advanced topics with practical demos.
- Host: GitHub
- URL: https://github.com/shoeb1989/javascript_practice
- Owner: Shoeb1989
- Created: 2024-06-30T14:51:15.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-11-04T16:09:02.000Z (14 days ago)
- Last Synced: 2024-11-04T17:19:31.657Z (14 days ago)
- Topics: array, asynchronous-javascript, basics-of-javascript, dom-manipulation, es6, functions, objects
- Language: JavaScript
- Homepage:
- Size: 178 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## javascript_practice
# JavaScript Learning Process
A structured approach to learning JavaScript, including essential topics, demos, and resources.
## Learning Steps
1. **Basics of JavaScript**
- Syntax, variables, data types, and basic control structures.
2. **Functions**
- Declaration, expression, and arrow functions.
3. **Objects and Arrays**
- Creating and manipulating objects and arrays.
4. **DOM Manipulation**
- Selecting elements, modifying content, and handling events.
5. **Asynchronous JavaScript**
- Understanding callbacks, Promises, and async/await.
6. **Advanced Topics**
- ES6+ features, modules, error handling, and debugging.
## Demos
### 1. Basics of JavaScript
```javascript
let name = "Alice";
let age = 30;
if (age >= 18) {
console.log(`${name} is an adult.`);
} else {
console.log(`${name} is a minor.`);
}
```
### 2. Functions
```javascript
Copy code
function greet(user) {
return `Hello, ${user}!`;
}
const greetArrow = (user) => `Hello, ${user}!`;
console.log(greet("Alice"));
console.log(greetArrow("Bob"));
```
### 3. Objects and Arrays
```javascript
Copy code
const person = {
name: "Alice",
age: 30,
hobbies: ["reading", "traveling"]
};
console.log(person.name);
console.log(person.hobbies[0]);
const numbers = [1, 2, 3, 4, 5];
numbers.push(6);
console.log(numbers);
```
### 4. DOM Manipulation
```html
Copy code
DOM Manipulation
Hello World
Change Title
const button = document.getElementById("changeTitle");
button.addEventListener("click", () => {
document.getElementById("title").textContent = "Title Changed!";
});
```
### 5. Asynchronous JavaScript
```javascript
Copy code
function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve("Data fetched!");
}, 2000);
});
}
async function getData() {
const data = await fetchData();
console.log(data);
}
getData();
```