2023Web

📁웹프로그래밍 5주차 과제

웹프로그래밍 5주차 과제입니다.
이 README에는 특히 문제를 풀면서 어려웠던 점, 새로 알게 된 점 등을 기록하였습니다.

📖 문제

Chapter08. HTML DOM과 Document

• Open Challenge 08 - 갬블링 게임 웹 페이지 만들기
  

  ✏️ <li>태그의 onclick프로퍼티에 function gamble()을 대입함. gamble메소드는 호출한 객체를 랜덤한 숫자로 바꾸고, 게임의 승패를 판단함.

• 실습문제 01
  
  • (1)

  ✏️ HTML태그의 포함관계에 따라 DOM트리를 그림.

  • (2),(3)

  ✏️ document.getElementByTagName() 메소드를 통해 li태그를 제어하고, ol태그의 onclick 속성에 배경색을 바꾸는 메소드를 대입함.

• 실습문제 02
  
  • (1)

  ✏️ HTML태그의 포함관계에 따라 DOM트리를 그림.

  • (2),(3)

  ✏️ document.getElementByTagName() 메소드를 통해 얻은 배열의 length 프로퍼티를 활용함.

• 실습문제 03
  

  ✏️ 자바스크립트를 통해 span태그의 visibility 프로퍼티를 토글로 변경함.

• 실습문제 04
  

  ✏️ 태그 안 내용은 innerHTML 프로퍼티를 수정함.

• 실습문제 05
  

  ✏️ z-index를 순차적으로 설정해두고, 클릭할 때마다 해당 이미지의 z-index를 0으로 설정하고 다른 이미지의 z-index를 증가시킴으로써 번갈아가면서 나타나도록 함.

• 실습문제 06
  

  ✏️ prompt함수를 통해 받은 입력을 innerHTML에 대입함.

• 실습문제 07
  

  ✏️ "rotate(" + n + "deg)"의 형식을 이용함.

• 실습문제 08
  

  ✏️ 클릭마다 카운트를 더하고 transform 프로퍼티를 "scale("+count+",1)"의 형식을 이용함.

• 실습문제 09
  

  ✏️ document.createElement()를 통해 생성한 객체의 innerHTML을 설정해 ol의 자식 노드로 추가함.

• 실습문제 10
  

  ✏️ p태그로 innerHTML을 설정해 button의 sibling 노드가 되도록 추가함.
  function(){ this.parentElement.removeChild(this) }를 onclick에 추가함.

---

Chapter09. 이벤트 기초 및 활용

• Open Challenge 09 - 마우스 클릭 연습
  

  ✏️ <img src=''>를 innerHTML로 가지는 td객체를 10*10개 생성함. 현재 이미지가 있는 셀 위치를 저장한 select 변수를 활용함.

• 실습문제 01
  

  ✏️ blur와 focus 이벤트를 통해 body객체의 배경색을 제어함.

• 실습문제 02
  

  ✏️ radio 각각의 value에 이미지 URL을 할당해 두고, onclick 프로퍼티에 img.src = this.value를 수행하는 메소드를 연결함.

• 실습문제 03
  

  ✏️ e.key == "Enter" 와 같은 조건식을 활용함.

• 실습문제 04
  

  ✏️ window객체의 onmousemove 리스너를 활용함. clientX,clientY 속성을 이미지의 top, left에 대입함.

• 실습문제 05
  

  ✏️ window 객체의 dblclick 이벤트를 활용함.

• 실습문제 06
  

  ✏️ 마우스 이벤트 객체의 wheelDelta 속성을 활용함.

• 실습문제 07
  

  ✏️ textDecoration 프로퍼티를 변경함.

• 실습문제 08
  

  ✏️ e.target.tagName == "LI" 의 조건식을 활용함. 위 조건식이 거짓이면 모든 li 태그를 원래 크기로 출력함.

• 실습문제 9
  

  ✏️ position: absolute 와 display: inline-block 스타일 프로퍼티 활용. innerHTML을 이벤트 객체의 value로 구분해 각각 적절한 설명을 삽입함.

• 실습문제 10
  

  ✏️ 연산자와 피연산자를 누적시키는 input[type='text'] 태그를 계산식으로 활용함.
  숫자와 연산자는 누적시키고, Back, CE, C와 같은 특수한 버튼과 = 버튼을 각각 처리함.