JavaScript for Web Development
Tags: javascript, programming, productivity, webdev
Published: 2021-06-19 17:50:18

**This blog is inspired by the Tweet by [Pratham](https://twitter.com/Prathkum)**

For more amazing content do follow him on Twitter.

 Now let's dive into the blog: 

**JavaScript** is an enormous language but you don't need to learn everything in the beginning.

Here is the detailed explanation on JavaScript for Web Development.

JavaScript is a kind of language that as you progress deeper in the field, you will come to know a lot more cool concepts about it.

Prerequisites if you want to learn JavaScript for web development.
- **HTML**
- **CSS**

First and foremost, it's a programming language so you should know about basic programming concepts:

- Data types in JavaScript
- Variables
- Statements
- Control statements
- Operators
- And other basic stuff....

If you know programming beforehand and have some experience in any programming language like C, C++, Java, Python etc. then this should not be hard for you.

But you can start with the **ZERO** knowledge as well.

There are some advanced topics in JavaScript which you don't need to learn in the beginning. For ex:

- Async/await
- callbacks, promises, etc...

These are some advance concept which you can learn after you have a decent knowledge of JavaScript.

You need to cover some intermediate topics so that you can add behaviour to your website. They are

- Arrays and their methods
- Objects
- Functions
- Arrow function

These will help you to work with DOM.

![dom](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kob6c1kmtz8bcp3y8fsj.png)

Let's talk about **DOM** a little bit. It stands for **Document Object Model**.

Consider it as a tree that comprises the content of a particular web page (HTML)

![dom2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w4omwdz6s0e480o7dvz1.jpg)

JavaScript and DOM are connected.

We use DOM to access the elements but write JavaScript code in order to modify them.

Here is a simple example:

![para](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xe15hif5zcz3oewisrss.png)

>Don't get confused here. DOM is not a programming language it's just a model using which we can access and modify HTML elements.

Basic things you need to cover in DOM

## Finding HTML Elements

- `getElementsByTagName()`
- `getElementsById()`
- `getElementsByClassName()`

## Changing HTML Element

- `element.innerHTML`
- `element.attribute`
- `element .style.property`
- `element.setAttribute`(attr, value)

## Adding and deleting elements

- `document.createElement(element)`
- `document.removeChild(element)`
- `document.appendChild(element)`

Just one last thing and then you will be able to make fully-fledged websites.

After learning these basic properties and methods, its time to move onto Events and Event Listener

The `addEventListener()` method attaches an event handler to the specified element.

Up to this point you will able to make a fully functional website using JavaScript. But there are always some margin of improvement

Here are some advanced key concepts

- Hoisting
- Closures
- Callbacks
- Promises
- Async & Await
- Currying
- And other ES6,ES7 features

**Project-based learning is the best. [Here](https://www.freecodecamp.org/news/javascript-projects-for-beginners/) are some practice projects you can build**

Do follow [Pratham](https://twitter.com/Prathkum) if you liked this content and let me know if you want more such blogs about Web Development.

### If you liked my content consider following me on [Twitter](https://twitter.com/cenacr007_harsh)

## Thank You!