분류 전체보기

자바스크립트 - call, apply, bind

call, apply, bind 객체 밖에 선언된 함수가 특정 객체의 프로퍼티를 다룰때 사용된다. 객체 밖에 선언되어 있으니 함수 내의 this가 무엇인지를 알 수 없는 상태인데 call/apply/bind 함수를 사용하여 this가 누군지 명시적으로 알려줄 수 있다. call 인수를 개별적으로 받는다. const user1={ name:"sponge", }; const user2={ name:"bob", }; function showInfo(){ console.log(this.name); } showInfo.call(user1); → this에 user1 객체 들어감 showInfo.call(user2); → this에 user2 객체 들어감 function changeInfo(age, gender){..

자바스크립트 - setTimeout, setInterval

setTimeout, setInterval setTimeout 일정 시간이 지난 후 함수 실행 setTimeout(함수, 시간ms) setTimeout(함수, 1000) 1초 후 함수실행 setTimeout(함수, 시간ms, 인수) setTimeout(함수, 1000, 'abc') 1초 후 함수에 'abc'를 인수로 넘기고 실행 const tID = setTimeout(함수, 시간ms, 인수) tID를 반환함. clearTimeout(tID); tID를 이용하여 스케줄링 취소 setInterval 일정 시간 대기하며 계속 함수 반복 실행 setInterval(함수, 시간ms) setInterval(함수, 1000) 1초 후 함수실행 setInterval(함수, 시간ms, 인수) setInterval(함수..

자바스크립트 - 클로저 (closure)

클로저 (closure) 클로저는 함수와 Lexcial 환경의 조합이다. 함수가 생성될 때의 외부 변수를 기억하는 것이다. 생성 후에도 그 변수에 접근 가능하다. 자바스크립트는 변수에 함수를 담을 수 있다는 것을 알 것이다. const x = sub(5); 그런데 그 함수의 반환값이 익명함수라면? x라는 변수에 익명함수가 저장되며, 인수로 넘긴 5는 sub 함수의 내부 Lexical 환경에 등록된다. (a=5) x함수를 호출했을 경우 x함수 안에 a란 변수는 없으므로 sub 함수의 내부 Lexical 환경에서 참조해온다. function sub(a){ → 5)a=5를 가져옴 return function(b){ → 3)b=10으로 인자를 받음 return a-b; → 4)a가 없으니 상위 함수에서 참조해옴..

자바스크립트 - 진수 변환, Math 라이브러리

변환 toString() 숫자를 문자열로 변환한다. (진수 변환 가능) let a = 10; a.toString(); 10 → "10" a.toString(2); 10 → "1010" a.toString(255); 16 → "ff" parseInt() 숫자+문자열 형태를 숫자만 뽑아서 반환 (진수 변환 가능) let b = "100cm"; parseInt(b); 100 Number(b); NaN let c = "f1"; parseInt(c); NaN parseInt(c, 2); 2진수로 변환 parseInt(c, 16); 16진수로 변환 parseFloat() 숫자+문자열 형태를 (소수점 포함한) 숫자만 뽑아서 반환 (진수 변환 가능) let b = "100.5cm"; parseFloat(b); 100...

자바스크립트 - 심볼

심볼 (Symbol) 유일성을 보장하는 식별자 원본 객체 건드리지 않고 새 프로퍼티/메소드 추가해야하는 경우에 사용할 수 있다. const a = Symbol(); const b = Symbol('bob'); 설명 붙여주기 b.description; 심볼 id값 가져오기 const user = { name : "bob", age : 10, [id] : 'id' 심볼로 만든 키를 가진 프로퍼티 } Object.keys(user); ['name','age'] 심볼은 보이지 않는다. Object.getOwnPropertySymbols(user); 심볼만 보여준다. Relfect.ownKeys(user); 심볼 포함하여 모든 키 보여준다. 전역 심볼 Symbol.for() 전역 심볼 : 반드시 하나의 심볼만 보..

자바스크립트 - 배열

배열 (Array) 배열에는 숫자, 문자열, 객체, 함수 모두 포함가능함. 자바스크립트에서 배열은 객체로 인식된다. let stduents = ['짱구','철수','훈이','맹구','유리']; # 접근 방법 stduents[0]; (짱구) stduents[1]; (철수) stduents[2]; (훈이) stduents[3]; (맹구) stduents[4]; (유리) # 수정 방법 stduents[0] = "액션가면" stduents[1] = "흰둥이" # 추가 방법 stduents.push('값') # 배열 맨끝에 값 추가 stduents.push('값1','값2') # 배열 맨끝에 여러 값 추가 stduents.unshift('값') # 배열 맨앞에 값 추가 stduents.unshift('값1','값..

자바스크립트 - 객체

객체 (Object) const student={ name='bob', age=10, } # 접근 방법 student.name student['age'] student['hobby'] # undefined 반환 # 존재 확인 방법 'hobby' in student # boolean(true/false) 반환 # 추가 방법 student.name = 'sam' student['age'] = 15 # 삭제 방법 delete student.age delete student['age'] 반복 const student={ name='bob', age=10, } # for in 문 : 객체의 key값을 차례로 반환 for(key in studnet){ console.log(studnet[key]) } 'bob' 1..

자바스크립트 - 함수

함수 함수 선언문 자바스크립트는 코드 실행 전 초기화 단계에서 미리 함수 선언문을 모두 찾아서 선언+초기화한다. 그래서 함수 호출이 선언보다 앞에 와도 미리 찾아둔 함수 선언문을 보고 호출 가능하다. (호이스팅) function show(val){ console.log(val); } show('hi'); 'hi' show('bye'); 'bye' # return 명시하지 않아도 자동으로 return 들어감 # return 값이 없으면 undefined 반환 function show(){ console.log('hihi'); } a = showSomething(); console.log(a); 'undefined' # 매개변수 디폴트 값 (매개변수 없을때 기본값으로 들어감) function show(val..

자바스크립트 - 기본문법

입출력 사용자에게 입력받기 const val = prompt("입력해주세요") "입력해주세요" 문구 출력 비어있는 사용자 입력창 (취소/확인) 1. 취소 선택시 null 반환 2. 확인 선택시 입력창 내용 문자형으로 반환 const val = prompt("입력해주세요", "abc") "입력해주세요" 문구 출력 "abc"가 들어있는 사용자 입력창 (취소/확인) 사용자에게 확인받기 const val = confirm("선택하시겠습니까?") "선택하시겠습니까?" 문구 출력 (취소/확인) 1. 취소 선택시 false 반환 2. 확인 선택시 true 반환 사용자에게 경고창 보여주기 const val = alert("경고") "경고" 문구 출력 (확인) 콘솔창에 내용 출력 console.log("출력 내용") "..

HTML - form 태그

태그 폼 이란 사용자 아이디/패스워드 같은 정보를 입력받을 때 사용된다. 태그 안에 , 등의 여러 입력칸을 작성하여 입력 폼 만들기 여러 폼 요소 속성 method : 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨 줄 지 지정 - get : 입력길이 제한있음, 주소 표시줄에 내용드러남 - post : 입력길이 제한없음, 주소 표시줄에 내용안드러남 name : JS로 폼 제어 시 사용할 이름 actiotn : form 태그 안의 내용 처리할 서버 프로그램 지정 target : action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 함 autocoplete : 자동 완성 기능 (default=on) / 중요한 정보 입력은 off해줘야 함 예시 ... , 태그 폼 요소를 ..