hiramatch's blog

iOSアプリ開発に目覚め、毎日勉強の日々です。

外部引数名

現在ドットインストールの「Swift入門」 でSwif勉強中です。

その中で「外部引数名」についての説明があったので
その理解を含めるべくplaygroundで簡単なプログラムを作ってみました。

「外部引数名」とは関数呼び出し時、引数にどんな値を渡すかをわかるようにしたものです。

// 外部引数名なし
func dictionary1(e:String, j:String) {
    print("english: \(e)  japanese: \(j)")
}
dictionary1("cat", j: "ねこ")

// 外部引数名あり1
func dictionary2(english e:String , japanese j:String) {
    // 処理内はもうひとつの引数
    print("english: \(e)  japanese: \(j)")
}

dictionary2(english: "cat", japanese: "ねこ")

// 外部引数名あり2 (外部引数名= もうひとつの引き数名)
func dictionary3(english english:String, japanese:String) {
    //
    print("english: \(english)  japanese: \(japanese)")
}

dictionary3(english: "house", japanese: "家")

// 外部引数名あり3 (外部引数あり2 + 初期値あり)
func dictionary4(english english:String="english", japanese:String="日本語") {
    print("english: \(english)  japanese: \(japanese)")
}

dictionary4()
dictionary4(english: "dog", japanese: "イヌ")

JavaScriptの復習

今日は以前習ったJavaScriptの配列, オブジェクト, for文の復習をやっていました。
毎日jQueryばかりやっていたので気分転換になるし、それにプログラム言語というのは覚えるだけでなく、何度か反復し自然に使いこなせることが大事だと考えています。
以下は

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>オブジェクト, 配列, for文の復習</title>
</head>
<body>
    <script>
        var position = [
            {x:100, y:100},
            {x:200, y:200},
            {x:300, y:300},
            {x:400, y:400},
        ];
        for(var i=0; i<position.length; i++) {
            console.log('x:' + position[i].x + ' ' + 'y:' + position[i].y);
        }
    </script>
</body>
</html>

以下は実行結果です。
f:id:hiramatch:20151208003002p:plain

明日はjQuery再開の予定です。

jQuery ボックスのエフェクト

今日はドットインストールコムのjQuery入門 #12 エフェクトの動画を見た後
自分でプログラムを作ってみました。

サンプルそのままだと表示後すぐ消えて確認しにくいので
setTimeout関数で1秒後に消える様にしました。

<!DOCTYPE html>
<html lang='ja'>
<head>
    <meta charset='utf-8'>
    <title>#12 エフェクト</title>
</head>
<body>
    <div id="test" style="width:150px; height:50px; background:orange">
    <script src='../jquery-1.11.3.js'></script>
    <script>
        $(function(){
            // console.log('test');
            var $div = $('#test');
            setTimeout(function(){
                console.log('test');
                // $div.hide();        // ぱっと消える
                // $div.hide('800');  // ゆっくり
                // $div.fadeOut();     // ふわっと消える
                // ふわっと消えた後、アラート
                $div.fadeOut(
                    1000,
                    function(){
                        alert('test');
                    }
                );
            }, 1000);
        });
    </script>
</body>
</html>

f:id:hiramatch:20151206111624p:plain
f:id:hiramatch:20151206111703p:plain

jQueryの属性セレクタ

今日もドットインストールコムでjQueryの勉強をしました。
今日のテーマは属性セレクタといわれるもので
「要素のxxxx属性がyyyyのもの」など属性で対象を指定するセレクタになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>属性セレクタ addClass</title>
</head>
<body>
    <Style>
        .myClass {
            font-size:20px;
            background: silver;
        }
    </Style>
    <p><a href="http://yahoo.co.jp">yahoo</a></p>
    <p><a href="http://google.com">google</a></p>
    <p><a href="http://dotinstall.com">dotinstall</a></p>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <script>

    $(function(){
        // yahooだけ対象
        // $('a[href="http://yahoo.co.jp"]').css('color','red');
        // yahoo以外対象
        // $('a[href!="http://yahoo.co.jp"]').css('color','red');
        // href属性に「dot」を含んでいるものが対象
        //$('a[href*=dot]').css('color','orange');
        // p要素にクラス属性を付加する
        $('p').addClass('myClass');

    })
    </script>
