お試しあれ！: javascript

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

2012年6月5日火曜日

三項演算子ってなんかプロっぽい

三項演算子はif～else文をとてもシンプルに、そしてプロっぽく書ける技！
マスターするべし！

(例）


<script>
 var sex='';
 if (sex == '男性'){
  price=5000;
 } else {
  price=3000;
 }
</script>

これがこう書ける


<script>
 var sex='';
 price = (sex == '男性') ? 5000 : 3000;
</script>

2012年6月4日月曜日

javascriptの基本例文メモ(3)

・Blowser Object Model（BOM）
・Document Object Model（DOM）
・イベント処理
・タイマー処理


<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>JavaScript</title>
</head>
<body>
 <h1>Javascriptの勉強</h1>
 <p>僕の名前は<span id="myName">@wknin</span>です！</p>
 <p>価格：<input type="text" id="price">円</p>
 <p><input type="button" value="クリック" id="myButton"></p>
 <script>
  //Browser Object Model (BOM)
  
  console.log(window.innerHeight); //ブラウザの高さ
  
  //window.location.href ="http://google.com"; //ページジャンプ
  
  //Document Object Model(DOM)
  
  console.log(document.width);
  document.body.bgColor='red';
  
  var e = document.getElementById('myName');
  e.innerHTML="わくにん";
  
  var n = document.getElementById('price');
  n.value=500;
  
  //event
  var t = document.getElementById('myButton');
  t.onclick = function(){
   alert("クリックされました");
  }
  
  //タイマー処理
  //setTimeout：一定時間後に何かする
  
  setTimeout(function(){
   console.log("2秒経ちました");
  },2000);
  
  
  //setInterval：一定周期ごとに何かする
  //とまらないので注意
  
  var i=0;
  setInterval(function(){
   console.log(i);
   i++;
  },1000);
 </script>
</body>

</html>

javascriptの基本例文メモ(2)

・配列
・連想配列
・オブジェクト（文字列・日付・数学）


<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>JavaScript</title>
</head>
<body>
<h1>Javascriptの勉強</h1>
 <script>
  //配列
  
  var sales0=100;
  var sares1=200;
  var sares2=150;
  
  var sares=[100,200,150];
  
  console.log(sares[2]+sares[1]);
  
  
  //連想配列
  
  var sares={'year2000':100, 'year2001':200, 'year2002':150};
  console.log(sares['year2002']);
  
  
  //Javascriptオブジェクト
  //日付・数値・文字列
  
  var s = new String("this is a pen."); //new String()は省略可能
  
  console.log(s.length);  //プロパティ（属性）
  console.log(s.substr(2,2));　//3文字目から2文字
  console.log(s.replace("pen","pencil")); //置換
  
  //array
  
  //var a = new Array(12,33,44,55);
  var a = [12,33,44,55];
  
  console.log(a.join("|"));
  console.log(a.reverse());

  //Dateオブジェクト
  
  //var d = new Date(2012,5,22,7,44,5); //月：0～11
  
  var d = new Date();
  console.log(d.getMonth()); //メソッド(処理) ()がついてるかどうか
  console.log(d.getTime()); //ミリ秒　（計算に使うケースが多い）
  
  //Mathオブジェクト
  //プロパティ
  console.log(Math.PI);    //円周率
  console.log(Math.SQRT2); //2の平方根
  //メソッド
   var x=5.238;
  console.log(Math.floor(x)); //切捨て
  console.log(Math.ceil(x)); //切り上げ
  console.log(Math.round(x)); //四捨五入
  console.log(Math.random()); //ランダム
  
  
 </script>
</body>

</html>

javascriptの基本例文メモ(1)

・変数
・演算子
・条件分岐(if/switch)
・ループ（while/for)
・関数


<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>JavaScript</title>
</head>
<body>
<h1>Javascriptの勉強</h1>
 <script>
  // 変数:データにつけるラベル
  // データ型
  var message = "Hello World, Again!"; //文字列
  var d1 = -5.5;
  var d2 = true; //boolean
  var d3 = undefined; //定義されていない
  var d4 = null; // なにもない
  //alert(message);
   //代入演算子
  var x = 5;
  //文字列に関する演算子
  var s="hello" + "world";
  
  // 数値に関する演算子
  var x = 5%5; //余り
  x += 5; //x = x + 1
  x++; // x = x + 1
  x--; // x = x - 1
  
  //条件分岐　(if)
  var score = 80;
  
  // == 同じ　!=否定
  if (score >= 70){
   alert("合格！");
  } else if( score >= 30){
   alert("不合格！");
  } else {
   alert("最悪！");
  }
  
  //条件分（switch）
  var direction="right";
  switch(direction){
   case "right":
    x = x + 10;
    break;
   case "left":
    x = x - 10;
    break;
   case "up":
    y = y - 10;
    break;
   case "down":
    y += 10;
    break;
   default:
   //例外処理
    break;
  }
  
  //ループ(while)
  
  var i = 0;
  while(i < 10){
   console.log(i);
   i++;
  }
  
  //ループ (for)
  
  for(var j = 0; j < 10; j++){
   console.log(j)
  }
  
  //関数(aとbは引数
  function sum(a,b){
   return ( a + b );
  }
  
  var result = sum(50,33);
  
  alert(result);
  
  function getPrice(x){
   var rate=0.82; //rateは関数内だけで有効
   return (x * rate);
  }
  
  console.log(getPrice(83));
 </script>
</body>

</html>

2012年5月29日火曜日

JQueryを使ったページを書くときの雛形

よく使うのでメモ

<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<body>
<script>
$(document).ready(function() {
 $('#test a').click(function(){
  $(this).text('hello');
 });
});
</script>
<div id="test"><a href="#">クリックして！</a></div>
</body>

</html>

