개발이 좋아서/JavaScript가 좋아서
js - 구조 분해 할당
구조 분해 할당 배열과 객체의 값을 분해해서 변수에 할당해줌 배열의 값을 복사한 후 변수에 할당해줌으로 배열이 수정 또는 파괴되지 않습니다. let fruits = ["사과","수박","오렌지","딸기"]; let fruit1 = fruits[0]; let fruit2 = fruits[1]; let fruit3 = fruits[2]; let fruit4 = fruits[3]; 1) 기본 구문 let [변수명, 변수명, ...] = 배열변수 ex) let [fruit1, fruit2, fruit3, fruit4] = fruits; 2) 쉼표를 사용하여 요소 무시하기 let fruits = ["사과","수박","오렌지","딸기"]; let [fruit1, , fruit2] = fruits; 3) 변수의 값을..
js - 클래스
클래스 - es6 - 오브젝트 user1 = { name: 'green', age: '32', isjob: true, } user2 = { name: 'green', age: '32', isjob: true, } user3 = { name: 'green', age: '32', isjob: true, } ...... - 생성자함수 function User(name, age, isjob){ this.name = name; this.age = age; this.isjob = isjob; } let user1 = new User('green',32,true); let user2 = new User('green',32,true); let user3 = new User('green',32,true); - 클래스 c..
js - Date 객체
날짜를 저장할 수 있고, 날짜와 관련된 메소드를 제공해주는 내장객체 1) 객체 생성하기 new Date()를 호출하면 새로운 Date객체가 만들어집니다. new Date() 현재날짜와 시간을 가진 객체 new Date(년도, 월, 일, 시, 분, 초, 밀리초) -> 년도와 월은 필수 입력값, 월은 0~11 입력(0이 1월입니다.) new Date(밀리초) 기준 1970년 1월 1일 0시 0분 0초 데이터 객체를 생성할 때 파라미터를 1개만 지정하면 이 값은 밀리초로 해석됩니다. 1000 1970년 1월 1일 0시 0분 1초인 것을 볼 수 있습니다. 2) 날짜 구성요소 받기 getFullYear() 년도(네 자릿수)를 반환합니다. getMonth() 월을 반환합니다.(0~11) getDate() 날짜를 반..
js - 새로운 데이터 타입
새로운 데이터 타입 기본형 number String null undefined boolean Symbol타입 객체의 프로퍼티 키를 고유하게 설정함의로써 프로퍼티 키의 충돌을 방지하기 위해 사용 1) 생성법 - Symbol함수를 호출함으로써 생성함 ex) let sym1 = Symbol('설명문') let obj = { name: "green", age: 30, } 2) 객체의 키로 사용 let obj = { name: "green" , age: 20, } let id = Symbol('id'); obj[id] = 123; 3) 객체의 숨김 프로퍼티 Object.keys(obj) 객체의 프로퍼티의 키를 배열로 반환 Object.values(obj) 객체의 프로퍼티의 값을 배열로 반환 Object.entri..
js - 정규표현식
정규표현식 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다. -정규표현식 연습 사이트 https://regexr.com/5mhou RegExr: Learn, Build, & Test RegEx RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp). regexr.com 1. 그룹과 범위 | 또는 () 그룹 [] 문자셋 [^] 부정문자셋 - []안에 문자가 아닐때 2. 수량 ? 없거나 있거나 * 없거나 있거나 많거나 + 하나 또는 많이 {n} n번 반복 {min,} 최소수량 {min, max} 최소, 그리고 최대 3. 범위 ^ 문장의 시작 $ 문장의 끝 \b 단어 경계 \B 단어 경계가 아닐 때 4. 텍스트..
js - 폼태그
폼과 폼 조작하기 1. 폼과 요소 탐색하기 폼은 특수한 컬렉션인 document.forms의 구성원입니다. 1) 폼의 name값으로 접근 : document.forms.폼이름 ex) document.forms.myForm 2) 폼의 순서로 접근 : document.forms[0] -> 문서 내의 첫번째 폼 3) 폼의 요소에 접근 form.elements.요소name값 ex) form.elements.userId 짧은 표기법 form.name 4) focus지정하기 -autofocus 속성추가 -node.focus() 메소드 폼이벤트 input : input태그에 값을 적을 때 change : 폼요소의 값이 변경될 때 focus : 커서가 선택되었을 때 blur : 커서가 떠났을 때
js - scroll
scroll scrollTop 스크롤한 값 window.scrollTo({ rop: 100px }) 스크롤 100px의 위치로 이동
js - DOM
DOM 문서 객체 모델 웹브라우저에서 사용하려고 만든 언어 -> 현재는 다양한 사용처와 플랫폼을 지원함 window 호스트 환경 1) DOM(Document Object Model) 웹페이지내의 모든 콘텐츠를 객체로 나타내줌 2) BOM(Browser Object Model) 문서이외에 다른 것을 제어하기 위해 브라우저가 제공하는 추가 객체를 나타내줌 3) Javascript DOM 접근 -> document.documentElement -> document.body -> document.head -자식노드 탐색하기 childNodes - 자식노드 탐색 children - 자식요소노드 탐색 firstChild - 자식노드중 첫번째 자식노드 lastChild - 자식노드중 마지막 자식노드 firstElem..
js - API
UI userinterface API application programming interface 문자열 배열 객체 수학 Math.random() Math.floor() Math.ceil() Math.round() Math.min() Math.max() Math.abs()