inflearn logo
inflearn logo

Webプログラミングの華!JavaScript基礎

JavaScriptを通じてHTML要素を選択し、さまざまなイベントに応じて要素のスタイルを変更したり、アニメーション効果を実装したりします。JavaScriptの基本文法からスタイルの変更、イベントの設定、およびウェブページ制作時によく使われる効果の実装を行います。

難易度 初級

受講期間 無制限

HTML/CSS
HTML/CSS
JavaScript
JavaScript
vanilla-javascript
vanilla-javascript
css-flexbox
css-flexbox
HTML/CSS
HTML/CSS
JavaScript
JavaScript
vanilla-javascript
vanilla-javascript
css-flexbox
css-flexbox
날개 달린 동전

講座 を紹介して、成長と収益を得ましょう!

날개 달린 동전

マーケティングパートナーズ

講座 を紹介して、成長と収益を得ましょう!

受講後に得られること

  • JavaScriptの基本기

  • JavaScriptを利用して要素を選択することができる。

  • 要素のスタイルを変更できる

  • 様々なイベントを適用できる

  • UI/UX効果を実装できる

本コースは、華やかで複雑な機能よりもプログラミングの基本と核心概念に集中し、しっかりとした基礎を築けるように構成されています。

変数と演算子、関数とオブジェクト、配列の生成と活用などの基礎概念を明確に理解し、条件文と繰り返し文で論理的な思考を訓練します。

文字列処理、HTML要素の選択およびスタイルの変更、イベント処理などの実習を通じて、実務にすぐ適用可能な基礎を身につけることができます。

最新のECMAScript 6構文も扱い、「Back to top」、「タブメニュー」、「アコーディオン」といった実践的な例題を通じて、学んだ内容を実習で確認します。プログラミングを初めて学習する学生にとって、必要不可欠な核心だけを詰め込んだカリキュラムです。

本講座では、HTML、CSS、JavaScriptの基礎知識がある方が学習しやすくなっています。
各パートの基礎を学習したい場合は、以下のリンクを確認してください。

ムービングタブの実装

アコーディオンの実装

Back to Top Scroll Animation 実装する

よくある質問

Q1. JavaScript(JS)はどのような言語ですか?

JavaScriptは、ウェブページを動的に操作するプログラミング言語です。HTML・CSSで作られた静的な構造にインタラクションとロジックを追加することで、マウスクリック、ボタンの動作、アニメーション効果などを実装できます。

Q2. HTML/CSSを学んでいないのですが、この講義だけで受講できますか?

この講座はウェブパブリッシングの基礎知識(HTML・CSS)が必要な構成になっており、基本的な文書構造を理解していると、よりスムーズに学習を進めることができます。

Q3. 講義ではどのような内容を学びますか?

この講座では、次のような内容を扱います:

  • 変数、演算子、関数、オブジェクト、配列などの基本文法

  • 条件文、繰り返し文による論理的なフローの構成 with conditional statements and loops bằng câu lệnh điều kiện và vòng lặp

  • HTML要素の選択およびスタイルの変更

  • イベント処理(click、hoverなど)

  • Back to top、タブメニュー、アコーディオンのような簡単な実践例の実装

Q4. この講義を受講すると何が作れるようになりますか?

この講座を受講すれば、HTML要素をプログラムのように制御できる能力が身につきます。
例えば:

  • ボタンクリック時に内容を切り替える

  • タブメニューの切り替え

  • スクロールに応じた効果の適用
    など、インタラクティブなUIを直接コードで実装できるようになります。

Q5. この講義の後は、どの講義を受講するのが良いでしょうか?

基礎文法を習得した後は、より実践中心のJavaScript活用講座、またはフレームワークベースの開発講座をおすすめします。
例:

  • Webパブリッシングマスター – Figma to Web with JavaScript

  • はじめてのReact:パブリッシャーのための実践ガイド
    その後、プロジェクトベースの学習へと進むことで、実際のサービス開発力へと拡張することができます。

コミュニケーション窓口(アンケート、1:1オープンチャット)

受講生の皆様は、お知らせ欄で紹介されているGoogleフォーム1:1オープンチャットを通じて、いつでも意見や質問をしていただけます。


こんな方に
おすすめです

学習対象は
誰でしょう?

  • HTMLの基礎を学習した方

  • CSSの基礎を学習した方

  • ウェブページに動的な効果を実装したい方

  • Webパブリッシャーとして就職したい方

  • フロントエンドエンジニアを目指している方

前提知識、
必要でしょうか?

  • HTML

  • CSS

こんにちは
ezwebです。

2,711

受講生

58

受講レビュー

4

回答

4.9

講座評価

11

講座

■ [現在] グリーンコンピュータアート学院 ウェブパブリッシング、フロントエンド講義
■ [現在] ウェブパブリッシングYouTubeチャンネル「Rock's Easyweb」運営
■ ザ・ジョウンコンピュータアカデミー ウェブパブリッシング講師
■ ハンビッコンピュータアカデミー ウェブパブリッシング講師
■ フロントエンドパブリッシャー、フロントエンドパブリッシング専門講師
■ UI/UXウェブデザインポートフォリオ講義


[ 書籍 ]
2021.07.19 刊行 / Webデザイン&WebパブリッシングのためのFigma完全活用書 / BJ Public

2022.08.25 出刊 / コーディングは初めて with ウェブパブリッシング / ヨンジン出版社

2023.10 出刊 /2024 SDエデュ ユ先生のウェブデザイン技能士実技家庭教師ノート / 時代考試企画

2024.11 重版 /2025 SDエデュ ユーソンベ ウェブデザイン技能士 実技 家庭教師ノート / 時代考試企画

[ 受賞歴 ]
2022.08 グリーンコンピューターアート学院 鍾路支店 - 優秀講師 2021.06 グリーンコンピューターアート学院 鍾路支店 - 優秀講師 2018.06 グリーンコンピューターアカデミー 新村支店 - 優秀講師 2017.05 グリーンコンピューターアカデミー 新村支店 - 優秀講師 2016.05 グリーンコンピューターアカデミー 新村支店 - 優秀講師 2015.10 グリーンコンピューターアカデミー 新村支店 - 優秀講師

もっと見る

受講レビュー

全体

1件

5.0

1件の受講レビュー

  • mrnobody님의 프로필 이미지
    mrnobody

    受講レビュー 7

    平均評価 5.0

    5

    100% 受講後に作成

    良い講義をありがとうございます。

    ezwebの他の講座

    知識共有者の他の講座を見てみましょう!

    似ている講座

    同じ分野の他の講座を見てみましょう!

    ¥1,781