Jeffrey 的學習筆記: 8月 2014

2014年8月28日星期四

MFC CString to int

int intNum = _ttoi(strGetNum);//CString 轉 int

2014年8月24日星期日

MFC 字串切割

//========================================
//mapKey、*liAtkIP為一組IP+Port
//將port移除只保留IP
char szBuf[100];
char mapKeyIP[100];
const char *del = ":";
    
strcpy(szBuf, (LPCTSTR)*liAtkIP);
*liAtkIP = strtok( szBuf, del);
    
strcpy(mapKeyIP, (LPCTSTR)mapKey);
mapKey = strtok( szBuf, del);
//=========================================

2014年8月20日星期三

JavaScript 兩個select透過js互相對應改變選取項目

function changeSelectIndex(selectID, changeID){
    //取得被改變的select元件
    var selectDOC = document.getElementById(selectID);

    //取得另一個要被改變的select元件
    var changeDOC = document.getElementById(changeID);

    //取得被改變的select的value (必須給index)
    var selectValue = selectDOC.value;

    //改變另一個select的選取index
    changeDOC.selectedIndex = selectValue;
}

JavaScript 使用<input>呈現與切換圖片

在html的部分宣告方式如下，將input宣告為image的型態，注意input預設滑鼠移入會變成可以點擊的手型

<input type="image" id="status1" src="images/ONbutton.jpg" value='1' onClick="ChangeImage(this.id);" />

在 onClick="ChangeImage(this.id);" 傳入的參數為自身元件的ID，然後我們可以在function中透過ID操作該元件

//透過ID找到元件，就可以變更src、value等屬性，也可以利用value判斷要執行什麼動作
function ChangeImage(id){
    var str = document.getElementById(id);
    if(str.value == 1){
        str.src = "../../images/OFFbutton.jpg";
        str.value = 2;
    }else if(str.value == 2){
        str.src = "../../images/ONbutton.jpg";
        str.value = 1;
    }
}

JavaScript 修改、移除td

有空再整理

HTML：

<tr>
    <td><input style="display:none" id="1_fields1" type="text" value="" size="12" /><span id="1_mySapns1">RulesName1</span></td>
    <td><input style="display:none" id="1_fields2" type="text" value="" size="10" /><span id="1_mySapns2">59.118.67.104</span></td>
    <td><input style="display:none" id="1_fields3" type="text" value="" size="10" /><span id="1_mySapns3">120.58.164.22</span></td>
    <td><input style="display:none" id="1_fields4" type="text" value="" size="10" /><span id="1_mySapns4">XP_REG, UNION SELECT, ‘;DROR</span></td>
    <td><input style="display:none" id="1_fields5" type="text" value="" size="10" /><span id="1_mySapns5">SYSTEM21, CMD.EXE</span></td>
    <td><input style="display:none" id="1_fields6" type="text" value="" size="10" /><span id="1_mySapns6">GET, POST, HEAD, COPY, POLL</span></td>
    <td><input style="display:none" id="1_fields7" type="text" value="" size="10" /><span id="1_mySapns7">Directory Traversal Exploits in URL, Directory Traversal Exploits in Query</span></td>
    <td><input style="display:none" id="1_fields8" type="text" value="" size="10" /><span id="1_mySapns8">Encoding Abuse Exploits in URL, Encoding Abuse Exploits in Query String, Encoding Abuse Exploits in Post Data</span></td>
    <td><input style="display:none" id="1_fields9" type="text" value="" size="10" /><span id="1_mySapns9">Maximum URL Length Allowed</span></td>
    <td><input style="display:none" id="1_fields10" type="text" value="" size="10" /><span id="1_mySapns10">High Bit Shellcode Protection in Post Data, High Bit Shellcode Protection in Header</span></td>
    <td style="text-align:center">
        <span id="1_ModifySpan1" style="display:block"><input type="button" value="修改" onClick="modify('1_ModifySpan', '1_fields', '1_mySapns');"></span>
        <span id="1_ModifySpan2" style="display:none"><input type="button" value="確認" onClick="modify('1_ModifySpan', '1_fields', '1_mySapns');"></span>
    </td>
    <td style="text-align:center"><input type="button" value="刪除" onClick="deleteRow(1);"></td>
</tr>

JavaScript：

