Start Course

実例でわかる JavaScript 初心者講座

Course Fee : ¥5,700 or Pay-As-You-Go

プログラミングの基礎から学び、JavaScriptでWebアプリ(ブラウザ上で動くアプリ)を作ろう!

Course Curriculum

Lesson 1

Duration: 01:47

イントロダクション ムービー

Lesson 1

Duration: 01:11

JavaScript とは

Lesson 2

Duration: 00:51

Web の技術

Lesson 3

Duration: 01:52

Web のクライアントサイドの技術

Lesson 4

Duration: 01:44

HTML5 以前の世界、以降の世界

Lesson 5

Duration: 02:54

JavaScript でプログラミングするのに必要なもの

Lesson 6

Duration: 01:51

Google Chrome の導入

Lesson 7

Duration: 01:43

要素を検証

Lesson 8

Duration: 01:14

デバイスモード

Lesson 9

Duration: 00:35

コンソール

Lesson 1

Duration: 01:33

電卓代わりの数値計算

Lesson 2

Duration: 02:56

丸括弧の利用

Lesson 3

Duration: 02:48

文字列とは

Lesson 4

Duration: 02:51

文字列の連結、文字列と数値の足し算

Lesson 5

Duration: 01:02

文字列の長さを知る

Lesson 6

Duration: 02:59

文字列の置換

Lesson 7

Duration: 05:57

エンコードとデコード

Lesson 8

Duration: 04:08

特殊な数値計算 Math

Lesson 9

Duration: 02:14

MDN で調べる

Lesson 10

Duration: 05:40

変数に値を格納する

Lesson 11

Duration: 03:30

コンソールで複数行のプログラムを書く

Lesson 1

ソースコードのダウンロード

Lesson 2

Duration: 01:41

UTF-8 で書く

Lesson 3

Duration: 04:30

HTML ファイルを書く

Lesson 4

Duration: 04:26

CSS を HTML ファイルに書く

Lesson 5

Duration: 02:46

CSS を外部のテキストファイルに書く

Lesson 6

Duration: 05:38

絶対 URL と 相対 URL

Lesson 7

Duration: 01:26

CSS の調べ方

Lesson 8

Duration: 03:39

JavaScript を HTML ファイルに書く

Lesson 9

Duration: 02:32

JavaScript を外部のテキストファイルに書く

Lesson 10

Duration: 01:45

コンソールに出力されるファイル名と行

Lesson 11

Duration: 01:35

コンソールのエラーの見方

Lesson 12

Duration: 02:36

コメント

Lesson 13

Duration: 08:12

テンプレートを用意する

Lesson 1

Duration: 00:54

本セクションで作るアプリ「税込み計算 Web アプリ」

Lesson 2

ソースコードのダウンロード

Lesson 3

Duration: 02:09

プログラムを短く書くメリット

Lesson 4

Duration: 04:35

jQuery の導入

Lesson 5

Duration: 02:20

DOM と要素

Lesson 6

Duration: 04:12

jQuery を使った処理の開始

Lesson 7

Duration: 04:28

jQuery の DOM 操作の基本

Lesson 8

Duration: 01:52

数値と文字列

Lesson 9

Duration: 02:59

ボタンに機能を追加する

Lesson 10

Duration: 04:34

「税込み計算 Web アプリ」を作る

Lesson 1

Duration: 02:07

本セクションで作るアプリ「アンケートっぽい何か」

Lesson 2

ソースコードのダウンロード

Lesson 3

Duration: 05:25

チェックボックスの情報取得と変更

Lesson 4

Duration: 01:44

真偽値

Lesson 5

Duration: 02:34

ラジオボタンの情報取得と変更

Lesson 6

Duration: 02:47

リストの情報取得と変更

Lesson 7

Duration: 02:10

値の変更で処理をおこなう

Lesson 8

Duration: 04:32

送信前に処理をおこなう1

Lesson 9

Duration: 06:31

送信前に処理をおこなう2

Lesson 10

