Skip to content

Latest commit

 

History

History
205 lines (158 loc) · 5.31 KB

javascript-basics.md

File metadata and controls

205 lines (158 loc) · 5.31 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 using var, let, or const keywords. 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. Example:

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. 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. 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. Examples:

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. 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. Example:

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

console.log(numbers[2]); // Access the third element (3)

String and Array Methods

JavaScript provides many built-in methods for working with strings and arrays. 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 and Methods)

Objects are key-value pairs used to represent real-world entities or concepts, as well as to organize and structure data. 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. Example:

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>Welcome to my website!</h1>
    <button onclick="showMessage()">Click me</button>
    <p id="message"></p>
  </body>
</html>
// script.js
function showMessage() {
  document.getElementById("message").innerHTML = "Hello, World!";
}

 

Enjoy exploring the endless possibilities of web interactivity. 🚀