Got some issues using Firebase-hosting function

Question

I am now doing a project using Firebase Hosting feature. And I got some problem with it, it is my Javascript cannot use the Firebase SDK which is included within the html file after initialization. However, I can use the the Firebase SDK with the CDN.

The SDK initialized by the hosting features and the CDN repository works the same way, right?

here is the photo of the directory after project being initialized as a firebase hosting project

and I have the SDK after initialization except I just move it to the lowest part within the body tag

  <!-- update the version number as needed -->
    <script defer src="/__/firebase/7.13.1/firebase-app.js"></script>
    <!-- include only the Firebase features as you need -->
    <script defer src="/__/firebase/7.13.1/firebase-auth.js"></script>
    <script defer src="/__/firebase/7.13.1/firebase-database.js"></script>
    <script defer src="/__/firebase/7.13.1/firebase-messaging.js"></script>
    <script defer src="/__/firebase/7.13.1/firebase-storage.js"></script>
    <!-- initialize the SDK after all desired features are loaded -->
    <script defer src="/__/firebase/init.js"></script>

And below is the Javascript part I used to test whether it is work or not, I put it under the SDK.

<script>
firebase.database().ref('events').on('value',function(snapshot){
   var result=snapshot.val();
   result=JSON.stringify(result);
   document.getElementById("data").innerHTML=result;
});
</script>

And it kept showing this error message:

Uncaught ReferenceError: firebase is not defined

However, when I perform the same code on a html file while using the CDN of the SDK, it works.

Can anyone answer my question ?

P.S.: project initialized by following the procedure stated on the documentation. And I double checked there is no spelling mistakes.