2014年9月16日火曜日

長くなったJavaScriptのコードを外部のファイルに外出しする(外部JSファイル) 

<html>
<head>
<meta charset="UTF-8">
<title>map</title>
<script>
function initialize(){
    var canvas = document.querySelector("#map-canvas");
    
    var myLatlng = new google.maps.LatLng(35.001107,135.759331);
    var mapOptions = {
        zoom:16, //表示サイズ
        center: myLatlng
    };
    var map = new google.maps.Map(canvas, mapOptions);
    
    //ピンの位置を設定します
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'share karasuma!'
    });
}

google.maps.event.addDomListener(window, "load", initialize);
</script>
</head>

<body>
<div id="map-canvas"></div>
</body>
</html>

HTMLファイル内に上記のようにJavaScriptのコードを書いたとします。コードが長くなってHTMLの記述が読み難くなった時、新しいファイルを作成して、記述を外出しします。

たとえばこのコードは地図の表示に関するものなので、コードの外出し用のファイルをmap.jsとします。


切り出し前のファイルをindex.htmlだとすると、index.htmlがあるフォルダ内にjsフォルダを作成し、jsフォルダ内にmap.jsファイルを作ります。map.jsファイルには、

function initialize(){
    var canvas = document.querySelector("#map-canvas");
    
    var myLatlng = new google.maps.LatLng(35.001107,135.759331);
    var mapOptions = {
        zoom:16, //表示サイズ
        center: myLatlng
    };
    var map = new google.maps.Map(canvas, mapOptions);
    
    //ピンの位置を設定します
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'share karasuma!'
    });
}

google.maps.event.addDomListener(window, "load", initialize);

切り出し元のindex.htmlに記述されていたJavaScriptのコードから、<script>と</script>を抜いたものを記載し、

index.htmlの方は、

<script src="./js/map.js"></script>

中身を抜いた<script>タグに上記の様にsrc=”./js/map.js”と追加すると、切り出したmap.jsのコードを読み込み実行することができます。

関数だけまとめたものや、クイズの際に作成する出題のオブジェクトを外部ファイルに切り出しておくと、コードの見通しが良くなり、開発がスムーズになります。

例:コードを切り出した後のindex.html
<html>
<head>
<meta charset="UTF-8">
<title>map</title>
<script src="./js/map.js"></script>
</head>

<body>
<div id="map-canvas"></div>
</body>
</html>
投稿者 時刻:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)