반응형
HANA's JS
👉🏻버튼을 클릭해보세요!
자바스크립트는?
HTML, CSS 로 작성된 정적문서에 동적인 이벤트를 만들어주는 언어이다.
사용자가 버튼을 클릭하거나, 댓글을 작성하거나, 스크롤을 하거나, 특정 행동을 했을 때 반응하여 사용자와의 상호작용을 만들 수 있다.
[버튼 코드 참고]
<button onclick='document.querySelector("body").style.backgroundColor="white";
document.querySelector("body").style.color="black";'>day 🌞</button>
<button onclick='document.querySelector("body").style.backgroundColor="rgb(47, 52, 55)";
document.querySelector("body").style.color="white";'>nigth 🌛</button>위 코드에서 button tag의 속성인 onclick에 원하는 이벤트를 작성해서 동적인 페이지를 만들 수 있다.
[script 태그에 함수로 작성하기]
자주쓰는 기능은 함수로 빼놓으면 재사용 가능하다.
<head>
<script>
function dark_mode() {
document.querySelector("body").style.backgroundColor="rgb(47, 52, 55)";
document.querySelector("body").style.color="white";
}
function light_mode() {
document.querySelector("body").style.backgroundColor="white";
document.querySelector("body").style.color="black";
}
</script>
</head>
<body>
<button onclick=light_mode()>day 🌞</button>
<button onclick=dark_mode()>nigth 🌛</button>
</body>[기본 이벤트]
- 콘텐츠 변경: .innerHTML = "바꾸고싶은 문구";
- 링크 변경: .src ="바꿀링크";
- 스타일 변경: .style
JavaScript Introduction
JavaScript Introduction This page contains some examples of what JavaScript can do. JavaScript Can Change HTML Content One of many JavaScript HTML methods is getElementById(). The example below "finds" an HTML element (with id="demo"), and changes the elem
www.w3schools.com
반응형
'Today I Learned > 웹' 카테고리의 다른 글
| pycharm 가상서버 구동하기 (0) | 2023.05.31 |
|---|---|
| [javascript] 함수로 중복코드 제거하기 (0) | 2020.10.14 |
| VScode로 Git & Github 로 코드 버전 관리 시작하기 (0) | 2020.09.07 |
| 웹 클라이언트, 서버, 호스트 차이 쉽게 이해하기 (0) | 2020.09.05 |
| HTML / CSS 유용한 사이트 모음 (0) | 2020.09.04 |