</body>
<html>

以下がaddClassメソッドの実行結果です。
f:id:hiramatch:20151201234305p:plain

jQueryのフィルターを使った簡単なプログラム

最近お世話になっているドットインストールでjQueryを学習しています。
今日学んだフィルターを使った簡単なプログラムを作ってみました。

以下はフィルタで対象となった要素の文字色を変えるものです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フィルタ</title>
</head>
<body>
    <p>aaaaaa</p>
    <ul id="sub">
        <li>3-0</li>
        <li>3-1
            <ul>
            <li class="item">3-1-1</li>
            <li>3-1-2</li>
            <li class="item">3-1-1</li>
            </ul>
        </li>
        <li class="item">3-2</li>
        <li class="item">3-3</li>
        <li>3-4</li>
    </ul>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <script>
    $(function(){
        // 9行目のul直下のliのインデックス2番が対象
        // $('#sub > li:eq(2)').css('color','red');
        // 9行目のul直下のliのインデックス2番より後が対象
        // $('#sub > li:lt(2)').css('color','red');
        // 9行目のul直下のliのうち偶数インデックスが対象
        $('#sub > li:even').css('color','red');
    })
    </script>
</body>
<html>

以下は実行画面です

f:id:hiramatch:20151130225848p:plain

JavaScriptで要素追加、削除

数ヶ月間ブログを放置してしまいましたが、ひさしぶりに再開しました。

現在はjavaScript, jQueryをやっています。
iOSはこの後やりたいと考えています。

javaScriptで簡単なプログラム作ってみました。
ボタンで要素を追加, 削除, フォントカラーを変えるものです。

まだまだ未熟なので「ここをこうした方がいい」というのがありましたら
ご指摘等いただけるとありがたいです。

今後ともよろしくお願いします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>イベント</title>
</head>
<body>
    <!-- スクリプトの対象となる要素はスクリプトの前に記述しないと行けない -->
    <P id="test">こんにちは!</P>
    <button id="add">追加1</button>
    <button id="add2">追加2</button>
    <button id="chg">変更</button>
    <button id="delete">削除</button>
    <script>
        var idNum = 0;
        document.getElementById('test').style.color = 'black';
        document.getElementById('add').addEventListener('click',
        function() {
            var e = document.createElement('P');
            e.id = 'id' + ++ idNum;
            var text = document.createTextNode('Add 1');
            document.body.appendChild(e).appendChild(text);});

        document.getElementById('add2').addEventListener('click',
        function() {
            var e = document.createElement('H1');
            e.id = 'id' + ++idNum;
            var text = document.createTextNode('Add 2');
            document.body.appendChild(e).appendChild(text);});

        document.getElementById('chg').addEventListener('click',
        function() {
            var e = document.getElementById('test');
            console.log(e.style.color);
            if(e.style.color == 'black') {
                e.style.color = 'red';
            } else {
                e.style.color = 'black';
            }
        })
        document.getElementById('delete').addEventListener('click',
        function() {
            if(idNum > 0){
                var e = document.getElementById('id' + idNum--);
                document.body.removeChild(e);
           }
       })
    </script>
</body>
</html>

以下は実行画面です。
f:id:hiramatch:20151129110803p:plain

CGAffineTransformによる回転・拡大/縮小

ずいぶん久しぶりの投稿になりましたが
今回は部品の回転や拡大についての覚え書きです。

UIViewおよびその継承クラスのtransformプロパティに対しCGAffineTransXXXを指定します。
回転させる場合はCGAffineTransMakeRocation
※ここで指定する角度の単位は「度」ではなく「ラジアン

拡大/縮小させる場合はCGAffineTransMakeScale


以下はスイッチで回転, 拡大をさせたものです

f:id:hiramatch:20150505180805p:plain