<!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


반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] 팝업창에서 스크롤바 사용하기.  (0) 2016.12.20
[JavaScript] 14-3_Filtering.html  (0) 2016.12.12
[JavaScript]_Attr_toggleClass().html  (0) 2016.12.12
[JavaScript] 14-2_Attr_removeClass().html  (0) 2016.12.12
[JavaScript] 14-2_Attr_hasCalss().html  (0) 2016.12.12

<!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


반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] 14-3_Filtering.html  (0) 2016.12.12
[JavaScript] 14-2_Attr_prop()_val().html  (0) 2016.12.12
[JavaScript] 14-2_Attr_removeClass().html  (0) 2016.12.12
[JavaScript] 14-2_Attr_hasCalss().html  (0) 2016.12.12
[JavaScript] 14-2_Attr_attr()_html().html  (0) 2016.12.12

<!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


반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] 14-2_Attr_prop()_val().html  (0) 2016.12.12
[JavaScript]_Attr_toggleClass().html  (0) 2016.12.12
[JavaScript] 14-2_Attr_hasCalss().html  (0) 2016.12.12
[JavaScript] 14-2_Attr_attr()_html().html  (0) 2016.12.12
[Javascript] 14-2_Attr_addClass().html  (0) 2016.12.12

<!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


반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript]_Attr_toggleClass().html  (0) 2016.12.12
[JavaScript] 14-2_Attr_removeClass().html  (0) 2016.12.12
[JavaScript] 14-2_Attr_attr()_html().html  (0) 2016.12.12
[Javascript] 14-2_Attr_addClass().html  (0) 2016.12.12
[Javascript] 12-3_XMLHttpRequestStatus.js  (0) 2016.12.09

<!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


반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] 14-2_Attr_removeClass().html  (0) 2016.12.12
[JavaScript] 14-2_Attr_hasCalss().html  (0) 2016.12.12
[Javascript] 14-2_Attr_addClass().html  (0) 2016.12.12
[Javascript] 12-3_XMLHttpRequestStatus.js  (0) 2016.12.09
[JavaScript] 12-2_getResult.jsp  (0) 2016.12.09

<!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


반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] 14-2_Attr_hasCalss().html  (0) 2016.12.12
[JavaScript] 14-2_Attr_attr()_html().html  (0) 2016.12.12
[Javascript] 12-3_XMLHttpRequestStatus.js  (0) 2016.12.09
[JavaScript] 12-2_getResult.jsp  (0) 2016.12.09
[javaScript] 12-2_getResult.js  (0) 2016.12.09


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


반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] 14-2_Attr_attr()_html().html  (0) 2016.12.12
[Javascript] 14-2_Attr_addClass().html  (0) 2016.12.12
[JavaScript] 12-2_getResult.jsp  (0) 2016.12.09
[javaScript] 12-2_getResult.js  (0) 2016.12.09
[JavaScript] 12-1_XMLHttpRequestExam.jsp  (0) 2016.12.09

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

<%

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

Thread.sleep(2000); 

%>

Request State Completed


12-2_getResult.jsp


반응형

'Programming > JavaScript' 카테고리의 다른 글

[Javascript] 14-2_Attr_addClass().html  (0) 2016.12.12
[Javascript] 12-3_XMLHttpRequestStatus.js  (0) 2016.12.09
[javaScript] 12-2_getResult.js  (0) 2016.12.09
[JavaScript] 12-1_XMLHttpRequestExam.jsp  (0) 2016.12.09
[JavaScript] 12-1_XMLHttpRequestExam.js  (0) 2016.12.09

console.log("Begin 12-2");


var HTTPCtrl = 

{

getHTTP: function()

{

var xmlhttp= null;

if(window.XMLHttpRequest)

{

xmlhttp= new XMLHttpRequest();

}

else

{

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

}

return xmlhttp;

}

};


var request = HTTPCtrl.getHTTP();

request.open('get', '12-2_getResult.jsp', true);

request.send();


request.onreadystatechange = function()

{

var divElem= document.getElementById('loadingMessageContainer');

if(request.readyState === 4)

{

var msg= request.responseText;

var content = document.getElementById("loadingMessageContainer");

divElem.innerHTML= "서버로부터 받은 메세지<br/>" + msg;

}

else

{

divElem.style.display= '';

}

};


console.log("End 12-2");


12-2_getResult.js


반응형

'Programming > JavaScript' 카테고리의 다른 글

[Javascript] 12-3_XMLHttpRequestStatus.js  (0) 2016.12.09
[JavaScript] 12-2_getResult.jsp  (0) 2016.12.09
[JavaScript] 12-1_XMLHttpRequestExam.jsp  (0) 2016.12.09
[JavaScript] 12-1_XMLHttpRequestExam.js  (0) 2016.12.09
[JavaScript] 12-0_XMLHttpRequest.html  (0) 2016.12.09

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

<% System.out.println("Welcome JavaScript");%>


12-1_XMLHttpRequestExam.jsp


반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] 12-2_getResult.jsp  (0) 2016.12.09
[javaScript] 12-2_getResult.js  (0) 2016.12.09
[JavaScript] 12-1_XMLHttpRequestExam.js  (0) 2016.12.09
[JavaScript] 12-0_XMLHttpRequest.html  (0) 2016.12.09
[JavaScript] 11-3_KeyboardEvent.js  (0) 2016.12.08

+ Recent posts

티스토리툴바