강의

멘토링

커뮤니티

Programming

/

Web Publishing

Web パブリッシャーのための JavaScript & jQuery 核心理論実践例題 (教材、完成版)

ウェブ パブリッシャー向けの JS 核心理論および実践例教材および完成版は、PDF で作成された講義教材です。この教材は、ウェブ パブリッシャーが必ず知っておくべき JavaScript と jQuery の基本を忠実に習得できる役割を果たします。この教材の特徴は、理論に関連するスモール ミッション (Small Mission) を通じて、理論をさらに強化できることです。特に、学習したすべての理論を活用した実践例も、忠実に準備された教材です。この PDF の全ページは、純粋な JavaScript (Vanlila JavaScript) と jQuery ページの数が 320 ページ以上で、CodingWorks が簡単に理解できるように十分な説明が追加されています。特に、パブリッシャーがウェブサイト作成のために必要な jQuery 相互作用の実践例を学習できます。

  • codingworks
전자책 제공
웹퍼블리셔
미션
이론 실습 모두
JavaScript
jQuery
HTML/CSS

学習した受講者のレビュー

こんなことが学べます

  • JavaScript の必須理論と実践的な活用例

  • jQuery の必須理論と実用的な活用例

  • JavaScript&ジェイクエリ HTML+CSS+JS 完成本

<WebパブリッシャーのためのJSコア理論と実践例教材および完成本>

コーディングワークスが丁寧に作ったJS基礎コア教材、
Webデザイナー、Webパブリッシャー、Web開発者に特化した説明とスモールミッション、
そして実務に必要な現実的で面白い実践例まで、
JavaScriptとjQueryに自信があります!

特に、パブリッシャーがウェブサイトを作成するために
必須のジェイクエリ相互作用の実践例を学ぶことができます。

「Webデザイナー、Webパブリッシャーにとって負担の高いJS学習を理解しやすく!」

コーディングワークスが心血を傾けて丁寧に作ったJSコア理論と実践例PDFの自己教材です。普通の書籍とは異なり、JavaScriptとJayQueryが負担のあるWebデザイナーやパブリッシャー就職準備生にコーディングワークスがぜひ!必要な内容をわかりやすくするために十分な説明を入れました。その教材を作りながら「これをどのように説明すれば受講生たちがより簡単に理解できるだろうか」と考えながら頑張りました。

「段階別理論学習し、まさに該当理論活用したスモールミッションまで!」

既存のJavaScriptとJaqueoriesの教材は、今まで必要とされていない内容まで膨大に説明していますが、重要な内容の区別と説明が不足しています。読者の立場では、何をどのように集中して学習すべきかを知ることは難しいです。具体的には、理論の現実的な例が欠けています。例がありますが、現実的な例だと見にくい場合が多いです。しかし、コーディングワークスが作成した「WebパブリッシャーのためのJSコア理論と実践例教材と完成本」は、実務ですぐに使用できるコアな内容だけをよくまとめました。そして新しい理論を勉強すれば、必ずその理論を活用する例、まもなく、スモールミッションを行うように構成されています。

「これをどこでも使ったんだけど…あ~勉強した理論をこういう時に使うんだね!」

学習したすべての理論を活用して実践例を作成します。理論を勉強するときは、これはどこに書きますか?という考えをすることもできますが、いくつかのスモールミッションと最後のパート本番の例を作りながら「あ~勉強した理論を掛けるときに使うんだ!」と思います。これにより、理論をより堅く覚えることができます。特に現実的な実践例を作ってみると、JavaScriptとJayQueryが開発者たちがするのは難しくて負担なものだけではないという考えをしながら、今後さらにJavaScriptとJayQueryを楽しく勉強できる動機になります。

「PDF教材だからいつでもどこでも確認できて良く、完成本ファイルもたくさん助けます!」

パブリッシング関連またはプログラミング関連の学習のために、以前は書店で本を購入してみました。私もそうでした。ところが本というのが必要なときに見ようとすると、常にそばにいるはずですが、持ち歩くのも大変で家に置いて通うことがほとんどです。だから、いつでもどこでも気になればすぐに見ることができる電子ブックが良いです。

余談ですが。検索してYouTubeやブログを通じて複数の人の知識をもたらしますが、結局自分には断片的な知識になることが多いです。一般図書でも電子ブックでも、どんな形でも実力向上のために参考書は必ずなければなりません。

教材に記載されているすべてのスモールミッションと実践例ファイルは、HTML + CSS + JSファイルの形式でダウンロードできます。そのため、教材の内容をコーディングする前に、プレビューでファイルを先に開いて、教材を通じて練習することができ、教材で見逃した部分を完成本ファイルを通してチェックすることができます。


