Amanjackのブログ

プログラミング初心者、FX初心者の成長日記

〈復習〉確かな力が身につくJavaScript「超」入門

 

読みました。振り返ります。

 

確かな力が身につくJavaScript「超」入門 第2版

確かな力が身につくJavaScript「超」入門 第2版

 

 

最近、技術書を乱読していてふと気付きました。

 

入門書って楽しいな　と。

 

新しい知識に出会うのって楽しいんですよね。

 

入門書は誰でも読めるような簡単な作りになっていて、少し知識を持っていれば楽に読み進めるので楽しいんですよね。

 

この本も例に漏れず楽しかったです。

 

内心は、簡単に思えるような本を読んでいて勉強になるのかな？とは思いますが、勉強になるかどうかは本の内容と本を読む目的によるでしょう 。

 

第１章イントロダクション

イントロダクションです。概要の説明があります。

 

第２章アウトプットの基本

JavaScriptのアウトプットには大きく分けて３種類あります。

  • コンソールにテキストを書き出す
  • ダイアログボックスを表示する
  • HTMLやCSSを書き換える

 

コンソールにアウトプット

まずはここから、コンソール出力。

JavaScriptはコンソール出力をしてデバッグ作業を行うことも多いため、頻繁に使う機能です。

 

  • console.log（出力する内容); 

 

JavaScriptはどこに置く？

htmlの<script>タグの中に書きます。

書く場所は<head>か<body>内であればどこでも良いですが、一般的には</body>の直前に書くことが多いようです。

今の現場では<head>内書いていますが、、、

 

<script>タグは別ファイルを指定することもできるので違うファイルに書くこともあります。

 

  • <script src="script.js">　... <script>

 

ダイアログボックスを表示する

コンソールの出力とほとんど変わりません。

alertはよくデバッグで使いました。 

 

  • window.alert(ダイアログボックスに出力する内容);
  • alert(ダイアログボックスに出力する内容);

 

HTMLを書き換える

要素の取得方法と要素の書き換えを学びます。

 

  • documento.getElementById(id名);    // 取得
  • documento.getElementById(id名).textcontent = 書き換えたい文字列;     // 書き換え

 

第３章JavaScriptの文法と基本的な機能

Javascriptの基礎文法の章です。

if文、for文、while文などが出てきます。

 

条件分岐　if文

まずはここから、if文。

 

  • window.confirm(メッセージ);    // 出力した確認ダイアログがOKかキャンセルか確認して条件分岐する

 

if(window.confirm(メッセージ)){

 console.log(true);

} else {

 console.log(false);

}

 

その他

  • window.prompt(メッセージ);　：入力ダイアログを表示する
  • 条件分岐（else if）　：if文の条件を増やす文
  • 比較演算子　：データを比較する
  • データ型　：整数や文字列の種類のこと
  • Math.floor(Math.random()*整数);　：ランダムな整数を生成
  • parthInt(文字列型の整数);　：文字列型の整数を整数の型に変換
  • 論理演算子　：かつ = &&　、　または　= ||
  • for文　：回数指定の繰り返し処理
  • i++　：インクリメント
  • i-- 　：デクリメント
  • while文　：条件指定の繰り返し処理
  • 変数の代入の省略　：enemy = enemy - atack; 同義　enemy -= atack;

 

ファンクション

ファンクションを用いると、よく使う処理を何度でも使えるようにまとめることができます。

ファンクションを変数に入れると、ファンクションを一種のデータとして扱えます。

 

var 変数名　= function(引数){

 処理内容

~~~

}

 

配列

  • 配列　：複数のデータを格納する
  • 配列.pop()　：配列の最後のデータを削除する
  • 配列.push(データ)　：配列の最後にデータを追加する
  • 配列.shift()　：配列の最初のデータを削除する
  • 配列.unshift(データ１、データ２、・・・)　：配列の最初にデータ１、データ２•••を追加する

 

オブジェクト 

オブジェクトは配列にプロパティ値が加わったようなものです。

これまでに出てきたwindowやdocumentもすべてオブジェクトです。

 

ver 変数名 = { プロパティ: データ };

 

 

