ホーム / 本 /

「本当によくわかるJavaScriptの教科書」を読みました。

2019年5月23日木曜日

プログラミング100コード 本

t f B! P L
「本当によくわかるJavaScriptの教科書」を読みました。
JavaScriptをちょっとかじったことがある人や、基礎を復習したい人には最適です。サンプルファイルも充実しています。
特に、後半のスライドショーやハンバーガーメニュー、jQuery プラグインなどが勉強になりました。

「本当によくわかるJavaScriptの教科書」


世界で一番かんたんで丁寧な入門書

「JavaScriptの基礎を学びたい」「プログラミングを手軽にはじめてみたい」
「スライドショーなどWebサイトでよく見る機能を作ってみたい」と漠然と思っている人から、「一度JavaScriptを勉強してみたけど挫折した」という人まで。
JavaScriptはもちろん、プログラミング知識は一切不要。
本を読んで学びながらサンプルファイルにコードを書いていくことでJavaScriptの基礎を完全習得 & デザイン性の高いWebサイトの機能を作れます!
●本書の特長
・本書を読むことで、スライドショー、ギャラリー、地図、ハンバーガーメニュー、背景に動画を流すなど、Webサイトでよく見る機能が作れます。
・丁寧で分かりやすい文章とたくさんの図示があるので、初心者もJavaScriptをきちんと理解できます。
・jQueryやWeb APIなど、難しそうで学ぶのをためらっていた人も、簡潔な説明で学びやすいので、使いこなせるようになります。
・デザインの良い高機能な動きを作りたい、プログラミングの基礎を学びたい、JavaScriptを学んでみたい……けど、難しそうで第一歩が踏み込めない、挫折したからあきらめている。そんな人のための本です。
Amazon　より

JavaScriptの復習にも最適。サンプルファイルも充実

８章からは、実際に手を動かしてサイトなどを作っていきましょう。

①　スライドショーの作成

  1. 基本の枠組みとなるHTMLを作る
  2. 画像を配列に設定する
  3. 画像とドットナビを表示する
  4. 現在表示されている画像とドットナビにクラス名を追加する
  5. 画像とドットナビを切り替える処理の関数化
  6. ドットナビまたは矢印ナビのイベント処理を作成する
上記の手順に従って、スライドショーを作成します。
画像等はサンプルファイルをコピーするなど、します。
もちろん、自分なりの画像を使ってもOKです。
「矢印ナビ」とは、スライドショーの画像の左右に配置される、画像を切り替えるための矢印のことです。
「ドットナビ」とは、スライドショーの画像の下に配置される、画像の枚数分のドット表示で、これをクリックすることでも画像を切り替えられるものです。
ステップ３の「画像とドットナビを表示する」では、getElementByClassName()メソッドを使用しました。

「本当によくわかるJavaScriptの教科書」/スライドショー

②　ハンバーガーメニューの作成

ハンバーガーメニューはjQueryで作成します。
「jQurey」とは、JavaScriptの便利なライブラリ。
よく使うメソッドやイベントなどが、あらかじめセットされているのがライブラリです。
  1. 作り方を考える
  2. ハンバーガーメニュー（矢印アイコン）をクリックしたら処理を行う
  3. メニューを表示する・非表示にする
  4. ハンバーガーメニューが右側からアニメーションして出現するようにする
今回作成したのは、ハンバーガーメニューをクリックしたら、右側からメニューがあらわれる、というものです。
ステップ３の「メニューを表示する・非表示にする」の、クラス名「open」が付与されている場合、CSSのrightプロパティを-300にする、という箇所の説明がもう少し欲しかったです。
イメージとしては理解できるのですが・・・。

「本当によくわかるJavaScriptの教科書」/ハンバーガーメニュー

③　jQueryプラグインでテキストにアニメーションをつける

プラグインとは、機能を拡張するためのプログラムです。
今回使用したのは、「textillate.js」というjQueryプラグイン。
プラグインをダウンロードして、index.htmlにプラグインのjs・cssファイル読み込みなどを追加し、index.jsを「textillate.js」の「Usage」サンプルを参考に変更しました。

「本当によくわかるJavaScriptの教科書」/jQueryプラグイン

「本当によくわかるJavaScriptの教科書」/jQueryプラグイン

WebAPIでは、「GoogleMapsを設置する」となっていますが、GoogleAPIは有料化になってしまっているので、実習できていません。
これを飛ばして、最終章へ。

④　JavaScriptで作成した機能を基にWebサイトを作る

これまで学んできた機能を基に一つのWebサイト「東京」を作ります。
  1. ハンバーガーメニュー用のHTML作成
  2. ハンバーガーメニュー用のJavaScript作成
  3. CSS
  4. コンテンツエリア用のHTML作成作成
  5. スライドショーエリア用のHTML作成
  6. スライドショーエリア用のJavaScript作成
  7. ポップアップリンクエリア用のHTML作成
  8. ポップアップリンクエリア用のJavaScript作成
  9. 地図エリア用のHTML作成
  10. 地図エリア用のJavaScript作成（ココはサンプルを使用）

「本当によくわかるJavaScriptの教科書」/JavaScriptで作成した機能を基にWebサイト作成

全くJavaScriptを知らない人には、ちょっと難しいかも。
はじめての人には、オンライン学習サイトprogateや本「いちばんやさしいJavaScriptの教本」がオススメです。
・無料の２8パートのScrimbaコースで最新のJavaScriptを学ぶ（英語版）
特に、後半の作っていく箇所は、実際に手を動かすことで、失敗することも含めて勉強になりました。







このブログを検索

Translate

QooQ