JS物件的使用種類

JavaScript的物件包含了屬性（property）、方法（method）

innerHTML、innerText、outerHTML、outerText差別

利用一段程式碼來解釋四個的差異在哪

 test1
 
test2

innerHTML
innerText
outerHTML
outerText

將印出如下：

innerHTML：   <span style="color:red">test1</span>

                        <p>test2</p>

innerText：         test1

                        test2

outerHTML：    <div id="test">

                          <span style="color:red">test1</span>

                          <p>test2</p>

                       </div>

outerText：        test1

                       test2

由此可知，innerText和outerText輸出的結果是一樣的

innerHTML會把div內的HTML標籤給輸出

而outerHTML是會把整個div區塊給輸出連自己本身也是一樣

click和submit的執行順序

假如我的一段程式碼如下：

那麼當按下送出的時候

結果為：

Click在執行！  Submit在執行！

由此可知

在觸發送出鍵Click會優先作處理，緊接著再作Submit的處理

[JS]物件繼承範例

/*
 * 實作一個銀行帳戶跟存款帳戶，讓存款帳戶去繼承銀行帳戶
 * 並實作存款跟提款的方法
 * 
 *
 *
 * Account物件裡面有兩個屬性，三個方法
 * 屬性：帳戶、餘額
 * 方法：存款、提款、顯示帳戶資訊
 *
 *
 *
 */
 function Account(a_number){
  this.a_number = a_number;
  this.a_balance = 0;
  
  this.getBalance = function(){
   return this.a_balance;
  }
  this.deposit = function(amount){
   this.a_balance = this.a_balance + amount;
   return document.write('您在帳戶中存入 ' + this.a_balance + ' 元' + '

');
  };
  this.withdraw = function(amount){
   document.write('您準備提領 ' + amount + ' 元，系統正準備驗証餘額...' + '

');
   if(this.a_balance >= amount){
    this.a_balance = this.a_balance - amount;
    return document.write('恭喜您提領成功！ 您帳戶餘額： ' + this.a_balance + ' 元' + '

');
   }
   else
    return document.write('餘額不足，提款失敗！ 請重新輸入您的提款金額

');
  };
  this.show = function(){
   document.write('銀行帳戶： ' + this.a_number + '

');
   document.write('帳戶金額： ' + this.a_balance + ' 元

');
  };
  this.process = function(){
   return (this.a_balance + (this.a_balance * this.interestRate));
  }
 }
//在下一行是讓SavingAccount去繼承Account，可以使用Account的屬性與方法
 SavingAccount.prototype = new Account();
/*
 *
 * SavingAccount物件裡有一個屬性，四個方法
 * 屬性：利率
 * 方法：設定利率、取得利率、處理存款利息、顯示帳戶資訊
 *
 */
 function SavingAccount(s_number){
  SavingAccount.prototype.a_number = s_number;
  this.interestRate = 0;
  
  this.setInterestRate = function(interestRate){
   this.interestRate = interestRate; 
  };
  this.getInterestRate = function(){
   return document.write('存款利率： ' + this.interestRate + ' ％

');
  };
  SavingAccount.prototype.show = function(){
   document.write('銀行帳戶： ' + this.a_number + '

');
   document.write('帳戶金額： ' + this.a_balance + ' 元

');
   document.write('存款利率： ' + this.interestRate + ' ％

');
   document.write('本金 + 存款利率： ' + this.process() + ' 元

');
  };
 }
 var aa = new SavingAccount(101);
 aa.setInterestRate(0.02);
 aa.deposit(500);
 aa.show();
 aa.withdraw(700);
 aa.withdraw(200);
 aa.deposit(513);
 aa.show();
 aa.deposit(694);
 aa.show();

顯示如下：

[JS]範例：測試RegExp小工具

[JS]使用RegExp去除左右空白

　　JavaScript本身並沒有去除前後空白的功能，所以需要自行延伸功來操作去除空白這個功能，利用正規表示式找到空白取代掉

[JS]正規表示法(Regular expressions)

JavaScript 的正規式（Regular expressions）是一個內建的物件，函數為 RegExp，宣告如下：

re = new RegExp("pattern", "flag")

re = /pattern/flag 

[CSS]display:none、block、inline的關係

一、display : none

把 HTML 元件的 display 設為 none 就是不顯示這個東西。 display : none 和 visibility : hidden 的差別是 display : none 這個東西就不見了，不佔空間， visibility : hidden 只是隱形看不見，還是有佔空間。

[CSS]破版的解決方法

如果一個母元素內的子元素通通 float: left 請問X元素本身會有什麼狀況？如果我要在母元素內放背景，卻沒有顯示，該如何解決？

答案是母元素本身會沒有高度，必須實作 clear-fix (self-clear) 或是在內部塞任一新元素並設置 clear: both X元素才能包覆子元素

[CSS]解決不同瀏覽器版面上的差異

　　在設計網頁完後，開啟瀏覽器執行網頁時，常常會發生使用不同的瀏覽器，導致網頁的顯示結果位移或者跑掉的情況發生，這是因為每一家瀏覽器對於自家的CSS預設值都不一樣，導致原本你使用Google Chrome來瀏覽網頁沒問題，到了使用IE開啟網頁，就會看到怎麼跟Chorme的畫面不太一樣，這就是版面混亂的主要原因之一，因此需要Reset.css來幫助我們統一網頁的版面。