12.22 국비학원 56일차 (자바스크립트 함수 사용, DOM, document.forms)

자바스크립트 제어문

if, switch, for, while, break, continue 등. 사용방법은 자바에서와 거의 같다.

추가 내용으로는 반복문 for 중 배열에서 사용 가능한 for of 이 있다.

이외에 객체object 에서 사용 가능한 for in 도 있다.

각 key 값과 value 값 콘솔창에 보여줌

 

자바스크립트 함수 사용 예시

+ html 파일에서 자바스크립트를 사용할 때 항상 script 파일을 불러와야 한다. 위치는 때에 따라 head or body 부분에 작성

기본 함수 형식 ┐

function 함수명(매개변수) {

         실행코드;

         return 값;

}

html

js 파일

이런식으로 브라우저에 생성한 버튼을 클릭하면 result1 출력됨

+ 익명함수, 화살표함수 추가 내용

   : 보통 익명함수와 화살표함수는 함수의 재사용이 필요하지 않고 간단히 당장 필요한 경우 주로 사용한다.

익명함수

화살표함수

DOM(Document Object Model)

여기서 document 는 html 문서를 가리킨다.

- document.getElementById : id 속성의 값을 사용하여 하나의 엘리먼트를 가져오기 위한 메서드

- document.getElementsByName : name 속성의 값을 사용하여 여러 엘리먼트를 가져오기 위한 메서드

- document.getElementsByTagName : 태그명을 사용하여 여러 엘리먼트를 가져오기 위한 메서드

- document.getElementsByClassName : class 속성의 값을 사용하여 여러 엘리먼트를 가져오기 위한 메서드

- document.querySelector : CSS 에서 사용하는 선택자를 이용하여 하나의 엘리먼트를 가져오기 위한 메서드

- document.querySelectorAll : CSS 에서 사용하는 선택자를 이용하여 여러 엘리먼트를 가져오기 위한 메서드

document.getElementsByClassName 활용

html 에 대/소문자로 변경하는 버튼 추가

버튼 누르면 실행될 함수. 주석처리 부분은 toUpperLower 함수를 따로 생성하지 않았을 때의 방식이다.

 

자바스크립트 폼(form)

폼 태그 안에서는 간단하게 속성값으로 데이터를 불러올 수 있다.

document.forms; → html 문서 상의 모든 form 불러오기. documenut.forms[0] 으로 하나의 폼 선택하여 변수에 저장한 후, 속성값,value 를 활용 할 수 있다.

값을 불러오는 것만 아니라 할당도 가능

이를 이용해 체크된 항목 찾는 반복문 쓸 수 있다.

radio 속성의 경우는 value 값으로 찾으면 됨