change
'change' 이벤트는 사용자가 input, select, textarea 요소의 값을 변경했을 때 발생하는 이벤트이다. 이 이벤트는 사용자가 입력 필드의 값을 변경하고 포커스를 잃었을 때, 또는 선택 목록의 값을 변경했을 때 발생한다.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Change Event Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// 입력 필드의 값이 변경되었을 때 실행될 코드
$('#myInput').change(function() {
var newValue = $(this).val();
alert('입력된 값이 변경되었습니다: ' + newValue);
});
// 선택 목록의 값이 변경되었을 때 실행될 코드
$('#mySelect').change(function() {
var selectedOption = $(this).val();
alert('선택된 옵션: ' + selectedOption);
});
});
</script>
</head>
<body>
<input type="text" id="myInput" placeholder="텍스트를 입력하세요">
<select id="mySelect">
<option value="option1">옵션 1</option>
<option value="option2">옵션 2</option>
<option value="option3">옵션 3</option>
</select>
</body>
</html>
text
text 메서드는 선택한 요소의 텍스트 내용을 가져오거나 설정할 때 사용하며, HTML 태그를 무시하고 순수한 텍스트만을 다르기 때문에 간단한 텍스트 조작에 유용하다.
- 텍스트 내용 가져오기 : 요소의 텍스트를 가져와서 변수에 저장.
<!DOCTYPE html>
<html>
<head>
<title>jQuery text() Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// 버튼 클릭 시 텍스트 내용 가져오기
$('#getTextButton').click(function() {
var content = $('#example').text();
alert('텍스트 내용: ' + content);
});
});
</script>
</head>
<body>
<div id="example">이것은 예제 텍스트입니다.</div>
<button id="getTextButton">텍스트 가져오기</button>
</body>
</html>
- 텍스트 내용 설정하기 : 요소의 텍스트를 새로운 값으로 설정.
<!DOCTYPE html>
<html>
<head>
<title>jQuery text() Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// 버튼 클릭 시 텍스트 내용 변경하기
$('#setTextButton').click(function() {
$('#example').text('텍스트 내용이 변경되었습니다.');
});
});
</script>
</head>
<body>
<div id="example">이것은 예제 텍스트입니다.</div>
<button id="setTextButton">텍스트 변경하기</button>
</body>
</html>
- HTML 태그 무시 : text 메서드는 HTML 태그를 무시하고 순수한 텍스트 만들 다루는데,강조된 텍스트의 경우, $('#example').text()는 "강조된 텍스트"를 반환한다.
prop
prop 메서드는 주로 DOM 요소의 속성(Property)을 설정하거나 가져오는 데 사용되며, attr은 HTML 속성(Attribute)을 다룰 때 사용한다.
- 속성 가져오기
<!DOCTYPE html>
<html>
<head>
<title>jQuery prop() Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// 버튼 클릭 시 checked 속성 가져오기
$('#checkStatusButton').click(function() {
var isChecked = $('#exampleCheckbox').prop('checked');
alert('체크박스 상태: ' + isChecked);
});
});
</script>
</head>
<body>
<input type="checkbox" id="exampleCheckbox"> 체크박스 예제
<br><br>
<button id="checkStatusButton">체크박스 상태 확인</button>
</body>
</html>
- 속성 설정하기
<!DOCTYPE html>
<html>
<head>
<title>jQuery prop() Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// 버튼 클릭 시 checked 속성 설정하기
$('#checkButton').click(function() {
$('#exampleCheckbox').prop('checked', true);
});
$('#uncheckButton').click(function() {
$('#exampleCheckbox').prop('checked', false);
});
});
</script>
</head>
<body>
<input type="checkbox" id="exampleCheckbox"> 체크박스 예제
<br><br>
<button id="checkButton">체크박스 체크하기</button>
<button id="uncheckButton">체크박스 체크 해제하기</button>
</body>
</html>
- prop attr 비교
<!DOCTYPE html>
<html>
<head>
<title>jQuery prop() vs attr() Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// attr()로 체크박스 상태 설정
$('#checkAttrButton').click(function() {
$('#exampleCheckbox').attr('checked', 'checked');
});
$('#uncheckAttrButton').click(function() {
$('#exampleCheckbox').removeAttr('checked');
});
// prop()로 체크박스 상태 설정
$('#checkPropButton').click(function() {
$('#exampleCheckbox').prop('checked', true);
});
$('#uncheckPropButton').click(function() {
$('#exampleCheckbox').prop('checked', false);
});
// 상태 확인
$('#checkStatusButton').click(function() {
var attrChecked = $('#exampleCheckbox').attr('checked');
var propChecked = $('#exampleCheckbox').prop('checked');
alert('attr checked: ' + attrChecked + '\nprop checked: ' + propChecked);
});
});
</script>
</head>
<body>
<input type="checkbox" id="exampleCheckbox"> 체크박스 예제
<br><br>
<button id="checkAttrButton">attr()로 체크박스 체크하기</button>
<button id="uncheckAttrButton">attr()로 체크박스 체크 해제하기</button>
<br><br>
<button id="checkPropButton">prop()로 체크박스 체크하기</button>
<button id="uncheckPropButton">prop()로 체크박스 체크 해제하기</button>
<br><br>
<button id="checkStatusButton">체크박스 상태 확인</button>
</body>
</html>
attr 과 prop을 사용하여 체크박스의 checked 속성을 설정하고 상태를 확인하는데, attr은 HTML속성을 설정하거나 제거하지만, prop은 DOM 속성을 설정하거나 가져온다.
따라서 attr('checked')는 체크박스의 초기 설정 상태를 반영하며, prop('checked')는 체크 박스의 현재 상태를 반영한다.
JSON.stringify
JSON.stringify는 JavaScript 객체를 JSON 문자열로 변환한다 즉, 이 메서드는 객체를 문자열로 직렬화(serialization)하는 데 사용한다.
JSON.stringify(value, replacer, space);
- value: JSON 문자열로 변환할 JavaScript 값(일반적으로 객체나 배열).
- replacer (선택 사항): 변환 과정에서 특정 속성들을 필터링할 수 있는 함수 또는 배열.
- space (선택 사항): 결과 문자열의 가독성을 높이기 위해 추가할 공백 문자나 탭 수.
const obj = {
name: "John",
age: 30,
city: "New York"
};
const jsonString = JSON.stringify(obj);
console.log(jsonString); // '{"name":"John","age":30,"city":"New York"}'
// 예제: 가독성을 높이기 위해 space 인수를 사용하는 경우
const prettyJsonString = JSON.stringify(obj, null, 2);
console.log(prettyJsonString);
/*
{
"name": "John",
"age": 30,
"city": "New York"
}
*/
JSON.parse
JSON.parse는 JSON 문자열을 JavaScript 객체로 변환한다 즉, 이 메서드는 문자열을 역직렬화(deserialization)하는 데 사용한다.
JSON.parse(text, reviver);
- text: JSON 형식의 문자열.
- reviver (선택 사항): 반환된 값의 각 속성을 변환할 수 있는 함수.
const jsonString = '{"name":"John","age":30,"city":"New York"}';
const obj = JSON.parse(jsonString);
console.log(obj); // { name: 'John', age: 30, city: 'New York' }
// 예제: reviver 함수를 사용하는 경우
const jsonStringWithDate = '{"name":"John","birthdate":"1990-01-01T00:00:00.000Z"}';
const objWithDate = JSON.parse(jsonStringWithDate, (key, value) => {
if (key === "birthdate") {
return new Date(value);
}
return value;
});
console.log(objWithDate.birthdate instanceof Date); // true
미친개발자를향해