20220615 개발일지

학습한 내용

둘 이상의 배열을 연결하는 concat()

먼저 선언된 배열에 뒤에 선언된 배열이 연결된다.
기존 배열에는 영향을 주지 않는 함수

원소들을 연결해주는 join()

그냥 num을 호출하면 [] 괄호안에 있는 배열로 보여주는데 join()을 쓰면 원소들을 그냥 연결해준다. 함수안에 기호를 넣으면 특정 기호로 연결되어 표시한다.

배열 마지막에 요소추가하는 push()

배열 맨 앞에 추가하는 unshift()

배열 마지막의 요소 추출 pop()

배열 맨 앞의 요소 추출 shift()

배열에서 요소를 추출하면 해당 요소가 배열에서 빠지면서 배열이 수정되기 때문에 배열에서 요소를 삭제할 때 사용

push()를 사용하여 배열의 맨 뒤에 총 합을 더하는 반복문을 사용하여 30을 붙여주었다.

배열중 랜덤으로 5번째의 요소가 나왔다.
Math.random()에서 요소가 10가지이니 10을 해도 되지만 만약 하나의 요소라도 없어진다면, 비어진 숫자는 undefined 라고 나온다. 그래서 quotes.length로 해주는게 깔끔하다.

너무 어려웠다 ㅜㅜ
아직도 제대로 이해는 안되지만 강사님 따라서 만들고나니 너무 흥미롭고 재미있는 코드
(https://software.hixie.ch/utilities/js/live-dom-viewer/)
위 사이트를 통해 구조를 알아 볼 수 있다.


getAttribute()는 가져오는 것
setAttribute()는 변경하는 것
querySelector() id처럼 하나만 있는 것 호출
querySelectorAll() 여러개 있는 것 호출

[출처] Do it! 자바스크립트 입문

id를 이용해서 작은 사진을 클릭하면 큰 사진으로 바뀌게 자바스크립트 코드를 만들었다. addEventListener()를 통해서 이벤트와 함수를 지정해줬다.

같은 코드에서 코드를 더 추가해서 상세설명보기, 닫기를 설정했다. display를 block, none으로 설정하고 view.innerHTML의 글씨도 변경해주고, isOpen이라는 변수를 만들어서 true, false로 바꿔주고, 또 반대로 실행할 수 있게 설정해줬다.