JavaScript tutorial


JavaScript 101: Your First Step into Modern Web Development

Welcome to CodeTechiess! If you want to make websites interactive, move elements around a screen, or handle data, JavaScript (JS) is the language you need to master. Along with HTML and CSS, it forms the “Big Three” of web development.

In this guide, we’ll skip the fluff and get straight to the code.


🏗️ What is JavaScript?

While HTML provides the structure and CSS provides the styling, JavaScript provides the behavior. It allows you to:

  • Create image sliders.
  • Validate form inputs.
  • Fetch data from APIs.
  • Build full-scale web and mobile applications.

💻 Your First “Hello World”

You don’t need any fancy software to start. You can run JavaScript right in your browser!

  1. Right-click on this page and select Inspect.
  2. Click on the Console tab.
  3. Type the following and hit Enter:

JavaScript

console.log("Hello, CodeTechiess!");

📝 The Basics: Variables and Data Types

In JavaScript, we use let and const to store information.

  • let: Use this for values that might change.
  • const: Use this for values that stay the same.

Example Code:

JavaScript

const websiteName = "CodeTechiess"; // This won't change
let visitorCount = 100;           // This might increase

console.log("Welcome to " + websiteName);

🛠️ Essential Data Types

Here are the most common types of data you will work with:

  • String: Text wrapped in quotes (e.g., "Hello").
  • Number: Integers or decimals (e.g., 25 or 9.99).
  • Boolean: True or False (e.g., isLoggedIn = true).
  • Array: A list of items (e.g., ['HTML', 'CSS', 'JS']).

🚀 How to Add JS to Your Website

To add this to your codetechiess.com project, place your code inside <script> tags right before the closing </body> tag of your HTML file:

HTML

<script>
  alert("Welcome to the JavaScript Tutorial!");
</script>

🎯 Wrap Up

This is just the tip of the iceberg. In our next post, we will dive into Functions and Loops to make your code more powerful.

Keep Coding!

— The CodeTechiess Team


Categories:

No Responses

Leave a Reply

Your email address will not be published. Required fields are marked *