JavaScript로 페이지 요소 값 가져오기 및 세션을 통한 값 전달
페이지 최상단의 특정 항목 값 알아내기
JavaScript를 사용하여 페이지 최상단에 있는 특정 항목의 값을 알아내는 방법은 매우 간단합니다. document.getElementById 또는 document.querySelector를 사용하여 특정 요소를 선택하고, 해당 요소의 값을 가져올 수 있습니다.
예제 코드:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Get Element Value</title>
</head>
<body>
<div id="topElement">This is the top element</div>
<script>
// 특정 ID를 가진 요소 선택
const topElement = document.getElementById('topElement');
// 요소의 텍스트 내용 가져오기
const elementValue = topElement.innerText;
console.log(elementValue); // "This is the top element" 출력
</script>
</body>
</html>
AI가 생성한 코드입니다. 신중하게 검토하고 사용하세요. FAQ의 자세한 정보.
위 예제에서는 id가 topElement인 요소를 선택하고, 해당 요소의 텍스트 내용을 innerText 속성을 사용하여 가져옵니다.
또 다른 방법으로는 document.querySelector를 사용할 수도 있습니다:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Get Element Value</title>
</head>
<body>
<div class="top-element">This is the top element</div>
<script>
// 특정 클래스를 가진 요소 선택
const topElement = document.querySelector('.top-element');
// 요소의 텍스트 내용 가져오기
const elementValue = topElement.innerText;
console.log(elementValue); // "This is the top element" 출력
</script>
</body>
</html>
AI가 생성한 코드입니다. 신중하게 검토하고 사용하세요. FAQ의 자세한 정보.
이 방법은 CSS 선택자를 사용하여 요소를 선택할 수 있어 더욱 유연합니다.
세션을 통해 하위 페이지로 값 전달하기
세션을 통해 하위 페이지로 값을 전달하는 방법은 여러 가지가 있습니다. 여기서는 JavaScript와 HTML을 사용하여 세션 스토리지를 활용하는 방법을 설명하겠습니다.
1. 값 저장하기 (상위 페이지)
먼저, 상위 페이지에서 세션 스토리지에 값을 저장합니다.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Save to Session Storage</title>
</head>
<body>
<input type="text" id="inputValue" placeholder="Enter some value">
<button onclick="saveToSession()">Save</button>
<script>
function saveToSession() {
const inputValue = document.getElementById('inputValue').value;
sessionStorage.setItem('savedValue', inputValue);
alert('Value saved to session storage!');
}
</script>
</body>
</html>
AI가 생성한 코드입니다. 신중하게 검토하고 사용하세요. FAQ의 자세한 정보.
2. 값 가져오기 (하위 페이지)
하위 페이지에서 세션 스토리지에 저장된 값을 가져옵니다.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Retrieve from Session Storage</title>
</head>
<body>
<div id="displayValue"></div>
<script>
window.onload = function() {
const savedValue = sessionStorage.getItem('savedValue');
document.getElementById('displayValue').innerText = savedValue ? savedValue : 'No value found in session storage.';
}
</script>
</body>
</html>
AI가 생성한 코드입니다. 신중하게 검토하고 사용하세요. FAQ의 자세한 정보.
이 예제에서는 상위 페이지에서 입력된 값을 세션 스토리지에 저장하고, 하위 페이지에서 해당 값을 가져와서 표시합니다.
JavaScript로 7일 전 날짜 구하기
JavaScript를 사용하여 7일 전의 날짜를 구하는 방법은 매우 간단합니다. Date 객체와 setDate 메서드를 사용하면 됩니다.
예제 코드:
JavaScript
// 현재 날짜 가져오기
let currentDate = new Date();
// 7일 전 날짜 계산
currentDate.setDate(currentDate.getDate() - 7);
// 결과 출력
console.log(currentDate);
AI가 생성한 코드입니다. 신중하게 검토하고 사용하세요. FAQ의 자세한 정보.
이 코드는 현재 날짜에서 7일을 빼서 7일 전의 날짜를 계산합니다.
이 블로그 게시글이 도움이 되셨길 바랍니다! 추가적인 질문이 있거나 다른 도움이 필요하시면 언제든지 말씀해 주세요. 😊
'갑을병정이야기' 카테고리의 다른 글
| Python 정규식으로 문자열에서 특정 문자만 남기기 (2) | 2024.09.13 |
|---|---|
| Oracle 해시 조인의 이해와 활용 (4) | 2024.09.11 |
| JavaScript에서 날짜 유효성 검증하기 (1) | 2024.09.07 |
| DevExtreme dxChart와 dxDataGrid 설정 방법 (0) | 2024.09.03 |
| DevExtreme과 JavaScript를 활용한 다양한 기능 구현 (0) | 2024.09.01 |