JavaScript
def => function 기능을 함
함수도 데이터로 표현될 수 있다.
자바스크립트
HTML 내용을 동적으로 변경할 수 있다
Body의 바닥부분에 스크립트 언어를 넣어주면 됨
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1 onclick="changeText()" id = "title">안녕 제목이야</h1>
<button onclick = "changeText()">눌러보세요</button>
<img id = 'img' width="500" src="https://ssl.pstatic.net/melona/libs/1491/1491834/f65f756fb1963203f8cd_20240425140604576.jpg" alt="">
<script>
function changeText(){
//html 요소의 내용 변경
// document.getElementById('title').innerText = '제목을 바꿔보자';
document.getElementById('title').innerHTML = '제목을 <mark>바꿔보자</mark>';
//html 요소의 속성 변경
document.getElementById('img').src = 'https://ssl.pstatic.net/melona/libs/1491/1491834/fdf4c7bd85960551ae4c_20230731151310224_5.jpg';
document.getElementById('img').width = '1000';
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1 onclick="changeText()" id="title">안녕 제목이야</h1>
<button onclick="changeText()">눌러보세요</button>
<button onclick="print()">인쇄</button>
<button onclick="openNewTab()">새 창</button>
<button onclick="closeTab()">새창닫기</button>
<button onclick="fullscreen()">전체화면 보기</button>
<img id="img" width="500" src="https://ssl.pstatic.net/melona/libs/1491/1491834/fdf4c7bd85960551ae4c_20230731151310224_5.jpg" alt="">
<script>
let tab = null;
function fullscreen() {
// 전체화면
document.body.requestFullscreen();
}
function openNewTab() {
// 새창 열기
tab = window.open('https://www.naver.com');
}
function closeTab() {
tab.close();
}
function changeText() {
// html요소의 내용 변경
document.getElementById('title').innerText = '제목을 <mark>바꿔보자</mark>';
// html 요소의 속성 변경
document.getElementById('img').src = 'https://ssl.pstatic.net/melona/libs/1491/1491834/7c98fa6c6137f0778439_20240422135426022_1.jpg';
document.getElementById('img').width = '1000';
// html 요소의 스타일 변경
document.getElementById('title').style.color = 'red';
}
</script>
</body>
</html>
안녕하세요. 배운 것을 메모하는 velog입니다.