Duration: 03:53

「アンケートっぽい何か」を作る

Lesson 1

Duration: 00:51

本セクションで作るアプリ「アウトライン メモ」

Lesson 2

ソースコードのダウンロード

Lesson 3

Duration: 01:11

要素内の文字の取得、書き換え

Lesson 4

Duration: 02:50

要素内の HTML の取得、書き換え

Lesson 5

Duration: 01:12

要素の属性の取得、書き換え

Lesson 6

Duration: 01:01

要素の CSS の取得、書き換え

Lesson 7

Duration: 01:07

Web ページのタイトルを取得、書き換え

Lesson 8

Duration: 02:10

jQuery で要素を作り、末尾に追加

Lesson 9

Duration: 01:04

要素の絞りこみ

Lesson 10

Duration: 02:28

子要素を探す

Lesson 11

Duration: 01:45

親要素を探す

Lesson 12

Duration: 03:25

「アウトライン メモ」を作る1

Lesson 13

Duration: 04:12

「アウトライン メモ」を作る2

Lesson 1

Duration: 00:43

本セクションで作るアプリ「三択問題 Web アプリ」

Lesson 2

ソースコードのダウンロード

Lesson 3

Duration: 02:30

if 文1

Lesson 4

Duration: 01:44

if 文2

Lesson 5

Duration: 01:43

if 文3

Lesson 6

Duration: 01:31

波括弧の省略

Lesson 7

Duration: 02:47

チェックボックスで、表示を切り替え

Lesson 8

Duration: 03:32

比較演算子1

Lesson 9

Duration: 01:11

比較演算子2

Lesson 10

Duration: 02:49

switch case 文

Lesson 11

Duration: 07:00

「三択問題 Web アプリ」を作る

Lesson 1

Duration: 00:38

本セクションで作るアプリ「字典 Web アプリ」

Lesson 2

ソースコードのダウンロード

Lesson 3

Duration: 03:17

処理をまとめる

Lesson 4

Duration: 04:17

変数のスコープ1

Lesson 5

Duration: 02:06

変数のスコープ2

Lesson 6

Duration: 02:09

引数を取る

Lesson 7

Duration: 03:27

戻り値を持つ

Lesson 8

Duration: 03:17

関数の基本構造

Lesson 9

Duration: 04:18

「字典 Web アプリ」を作る1

Lesson 10

Duration: 03:31

「字典 Web アプリ」を作る2

Lesson 1

Duration: 00:54

本セクションで作るアプリ「テーブル ソート Web アプ...

Lesson 2

ソースコードのダウンロード

Lesson 3

Duration: 01:14

配列とは

Lesson 4

Duration: 04:59

配列の作り方1 Array

Lesson 5

Duration: 01:49

配列の作り方2 角括弧、split

Lesson 6

Duration: 06:15

ソート

Lesson 7

Duration: 05:41

「テーブル ソート Web アプリ」を作る1

Lesson 8

Duration: 06:17

「テーブル ソート Web アプリ」を作る2

Lesson 1

Duration: 01:05

本セクションで作るアプリ「連続計算 Web アプリ」

Lesson 2

ソースコードのダウンロード

Lesson 3

Duration: 04:54

配列の各要素を処理するには

Lesson 4

Duration: 05:37

for 文の書き方1

Lesson 5

Duration: 01:56

for 文の書き方2

Lesson 6

Duration: 01:57

break

Lesson 7

Duration: 02:13

continue

Lesson 8

Duration: 01:31

入れ子の配列

Lesson 9

Duration: 04:55

入れ子のループ処理1

Lesson 10

Duration: 01:57

入れ子のループ処理2

Lesson 11

Duration: 03:07

while と do while

Lesson 12

Duration: 06:47

「連続計算 Web アプリ」を作る

Lesson 1

Duration: 01:42

本セクションで作るアプリ「メモ Web アプリ」

Lesson 2

ソースコードのダウンロード

Lesson 3

Duration: 03:55

