<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