<DAY83>JavaScriptとjQueryを初めて学んだ

学習状況

●学習日数 83日 

●学習時間(本日) 11時間

●累計学習時間 297.0時間

●一日あたりの平均学習時間 3.57時間 

はじめに

JavaScriptとjQueryの概要と基礎的な文法を学んだので、
忘備録を取るのと、アウトプットのするのが、目的。

テキスト以外にも簡単に概念をまとめてくれるサイトあったので、参考にした。
www.ituore.com

JavaScriptとjQueryの関係

JavaScriptはフロント周りを実装する言語の総称で、jQueryは一種のライブラリー。
jQueryを扱うメリットは、ブラウザ毎に記述を変更しなくて良いこと。直感的で少ない記述で表現が出来る事。
ブラックボックス化された部分があるので、本気で学ぶなら、裏側を知っておかないと危険な匂いがする。
サーバーサイドエンジニアを目指すのであれば、そこまでの理解は不要と判断。

JavaScriptの構文

cssと同様、ファイルのパスを指定する。
scriptで囲んだ部分が反映されるので、htmlに記述出来るが、見にくいコードになるので、ファイルを分けるのが一般的。

<script src="読み込みたいJavaScriptファイルのパス"></script>

javascriptは文である。文をまとめるのがブロックとなる。

ブロックが最後にくる文には;をつけない

{
  var x = 3;
  var y = 4;
  var z = x + y;
  console.log(z);
}

出力方法について

アラートの表示（ダイアログに出力）

 window.alert('こんにちは');

コンソールにテキストの表示

デバックで使用する。よく使う。

console.log('JavaScriptを始めよう');

HTMLに直接表示

あまり使わないのかも。一応

document.body.innerText = "Hello World!!"; // bodyに出力

文法について

if文（文法の基本）

if文法　{}を条件毎に記載する

var a = 1;
var b = 2;
if(a < b) { 
  a = b;
} else if(a == b) { 
  a *= b;
} else { 
  a -= b;
}

for文（文法の基本）

for (var i = 0; i < 繰り返す回数; i = i + 1) {
  // 繰り返す処理の内容
}

関数（文法の基本）

functionが関数を宣言するときのキーワード。

function sum(n) {
  var sum = 0;
  for(var i = 0; i <= n; i++) {
    sum += i;
  }
  return sum; // 関数が返す値
}

sum(3); => 6

その他

文字列の連結。文字列は"でも'でも良い

'Hello' + 'World';

変数の宣言と代入.複数の単語表記に注意

var name = 'yujiroName';

配列について

//配列の定義
var list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
//配列の取得
var item = list[0];
//配列の追加　一番後ろに代入される。
list.push('jQuery');
//配列の削除 popが配列後ろ。shiftが前
list.pop();
list.shift();

オブジェクト(rubyでいうハッシュ)

//キーをプロパティと呼ぶ。
var obj = { name: 'yujiro' };

obj['プロパティ名'] = 新しい値　//代入
obj['プロパティ名']　//取得

jQueryの使い方

参考したサイト

www.jquerystudy.info

こちらにアクセスし、3.x snippet:のコードを　htmlに貼り付ける。
jsファイル読み込みの前にjQueryを読みこむようにする。
developers.google.com

jQueryのコードの考え方。

1.HTMLを取得。$(取得する範囲)
2それに対して何をするか？の手順でコードを記述。

取得はセレクタを選び指定する。
この3種類のセレクタの指定がある。

$("#idSelector")
$(".classSelector")
$("h1")  //要素セレクタ

メソッド処理の後には原則（）が必要

$(function() { ... })　//関数で囲んで使用する

選択した範囲に対する処理

要素の表示、非表示

$("#title").hide();
$("#title").show();

フェードアウト・フェードイン

 $("#title").fadeOut(1000);
 $("#title").fadeIn(3000);

HTML要素を追加・削除

$("#lists").append('<li class="list">追加されたリスト</li>');
  $(".list").remove();

HTML要素のクラスを追加/削除

 $("p").addClass("red");
$("p").removeClass("red");

テキスト部分を判断し、（）の内容に置き換える

$("#title").text("変更したタイトル");

HTML要素である部分を判断し、()の内容に置き換える

$("p").html("<strong>変更されたコンテンツ</strong>");

属性の取得

$("セレクタ").attr("取得したい属性名");

属性の変更

$("セレクタ").attr("変更したい属性名", "変更したい属性値");

fromに入力された情報を取得する。

$("#valButton").on("click", function() {
    console.log($("input").val());

直前に実行したイベントが返した値を取得

 $("#result").text(input);

jQueryでのeach

第一引数に繰り返し処理を行いたい配列を取り、
第二引数に、取り出した要素に対して行いたい処理を記述。

 $.each(fruits, function(i, fruit) {
条件式
}

指定した要素の親要素を取得

$('#parent_target').parent().css('background-color', 'red');

指定した要素の子孫要素を取得

$('#find').find('#find_target');

css()の要素を取得

第二関数を加えると、オプションで指定ができる。
この場合だと高さ20pxを取得する

$("div").css("height","20px");

this

関数の中で,使うと、イベントの発生元となった要素を取得。
注意。他にも用途あり。

$('#next_target').next().css('background-color', 'yellow');

イベント駆動の場合

on()メソッド

$(function() {

  $("セレクタ").on("イベント", function() {
    イベントが起きた時に行う処理
  });

イベントの一覧

ブラウザが最初から持っているアクションをキャンセル

 e.preventDefault();

javascriptの正規表現

これは時間あるときに整理しよう。

DOMとは

JavaScriptでhtmlの要素を操作するための仕組み
参考文献
eng-entrance.com

インクリメンタルサーチ

検索したい単語をすべて入力した上で検索するのではなく入力のたびに即座に候補を表示させる検索方法。
コード難しかった、、。

最後に

jQueryもライブラリーなので、型とどのような指示をしてくれるのかを理解するのが重要。
ただ、実行順序の理解や、ロジカルな思考が求められる。
正直、問題演習を解いていったが、今のレベルでは読めるけど、書けない。
かなり鬼門。難しい。