2012年5月16日水曜日

jQueryでcsvをjavascriptの配列に変換

前回の記事で紹介したcsvをjavascriptに変換するスクリプト「jQuery_csv.js」

こんな感じでファイルをgetで読み込んでcsv()に渡してあげるだけ（＾＾

$.get('data.csv', function (data) {
  var csv = $.csv()(data);
 });

持っておくと便利なライブラリですね＾＾

/* Usage:
 *  jQuery.csv()(csvtext)               returns an array of arrays representing the CSV text.
 *  jQuery.csv("\t")(tsvtext)           uses Tab as a delimiter (comma is the default)
 *  jQuery.csv("\t", "'")(tsvtext)      uses a single quote as the quote character instead of double quotes
 *  jQuery.csv("\t", "'\"")(tsvtext)    uses single & double quotes as the quote character
 */
;
jQuery.extend({
    csv: function(delim, quote, linedelim) {
        delim = typeof delim == "string" ? new RegExp( "[" + (delim || ","   ) + "]" ) : typeof delim == "undefined" ? ","    : delim;
        quote = typeof quote == "string" ? new RegExp("^[" + (quote || '"'   ) + "]" ) : typeof quote == "undefined" ? '"'    : quote;
        lined = typeof lined == "string" ? new RegExp( "[" + (lined || "\r\n") + "]+") : typeof lined == "undefined" ? "\r\n" : lined;

        function splitline (v) {
            // Split the line using the delimitor
            var arr  = v.split(delim),
                out = [], q;
            for (var i=0, l=arr.length; i<l; i++) {
                if (q = arr[i].match(quote)) {
                    for (j=i; j<l; j++) {
                        if (arr[j].charAt(arr[j].length-1) == q[0]) { break; }
                    }
                    var s = arr.slice(i,j+1).join(delim);
                    out.push(s.substr(1,s.length-2));
                    i = j;
                }
                else { out.push(arr[i]); }
            }

            return out;
        }

        return function(text) {
            var lines = text.split(lined);
            for (var i=0, l=lines.length; i<l; i++) {
                lines[i] = splitline(lines[i]);
            }
            return lines;
        };
    }
});

2012年5月15日火曜日

Highchartsを使ってcsvデータを読み込んでグラフ化するサンプル（前編）

webコンテンツの中で、キレイなグラフが使えないかと色々と探してみて見つけたのがコレ。キレイなグラフが簡単に作れるライブラリHighcharts。とりあえずサンプルを元に試してみた。

今回のメモは、サンプルソースを少し改良して、csvデータを読み込んでグラフ化することにします。
1.　まずは、jQueryをインポート
-googleでホストされているコードを読み込むのでこのままコピペ

2.　ダウンロードしたファイルからjsフォルダをアップロード
3.　jQuery_csv.jsをアップロード（別記事で掲載予定）
4.　index.htmlに以下のコードを貼り付ける
2～19行目　：　csvデータを読み込んで配列mydataへjavascriptの配列として代入
・　htmlファイルと同じフォルダの「data.csv」を読み込む
・　csv()関数（jquery_csv.js）を使いデータを変換
・　mydataに代入

21行目から　：　グラフ作成用のパラメータ設定
・　23行目：　グラフの種類をラインチャートに設定してidがcontainerのDIVタグに挿入
・　27行目：　グラフのタイトル
・　30行目：　サブタイトル
・　33行目：　x軸のラベル（1つめが日本語なのは、日本語表示用のテスト
・　36行目：　y軸のラベル（表示を見れば目盛りが自動的に振られているっ！）
・　41行目：　マウスオーバー時のツールチップ
・　48行目：　凡例部分かな（？）

56行目から　ここから、グラフのデータ

series：[
name:　ラベル名
data：　データ部
]

なのですが、ここでcsvから読み込んだ配列を63行目のように設定してあげるといいみたい。

※45行目は改行しないで44行目に続けて入力

$(function () {
 var mydata=[];
 $.get('data.csv', function (data) {
  var csv = $.csv()(data);
  $(csv).each(function () {
   mydata.push( [parseFloat( this[0] ),
    parseFloat( this[1] ),
    parseFloat( this[2] ),
    parseFloat( this[3] ),
    parseFloat( this[4] ),
    parseFloat( this[5] ),
    parseFloat( this[6] ),
    parseFloat( this[7] ),
    parseFloat( this[8] ),
    parseFloat( this[9] ),
    parseFloat( this[10] ),
    parseFloat( this[11] )
    ] );
  })

  var chart;
  chart = new Highcharts.Chart({
   chart: {
    renderTo: 'container',
    type: 'line'
   },
   title: {
    text: 'Monthly Average Temperature'
   },
   subtitle: {
    text: 'Source: WorldClimate.com'
   },
   xAxis: {
    categories: ['1月', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
   },
   yAxis: {
    title: {
     text: 'Temperature (°C)'
    }
   },
   tooltip: {
    enabled: false,
    formatter: function () {
     return '<b>' + this.series.name + '</b>
' + this.x + ': ' + this.y + '°C';
    }
   },
   plotOptions: {
    line: {
     dataLabels: {
      enabled: true
     },
     enableMouseTracking: false
    }
   },
   series: [{
    name: '東京',
    data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
   }, {
    name: '神戸',
    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   },{
    data: mydata[0],
    name:'sample'
   }]
  });
 });

});

5.　body部にスクリプトの読み込みとDIVタグを設置


<script src="./js/highcharts.js">
</script>
  <script src="./js/modules/exporting.js">
</script>
  <div id="container" style="height: 400px; margin: 0 auto; min-width: 400px;">
</div>

とりあえず完成実は見よう見まねで作っているので、もっといい方法があるはずです。、わかる方教えてください（笑）

登録: 投稿 (Atom)