Nehoray

Intro to JavaScript


JavaScript, often abbreviated as JS, is a versatile and dynamic programming language that plays a crucial role in web development. While Java and JavaScript share a similar name, they are distinct languages with different purposes and features.


Get ready

As we continue through this article and the code practices, I encourage you to implement the code in your system and check the result on your web browser and terminal!

For coding with HTML and JavaScript languages, we will use Visual Studio Code (VS Code) as our IDE (Integrated Development Environment). To continue this article, prepare yourself with:


Origins of JavaScript

JavaScript was created by Brendan Eich in 1995 while he was working at Netscape Communications Corporation. Despite their names, Java and JavaScript are fundamentally different. While Java is a general-purpose programming language, JavaScript was initially designed to enhance web pages by enabling client-side interactivity.

To get started, let's take a look at a simple JavaScript example embedded within an HTML document: 

<!-- JavaScript code for handling button click event -->
            <!DOCTYPE html>
            <html>
            <head>
              <title>Event Handling</title>
              <script>
                function handleClick() {
                  alert("Button clicked!");
                }
              </script>
            </head>
            <body>
              <button onclick="handleClick()">Click Me</button>
            </body>
            </html>

To implement this code in Visual Studio Code (VS Code), follow these steps:

  • Open VS Code: Install Visual Studio Code if not already installed.
  • Create a new HTML file: Open VS Code, create a new file, and save it as index.html.
  • Paste code: Copy the provided HTML and JavaScript code, and paste it into index.html.
  • Save and open in browser: Save the file (Ctrl + S). Right-click on index.html and choose Open with Live Server or directly open in a web browser.
  • Observe alert: A browser window will open with the alert saying "Hello, JavaScript!".


JavaScript in Web Development

  • Client-Side Scripting: JavaScript is primarily used for client-side scripting to make web pages interactive and dynamic.

Consider a scenario where a button click triggers an alert message: 

<!-- JavaScript code for handling button click event -->
              <!DOCTYPE html>
              <html>
              <head>
                <title>Event Handling</title>
                <script>
                  function handleClick() {
                    alert("Button clicked!");
                  }
                </script>
              </head>
              <body>
                <button onclick="handleClick()">Click Me</button>
              </body>
              </html>

Implement this code and observe how clicking the button results in the display of the alert message. This demonstrates the responsiveness that JavaScript brings to web pages.


  • Frameworks and Libraries: JavaScript has a rich ecosystem of frameworks and libraries that simplify and expedite web development.

For instance, here's a simple usage of the jQuery library: 

<!-- Example using jQuery library -->
                <!DOCTYPE html>
                <html>
                <head>
                  <title>Using jQuery</title>
                  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
                  <script>
                    // jQuery code for document ready event
                    $(document).ready(function() {
                      console.log("Document is ready!");
                    });
                  </script>
                </head>
                <body>
                  <p>Hello, jQuery!</p>
                </body>
                </html>

Copy this code into an HTML file and observe the output in the browser console (right click, enter Inspect, click on console). This introduces you to the power of using external libraries in JavaScript.


Basic JavaScript Concepts

  • Variables and Data Types: JavaScript uses variables to store data, and it is loosely typed.

Let's explore a simple JavaScript code example of variable usage: 

// JavaScript code for variables and data types
              let message = "Hello, JavaScript!"; // String variable
              let number = 42; // Numeric variable
              console.log(message, number); // Output: Hello, JavaScript! 42

To implement this code in Visual Studio Code (VS Code), follow these steps:

  • Open VS Code: Launch the application.
  • Create a new JavaScript file: Click "File" -> "New File". Save it as script.js.
  • Paste code: Copy the provided code and paste it into script.js.
  • Save the file: Save the file (Ctrl + S).
  • Run Code and View Output: Click on the run icon (or Ctrl+Shift+D), choose Node.js, and check the result in the terminal underneath.

Remember: if you see this error message in the terminal: 'node' is not recognized as an internal or external command, restart your system and open a new session on VS Code.


  • Functions: Functions are a fundamental concept in JavaScript.

Consider a basic function for greeting: 

// JavaScript code for a simple function
        function greet(name) {
          return "Hello, " + name + "!";
        }
        
        let greeting = greet("John");
        console.log(greeting); // Output: Hello, John!

Implement this code and try calling the greet function with different names. Observe how the function returns personalized greetings.


  • Objects and Prototypes: JavaScript is based on a prototype-based object model.

Here's a simple example of an object and its prototype-based function: 

// JavaScript code for objects and prototypes
        let person = {
          name: "Alice",
          age: 30,
          greet: function() {
            return "Hello, my name is " + this.name + ".";
          }
        };
        
        console.log(person.greet()); // Output: Hello, my name is Alice.

Implement this code to create your own person object or modify the existing one. Explore how objects and their methods work in JavaScript.


Asynchronous JavaScript

  • Promises and Async/Await: Modern JavaScript introduces Promises and Async/Await.

Explore asynchronous programming with Promises and Async/Await: 

// JavaScript code using Promises and Async/Await
        function fetchData() {
          return new Promise(resolve => {
            setTimeout(() => {
              let data = "Async data received!";
              resolve(data);
            }, 2000);
          });
        }
        
        async function fetchDataAsync() {
          let result = await fetchData();
          console.log(result); // Output: Async data received!
        }
        
        fetchDataAsync();

Implement this code and observe how asynchronous operations can be managed using Promises and Async/Await. Experiment with different timeout values to see the effect on the result.


Conclusion

In conclusion, JavaScript is a powerful and dynamic scripting language that enhances the interactivity and functionality of web pages. JavaScript opens up new possibilities in web development, offering a unique set of tools and frameworks to build modern and interactive web applications. Take the time to implement these examples, experiment with variations, and observe the results to deepen your understanding of JavaScript.


❮ Previous Next ❯