プログラミング初心者がJavaScriptを1分で実行する方法

プログラミング初心者がJavaScriptを1分で実行する方法

Posted at April 17,2012 1:55 AM
Tag:[JavaScript]

プログラミング初心者がJavaScriptを1分で実行する方法を紹介します。

JavaScriptはブラウザ上で実行できるので、ブラウザを利用します。ブラウザはIE8/IE9またはGoogle Chrome、Firefoxのいずれかを使います(FirefoxはFirebugのインストールが必要です)。

プログラミング初心者にプログラムのサンプルを見せるときにも使えるかもしれません。

1.IE8/IE9で実行する

WindowsであればIE8/IE9がデフォルトでインストールされていると思うので、もっとも手っ取り早いです。

ブラウザを起動して任意のページを表示します。この状態でF12を押下すると、次の画面が表示されるので、「コンソール」タブをクリック。

(画面をクリックすれば拡大します。以下同様)
コンソール

一番下の行に実行したいJavaScriptを記述してリターン。ここでは「document.write("OK");」と入力してみます。document.write()は、引数に指定した文字などを画面に表示するための関数です。

入力

ブラウザに実行結果が表示されました。

実行結果

コンソールにも実行結果が表示されます。

実行

ブラウザ起動を含めると1分は厳しいかもしれませんが、3~5分もあればここまでたどりつけるんじゃないかと思います。「alert("OK");」と入力すれば、ダイアログを表示できます。

もう少しきちんとしたプログラムを書いて実行したい場合は、画面右下のアイコンをクリック。

アイコン

実行させたいJavaScriptを記述して「スクリプトの実行」をクリック。ここではfor文を使って、0から9までの数字を表示するプログラムを実行してみます。

スクリプトの実行

ブラウザに実行結果が表示されました。

実行結果

さきほどと同様、コンソールにも実行結果が表示されます。

実行

コンソールの実行結果は右クリックして「コンソールのクリア」で消去できます。

コンソールのクリア

2.Google Chromeで実行する

1項と同様、任意のページを表示した状態でF12を押下すると、次の画面が表示されるので、「Console」をクリック。

Console

実行したいプログラムを記述してリターン。

プログラム

実行されました。実行結果は1項と同様、ブラウザに表示されます。

実行

Google Chromeは複数行実行の方法が見つけられませんでした。見落としているかもしれません。Windowsであれば、Shift+リターンで複数行が入力できます。

3.Firefox(Firebug)で実行する

1項と同様、任意のページを表示した状態でF12を押下すると、次の画面が表示されるので、「コンソール」タブをクリックして、一番下の行に実行したいJavaScriptを入力してリターン。

コンソール

複数行を実行する場合は、右下のアイコンをクリック。

アイコン

右側に実行したいJavaScriptを入力して「実行」をクリックします。

実行

1~3項について、表示しているページにjQueryを読み込ませておけば、jQueryの構文も実行できるんじゃないかと思います(多分)。

4.JavaScriptをファイルに記述して実行する

1~3項のいずれかでJavaScriptが動作するイメージはつかめたと思います。

JavaScriptをファイルとして読み込ませ、実行させるには、1~3項で入力したプログラムを次のようにscript要素で括り、「hoge.html」などのファイル名で保存します。あとはブラウザにそのファイルをドラッグすれば実行されます(URLでアクセスするのが本来ですが)。

<script>
document.write("OK");
</script>
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)