22/04/26 수업정리

 

▶ 점수를 입력하는 버튼, 총점확인 버튼, 평균 확인 버튼 을 만들어서 버튼을 누르면

    각각 입력된 점수, 총점, 평균 텍스트출력 해보기

 

 

▶ 점수입력 함수 작성

 

 

1. script 상단에 점수를 담기위한 배열선언하기
2. 입력 버튼을 눌렀을 때 작동한 함수 inScore(){} 작성
3. 우선 점수입력받는 태그( <input type="text" id = "score" placeholder="점수입력(숫자)"> )를 obj 변수에 저장한다.
4. 점수를 입력받으면 그 값을 score 변수에 저장한다. Number(obj.value)<-- input태그에 입력된 값(value)를 숫자타입변환한다.
5. 옵션으로 숫자가아닌 값이 입력되었거나 입력이 안되었을 때  점수를 입력해달라는데 메시지를 띄우고, 값이 제대로 입력됐다면 push로 배열에 입력된 값을 저장해준다. 그리고 innerText로 HTML 문서에 출력해준다.
6. if문이 종료되면 입력창에 입력했던 값을 빈 값(공백) 으로 바꾸고 입력창을 focus 한다.

 

▶ 총합구하기

자바와 같다. 

총합을 담을 변수 sumSul에 0값을 저장해주고 for문으로 배열의 값을 전부 더해서 sumSul에 저장 출력한다.

▶ 평균구하기

자바와 같다.

조건문으로 배열에 저장된 값이 있을 때(인덱스가 있을 때)만 진행 .

총합을 구해주고 총합에 배열의 길이를 나워서

변수에 담아준다. 그리고 출력( .tofixed(2) 로 소숫점 2자리까지만 출력되도록 한다.)

 

▶ 변수 

• let  :자바와 같다. 선언된 블록내부에서만 사용가능
• var  : 함수레벨. 선언된 함수내부에서만 사용가능하다. script상단에 선언하면  script 전체 사용가능.

 

 

※ 변수에 태그를 저장할때 속성을 포함해서 저장할 수 있다.

※ 속성까지 저장해버리면 나중에 그 태그의 다른 속성을 사용할 때마다 코드를 다 적어줘야하는 불편함이 있어서

아래 그림처럼 태그부분만 저장해서 사용하는편이다.

 

▶ 아래 그림처럼 태그안에 속성이 많아졌을 때 간단하게 사용할 수 있다.

(태그를 변수선언해 놓고 그 태그의 속성이 필요할 때 마다  그 변수에 .속성 을 붙여주면 바로 사용할수 있다.)

 

---

▶ Clsss 속성 ( add,  remove, toggle )

script 를 활용하기 위한  css스타일과 body 태그

add, remove, toggle  속성

.contains  :  클래스 값이 들어있는지 확인

.add        :  클래스를 추가 

.remove   :  클래스를 제거 

.toggle    :  클래스가 있으면 제거, 클래스가 없으면 추가

---

 

jQuery 와 script 비교 

 

jquery속성 여러개 지정하기

선택자는 CSS 사용할때와 같으며, 여러개 지정할 때는 콤마( , ) 로 구분해준다.

 

▶ 정확한 출력을 위한  jQuery 기본문법