■ PascalCasing

    • 파스칼 표기법.
    • 첫 단어를 대문자로 표기하는 기법.
    • PropertyDescriptor, HtmlTag...


 camelCasing

    • 카멜 표기법.
    • 단어의 첫 글자를 대문자로 쓰되, 가장 처음의 문자는 소문자로 표기하는 기법.
    • propertyDescriptor, ioStream, htmlTag...


■ Hungarian Notation

    • 헝가리안 표기법.
    • 변수 및 함수의 인자 이름 앞에 데이터 타입을 표기하는 기법.
    • 타입이 바뀌면 이름도 바뀌어야 하는 단점이 있다.
    • 같은 의미를 가지는 서로 다른 타입의 변수를 선언할 수 있다.
    • 요즘은 지양하는 네이밍 방법론.



반응형

'Programming' 카테고리의 다른 글

[ASP] 04. 파일 읽기  (0) 2016.12.20
[ASP] 03. 파일 쓰기  (0) 2016.12.20
[ASP] 02. 조건문  (0) 2016.12.20
[ASP] 01. 반복문  (0) 2016.12.20
[ASP] 00. 변수 선언  (0) 2016.12.20

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width: 60px;

height: 60px;

margin: 10px;

float: left;

border: 2px solid blue;

}

.blue { background: blue; }

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<script type="text/javascript">

//"body"엘리먼트 내부에서 "div"엘리먼트를 찾고

//eq()를 이용해 "2"의 인덱스를 갖는 목표에 클래스를 추가한다.

$("body").find("div").eq(2).addClass("blue");

</script>

</body>

</html>


14-3_Filtering.html


반응형

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script src ="http://code.jquery.com/jquery-latest.js"></script>

<title>.attr()</title>

<style>

p { margin: 20px 0 0 }

b { color: red }

</style>

</head>

<body>

<input id="check1" type="checkbox" checked="checked">

<label for="check1">Check me !</label>

<p></p>

<script>

//"input"엘리먼트가 변경될때마다 호출되는 함수

$("input").change(function()

{

var $input = $(this);

$("p").html

(

//this의 "checked"라는 속성의 값을 출력

".attr('checked': <b>" + $input.attr('checked') + "</b><br/>"

//this의 "checked"속성에 직접 접근하여 값을 가져옴

+ ".prop('checked'): <b>" + $input.prop('checked') + "</b><br/>"


+ ".is(':checked'): <b>" + $input.is(':checked')

) + "</b>";

}).change();

</script>

<br/><br/>

<select id="single">

<option>Single</option>

<option>Single2</option>

</select>

<select id="mulit">

<option selected="selected">Multiple</option>

<option>Multiple2</option>

<option selected="selected">Multiple</option>

</select><br/>

<span></span>

<script type="text/javascript">

function displayVals()

{

//val()을 통해  지정한 엘리먼트의  value값을 설정

var singleValues = $("#single").val();

var multiValues = $("#mulit").val() || [];

$("span").html

(

"<b>Single: </b>" + singleValues + 

"<br/><b>Multiple: </b>" + multiValues

);

}

$("select").change(displayVals);

displayVals();

</script>

</body>

</html>


14-2_Attr_prop()_val().html


반응형

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script src ="http://code.jquery.com/jquery-latest.js"></script>

<title>.toggleClass()</title>

<style>

p

{

margin: 4px;

font-size: 16px;

font-weight: border;

cursor: pointer;

}

.blue

{

color: blue;

}

.highlight

{

background: yellow;

}

</style>

</head>

<body>

<p class="blue">Click to toggle !</p>

<p class="blue highlight">highlight</p>

<p class="blue">on these</p>

<p class="blue">paragraphs.</p>

<script>

//모든  <p>엘리먼트에 대해 "클릭"이벤트 설정

$("p").click(function()

{

//클릭한 엘리먼트(this)에 대해 "highlight"클래스를 토글함.

$(this).toggleClass("highlight");

});

</script>

</body>

</html>


14-2_Attr_toggleClass().html


반응형

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script src ="http://code.jquery.com/jquery-latest.js"></script>

<title>.removeClass()</title>

<style>

.border

{

border: 1px solid black;

}

</style>

</head>

<body>

<p class = "border">Hello</p>

<p class = "border">AND</p>

<p class = "border">Goodbye</p>

<script>

//<p>엘리먼트들중 짝수번째에 해당하는것에 대해  "border"속성을 제거함.

$("p:even").removeClass("border");

</script>

</body>

</html>


14-2_Attr_removeClass().html


반응형

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script src ="http://code.jquery.com/jquery-latest.js"></script>

<title>.hasClass()</title>

<style>

p

{

margin: 8px;

font-size: 16px;

}

.selected

{

color: red;

}

</style>

</head>

<body>

<p>1번</p>

<p class="selected">2번</p>

<p>3번</p>

<div id = "result1">1번 has "selected" class : </div>

<div id = "result2">3번 has "selected" class : </div>

<div id = "result3">1번, 2번 or 3번 have "selected" class : </div>

<script>

//<p>엘리먼트들 중 첫번째 엘리먼트가 "selected"클래스를 갖고 있는지 판단

