Skip to content

javascript-basics.md

Latest commit

 

History

History
173 lines (130 loc) · 5.1 KB

javascript-basics.md

File metadata and controls

173 lines (130 loc) · 5.1 KB
Raw

JavaScript: Unlocking Web Interactivity

JavaScript (JS) is a powerful scripting language that breathes life into websites, making them interactive and dynamic. Let's explore this fascinating world!

🚀 Preparing Your Toolkit

Before we embark on our JavaScript journey, make sure you have the following tools:

  1. Text Editor: Think of it as your coding canvas. Choose one like Visual Studio Code or Sublime Text.

  2. Web Browser: Your window into the web. Popular browsers like Chrome, Firefox, or Edge will be your stage.

✨ Your First JavaScript Code

  1. Create an HTML File: Fire up your text editor, create a new file, and save it with a .html extension. This is where our coding adventure begins:

    <!DOCTYPE html>
<html>
  <head>
    <title>My First JavaScript Code</title>
  </head>
  <body>
    <button onclick="showMessage()">Click me</button>
    <p id="message"></p>
    <script>
      function showMessage() {
        document.getElementById("message").innerHTML = "Hello, World!";
      }
    </script>
  </body>
</html>

  2. Adding JavaScript: Within the <script> tags, we can write JavaScript code. In this example, we've created a script that changes text when a button is clicked.

📚 Mastering the Basics

As you delve deeper into JavaScript, you'll discover these fundamental concepts:

  • Variables: Like containers to store values. You can declare them by using var, let, or const keywords. While var and let can have interchangeable values, the value in const is not interchangeable. Examples:
var name = "John";
let age = 25;
const pi = 3.14;
  • Functions: Functions are blocks of code that can be called later in your program. You can define functions using the function keyword, followed by the function name and any parameters. some examples:
function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("Alice");
  • Conditionals: Conditionals are used to make decisions in your code based on certain conditions. You can use if, else if, and else statements to control the flow of your program. For example:
let score = 85;

if (score >= 90) {
  console.log("A Grade");
} else if (score >= 80) {
  console.log("B Grade");
} else {
  console.log("C or Lower");
}
  • Loops: Loops are used to repeat a block of code a certain number of times. You can use for and while loops to iterate over arrays or perform other actions. For example:
for (let i = 0; i < 5; i++) {
  console.log("Count: " + i);
}

let count = 0;
while (count < 3) {
  console.log("Looping...");
  count++;
}
  • Basic Math Operations: JavaScript supports basic math operations such as addition, subtraction, multiplication, and division. Here are a few examples:
Copy code
let x = 5;
let y = 10;
let sum = x + y; // 15
let difference = y - x; // 5
let product = x * y; // 50
let quotient = y / x; // 2
  • Strings: Strings are used to represent text in JavaScript. You can declare strings using single or double quotes. Here are a few examples:
let greeting = "Hello, World!";
let name = "Alice";
  • Arrays: Arrays are used to store a collection of data. You can create arrays using square brackets and separate the values with commas. Here are a few examples:
let numbers = [1, 2, 3, 4, 5];

console.log(numbers[2]); // Access the third element (3)
  • String/Array methods: JavaScript provides many built-in methods for working with strings and arrays. Here are a few examples:
// String methods
let message = "Hello, world!";

console.log(message.length); // 13
console.log(message.toUpperCase()); // "HELLO, WORLD!"
console.log(message.indexOf("world")); // 7

// Array methods
let numbers = [1, 2, 3, 4, 5];

console.log(numbers.length); // 5
console.log(numbers.reverse()); // [5, 4, 3, 2, 1]
console.log(numbers.join(", ")); // "5, 4, 3, 2, 1"
  • Objects (properties/methods): Objects are key-value pairs used to represent real-world entities or concepts, as well as to organize and structure data. Here is an example:
// Create the object
const person = {
  name: "Jody",
  age: 30,
  gender: "male",
  sayHello: function () {
    console.log("Hello!");
  },
};

// Accessing the object
console.log(person.name); // Output: Jody
console.log(person["age"]); // Output: 30

person.sayHello(); // Output: Hello!

// Adding to or updating the object
person.age = 35;
person.job = "developer";

console.log(person.age); // Output: 35
console.log(person.job); // Output: developer

// Removing properties
delete person.gender;

console.log(person.gender); // Output: undefined

🚧 Enhancing Your Web Pages

You can also keep your JavaScript code in separate files and link them to your HTML using the <script> tag. This keeps your code organized and easy to manage.

 

Enjoy exploring the endless possibilities of web interactivity. 🚀