Alters Dev - Easier and Faster

JavaScript 101

  • On September 22, 2023
  • By Sam

JavaScript is a popular programming language used primarily for developing web applications. It is a versatile language that runs on the client-side (in the web browser) as well as the server-side (with the help of frameworks like Node.js).

Step 1: Setting Up

To write JavaScript code, you'll need a text editor and a web browser. Popular text editors include Visual Studio Code, Sublime Text, or Atom. Once you have a text editor, create an HTML file (e.g., index.html) and open it in a web browser.

Step 2: Adding JavaScript to HTML

Inside your HTML file, add a `<script>` tag to include your JavaScript code. You can either place it in the `<head>` section or just before the closing `</body>` tag. For example:

html
        
<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Tutorial</title>
    <script src="./script.js"></script>
  </head>
  <body>
    <!-- Your HTML content here -->
  </body>
</html>

Step 3: Writing JavaScript Code

Create a new file in the same directory as your HTML file and name it "script.js" (or any other name you prefer). This is where you'll write your JavaScript code.

For starters, let's write a simple "Hello, World!" program:

javascript
        
// script.js
console.log("Hello, World!");

Save the file, and when you refresh your HTML page in the browser, you should see the message "Hello, World!" in the browser's console.

Step 4: JavaScript Basics

JavaScript is a dynamically typed language, which means you don't need to specify variable types explicitly. Here's an example of variable declaration and usage:

javascript
        
// script.js
let greeting = "Hello";
let name = "John";
let message = greeting + ", " + name + "!";
console.log(message);

Step 5: Interacting with HTML Elements

JavaScript allows you to manipulate HTML elements and respond to user actions. You can access HTML elements using their `id` attribute and perform various operations on them. Here's an example that changes the text of a `<p>` element when a button is clicked:

html
        
<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Tutorial</title>
    <script src="./script.js"></script>
  </head>
  <body>
    <p id="my-paragraph">Original Text</p>
    <button onclick="changeText()">Click Me</button>
  </body>
</html>
javascript
        
// script.js
function changeText() {
  let paragraph = document.getElementById("my-paragraph");
  paragraph.textContent = "New Text";
}

In this example, when the button is clicked, the `changeText()` function is called. It retrieves the `<p>` element by its `id` and updates its `textContent` property.

Result

Result

Original Text

Conclusion

These are just the basics of JavaScript. There is a wide range of concepts and techniques to explore, including control structures (if-else statements, loops), functions, objects, arrays, and more. You can find comprehensive tutorials and resources on websites to continue your JavaScript learning journey.

Remember to practice and experiment with code to solidify your understanding. Happy coding!