第４章インプットとデータ加工

フォームの入力、日付処理、配列などのデータ加工をHTMLに表示します。

 

フォーム

要素にイベントを設定します。

 

// htmlタグのsubmitボタンを押した際に作動するイベント

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

 console.log("クリックされました");

};

 

// 入力内容の取得

var search = document.getElementById("id名").name属性.value;

 

Dateオブジェクト 

// 現時点の日付オブジェクトを作成

var now = new Date();

 

// 変数nowに格納されている年月日分ごとに日付を取得

var year = getFullYear();

var month = now.getMonth();

var date = now.getDate();

var hour = now.getHour();

var min = now.getMinutes();

var output = year + "/" + (month +1) + "/" + date + "/" + " " + hour + ":" + min;

 

小数点の切り捨て

Mathオブジェクトのメソッドの紹介です。

 

  • Math.PI　：円周率 3.141592653589793
  • Math.floor(数値)　：小数点を切り捨てる
  • Math.pow(a, b)　：aをb乗する
  • Math.SQRT1_2　：1/2の平方根。約0.707
  • Math.SQRT　：2の平方根。約1.414
  • Math.abs(x)　：xの絶対値
  • Math.atan2(y, x)　：座標(x, y)のX軸からの角度（ラジアン）
  • Math.ceil(x)　：xの小数点を切り上げる

 

第５章一歩進んだテクニック

少し難しくなってきます。

日付の計算、データの引き渡し方法、イベントの設定などです。

 

カウントダウンタイマー

１秒ごとに表示が変わるタイマー機能を作成します。

 

「待ち時間」後にファンクションの実行を繰り返す

setTimeout(ファンクション, 待ち時間);

※ファンクションに（）は付けない。

 

日時を指定した状態でDateオブジェクトを初期化

new Date(年,月 ,日 ,時 ,分 ,秒 ,ミリ秒)

 

プルダウンメニューで指定ページへ

プルダウンを変更すると言語が変わる方法を学びます。

 

// onchangeイベントでURLを変更

document.getElementById("form").select.onchange = function() {

 location.href = document.getElementById("form").select.value;

}

 

// URLを書き換える

location.href = 新しいURL;

 

// CSSセレクタで要素を取得

document.querySelector("CSSセレクタ");

 

アンケートへの回答は一度だけ

js-cookieライブラリを利用してクッキーを学びます。

 

Cookies.get(クッキー名);

Cookies.set(クッキー名、値、{expires: 有効期限});

Cookies.remove(クッキー名);

 

イメージの切り替え 

サムネイルクリックによる画像の切り替えを学びます。

 

// マッチする要素すべてを取得する

// セレクタにマッチした要素が配列の形になって取得される

document.querySelectorAll(CSSセレクタ);

 

// datasetプロパティの取得

取得した要素.dataset.指定した名前;

 

// 属性の値を書き替える

取得した要素.属性 = 値;

 

第６章jQuery入門

jQueryはjavaScriptのライブラリです。

 

// jQueryで要素を取得する

// document.querySelectorAllメソッドと同じ意味

$("セレクタ");

 

// 「jQueryオブジェクト」と言う独自の形で取得される 

$()メソッド

 

// 取得した要素にイベントを設定する

 $("セレクタ").on("イベント名", function(){ 処理 }

 

// 要素のボックスを開く・閉じる

$("セレクタ").slideToggle(スピード)

 

第７章外部データを活用したアプリケーションに挑戦！

RSSフィードやWebAPIに挑戦します。

 

RSSフィードの取得と解析

jQueryのAjax機能を使ってWordPressのRSSフィードを取得します。

Ajaxは別オリジンにあるデータを取得することができないため、PHPを使ってデータを取得します。

 

// WordPressのRSSフィードのURL

http://<ドメイン名>/<WordPressが保存されているディレクトリ>/feed/

 

 InstagramAPIを利用したフォトギャラリー

本書の総まとめになります。

Instagramに投稿した自分の写真を取得して、フォトギャラリーを作成します。

WebAPIの活用方法から、レスポンシブデザインやローディングサインの付け方など学べます。

 

終わり