東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

JavaScriptメモ

プロパティとメソッド

プロパティは()はない

繰り返しのfor文とwhile文の違い

繰り返す回数が決まってるときはfor、決まってないときはwhile

オブジェクトの意味

①window.alert、console.logなどのwindowやconsoleのこと。

javascriptの基本文法は
console.log('テスト')

consoleはオブジェクト
logはメソッド
()の中のテストはパラメータ

オブジェクトは基本文法の「●●は××しなさい」でいえば●●にあたる部分。

②「複数のプロパティを持つデータのまとまり」

var jsbook = {title: 'javascript入門', price:2500, stock: 3}

上記のjsbookオブジェクトはプロパティしかないが、プロパティのデータにはファンクションを保存することができる

var obj = {
  addTax : function(num) {
    return num * 1.08;
  }
};

上記のようにプロパティのデータがファンクションのとき、そのプロパティのことを特別にメソッドという。
ここらへんは「javascriptオブジェクト指向プログラミング」という知識とテクニックが必要

③Dateオブジェクト

Dateオブジェクトを使うときは最初に以下のコードを描いて初期化する必要がある。

var now = new Date();

newはオブジェクトを初期化するためのキーワード。
なお初期化の際()内にパラメータを含めない場合、Dateオブジェクトは現在日時を記憶した状態で初期化される。
ちなみに「現在日時を記憶した状態」とは、
●「日時を出力しなさい」と命令したら、現在日時を出力する
●「10日後が何日か出力しなさい」と命令したら、現在日時から10日後の日付を出力する。
というように、現在日時を「基準日」として使っている。
つまり、初期化されたDateオブジェクトが計算の基準日となる日時を記憶しているからこそ、日時の出力や計算ができる。

④オブジェクトには初期化するものとしないものがある

●複数のオブジェクトを作れるオブジェクトは初期化する
●複数のオブジェクトを作れないオブジェクトは初期化しない
詳しくは「確かな力が身につく」JavaScript超入門」のP165を参照。


無名関数(ファンクションを変数に代入)

var total = function(price){
  var tax = 0.08;
  return price + price * tax;

}

イベント基本構文

document.getElementById('form').onsubmit = function(){

};

return falseの意味

イベントで実行されるファンクションに「return false;」が出てきたら、htmlの基本動作をキャンセルしていると解釈する。
例だと送信ボタンを押したらページが遷移(ページ再読み込み)するがそれをキャンセルしたりできる。

【wordpress】custom field suite の画像IDでの画像出力ループ(lightboxつき)

<ul>
  
<?php
$fields = $cfs->get('loop_gallery'); 
foreach ($fields as $field) :
?>
// ループ開始
<li>
  
<?php
$attachment_id0 = $field['img_gallery']; // $attachment_id0は$attachment_idと名前を別にした
$full = wp_get_attachment_image_src( $attachment_id0, 'scale1' );//フルサイズ画像のURLを取得
?>  
  
 <a href="<?php echo $full[0];?>" rel="lightbox">
<?php
$attachment_id = $field['img_gallery'];
$sample_photo = wp_get_attachment_image($attachment_id, "thumb1");
echo $sample_photo;
?>
  </a>
  </li>
// ループ終わり

<?php
endforeach;
?>
</ul>


【参考サイト】

http://hamatte-wataru.com/post-501/

【jQuery】タブ切り替え2(レスポンシブ対応でdisplay:noneからのfadein)

        <ul id="click_box2">
          <li class="select">1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
        </ul><!-- click_box2 -->


      <div class="f_r">
        <div class="content_wrap disnon show">
        </div><!-- content_wrap -->

        <div class="content_wrap disnon">
        </div><!-- content_wrap -->

        <div class="content_wrap disnon">
        </div><!-- content_wrap -->

        <div class="content_wrap disnon">
        </div><!-- content_wrap -->

        <div class="content_wrap disnon">
        </div><!-- content_wrap -->

        <div class="content_wrap disnon">
        </div><!-- content_wrap -->

        <div class="content_wrap disnon">
        </div><!-- content_wrap -->

        <div class="content_wrap disnon">
        </div><!-- content_wrap -->
      </div><!-- f_r -->
