JavaScriptのプログラミングのツボとコツがゼッタイにわかる本

概 要

タブをクリックすると切り替わるパネル、地図のスクロールや拡大縮小など、インターネット上で使われている機能の多くは、JavaScriptによって作られています。本書は、JavaScriptはもちろんプログラミングは初体験という人でも独習できるように、基礎の基礎を徹底的に解説します。また、JavaScriptの文法やルールといった基礎知識のほかに、自分でプログラミングができるようになるための具体的なノウハウを体験することができます。

著者 立山秀利
価格 本体2200円(税別)
ISBN 978-4-7980-4222-0
発売日 2014/11/21
判型 B5変
色数 2色
ページ数 340
CD/DVD
ダウンロード
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

※リンク先によっては、販売ページが用意されていないことがあります。あらかじめご了承ください。

新しいウィンドウで開く 書籍購入のご案内

サポート

サポート情報は以下からご参照下さい。

サポート情報へのリンク

目次

第1章 JavaScriptの世界にようこそ

1-1 JavaScriptの概要と活用先

JavaScriptとは

JavaScriptの活用先

AjaxとjQuery

Webページ以外でも利用されるJavaScript

1-2 JavaScriptとHTML/CSSの関係

HTMLとCSSの関係のおさらい

JavaScriptならHTMLとCSSを制御できる

1-3 サンプル紹介

Webページのサンプル「FAQ」を作成していく

サンプル「FAQ」の機能その1:回答の表示/非表示の切り替え

サンプル「FAQ」の機能その2:評価

1-4 JavaScriptのプログラミングで準備するもの

テキストエディタとWebブラウザーさえあればOK!

Internet Explorer 11の設定を変更しておこう

1-5 JavaScriptの学習を始める準備をしよう

元となるHTMLを確認

CSSを確認

回答の部分を表示してみよう

1-6 目的の機能を段階的に作り上げていく

段階的に作り上げていくメリット

第2章 JavaScriptのプログラミングのキホン

2-1 JavaScriptの書き方の基礎

JavaScriptのプログラムを書く場所

JavaScriptの書き方の原則と文法

2-2 オブジェクトとプロパティとメソッド

命令文は「何をどうする」のかたちで記述

操作対象の状態である「プロパティ」

操作対象の動作である「メソッド」

2-3 簡単なプログラムを書いて実行してみよう

確認画面を表示する命令文

命令文をhead要素に記述する

第3章 クリックでコードを実行させよう

3-1 イベントのキホン

イベントとは

イベントで処理を実行させる方法

3-2 サンプル「FAQ」にてボタンクリックで処理を実行してみよう

[すべて開く]ボタンをクリックしたら確認画面を開く

3-3 関数のキホン

on~属性に複数の命令文を書こうとすると……

関数とは

関数を定義するには

関数を実行するには

3-4 サンプル「FAQ」で関数を使ってみよう

まずは関数を定義

[すべて開く]ボタンをクリックしたらallOpen関数を呼び出す

イベントとイベントハンドラ

第4章 1番目の回答を開閉する機能を作ろう

4-1 JavaScriptでHTMLとCSSを操作するには

JavaScriptでHTMLを操作する

JavaScriptでCSSを操作する

要素を取得する3つの方法

4-2 1番目の回答を開く機能を作ろう

IDによって要素を取得するには

class属性を変更して1番目の回答を開くには

faq.htmlにコードを記述して動作確認しよう

4-3 タグの種類で要素を取得してみよう

タグ名で要素を取得するには

要素の集合から個々の要素を取り出す

getElementsByTagNameメソッドとitemメソッドを使ってみよう

4-4 1番目の回答を閉じる機能や質問をクリックで開く機能を作ろう

[すべて閉じる]ボタンをクリックで1番目の回答を閉じる

1番目の質問をクリックで1番目の回答を開く

クラス名によって要素を取得する方法

4-5 if文で条件に応じた処理を実行する

