Beginner: Where to put javascript?

Hi,

just started with Framework7 and can´t figure out where to put javascript.

I have a button in home.f7.html:
<a href="#" class="button button-raised button-fill" id="LoadData" >Load data</a>

and in src/js/app.js

$$('#LoadData').on('click', function () {
   alert('Hello');
});

when trying to insert

<script>
	function loadData(){
	alert("load");
};
</script>

in index.html or home.f7.html it does not show up in my app.

hi, if you dont use components, place all your code in app.js

i suggest you to use components;

https://framework7.io/docs/router-component.html

Thanks for the fast reply.

Components seems interesting, but step by step…
So first a solution with app.js

I have
function loadData(){ alert("load"); };

in src/js/app.js

and

<a href="#" onclick="loadData()">Test</a>

in home.f7.html.

Result: (index):33 Uncaught ReferenceError: loadData is not defined

app.js

var $$ = Dom7;
var app = new Framework7({
  // App root element
  root: '#app',
  // App Name
  name: 'myApp',
  // App id
  id: 'com.myapp.test',
  // Enable swipe panel
  panel: {
    swipe: 'left',
  },
  theme: 'ios',
  // Add default routes
  routes: [someRoutes],
  methods: {
    myFnc () {
      let vm = this
      // Use Framework-7 alert
      vm.dialog.alert('load')
      // Or native alert
      alert("load")
    }
  }
  // ... other parameters
});
var mainView = app.views.create('.view-main');

$$('.my-btn').on('click', app.methods.myFnc)

home.f7.html

<template>
   ...
   <a href="#" class="button button-raised button-fill" @click="loadData">Load data</a>
   ...
</template>
<script>
  export default {
    // ...
    methods: {
      loadData() {
        alert("load")
      }
    }
  }
</script>

Thanks - the home.f7.html from nolimits4web works.

In the app.js solution from pvtallulah the native alert fires on load, not on click. The Framework-7 alert does not fire.

Placed in routes was also not successful

var routes = [
  {
    path: '/',
    component: HomePage,
     methods: {
	 	loadData: function(){
	 	let vm = this;
      // Use Framework-7 alert
    	  vm.dialog.alert('Load');
		  alert("Load");
    }
  },    
  },

loadData was not found.

Thank you anyway, I will deal with the solution to place it in the html page. Maybe I will understand the rest after more experience with Framework7 - which is a great tool so far.

Sorry to call for help again. Somehow I am missing some basics.
Now I want to use an external js library.
Placed in app.js

import Dexie from 'dexie';

Works fine, in app.js I have access to Dexie.
But not in my home.f7.html file. What do I have to do to use Dexie there?

You should also do import Dexie from 'dexie'; in home.f7.html