Webデザインラボ当サイトはJavaScriptが有効に設定されていないと正しく表示されません。【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。2016/08/08こんにちは(¬v¬)今回はPrototypeとjQueryについてです。最近のWeb制作においてJavaScriptは欠かせない存在となりました。そのJavaScript/Ajaxの中でも特にprototypeとjQueryといったフレームワークやライブラリはWeb制作の現場において必須項目となりつつあります。今回そのprototypeやjQueryを使うために必要な準備について解説します。prototypeとjQueryprototypeの導入prototype.js(http://www.prototypejs.org/)を公式サイトからダウンロードします。ダウンロードしたファイルを任意の場所に保存します。ここでは「/common/js/」にダウンロードしたファイルを保存します。head要素内に次の一行を追加します。ファイル名はダウンロードしたファイル名を入力します。今回ダウンロードしたファイルはprototype.jsなのでそれがファイル名になります。src="/common/js/prototype.js"></script>これでprototypeが使えるようになりました。jQueryの導入jquery.js(http://jquery.com/)を公式サイトからダウンロードします。ダウンロードしたファイルを任意の場所に保存します。ここでは/common/js/にダウンロードしたファイルを保存します。head要素内に次の一行を追加します。ファイル名はダウンロードしたファイル名を入力します。今回ダウンロードしたファイルはjquery-1.8.2.min.jsなのでそれがファイル名になります。src="/common/js/jquery-1.8.2.min.js"></script>これでjQueryが使えるようになりました。prototypeとjQueryの共存prototypeとjQueryは競合(コンフリクト)します。prototypeとjQueryを一緒に使うことはできません。サイト設計の段階でどちらのライブラリを使うか決めておかなければなりません。しても使わざるおえない場合があります。その場合の対処方法です。jQueryにはjQuery.noConflict()という関数がありますのでそれを使ってprototypeとjQueryを共存させます。prototypeとjQueryを読み込みます。prototype、jQueryの順で読み込ませます。prototypeのプラグインもjQueryの前に読み込ませます。src="/common/js/jquery.js"></script>jQueryを読み込んだ後に次のコードを読み込ませます。jQuery.noConflict();//引数にtrueを指定すると$、jQuery共に無効になる。</script>あとは使用するjQueryのライブラリで定義されている$をj$に全置換すればprototypeとjQueryが共存できるようになります。Webデザインラボ中の人NYのデザイン学校でグラフィックデザインを学んだ後、同じくNYにあるWeb制作会社にてインターンからWebデザイナーへ。同時期に米国永住権(グリーンカード)を取得。その後某旅行会社系のWebクリエーター兼社内インフラ担として働いた後、結婚を機に約12年に渡るアメリカ生活を終え日本に帰国。日本では某携帯キャリアの社内Webクリエーターとして勤務。Web系に携わる前はホノルル空港でGreeterとして働いていた経験や、アメリカ国内の衣料品を中心としたアパレル系のバイヤー経験もあり。趣味はお酒を飲みながらの家でまったり音楽鑑賞とアウトドア系全般。最近は自転車にもハマってます。更新情報はTwitterかFacebookで配信してるのでフォローして確認してみて。