Function

23629 ワード
JavaScript テキストリンク

basic


なぜFunctionが必要なのですか?
最も基本的な方法で必要性を理解しましょう.
まず、次のリストを作成すると仮定します.

htmlを使用して対応するリストを作成すると、コードは次のようになります.
 <ul>
 	<li>1</li>
 	<li>2-1</li>
 	<li>2-2</li>
 	<li>3</li>
    <li>2-1</li>
 	<li>2-2</li>
 </ul>
そうなると、一つ一つ手で打つのが大変なので、何度も文章を書きます.
不速の客「三」を挟む.
このときfunctionを使うと問題が解きやすいです.
コードは以下の通りです.
<ul>
  <script>
      function list(){
      document.write('<li>2-1</li>');
      document.write('<li>2-2</li>');
      }
      document.write('<li>1</li>');
      list();
      document.write('<li>3</li>')
      list();
  </script>
</ul>
この2つの結果値は同じですが、論理はまったく違います.
1億回修正する必要がある場合は、毎回修正するhtmlと手動で1億回修正するhtmlは異なります.
Javaでは、関数を使用して時間を節約できます.
functionname(){論理}
name();使用する場合は、関数のメカニズムを適用します.
システムからnameを読み出し、括弧で囲む.撮影されると「あ!関数を実行します」という働き方

Parameter & Argument.


parameterとparamentは何ですか?
パラメータ=パラメータ
パラメータ=伝達パラメータ
パラメータ
関数の定義セクションにリストされる変数で、plus関数を定義するときに使用されるa、bをparameter(パラメータ)と呼びます.
function plus(a, b):
return a + b
パラメータ(転送パラメータ)
関数を呼び出すときに渡される実際の値で、プラス記号plusの関数の値1,2をパラメータ(伝達パラメータ)と呼びます.
result = plus(1, 2)
直感的に説明するには、以下のa関数定義を参照してください.
<script>
  function a(left, right){
      document.write(left+right);
  }
  a(4,3);
  a(2,7);
</script>
parameter = left, right
argument = (4,3) (2,7)
つまり.
parameterとは、関数定義セクションにリストされている変数です.
論点は実質的に投入関数の値である.
この2つを関数と組み合わせる場合は、式で論点に基づいて異なる値を作成することもできます.
    <script>
      function plus(){
        document.write(1+1+'<br>');
      }
      plus ();

      function sum(left, right){
        document.write(left+right+'<br>');
      }
      function sumcolor(left, right){
        document.write('<div style="color:blue">'+left+right+'</div>');
      }
      sum(2,3); // 5
      sumcolor(3,3);
      sum(3,4); // 7
    </script>

上の写真と同じ値段です.
plusという名前の関数でdocumentを使用します.write(1+1)に設定
plus();入力した場合、固定値「2」のみ
対照的に、次のsum関数はparameter、paramentを使用して異なる結果値を抽出します.
2つの関数があります.sumとsumcolorです.
異なるパラメータを設定
5 33 7出てきましたしかし、33がなぜ数字をつけずに貼られているのかについては、より多くの勉強が必要らしい.もしあなたが知っていたら、助けてください.

return


最後は産出です.
ボタンを押すと結果値が表示されます.
returnはその役を演じます
returnが一番分かりにくいです.返してください.値段.どうしたんですか.
MDNの説明に従って、returnは関数の実行を終了し、呼び出しポイントに戻ります.
  • 関数保留
    指定された値
  • をコールポイントに戻す
    • つまり、関数から逃れることができます.
        <script>
      function sum2(left, right){
        return left+right;
      }
      document.write(sum2(2,3)+'<br>');
      document.write('<div style = "color:red">'+sum2(2,3)+'</div>');
      document.write('<div style = "font-size:3rem;">'+sum2(2,3)+'<div>');
    </script>

    この式を使用すると、この結果が表示されます.
    returnを用いると,パラメータ内の値をそれぞれ処理して次の段階に進むことがわかる.

    使用例


    以前に作成したダークモードボタンをスクリプトとして使用できます.
    数十万個のボタンを処理すれば、手動で修復する必要はありません.
    関数を修正すればいいだけです.
      <input id="night_day"type="button" value="night" onclick="
    var target = document.querySelector('body');
    if(this.value === 'night') {
      target.style.backgroundColor='black';
      target.style.color='white';
      this.value = 'day';
    } else {
      target.style.backgroundColor='white';
      target.style.color='black';
      this.value = 'night';
    }
  ">
    現在、このコードは各ボタンに機能を割り当てているため、修復の数は各ボタンの数に依存します.
    このボタンが関数処理なら、数十万でも心配しなくていいです.
    以下のとおりです.
      <script>
  function buttonhandler(self){
    var target = document.querySelector('body');
    if(self.value === 'night'){
      target.style.backgroundColor='black';
      target.style.color='white';
      self.value = 'day'

      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length ){
        alist[i].style.color = 'skyblue';
        i  = i + 1;
      }
    } else {
      target.style.backgroundColor='white';
      target.style.color='black';
      self.value = 'night'

      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length ){
        alist[i].style.color = 'green';
        i  = i + 1;
      }
    }
  }
  </script>
</head>
<body>
  <h1><a href="index.html">NEW WEB</a></h1>
  <input type="button" value="night" onclick="
  buttonhandler(this);
  ">
    ボタンハンドルという関数を追加し、対応するパラメータを使用してselfに挿入します.
    次にinputのonclick値に関数名というボタンハンドルを入れ、パラメータで入れると正常に動作します.
    見た目に差はありませんが、論理的には縛られていると言えます.
    線分ツリースペースに格納され、一番上の数(単点更新)
    [開発ログ23日目]マイブログ+