Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptコンソール：初心者向けガイド

コードを書くことは、面白くはありますが、非常に面倒になることもあります。

コードを書き始めて、何かが実行されていないことに気づき、非常にイライラする日があります。さらに厄介なのは、コードが実行されるときですが、コードが正しく機能しない理由を理解することはできません。コードに何かがある場合は、修正する必要があります。

そこでJavaScriptコンソールが役立ちます。コンソールを使用すると、コードで何が起こっているかを追跡できます。これにより、コードの何が問題になっているのかを簡単に把握できます。

このガイドでは、JavaScriptコンソールの使用方法について説明します。また、JavaScriptコンソールをすばやく習得できるように、コンソールを使用したアプリケーションの例も提供します。

JavaScriptコンソール

開発者、コンソールに会います。開発者としての時間中はコンソールで多くの時間を費やすことになるので、それに慣れておく必要があります。

コンソールは、アプリケーションの実行中にメッセージを表示したり、Webページのコンテンツを操作したりできる場所です。

メッセージをコンソールに記録するようにコードに指示することができ、指示したときにメッセージが表示されます。コンソールを使用して、変数や値を変更したり、変数に格納されている値を調べたりすることもできます。

コンソールを表示するには、開発者ツールを開く必要があります。 Chromeでは、WindowsではCtrl + Shift + I、MacではCmd + Alt+Iを使用してこれを行うことができます。 Firefoxでは、Command + Option+Kを使用して開発者ツールを開くことができます。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

これを行うと、次のようなウィンドウが開きます。

JavaScriptコンソール：初心者向けガイド

最新のブラウザにはすべて独自の開発者ツールスイートがあり、すべてのブラウザに共通の機能がいくつかあります。このチュートリアルでは、コンソールに焦点を当てます。

コンソール入門

まず、コンソールにメッセージを表示します。 Webページを開かなくてもこれを行うことができます。ブラウザコンソールを開いて、実行するJavaScriptステートメントを作成するだけです。

コンソールで使用する主な方法は3つあります。

  • console.log（）：コンソールにメッセージを表示します。
  • console.warn（）：コンソールに警告を表示します。
  • console.error（）：コンソールにエラーを表示します。

続行する前に、コードの機能を最初に理解せずにコンソールに何かを貼り付けないでください。コンソールを使用して機密性の高いユーザー情報にアクセスする詐欺が存在するため、最近の多くのサイトではこれに対して警告が表示されます。

それでは、始めましょう！コンソールにメッセージを表示するには、次のコードを使用できます。 

console.log("Career Karma is logging stuff to the console!");

このコマンドを実行するとすぐに、以下が返されます。

JavaScriptコンソール：初心者向けガイド

また、コンソールにエラーや警告を表示することもできます。エラーと警告の違いと従来のlog() ステートメントは、エラーと警告がそれぞれオレンジと赤で表示されるというものです。 

console.warn("Hey, something is going on!");
console.error("Hey, your code has stopped working!");

私たちのコードは次を返します：

JavaScriptコンソール：初心者向けガイド

アプリケーションでのコンソールの使用

動作中のコンソールオブジェクトを紹介するために、Cookieクリッカーをモ​​デルにしたアプリを作成します。このアプリは、お茶の画像がクリックされた回数を示すカウンターを表示します。クリックするたびにコンソールにログを記録して、クリックがいつ発生したかを追跡できるようにします。

フロントエンドの開発

最初のステップは、アプリケーションのフロントエンドを開発することです。 「index.html」というファイルを作成し、次のコードを貼り付けます。 

<!DOCTYPE html>
<html>
    <head>
   	 <title>Tea Clicker</title>
   	 <link rel="stylesheet" href="./styles.css">
    </head>
    <body>
   	 <div class="container">
   		 <h2>Tea Clicker</h2>
   		 <p>Click the tea cup as many times as you can!</p>
   		 <img src="https://images.all-free-download.com/images/graphiclarge/tea_cup_with_teabag_311679.jpg" height="100" width="100" onclick="createClick()" />
   		 <p>You have clicked the tea cup <span>0</span> times.</p>
   	 </div>
	<script src="./scripts.js"></script>
    </body>
</html>

このコードは、タイトル、ゲームの説明、お茶の画像、およびユーザーがお茶を何回クリックしたかを通知するメッセージの4つのアイテムをWebページに表示します。

また、コードにいくつかのスタイルを追加して、魅力的に見せましょう。 「styles.css」というファイルを作成し、次のコードに貼り付けます：

.container {
    background-color: lightblue;
    margin: auto;
    width: 50%;
    padding: 40px;
    text-align: center;
}

span {
    color: yellow;
}

img {
    border-radius: 50px;
}

これらのスタイルは、ティークリッカーゲームのボックスを作成し、クリックカウンターの色を黄色に設定し、画像の角を丸くします。現在のウェブページは次のようになっています。

JavaScriptコンソール：初心者向けガイド

ティーカップをクリックしても何も起こりません。これは、JavaScriptコードをまだ追加していないためです。アプリケーションのJavaScriptコードを書いてみましょう。

JavaScriptを使用した機能の追加

ユーザーがお茶をクリックすると、カウンターが1つ増えます。カウンターをインクリメントする前に、操作するDOM要素（画像とカウンター）を選択する必要があります。 DOM（Document Object Model）要素は、Webページ上のタグです。 

var clickCounter = document.querySelector("span");
var teaCup = document.querySelector("img");

また、お茶がクリックされた回数を追跡する変数を設定します。

var clicks = 0;

次のステップは、ボタンがクリックされたときにログに記録し、カウンターを1つインクリメントする関数を作成することです。これは、次のコードを使用して実行できます。

function createClick() {
    console.log("The button has been clicked")
    clicks += 1;
    clickCounter.innerText = clicks;
}

最初の行には、コンソールメッセージ「ボタンがクリックされました」がコンソールに出力されます。次に、「クリック数」カウンターに1を追加します。次に、タグのテキストの内容を変更して、innerTextメソッドを使用して更新されたクリック数を反映します。

私たちのウェブページを見て、お茶の画像をクリックしてみましょう。

JavaScriptコンソール：初心者向けガイド

ご覧のとおり、お茶をクリックすると、カウンターが1つ増えます。さらに、コードで指定したメッセージがコンソールに出力されます。これは、ユーザーがお茶をクリックしたときの理解に役立ちます。

これはconsole.log()の非常に基本的な実装ですが 大規模なアプリケーションでは、ロギングが広く使用されていることがわかります。ほとんどの場合、ログはアプリケーションの開発バージョンでのみ保持されます。これは、ユーザーが舞台裏で何が起こっているかを確認する必要がないためです。そうは言っても、ロギングは開発者にとって依然として非常に価値のあるツールです。

結論

コンソールは、コードがどのように機能するかを学習するために使用できるツールです。これを使用して、コードの実行時にデバッグメッセージを表示したり、警告やエラーを追跡したりできます。

アプリケーションを開発している場合、またはデバッグに使用できるコードのカスタムエラーメッセージを作成する場合にのみ、ログステートメントを使用する必要があります。オンラインで利用できるWebアプリケーションにあまり多くのログを保持しないでください。


  1. 最高のVBAガイド（初心者向け）これまでに必要なもの

    ほぼすべてのMicrosoftOffice製品で実行されるVBAプログラミングプラットフォームは、これらの製品の使用を強化するために誰もが使用できる最も強力なツールの1つです。 この初心者向けVBAガイドでは、Officeアプリケーションに開発者メニューを追加する方法、VBAエディターウィンドウに入る方法、およびExcel、Word、PowerpointでVBAの使用を開始できるように基本的なVBAステートメントとループがどのように機能するかを説明します。 Outlook、およびOneNote。 このVBAガイドでは、最新バージョンのMicrosoftOffice製品を使用しています

  2. 初心者向けのチートエンジン（完全ガイド）

    Cheat Engineは、ゲーマーがさまざまなゲームの制限を克服するために（または単に楽しみのために）要件に従ってさまざまなゲーム値を編集するために使用するWindowsOSの主要なツールの1つです。メモリをスキャンし、デバッガー機能を使用して操作を実行します（つまり、ゲームでの不正行為）。 そのニッチで最高のツールの1つであるため、初心者にとって最高のユーザーインターフェイスの1つを備えておらず、操作するにはある程度の専門知識が必要です。そこで、初心者向けガイドをまとめました。 初心者にとって物事を簡単にし、チートエンジンの適切な使用方法を教えるため。 ただし、先に進む前に、すべての