<script>
var rowsTotal = 0;
function modify(id, inputsID, spansID){
    //取得btn ID
    var btn1 = document.getElementById(id + '1');
    var btn2 = document.getElementById(id + '2');


    if(btn1.style.display == 'block'){
        btn1.style.display = 'none';
        btn2.style.display = 'block';

        for(var i=1 ; i<11 ; i++){
            var spans = document.getElementById(spansID + i);
            var fields = document.getElementById(inputsID + i);
            var strInner = document.getElementById(spansID + i).innerHTML;
            spans.innerHTML = '';
            fields.value = strInner;
            fields.style.display = 'block';
        } 
    }else{
        btn1.style.display = 'block';
        btn2.style.display = 'none'; 

        for(var i=1 ; i<11 ; i++){
            var spans = document.getElementById(spansID + i);
            var fields = document.getElementById(inputsID + i);
            var strInner = fields.value;
            spans.innerHTML = strInner;
            fields.value = '';
            fields.style.display = 'none'; 
        }
    }
} //function end

function deleteRow(RowNum){
    //取得目前td數量
    var num = document.getElementById("myTable").rows.length;
    if(rowsTotal == 0)
     rowsTotal = num;
        var num2 = rowsTotal - num;
    if(RowNum - num2 == 0){
        document.getElementById("myTable").deleteRow((RowNum));
    }else{
        document.getElementById("myTable").deleteRow((RowNum - num2)); 
    }
}
</script>

CSS 位置 position: absolute 、relative、fixed

在 CSS 中的 position 屬性預設為 static 其結果如下圖：

以絕對位置 (position: absolute) 而言，故名思義，它是以父元素的邊界為絕對起點。

例如如果我們設定 top: 50px ，那麼這個元素就會在距離父元素內容區上邊界 50px 的地方呈現，如下圖：

補充：如果父元素的 position 不是 absolute 或 relative 時，那麼元素的位置就會再對應到父元素的上層元素；

如果其親代元素的 position 都沒有設定 absolute 或 relative 時，就以螢幕視窗最大可視範圍邊界為基準。

而以相關位置 (position: relative) 而言，其意義就是相對於原本的位置。例如我們指定 top: 50px 時，
那麼這個元素就會從原本應該呈現的位置往下移動 50px 。如下圖，紅色虛線部份就是未設定 position: relative 前，元素原該應該在的位置：

而固定位置 (position: fixed) 指的就是固定在螢幕視窗最大可視範圍上，如果不指定位置 (top, left, right, bottom) 時，那元素就會固定在原本的位置；
而指定位置後，就會以螢幕視窗最大可視範圍的邊界為絕對基準點。如果頁面內容超過螢幕視窗最大可視範圍大小時，
那麼不論我們如何捲動頁面，元素都會固定在螢幕視窗最大可視範圍上我們所指定的位置。

===========================================================================================

以下為position:fixed(不受捲軸影響的絕對位置)範例html程式碼，雖然很醜不過看得懂就好0.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style type="text/css">
body{
    pdding: 0; 
    margin: 0;
}
#container {
    background-color: #000;
    width: 100%;
    float: left;
    height: 1600px;
    position: relative;
}
#test2 {
    background-color: #0F0;
    position:fixed;
    top: 0;
    left: 0;
    height: 750px;
    width: 25%;
}
#test1 {
    float: left;
    width: 30%;
    height: 800px;
    background-color: #CCC;
}
</style>
</head>

<body>
<div id="container">
    <div id="test1"> id "test1" 的內容放在這裡</div>
    <div id="test2"> id "test2" 的內容放在這裡</div>
</div>
</body>
</html>

CSS 子元素選擇器[>]

以下示範子元素選擇器[>]使用方法，子元素選擇器不會影響孫元素

<style type="text/css">
    //css one
    .div1 > p {
        color: #F00;
    }

    //css two
    .div2 p {
        color: #F00;
    }
</style>

<!-- css one 只會影響div1內的p(子元素)，但不會影響span內的p(孫元素) -->
<div class="div1">
    <p>test</p>
    <span>
        <p>test</p>
    </span>
</div>

<!-- css two 會影響所有div2內的p -->
<div class="div2">
    <p>test</p>
    <span>
        <p>test</p>
    </span>
</div>

JavaScript 增加、刪除 table 內的 td

如果需要利用程式來增加Table內的tr、td等內容

<table id="myTable">
    <tr>
        <td>Row1 cell1</td>
        <td>Row1 cell2</td>
    </tr>
    <tr>
        <td>Row2 cell1</td>
        <td>Row2 cell2</td>
    </tr>
    <tr>
        <td>Row3 cell1</td>
        <td>Row3 cell2</td>
    </tr>
</table>

