このコースは、実際にブラウザ上で動くアプリケーションを作りながら、プログラミングの基礎から学習し、JavaScriptでプログラムを書けるようになります。
このコースを習得すれば、次のような事ができるようになります。
- プログラミングの基礎の習得。
- ブラウザ上で動くアプリケーションの作成。
- 最新のHTML5の機能の利用(作図、画像フィルター処理、音声や動画の再生、Web APIの使用)
このコースは、実際にブラウザ上で動くアプリケーションを作りながら、プログラミングの基礎から学習し、JavaScriptでプログラムを書けるようになります。
このコースを習得すれば、次のような事ができるようになります。
- プログラミングの基礎の習得。
- ブラウザ上で動くアプリケーションの作成。
- 最新のHTML5の機能の利用(作図、画像フィルター処理、音声や動画の再生、Web APIの使用)
コースで紹介されるコードは、サンプルコードとして、全てダウンロードすることができます。
このコースでは、基礎から学んでいき、最終的に最新のHTML5の機能を利用した、アプリの作成までを行います。
‥‥‥‥‥‥‥‥‥‥
各セクションでは、以下のようなアプリを作ります。ほとんどのアプリは、ソースコードが100行以内で、容易に理解、改造が行えます。
JavaScriptは、Webブラウザとテキストエディタがあれば、すぐにプログラムを始められます。この簡単なプログラミング言語で、プログラムとJavaScriptをマスターしましょう!
※ 本講座の解説で出てくる「Webアプリ」とは、ブラウザ上で動くアプリケーションのことです。電卓やメモ帳のような、パソコンのローカルアプリを、ブラウザ上で再現したものになります。複雑なものでは、PhotoshopのようなWebアプリもあります。本講座では、初心者でも作れるものを中心に、作成していきます。
本講座自体の説明をおこない、おおまかなロードマップを示します。
JavaScriptが、Webブラウザ用の言語であること、Javaとは違うことを理解します。
サーバーサイドとクライアントサイドの違いについて学習します。
Webブラウザの動作を把握します。HTMLで文章やボタンを配置、CSSでレイアウトや装飾、JavaScriptで実行処理を行います。
HTML5 では、画像描画や音声、動画の操作、ローカルファイルとの連携ができるようにありました。その結果、HTML5 の登場で、Webアプリが作りやすくなったという話をします。
ブラウザ、テキストエディタが必要です。どういったソフトが使いやすいか説明します。
Google Chrome の導入の仕方を説明します。 また、Google Chromeで開発を行っていくために、開発者ツールの開き方をマスターします。
Google Chrome の「要素を検証」機能を紹介します。 HTMLファイルを見て、表示との対応を確認できるようになります。
Google Chrome の「デバイスモード」機能を紹介します。AndroidやiPhoneなど、様々なデバイスで、どのように表示されるかを、確認することができます。モバイル用の開発時に、力を発揮する機能です。
Google Chrome の「コンソール」機能を紹介します。 プログラム実行時のエラーなどの表示が、どこに出力されるか把握します。
最も簡単なプログラムを試してみましょう。 コンソールを利用した、1行プログラムの実行ができるようになります。
計算順序を入れ替えてみましょう。 数値計算の基本となる、演算子の優先順位を使いこなせるようになります。
文字と文字列のお話をします。 プログラミングで頻出する文字列について理解します。
文字列と数値を足すとどうなるか。何も考えないと、意図しない結果になってしまうという実例を示します。意図した結果にするには、丸括弧を使います。
文字列.lengthで、文字列の長さを知る方法を学びます。文章の文字数などを知る時に便利です。また、入力文字数制限などを行う際も有効です。
replace で文字列を置換する方法を学びます。NGワードを除去するなどの使い方ができます。
文字列のエンコードとデコードを行います。 サーバーに日本語を送る際に必要になります。
ちょっと特殊な計算方法は、Mathを使えばOK。小数点以下の切り捨てやn乗計算、平方根の計算などを使えるようになります。
Web で JavaScript のことを調べるには、MDN が便利。 その使い方をマスターします。
変数に値を格納して、値を再利用します。 複雑な計算を、簡潔に書けるようになります。
Shift+Enterで複数行を入力する方法を学びます。
このレクチャーの「ダウンロード可能なリソース」から、本セクションで登場する、ソースコードの入ったZIPファイルを、ダウンロードできます。ファイルの構成と内容を確かめてください。
文字コードのお話をします。 基本的に、UTF-8 を使うと問題ないです。
HTML ファイルを書いて表示します。
CSS は、HTML のレイアウトや装飾を行う機能です。この CSS を、直接 HTML ファイルに書いて、どういった状態になるか、試してみます。
HTML ファイル内に書くと再利用がしにくいので、CSS を、HTML ファイルとは別のファイルに書いてみます。
絶対 URL と相対 URL のお話をします。
CSS の情報の調べ方を紹介します。
JavaScript を、直接 HTML ファイルに書いてみます。 JavaScript は、Webページに様々な機能を追加できます。
JavaScript を、HTML ファイルとは別のファイルに書いてみます。 これで、異なる HTML ファイルから、同じプログラムを利用可能になります。
console.logで、コンソールに情報を出力した際の、見方を説明します。実行ファイルと、実行行が表示されるので、どこで出力された値なのか、すぐに確認できます。
コンソールにエラーが出力された際の、見方を説明します。 グを修正するには、必須の知識です。
プログラムとして実行されない、コメントについて説明します。コメントを書くことで、プロ倉がどういったものか、後で見直した時に、非常に分かりやすくなります。
jQuery と Bootstrap を利用した Web アプリのテンプレートを用意します。 以降、このテンプレートを元に、Webアプリの開発を行っていきます。
金額と税率から、税金の金額と、税込み金額を計算して表示するアプリです。その使い方を、まずは紹介します。
プログラムを短く書くメリットを説明します。また、jQueryについて、軽く触れます。
プログラムを短く書くために、jQueryを導入します。JavaScriptで、Web ページ用のプログラムを書く作業が、劇的に簡単になります。
DOM についてのお話をします。 Web ページをどのように操作するかを把握します。
$(function() {}); で書く、DOM準備後の処理を紹介します。 jQuery を使った Web ページ操作の入り口です。
jQuery の DOM 操作の基本について話をします。
注意事項です。jQuery で取得する値は文字列という話をします。このことを知らないと、思わぬエラーを招きます。
ボタンに機能を追加して、様々な処理を行えるようになります。
実際にアプリを作成します。これまでの知識を利用して、「税込み計算 Web アプリ」を作ります。
チェックボックス、ラジオボタン、セレクト、テキストエリアなど、フォームの部品の値を取得したり、プログラムから操作したりするサンプルのアプリの、概要を紹介します。
jQuery を使って、チェックボックスの情報取得と変更ができるようになります。
真偽値について学びます。 true(真)か、false(偽)という2つの状態で、処理を分岐したりするために必要な知識を身に付けます。
jQuery を使って、ラジオボタンの情報取得と変更ができるようになります。
jQuery を使って、リストの情報取得と変更ができるようになります。
フォームの値が変更した際に、処理を行えるようになります。
サーバーにフォームの内容を送信する前に、処理をおこなえるようになります。入力欄のチェックなどの処理をおこないまう、その1です。サーバーへの送信を止める話を中心に解説します。
(前回の続き)サーバーにフォームの内容を送信する前に、処理をおこなえるようになります。入力欄のチェックなどの処理をおこなう、その2です。入力欄のチェックを中心に話をします。
実際にアプリを作成します。アンケートっぽい画面を作り、各種フォームの値取得/設定を行います。基本的なUI操作が、一通りできるようになります。
ツリー構造でメモを記録できる、アウトライン プロセッサ風のメモです。項目を追加したり、ネストさせたりすることができます。要素の親要素や子要素の探索や、書き換え、追加などを駆使したアプリです。
jQuery を使って、Webページ内の要素の文字の取得、書き換えができるようになります。 動的なWebページを作れるようになります。
jQuery を使って、Webページ内の要素の HTML の取得、書き換えができるようになります。 動的なWebページを作れるようになります。
jQuery を使って、Webページ内の要素の属性の取得、書き換えができるようになります。
jQuery を使って、Webページ内の要素の CSS の取得、書き換えができるようになります。UI部品の見た目を変更できます。
jQuery を使って、Web ページのタイトル取得、書き換えができるようになります。
jQueryで 要素を作り、末尾/先頭に追加できるようになります。Web ページ内のコンテンツを追加していけます。
要素の絞りこみについて学びます。操作対象のDOM要素が多い場合に、条件を指定して絞りこみます。
子要素を探す方法について学びます。「何かの中にある何か」を選択できるようになります。
親要素を探す方法について学びます。「何かの上位階層にある何か」を選択できるようになります。
実際にアプリを作成します。「アウトライン メモ」を作ります。その1。ユーザーの操作によって、Web ページの要素を動的に追加するアプリを、作れるようになります。
(前回の続き)実際にアプリを作成します。「アウトライン メモ」を作ります。その2。ユーザーの操作によって、Web ページの要素を動的に追加するアプリを、作れるようになります。
三択問題を数問解答し、その正答率によって、結果表示を分岐するアプリです。条件によって、処理を変えるアプリのサンプルになります。 そのまま、クイズアプリにもできます。
このレクチャーの「ダウンロード可能なリソース」から、本セクションで登場する、ソースコードの入ったZIPファイルを、ダウンロードできます。ファイルの構成と内容を確かめてください。
条件分岐をおこなう if 文について学びます。「AならBの処理」といった処理の分岐ができるようになります。
if else 文についても学びます。「AならBの処理」「AでないならCの処理」といった処理の分岐ができるようになります。
さらに複雑なif else 文についても学びます。else に続けて、if 文の処理を行います。
if 文の波括弧を省略できるようになります。
チェックボックスのオンオフで、表示を切り替えられるようになります。また、jQuery の show と hide について学びます。要素を表示したり、隠したりできるようになります。
条件を判定するための、比較演算子を学びます。その1。同じ値か否かで、true や false を得られるようになります。
条件を判定するための、比較演算子を学びます。その2。数字が大きいか、小さいかによって、true や false を得られるようになります。
switch case 文について学びます。 値による処理の分岐の、もう1つの書き方を使えるようになります。
実際にアプリを作成します。「三択問題 Web アプリ」を作ります。正答数で表示を切り替えます。ユーザーの操作によって、結果表示を切り替えられるようになります。
マウスオーバーで、説明が表示される、字の説明を行う「字典」のアプリです。無名関数を、イベントに登録するサンプルになっています。
関数を利用して処理をまとめます。長くなったプログラムを、上手く整理できるようになります。名前付きの関数と、無名関数について学びます。
変数のスコープについて学びます。その1。バグを出さないために、知っておかないといけない知識です。
変数のスコープについて学びます。その2。また、無名関数を即時実行する方法を学びます。一時的にローカル変数を使いたい時に役立つ書き方です。
関数の書き方のバリエーションです。引数を取る関数を作ります。
関数の書き方のバリエーションです。戻り値を持つ関数を作ります。
関数の基本構造を学びます。 関数の基本的な知識の紹介です。
実際にアプリを作成します。その1。「字典 Web アプリ」を作ります。マウスを載せた際に、関数を呼び出し、処理をおこなえるようになります。
実際にアプリを作成します。その2。「字典 Web アプリ」を作ります。マウスを載せた際に、関数を呼び出し、処理をおこなえるようになります。
ソート機能付きで、表を表示するアプリです。テーブルの内容を配列として扱い、自前のルールで並べ替える処理を実現しています。統計表示アプリなどに、応用できるでしょう。
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.