ラベル Javascript の投稿を表示しています。 すべての投稿を表示
ラベル Javascript の投稿を表示しています。 すべての投稿を表示

2021年5月23日日曜日

Javascript で日付操作

 Javascriptで日付操作をするときnew Date()などで面倒だったけど、momentがよさそうだったのでとりあえずメモ。


[ドキュメント]
  http://momentjs.com/
[参考]
(わくわくBank)
https://www.wakuwakubank.com/posts/606-javascript-moment/

[インストール]

    npm install moment

[使い方]

  1. とにもかくにもインポート
    import moment from moment;
  2. 処理でのコーディング
    (現在日付を取得)
    moment().format("YYYY-MM-DD HH:mm:ss")

  3. こんなことも？
    (ロケール指定)
       moment.locale('ja')
    (加算:add)
       moment().add(数字,単位)
         単位: 年:'y',月:'M',週:'w',日:'d',時間:'h',分:'m',秒:'s'
    (減算:subtract)
       moment().subtract(数字,単位)
          単位は加算と同じ
    (差分:diff)
       元moment.diff(比較対象moment,単位,小数調整)
       単位は加算と同じ、デフォルトはミリ秒
    　小数調整は小数以下あり(true),なし(false)
    (はじめ:startOf と おわり:endOf）
    　moment().startOf(単位)  はじめ 
       moment().endOf(単位)　おわり
    　単位は加算と同じ
    (ほかの日時と比較:isAfter,isBefore,isSame)
       元より比較対照が後であればtrue : 元moment.isAfter(比較対象moment)
       元より比較対照が前であればtrue : 元moment.isBefore(比較対象moment)
       元と比較対照が同じであればtrue : 元moment.isSame(比較対象moment)
    (日付の生成)
      現在時刻（デフォルト) : moment()
      文字列で指定              : moment("2021-05-23")
      オブジェクトで指定     : moment({years:2021,months:5,days:23})
      Dateオブジェクト　　 : monent(new Date(2021,5,23))
投稿者 時刻: 0 件のコメント:
ラベル:

2021年5月22日土曜日

Javascriptでサーバへアクセスするのにfetchメソッドを使ってみる。

 
以前は、 XMLHttpRequest や jQuery の ajaxメソッドを使ってサーバへのアクセスをしていたけど、今はfetchメソッドを使うとシンプルにかけそうなのでなんとくなくメモ。

前は非同期処理をする際に、コールバック関数をつなげていくような見通しがわるいコード
になってたけど、イマドキはpromiseが使えるので、見た目すっきりでいい感じ。


(参考)
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch


[基本的な使い方(promise)]

fetch(接続先文字列, { オプション })
 .then((response) => {
　 //Responseオブジェクトが引数に設定される
    //httpステータス404とかでもここまで到達するのでResponse.statusかResponse.okプロパティで正常か判定をしたほうがよい。
    if (!response.ok) {
        throw new Error();
    }
    //ResponseのBody部を戻り値にしてやるBodyに設定されているデータに応じて容易に取得するためのメソッドが用意されている
　 // バイナリ:response.blob(),JSON形式: response.json() ,Text形式: response.text() ,FomrData形式: response.formData()

    return response.json(); //bodyがJSON文字列の場合の取得例
 })
 .then((data) => {
    //前のthenのリターンが引数として設定される
    //response body部の処理を記述する想定
   
    
 })
 .catch((error) => {
    // ネットワークトラブルか、then句での例外などの処理を記述
 });


<<GETの場合>>
オプションは省略可能
fetch(接続先文字列)


<<POSTの場合>>
オプション部分で、method,cache,bodyを指定する
fetch(接続先文字列, {   
    method: 'POST',
        cache: 'no-cache',
        headers: {
              'Content-Type': 'application/json',
        },
        body: data  //送りたいデータ
 }
)

bodyに設定設定するのは、テキストかformData,バイナリと何でもよい。

[json文字列の場合]
 適当なオブジェクト(data)をJSON.stringify(data)としてJSONに変換するだけでＯＫ
   body:JSON.stringify(data)


 ※オプション部分にヘッダーとして、Content-Typeなどを設定するとよい。
  headers: {
    'Content-Type': 'application/json',
  },

[formDataの場合]
ファイルアップロードとかする場合はformDataのほうがよさげ。
const data = new FormData();
let blob = new Blob(['Sample text'], {
    type: 'text/plain'
});data.append('data1', blob, 'foo.txt');

投稿者 時刻: 0 件のコメント:
ラベル:

2012年10月14日日曜日

Google Mapで吹き出し表示

Google Mapで吹き出し表示するには、  google.maps.infoWindowクラスを利用する。


 infoWindowのオブジェクトを作ってからopenメソッドで、表示対象とする地図オブジェクトを指定する。

      //オブジェクト取得
      info= new google.maps.InfoWindow({
        position: latlng,
         content: '吹き出しの内容'
      });
      //表示
       info.open(map);
   


contentには、表示する文字列を指定する。
HTMLのタグをつかえ、CSSクラスも指定可能。


吹き出しを表示しなくするにはcloseメソッドかopenメソッドにnullを指定する。
      info.close();
      info.open(null);

