ChatGPT 활용하면 코드를 짜는 시간이 엄청 단축됩니다. ChatGPT를 활용하여 자바스크립트 상단으로 이동하는 코드를 만들어 보겠습니다. 유튜브영상으로 2분 30초만에 코드를 완성하는 영상도 참고해보세요~
https://www.youtube.com/watch?v=OV_QRa7tgoc
1. ChatGPT 자바스크립트 코드 검색하기
구글검색을 통해 ChatGPT사이트로 이동합니다. ChatGPT에게 잘 물어봐야 시간이 단축됩니다. 같은 질문이라도 다시 질문하면 다른 코드를 알려줍니다. "자바스크립트 상단으로 올라가는 코드 알려줘" 라고 물어보았습니다. ChatGPT가 다음과 같이 코드를 알려줍니다. 엄청 똑똑한 비서, 자비스를 둔 느낌입니다.
코드를 다시 물어보았습니다. "더 간단하게 해줘" 라고 요청해 봅니다. ChatGPT가 또 응답해줍니다. 정말 짜릿한 순간입니다.
"활용하는 법을 알려줘"라고 물어봅니다. ChatGPT가 또 대답해주네요.
알지만 어떻게 대답하는지 궁금해서 물어봅니다. "요소 클릭시 scrollTop() 함수를 호출하는 방법을 알려줘"
정말 친절하게 알려줍니다. 교육의 혁명입니다. 자기주도학습이 되는 학생들은 이제 날개를 달게 되었습니다.
대단하지 않습니까? 유료 결제 해도 될 것 같습니다. 아니, 저는 필요하게 되었습니다. 나의 시간을 4분의 1로 줄여주는 느낌입니다.
2. 자바스크립트 코드 완성하기
비주얼스튜디오코드에서 html 문서를 생성하고 다음과 같이 코드를 완성합니다.
최종 코드는 코드는 아래와 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {height: 4000px;}
#scroll-to-top-button {position: fixed; bottom: 50px; right: 50px;}
</style>
</head>
<body>
<button id="scroll-to-top-button">click</button>
<script>
// 상단으로 올라가는 함수 정의
function scrollToTop() {
// 상단으로 스크롤
window.scrollTo({ top: 0, behavior: 'smooth' });
}
const button = document.querySelector('#scroll-to-top-button');
button.addEventListener('click', scrollToTop);
</script>
</body>
</html>
3. 브라우저에서 확인하기
브라우저에서 확인합니다. 클릭하면 상단으로 부드럽게 쓩 이동합니다. 혼자서 ChatGPT를 활용하면서 감탄에, 감탄을 했습니다. 정말 자바스크립트를 기본적으로 아는 사람은 활용도 및 시간이 엄청 효율성이 생기게 되었습니다. 안하면 손해입니다.
CES 2023에서도 주요 이슈가 인공지능이였다고 하지요? 정말 세상이 또 한번 큰 변화로 달려가고 있습니다. 아이들에게, 학생들에게 ChatGPT를 잘 활용하도록 가이드해야겠습니다.
'ChatGPT활용' 카테고리의 다른 글
| 자바스크립트 변수 ChatGPT에게 물어보다! (0) | 2023.03.06 |
|---|---|
| ChatGPT를 통한 자바스크립트 날짜 계산기 만드는 법 (0) | 2023.02.28 |
