[JS] 클래스 (ES6)
·
Stack/JavaScript
오브젝트 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('blue', 19, false; let user3 = new User('red', 50, true); class 클래스명 { // 생성자 cons..
[JS] HTML 커스텀 속성
·
Stack/JavaScript
50일 100일 오늘은 커스텀 속성을 지정하면 button.dataset 만들어짐 button.dataset { key: date. value: 50, } ex> -> dataset = { color: "red", size: "big", } -> div.dataset.color -> div.dataset.size data-로 시작하는 속성을 정의 -> 자바스크립트에서는 dataset이라는 객체로 만듦 dataset.html 버튼
[JS] 새로운 데이터 타입
·
Stack/JavaScript
기본형 number String null undefined boolean Symbol Symbol타입 - 객체의 프로퍼티 키를 고유하게 설정함으로써 프로퍼티 키의 충돌을 방지하기 위해 사용 1) 생성법 - Symbol 함수를 호출함으로써 생성함 ex> let syn1 = 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.entries..
[JS] 정규표현식
·
Stack/JavaScript
https://regexr.com/5mhou RegExr: Learn, Build, & Test RegEx RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp). regexr.com 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다. /패턴/gm 1. 그룹과 범위 | 또는 () 그룹 [] 문자셋 [^] 부정문자셋 - [] 안에 문자가 아닐 때 2. 수량 ? 없거나 있거나 ex> gra?y a가 있거나 없는 것을 선택 * 없거나 있거나 많거나 + 하나 또는 많이 {n} n번 반복 {min,} 최소수량 {min, max} 최소, 그리고 최대 3. 텍스트 \ 특수문자가 아닌 문자 . 어떤 글자 \d 숫자 \D ..
[JS] Daum 우편번호 서비스 API 활용
·
Stack/JavaScript
https://postcode.map.daum.net/guide Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.net kakaomap.html 주소찾기 ​ Form_API_ex.html 회원 기본 정보 아이디 비밀번호 비밀번호 확인 메일주소 예) id@domain.com 이름 개인 신상 정보 주민등록번호 - 주소 우편번호 찾기 생일 년 월 일 선호 장르 선택 컴퓨터 인터넷 여행 영화감상 음악감상 자기소개 회원가입 다시 입력
[JS] Form태그
·
Stack/JavaScript
input, select, textarea 폼과 폼 조작하기 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 지정하기 - autofocums 속성 추가 - node.focus() 메서드 폼 이벤트 input: input태그에 값을 적을 때 change: 폼 요소의 값이 변경될 때 focus: 커서가 선택되었을 때 blu..
[JS] keyup / keydown
·
Stack/JavaScript
keyEvent2.html keyEvent_ex.html 1 2 3 todolist_t.html (Enter / Delete 기능 추가 버전) to do list add_circle todoScript.js (Enter / Delete 기능 추가 버전) // 변수 선언 btn input ul let btn = document.querySelector('#insertBtn'); let input = document.querySelector('#todoInput'); let ul = document.querySelector('#listUl'); btn.addEventListener('click', addList) input.addEventListener('keydown',function(e){ console..
[JS] 쪽지시험 끄적끄적
·
Stack/JavaScript
기본 타입: number, string, boolean, null, undefined // 배열[]은 기본타입 아님 (object) 함수 내에 지역변수 없으면 전역변수가 들어감 var, let, const 아무것도 키워드를 쓰지 않고 선언한 변수는 전역변수가 된다. const로 선언한 변수는 재할당 / 재선언 둘다 불가능 (var만 재선언 가능) let a; let b = null; console.log(a == b); console.log(a === b); -> true, false let v1 = "8"; let v2 = "6"; console.log(v1 + v2); // 86 console.log(v1 - v2); // 2 console.log(v1 * v2); // 48 console.log(N..
[JS] Scroll
·
Stack/JavaScript
scrollTop 스크롤한 값 window.scrollTo({ top: 100px }) 스크롤 100px의 위치로 이동 scrollTop.html menu1 menu2 menu3 box01 box02 box03 scroll_ex.html 0 box1 box2 box3 box4 box5 football_t / index.html Home Info About Community Contact Player 1 Player 2 Player 3 Player 4 Player 5 Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum Lorem Ipsum is simply dummy text of ..
[JS] 타자게임
·
Stack/JavaScript
타자게임 display 남은시간: 0초 점수: 0점 게임시작