//그 결과를 string 타입으로 변환해  <div>엘리먼트중 id가 "result1"을 찾아  그 뒤에 이어 붙임.

$("div#result1").append($("p:first").hasClass("selected").toString());

$("div#result2").append($("p:last").hasClass("selected").toString());

//모든 <p>엘리먼트들 중  "selected"클래스를 갖고 있는 엘리먼트가 있는지 판단

//그 결과를 string 타입으로 변환해  <div>엘리먼트중 id가 "result3"을 찾아  그 뒤에 이어 붙임.

$("div#result3").append($("p").hasClass("selected").toString());

</script>

</body>

</html>


14-2_Attr_hasClass().html


반응형

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script src ="http://code.jquery.com/jquery-latest.js"></script>

<title>.attr()</title>

<style>

em

{

color: blue;

font-weight;

bold;

}

div

{

color: red;

}

</style>

</head>

<body>

<p>Somthing like... <em title="huge, gigantic">huge and gigantic</em> dinosaur! </p>

Information of "em" tag...

<div></div>

<script>

//"em"엘리먼트의 "title" 속성값을 가져옴

var title= $("em").attr("title");

$("div").text("title attr : " + title);

</script>

<br/><br/>

<button>Enable</button>

<input type="text" title="hello"/>

<div id= "log" style="colot: black;"></div>

<script>

(function()

{

//"input"엘리먼트의 "title"속성값을 가져옴

var inputTitle =$("input").attr("title");

$("button").click(function()

{

//this는 현재 누른 버튼을 의미. 따라서 this의 next는 "input"엘리먼트를 의미함.

//콘솔 로그 참조

var input  = $(this).next();

console.log(this);

console.log(input);

//원래의 속성값과 클릭할때 가져온 속성값이 같으면 속성을 삭제

if(input.attr("title") == inputTitle)

{

input.removeAttr("title");

}

//원래의 속성값과 클릭할때 가져온 속성값이 다르면 원래의 속성값을 적용

else

{

input.attr("title", inputTitle);

}

//html()을 통해  "log"라는 id를 가진 엘리먼트의 innerHTML값을 수정.

//cf. ~.html();을 통해 엘리먼트의 innerHTML값을 가져올 수 있음.

$("#log").html("&#60;input&#62; 엘리먼트 title의 속성값 : " + input.attr("title"));

});

}) ();

</script>

</body>

</html>


14-2_Attr_attr()_html().html


반응형

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script src ="http://code.jquery.com/jquery-latest.js"></script>

<title>.addClass()</title>

<style>

p

{

margin: 8px;

font-size: 16px;

}

.selected

{

border: 1px solid black;

}

</style>

</head>

<body>

<p>Hello</p>

<p>AND</p>

<p>Goodbye</p>

<script>

//<p>엘리먼트들중 마지막것에  "selected"속성을 추가함.

$("p:last").addClass("selected");

</script>

</body>

</html>


14-2_Attr_addClass().html


반응형


var HTTP =

{

TYPE_XML: 'XML',

TYPE_TEXT: 'TEXT',

getHTTP: function()

{

var xmlhttp = null;

if(window.XMLHttpRequest)

{

xmlhttp= new XMLHttpRequest();

}

else

{

xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");

}

return xmlhttp;

},

send: function(method, url, callback, dataType)

{

var request= this.getHTTP();

var xml = this.TYPE_XML;

var text = this.TYPE_TEXT;

request.open(method, url, true);

request.onreadystatechange = function()

{

if(request.readyState ===4)

{

var response = null;

var status = request.status;

if(dataType === xml)

{

response = request.responseXML;

}

else if(dataType ===text)

{

response = request.responseText;

}

request = null;

if(status === 200)

{

callback(response);

}

else if(status === 400)

{

alert('올바르지 못한 요청');

}

else if(status === 403)

{

alert('보안문제로 인한 접근 불가');

}

else if (status === 404)

{

alert('페이지를 찾을수 없음');

}

else if(status === 500)

{

alert('서버 오류');

}

else

{

alert('해당 요청이 바르게 처리되지 않음.\nStatusCode: ' + status);

}

}

};

request.send();

},

get: function(url, callback, dataType)

{

this.send('get', url, callback, dataType);

},

post: function(url, callback, dataType)

{

this.send('post', url, callback, dataType);

},

getXML: function(url, callback)

{

this.send('get', url, callback, this.TYPE_XML);

},

postXML: function(url, callback, dataType, dataType)

{

this.send('post', url, callback, this.TYPE_XML);

},

getText: function(url, callback)

{

this.send('get', url, callback, this.TYPE_TEXT);

},

postText: function(url, callback, dataType, dataType)

{

this.send('post', url, callback, this.TYPE_TEXT);

}

};


12-3_XMLHttpRequestStatus.js


반응형

<%@ page language= "java" contentType="text/html; charset= UTF-8" pageEncoding="UTF-8"%>

<%

//너무 빠른 응답을 방지하기 위해 잠시정지.

Thread.sleep(2000); 

%>

Request State Completed


12-2_getResult.jsp


반응형

+ Recent posts