JavaScript寫法：

增加：

function myFunction(){
    //取得table元件
    var table = document.getElementById("myTable");

    //取的目前有的td數量
    var num = document.getElementById("myTable").rows.length;

    //從最後一筆開始加入
    var row = table.insertRow(num);

    //因為有兩個欄位 所以新增兩筆
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);

    //最後將兩筆的資料寫入
    cell1.innerHTML = "NEW CELL0";
    cell2.innerHTML = "NEW CELL2";
}

刪除：

function remove_data() 
{
    //先取得目前的row數
    var num = document.getElementById("mytable").rows.length;

    //防止把標題跟原本的第一個刪除XD
    if(num >2){
        //刪除最後一個
        document.getElementById("mytable").deleteRow(-1);
    }
}

檔案格式為 [業務部] IP=10.8.210.66 IP=10.8.210.67 [行政部] IP=192.168.12.11 IP=192.168.12.12 [財務部] IP=192.168.12.13 IP=192.168.12.14 ======================================================================================================= 以下程式為自訂函式 public static Hashtable BuildSortList() 執行完畢會回傳一個 Hashtable，裡面會放N個 List，N=分類檔的部門數量每個List 裡會放N個IP，N=部門底下的IP數量 ===============================================================================

//讀取分類檔
//執行完畢會回傳一個 Hashtable，裡面會放N個 List，N=分類檔的部門數量
//每個List 裡會放N個IP，N=部門底下的IP數量
public static Hashtable BuildSortList()
{
    //部門名稱清單
    SortStruct ss = new SortStruct();
    ss.sortNameList = new List();
     
    ipss.IPtoSortHT = new Hashtable();
    List sort = new List();
    //用來放sort List            
    Hashtable ht = new Hashtable();
 
    String strLine;
    //分類數量
    int sortCount = 0;
 
    string strName;
    //群組名稱陣列
    string[] sortName;
 
    //開啟檔案  C:\
    StreamReader sr = new StreamReader(@"D:\\DVM2\\Source\\DVM2SingleReport\\CrystalReportsApplicationTest\\bin\Report\\SortList.txt");
 
    //判斷有幾個分類
    StreamReader sr2 = new StreamReader(@"D:\\DVM2\\Source\\DVM2SingleReport\\CrystalReportsApplicationTest\\bin\Report\\SortList.txt");
    //幾號部門
    int sortNumber = -1;
    int sortNumber2 = -1;
 
    //讀取到一次"["，sortCount就+1
    while ((strLine = sr2.ReadLine()) != null)
    {
        strName = "";
        int iTitle = -1;
        iTitle = strLine.IndexOf("[", StringComparison.CurrentCultureIgnoreCase);
        if (iTitle >= 0)
        {
            sortCount++;
            //讀取到"["開頭時將兩邊做切割，取中間文字
            sortName = strLine.Split(new char[2] {'[', ']'});
            foreach(string s in sortName)
            {
                strName += s;
            }
            //將部門名稱放入List
            ss.sortNameList.Add(strName);
        }
    }
    //部門數量 > 0 才開始讀檔
    if (sortCount > 0)
    {
        //讀一行
        while ((strLine = sr.ReadLine()) != null)
        {
            //所在位置
            int iPos = strLine.IndexOf("=");
 
            //string[] strLines = strLine.Split('=');
 
            string strKey = string.Empty;
 
            string strValue = string.Empty;
 
            // 如果有出現 "=" 才可以切割欄位
            if (iPos > 0)
            {
                strKey = strLine.Substring(0, iPos).Trim();
                strValue = strLine.Substring(iPos + 1).Trim();
            }
 
            //判斷目前這行是什麼部門
            for (int i = 0; i < sortCount; i++)
            {
                int iTitle = strLine.IndexOf("[", StringComparison.CurrentCultureIgnoreCase);
                //判斷是否讀取到新的部門
                if (iTitle > -1)
                {
                    sortNumber2++;
                    if (sortNumber2 == 0) break;
                }
                if (sortNumber2 > 0 && iTitle > -1)
                {
                    sortNumber = i;
                    //將上一個讀取完的部門儲存
                    if (sortNumber >= 0) ht.Add(ss.sortNameList[sortNumber2-1], sort);
                    //if (sortNumber > 0) ht.Add("sort" + i, sort);
                    //讀取新的部門就重新new一個List                            
                    sort = new List();
                    break;
                }
            }
 
            //將讀取到的IP或電腦名稱加入List
            switch (strKey)
            {
                case "IP":
                    sort.Add(strValue);
                    ipss.IPtoSortHT.Add(strValue.ToString().Trim(), ss.sortNameList[sortNumber2]);
                    break;
                case "Host":
                    sort.Add(strValue);
                    break;
            }
        }
        //如果只有一個部門
        if (sortCount == 1)
        {
            ht.Add(ss.sortNameList[0], sort);
            return ht;
        }
    }
    //將最後一個部門加入List
    ht.Add(ss.sortNameList[sortCount-1], sort);
    return ht;
}

