<script> tags used in HTMl

JavaScript
1

Hi,
I am relatively new to javascript. I have seen that js is used by placing the js code in side tags just above the closing body tag. Is this a good practice? Since there are so many js code snippets that one can use even in a small program, won’t the entire HTML get filled with js code snippets inside the tags? What is the best way to organize the js code? Please answer this question keeping in view that I am trying to use js in Laravel. I know that Laravel9 uses vue but I wish to use simple plain js. Thanks.

2

usually you would write the js code in a different file, and link it to the html file.

writing js code directly in the script tags is valid, but may become untidy

3

The after the body tags & before the html closing bracket placement is so that the scripting won’t be started until after the page fully loads, having it at the top could cause errors if you have javascript functions asking for DOM elements that havent been loaded yet. but its extremely common to reference outside JS files exactly how you would with CSS stylesheets this way with the script tags placed there.Instead of having your entire program embedded underneath your markup it could be sitting in its own folder in its own file, or across multiple files.

4

@im59138 @rkalo Hi and thanks to you both for the reply. So I take it that it is best to have the js code placed in external files in its folder and loaded into the dom from there. I now have a follow-up question which is related but involves code. Is it best practice to ask it here or ask it in another thread? Thanks

5

If its related to your first question you can ask here.

6

Hi @Cody_Biggs thanks for letting me know.
I have a part of an HTML Form below:

<form name="recruiter_profile" action="{{route('recruiters.store')}}" method="post" enctype="multipart/form-data">
  @csrf
  <!-- component to display an error message -->
      @error('profile_picture')
        <x-custom-alert type="error" :message="$message" id="my-custom-alert" class="alert alert-danger alert-dismissible fade-out" role="alert"/>
      @enderror
    <div class="container-profile">
        <!-- First Column - Profile Picture -->
      <div class="column">
        <div class="profile-pic-preview" id="profile-pic-preview"></div>
        <div class="form-group">
          <label for="profile_picture">Profile Picture:</label>
          <input type="file" id="profile_picture" name="profile_picture" value="{{ old('profile_picture') }}" accept="image/*" onchange="previewProfilePicture()">
        </div>  
      </div>

The component with ID “my-custom-alert” displays a fading message and the CSS that does so is:

.alert {
  opacity: 1;
  transition: opacity 3.0s ease;
}

.alert.fade-out {
  opacity: 0;
}

As soon as the message fades, it triggers the following javascript :

    <script>
       const alert = document.getElementById('my-custom-alert');

        function test() {
            console.log("wow-test"); // Log the message to the console
        }

        // Add an event listener to trigger the fade-out
        alert.addEventListener('transitionend', test);

        // Trigger the fade-out (e.g., when closing the alert)
        alert.classList.add('fade-out');
    </script>

I get the message wow-test in the console. As per the advise provided in the earlier messages in this thread, I wanted to move this js code inside tags to an external file, say test.js. But I am unable to find a way to get the fading message to trigger the external js file, like it triggers the js inside the tags.
I want to keep my js code external in files and not in the HTML code. My configuration of js is correct because other js code triggered by say an Onchange event etc. works well. Thank you.