Comment séparer fichier html et javascript

Bonjour à toute la communauté,

je suis passionné par les multiples composantes du web ce qui m'a conduit vers le webmapping, bon voilà mon problème : j'ai récupéré ce code sur un site il permet de faire du webmapping avec les bibliothèque openlayers et Jquery. La plupart des tutoriels que je suis recommande de séparer les fichiers html, javascript et le fichier css. alors j'ai voulu séparer ce code suivant les 3 trois fichiers. lorsqu'on clique sur les boutons qui devraient normalement changer la couche ça ne marche pas, je suppose que j'ai du commettre une erreur surtout lors de l'appel du fichier javascript car c'est celui que je maitrise le moins. quelqu'un pourrait il m'aidé avec un peu de commentaire si possible
merci d'avance
voici le code que je veux separer en trois fichiers: html, css et javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>OpenLayers 3 Layer Switcher Example</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css" type="text/css">
<style>
html           { width:100%; height:100%; margin:0; }
body           { width:100%; height:100%; margin:0; font-family:sans-serif; }
#map           { width:100%; height:100%; margin:0; }
#toolbox       { position:absolute; top:8px; right:8px; padding:3px; border-radius:4px; color:#fff; background: rgba(255, 255, 255, 0.4); z-index:100; }
#layerswitcher { margin:0; padding:10px; border-radius:4px; background:rgba(0, 60, 136, 0.5); list-style-type:none; } 
</style>
</head>
<body>
 
<div id="map"></div>
<div id="toolbox">
<ul id="layerswitcher">
<li><label><input type="radio" name="layer" value="0" checked> MapQuest Satellite</label></li>
<li><label><input type="radio" name="layer" value="1"> MapQuest Hybrid</label></li>
<li><label><input type="radio" name="layer" value="2"> MapQuest OSM</label></li>
<li><label><input type="radio" name="layer" value="3"> OSM</label></li>
</ul>
</div>
 
<script src="http://openlayers.org/en/v3.0.0/build/ol.js" type="text/javascript"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
function switchLayer()
 {
  var checkedLayer = $('#layerswitcher input[name=layer]:checked').val();
  for (i = 0, ii = layers.length; i < ii; ++i) layers[i].setVisible(i==checkedLayer);
 }
 
$(function() { switchLayer() } );
$("#layerswitcher input[name=layer]").change(function() { switchLayer() } );
 
var layers = [];
layers[0] = new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'sat'}) });
layers[1] = new ol.layer.Group({ layers: [ new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'sat'}) }), new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'hyb'}) }) ] });
layers[2] = new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'osm'}) });
layers[3] = new ol.layer.Tile({ source: new ol.source.OSM() });
 
var map = new ol.Map({
  target: 'map',
  controls: ol.control.defaults().extend([ new ol.control.ScaleLine({ units:'metric' }) ]),
  layers: layers,
  view: new ol.View({
    center: ol.proj.transform([0, 10], 'EPSG:4326', 'EPSG:3857'),
    zoom: 3
  })
});
</script>
</body>
</html>