DEV Community

Devwares profile image Sampson Ovuoba
Sampson Ovuoba for Devwares

Posted on • Originally published at devwares.com on

Tutorial: How Javascript Works

#javascript #webdev #programming #codenewbie

How JavaScript is placed in our projects

They are several ways JavaScript can be placed in our projects.

The <script> Tag

JavaScript code is placed between the <script>and <script>tags in HTML. This is one of the ways JavaScript can be placed in our codes.

Code:

<script>document.getElementById("demo").innerHTML = "My First JavaScript";</script>
Enter fullscreen mode Exit fullscreen mode

JavaScript in <head>

JavaScript can also be included in the <head> tag. A JavaScript function is placed in the <head> section of an HTML page in this example. When a button is pressed, the function is activated (called):

Code:

<!DOCTYPE html>
<html>
  <head>
    <script>
      function myFunction() {
        document.getElementById('example-1').innerHTML = 'Paragraph changed.';
      }
    </script>
  </head>
  <body>
    <h1>A Web Page</h1>
    <p id="example-1">A Paragraph</p>
    <button type="button" onclick="myFunction()">Try it</button>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Most of the time, the best place to put JavaScript code is at the bottom of the ,<body> element. Because script compilation slows down the display, placing scripts at the bottom of the <body> element increases display speed.

JavaScript in <body>JavaScript can also be included in the HTML code's body. In this example, a JavaScript function is placed in the <body> portion of an HTML page. When a button is pressed, the function is activated (called).

Code:

<!DOCTYPE html>
<html>
<body>
    <h1>A Web Page</h1>
    <p id="demo">A Paragraph</p>
    <button type="button" onclick="myFunction()">Try it</button>
    <script>
    function myFunction() {
      document.getElementById("demo").innerHTML = "Paragraph changed.";
    }
    </script>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

External JavaScript files

Scripts can also be inserted in external files: External scripts are useful when the same code is used in multiple web pages. The file extension.js is used for JavaScript files. To use an external script, enter the name of the script file in the src (source) property of a <script> tag:

Code:

<script src="myScript.js"></script>
Enter fullscreen mode Exit fullscreen mode

External file: myScript.js

External JavaScript Advantages There are some advantages of storing scripts in external files:

  • It separates HTML and code
  • It makes HTML and JavaScript easier to read and manage
  • Cache JavaScript files aid in page loading speed.
  • Adding many script files to a single page.

External References External scripts can be accessed through a full URL or a path relative to the currently displayed web page. This example utilizes a full URL to link to a script:

Code:

<script src="https://www.devwares.com/js/myScript1.js"></script>
Enter fullscreen mode Exit fullscreen mode

The following example employs a script located in a specific folder on the current website:

Code:

<script src="/js/myScript1.js"></script>
Enter fullscreen mode Exit fullscreen mode

The following example points to a script in the same folder as the current page:

Code:

<script src="myScript1.js"></script>
Enter fullscreen mode Exit fullscreen mode

Contrast Bootstrap UI Kit

Resources

You may find the following resources useful:

profile
_SurveyJS
 Promoted

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (0)

profile
Coherence
 Promoted

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Read next

kocreative profile image

Scripting: Creating Windows For Your After Effects Scripts

Kat -

aaravjoshi profile image

6 Powerful Python Techniques for Efficient Graph Processing and Analysis

Aarav Joshi -

arbythecoder profile image

Day 40: Implementing Advanced Role-Based Access Control (RBAC) with OPA Gatekeeper

Arbythecoder -

zirkelc profile image

TypeScript CLI: Automate Build and Deploy Scripts

Chris Cook -