@keyframes show{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
	  
.disnon {
  display: none;
}
	
.disnon.show{
    display: block;
    animation: show 1s linear 0s;	  
}

$(function(){
	// タブ切り替え
	$("#click_box2 li").click(function() {
        var num = $("#click_box2 li").index(this);
        $(".content_wrap").removeClass('show').addClass('disnon');
        $(".content_wrap").eq(num).addClass('show');
        $("#click_box2 li").removeClass('select');
        $(this).addClass('select')
    });
});

cssでscale と tlanslale3dを一緒にかく

@-webkit-keyframes slideInViewport {
    from{
        -webkit-transform: scale(1) translate3d(0, 0, 0);
    }
    to{
        -webkit-transform: scale(0.8) translate3d(250px, 0, 0);
    }
}

【参考URL】
http://stackoverflow.com/questions/20051832/how-to-scale-and-translate3d-at-the-same-time

【jQuery】タブ切り替え

<!-- ボタン -->
      <ul id="tab">
        <li class="select">ボタン1</li>
        <li>ボタン2</li>
        <li>ボタン3</li>
        <li>ボタン4</li>
      </ul>

<!-- 変わるコンテンツ -->

      <div class="safety_cw">
        <div class="content_wrap no1">
          <div class="container_safety">
            <h2>コンテンツ</h2>
          </div><!-- container_safety -->
        </div><!-- no1 -->
        <div class="content_wrap no2 disnon">
          <div class="container_safety">
            <h2>コンテンツ</h2>
          </div><!-- container_safety -->
        </div><!-- no2 -->
        <div class="content_wrap no3 disnon">
          <div class="container_safety">
            <h2>コンテンツ</h2>
          </div><!-- container_safety -->
        </div><!-- no3 -->
        <div class="content_wrap no4 disnon">
          <div class="container_safety">
            <h2>コンテンツ</h2>
          </div><!-- container_safety -->
        </div><!-- no4 -->
$(function() {

    $("#tab li").click(function() {
        var num = $("#tab li").index(this);
        $(".content_wrap").addClass('disnon');
        $(".content_wrap").eq(num).removeClass('disnon');
        $("#tab li").removeClass('select');
        $(this).addClass('select')
    });
});


ミソのcssのみかく。切り替わるコンテンツボックスのcontent_wrapにabsoluteをかけてかさね、最初に表示させるcontent_wrap以外はdisnonを付与。このdisnonはvisibility:hiddenからvisibleにかえること。displayのnoneからblockだとtransitionがきかない。

.disnon {
  /* display: none; */
  visibility: hidden;
  opacity: 0!important;
}

.content_wrap {
    min-height: 663px;
    border: 1px solid #9a7c52;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    opacity: 1;
    position: absolute;
    width: 100%;
}

【参考URL】
http://www.finefinefine.jp/jquery/kiji422/

要素の高さをレスポンシブでそろえたい時【jquery-fixHeightSimple.min.js】


$(function(){

// ページ読み込みでsameheight関数
sameHeight();

// ブラウザリサイズ リサイズ完了時に実行
var timer = false;
$(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {

      sameHeight();


    }, 200);
});


function sameHeight (){

	$(".index_col3 article").fixHeightSimple();
	$(".index_col3 h3").fixHeightSimple();
        $(".infoin_find td").fixHeightSimple();
}

});

【参考URL】
https://kadoppe.com/archives/2012/02/jquery-window-resize-event.html
http://sterfield.co.jp/designer/%E9%AB%98%E3%81%95%E3%82%92%E6%8F%83%E3%81%88%E3%82%8Bjquery%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%8Cjquery-fixheightsimple%E3%80%8D%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96/

touchmove.noscrollを使ったスマホナビ

これだと、スマホで背景は固定されるがPCではされない。まあいいや

var current_scrollY;	    
  $(document).on('click', '.menu-trigger', function() {
    
    if ($(".menu-trigger").hasClass("active")) {
        // メニューを閉じるとき
        $(window).off('.noScroll');
        
	$(this).removeClass('active');
	$('body').removeClass('oa');
	
	/* $( '#wrapper' ).attr( { style: '' } );
        $( 'html, body' ).prop( { scrollTop: current_scrollY } ); */


	return false;
    } else {
    
        // メニューを開くとき
        
        $(window).on('touchmove.noScroll', function(e) {
            e.preventDefault();
        });
        
        $(this).addClass('active');

        /* current_scrollY = $( window ).scrollTop(); 

        $('#wrapper').css( {
          position: 'fixed',
          width: '100%',
          top: -1 * current_scrollY
        }); */

        // モーダルのアニメ
        $('body').addClass('oa');

        return false;
    }
  });