1冊ですべて身につくJavaScript入門講座
書籍情報
発売日 : 2023年03月02日
著者/編集 : Mana
出版社 : SBクリエイティブ
発行形態 : 単行本
書籍説明
内容紹介
とことん丁寧な入門書ついに登場!最初の一歩が踏み出せる!初心者に寄り添うやさしい解説。最新の技術が身につく!今のJavaScriptの書き方・使い方。絶対に知っておきたい!アニメーションとイベントの知識。プログラミングの基本から実装方法まですべて学べる!。
目次
Contents
-----------
Chapter1 最初に知っておこう!JavaScriptでできること
1-1 JavaScriptとは
1-2 JavaScriptでできること
1-3 様々なJavaScriptを使ったWebサイト
Chapter2 JavaScriptに触れてみよう
2-1 JavaScriptはどこに書く?
2-2 JavaScriptを書く環境を用意しよう
2-3 はじめてのJavaScriptを書いてみよう
2-4 JavaScriptを書くときの基本ルール
2-5 コンソールを使ってみよう
Chapter3 JavaScriptの基本機能を使って背景色の選択ができるカラーピッカーを作ろう
3-1 この章で作成するカラーピッカーの紹介
3-2 必要なファイルを用意しよう
3-3 カラーピッカーの色の値を取得しよう
3-4 テキストを変更しよう
3-5 DOMを理解しよう
3-6 テンプレート文字列でテキストにカラーコードを表示させよう
3-7 定数でコードをスッキリまとめよう
3-8 カラーコードを表示する「きっかけ」を作ろう
3-9 関数で選んだ色を取得しよう
3-10 ページの背景色を変えてみよう
3-11 条件をつけて色の名前を表示させよう
Chapter4 イベントで操作しよう
4-1 イベントとは?
4-2 ローディング中の画面を作ろう
4-3 1 CSSのクラスを加えよう
4-4 2 ローディングアニメーションを手軽に実装しよう
4-5 ボタンをクリックしてページをダークモードにしよう
4-6 ボタンをクリックしてページをダークモードにしよう1 CSSのクラスを切り替えよう
4-7 ボタンをクリックしてページをダークモードにしよう2 ボタンのテキストを変更しよう
4-8 入力した文字数を数えてみよう
4-9 1 length でカウントしよう
4-10 2 比較演算子で文字数によって表示を変えよう
4-11 チェックを入れるとボタンを押せるようにしよう
4-12 1 チェックでボタンを有効化しよう
4-13 2 より効率のいい書き方を考えよう
4-14 ページのスクロール量を表示しよう
4-15 1 スクロール量を取得しよう
4-16 2 ページのサイズを取得しよう
4-17 3 計算式を書いてみよう
Chapter5 複数のデータを使ってみよう
5-1 この章で作成する画像一覧ページの紹介
5-2 insertAdjacentHTMLでHTMLタグを挿入しよう
5-3 配列で複数の画像のファイル名をまとめよう
5-4 配列の中にある画像を表示しよう
5-5 for文での繰り返し処理の書き方を理解しよう
5-6 for文で画像を一覧表示しよう
5-7 変数 let と定数 const の違いとは?
5-8 オブジェクトで画像、メニュー名、値段をまとめよう
5-9 オブジェクトの情報を取得しよう
5-10 配列とオブジェクトを組み合わせてデータをひとまとめにしよう
5-11 画像、メニュー名、値段を一覧表示しよう
5-12 分割代入でコードをスッキリさせよう
Chapter6 アニメーションを加えよう
6-1 動きがあるWebサイトを見てみよう
6-2 なぜWebサイトに動きあると効果的なのか
6-3 心地よいと感じる動きとは
6-4 見出しを下から浮き上がらせよう
6-5 1 アニメーションの基本の書き方
6-6 2 複数のアニメーションを加えよう
6-7 3 動きの詳細を加えよう
6-8 いろんな見出しのアニメーション
6-9 複数の画像を順番に表示しよう
6-10 1 すべてのクラスを取得しよう
6-11 2 ひとつずつ遅延させよう
6-12 いろんな画像のアニメーション
6-13 スクロールとアニメーションを組み合わせよう
6-14 1 Intersection Observerの仕組み
6-15 2 交差状態の情報を見てみよう
6-16 3 動きを加えてみよう
Chapter7 Webページを作ってみよう
7-1 作成するWebページの紹介
7-2 ローディングから画面遷移
7-3 1 画面遷移のスクリーンを作ろう
7-4 2 アニメーションのタイミングを調整しよう
7-5 画像ギャラリー
7-6 1 カーソルを合わせると大きく表示しよう
7-7 2 カーソルを合わせたときのアニメーション
7-8 3 複数要素の指定をforEachで書いてみよう
7-9 スライドメニュー
7-10 1 ボタンをクリックしてメニューを開閉しよう
7-11 2 ひとつずつ遅延させて上から順に表示させよう
7-12 スクロールで要素を表示
7-13 スクロールで
-----------
Chapter1 最初に知っておこう!JavaScriptでできること
1-1 JavaScriptとは
1-2 JavaScriptでできること
1-3 様々なJavaScriptを使ったWebサイト
Chapter2 JavaScriptに触れてみよう
2-1 JavaScriptはどこに書く?
2-2 JavaScriptを書く環境を用意しよう
2-3 はじめてのJavaScriptを書いてみよう
2-4 JavaScriptを書くときの基本ルール
2-5 コンソールを使ってみよう
Chapter3 JavaScriptの基本機能を使って背景色の選択ができるカラーピッカーを作ろう
3-1 この章で作成するカラーピッカーの紹介
3-2 必要なファイルを用意しよう
3-3 カラーピッカーの色の値を取得しよう
3-4 テキストを変更しよう
3-5 DOMを理解しよう
3-6 テンプレート文字列でテキストにカラーコードを表示させよう
3-7 定数でコードをスッキリまとめよう
3-8 カラーコードを表示する「きっかけ」を作ろう
3-9 関数で選んだ色を取得しよう
3-10 ページの背景色を変えてみよう
3-11 条件をつけて色の名前を表示させよう
Chapter4 イベントで操作しよう
4-1 イベントとは?
4-2 ローディング中の画面を作ろう
4-3 1 CSSのクラスを加えよう
4-4 2 ローディングアニメーションを手軽に実装しよう
4-5 ボタンをクリックしてページをダークモードにしよう
4-6 ボタンをクリックしてページをダークモードにしよう1 CSSのクラスを切り替えよう
4-7 ボタンをクリックしてページをダークモードにしよう2 ボタンのテキストを変更しよう
4-8 入力した文字数を数えてみよう
4-9 1 length でカウントしよう
4-10 2 比較演算子で文字数によって表示を変えよう
4-11 チェックを入れるとボタンを押せるようにしよう
4-12 1 チェックでボタンを有効化しよう
4-13 2 より効率のいい書き方を考えよう
4-14 ページのスクロール量を表示しよう
4-15 1 スクロール量を取得しよう
4-16 2 ページのサイズを取得しよう
4-17 3 計算式を書いてみよう
Chapter5 複数のデータを使ってみよう
5-1 この章で作成する画像一覧ページの紹介
5-2 insertAdjacentHTMLでHTMLタグを挿入しよう
5-3 配列で複数の画像のファイル名をまとめよう
5-4 配列の中にある画像を表示しよう
5-5 for文での繰り返し処理の書き方を理解しよう
5-6 for文で画像を一覧表示しよう
5-7 変数 let と定数 const の違いとは?
5-8 オブジェクトで画像、メニュー名、値段をまとめよう
5-9 オブジェクトの情報を取得しよう
5-10 配列とオブジェクトを組み合わせてデータをひとまとめにしよう
5-11 画像、メニュー名、値段を一覧表示しよう
5-12 分割代入でコードをスッキリさせよう
Chapter6 アニメーションを加えよう
6-1 動きがあるWebサイトを見てみよう
6-2 なぜWebサイトに動きあると効果的なのか
6-3 心地よいと感じる動きとは
6-4 見出しを下から浮き上がらせよう
6-5 1 アニメーションの基本の書き方
6-6 2 複数のアニメーションを加えよう
6-7 3 動きの詳細を加えよう
6-8 いろんな見出しのアニメーション
6-9 複数の画像を順番に表示しよう
6-10 1 すべてのクラスを取得しよう
6-11 2 ひとつずつ遅延させよう
6-12 いろんな画像のアニメーション
6-13 スクロールとアニメーションを組み合わせよう
6-14 1 Intersection Observerの仕組み
6-15 2 交差状態の情報を見てみよう
6-16 3 動きを加えてみよう
Chapter7 Webページを作ってみよう
7-1 作成するWebページの紹介
7-2 ローディングから画面遷移
7-3 1 画面遷移のスクリーンを作ろう
7-4 2 アニメーションのタイミングを調整しよう
7-5 画像ギャラリー
7-6 1 カーソルを合わせると大きく表示しよう
7-7 2 カーソルを合わせたときのアニメーション
7-8 3 複数要素の指定をforEachで書いてみよう
7-9 スライドメニュー
7-10 1 ボタンをクリックしてメニューを開閉しよう
7-11 2 ひとつずつ遅延させて上から順に表示させよう
7-12 スクロールで要素を表示
7-13 スクロールで
著者情報
Mana
日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。 カナダやオーストラリア、イギリスの企業でWebデザイナーとして働いた。ブログ『Webクリエイターボックス』の管理人。現在はWebサイト制作の書籍執筆、インストラクターとして教育関連に携わっている。
Mana, Webデザイナー