Aditya Chaudhary
WEEK-2( DOM Manipulation and Events)

WEEK-2( DOM Manipulation and Events)

Aditya Chaudhary's photo
Aditya Chaudhary
·

3 min read

Hi everyone, welcome to the second article about my experiences, lessons, projects, and challenges from this second week. This blog is divided into six sections, so you can focus on the parts that interest you:

  1. Things learnt this week.

  2. Steps I followed.

  3. Problems encountered.

  4. How I solved those problems.

  5. Projects made this week.

  6. Resources used.

1. THINGS LEARNT THIS WEEK:

As you know, I have already learned the basics of JavaScript up to loops. You can refer to my last article for more details. This week, I continued with more Javascript-related topics, focusing on Data Object Manipulation (DOM) and events.

DATA OBJECT MANIPULATION(DOM):-

In my view, the DOM is how JavaScript can access different parts of our HTML and CSS. It can target any element, tag, or class on the entire webpage.

When a webpage loads, the browser automatically creates a DOM of the page. It is like a tree where each node is a child of the node above it. We access these nodes using this structure.

EVENT:

In my opinion, events are changes in the state of any object in our document. These changes can happen for various reasons, such as:

  1. Mouse Clicks

  2. Keyboard Events

  3. Form Events

  4. Print Events, and many more

What happens after a reason is detected is called event handling. There are two types of event handling:

INLINE (not recommended as it clutters the HTML code) and EXTERNAL (using JavaScript).

2. STEPS I FOLLLOWED

As usual, I began by watching tutorials on Udemy and YouTube, then moved on to the MDN documentation because it's important to read the material too. I would watch tutorials, code along with them, and take notes while learning from the MDN documentation. I discovered that taking breaks when I felt tired, instead of trying to study everything at once, helped improve my learning. Creating some basic code along the way is a good way to practice and truly understand how the code works.

3. PROBLEMS ENCOUNTERED:-

  1. Getting Confused with Syntax: The confusion that comes with syntax still continues like last week, will try to remember and create more small projects.

  2. Lack of Confidence : There is lack of confidence because the syntax and concept in itself feels new and confusing

  3. Analyzing Logical Errors*: The logical errors are the worst ,here the most common error was regarding connecting CSS and JS files with our HTML file.

4. HOW I SOLVED THOSE PROBLEMS:-

  1. Getting Confused with Syntax: I took a pen and paper and tried writing it out myself. I think more coding will definitely make me more comfortable with the syntax.

  2. Lack of Confidence: I spent more time analyzing the events triggered and tried to learn them like a story, which helped me a lot.

  3. Analyzing Logical Errors: First, I always check whether the CSS and JavaScript files are connected properly by using the alert function in JavaScript and setting a background color in CSS.

5. PROJECTS MADE:

PROJECTS MADE THIS WEEK:

You can find all the source codes on my GitHub profile, "JanwinAditya."

  1. DICE GAME: It assigns random numbers to player 1 and player 2, and the player with the higher number wins the game. You can settle debates with your sibling using this project.

  2. DRUMKIT: This is a basic event-triggering project where we can make different sounds using either keyboard or mouse clicks.

  3. CALCULATOR: This is a basic JavaScript file showing the implementation of higher-order functions.

6. RESOURCSE:-

  1. UDEMY

  2. YOUTUBE

  3. MDN JAVASCRIPT DOCUMENTATION

  4. STACK OVERFLOW

JavaScriptProgramming BlogsjourneyimprovementcodingProgramming Tips