[JavaScript] 자바스크립트 폼 전송하기

172_자바스크립트 폼 전송하기 [적용] 폼 전송 전 추가 작업을 처리하고 싶을 때 폼 전송 전 확인 작업을 하고 싶을 때 [문법] 이벤트 의미 submit 폼 전송 시 이벤트 [내용] 폼 요소의 submit 이벤트를 감시하여 폼 전송 전 추가 작업을 처리할 수 있다. 해당 이벤트로 폼 전송 전의 데이터를 가공하거나 데이터 전송 여부를 확인할 수 있다. 전송 취소 후 재입력을 요구하고 싶을 때는 event.preventDefault()를 사용해 이벤트를 해제한다. HTML index.html 텍스트를 입력해 주세요. 전송하기 JavaScript main.js // form 요소 참조 const formElement = document.querySelector('form'); // 전송 이벤트 감시 for..

2022.07.16

[JavaScript] 자바스크립트 풀다운(Pull-down) 메뉴 사용하기

171_자바스크립트 풀다운(Pull-down) 메뉴 사용하기 [적용] 시도별 행정 규역 입력 폼을 만들고 싶을 때 풀다운 메뉴를 동적으로 처리하고 싶을 때 [내용] 지역마다 부여된 행정 표준 코드의 일부를 가져와 풀다운 입력 폼을 만들어 보자. 스크립트로 select 요소 내 option 요소를 동적으로 생성한다. HTML index.html JavaScript main.js // 행정 표준 코드에 따른 지역별 코드 배열 const PREF_LIST = [ { value: 1, name: '서울' }, { value: 2, name: '세종' }, { value: 3, name: '부산' }, { value: 4, name: '대구' }, { value: 5, name: '인천' }, { value: 6..

2022.07.16

[JavaScript] 자바스크립트에서 색상 선택 정보변경 확인하기

170_자바스크립트에서 색상 선택 정보변경 확인하기 [적용] 컬러 피커 상태 변경 시 작업을 처리하고 싶을 때 [문법] 이벤트 의미 change input 요소 변경 시 이벤트 [내용] 컬러 피커 요소의 상태 변경은 change 이벤트로 감시할 수 있다. addEventListener()를 사용해 이벤트 핸들러를 설정한다. 이벤트 핸들러 내부 함수는 앞서 기술한 색상 선택 정보 읽어오기 방법을 사용한다. https://stonefree.tistory.com/356 [JavaScript] 자바스크립트에서 색상 선택 정보 읽어오기 169_자바스크립트에서 색상 선택 정보 읽어오기 [적용] 컬러 피커(Color Picker)의 선택된 색을 확인하고 싶을 때 컬러 피커의 선택된 색을 변경하고 싶을 때 [문법] 속..

2022.07.15

[JavaScript] 자바스크립트에서 색상 선택 정보 읽어오기

