JavaScript Property&メソッド&オブジェクト+ファイルのクリーンアップ

36460 ワード
JavaScript 生活コード テキストリンク

方法

<script>
      var coworkers ={
        "programmer":"egoing",
        "designer" : "leezche"
      };
      document.write("programmer :"+coworkers.programmer+"<br>");
      document.write("designer :"+coworkers.designer+"<br>");
      coworkers.bookkeeper="duru";
      document.write("bookkeeper : " +coworkers.bookkeeper+"<br>");
      coworkers["data scientist"]="taeho";
      document.write("data scientist: "+coworkers["data scientist"]);
    </script>

<h2>Property & Method</h2>
    <script>
      coworkers.showAll= function(){
       for(var key in this){
         document.write(key+':'+this[key]+'<br>');
         
       }
      }
      coworkers.showAll();
上のコードの下部を見てみましょう
<h2>Property & Method</h2>
    <script>
      coworkers.showAll= function(){
       for(var key in coworkers){
         document.write(key+':'+coworkers[key]+'<br>');
         
       }
      }
      coworkers.showAll();
上記のコードの同僚.showAll =function(){}
「同僚」という名前のオブジェクトにshowAllというメソッドを追加するコードです.
  • を参照
    関数の定義方法
    var showAll = function(){}
    or
    function showAll(){}
    • showAllメソッドの内容-オブジェクト内のすべてのキー値と対応するデータ値を抽出します.
    ただし、前に作成したオブジェクトの名前が変更された場合、同僚としてマークされている場合、データを取得できない場合があります.
    このとき、前に定義したshowAllという関数で、coopersの代わりに約束記号thisを使用して、その関数が属するオブジェクトを指定します.
    <script>
      coworkers.showAll= function(){
       for(var key in this){
         document.write(key+':'+this[key]+'<br>');

       }
      }
      coworkers.showAll();
    </script>
    つまり、このように変化しても、結果は以下のようになります.
    programmer:egoing
    designer:leezche
    bookkeeper:duru
    data scientist:taeho
    showAll:function(){ for(var key in this){ document.write(key+':'+this[key]+'
    '); } }
    つまり、属する変数showAllの値で関数を指定できます.つまり、オブジェクトが属する関数を作成できます.
    また,オブジェクトに属する関数をメソッドと呼ぶ.
    最後に,プログラマデザイナbookkeeperなどのオブジェクト内の変数をpropertyと呼ぶ.

    利用対象


    以前に作成した次のコードをオブジェクトで置き換えます.
    <!doctype html>
<html>
<head>
<title>WEB1-JavaScript</title>
<meta charset="utf-8">
<script>
function LinkSetColor(color){
  var alist =document.querySelectorAll('a');
  var i =0;
  while(i<alist.length){
  alist[i].style.color=color;
  i=i+1;
}
}

function BodySetColor(color){
  document.querySelector('body').style.color =color;
}
function BodySetBackgroundColor(color){
 document.querySelector('body').style.backgroundColor=color;
}

function nightDayhandler(self){
var target =   document.querySelector('body');
if(self.value==='night'){
  Body.SetBackgroundColor('black')
  Body.SetColor('white');
  self.value='day';
  Link.SetColor('powderblue');
} else {
  Body.SetBackgroundColor('white')
Body.SetColor('black')
  self.value = 'night';
  Link.SetColor('blue');

}
}
</script>
</head>
<body >

  <h1><a href="index.html">WEB</a></h1>
  <input type="button" value="night" onclick=" nightDayhandler(this)"
>
  <div id="grid">
<ol>
  <li><a href="1.html">HTML</a></li>
  <li><a href="2.html">CSS</a></li>
  <li><a href="3.html">JavaScript</a></li>

</div>
</body>
<html>
    function LinkSetColor(color){
    var alist =document.querySelectorAll('a');
    var i =0;
    while(ialist[i].style.color=color;
    i=i+1;
    }
    }
    上の部分.
    Linksという名前のオブジェクトは、以下に示すようにsetColorという名前のPropertyで指定したメソッドのフォーマットに変換できます.
    var Links ={
    setColor:function LinkSetColor(color){
    var alist =document.querySelectorAll('a');
    var i =0;
    while(ialist[i].style.color=color;
    i=i+1;
    }
    }
    }
    上記のように
    function BodySetColor(color){
    document.querySelector('body').style.color =color;
    }
    function BodySetBackgroundColor(color){
    document.querySelector('body').style.backgroundColor=color;
    }
    そして.
    var Body ={
    setColor:function (color){
    document.querySelector('body').style.color =color;
    },//オブジェクトの輪郭と輪郭を区別するときにカンマを付ける必要があります
    setBackgroundColor:function (color){
    document.querySelector('body').style.backgroundColor=color;
    }
    置換オブジェクトを使用できます.
    <!doctype html>
<html>
<head>
<title>WEB1-JavaScript</title>
<meta charset="utf-8">
<script>
var Links ={
  setColor:function LinkSetColor(color){
    var alist =document.querySelectorAll('a');
    var i =0;
    while(i<alist.length){
    alist[i].style.color=color;
    i=i+1;
  }
}
}

var Body ={
  setColor:function (color){
      document.querySelector('body').style.color =color;
  }, 
  setBackgroundColor:function (color){
      document.querySelector('body').style.backgroundColor=color;
  }

}
function nightDayhandler(self){
var target =   document.querySelector('body');
if(self.value==='night'){
  Body.setBackgroundColor('black');
  Body.setColor('white');
  self.value='day';
  Links.setColor('powderblue');
} else {
  Body.setBackgroundColor('white');
  Body.setColor('black');
  self.value = 'night';
  Links.setColor('blue');

}
}
</script>
</head>
<body >

  <h1><a href="index.html">WEB</a></h1>
  <input   type="button" value="night" onclick=" nightDayhandler(this)"
>

  <div id="grid">
<ol>
  <li><a href="1.html">HTML</a></li>
  <li><a href="2.html">CSS</a></li>
  <li><a href="3.html">JavaScript</a></li>
  
</ol>
</div>
</body>
<html>

    分割ファイルの整理


    次に、相互に関連付けられたコードを1つのファイルに組み合わせます.
    この方法では、いくらページが多くても管理しやすい.
    上のスタイルコードを他のページにも適用したい場合は
    <input   type="button" value="night" onclick=" nightDayhandler(this)">
    他のページのコードにコンテンツを追加した場合、タグ内部のコンテンツを作成して保存します(私の場合、cors.jsという新しいファイルが作成されました).
    次に、このコードを適用する各ページで、
    書けばいいです.これで色がjs内部のコード更新後すぐに他のページに適用されるため、メンテナンスに効率的です.
    また、このように分割してファイル保存すると、ページをロードするとき、cors.jsファイルは各Webページで使用されていますが、以前に開いていた場合はキャッシュに残り、次回のロード時に読み込むだけで、サーバの観点から多くのコストを節約できます.また、ユーザーの立場から言えば、トラフィックを減らし、ロード速度を速くするので便利です.
    [白俊]2670/連続部分最大乗
    旧バージョンkernelをクリア[Fedora/CentOS/RHEL]