2017-03-24

jQuery 上級編1

html jQuery Progate

上級編　その１

ProgateでjQueryの上級編に進んでからかなり進むスピードが遅くなってきたので少しづまとめる。

eqメソッド、indexメソッド

<ul>
  <li>その１</li> <!--0-->
　<li>その２</li> <!--1-->
　<li>その３</li> <!--2-->
</ul>

このような「li」要素にはjavascriptの配列のようにインデックス番号をもっている（０から始まる）。
eqメソッドを使用してjQueryで３番目の「li」要素を取得しcolorをredにする場合は下記のようにする。

$('li').eq(2).css('color','red');

また、インデックス番号を取得したい場合はindexメソッドを使用する。

<ul>
  <li>その１</li> <!--0-->
　<li class = "active">その２</li> <!--1-->
　<li>その３</li> <!--2-->
</ul>

上記の「li」要素から「.active」のインデックス番号をindexメソッドで取得する。

$('li').index($('.active'));

とすると、インデックス番号の「１」が取得できる。

2017-03-22

jQuery 中級編

jQuery Progate

中級編クリア

ProgateでjQuery 中級編をクリアしたけど中身がわかってないので振り返り

thisの構文

thisはイベントが起こった要素を取得することができる。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

のようなli要素に対しクリックしたli要素のみcolorをredにしたい場合は以下のようにする。

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

clickイベント時にモーダルが表示、非表示されるようにする

clickイベントの時にモーダルを表示したいのでcssで通常は非表示にしておく。

セレクタ { display:none; }

jQueryでclickイベントを設定し、fadeInメソッドでモーダルを表示する。例としてid=btnをclickした時に、class=modalを表示したい場合は

$('#btn).click(function(){
  $('.modal').fadeIn();
});

となり、逆にモーダルを非表示にする場合はセレクタに対してfadeOutメソッドで隠します。

hasclassメソッド

hasclassメソッドは引数に指定したクラスをオブジェクトが持っているかを判定する。
持っていればtrue、持っていなければfalseを返す。

$('.answer').hasclass('open')  //結果 false  
$('.answer open').hasclass('open')  //結果 true

判断した後にif文を用いて,結果に応じた処理を行うことも出来る。

2017-03-21

jQuery 初級編

Progate jQuery

初級編クリア

ProgateでjQuery 初級編をクリアしたので簡単にまとめ

jQueryとは

javascriptのライブラリの1つ
HTMLやCSSでは表現できなかったアニメーションや様々な動きをつけられる

オブジェクトとメソッド

基本的な構造は以下のようにする

$('セレクタ').メソッド(引数);

$(‘セレクタ’)でオブジェクト作成ができ、その後に.メソッドで呼び出す事ができる。

初級編に出てきたメソッド

hide ⇢　要素を隠す（showメソッドは要素を表示する)
fadeOut ⇢ 徐々に消えていくアニメーション（fadeInメソッドは逆の効果）
slideUp ⇢ 下から上に徐々に消えていくアニメーション(slideDownメソッドは逆の効果）

例としてfadeOutメソッドの使用例

$('セレクタ').fadeOut(slow);
//引数をslowとすると、ゆっくり消えていく

イベントの構文

基本的なイベントの構文は以下のようにする

$('セレクタ').イベント名(function() {
   //イベント発生時に実行したい処理
});

セレクタをクリックした際に、セレクタの入れ子のid = “text"に対しイベント(hideメソッド）を発生させたい場合は

$('セレクタ').click(function(){
   $('# text').hide();
});

以上、忘れる前に備忘録として記録。

2017-03-20

本日のまっちゃ

まっちゃコザクラインコ

本日のまっちゃ #コザクラインコ

宮腰圭佑さん(@ameroe)がシェアした投稿 - 2017 3月 19 10:48午後 PDT

かなり毛が生え揃ってきました。

2017-03-20

ジョギング

diet jogging

ぼちぼちジョギング開始。

冬の期間に５〜６ｋｇ増加したので体重も公開してダイエットも開始。

f:id:ameroe:20170320113258p:plain

目標の65kgまで頑張ります。

2017-03-19

javascript 連想配列から要素数を取り出す

javascript Progate

連想配列から要素数を取り出し平均を求める

Progateでjavascript 道場コース基礎編を進めているとはまったのでメモ。

var scores = {Taro: 72, Ken: 93, Tom: 85, John: 68};

このような連想配列から要素数を取り出して「平均点は〇〇です」とconsoleに表示する内容。

var sum = 0 ;
for (var key in scores) {
  sum += scores[key];
}
var avg = sum / scores.length;

これでavgを出力してみてもエラーとなってしばらくはまった。どうやら連想配列は配列と違い変数.lengthで要素数を取り出せないらしい。
なにやら連想配列の場合はobject.keys().lengthで要素数を取るといいらしい。ので

var sum = 0 ;
for (var key in scores) {
  sum += scores[key];
}

var length = Object.keys(scores).length;

var avg = sum / length;
console.log("平均点は" + avg + "点です");

これでなんとか「平均点は79.5点です」と出力されました・・・やっと先へ進めます・・・・

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

作者: Ethan Brown,武舎広幸,武舎るみ
出版社/メーカー: オライリージャパン
発売日: 2017/01/20
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る

2017-03-16

Markdown記法　入門してみた

Markdown

Markdown記法入門

ブログを再開するにあたって、ネタをテキストエディタに溜め込みたいなと思っているとMarkdown記法なるものが便利だという記事を見て入門してみようかなと思い調べてみました。

特徴

手軽に文章構造を明示できること
簡単で、覚えやすいこと
読み書きに特別なアプリを必要としないこと
それでいて、対応アプリを使えば快適に読み書きできること

日本語Markdownユーザー会のサイトでは上記のように説明されています。

どうやって書くの

書き方はHTMLのように、いちいちタグで囲む必要がないのでとても使いやすいです。

見出し　#（ハッシュ）を行頭につける。HTMLのh1,h2のようにハッシュの数で大きさが変化
段落文章を段落で分けたい時は空行を入れる
箇条書き　行頭に半角ハイフン＋スペース(- )を付ける
強調　強調したい文字を半角*で囲む。１つで囲むとHTMLのemタグ、２つで囲むとstrongタグに対応するようです。

その他にもリンクを貼ったり、罫線引いたりいろいろできますよ！

使ってみて

この文章もMarkdown記法で書いていますが、めっちゃ楽です。最近は仕事中のメモもテキストエディタにMarkdownで書いておいて、必要に応じてHTMLに変換したりしています。
基本的な使い方は非常に簡単なので是非お試しあれ。

はじめてのMarkdown―軽量マークアップ言語の記法と使い方 (I・O BOOKS)

作者: 清水美樹
出版社/メーカー: 工学社
発売日: 2014/05
メディア: 単行本
この商品を含むブログ (1件) を見る

上級編 その１