JavaScript(ジャバスクリプト)・jQuery(ジェイ・クエリ―)の講座

JavaScript・jQueryは洗練されたUIに必須の技術

ホームページをただ単に制作するのであればHTML5・CSS3を使えば作ることはできます。ただ静的なページとしてのデザインになりやすく。 ホームページを閲覧するお客様の興味を引き付けにくいサイトになってしまいがちです。JavaScript・jQueryの技術を使うことで動的なホームページを作ることが出来、 より洗練されたUI(ユーザインタフェース)を持つホームページを作ることが出来ます。

JavaScript・jQueryオブジェクト指向スクリプト言語

JavaScript(ジャバスクリプト)
今やWeb制作では必須となっています。

JavaScript(ジャバスクリプト)の学習風景
JavaScript(条件分岐・if文)の学習

JavaScript(ジャバスクリプト)はブラウザサイドプログラムと呼ばれるプログラム言語で、ホームページを閲覧される方のパソコンの中で動くプログラム言語です。 現在のWebページでは必須となりつつある技術で、HTML5・CSS3では出来ないことを行うプログラムとお考えいただくといいかもしれません。 単に画像や文字を表示するだけのホームページではなく色々な動きを持ったホームページを制作する際、必要となります。 JavaScriptを利用したWEBサイトの例としては、私たちを含めて皆さんがいつもお世話になっているGoogleMapなどがその代表として挙げられます。 また、ティップスパソコンスクールのお問い合わせページの入力チェック等にも利用されています。

jQuery(ジェイ・クエリ―)
JavaScriptのライブラリーの一つ。

jQuery(ジェイ・クエリ―)の学習風景
jQuery(イメージギャラリー)の学習

jQuery(ジェイ・クエリ―)はJavaScript(ジャバスクリプト)ライブラリーの一つで、JavaScript単体で作成すると面倒なプログラム構成になるような場面でも、 簡単に使えるような仕組みが用意されている、JavaScriptを進化させたプログラムです。 現在のホームページで洗練されたUI(ユーザインタフェース)を持つ動的なホームページでは当たり前のように使われている技術となります。 画像がスライドして動いたり、画面がタブ形式で切り替わったり、画像がマウスのスクロールでアニメーションしたりなど、 皆さんが見られているホームページで使われている技術がこのjQuery(ジェイ・クエリ―)です。

JavaScript・jQueryの学習項目詳細

JavaScript(ジャバスクリプト)
学習項目 JavaScriptのプログラミングと動作の仕組み,アウトプットの基本,JavaScriptの記述場所,HTMLを書き換える, 文法と基本的な機能(確認ダイアログボックス・変数・if文・比較演算子・論理演算子・for文・while文・ファンクション・算術演算子・配列・オブジェクト), インプットとデータの加工(フォームの取得・入力内容の出力・日時の表示・桁数を合わせる), 一歩進んだテクニック(カウントダウンタイマー・プルダウンメニュー・クッキーの処理・イメージの切替・スライドショー)
所要時間12H+自由時間
jQuery(ジェイ・クエリ―)
学習項目 jQueryの基礎知識(jQueryの実行環境の準備),jQuery入門編(CSSスタイルの変更・タイミングコントロール・アニメーション), jQueryの書き方(変数・配列・オブジェクト・特殊な入れ物this・特定の機能をまとめる関数・スコープと命名規則・演算子・制御文), jQueryの基本テクニック(様々なホバーエフェクト・画像とキャプションの表現・ボタンのレイアウト・サイドバーの作成), jQueryの必修テクニック(スライドショー・スティッキーヘッダー・タブ機能・スムーズスクロール), 高機能なギャラリーページ(Masonryプラグインを利用したギャラリーの作成)
所要時間12H+自由時間

JavaScript・jQueryコース詳細

JavaScript(ジャバスクリプト)

JavaScript(ジャバスクリプト)イメージギャラリー制作
JavaScriptでギャラリー制作

ホームページ制作の中で一つ上の技術、静的なホームページから動きのあるホームページに変える技術がこのJavaScript(ジャバスクリプト)。かっこいいUIを使ったHPを希望されるなら必ず必要な基礎技術となります。

受講料43,200
(教材費2,480円)

jQuery(ジェイ・クエリ―)

jQuery(ジェイ・クエリ―)でスクロールアニメを実装
スクロールアニメを実装した画面

JavaScript(ジャバスクリプト)を受講された方が更に高度な表現を簡単に作ることのできる一つ上の技術として学習いただくのがこのjQuery(ジェイ・クエリ―)講座。憧れのUI表現を可能にする、応用技術講座です。

受講料43,200
(教材費2,580円)

Webデザイン実践

JavaScript・jQueryを使ってオリジナルのホームページを作成する講座です。

受講料32,000
(教材費0円)

ホームページ制作基礎

ホームページ制作の基礎技術となる「HTML5・CSS3」を学習する講座です。

受講料39,600
(教材費2,800円)

JavaScript・jQueryの特徴

メディアクエリもjQuery

レスポンシブデザインの作成にも
jQueryが使われている。
レスポンシブデザイン作成画面
メディアクエリでレスポンシブデザイン

最近のホームページで必要な技術と言われているレスポンシブデザイン(スマートフォン対応ホームページデザイン)。これも実はjQueryが使われているんです。 メディアクエリと言われる技術でホームページ画面のサイズの分岐点をCSS上で数種類作成し、画面のサイズが変わるとその個所のCSSが読み込まれホームページの形が変わるスマートフォン対応ホームページデザインの技術。 つまりこのメディアクエリも動きのあるホームページを作ると言われるjQueryなんです。ですのでWEBデザイナーを目指していただくなら、 学習をしないといけないのがjQueryです。

有名なBoxSlider(ボックススライダー)

動的ホームページのデザインに
プラグインを使うことも。
jQueryのプラグインBoxSlider(ボックススライダー)を使ったUI
BoxSlider(ボックススライダー)

よくホームページで画像が横にスライドしながら次のイメージに変わるなんて描写がありますよね。これもjQueryが使われています。 jQueryで一から作ろうとすると当然複雑なプログラムの構成・さらにCSSの構成を作らなければなりません。 ところが実際の現場ではそこまで時間をかけられないのが現状です。そこで便利に使える技術がプラグインと呼ばれる技術です。プラグインと呼ばれる技術はもともと動きが作成されており、 JSファイル・CSSファイルなどを読み込むことで、時間をかけずにカッコいいUI(ユーザインタフェース)を作成することが出来るのです。ただそれだけではやはり現場では使えません。 ティップスではそれらプラグインの導入だけではなく、仕組みも学習するので確かな実力が身につきます。