jQuery 3系テンプレート｜サンプルコードエディタ

エディタ画面について

エディタの入力方法やプログラムの実行方法について簡単に説明します。

エディタの種類

エディタ部分は、JavaScript、HTML、CSSの3つに分かれています。 「JavaScriptのみ」や「HTMLのみ」等、選択したテンプレートによってはエディタが1つもしくは2つの場合があります。

各エディタの入力方法について

JavaScriptエディタにはJavaScriptのみを記述してください。<script>タグは不要です。

HTMLエディタにはHTMLを記述してください。<script>タグを用いてJavaScript、<style>タグを用いてCSSも記述可能です。

CSSエディタにはCSSのみを記述してください。<style>タグは不要です。

エディタの高さ変更について

エディタ等の高さを変更する場合は、各表示エリア下部の「つまみ」をドラッグしてください。

プログラムの実行方法

プログラムを実行する場合は、画面右上の「実行」ボタンを押すか、キーボードの「Ctrl+Enter」キーを押してください。

また、「自動実行」を「on」に設定することでエディタの内容を変更するのと同時にプログラムが実行されるようになります。

プログラムを実行すると、「ブラウザプレビュー」「コンソール」に結果が表示されます。
「ブラウザプレビュー」や「コンソール」右下の「エディタへ」リンクをクリックするとエディタに戻ることができます。

また、キーボードの「Ctrl+Shift」キーを押してもエディタに戻ることができます。

ブラウザ単体で実行する場合は、「ブラウザプレビュー」右上の「ブラウザ単体実行」ボタンを押してください。
別ウィンドウ上でプログラムの実行結果を見ることができます。
Bootstrapなどのレスポンシブデザインの確認などでご活用ください。

プログラムの停止方法

無限ループ等を実行するとブラウザの反応が遅くなる場合があります。
その際は、コンソール右上の「プログラム停止」を押してください。
それでも、ブラウザの反応が遅い場合は、ブラウザ自体を終了させてください。

その他、使い方については、「こちら」を参照してください。