2017-07-29 9 views
0

Javascriptを出力する最良の方法は?

があることがすべてのスクリプトを出力するための最良の方法です...私はJavascriptを学んでいると私は、出力コードに好ましい方法でのdocument.getElementByIdある...とのdocument.writeが唯一のテストで使用されるべきであることがわかり?コードは正確に何をしていますか?私は、次のコードを書いて、私は遊びに来て、なぜそれが必要...

<html> 
    <head> 
     <script> 

      function addNumbers(arr){ 
       var i, answer =0; 

       for(i=0; i<arr.length; i++){ 
        answer += arr[i]; 

       } 
       return answer; 
      } 

     </script> 
    </head> 

    <body> 

     <h4> Function addNumbers: </h4> 

     <p id="demo"></p> 

     <script> 

      var myArray = [1,2,3,4,5,6,7,8,9]; 
      document.getElementById("demo").innerHTML = addNumbers(myArray); 

     </script> 

    </body> 
</html> 
+1

なぜDOMでコード結果(特に配列演算を行っているとき)を表示したいのですか?コンソールはそれのために作られました。 –

+0

@Kinduserクラスのために、私は関数を表示する必要があります。< –

+0

@AntoineBちょうど 'console.log'それです。それがまさにそれのためのものです。 – Carcigenicate

答えて

0

ワンステップ、2つのステップ:

document.writeは、次の3つの機能

  • document.open()のセットの1つですが、削除、最初から書くためのドキュメントを開きます既存のドキュメントコンテンツがある場合はそのコンテンツ。
  • document.write(string)は、Webページを構築するために使用される文字ストリームに文字列を挿入します。
  • document.close()は、書類のために書類をクローズします。それ以上の書き込みは、ドキュメントを再度開き、プロセス内の既存のコンテンツを消去します。

今すぐページの入力ストリームの終わりに考慮

  1. に入れ、文書が自動的に閉じられています。
  2. ドキュメントは、ドキュメントオブジェクトモデル(「DOM」)を使用して作成されます。ドキュメントオブジェクトモデル(DOM)は、スクリプト内でアクセスおよび操作が可能です。
  3. document.open/write/close DOMが標準化され、使用可能になる前に発生しました。

したがってdocument.writeは、最新のWebプログラミングではほとんど使用されていません。ページの読み込みが完了した後に使用されると、ページが消去されます。 DOMがまだ存在しないことを学んだ学生のためのチュートリアルにほぼ完全に制限されています。子供のウィンドウのコンテンツをプログラムで書くときには、window.openで開かれています。

ページ内のすべてのHTML要素は、DOM内にHTMLelementノードとして存在します。これらは、document.getElementByIdまたはdocument.querySelectorなどのメソッドを呼び出すことによってアクセスでき、JavaScriptオブジェクト値として返されます。 HTMLElementsはタグの種類によって異なりますが、HTMLコンテナ要素を表す場合は、innerHTMLtextContentのようなプロパティを持ち、スクリプトのテキスト文字列で更新すると、レンダリングされたページの内容を変更します。 id値がページHTMLElementsの中で一意でなければなりません - あなたの質問、「デモ」への答えで

は、ID値がDOM内の特定の要素にアクセスするために使用されているHTMLParagraphElement、のid値です。

要素のオブジェクトは、document.getElementByIdを使用してDOMに問い合わせることによって取得されます。その後、要素innerHTMLを変更すると、新しいコンテンツでドキュメントが再レンダリングされ、ページの表示が更新されます。

+0

この回答をありがとうございました。私が取っているクラスは、HTML/CSS/JSの基本的な入門クラスです。なぜdocument.writeを使用するように依頼しているのか理解しています。ありがとう –

-1

あなたのコードがうまく実行されている「デモ」かどうかはわかりません。下にそれをチェックしてください。私はここに何の問題も見ません。デモIDを持つ要素内のページに結果を表示する場合は、それを行う方法がうまくいきます。値をコンソールに表示したい場合は、console.logが正しい方法です。そして、あなたのコードにこの配列var myArray = [1,2,3,4,5,6,7,8,9];を宣言した後に関数をconsole.log(addNumbers(myArray))に渡すだけです。

<html> 
 
    <head> 
 
     <script> 
 

 
      function addNumbers(arr){ 
 
       var i, answer =0; 
 

 
       for(i=0; i<arr.length; i++){ 
 
        answer += arr[i]; 
 

 
       } 
 
       return answer; 
 
      } 
 

 
     </script> 
 
    </head> 
 

 
    <body> 
 

 
     <h4> Function addNumbers: </h4> 
 

 
     <p id="demo"></p> 
 

 
     <script> 
 

 
      var myArray = [1,2,3,4,5,6,7,8,9]; 
 
      document.getElementById("demo").innerHTML = addNumbers(myArray); 
 

 
     </script> 
 

 
    </body> 
 
</html>

+0

これは完全に質問を逃しています。コードが壊れているとは言わない。また、コードをコピーするだけであれば、それは答えではありません。 – Carcigenicate

+0

"Run code snippet"ボタンで実行できるように投稿しました。とにかく私は助けていると思った。 –

+0

私は次回より良いトイレをしようとしています。私は非常に重要なコミュニティを知っています。 –

0

デモは、ID "デモ" と段落を指します。 ids(HTMLページで一意でなければならない)を使用して、javascriptでhtmlタグを識別して使用します。

実際にdocument.writeはあまり頻繁には使用されません。なぜ複数の理由がありますか。ネット上でよく説明されているので、these answersまたはarticleをご覧ください。

</head><body><script>などの不足しているタグを追加してコンソールログが発生している場合、コードは正常に動作します。下のスニペットで実行します。

サイドテープとして、閉鎖</body>タグの直前に、ページの下部にJavaScriptの読み込みと読み込みを行うことが、今日より良い方法です。 DOMはロードされた後にロードされるためです。前方バック

function addNumbers(arr) { 
 
    var i, answer = 0; 
 

 
    for (i = 0; i < arr.length; i++) { 
 
    answer += arr[i]; 
 

 
    } 
 
    return answer; 
 
} 
 

 
var myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9]; 
 

 
document.getElementById("demo").innerHTML = addNumbers(myArray); 
 

 
console.log(addNumbers(myArray))
<html> 
 

 
<head> 
 

 
</head> 
 

 
<body> 
 

 
    <h4> Function addNumbers: </h4> 
 

 
    <p id="demo">This is a paragraph that can be identified using the id attribute.</p> 
 

 
</body> 
 

 
</html>

関連する問題