C# StreamReader 讀文字檔的編碼

//不指定使用何種編碼讀取文字，預設為Unicode
StreamReader sr = new StreamReader(@"C:\\Test.txt");

//使用系統預設的編碼格式，如Windows為ANSI，Linux為UTF-8
StreamReader sr = new StreamReader(@"C:\\Test.txt", System.Text.Encoding.Default);

//使用指定的編碼格是讀取文字檔
StreamReader sr = new StreamReader(@"C:\\Test.txt", System.Text.Encoding.GetEncoding("Big5"));

C# 利用Hashtable 存放N個List

當需要使用多個List存放資料，且List的數量為動態增減的話可用Hashtable存放所有的List

using System.Collections;
class MyClass
{
 static void Main(string[] args){
         Hashtable ht = new Hashtable();
   
  //C#的List強制使用泛型
  List list1 = new List();
  List list2 = new List();
  List list3 = new List();

  //Key為自訂名稱
  ht.add("list1".list1);
  ht.add("list2".list2);
  ht.add("list2".list3);

  foreach (DictionaryEntry item in ht) {
   //第N圈迴圈，MyList就會取得第N個 list
   List MyList = (List)item.Value;
  }   

    }//Main end
}

C# 利用SessionID驗證是否為登入狀態

//在認證帳號密碼後，先將SessionID儲存
Session.Add("ID", Session.SessionID);

//執行其他程式時的判斷式
Boolean AuthorityCheck()
{
 string strSessionID;
 if (Session["ID"] != null)
 {
  //取得登入時的SesssionID
  strSessionID = Session["ID"].ToString().Trim();

  //判斷當前SessionID與登入SessionID是否相等
  if (strSessionID.CompareTo(Session.SessionID) == 0){
   return true;
  }else{
   return false;
  }
 }else{
  return false;
 }
}

ASP.NET 搭配 Bootstrap3 on VS2012

於VS2012內:

「工具 > 擴充功能和更新」，在「擴充功能與更新」裡查詢 Bootstrap3 For Mvc4，下載並安裝「Bootstrap3 For Mvc4」

安裝完成後即新增專案，如果遇到下圖

則在VS2012內「工具 > 程式套件管理員 > Package Manager Console」

PM> Install-Package Newtonsoft.Json -Version 4.5.11
PM> Install-Package Microsoft.AspNet.Razor -Version 2.0.20715
PM> Install-Package Microsoft.AspNet.Mvc.FixedDisplayModes -Version 1.0.0

然後執行

如果又出現

'WebGrease, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35'

錯誤訊息

則輸入

PM> Install-Package Microsoft.AspNet.Web.Optimization
PM> Update-Package WebGrease
PM> Uninstall-Package Microsoft.AspNet.Web.Optimization
PM> Uninstall-Package WebGrease
PM> Install-Package Microsoft.AspNet.Web.Optimization
PM> Update-Package WebGrease

然後執行，成功結果如下圖：

ASP.NET 解決 alert 影響 CSS

不要使用

Response.Write("<script>alert('message')</script>");

改用

ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('message')</script>");

即可解決

ASP.NET ListBox 左右移動 C#

<asp:Button ID="btMoveRight" runat="server" Text=" &gt;&gt; " OnClick="btMoveRight_Click" />
<asp:Button ID="btMoveLeft" runat="server" Text=" &lt;&lt; " OnClick="btMoveLeft_Click" />

// 右移按鍵的函式
protected void btMoveRight_Click(object sender, EventArgs e)
{
 // 將所選到的項目新增至lbGroupUser
 for (int i = 0; i < lbNotGroupUser.Items.Count; i++)
 {
  if (lbNotGroupUser.Items[i].Selected)
  {
   lbGroupUser.Items.Add(lbNotGroupUser.Items[i]);
   lbNotGroupUser.Items.RemoveAt(i);
   i--;
  }
 }
 lbGroupUser.ClearSelection();
}