オブジェクト、プロパティ、メソッド1

Lesson 4

Duration: 02:56

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

Lesson 5

Duration: 03:43

new this オブジェクト

Lesson 6

Duration: 02:46

全てのプロパティを処理する

Lesson 7

Duration: 02:41

window オブジェクト

Lesson 8

Duration: 02:19

JSON

Lesson 9

Duration: 02:58

cookie

Lesson 10

Duration: 03:44

「メモ Web アプリ」を作る1

Lesson 11

Duration: 02:43

「メモ Web アプリ」を作る2

Lesson 12

Duration: 03:37

「メモ Web アプリ」を作る3

Lesson 13

Duration: 03:25

「メモ Web アプリ」を作る4

Lesson 1

Duration: 00:48

本セクションで作るアプリ「HTML 自動リンク Web アプ...

Lesson 2

ソースコードのダウンロード

Lesson 3

Duration: 05:39

正規表現とは1

Lesson 4

Duration: 03:25

正規表現とは2

Lesson 5

Duration: 03:23

繰り返し1

Lesson 6

Duration: 02:43

繰り返し2

Lesson 7

Duration: 04:43

その他の正規表現

Lesson 8

Duration: 04:12

後方参照

Lesson 9

Duration: 04:18

置換に関数を使う

Lesson 10

Duration: 05:22

文字列検索

Lesson 11

Duration: 04:20

「HTML 自動リンク Web アプリ」を作る

Lesson 1

Duration: 01:00

本セクションで作るアプリ「角丸描画 Web アプリ」

Lesson 2

ソースコードのダウンロード

Lesson 3

Duration: 01:39

Canvas とは

Lesson 4

Duration: 05:25

矩形の描画1

Lesson 5

Duration: 05:02

矩形の描画2

Lesson 6

Duration: 05:00

文字の描画

Lesson 7

Duration: 05:55

線の描画

Lesson 8

Duration: 05:27

円の描画

Lesson 9

Duration: 04:07

Canvas の生成

Lesson 10

Duration: 04:28

Canvas から PNG を生成

Lesson 11

Duration: 03:06

「角丸描画 Web アプリ」を作る1

Lesson 12

Duration: 03:38

「角丸描画 Web アプリ」を作る2

Lesson 13

Duration: 05:00

「角丸描画 Web アプリ」を作る3

Lesson 1

Duration: 01:10

本セクションで作るアプリ「画像切り抜き Web アプリ...

Lesson 2

ソースコードのダウンロード

Lesson 3

Duration: 03:07

画像の描画1

Lesson 4

Duration: 03:08

画像の描画2

Lesson 5

Duration: 03:52

「画像切り抜き Web アプリ」を作る1

Lesson 6

Duration: 02:27

「画像切り抜き Web アプリ」を作る2

Lesson 7

Duration: 02:30

「画像切り抜き Web アプリ」を作る3

Lesson 8

Duration: 04:55

「画像切り抜き Web アプリ」を作る4

Lesson 9

Duration: 03:02

「セピア調 Web アプリ」を作る1

Lesson 10

Duration: 03:59

「セピア調 Web アプリ」を作る2

Lesson 11

Duration: 02:14

「セピア調 Web アプリ」を作る3

Lesson 1

Duration: 00:52

本セクションで作るアプリ「音声再生 Web アプリ」「...

Lesson 2

ソースコードのダウンロード

Lesson 3

Duration: 01:58

「音声再生 Web アプリ」を作る1

Lesson 4

Duration: 03:53

「音声再生 Web アプリ」を作る2

Lesson 5

Duration: 01:29

「音声再生 Web アプリ」を作る3

Lesson 6

Duration: 03:46

「動画再生 Web アプリ」を作る

Lesson 1

Duration: 00:47

本セクションで作るアプリ「ストップウォッチ」

Lesson 2

ソースコードのダウンロード

Lesson 3

Duration: 02:32

Date1

Lesson 4

Duration: 03:44

Date2

Lesson 5

Duration: 03:34

