20130620

こんにちは、西田です
sshリモートログインにて研究室にログイン

----------8<----------8<----------

基礎を固めろーーーーーーー!!!!
と怒られたので(自業自得)、ドットインストールをモクモクとこなしていく作業
今日の日報はそのメモ

12:25~13:00
 ・CSS3

13:10~16:00 (14:00から一時間マクド休憩)
 ・JavaScript(Tips集)

17:10~17:50
 ・zen-coding

17:55~20:20
 ・jQuery

20:30~21:00
 ・実践編

                    • 8<----------8<----------

12:25~13:00
 ・CSS3

a[href="foo"]完全一致
a[href^="foo"]前方一致
a[href$="foo"]後方一致
a[href*="foo"]部分一致

-----

nth-child
div p:nth-child(2){color:red;}
div要素の2番目がpになるものに適用
div *:nth-child(2){color:red;}
div要素の2番目に適用
(odd)で奇数
(even)で偶数
(3n)で3の倍数

first-child
初めの要素に適用

last-child
最後の要素に適用

only-child

-----

nth-of-type
first-of-type
last-of-type
only-of-type

--> nth-childとの違い
nth-childは親要素に対して指定する
nth-of-typeは要素自体を指定する

-----

:disabled
入力された文字(text)に対して適用

:enabled
今選択されてる要素に対して適用

:checked
ラジオボタンに対して適用

:checked + label
ラジオボタンと同列に並んでいるものに対して適用
                    • 8<----------8<----------

13:10~16:00 (14:00から一時間マクド休憩)
 ・JavaScript(Tips集)

おおおお腹すいたよ一時間我慢するよ

変数名の付け方
1文字目は 英字 $ _
2文字名以降は 数字もおっけー

//特に意味はない(書き方は統一した方がいいよ)
キャメル記法
var myName;

パスカル記法
var MyName;

アンダーバー記法
var my_name;

        • -

alertのときはOKしか出ないけど
confirmのときはキャンセルも出る

if (confirm("削除しますか?")) {
            // OK押したときの処理
        } else {
            // キャンセル押したときの処理
        }
        • -

prompt("/* 表示する文字*/ ");
OK,キャンセルボタンが出る