//左移按鍵的函式
protected void btMoveLeft_Click(object sender, EventArgs e)
{
 // 將所選到的項目新增至lbNotGroupUser
 for (int i = 0; i < lbGroupUser.Items.Count; i++)
 {
  if (lbGroupUser.Items[i].Selected)
  {
   lbNotGroupUser.Items.Add(lbGroupUser.Items[i]);
   lbGroupUser.Items.RemoveAt(i);
   i--;
  }
 }
 lbNotGroupUser.ClearSelection();
}

Java

HTML 同網頁內的跳轉

假設網頁內有一段section：


<section id="contents">
<div class="page-header">
 <h1>3. 含有什麼</h1>
 </div>
 <p class="lead">Bootstrap 中的 HTML、CSS 和 JS 適合各種設備，不過，它們可以被簡單分類成幾個類別，可以參考本文件頂部的巡覽列。</p>

 <h2>文件章節</h2>
 <h4><a href="/Bootstrap/Scaffolding">架構</a></h4>
 <p>body元素的全域樣式，用於重設背景、連結樣式、網格系統和兩個簡單佈局結構。</p>
 <h4><a href="/Bootstrap/BaseCSS">基礎CSS</a></h4>
 <p>常見HTML元素，像是佈局、程式碼、表格、表單和按鈕。還包含 <a href="http://glyphicons.com">Glyphicons</a>。一個非常優秀的icon圖集。</p>
 <h4><a href="/Bootstrap/Components">元件</a></h4>
 <p>常見介面元件，像是標簽、pill、巡覽、警告、頁面標頭等。</p>
 <h4><a href="/Bootstrap/JavaScript">JavaScript</a></h4>
 <p>和元件類似，這些JavaScript外掛用以實現如提示（tooltip）、彈出視窗（popover）、對話視窗（modal）等具互動性的元件。</p>

 <h2>元件清單</h2>
 <p><strong>元件庫</strong>和<strong>JavaScript外掛庫</strong>提供以下介面元素。</p>
 <ul>
 <li>按鈕群組</li>
 <li>按鈕下拉選單</li>
 <li>巡覽標籤、pill、清單</li>
 <li>巡覽列</li>
 <li>標籤</li>
 <li>徽章</li>
 <li>頁面標題和 hero unit</li>
 <li>縮圖</li>
 <li>警告視窗</li>
 <li>進度列</li>
 <li>對話視窗</li>
 <li>下接式選單</li>
 <li>工具提示</li>
 <li>彈出視窗</li>
 <li>手風琴樣式</li>
 <li>輪播</li>
 <li>排版</li>
 </ul>
 <p>接下來的介紹中，我們會每一個的詳細介紹。在此之前，先看看如何使用且客製它們。</p>
</div>
</section>

可透過<a href=#"contents">go to contents </a> 讓網頁連結至該section頂部(不會換頁)

2014年8月17日星期日

JSON：巢狀範例

//第一個JSON
var person2 = {
 id : 1234,
 name : "joyce "
};

//第二個JSON
var person = {
 firstName: "John",
 lastName : "Doe",
 id : person2 ,     //取得第一個JSON
 getId : function() { return this.id },
 fullName : function(){return this.firstName + " " + this.lastName}
};

//透過第二個JSON取得第一個JSON的某個value
document.getElementById("demo").innerHTML = person.id.id ;

訂閱：文章 (Atom)

Jeffrey 的學習筆記

Label

2014年8月28日星期四

MFC CString to int

2014年8月24日星期日

MFC 字串切割

2014年8月20日星期三

JavaScript 兩個select透過js互相對應改變選取項目

JavaScript 使用<input>呈現與切換圖片

jQuery 基本範例

JavaScript 修改、移除td

CSS 位置 position: absolute 、relative、fixed

CSS 子元素選擇器[>]

JavaScript 增加、刪除 table 內的 td

C# 讀取分類檔

C# StreamReader 讀文字檔的編碼

C# 利用Hashtable 存放N個List

C# 利用SessionID驗證是否為登入狀態

ASP.NET 搭配 Bootstrap3 on VS2012

ASP.NET 解決 alert 影響 CSS

ASP.NET ListBox 左右移動 C#

Java

HTML 同網頁內的跳轉

2014年8月17日星期日

JSON：巢狀範例

Label

2014年8月28日 星期四

2014年8月24日 星期日

2014年8月20日 星期三

2014年8月17日 星期日

2014年8月28日星期四

2014年8月24日星期日

2014年8月20日星期三

2014年8月17日星期日