DEV Community: Dev Pattani

Day 02 : Script Loading Methods, Variables, Scopes, and Error Handling in JavaScript

Dev Pattani — Mon, 08 Apr 2024 18:00:43 +0000

Hey everyone! 🚀

Today, on day 2 of my JavaScript challenge, I explored script loading methods, variables, scopes, and error handling in JavaScript.

Script Loading Methods:
- JavaScript offers two main methods for loading scripts: internal and external loading.
- Internal loading involves placing the script directly within the HTML file, while external loading refers to linking an external script file.

Internal Method

External Method

HTML File

JS File

Attributes like 'defer' and 'async' control the execution behavior of external scripts.
- The 'defer' attribute ensures that the script is executed only after the HTML content is fully loaded.
- The 'async' attribute allows the script to be loaded asynchronously, meaning it doesn't block the rendering of the page.

Types of Errors in JavaScript:
- JavaScript code can encounter various types of errors, including syntax errors, runtime errors, and logic errors.
- Syntax errors occur when the code violates the rules of the language.
- Runtime errors occur during the execution of the code, such as trying to access an undefined variable.
- Logic errors, also known as bugs, occur when the code does not produce the expected output due to flawed logic.
Variables in JavaScript:
- Variables in JavaScript are used to store and manipulate data.
- Keywords like 'let', 'const', and 'var' are used to declare variables.
- 'let' and 'const' are block-scoped, meaning they are limited to the block of code in which they are declared.
- The 'var' keyword declares function-scoped variables that are accessible within the function in which they are defined.
Scopes in JavaScript:
- Scopes in JavaScript determine the accessibility of variables in different parts of the code.
- Global scope: Variables declared outside of any function are in the global scope and can be accessed anywhere in the code.
- Local scope: Variables declared inside a function are in the local scope and can only be accessed within that function.
- Block scope: Introduced with 'let' and 'const', block scope restricts variable accessibility to the block of code in which they are defined (e.g., within loops or conditionals).

Understanding scopes is crucial for writing clean and efficient JavaScript code and avoiding variable conflicts.

In the upcoming days, we will explore more about variables and scopes.

Stay tuned for more updates on my JavaScript challenge journey! 🌟

Let's keep coding and learning together! 💻✨

Looking forward to sharing more insights with you all.

Happy coding! 🚀

DEV PATTANI

Day 01: Introduction to HTML, CSS, and JavaScript

Dev Pattani — Sun, 07 Apr 2024 16:00:00 +0000

Today marked the beginning of my 100-day journey to master JavaScript, starting with understanding the fundamentals of web development. I delved into the world of HTML, CSS, and JavaScript, the three core technologies that power the web.

HTML (HyperText Markup Language):
HTML is the foundation of web development, used to structure the content of web pages. It consists of elements that define the different parts of a webpage, such as headings, paragraphs, images, and links.

CSS (Cascading Style Sheets):
CSS is responsible for styling the HTML elements, making them visually appealing. It controls the layout, colors, fonts, and overall design of a webpage. CSS allows developers to create responsive and attractive web designs.

JavaScript:
JavaScript is a powerful programming language that adds interactivity and dynamic behavior to web pages. It can manipulate HTML elements, handle events, make asynchronous requests to servers, and create interactive features like sliders, forms, and animations. JavaScript is unique in that it can be used both on the client-side and server-side of web development.

What can JavaScript really do?
JavaScript is a versatile language that can perform a wide range of tasks on both the client-side and server-side of web development. Some of the key capabilities of JavaScript include:

DOM manipulation: Changing the content and style of HTML elements on a webpage.
Event handling: Responding to user actions such as clicks, scrolls, and keyboard inputs.
Asynchronous requests: Fetching data from servers without reloading the entire page.
Form validation: Checking user inputs before submitting data.
Animations and effects: Creating dynamic and interactive elements on a webpage.

Interpreted Vs. Compiled Code:
JavaScript is an interpreted language, meaning that the code is executed line by line from top to bottom at runtime by the browser. This allows for quick development and easy debugging. In contrast, compiled languages like C++ or Java are translated into machine code before execution, resulting in faster performance but requiring a compilation step before running the code.

Server-side Vs. Client-side Code:
Server-side code runs on the server and is responsible for processing requests, handling data, and generating dynamic content before sending it to the client. Common server-side languages include Node.js, Python, PHP, and Ruby on Rails. JavaScript can also be used on the server-side with platforms like Node.js. On the other hand, client-side code runs in the user's browser and is responsible for creating interactive user interfaces and handling user events. JavaScript is the primary language for client-side development.

As I wrap up Day 01 of my learning journey, I am excited to explore more advanced concepts in the coming days and apply my knowledge to build interactive web applications. Stay tuned for more updates on my progress in mastering JavaScript!

Happy coding! 🚀

Dev Pattani

My 100-Day JavaScript Learning Challenge Journey Begins Today!

Dev Pattani — Sun, 07 Apr 2024 06:28:43 +0000

Hey everyone,

I am thrilled to share that today marks the beginning of my 100-day JavaScript learning challenge! As someone from a non-tech background, I am embarking on this journey to explore the world of JavaScript and enhance my skills over the next 100 days.

In this blog series, I will be documenting my experiences as I delve into JavaScript, following the user-friendly MDN JavaScript documentation, the engaging "Chai aur Code" JavaScript playlist on YouTube, and leveraging the assistance of ChatGPT for additional support and guidance.

These resources have been recommended to me as a beginner, and I am excited to see how they will help me grasp the fundamentals of JavaScript. ChatGPT will provide me with valuable insights and explanations to complement my learning journey.

While I may not have a technical background, I am eager to learn and grow through this challenge. JavaScript is known for its versatility and importance in web development, and I am keen to understand its concepts and applications.

I invite you to join me on this journey as I navigate through the world of JavaScript with the help of ChatGPT. Your support, insights, and tips are greatly appreciated as I take on this exciting adventure.

Stay tuned for updates on my progress, reflections, and newfound knowledge as I tackle this 100-day challenge. Let's make the most of the next 100 days and code together!

Happy coding! 🚀

Dev Pattani