var name = prompt("What your name?");
alert('Your name is ' + name + ' ! ');
→名前入力してOK押すとダイアログボックスが出てYour(ry

var name = prompt("What your name?","Nishida");
→初期値を入れておくことができる(実行すると予め入力されてる)
        • -

setIntervalとsetTimeoutの違い

setTimeout
前回の処理が終わったかどうかを考慮する

setInterval
考慮しない、俺のターン

        • -
function() {
     console.log("hello world");
}
↑
関数作ったよ
helloworld();
↑
呼び出したよ

(function helloworld() {
     console.log("hello world");
})();
↑
即時関数作ったよ
呼び出しいらないよその場で呼び出すよ

(function () {
     console.log("hello world");
})();
↑
無名関数作ったよ
一回しか使わないから名前必要ないから
名前つけなかったよ

-----

var x = Math.floor(Math.random() * 10);
0以上、1未満の乱数を生成する
10と指定していたら0~9の乱数を生成

-----

<input type="button" value="クリックしてね!"onclick="sayHi();">
<script>
function sayHi(){
     console.log('hi!');
}
</script>

onclickをつけることでボタンを押したらsayHiが実行される

-----

DOMについて説明してるんだけどそもそもDOMってなんだってなったので
JavaScriptの入門編に戻って確認

getElementById
→使うIDをとってくる

var x = document.getElementById('id名');
x.innerHTML = 'textの変更';

あー、確かにこんなことしたなー忘れてたなーと思いつつ戻ってくる

getElementsByTagName
タグの名前で引っ張ってくる
('li')にすると<li></li>要素の変更になる

var lis = document.getElementsByTagName('li');
console.log(lis[1]);
→lisの二番目の要素をとってくるよ

------

createElement
タブ作っちゃうよ!

createTextNode
テキストを作っちゃうよ!
追加方法(
var タグ変数名 = document.createElement('タグ要素');
var text変数名 = document.createTextNode('追加する文字');
id名.appendChild(タグ変数名).appendChild(text変数名);
↑
タグ要素がliだった場合、
指定したidの中のliタグの一番最後に
createTextNodeで作ったものが追加される
)

var fourthLink = document.createElement('a');
fourthLink.href = 'http://google.com';

でリンクも作れる

-----

cloneNode
clone(複製)する
true or false を書く必要がある
fifthLi.innerHTML = '<a href="http://yahoo.com">Five</a>';
で変更できる

insertBefore
どの要素の後に入れるかを指定できる
mylist.insertBefore(fifthLi, lis[1]);
↑これだと2つ目の要素の下にfifthLiを追加することができる

-----

document.getElementById('id名').style.color
document.getElementById('id名').style.fontWeight
document.getElementById('id名').style.background
document.getElementById('id名').style.fontSize
document.getElementById('id名').style.border
document.getElementById('id名').style.padding
document.getElementById('id名').style.margin

でスタイルの変更ができる

-----

変数名.className = '新しいclassname';

-----
                    • 8<----------8<----------

16:30~17:00
 ・迷子になってました

眠かったので30分睡眠休憩
起きてから
やーだードットインストールやーだーねむいーやーだーの状態なう
田口さんの声聞いてたら眠くなるんだもん
っていうか眠いのでコンビニにコーヒー買いに行こうとしてなぜか迷子
さまよいつつ戻ってきて再開

                    • 8<----------8<----------

17:10~17:50
 ・zen-coding

便利だからささっと目を通して見ればいいよと言われたので
ささっと目を通しておく

        • -
html:5 -> HTML5の基礎要素を書いてくれる
link:css
link:favicon
script
a:link
a:mail
input:hidden

ul>li -> ulの下にliを作る
div>di>di>p<hrとか<じゃなくてプラスだと同じ階層に書いてくれたりとか
*だったら繰り返しとかとか

div#test>div.test2 が
<div id="test">
	<div class="test2"></div>
</div>
って作れたりとか

div#test>div.item-$*5 だったら
<div id="test">
	<div class="item-1"></div>
	<div class="item-2"></div>
	<div class="item-3"></div>
	<div class="item-4"></div>
	<div class="item-5"></div>
</div>
ってぱぱっと作ってくれる
$$$とかにすると001とか0を含んでくれる

select[name=city]
-> <select name="city" id=""></select>

select[name=city]>option[value=$]*5
->
 <select name="city" id="">
	<option value="1"></option>
	<option value="2"></option>
	<option value="3"></option>
	<option value="4"></option>
	<option value="5"></option>
</select>


a[href="http://google.com"]
-> <a href="http://google.com"></a>

div{menu}*5
->
<div>menu</div>
<div>menu</div>
<div>menu</div>
<div>menu</div>
<div>menu</div>

a[href="http://www.google.com"]{Google}
-> <a href="http://www.google.com">Google</a>
                    • 8<----------8<----------

17:55~20:20
 ・jQuery

jQueryの書き方

$(function() {
// jQueryのコードはこちらに
// セレクタ.メソッド
// メソッド・チェーン
$('h1').css('color', 'red').hide('slow');
});

  • > h1要素の文字色を赤にしてゆっくり消えていく

html要素を指定するとき -> h1 p img
id要素を指定するとき -> #
class要素を指定するとき -> .
複数の要素を指定するとき -> ,
親子要素を指定するとき -> >
子孫要素 -> (スペースで区切る)

          • -
$(function(){
	$('li').css({
		'border': '1px solid #ccc',
		'font-size': '36px'
	});
});

とすることでcssを操作することができる
        • -

addClass -> classを追加
removeClass -> class を削除

        • -
$(function(){
	$('.listitem').click(function(){
	$('h1').css('color','blue')
	});
});

-> listitemをクリックしたらh1が変わる

$(function(){
	$('li').click(function(){
	$(this).css('color','blue')
	});
});

-> listitemをクリックしたらlistitemが変わる

$('.listitem:eq(0)').click();

-> listitemの0番目要素がクリックしてないけど
click(function(){
	$(this).css('color','blue')
	});
が使えるようになるよ

クリックする度に
交互に変更するようにするには.toggleを使う

$(function() {
	$('.listitem').toggle(
		function() {
			$(this).css('color', 'blue');
		},
		function() {
			$(this).css('color', 'black');
		}
	);
});
        • -
マウスオーバー系の時
.toggleの部分をmouseover(addClass必要)
でもこのままじゃ外れたとき戻らない
.mouseout(function(){
   removeClass書く
});

とすればいい
↓こんな感じ

$(function() {
	$('li')
	.mouseover(function() {
		$(this).addClass('font36');
	})
	.mouseout(function() {
		$(this).removeClass('font36');
	});
});

hoverでもできる↓

$(function(){
	$('li').hover(
		function() {
			$(this).addClass('font36');
			},
		function() {
			$(this).removeClass('font36');
		}
	);
});	
        • -
$(function(){
	$('h1').hide(2000);
});
// hide -> 隠すよー
.show(3000)
// show -> 表示するよー

/*
この場合2秒書けてh1要素を消してから
3秒書けて表示しますよー
*/

-----

Ajaxとは
Asynchronous JavaScript +XML
非同期通信を使った(裏側で先読みする)動的なページの更新の仕組み
GooglMapとかで使われてる

load / get post / ajax
ajaxに関してはセキュリティが厳しく、同じドメイン内のファイルしか呼ぶことができない

-----

load
-> 指定した外部ファイルの内容を読み込む
ボタンを押す→外部ファイルを読み込む→わあ、見える!みたいな

<h1>jQueryの練習</h1>
<div id="main"></div>
<input type="button" id="kick_ajax" value="Ajax!">
<script>
    $(function() {
        $('#kick_ajax').click(function() {
            $('#main').load('contents.txt', function() {
                alert('読み込み終了!');
            });
        });
    });
</script>

-> contents.txtを読み込むよ
                    • 8<----------8<----------

20:30~21:00
 ・実践編

木曜サロンが始まってちょっとサロンが賑やか
今からの時間はもう頭がパンク状態でinputはできないので
outputの時間にする

ドットインストールを見ながら実践編の方をこなしていくことに
でもその前にちょっと10分休憩

あ、日報ブログ、はてブに移行作業してます
今までの日報を全部移すのめんどくちゃいけど
これは移さないと気が済まない(自分の歴史的ななにかだと思ってる)
http://k396-109.hateblo.jp/
になります

        • -

短時間でできそうなやつぴゃぴゃっと作っていくよー
スロットマシーン作ったよー

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>スロットマシーン</title>
    <style>
        .col {
            float: left;
            width: 100px;
            text-align: center;
            font-size: 32px;
        }
    </style>
</head>
<body>
    <div class="col">
        <span id="num0">?</span><br>
        <input type="button" value="STOP" id="stop0">
    </div>
    <div class="col">
        <span id="num1">?</span><br>
        <input type="button" value="STOP" id="stop1">
    </div>
    <div class="col">
        <span id="num2">?</span><br>
        <input type="button" value="STOP" id="stop2">
    </div>
    <script>
 
(function(){
        var timers,
        	nums,
        	stopCount;
 
        document.getElementById('stop0').onclick = function(){
	        stopSlot(0);
        }
        document.getElementById('stop1').onclick = function(){
	        stopSlot(1);
        }
        document.getElementById('stop2').onclick = function(){
	        stopSlot(2);
        }
 
 
        function startSlot() {
            timers = [];
            nums = [];
            stopCount = 0;
            
            runSlot(0);
            runSlot(1);
            runSlot(2);
        }

        function stopSlot(n){
	       // if(nums[n] != undefined)
	       if(typeof nums[n] !== 'undefined'){
		        return;
	        }
	        
	        clearTimeout(timers[n]);
	        nums[n] = document.getElementById('num'+n).innerHTML;
	        stopCount++;
	        
	        if(stopCount == 3){
		        checkSlot();
	        }
        }
 
        function checkSlot(){
	       // alert("check");
	       nums.sort();
	       if (nums[0] == nums[1] && nums[0] == nums[2]){
		       alert('全部揃った!');
	       } else if(nums[0] == nums [1] || nums[1] == nums[2] || nums[0] == nums[2]) {
		       alert('2つ揃った!');
	       } else {
		       alert('残念');
	       }
        }
 
        function runSlot(n) {
            document.getElementById('num'+n).innerHTML = Math.floor(Math.random() * 10);
            timers[n] = setTimeout(function() {
                runSlot(n);
            }, 50);
        }
 
        startSlot();
 })();
    </script>
</body>
</html>

お腹すいたもう無理だよアンパンマン

12H088 西田眞葉
Twitter => K396_109 K396nanopiko
Blog => http://k396-109.hateblo.jp/
Mail => http.www.1813@gmail.com
ブクログ => http://booklog.jp/users/k396