吹き出しの内容は後からsetContentメソッドで変更できる。
      info.setContent("あたらしい内容");


吹き出しの形はinfoWindowクラスのオプションでは変更できず、
オーバーレイのサブクラスを作るしかなさそう。



投稿者 時刻: 0 件のコメント:
ラベル: ,

Javascriptで一定間隔で処理を実行

Javascriptの組込み関数であるsetIntervalを使う。
setIntervalへ、実行したい関数オブジェクトと、実行間隔をミリ秒で指定する。

        setInterval(関数オブジェクト,実行間隔ms);

例） 1秒毎に関数を実行
setInterval(
     function(){
        //処理
     }
     ,1000);

一回だけする場合は、setTimeout関数を利用する。


投稿者 時刻: 0 件のコメント:
ラベル:

2012年10月13日土曜日

Google Map イベントに対する処理を指定

google.maps.event.addDomListener()を使う。;

google.maps.event.addDomListener(対象オブジェクト, イベント,イベント取得時に実行する関数オブジェクト);

google関連のオブジェクトはマニュアルにイベントが書いてある。  
投稿者 時刻: 0 件のコメント:
ラベル: ,

Google Mapを調べてみた

1)Google 地図表示
    １）APIの取り込み
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    　sensorの引数は端末GPSなど使うかの指定。true:利用
    2)DIVタグの用意
    　＊ID属性をつけないと指定できない
    　width,heightで表示サイズを指定できる。指定しないと全画面？
    　<div style="width:400px,height:300px" id="mymap"/>
    3)google.Maps.Mapクラスの生成(初期処理）
    　var map = new google.maps.Map(document.getElementById('mymap'), myOptions);

    　オプションとして、
        zoom:    表示倍率
        center:    中心位置   
        mapTypeID: 地図表示タイプ
      の３つは必要
    　zoomは整数値で指定　(０ー１９、数値が大きくなるほど拡大、小さくなるほど縮小)
      centerはgoogle.maps.LatLngクラスで緯度、経度を指定する。
    　mapTypeIDはgoogle.maps.MapTypeIdクラスで定義されている定数を指定する
        ROADMAP:地図のみ
        SATELLITE:航空写真のみ
        HYBRID:航空写真＋地図
        TERRAIN:地形
       
　    4)google mapを表示するためのイベントを設定
     　a) HTMlタグにイベントを記述
        <body onload="initialize();">
      b) Javascriptでイベントリスナーを登録
        google.maps.event.addDomListener()メソッドを利用して、イベントと、Javascriptの関数を指定する。
        google.maps.event.addDomListener(イベント対象オブジェクト, 'イベント名', 関数オブジェク
ト);
        例）ウィンドウ（ブラウザ）のロード終了時にinitialize関数を呼び出す
        google.maps.event.addDomListener(window, 'load', initialize);
   
2)任意位置に移動
    mapオブジェクトのsetCenter()メソッドを利用
   
    map.setCenter(new google.maps.LatLng(lat,lng));
    いわき駅：37.05846492309772,140.89227676391602
3)表示中地図の中心位置を取得
    map.getCenter()で、google.maps.LatLngが取得できる
    google.maps.LatLngからは
    緯度：lat(),経度:lng()
    でそれぞれ取得できる
4)マーカーを表示
    google.maps.Makerクラスを利用
    animationを指定すると、表示する際のアニメーションを指定することができる。
      var maker= new google.maps.Marker({
        position: new google.maps.LatLng(lat,lng),
        map: map,//表示したい地図
            animation:google.maps.Animation.DROP,
        title: 'いわき駅'
    　　icon:'images/sample.jpg'
      });
投稿者 時刻: 0 件のコメント:
ラベル: ,

2012年9月7日金曜日

いつかCreateJSも調べたいので、とりあえずメモ
投稿者 時刻: 0 件のコメント:
ラベル:

2012年7月13日金曜日

画面全体をマスクするサンプル（作りかけ）

http://www.whims-d.com/archives/223　
を参考にしてみました。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
        <script>
           
            function mask(){
                    var mask = $('<div id="top-mask"></div>');
                    mask.css({
                            'position':     'absolute',
                            'top':             0,
                            'left':            0,
                            'width':        $(document).width(),
                            'height':        $(document).height(),
                            'color':        '#ffffff',
                            'background':    '#000000',
                            'display':        'none',
                            'opacity':        0,
                            'zIndex':        9999
                    });
                    mask.click(function(e) {
            $('#top-mask').css({zIndex:$.browser.msie?0:null}).fadeOut("fast");
                    });
                    //    同IDのマスクが存在しない場合にマスクDOMを追加
                    if(! $('#top-mask').size()) {
                            $('body').append(mask);
                    }
                    $('#top-mask').css({'opacity':0,'display':'block'}).fadeTo('fast', 0.5);
            }
           
           
        </script>
    </head>
    <body>
        <div><input type="button" value="mask" onclick="javascript:mask();"/></div>
    </body>
</html>
投稿者 時刻: 0 件のコメント:
ラベル:
登録: 投稿 (Atom)