初心者向けにJavaScriptとjQueryの比較と使い分けについて現役エンジニアが解説しています。JavaScriptは処理が速く、ライブラリ併用が簡単ですが、ブラウザ対応などで煩雑になってしまいます。jQueryはブラウザ対応や書き方が冗長になりませんが、ライブラリとの併用に難があります。[テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。JavaScriptとjQueryの比較と使い分けについて解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。筆者プロフィール水野大輝(みずのたいき)2014年より、某物流会社のシステム開発担当として入社。PostgreSQLなどの経験を積む。ゆかり内容分かりやすくて良かったです!田島悠介ゆかりちゃんも分からないことがあったら質問してね!大石ゆかり分かりました。フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。関連する記事JavaScriptで配列内の値を加算する方法を現役エンジニアが解説【初心者向け】JavaScriptで配列内の値を加算する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。...JavaScript入門に最適!独学から始められるjQueryの学習サイト20選jQueryを勉強したいと思って検索してみても、サイトが多すぎてどのサイトから勉強すれば良いか分からないという方がいるかと思います。今回は、独学から始め...JavaScriptJavaScriptで子要素だけ処理する方法を現役エンジニアが解説【初心者向け】JavaScriptで子要素だけ処理する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。入門向...JavaScriptJavaScriptでCSVファイルを読み込む方法を現役エンジニアが解説【初心者向け】JavaScriptでCSVファイルを読み込む方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。...JavaScriptJavaScriptのresolveメソッドの使い方を現役エンジニアが解説【初心者向け】JavaScriptのresolveメソッドの使い方について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。...JavaScriptJavaScriptでマイクロ秒単位で時間を計測する方法を現役エンジニアが解説【初心者向け】JavaScriptでマイクロ秒単位で時間を計測する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。入...JavaScriptあわせてよく読まれている記事JavaScriptでフォーム要素にdisabledを設定・解除する方法を現役エンジニアが解説【初心者向け】JavaScriptでフォーム要素にdisabledを設定・解除する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。disabledは無効を示す属性です。値を送信したくないフォーム要素に対して、disabled属性を設定するとその値は送信されなくなります。以下は、disabledを使用するコード例です。disabled属性が設定されている場合、値の編集も不可能になります。することでdisabled属性を設定できます。JavaScriptのライブラリであるjQueryにはpropメソッドを使います。jQueryの場合にはpropメソッドを使います。以下のHTMLに対して、disabledを設定・解除してみましょう。id="name">JavaScriptクリック時の処理!JavaScriptでonclickを使う方法【初心者向け】JavaScriptをプログラミング初心者向けに紹介した記事です。onclickを使う方法について初心者向けに解説しています。入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。onclickとは、イベントをトリガーにして処理を実行するイベントドリブンモデルで利用できるイベントです。イベントに対応して処理内容を定義するコードのかたまりのことをイベントハンドラー、またはイベントリスナーと呼びます。onclickは、マウスクリック時に対しての処理をするイベントになります。以下はonclickを利用したイベントの書き方です。}内に記述していきます。onclickを利用したイベント処理の一例を紹介します。function()JavaScriptJavaScriptとJScriptの比較を現役エンジニアが解説【初心者向け】JavaScriptとJScriptの比較について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。JScriptとは、マイクロソフト製のプログラム言語です。ブラウザのインターネットエクスプローラーに搭載したJavaScriptとECMAScriptに対して互換性を持ちます。JavaScriptはプラットフォームをブラウザとして動作させるプログラム言語として定番になりました。マイクロソフトのインターネットエクスプローラーだけはJavaScriptではなく、独自開発のJScriptが搭載されています。代表的な相違点としては、イベントが発生する度に実行させる処理を設定するための関数とその引数が異なります。クラスの名前を抽出条件として、その対象の要素群を配列に格納するための関数がJScriptにはありませんでした。JScriptブラウザから非同期の通信を実現するためのコンストラクタの名前や引数がインターネットエクスプローラーのバージョン毎によって異なっています。以下は、JavaScriptとJScriptのコード例です。function関数は、関数の名前やその関数に代入が可能な引数の差異を補完するための関数を定義します。この関数を経由することで、JavaScriptとJScriptのプログラムが処理されるまでの手続きや戻り値が統一されるとともに、処理が正常になります。以下、イベントリスナーのサンプルコードです。JavaScriptによるプログラムの処理には、クロスブラウザと呼ばれる処理を書き連ねることが多く、これらの処理があらかじめ備わっているjQueryが大流行しました。TechAcademyの現役メンター。FXなど多岐にわたる。TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。現役エンジニアから学べる無料体験も実施しているので、参加してみてください。JavaScriptJavaScriptでフォームの入力内容をリセットする方法を現役エンジニアが解説【初心者向け】JavaScriptでフォームの入力内容をリセットする方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。フォームリセットとは、フォーム内で入力された様々な項目(input・selectなど)を削除(初期化)することを指します。フォームの内容をリセットするには、form.resetメソッドを使用します。jQueryでもresetメソッドは使用可能です。構文としては以下のような形になります。使用例を紹介いたします。2014年より、某物流会社のシステム開発担当として入社。PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。JavaScriptjQueryのscrollTop()メソッドの使い方を現役エンジニアが解説【初心者向け】jQueryのscrollTop()メソッドの使い方について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。ブラウザ内で現在表示している位置のことを指します。この情報を利用することで、ボタンや表示位置によってページの強制スクロールなどを行えます。scrollTop()とは現在のスクロール位置を取得するメソッドです。scrollTop()メソッドの構文は以下になります。引数を設定しない場合は、指定したjQueryオブジェクトのスクロール位置(Y座標)を取得できます。引数を設定した場合は、対象のjQueryオブジェクトを引数で指定したスクロール位置に設定します。<p>ページの先頭です。$('p').text("先頭に戻りました。2014年より、某物流会社のシステム開発担当として入社。PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。JavaScriptJavaScriptでinput要素の操作をする方法を現役エンジニアが解説【初心者向け】JavaScriptでinput要素の操作をする方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。input要素とは、ユーザが様々なデータを入力できるようにするためのフォームコントロールを示します。type属性を設定することで振る舞いが大きく異なります。テキストエリア、チェックボックス、セレクトフィールド、パスワードフィールドなどに変化する特殊な要素です。JavaScriptでinput要素を操作するためには、getElementByIdを用います。input要素のHTMLにidを追加することでJavaScriptからinput要素を容易に取得できます。上記のinput要素はid値を設定したテキストボックスです。すれば、input要素の値に対して様々な操作を行えます。input要素にイベントハンドラを設定するためには、getElementByIdで取得した要素を使用します。input要素のタイプによって、設定できるイベントは異なります。※上記例文はボタンに対して押したときの処理(onclick)を設定しています。イベントハンドラは、input要素の属性タグにそのまま記述することもできます。各イベントハンドラを属性タグに埋め込んでみましょう。2014年より、某物流会社のシステム開発担当として入社。PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。CORPORATION.。