DEV Community

Cover image for Introduction to JavaScript
Emin Altan
Emin Altan

Posted on • Edited on

Introduction to JavaScript

Introduction to JavaScript

This guide is prepared for those who want to learn JavaScript. I am skipping information about when or for what purpose JavaScript emerged. You've probably researched these details. In my opinion, it's beneficial to learn the philosophy of the job; I won't include similar information in the guide.

The guide requires basic HTML knowledge.

In this article, we'll cover:

I will touch upon.

I hope you enjoy reading.

Yazının Türkçe versiyonu için linke tıklayabilirsiniz.

JavaScript code is placed between <script></script> elements.

💡 For older browsers to interpret JavaScript code, the type attribute must be defined. In this context, when you encounter an expression like <script type="text/javascript">, you can understand that the web page is prepared for older browsers. In modern browsers, the type attribute doesn't need to be defined.

JavaScript code can be placed between the <head></head> or <body></body> elements.

Example

<!DOCTYPE html>
<html>
  <head>
    <script>
      /* In this example, JavaScript code is placed between the <head></head> elements */
      console.log("test");
    </script>
  </head>
  <body>
    <h2>JavaScript Example</h2>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <body>
      <script>
        /* In this example, JavaScript code is placed between the <body></body> elements */
        console.log("test");
      </script>
      <h2>JavaScript Example</h2>
    </body>
  </head>
</html>

💡 Placing JavaScript code near the </body> tag ensures faster interpretation and execution of the code.

Example

<!DOCTYPE html>
<html>
  <head>
    <body>
      <h2>JavaScript Example</h2>
      <script>
        /* Placing JavaScript code near the </body> tag will make it run faster. */
        console.log("test");
      </script>
    </body>
  </head>
</html>

We can use JavaScript code between <script></script> elements or include JavaScript code from an external file.

Using external JavaScript code provides us with several advantages:

  • Separation of HTML and JavaScript code makes the document easier to read, understand, and manage.

  • The same code can be reused on other pages, avoiding the need to rewrite it, following the DRY11 principle.

  • JavaScript code can be cached, leading to faster page loading.

In the example below, the import of external JavaScript files onto a web page is demonstrated.

Example

<script src="script1.js"></script>
<script src="script2.js"></script>

There are four methods commonly used to obtain output in JavaScript:

  • To output content into an HTML element, you can use the innerHTML property.

  • To output content within an HTML document, you can use the document.write() method.

  • For displaying alert messages, you can use the window.alert() method.

  • For logging messages to the console, you can use the console.log() method.

Let's briefly overview these methods; I will delve into details throughout the process.

Sometimes, we may want to use the result of an operation as output within an HTML element. In such cases, we generally use the innerHTML property.

Example

<!DOCTYPE html>
<html>
  <body>
    <p id="content"></p>
    <script>
      /* In the example, the HTML element with the #content id will be located, and the text "test" will be inserted into it. */
      document.getElementById("content").innerHTML = "test";
    </script>
  </body>
</html>

The document.write() method is generally used for testing purposes.

❗ If the document.write() method is called after the HTML page has loaded, the content of the page will be overwritten.

In the example below, the content of the HTML page gets cleared, and the string "Test" is used within the document when the button is clicked.

Example

<!DOCTYPE html>
<html>
  <body>
    <p>document.write() method is called with onClick HTML event handler.</p>

    <!-- When the button is clicked, the document.write() method will execute. -->
    <button
      type="button"
      onclick="document.write(`Test`)"
    >
      Click
    </button>
  </body>
</html>

In the example below, the content of the HTML page will not be cleared.

Example

<!DOCTYPE html>
<html>
  <body>
    <p>
      The document content will not be cleared because the document.write()
      method is not called.
    </p>
    <script>
      document.write("Test");
    </script>
  </body>
</html>

Sometimes, we may want to create message boxes, similar to those in Windows. In such cases, the window.alert() method is used.

⚠️ In JavaScript, the window keyword represents the global scope object. This means that all variables, properties, and methods defined in JavaScript are, by default, part of the window object. The use of the window keyword is optional; it can be omitted.

Example

/* Both statements have the same meaning. */
window.alert("Test");

alert("Test");

The console.log() method is commonly used in debugging processes. It is used to output information to the JavaScript console. To access the console, we can use the browser's inspector. Typically, you can open it by right-clicking and selecting 'Inspect' or by pressing the F12 key. Then, navigate to the 'Console' tab, where you can use console.log() to output various information for debugging purposes."

Console

Example

/* The code will print the string "Test" to the console. */
console.log("Test");
Test

In JavaScript, there is only the window.print() method. This allows obtaining a hard copy or soft copy of the content on the browser screen.

Example

<!DOCTYPE html>
<html>
  <body>
    <!-- Helps us to print the content from the browser. -->
    <button onclick="window.print()">Print Screen</button>
  </body>
</html>

In this section, we briefly introduced JavaScript. We discussed the use of JavaScript code, factors affecting performance, and some JavaScript methods commonly used in debugging processes.

Footnotes

  1. DRY an acronym for "Don't Repeat Yourself," is an approach that aims to avoid repeating the same code.

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs