初心者向けに、JavaScriptとHTMLを使用してランダム引用ジェネレーターを構築する方法

このチュートリアルは、JavaScriptを使用して簡単なWebアプリケーションを作成する方法を学びたい初心者を対象としています。JavaScriptとHTMLドキュメント間の相互作用、およびそれらがどのように連携してWebブラウザーに表示され、人々が見ることができるかを理解するのに役立ちます。

HTMLとJavaScriptの経験がまったくない場合でも、心配はいりません。コードのすべての行を順を追って説明し、すべてを詳細に説明します。このレッスンの終わりに到達するまでに、JavaScriptがHTMLとどのように連携してWebページをインタラクティブにするかをよりよく理解する必要があります。

このプロジェクトでは、ユーザーがボタンを押すたびにランダムな見積もりを表示するランダム見積もりジェネレーターを構築します。開始するには、ほとんどの場合、すべてのWebプロジェクトで使用される3つの重要なものが必要です。

  • Webブラウザ
  • テキストエディタ
  • 物を作りたいという願望

このチュートリアルでは、Google Chrome Webブラウザー、Sublime Text 3エディター、そしてもちろん、構築して教えるという私自身の願望を使用します。使い慣れたツールなら何でも使用できます。

始めましょう!

最初に行うことは、プロジェクトを構成するすべてのファイルを含むフォルダーを作成することです。デスクトップに空のフォルダー作成し、「quotegenerator」という名前を付けます。Sublime Text開き、ファイルをsublimeにドラッグします。これで、サイドバーからフォルダにアクセスできるようになります。

ほとんどのWebプロジェクトは、少なくとも1つのHTML、JavaScript、およびCSSファイルで構成されています。これらのファイルを「quotegenerator」フォルダ内に作成しましょう。

崇高なテキストでは、サイドバーの「quotegenerator」フォルダを右クリックし、「createnewfile」をクリックします。ファイルに名前を付けるための入力バーが下部にポップアップ表示されます。「index.html」と入力してEnterキーを押します。これで、index.htmlファイルが作成されました。この手順をさらに2回繰り返しますが、「javascript.js」および「style.css」(引用符なし)という名前のファイルを作成しますファイルに名前を付けるときは、複雑にならないように、文字が常に小文字であることを確認することが重要です。

すべてのファイルのセットアップが完了したので、Webプロジェクトの基盤として機能するHTMLファイルを作成しましょう。何かを追加する前に、index.htmlファイル内の必要最低限​​のHTMLコードから始めます。

以下は、何も含まれていないHTMLファイルです。これは、後で追加するすべての肉(コンテンツ)を保持するHTMLスケルトンと考えることができます。

次に、JavaScriptファイルをHTMLドキュメントにリンクして、JavaScriptコードがHTMLドキュメントと対話できるようにする必要があります。また、内にテキストを追加します タグ、追加

要素、作成 ID名が「quoteDisplay」の要素、および「newQuote()」が渡されたonclick属性を持つ要素。

それを分解する

HTMLコードの各部分がその目的をどのように果たすかについて混乱している場合は、ここで説明します。各要素の機能とその理由が正確にわかっている場合は、次のセクションにスキップして続行できます。

まず、間に「QuoteGen」を追加しました タグ。タイトルタグは、その間にテキストを取り、開いたときにWebブラウザのタブに表示します。

最初のステップでは、閉じる直前にHTMLドキュメントの下部にあるjavascript.jsファイルをリンクする必要もあります。 鬼ごっこ。

次に、

「SimpleQuoteGenerator」を含む要素。これは、Webページ内にタイトルを表示するのに役立ちます。

次に、 id属性が「quoteDisplay」に設定されている要素。A 要素は、HTMLドキュメントの仕切りとして機能します。 要素は、Webページ内のコンテンツを整理するのに役立ちます。id属性は、JavaScriptが簡単につかむと、それを操作できるようにすることを識別子として機能します。この場合、JavaScriptを使用して、IDが「quoteDisplay」の要素を取得し、内に引用符を配置します。 素子。

その後、作成します 「newQuote()」がパラメータとして渡されたonclick属性を持つ要素。ザ・ご想像のとおり、要素はクリックすると何かを実行するボタンです。onclick属性を使用すると、ボタンをクリックするたびに、それはに渡された関数を実行するように、ボタンに機能を設定するために使用されますonclick属性。

この場合、ボタンをクリックするたびに、関数newQuote()が実行されます。もちろん、newQuote()関数はまだ定義されていません。ブラウザ内でプロジェクトを開いてボタンを押すと、関数が現在存在しないため、コンソール内でエラーがスローされます。

最後に、ここに、完全なindex.htmlファイルが現在どのように表示され、Webブラウザーでどのように生成されるかを示す復習があります。プロジェクトを開くには、Webブラウザを使用してindex.htmlファイルを開きます。

コードを使用して論理的に考える

いよいよ、javascript.jsファイルでJavaScriptの作業を開始して、独自の見積もり生成機能を開発できるようにします。

さて、コーディングを始める前に、コードを使って見積もり生成マシンを作成する方法について論理的に考えてみましょう。最初に考えずにコーディングを始めることはできません。

何が欲しいのか、いつ欲しいのかを理解する必要があります。このプロジェクトでは、見積もりが必要です。いつ欲しいの?今欲しい!ああ、えーと…ユーザーがボタンを押すたびに欲しいということです。

最初の質問を解決したので、2番目の質問をする必要があります。引用符とは何ですか?本当に、彼らは何ですか?

ジェイデンありがとう!はい!引用は、単語を構成する文字で構成されています。プログラミングの世界では、単語は文字列として分類されるため、引用符は文字列である必要があります

複数の引用符があり、それぞれがランダムに選択されることがわかっているため、配列内に複数の文字列を格納するのが最善の選択です。

まだ知らなかった場合は、配列内の要素は、その配列インデックス番号を呼び出すことによって取得されます。技術的な詳細はこのチュートリアルの範囲外ですが、簡単に言えば、配列内の各要素は時系列の整数で表されます。配列の最初の要素のインデックス番号は0で、その後のすべての要素は1つ上がります。

配列からランダムな引用符を取得するには、ユーザーがボタンをクリックするたびに乱数を生成する必要があることがわかりました。次に、その乱数を使用して配列から引用符を取得し、その引用符をHTMLドキュメントに配置します。これにより、ブラウザーでユーザーに引用符が表示されます。

それでおしまい!コードを論理的に考えて、ランダムクォートジェネレーターを作成する方法を解決しました!これが私たちのプロジェクトのために思いついたロジックの要約です:

  1. 引用符は、配列に格納する必要がある複数の文字列です。
  2. ボタンが押されるたびに、ランダムな整数を生成する必要があります。
  3. この番号は、quote配列の配列インデックス番号の表現として使用されます。
  4. ランダムに生成された整数を使用して配列からランダムに選択された引用符を取得したら、それをHTMLドキュメントに配置します。

コーディング時間!

うわー!ここまで来て、まだプログラミングを始めていません!プログラミングの世界へようこそ!

冗談だ。

あんまり。

あなたはこのキャリア(または趣味)でコーディングに多くの時間を費やすでしょう。しかし、私のポイントは、プログラミングロジックと問題の解決方法について考えることにさらに多くの時間を費やすということです。プログラミングとは、キーボードで1分間に100語を20分間ハッキングすることではありません。それは起こりません。

これで、すべてのロジックが邪魔になりません。コーディングを始めましょう。これで、javascript.jsファイル内で作業します。

独自の見積もりを作成するか、オンラインソースからコピーする必要があります。

Iグーグル「ベスト引用」からの最初の10コピーされたウェブサイトは、その配列は、カンマで区切っでそれらを置きました。引用符は必ず一重引用符または二重引用符で囲んでください。引用符がアポストロフィ、一重引用符、または二重引用符で構成されている場合は、バックスラッシュを使用してこれらの文字エスケープし、JavaScriptが記号が文字列の一部であり、コーディング構文ではないことを認識できるようにする必要があります。

下の図でわかるように、「quotes」という変数を定義し、インターネットから選択した引用符でいっぱいの配列と等しくなるように設定しました。

次に、このチュートリアルのHTMLセクションで前述したnewQuote()関数を作成する必要があります。newQuote()関数の場合、0からquotes配列の長さまでの範囲のランダムな整数を生成する必要があります。以下でさらに説明します。

まず、Math.floor()関数を呼び出します。Math.floor()関数はパラメーターを受け取り、数値を最も近い整数に切り捨てます。たとえば、Math.floor(5.7)を呼び出すと、5が返されます。

次に、Math.random()をパラメーターとしてMath.floor()に渡します。Math.random()関数は、0から1までのランダムな10進数を生成します。

