comment separer fichier html et javascript

Toutes vos questions sur jQuery, CSS, HTML5, mise en page...
Salvatore
 
Messages: 1
Inscription: 17 Nov 2015, 18:57

comment separer fichier html et javascript

Messagede Salvatore » 17 Nov 2015, 19:09

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 une carte avec possibilité de cocher les couches 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. et mon code fonctionne mais quand on coche une case l'interaction ne marche pas, je suppose que j'ai du commettre une erreur surtout sur l'intégration du jquery car c'est celui que je maitrise le moins. quelqu'un pourrait il m'aidé avec un peu de commentaire si possible. voici le code que je veux séparer dans trois fichiers : html, css, javascript
Code: Tout sélectionner
<!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>

Avatar de l’utilisateur
Galdon
Administrateur du site
Administrateur du site
 
Messages: 2180
Inscription: 06 Sep 2008, 22:05

Re: comment separer fichier html et javascript

Messagede Galdon » 18 Nov 2015, 22:40

Je suppose que tu dois tester ta page en ouvrant directement le fichier dans le navigateur (exemple : file:///C:/map.html) au lieu d'utiliser un serveur web local (comme WAMP ou EasyPHP).

Chez moi, ta page ne fonctionne pas quand j'y accède en file:///, par contre elle fonctionne sans problème quand j'y accède en http:// via EasyPHP.

Le problème vient de l'inclusion de jQuery qui utilise une URL sans scheme, ce qui signifie que le scheme est relatif (//ajax.googleapis.com...), et quand on y accède via file:///, il va essayer de charger le fichier file:///ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js au lieu de charger https://ajax.googleapis.com/ajax/libs/j ... ery.min.js.

Pour régler le problème, il faut remplacer ça :
Code: Tout sélectionner
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

par ça :
Code: Tout sélectionner
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
"Si tu veux me parler, envoie-moi un... FAX !" - George Abitbol


Retourner vers HTML / CSS / Javascript

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité