분류 전체보기 441

[JS] event_input 데이터 받기

event_input 데이터 받기 : form 태그를 통해 데이터 받기 input, textarea, select, html, element의 속성으로 받아오기 form태그의 데이터는 value 속성으로 값이 매핑되어 있음 = value 속성을 호출 select option, radio, checkbox value는 선택된 값을 가져와야함 = 속성에 value 값을 추가하는 작업이 필요 value 속성의 데이터는 모두 string 처리됨. 사용예시 전송 버튼을 누르면, 입력 값이 h3의 info 부분에 하나씩 출력 리스트로 출력 버튼을 누르면, 입력 값이 ol의 li에 추가되어 출력

HTML.CSS.JS/JS 2023.04.12

[JS] event 객체

event 객체 : 전역객체, 모든 태그에 객체 참조가 가능 a태그와 butto태그에 주로 참조시켜 => 클릭에 대한 반응을 기대할 수 있도록 만드는 구조가 일반적 a태그 : href 속성에 의해 자체 이동이 구현되어 있음 = 이동을 막는 코드 필요 button태그 : 자주 사용 부여하는 방법 : 각자 목적과 작동방식이 다름 화면 출력영역 : document 영역 (객체) 태그 = html element / 속성 = attribute / 텍스트 = textNode 출력하는 방법 1. html 태그로 출력 : innerHTML이라는 property 사용 2. text로 출력 : innerTEXT라는 property 사용 객체의 값을 가져오는 경우 id의 값 : getElementById('id명') cla..

HTML.CSS.JS/JS 2023.04.12

[JS] Object 생성하고 출력해보기

// 객체 생성 : 좋아하는 뮤지션(가수)의 플레이 리스트 3곡 // 이름, 나이, 플레이리스트(객체로), 함수(플레이리스트의 곡3개 출력함수) const singer = { name : '헤이즈', age : 31, playlist : { list1 : '널 너무 모르고', list2 : '저 별', list3 : '첫눈에' }, into : function(){ console.log(`${singer.name}의 노래 : 1.${singer.playlist.list1}, 2.${singer.playlist.list2}, 3.${singer.playlist.list3}`); return `노래: ${this.playlist.list1}, ${this.playlist.list2}, ${this.playl..

HTML.CSS.JS/JS 2023.04.12

[JS] Object 객체

Object 객체 : 식별할 수 있는 것을 상세 특징으로 표현하려한 형식 (코드 타입) const 상수로 선언하는 것이 일반적 객체의 지속성을 유지하고 확보하기 위함 기본형 { 속성명 : 속성값, 속성명2 : 속성값2 ... } 으로 표현 예) 속성명 : 객체 내에서 중복되면 안됨 (고유 키) 객체 내부의 속성 값으로 사용할 수 있는 데이터 타입은 제한이 없음 객체의 속성값으로 익명함수를 정의하면 그 함수 = 메서드 (메서드명은 속성명) const car=100; 으로 재할당이 불가능! (car의 지속성을 확보하기 위해) 사용예

HTML.CSS.JS/JS 2023.04.12

[JS] 함수 파라미터(매개변수) 받아 사용하기

함수의 파라미터(매개변수) : 함수의 파라미터(매개변수) 는 변수명을 지정해서 함수 영역 내부에 전달하는 역할을 함 특징 파라미터의 개수는 제한이 없으나 많으면 관리가 힘듬 파라미터 타입은 제한은 없지만, 전달된 타입을 그대로 받아 사용 파라미터로 전달되는 값의 순서, 개수, 유무 확인해 작성 파라미터의 변수명을 지정할 때, 외부의 변수명과 중복되어도 영향을 받지 않음 가급적으로 중복되지 않은 이름을 쓰는 것을 가독성을 위해 권장 사용 예시 1. 외부변수 / 내부변수 / 받은 변수로 출력하기 함수 파라미터 2. 파라미터로 이름과 취미 받아서 => 콘솔에 출력하기 3. 함수안에 함수 사용하기

HTML.CSS.JS/JS 2023.04.12