169_자바스크립트에서 색상 선택 정보 읽어오기 [적용] 컬러 피커(Color Picker)의 선택된 색을 확인하고 싶을 때 컬러 피커의 선택된 색을 변경하고 싶을 때 [문법] 속성 의미 타입 input요소.value 컬퍼 피커의 선택된 색 문자열 * input 요소는 [내용] input 요소의 type 속성을 color로 설정하면 컬러 피커(Color Picker) 폼이 표시된다. 컬러 피커 폼은 유저로부터 임의의 색상을 입력받는다. 자바스크립트는 value 속성으로 요소를 참조하여 데이터 값을 확인할 수 있으며, value 속서은 문자열(String) 이다. HTML index.html JavaScript main.js const element = document.querySelector('#myCo..

2022.07.15

[JavaScript] 자바스크립트에서 슬라이더 값 변경 확인하기

168_자바스크립트에서 슬러이더 값 변경 확인하기 [적용] 슬라이더 상태 변경 시 작업을 처리하고 싶을 때 [문법] 이벤트 의미 input input 요소 변경 시 이벤트 change input 요소 변경 시 이벤트 [내용] 폼 요소 값의 변경은 input, change 이벤트로 감시할 수 있다. addEventListener()를 사용해 이벤트 핸들러를 설정한다. input 이벤트는 슬라이더가 움직일 때마다 발생하지만, change 이벤트는 조작이 끝난 산태에서만 발생한다. 이벤트 핸들러 내부 함수는 앞서 기술한 슬라이더 값 읽어오기 방법을 사용한다. https://stonefree.tistory.com/354 [JavaScript] 자바스크립트에서 슬라이더 값 읽어 오기 167_자바스크립트에서 슬라이..

2022.07.15

[JavaScript] 자바스크립트에서 슬라이더 값 읽어 오기

167_자바스크립트에서 슬라이더 값 읽어 오기 [적용] 슬라이더의 값을 확인하고 싶을 때 슬라이더의 값을 변경하고 싶을 때 [문법] 속성 의미 타입 input요소.value 슬라이더의 현재 값 문자열 * input 요소는 [내용] input 요소의 type 속성을 range로 설정하면 슬라이더가 표시된다. 슬라이더는 최소값(min 속성)과 최대값(max 속성) 범위 내에서 값을 자유롭게 선택할 수 있다. 자바스크립트는 value 속성을 사용해 요소에 접근할 수 있으며, 타입은 숫자가 아닌 문자열이므로 주의하자. HTML index.html JavaScript main.js // input 요소 참조 const element = document.querySelector('#myRange'); // 현재 값..

2022.07.15

[JavaScript] 자바스크립트에서 드롭다운 메뉴값 변경 확인하기

166_자바스크립트에서 드롭다운 메뉴값 변경 확인하기 [적용] 드롭다운 메뉴 상태변경 시점에 작업을 처리하고 싶을 때 [문법] 이벤트 의미 change select 요소 변경 시 이벤트 [내용] select 박스 요소의 상태 변경은 change 이벤트로 감시할 수 있다. addEventListener()를 사용해 핸들러를 설정한다. 이벤트 핸들러 내부 함수는 앞서 기술한 드롭다운 메뉴값 일거오기 방법을 사용한다. https://stonefree.tistory.com/352 [JavaScript] 자바스크립트에서 드롭다운(Drop-down) 메뉴값 읽어오기 165_자바스크립트에서 드롭다운(Drop-down) 메뉴값 읽어오기 [적용] 드롭다운 메뉴의 선택된 항목을 확인하고 싶을 때 [문법] 속성 의미 타입 ..

2022.07.15

[JavaScript] 자바스크립트에서 드롭다운(Drop-down) 메뉴값 읽어오기

165_자바스크립트에서 드롭다운(Drop-down) 메뉴값 읽어오기 [적용] 드롭다운 메뉴의 선택된 항목을 확인하고 싶을 때 [문법] 속성 의미 타입 select요소.value 선택된 항목의 값 문자열 [내용] select 요소와 option 요소를 사용해 드롭다운 메뉴를 생성한다. 드롭다운 메뉴의 선택된 항목을 확인하기 위해서는 select 요소에 id 값을 할당하고 자바스크립트로 요소의 value 값을 확인한다. HTML index.html apple orange grape JavaScript main.js // select 요소 참조 const element = document.querySelect('#mySelect'); // 값 가져오기 const value = element.value; // ..

2022.07.15

[JavaScript] 자바스크립트에서 라디오 버튼 상태 변경 확인하기

164_자바스크립트에서 라디오 버튼 상태 변경 확인하기 [적용] 라디오 버튼 상태 변경 시 작업을 처리하고 싶을 때 [문법] 이벤트 의미 change form 요소 변경 시 이벤트 [내용] 라디오 버튼 상태의 변경은 change 이벤트로 감시할 수 있다. addEventListener()를 사용해 이벤트 핸들러를 설정한다. 이벤트 핸들러 내부 함수는 앞서 기술한 라디오 버튼 상태 읽어 오기 방법을 사용한다. https://stonefree.tistory.com/350 [JavaScript] 자바스크립트에서 라디오 버튼 상태 읽어오기 163_자바스크립트에서 라디오 버튼 상태 읽어오기 [적용] 라디오 버튼 상태를 확인하고 싶을 때 [문법] 속성 의미 타입 폼요소[키] 라디오 버튼 값 문자열 [내용] 라디오 ..

2022.07.14

[JavaScript] 자바스크립트에서 라디오 버튼 상태 읽어오기

163_자바스크립트에서 라디오 버튼 상태 읽어오기 [적용] 라디오 버튼 상태를 확인하고 싶을 때 [문법] 속성 의미 타입 폼요소[키] 라디오 버튼 값 문자열 [내용] 라디오 버튼은 여러 선택 항목 중 하나의 데이터를 선택하는 폼이다. 자바스크립트로 라디오 버튼을 다루는 것은 다른 폼 요소보다 조금 더 복잡하다. input 요소의 type 속성을 radio로 설정하고, name 속성으로 관련성을 설정한다. 다음은 form 요소에 포함된 라디오 버튼의 선택 값을 확인하는 예시이다. 과일과 음료의 그룹을 만들기 위해 name 속성에 각각 fruit와 drink라는 이름의 속성을 지정한다. HTML index.html Apple Orange Grape Coke Wine Tea 자바스크립트로 form 요소를 참조..

2022.07.14