お試しあれ！

2012年6月25日月曜日

html5の雛形（改版）

html5を意識したhtmlファイルを書くときに便利になるかと思います。
よろしければコピペしてお使いください＾＾

次はリセットcssかな


<!doctype html>
<html>
<head>
 <meta charset="utf-8" />
 <title>HTML 5</title>
 <!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->

 <style>
   article, aside, dialog, figure, footer, header,
   hgroup, menu, nav, section { display: block; }
 </style>
</head>
<body>
<!--ヘッダ-->
<header>
 <a href="#">html5ヘッダ</a>
</header>
<!--ナビ-->
<nav>
 <ul>
 <li><a href="#">html5ヘッダ</a></li>
 <li><a href="#">html5ヘッダ</a></li>
 </ul>
</nav>
<!--メイン-->
<section>
 <article>
  <h1>Article1</h1>
  <p>html5Body</p>
 </article>

  <article>
  <h1>Article1</h1>
  <p>html5Body</p>
 </article>
</section>
<!--フッタ-->
<footer>
 <a href="#">html5フッタ</a>
</footer>
</body>
</html>

2012年6月18日月曜日

linuxのメモリが足りているか確認するコマンドメモ

まずはfreeコマンド
「Swap:」のusedをチェック

[root@hoge]# free
             total       used       free     shared    buffers     cached
Mem:       3089280    3074700      14580          0     974968    1044600
-/+ buffers/cache:    1055132    2034148
Swap:      2031608        108    2031500

上記の例だと108KBしかSwapを使っていないので、事実上問題ない。

次はvmstat
si（swap in)とso（swap out）を確認。

[root@hoge]# vmstat
procs -----------memory---------- ---swap-- -----io---- --system-- -----cpu------
 r  b   swpd   free   buff  cache   si   so    bi    bo   in   cs us sy id wa st
 0  0    108  21896 971572 1041808    0    0   498   508    5    8  1  1 89  9  0

両方とも0なので何の問題もない。

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 Mobileでページを書くときの雛形

雛形シリーズ第三弾「jQuery Mobile」

<!DOCTYPE html> 
<html> 
<head> 
<title>PageTitle</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head> 
<body> 

<div data-role="page">

<div data-role="header">
<h1>Title</h1>
</div>

<div data-role="content"> 
<p>Hello world</p>  
</div>
</div>

</body>
</html>