22. 06. 24 - [ JS ] 실습 문제들 풀이

 

 

[ 실습 1 ] 

 

로그인 버튼 눌렀을 때 - id/pwd 4글자 이하면 알람 띄우기

 

 

 

 

 

 

---

 

 

## 풀이 체크

1. onclick 이벤트 적용해주기
2. 쿼리 셀럭터나 /겟 엘리먼트로 input태그나 속성들 가져오고 :
3. 필요한 속성값 얻어서
4. 문제 조건 적용해주기

 

 

 

 

---

 

## CheckPoint

• value값을 가지고 length 체크 한다.

 

 

 

 

---

 

 

 

 

[ 실습 2 ] 

 

2개의 숫자 입력받아서 계산 결과 출력하기

 

 

 

기본세팅

 

---

 

 

 

## 풀이 체크

1. onclick 이벤트 적용해주기
2. 숫자 2개 가져오기
3. 가져온 숫자 연산하기
4. 결과창에 보여주기

 

 

 

 

---

 

## CheckPoint 

 

쿼리셀렉터 부분

• input 태그 중에서도 name이 num1인거 가져오는 방법
• 이거의 value가져오는 방법

숫자 연산 부분 

• JS는 모든 것이 문자열로 기본 처리된다.
• parseInt()로 형변환 후 연산 하기

결과창 보여주기

• 가져온 요소에 대입이 아니라 [요소의.value]에 연산 결과 대입

 

 

 

 

 

---

 

 

 

 

 

[ 실습 3 ] 

 

주문할 상품 개수 입력받아서 계산하기

 

 

 

 

 

---

 

 

## 풀이 체크

1. onclick 이벤트 적용해주기
2. input태그 배열로 가져오기
3. 가져온 input태그들의 value를 이용
4. 연산한 결과를 input.value에 보여주기

 

 

 

 

---

 

## CheckPoint 

 

쿼리셀렉터All 부분

• - 쿼리셀렉터All은 조건에 맞는 요소 모두 가져와서 배열 형태로 반환

가져온 input태그 선택방법

• - 순서대로 배열로 존재함으로 인덱스로 객체 선택후 .value로 속성 선택 

결과창 보여주기

• - 형 변환 후 연산 - 배열 인덱스2.value 값에 연산 결과 대입

 

 

 

 

 

---

 

 

 

 

 

 

[ 실습 4 ] 

 

충전할 변풍선 개수 선택하기 - 선택할때마다 더해짐

 

 

 

 

 

---

 

 

 

## 풀이 체크

 

1. 1개 / 10개 / 100개 버튼에 -- 'onclick' 이벤트 적용해주기

2. 결과 입력해줄 input태그 가져오기

3. 'onclick' 이벤트 발생시 실행될 함수 작성해주기

• 3-1 결과창에있는 값 가져와서 저장해주고
• 3-2 거기에 버튼클릭으로 넘어온 인자 값 더해주기

4. 지우기 버튼에 -- 'onclick' 이벤트 + 함수 적용 

 

 

 

 

 

---

 

 

## CheckPoint 

 

버튼 온클릭 부분

• 하나 하나 다른 함수를 출력하도록 만들어주는거대신 전달하는 인자값을 다르게 세팅

결과표시되는 inputTag부분

• 인풋태그의.value를 즉. 값을 가져와서 값을-current에 대입하는 것임 

버튼 클릭으로 넘어온 인자 값 더해주는 부분

• current변수는 어떤 값이 문자열로 저장되어있다.
• 형변환해준 뒤 연산
• 그냥 연산하면 문자열+숫자가 되어서 결과가 문자열로 나옴 - 100101100 이런식으로 더해진다.

지우기 부분

• [ 인풋태그의 .value] 를 0으로 세팅 ( 인풋태그를 0으로 세팅 X )

 

 

 

 

 

---

 

 

 

 

 

[ 실습 5 ] 

 

숫자 입력 창 만들어보기

 

 

 

기본세팅 

스타일 적용 및 body 부분

 

 

 

 

 

---

 

 

 

## 풀이 체크

 

1. <div>애들 전부 배열로 가져오기

2. 가져온 <div>배열 요소 하나하나 가져와서 이벤트 발생했나 체크해줄 것이다.

3. i번째 <div>에서  'click' 이벤트 발생하면 감지해서 - 함수 실행해주도록 해주기

4. 'click'이벤트 감지된 div의 textContent가 무엇인지 가져오기

5. 가져온 textContent에 맞춰서 if문 작업해주기

• 5-1  텍스트 콘텐츠가 'ok'면 저장해주기
• 5-2 '<'면 결과창에서 한 글자 지워주기 
• 5-3 숫자면 결과창에 더해주기

 

 

#+@ Tip

• <div>&lt;</div>  입력하면
• 무엇보다 작다 [  <  ] 표시 나옴

 

 

 

 

---

 

## CheckPoint 

 

이벤트 발생했는지 체크하는 부분

• 요소.addEventListener('이벤트', 함수)  뒤에 이어서 설명

작업할 텍스트 선택 부분

• a 파라미터에 이벤트가 전달되는데, 이 이벤트를 출력해보고 그 안에서 내가 원하는 속성값을 찾아서 사용하기.  

 

if작업에서 한글자 지우기 부분

1.  등호(=)를 기준으로 L-Value와 R-Value의 차이를 알아야한다. [ LV = RV ]
2. 먼저 str이라는 새로운 변수에 --> 현재 (#result>input)에 있는 value값!(값값값) 을 저장해준 뒤 - RV로 사용(값)
3. (#result>input)의 .value 공간에(공간공간공간) --> substring() 함수사용! - 0부터 str.length-1 애들의 값(값값값)을 넣어준다. - LV로 사용(공간)

 

 

 

 

---