<body>
<div id="item">
<img src="images/flower1.jpg" alt="">
<button class="over" id="open" onclick="showDetail()">상세 설명 보기</button> <!--onclick="" 추가 : 이렇게 하면 파일이 많아질 경우 유지보수가 힘들어진다. 나중에 문서객체모델을 배우면 이 방법을 사용하지 않고 이벤트를 적용할 수 있다.-->
<div id="desc" class="detail">
<h4>민들레</h4>
<p>어디서나 매우 흔하게 보이는 잡초로서 바닥에 딱 붙어서 꽃봉오리 하나가 쏙 올라온다. 톱니 모양의 잎새와 눈에 확 띄는 노란 꽃이 인상적이다. 특히 꽃이 지고나면 솜털모양의 깃을 가진 씨앗들이 나오는데 바람을 타고 날아가서 널리 퍼진다.</p>
<button id="close" onclick="hideDetail()">상세 설명 닫기</button>
</div>
</div>
<script>
function showDetail(){
document.querySelector('#desc').style.display = "block"; // css상에 특별한 효과를 넣기 위해서 태그, 클래스, 아이디를 선택하듯 사용?
document.querySelector('#open').style.display = "none"; // 상세설명 보기
}
function hideDetail(){
document.querySelector('#desc').style.display = "none"; // css상의 특별한 효과를 넣기 위해서 태그, 클래스, 아이디를 선택하듯 사용(querySelector)
document.querySelector('#open').style.display = "block";
}
</script>
</body>
<body>
<div id="item">
<img src="images/flower1.jpg" alt="" id="cover">
</div>
<script src="./js/03.event-dom.js"></script> <!-- 스크립트 파일 연결 -->
</body>
// html에 onclick을 연결하지 않아도 적용이 된다.
var coverImage = document.querySelector("#cover"); // 어디에 적용할건지 명시
coverImage.onclick = function(){alert('눌렀습니다.')}
// 다른 이벤트를 적용해보자
coverImage.onmouseover = function(){coverImage.style.border = "5px solid black";}
coverImage.onmouseout = function(){coverImage.style.border = "";}
<script>
// 프로토타입 사용법
console.log(Date())
var now = new Date() // now 변수에 저장 = Date 객체의 인스턴스를 만든다
console.log(now.toLocaleString()) // Date 객체의 메서드를 추가(toLocaleString())
</script>
프로토타입, 리터럴, 객체 등의 새로 접한 개념들이 정리가 잘 안된다.
수업에서는 각각의 개념을 꼼꼼히 짚고 넘어가기보다 이러한 용어가 있고 이런식으로 사용이된다와 같이 가볍게 진행되는 느낌이라 헷갈리거나 부족한 부분은 다른 무료강의나 책을 통해서 다시한번 개념을 정리하는 시간을 가져보려고 한다.