setTimeout

Lesson 6

Duration: 02:43

setInterval

Lesson 7

Duration: 03:27

「ストップウォッチ Web アプリ」を作る1

Lesson 8

Duration: 03:45

「ストップウォッチ Web アプリ」を作る2

Lesson 1

Duration: 00:46

本セクションで作るアプリ「人気Webページ表示」

Lesson 2

ソースコードのダウンロード

Lesson 3

Duration: 02:45

getScript

Lesson 4

Duration: 03:35

get

Lesson 5

Duration: 05:04

getJSON

Lesson 6

Duration: 03:03

ajax

Lesson 7

Duration: 03:52

「人気 Web ページ表示 Web アプリ」を作る

Lesson 1

Duration: 02:46

終わりに

Course Overview

本講座を学んだ人は、プログラミングの基礎から学習し、JavaScriptでプログラムを書けるようになります。また、プログラムの基礎と勘所をマスターできて、今後専門書を読んで自分で学習を進められるようになります。

本講座では基礎から学んでいき、最終的に最新のHTML5の機能を利用した、作図や画像フィルター処理、音声や動画の再生、Web API を利用したアプリの作成までを行います。

本講座では、HTML(UI部品の配置)、CSS(UI部品の装飾)、JavaScript(実行処理)を利用して、ブラウザ上で動くアプリケーションを作っていきます。

各セクションでは、以下のようなアプリを作ります。ほとんどのアプリは、ソースコードが100行以内で、容易に理解、改造が行えます。

・税込み計算アプリ(入力欄から数値を得て計算結果を表示)
・アウトライン メモ(アウトライン エディタ風に、ネストしたリストを追加)
・三択問題アプリ(ユーザーの解答に応じて、結果表示を分岐)
・字典アプリ(マウスオーバーで、説明表示を切り替え)
・テーブル ソート(テーブルを、名前順や数値順で、自在にソート)
・連続計算アプリ(複数行入力欄の数式を、行ごとに計算して結果表示)
・メモ アプリ(Webブラウザに情報を記録したり、取り出したり)
・HTML自動リンク アプリ(文字列からURLを探し出して、自動でタグを付加)
・角丸四角画像生成アプリ(角丸四角のパスを作り、画像を動的に生成)
・画像切り抜きアプリ(画像を丸く切り抜いたPNG画像を生成)
・セピア調アプリ(画像の画素を処理して、セピア調に変換)
・音声再生アプリ(音声を読み込み、再生)
・動画再生アプリ(動画を読み込み、再生)
・ストップウォッチ(経過時間を取得して、定期的に表示を更新)
・人気Webページ表示(Web APIを利用して情報を得て、リンクボタンを自動生成)

JavaScriptは、Webブラウザとテキストエディタがあれば、すぐにプログラムを始められます。この簡単なプログラミング言語で、プログラムとJavaScriptをマスターしましょう!

※ 本講座の解説で出てくる「Webアプリ」とは、ブラウザ上で動くアプリケーションのことです。電卓やメモ帳のような、パソコンのローカルアプリを、ブラウザ上で再現したものになります。複雑なものでは、PhotoshopのようなWebアプリもあります。本講座では、初心者でも作れるものを中心に、作成していきます

Requirements

  • Google Chrome

About Expert - クロノス・クラウン合同会社

2002年設立のクロノス・クラウン合同会社。代表の柳井です。 ゲームやアプリケーションの開発、書籍や記事の執筆をおこなっています。

秀和システムより「マンガでわかるJavaScript」「マンガでわかるAndroidプログラミング」「マンガでわかるJavaプログラミング」他、技術評論社より「JavaScript 仕事の現場でサッと使える! デザイン教科書」「プログラマのためのコードパズル」を出版。

2001年度のオンラインソフトウェア大賞に「めもりーくりーなー」で入賞。

More Courses by クロノス・クラウン合同会社

User Reviews Write a Review

[[ review.learner_username ]]

[[ review.comments ]]

No Review(s)