DEV Community

Majeedat Abdulwahab
Majeedat Abdulwahab

Posted on

2 1

JavaScript Basics: Your First Step Into Web Development

📚TABLE OF CONTENTS

  1. What is JavaScript
  2. Setting up JavaScript
  3. Basic Syntax and Concepts
  4. Introduction to Control Flow
  5. Why JavaScript matters in Web Development
  6. Conclusion

🖋️ What is JavaScript?


JavaScript is a versatile programming language for the web. It enables developers to create interactive and dynamic webpages. Ever wondered how a button performs an action when clicked? That’s JavaScript at work!

From validating forms to building complete web applications, JavaScript is an essential tool for modern web development.


🛠️Setting up JavaScript

1. In the Browser: You can experiment with JavaScript directly in your browser's console. To open it:

  • On Windows: Press F12 or Ctrl + Shift + J
  • On Mac: Press Command + Option + J

Once open, type console.log("Hello, World!"); and press Enter to see your first JavaScript message.

2. In Code Editors: Developers typically write JavaScript in code editors like Visual Studio Code (VS Code). To get started:

  • Install VS Code.
  • Create a .html file and include your script using script tags, or create a separate .js file.

Example:

<script>
  console.log("Hello from JavaScript!");
</script>
Enter fullscreen mode Exit fullscreen mode

📖 Basic Syntax and Concepts

1. Variables and Constants
var, let, const: These are used to store values.

  • let is block-scoped and widely used.
  • const is for values that don’t change.

Example:

let username = "MJ";
const age = 26;
console.log(`Hello, ${username}! You are ${age} years old.`);
Enter fullscreen mode Exit fullscreen mode

2. Data Types
JavaScript supports several data types:

  • Primitive types: Numbers, Strings, Booleans, Null, Symbol, BigInt and Undefined.
  • Complex types: Objects, Arrays. Example:
let isLearning = true; // Boolean
let tools = ["HTML", "CSS", "JavaScript"]; // Array
console.log(tools[0]); // Outputs: HTML
Enter fullscreen mode Exit fullscreen mode

🔁 Introduction to Control Flow

1. If/Else Statements
Use these to run code based on conditions.
Example:

let score = 85;
if (score >= 90) {
  console.log("You got an A!");
} else if (score >= 70) {
  console.log("You passed!");
} else {
  console.log("Keep trying!");
}
Enter fullscreen mode Exit fullscreen mode

2. Loops
Loops help you repeat actions:

  • For Loop:
for (let i = 1; i <= 3; i++) {
  console.log(`Iteration ${i}`);
}

Enter fullscreen mode Exit fullscreen mode
  • While Loop
let count = 0;
while (count < 3) {
  console.log(`Count is ${count}`);
  count++;
}

Enter fullscreen mode Exit fullscreen mode

🌟 Why JavaScript matters in Web development

JavaScript powers the web, enabling websites to respond to user actions without reloading.

  • Enhances user experience with interactivity.
  • Forms the basis of modern frameworks like React, Angular, and Vue.
  • Used for building both the frontend and backend (e.g., with Node.js).

JavaScript isn't just limited to websites, it's used in mobile apps and game development.


🔚 CONCLUSION

JavaScript is the language of the web, and mastering its basics sets the foundation for more advanced development. Take your time exploring these concepts and experimenting with your own code.

Next Steps: The next article will focus on JavaScript Functions, an essential building block for writing reusable and efficient code.

Until next time, your friendly neighborhood writer, MJ
Bye!!!!

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (4)

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Primitive types: Numbers, Strings, Booleans, Null, Undefined.

You missed Symbol and BigInt

Collapse
 
agunechemba profile image
Agunechemba Ekene

This is just a summary of javascript... Well written.

Collapse
 
majeedatwahab profile image
Majeedat Abdulwahab

Thank you!!!

Collapse
 
majeedatwahab profile image
Majeedat Abdulwahab

Thank you for pointing that out... I appreciate the feedback.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more