実例でわかる JavaScript 初心者講座
このコースは、実際にブラウザ上で動くアプリケーションを作りながら、プログラミングの基礎から学習し、JavaScriptでプログラムを書けるようになります。
このコースを習得すれば、次のような事ができるようになります。
- プログラミングの基礎の習得。
- ブラウザ上で動くアプリケーションの作成。
- 最新のHTML5の機能の利用（作図、画像フィルター処理、音声や動画の再生、Web APIの使用）
Read more
このコースは、実際にブラウザ上で動くアプリケーションを作りながら、プログラミングの基礎から学習し、JavaScriptでプログラムを書けるようになります。
このコースを習得すれば、次のような事ができるようになります。
- プログラミングの基礎の習得。
- ブラウザ上で動くアプリケーションの作成。
- 最新のHTML5の機能の利用（作図、画像フィルター処理、音声や動画の再生、Web APIの使用）
このコースは、実際にブラウザ上で動くアプリケーションを作りながら、プログラミングの基礎から学習し、JavaScriptでプログラムを書けるようになります。
このコースを習得すれば、次のような事ができるようになります。
- プログラミングの基礎の習得。
- ブラウザ上で動くアプリケーションの作成。
- 最新のHTML5の機能の利用（作図、画像フィルター処理、音声や動画の再生、Web APIの使用）
コースで紹介されるコードは、サンプルコードとして、全てダウンロードすることができます。
このコースでは、基礎から学んでいき、最終的に最新のHTML5の機能を利用した、アプリの作成までを行います。
‥‥‥‥‥‥‥‥‥‥
各セクションでは、以下のようなアプリを作ります。ほとんどのアプリは、ソースコードが100行以内で、容易に理解、改造が行えます。
- 税込み計算アプリ（入力欄から数値を得て計算結果を表示）
- アウトライン メモ（アウトライン エディタ風に、ネストしたリストを追加）
- 三択問題アプリ（ユーザーの解答に応じて、結果表示を分岐）
- 字典アプリ（マウスオーバーで、説明表示を切り替え）
- テーブル ソート（テーブルを、名前順や数値順で、自在にソート）
- 連続計算アプリ（複数行入力欄の数式を、行ごとに計算して結果表示）
- メモ アプリ（Webブラウザに情報を記録したり、取り出したり）
- HTML自動リンク アプリ（文字列からURLを探し出して、自動でタグを付加）
- 角丸四角画像生成アプリ（角丸四角のパスを作り、画像を動的に生成）
- 画像切り抜きアプリ（画像を丸く切り抜いたPNG画像を生成）
- セピア調アプリ（画像の画素を処理して、セピア調に変換）
- 音声再生アプリ（音声を読み込み、再生）
- 動画再生アプリ（動画を読み込み、再生）
- ストップウォッチ（経過時間を取得して、定期的に表示を更新）
- 人気Webページ表示（Web APIを利用して情報を得て、リンクボタンを自動生成）
JavaScriptは、Webブラウザとテキストエディタがあれば、すぐにプログラムを始められます。この簡単なプログラミング言語で、プログラムとJavaScriptをマスターしましょう！
※ 本講座の解説で出てくる「Webアプリ」とは、ブラウザ上で動くアプリケーションのことです。電卓やメモ帳のような、パソコンのローカルアプリを、ブラウザ上で再現したものになります。複雑なものでは、PhotoshopのようなWebアプリもあります。本講座では、初心者でも作れるものを中心に、作成していきます。
What's inside
Syllabus
本講義の目標や範囲を紹介します。
本講座自体の説明をおこない、おおまかなロードマップを示します。
JavaScriptが何であるのかを学習します。
JavaScriptが、Webブラウザ用の言語であること、Javaとは違うことを理解します。
Read more
Syllabus
本講座自体の説明をおこない、おおまかなロードマップを示します。
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 アプリ」を作ります。マウスを載せた際に、関数を呼び出し、処理をおこなえるようになります。
ソート機能付きで、表を表示するアプリです。テーブルの内容を配列として扱い、自前のルールで並べ替える処理を実現しています。統計表示アプリなどに、応用できるでしょう。
Good to know
Save this course
Save
Reviews summary
初心者向け javascript の実践例講座
Activities
Read a textbook
Show steps
This book is a great resource for learning JavaScript. It covers the basics of the language in a clear and concise way.
View
A Million And One Random Digits
on Amazon
Show steps
-
Read the book from cover to cover.
-
Take notes as you read.
-
Complete the exercises at the end of each chapter.
Review tax calculations
Show steps
This course will make use of tax calculations in many contexts. Completing this activity will help you gain familiarity with tax calculations.
Show steps
-
Review the basics of tax calculations.
-
Identify the types of taxes used in applications.
-
Calculate taxes for different scenarios.
Organize your course materials
Show steps
Keeping your course materials organized will help you stay on track and learn more effectively.
Show steps
-
Create a system for organizing your notes, assignments, and other course materials.
-
Review your materials regularly.
Six other activities
Expand to see all activities and additional details
Show all nine activities
Watch video tutorials
Show steps
This course is self-paced, so you can go at your own speed. If you get stuck, there are many helpful video tutorials available online.
Show steps
-
Search for video tutorials on the topic you are learning.
-
Choose tutorials that are clear and easy to understand.
-
Watch the tutorials and take notes.
Join a study group
Show steps
This course is a great opportunity to learn from your peers. Joining a study group will allow you to collaborate with others and learn from their experiences.
Show steps
-
Find a study group that meets your needs.
-
Attend study group meetings regularly.
-
Participate in discussions.
-
Help other members of the group.
Complete programming exercises
Show steps
Understanding code is one thing, writing it is another. This activity will help you practice writing code to reinforce what you are learning.
Show steps
-
Find programming exercises online.
-
Choose exercises that are at your current skill level.
-
Solve the exercises.
-
Review your solutions.
Create a web app
Show steps
This course will help you develop the skills to create web apps. By building your own, you will get hands-on experience with all aspects of web development.
Show steps
-
Choose a simple web app idea.
-
Design the user interface.
-
Write the code.
-
Test the web app.
-
Deploy the web app.
Attend an online workshop
Show steps
Online workshops are a great way to learn from experts and get hands-on experience. There are many different online workshops available, so you can find one that fits your needs.
Show steps
-
Find an online workshop that you are interested in.
-
Register for the workshop.
-
Attend the workshop.
-
Participate in the workshop activities.
Contribute to an open source project
Show steps
Open source projects are a great way to learn new skills and contribute to the community. By contributing to an open source project, you will get hands-on experience with real-world code.
Show steps
-
Find an open source project that you are interested in.
-
Read the project documentation.
-
Make a small contribution to the project.
-
Get your contribution reviewed and merged.
Read a textbook
Show steps
This book is a great resource for learning JavaScript. It covers the basics of the language in a clear and concise way.
View
A Million And One Random Digits
on Amazon
Show steps
- Read the book from cover to cover.
- Take notes as you read.
- Complete the exercises at the end of each chapter.
Review tax calculations
Show steps
This course will make use of tax calculations in many contexts. Completing this activity will help you gain familiarity with tax calculations.
Show steps
- Review the basics of tax calculations.
- Identify the types of taxes used in applications.
- Calculate taxes for different scenarios.
Organize your course materials
Show steps
Keeping your course materials organized will help you stay on track and learn more effectively.
Show steps
- Create a system for organizing your notes, assignments, and other course materials.
- Review your materials regularly.
Watch video tutorials
Show steps
This course is self-paced, so you can go at your own speed. If you get stuck, there are many helpful video tutorials available online.
Show steps
- Search for video tutorials on the topic you are learning.
- Choose tutorials that are clear and easy to understand.
- Watch the tutorials and take notes.
Join a study group
Show steps
This course is a great opportunity to learn from your peers. Joining a study group will allow you to collaborate with others and learn from their experiences.
Show steps
- Find a study group that meets your needs.
- Attend study group meetings regularly.
- Participate in discussions.
- Help other members of the group.
Complete programming exercises
Show steps
Understanding code is one thing, writing it is another. This activity will help you practice writing code to reinforce what you are learning.
Show steps
- Find programming exercises online.
- Choose exercises that are at your current skill level.
- Solve the exercises.
- Review your solutions.
Create a web app
Show steps
This course will help you develop the skills to create web apps. By building your own, you will get hands-on experience with all aspects of web development.
Show steps
- Choose a simple web app idea.
- Design the user interface.
- Write the code.
- Test the web app.
- Deploy the web app.
Attend an online workshop
Show steps
Online workshops are a great way to learn from experts and get hands-on experience. There are many different online workshops available, so you can find one that fits your needs.
Show steps
- Find an online workshop that you are interested in.
- Register for the workshop.
- Attend the workshop.
- Participate in the workshop activities.
Contribute to an open source project
Show steps
Open source projects are a great way to learn new skills and contribute to the community. By contributing to an open source project, you will get hands-on experience with real-world code.
Show steps
- Find an open source project that you are interested in.
- Read the project documentation.
- Make a small contribution to the project.
- Get your contribution reviewed and merged.
Career center
Mobile Developer
Front-End Developer
Web Developer
Full-Stack Developer
Web Designer
Software Engineer
UI/UX Designer
Teacher
Computer Scientist
Business Analyst
Data Analyst
Product Manager
Project Manager
Technical Writer
Software Developer
Reading list
Save
Save
Share
Similar courses
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.