条件分岐の基礎を学ぼう

if文の基本的な書式と比較演算子

条件式が成立しない場合に異なる処理を実行する

if文を体験してみよう

条件式が複数あるif文

4-6 質問をクリックで回答を開閉させよう

どのような仕組みの処理が必要か

JavaScriptのコードに落とし込もう

第5章 すべての回答を開閉できるようにしよう

5-1 変数と演算子の基礎を学ぼう

[すべて開く]ボタンで2~3番目の回答を開くには

変数のキホン

演算子のキホン

変数と演算子を体験してみよう

5-2 for文のキホン

for文の基本的な使い方を学ぼう

for文を体験してみよう

5-3 for文を使ってすべての回答を開閉できるようにしよう

[すべて開く]ボタンの処理をループで作成

[すべて閉じる]ボタンも同様に作成しよう

5-4 すべての回答を開く/閉じるコードを改善しよう

要素の集合の要素数をlengthプロパティで取得

要素の集合を取得する処理をまとめる

共通する処理を別の関数に抜き出す

5-5 2~3番目の質問をクリックで回答を開閉する

おのおのの質問をクリックで回答を開閉するには

確かに質問クリックで回答が開閉できたが……

第6章 評価の星(★)の画像を追加/削除する機能を作ろう

6-1 星(★)の画像を追加する機能を作ろう

星(★)の画像を追加するには

画像のimg要素を作成し、星(★)の画像を設定する

星(★)画像のimg要素を追加する方法とHTMLのツリー構造

1番目の評価欄にて、星(★)画像を追加できるようにする

すべての評価欄にて、星(★)画像を追加できるようにする

6-2 星(★)の画像を削除する機能を作ろう

星(★)の画像を削除するには

末尾の子要素を取得する

星(★)の画像以外も削除される不具合を修正しよう

第7章 JavaScriptのコードを最適化しよう

7-1 HTMLのタグ内にJavaScriptのコードが混在しないように改善

機能としては完成したが、コードにいくつか問題がある

タグ内にJavaScriptのコードが記述されていると何が問題?

「onイベント名」のプロパティでイベントハンドラを設定

イベントハンドラ設定はWebページを表示する際に実行すればよいが……

エラーが発生する理由

「window.onload」でエラーに対処

[すべて閉じる]ボタンもコードを改善しよう

各質問と[はい][いいえ]はどうする?

7-2 質問をクリックで回答を開閉するコードを改善しよう

Eventオブジェクトのキホン

目的の要素などを相対的に取得する方法

ノードを相対的に取得する際の注意点

toggleAnswer関数のコードを改善しよう

toggleAnswer関数をイベントハンドラに設定して動作確認

コードを大幅に変更する際はバックアップしよう

7-3 評価欄の[はい]のコードを改善しよう

同じ仕組みを使ってaddStar関数を定義するコードを改善

addStar関数を[はい]のイベントハンドラに設定して動作確認

7-4 評価欄の[いいえ]のコードを改善しよう

同じ仕組みを使ってremoveStar関数を定義するコードを改善

removeStar関数をイベントハンドラに設定して動作確認

[はい]と[いいえ]にイベントハンドラに設定するコードを改善

指定した要素の中から、タグ名で要素の集合を取得する

第8章 JavaScriptのコードをさらに最適化

8-1 JavaScriptを外部ファイルに分離しよう

JavaScriptを外部ファイルに分離するメリット

JavaScriptを外部ファイルに分離するには

faq.htmlのJavaScriptを外部ファイルに分離しよう

8-2 イベントリスナーを使おう

イベントリスナーとは

イベントリスナーの使い方のキホン

faq.jsでイベントリスナーを使ってみよう

8-3 無名関数を使ってみよう

無名関数の概要とメリット

無名関数の使い方のキホン

無名関数を使ってfaq.jsの一部を書き換えてみよう

無名関数を使ううえでの注意点

PR

秀和システム