それで、これがあるとしましょう:

この状態でrandomNumberをコンソールログに記録すると、常に0が返されます。これは、Math.random()が常に0.4、0.721、0.98などの0から1までの小数になるためです。Math.random()をパラメーターとしてMath.floor()に渡すため、Math.floor()は常に最も近い小数に切り捨てられます。したがって、0から1までのすべての小数は常に0に戻ります。

では、これを行う意味は何ですか?配列のインデックス番号を作成するには、整数が必要ですが、ランダムな整数が必要です。ランダムな整数を生成し、0のみを返すことから脱却するには、ランダムな10進数を取得し、それを整数で乗算する必要があります。

それでは、次のようなことを試してみましょう。

ログrandomNumberをコンソールすると、結果は1〜19の範囲になります。これで、randomNumberの現在の状態を使用して、quotes配列から引用符を引き出すことができますが、配列のインデックス番号が配列内に存在する場合にのみ機能します。そうしないと、エラーがスローされます。

例えば:

現在、quotes配列内には10個の文字列しかないため、9を超える数値は配列内に存在しないため、undefinedを返します。

この問題を解決するには、Math.random()に引用符配列の長さを掛けるだけで済みます。これを行うことで、配列に必要な数の文字列を追加または削除できます。quotes.lengthメソッドを使用して常に配列の現在の長さを取得しているため、randomNumber変数は常に有効な数値を返します。

次に、randomNumberの値を使用して、quotes配列から引用符をランダムに取得し、その引用符をHTMLドキュメントに配置して、ユーザーに表示する方法が必要です。

HTMLを使用していると言ったことを思い出してくださいJavaScriptがHTML要素を簡単に取得して操作できるようにするID?これが、以前に作成したHTMLのquoteDisplayIDに対して現在行っていることです。

document.getElementById()を使用すると、任意の文字列を渡すことができ、JavaScriptはHTMLドキュメントを調べて取得し、必要な処理を実行します。'quoteDisplay'をパラメーターとして渡して、IDが「quoteDisplay」のHTML要素を取得します。

次に、.innerHTMLメソッドを使用して、配列からランダムに取得された引用符を、HTMLのquoteDisplay要素に追加される値として渡します。

innerHTMLをquotes配列と等しく設定し、randomNumber変数を配列インデックス番号として渡します。これで、newQuote()関数が完成しました。

任務完了!

チュートリアルのこの部分に到達した場合は、プロジェクトが完了しています。おめでとう!ランダムクォートジェネレータの構築は実質的に完了です。

これで、ブラウザでプロジェクトを開いて、機能するかどうかを確認するだけです。これを行うには、index.htmlファイルをブラウザウィンドウにドラッグします。

ボタンを押すと、画面にランダムな引用が表示されます。ボタンを何度でも押してください。毎回、新しい見積もりが画面上の現在の見積もりに置き換わるはずです。

引用符配列には、必要な数の引用符を追加できます。

このランダム見積もりジェネレーターを構成するプロジェクトファイル全体の概要を並べて見てください。

今何?

完全に機能するランダム見積もりジェネレーターを作成しましたが、ここからどこに進むのか疑問に思われるかもしれません。

このランダム見積もりジェネレーターは非常に退屈に見えると思われるかもしれません。おそらく誰もそれを使用しないでしょう。そして、あなたは絶対に正しいです。このプロジェクトは非常にわかりやすいように見えますが、それを変更するのはあなた次第です。

独自の機能とスタイルを追加することで、このプロジェクトを改善できます。

このチュートリアルの最初に、使用しなかったstyle.cssファイルを作成しました。CSSは、Webページを美しくカラフルにするために使用されます。必要に応じて、スタイル設定のためにCSSファイルに追加するのはあなた次第です。

追加のガイダンスについては、CSSチュートリアルを検索できます。あなたの想像力を駆り立てて、このプロジェクトをあなたのものにしてください!やりたいことは何でも!コーディングは魔法であり、あなたは魔法使いです、ハリー!

CSSとJavaScriptコードの数行でプロジェクトがどの程度変化するかを知りたい場合は、「EpiphanyClock」というタイトルのこのランダム見積もりジェネレーターの自分のバージョンを確認してくださいここ

このチュートリアルを楽しんだら、ハートボタンをクリックして共有してください!コメント、質問、フィードバックをお気軽に残してください。ありがとう、そして幸せなコーディング!