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

162_자바스크립트에서 데이터 형식으로 파일 읽어오기 [적용] DataURL을 가져오고 싶을 때 [문법] 메소드 의미 반환 readAsDataURL(파일) DataURL*읽어 오기 없음 * MIME 타입 포맷을 가지는 데이터 문자열 [내용] FileReader 객체를 사용해서 input 요소로 선택한 파일 데이터에 접근할 수 있다. FileReader 객체의 readAsDataURL()를 사용해 파일을 DataURL 형식으로 읽을 수 있다. 비동기 형식이므로 addEventListener()를 사용해 읽기 작업 완료 이벤트인 load를 감시한다. load 이벤트 완료 후 데이터에 FileReader 객체의 result 속성으로 접근할 수 있다. HTML index.html JavaScript main.j..

161_자바스크립트에서 텍스트 형식으로 파일 읽어오기 [적용] 유저가 선택한 파일을 텍슽 형식으로 읽어오고 싶을 때 [문법] 메소드 의미 반환 readAsText(파일) 텍스트로 읽어 오기 없음 [내용] FileReader 객체를 사용해 input 요소로 선택한 파일 데이터에 접근할 수 있다. FileReader 객체의 readAsText()를 사용해 파일을 텍스트 형식으로 읽을 수 있다. 비동기 형식이므로 addEventListener()를 사용해 읽기 작업 완료 이벤트인 load를 감시한다. load 이벤트 완료 후 데이터에 FileReader 객체의 result 속성으로 접근할 수 있다. HTML index.html JavaScript main.js const element = document.qu..

160_자바스크립트에서 파일정보 읽어오기 [적용] 파일 선택 기능을 표시하고 싶을 때 [문법] 속성 의미 타입 input요소.files 선택된 파일 배열 배열 # input 요소는 [내용] input 요소의 type 속성을 file로 설정하면 파일 선택 폼이 표시된다. 파일 선택 폼을 사용하여 파일을 임의로 선택할 수 있다. 자바스크립트는 change 이벤트가 발생하면 event.target.files 속성을 참조하여 input 요소에 지정된 파일 리스트를 가져올 수 있다. multiple 속성을 지정하면 하나가 아닌 여러 파일의 작업도 가능하면, files 속성의 배열도 여러 개의 요소를 가진다. HTML index.html JavaScript main.js // input 참조 const elemen..

159_자바스크립트에서 체크박스 상태 변경 확인하기 [적용] 체크박스 변경 시 작업을 처리하고 싶을 때 [문법] 이벤트 의미 change input 요소 변경 시 이벤트 [내용] 체크박스 상태의 변경은 change 이벤트로 감시가 가능하다. addEventListener()를 사용해 이벤트 핸들러를 설정한다. 이벤트 핸들러 내부 함수는 다음의 링크에 있는 체크박스 상태 읽어오기 방법을 사용한다. https://stonefree.tistory.com/345 [JavaScript] 자바스크립트에서 체크박스 상태 읽어오기 158_자바스크립트에서 체크박스 상태 읽어오기 [적용] 체크박스 상태를 확인하고 싶을 때 체크박스 상태를 변경하고 싶을 때 [문법] 속성 의미 타입 input요소.checked 선택 상태 확..

158_자바스크립트에서 체크박스 상태 읽어오기 [적용] 체크박스 상태를 확인하고 싶을 때 체크박스 상태를 변경하고 싶을 때 [문법] 속성 의미 타입 input요소.checked 선택 상태 확인 진리값 [내용] input 요소의 type 속성을 checkbox로 설정하면 체크박스가 표시된다. 체크박스는 유저가 on/off 상태를 전환할 수 있다. 자바스크립트에서 checked 속성을 사용해 요소에 접근이 가능하다. checked 속성 타입은 Boolean이다. 다음은 체크박스 B(#cbB)에 checked 속성을 부여해 true를 확인하는 예시이다. HTML index.html 체크박스 A 체크박스 B 체크박스 C JavaScript main.js const cbA = document.querySelect..

157_자바스크립트에서 텍스트 영역 값 변경 확인하기 [적용] 텍스트 영역 변경 시 작업을 처리하고 싶을 때 [문법] 이벤트 의미 change 텍스트 영역 요소 변경 시 이벤트 input 텍스트 영역 요소 키 입력시 이벤트 [내용] 텍스트 영역 폼의 데이터 변경 여부는 change와 input 이벤트로 감시가 가능하다. addEventListener()를 사용해 이벤트 핸들러를 설정한다. 이벤트 핸들러 내부 함수는 앞서 기술한 텍스트 영역 값 읽어 오기 방법을 사용한다. input 이벤트는 키 입력 발생과 함께 발생하지만, change 이벤트는 일정 시간 지연 후 발생한다. HTML index.html JavaScript main.js // textarea 참조 const element = documen..

156_자바스크립트에서 텍스트 영역(Textarea)값 읽어오기 [적용] 텍스트 영역의 문자열을 확인하고 싶을 때 텍스트 영역의 문자열을 변환하고 싶을 때 [문법] 속성 의미 타입 텍스트영역요소.value 입력 폼의 문자열 문자열 [내용] textarea 요소는 여러 줄 입력이 가능한 텍스트 폼을 표시한다. 텍스트 영역은 줄바꿈을 포함해 자유로운 문자의 입력이 가능하다. 자바스크립트에서는 value 속성을 통해 요소에 접근할 수 있다. value 속성의 타입은 문자열(string)이다. HTML index.html 오늘의 날씨는 맑음 JavaScript main.js // textarea 참조 const element = document.querySelector('#myText'); // 데이터 값 가져..

154_자바스크립트에서 텍스트 박스 값 읽어 오기 input, text [적용] HTML 폼의 데이터 값을 가져오고 싶을 때 텍스트 입력 폼의 데이터를 변경하고 싶을 때 [문법] 속성 의미 타입 input요소.value 입력 폼의 문자열 문자열 * input 요소는 [내용] input 요소의 type 속성을 text로 설정하면 텍스트 입력 폼이 표시된다. 텍스트 입력 폼은 유저로부터 임의의 텍스트를 입력받는다. 자바스크립트는 value 속성으로 요소를 참조하여 데이터 값을 확인할 수 있으며, value 속성은 문자열(String)이다. HTML index.html JavaScript main.js const element = document.querySelector('#myText'); const val..

153_자바스크립트에서 스타일 확인하기 [적용] 요소에 적용한 스타일을 확인하고 싶을 때 [문법] 속성 의미 반환 getComputedStyle. 속성 스타일 값 가져오기 문자열 [내용] getComputedStyle()을 사용해 스타일 정보를 가져올 수 있다.각 스타일 설정에 따라 최종적으로 계산된 값을 가져온다. HTML index.html CSS style.css #box { width: 100px; height: 100px; } .red { background-color: #ff2bc2; } JavaScript main.js const box = document.querySelector('#box'); console.log(getComputedStyle(box).width); // width 값 ..