📖PDF教材の内容(JavaScript、212ページ)

01. JavaScriptの基本文法

  • JavaScript言語の接続
  • 注釈を付ける
  • データ出力
  • データ型
  • 四則演算子と比較演算子

02. JavaScript変数

  • 変数宣言、代入、初期化、ブラウザ出力
  • 変数名の規則
  • 変数に入れるデータ型
  • 変数の再宣言
  • 変数の使用理由
  • 変数と関数を使ってプログラムを作成する(平均を求める)
  • ES2015バックティック( `)とテンプレート文字列

03. JavaScript 条件文 if, switch 文

  • 基本的なif else条件文
  • 複数のif条件文
  • 論理演算子
  • ネストされたif条件文
  • switch ドア
  • 三項演算子
  • ifと'?'を使用した条件処理

04. JavaScriptの繰り返し文 - while文、do while文、for文

  • 複合代入演算子
  • 増減演算子
  • while 繰り返し文
  • do while 繰り返し文
  • for 繰り返し文
  • 入れ子になる for イテレーション

05. JavaScript配列とfor inステートメント

  • 配列(Array)
  • 配列とfor文
  • for in ステートメント
  • break キーワード
  • continue キーワード

06. JavaScript 関数 (function)

  • 関数宣言と呼び出し
  • パラメータと戻りキーワード
  • 変数式関数宣言
  • 組み込み関数
  • 即時実行関数
  • 関数式、矢印関数

07. JavaScriptオブジェクトとコンストラクタ関数

  • オブジェクトの種類
  • オブジェクトの宣言と呼び出し
  • 変数、配列、オブジェクト概念の比較
  • thisキーワード
  • コンストラクタ関数とプロトタイプ

08. JavaScript 基本組み込みオブジェクト

  • 文字列
  • Number 数値 & Math 数学
  • Array配列のプロパティとメッセージ
  • Date 日付
  • Date オブジェクトの Getter および Setter メソッド

09. BOM(ブラウザオブジェクトモデル):ブラウザオブジェクト

  • BOM(ブラウザオブジェクトモデル)
  • window オブジェクトのプロパティとメソッド

10. DOM(Document Object Model):文書オブジェクト

  • DOMドキュメントオブジェクトとは?
  • DOMドキュメントオブジェクトを取得するメソッド
  • DOMドキュメントオブジェクトの準備構文メソッド(onload)
  • ドキュメントオブジェクトのプロパティとメソッド
  • イベントオブジェクトのプロパティとメソッド
  • マウス&キーボードイベントオブジェクトのプロパティとメソッド

11. HTML DOM Node

  • HTML DOM Nodeとは?
  • HTML DOM Node間のナビゲーション

12. JavaScript - ドキュメントオブジェクトのプロパティ

  • ドキュメントオブジェクト - フォーム
  • ドキュメントオブジェクト - クラスプロパティ
  • ドキュメントオブジェクト - 領域プロパティ
  • ドキュメントオブジェクト - dataset プロパティ

13. JavaScriptの実践例

  • マウスをクリックしてスムーズにスクロールして移動する
  • デジタル時計を作る(方法1)
  • デジタル時計を作る(方法2)
  • モーダルを浮かべる(1)
  • モーダル(Modal) 浮く(2)
  • ストップウォッチ(StopWatch)を作成(分:秒:ミリ秒)
  • ストップウォッチ(StopWatch)の作成(時:分:秒)
  • はさみロックボー(Rock Paper Scissors)ゲームを作る
  • 電卓の作成 with Grid(インライン JavaScript 方式)
  • 電卓の作成 with Grid(関数パラメータ呼び出し方式)

📖PDF教材内容(ジェイクエリー、112ページ)

01. ジェイクエリ接続と基本文法

  • ジェイクエリ接続 - ダウンロード後のリンク方法
  • ジェイクエリ接続 - CDNリンク方式
  • ジェイクエリー基本文法 - スクリプトの作成場所/コメント

02. ジェイクエリー必須メソッド Part1

  • CSSスタイル変更メソッド
  • 要素検索メソッド
  • マウスイベント関数(function)の作成&ジェイクエリ変数(variables)
  • クラス追加削除メソッド
  • エフェクトメソッド
  • テキスト関連メソッド
  • プロパティ関連メソッド
  • 動的にhtml要素を挿入/削除する
  • width、height関連のメソッド
  • 位置関連メソッド
  • 要素のスクロール位置メソッド
  • コピーとラップに関するメソッド
  • イベントの種類(マウスイベント、キーボードイベット、フォーム関連イベント)

03. ジェイクエリー必須メソッド Part2

  • アニメーション効果 animate()
  • 個々のドキュメントをページ上の任意の場所に読み込む load() メソッド

04. ジェイコーリー実戦例

  • 3種類の画像スライダを作成するジェイクエリタブメニューコンテンツ
  • ジェイクエリアコーディオンコンテンツ
  • フッターファミリーサイトカスタムセレックス(select)ボックス
  • input colorを使用して背景色を変更する
  • マウスを下げるとCSSの変化とスムーズに上に行きます
  • スムーズにスクロールしながら各セクションを探す
  • フォントサイズ増加減少バーを作る
  • フォントサイズ増加減少ボタンを作る
  • ライトモード&ダークモードを切り替える
  • ファイルアップロードフォームの作成
  • プロフィール写真アップロードフォームの作成
  • チェックボックスチェックすると、見えない入力フィールドを表示する
  • もっと見るボタンを押すと隠しコンテンツを読み込む
  • サムネイル画像を押すと大きな画像が見えるフォトギャラリー
  • パスワード入力値を表示隠す with フォントアイコン
  • テキスト入力ボックス(テキスト)文字数を確認する
  • マウスポインタに従う拡大鏡機能の作成
  • マウススクロールによるフェラレックス効果(Parallax Effect)
  • モバイル下部のアイコンタブバーナビゲーションの作成
  • やること (To Do List) の作成
  • スライダー(前の次のボタン、Autoplayコントロールボタン)
  • スライダー(自動Autoplay、マウスオーバー停止して抜けたら再起動)
  • フォーム入力フィールドをクリックするとテキストが上がるアニメーション
  • イメージホバーエフェクトをジェイクエリーアニメートにする
  • サイドバーナビゲーションで隠しコンテンツを開く
  • フォトギャラリーライトボックス(Lightbox)を作成する
  • レスポンシブアニメーションモーダル
  • フロントバックトランジション画面切り替え

05. ジェイクエリプラグインの使い方

  • ジェイクエリスライダプラグインSlick Sliderの使い方
  • ジェイクエリタイピングプラグイン Typed.jsの使い方
  • ジェイクエリーライトボックスプラグインfeatherlight.jsの使い方
  • ジェイクエリーカウントダウンタイマープラグイン The Final Countdown

※該当するジェイコーリー教材でAjaxの使用法は扱いません。


🚩PDF教材プレビュースクリーンショット(JavaScript

🚩PDF教材プレビュースクリーンショット(ジェイクエリ)



⚡JavaScript(JavaScript)実践例完成本のプレビュー

スライダー(前の次のボタン、Autoplayコントロールボタン)

スラアーダー(自動Autoplay、マウスオーバー停止して抜けたら再起動)


▲マウスクリックしてスムーズにスクロールして移動させる(JavaScript方式)


[分秒ミリ秒]ストップウォッチ(Stop Watch)を作る


はさみロックボー(Rock Paper Scissors)ゲームを作る


電卓を作る with Grid


マウスイベントで背景色を変更する


モーダル(Modal) 浮く(方法2)

⚡JQuery(jQuery)実践例完成本プレビュー

▲マウスクリックしてスムーズにスクロールして移動させる(ジェイクエリー方式)


ToDo Listを作成


モバイル下部のアイコンタブバーナビゲーションの作成(Tab Bar navigation)


マウスポインタに沿って走る拡大鏡機能を作る


ライトモード&ダークモードを切り替える


フォントサイズ増加減少バーを作る


テキスト入力ボックス(textarea)文字数をチェックする


▲パスワード入力値を表示する隠す with フォントアイコン


▲プロフィール写真アップロードフォームを作成


▲フォーム入力フィールドクリックするとテキスト上がるアニメーション


▲フォトギャラリーライトボックス(Lightbox)を作る


▲イメージホバーエフェクトをジェイクエリーアニメートにする


▲サイドバーナビゲーションで隠しコンテンツを開く


▲フロントバックトランジション画面切り替え


▲ジェイクエリスライダープラグインSlick Sliderの使い方


▲ジェイクエリタイピングプラグイン Typed.jsの使い方


▲ジェイクエリプラグインフェザーライトの使い方


▲JQueryカウントダウンタイマープラグインThe Final Countdownの使い方


🌈JavaScript&JakeQuery Complete Bookのプレビュー


受講前の注意 📢

該当の教材は、Webパブリッシャー就職準備をする方、またはWebパブリッシャーで現職で働いている方のための教材です。フロントエンド開発者またはバックエンド開発者が希望するレベルの深さを持つ講義ではありません。だからといって、JavaScriptとJayQueryのコア理論の内容を間違って扱っているわけではありません。全般にわたって必ず必要な内容を取り扱っています。フロントエンド開発者またはバックエンド開発者が望むJS講義のレベルの深さは、市販の中上級のJavaScript教材が適しています。

🟢 その講義を受講する前に、以下のコーディングワークスのブログ記事を一度見てください。
WebデザイナーとWebパブリッシャーがJavaScriptよりもジェイクエリを上手にする理由: https ://www.inflearn.com/blogs/3527

選手の知識と注意事項

  • パブリッシングがメインではなくJS学習教材なので、HTML+CSS基礎能力くらいです。

知識共有者の紹介✒️

県)国費パブリッシング&フロントエンド講師
県)フリーランサーフロントエンドパブリッシャー
現)HTML+CSS+JQUERYパブリッシングYouTubeチャンネル「コーディングワークス」運営
グリーンコンピュータアカデミーウェブパブリッシングインストラクター
ダージョはコンピュータアカデミーウェブパブリッシングインストラクター
今コンピュータアカデミーWebパブリッシングインストラクター
フロントエンドパブリッシャー、フロントエンドパブリッシング専門講師
UI/UX Webデザインポートフォリオ講義
ウェブデザイン機能士実技資格講義講義
イージーアンドデューフロントエンドUI / UXデザインとパブリッシング

🌏コーディングワークスInflearn講義リスト - https://www.inflearn.com/users/@codingworks

🌏Inflearnコーディングワークス講義学習手順(学習ロードマップ) - https://www.inflearn.com/blogs/2351

🌏コーディングワークス Inflearn パブリッシングブログ - https://www.inflearn.com/users/@codingworks/blogs

🌏コーディングワークスパブリッシングYouTubeチャンネル - https://www.youtube.com/codingworks

こんな方に
おすすめです

学習対象は
誰でしょう?

  • JavaScript & jQuery の重要な内容を PDF 教材として見たい方

  • JavaScript & jQuery のスキルを向上させたい Web デザイナー、Web パブリッシャー、Web 開発者

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

  • メインがパブリッシングではない JS 学習教材なので、HTML+CSS の基本的な能力程度

こんにちは
です。

12,696

受講生

752

受講レビュー

2,114

回答

4.9

講座評価

23

講座

■ [현재] 국비 퍼블리싱 & 프론트엔드 강사 
■ [현재] 프리랜서 프론트엔드 퍼블리셔
■ [현재] HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
■ 그린 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 더조은 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 이젠 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
■ 웹디자인 기능사 실기 자격증반 강의
■ 이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱

 

🌏코딩웍스 인프런 강의목록 - https://www.inflearn.com/users/@codingworks
🌏인프런 코딩웍스 강의 학습 순서(학습 로드맵) - https://www.inflearn.com/blogs/2351
🌏코딩웍스 인프런 퍼블리싱 블로그 - https://www.inflearn.com/users/@codingworks/blogs
🌏코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks
🟣인프런 인포커스 코딩웍스 인터뷰 보기 : https://www.inflearn.com/pages/infocus-8-20230704

カリキュラム

全体

5件

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

11件

4.6

11件の受講レビュー

  • 잼원님의 프로필 이미지
    잼원

    受講レビュー 8

    平均評価 5.0

    5

    100% 受講後に作成

    돈이 아깝지 않을 정도로 알찹니다

    • 코딩웍스(Coding Works)
      知識共有者

      수강평 감사드립니다~^^

  • 고창우님의 프로필 이미지
    고창우

    受講レビュー 10

    平均評価 5.0

    5

    100% 受講後に作成

    최종 프로젝트 때 많은 도움이 되었습니다. 정말 감사드립니다.

  • 한우진님의 프로필 이미지
    한우진

    受講レビュー 1

    平均評価 5.0

    5

    80% 受講後に作成

    이론과 정말 다양한 실무 예제들이 담겨있어서 따라해 보면서 금방 실력이 늘 수 있을 것 같아요! 인터넷 강의가 아닌 전자책이라서 언제든지 확인하기 쉽고 정해진 강의 시간이 있는 것이 아니라 제 속도에 맞게 공부 할 수 있다는 점도 정말 좋은 것 같아요 열심히 공부해 보겠습니다!

  • 재롱이님의 프로필 이미지
    재롱이

    受講レビュー 32

    平均評価 5.0

    5

    100% 受講後に作成

    정리 엄청 잘되어있어서 만족입니다!

  • wjdals992님의 프로필 이미지
    wjdals992

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    그동안 유튜브나 무료강의등으로 자바스크립트를 공부했지만 실속은 없는 이론들뿐이었는데 이 강의를 구매하여 보고선 자바스크립트에 대해 좀 더 깊이 이해할 수 있게 되었습니다.

¥4,171

codingworksの他の講座

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

似ている講座

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