본문 바로가기

Javascript

(24)
자바스크립트의 this 자바스크립트의 this는 함수가 호출되는 방식에 따라 동적으로 결정된다.  1. 전역컨텍스트에서 this는 전역 객체를 참조한다.2. 메서드에서 this는 해당 객체를 참조한다.3. 화살표 함수는 자체적인 this를 가지지 않고 상위 스코프의 this를 상속받는다.4. call, apply, bind 메서드를 통해 this를 명시적으로 설정할 수 있다.foo 의 this는 objobj.foo()로 호출되었기 때문에 호출 컨텍스트는 obj 이므로 이때의 this는 obj이다. bar의 this는 windowfoo 내부에서 bar()를 호출하였으나, obj와 연결된 메소드가 아니다. 단순히 foo안에서 정의된 내부 함수일 뿐..! 즉 일반 함수로 호출되었기 때문에 호출 컨텍스트는 window가 된다. 일반 ..
[Javascript] scrollIntoView() - 스크롤 이동하기 화면의 특정 위치로 이동시켜주는데, 특정 element를 기준으로 스크롤을 이동시켜준다. 1. true / false element.scrollIntoView(true or false); true -> 상단을 기준으로 스크롤을 이동시킴. false ->하단을 기준으로 스크롤을 이동시킴. 2. 옵션 behavior 전환을 어떤식으로 해주는지 auto , smooth 스크롤을 바로 이동시키는가 스무스하게 이동시켜주는가..! block 수직정렬 start , center , end , nearest inline 수평정렬 start , center , end , nearest element.scrollIntoView - Web API | MDN Element 인터페이스의 scrollIntoView() 메소드는 ..
[ JavaScript ] 실행 컨텍스트와 스코프 체인 1. 실행 컨텍스트 ( Execution Context) 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체를 말한다. 실행 컨텍스트는 두가지 종류를 가진다. 전역 실행 컨텍스트 함수 실행 컨텍스트 실행 컨텍스트는 객체의 형태로 3가지의 프로퍼티를 소유한다. 변수 객체 ( arguments , variable ) scope chain this 처음 코드를 실행하는 순간 모든것을 포함하는 전역 컨텍스트가 생기고 전역 컨텍스트는 페이지가 종료 될때까지 유지된다. 함수 컨텍스트는 함수를 호출할 때 마다 함수 컨텍스트가 하나씩 생기고 함수 실행이 끝나면 해당 함수 컨텍스트는 사라진다. ( 클로저 제외! ) 페이지가 종료되면 전역 컨텍스트도 사라진다. 전역 컨텍스트 '전역 컨텍스트': { 변수객체 ..
[ JavaScript ] Scope란?! 자바스크립트에서 스코프란 어떤 변수들에 접근할 수 있는지, 변수에 접근할 수 있는 범위이다. 스코프는 총 2가지로 나누어져 있다. 전역 스코프 ( Global Scope ) 지역 스코프 ( Local Scope ) - 함수 스코프 / 블록 스코프 1. 전역 스코프 ( Global Scope) 코드의 어느곳에서든 변수를 참조할 수 있는 범위이다. 중괄호 밖을 전역 스코프라고 하고, 전역 스코프에서 선언된 변수들을 전역 변수라고 한다. [ 전역 스코프의 문제점 ] 2. 지역 스코프 ( Local Scope ) 함수내에서의 범위이며, 자기 자신과 하위 범위에서만 참조 할 수 있다. 중괄호 안을 지역 스코프라고 하고 지역 스코프에서 선언된 변수들을 지역 변수라고 한다. 지역 스코프에는 함수 스코프와 블록 스코프..
[Javascript] filter( ) array.filter(callbackFunction( value , index , array ){ return ~~; }); filter() 메서드는 주어진 함수의 조건을 통과하는 모든 요소들을 모아 새로운 배열로 반환한다. return 값이 true인 값들만을 반환해준다. find()메서드와 차이점은, find()메서드는 함수의 조건을 통과하는 첫번째 요소만을 반환한다는 것이다.
[Javascript] 가위바위보 사진이라 멈춰있지만, setInterval( )에 의해 가위바위보 이미지가 계속 반복된다. 버튼을 누르면 반복이 멈추고 가위바위보 이미지를 보여준다. 잠시후 다시 반복한다. https://www.inflearn.com/course/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B2%8C%EC%9E%84-%EA%B0%9C%EB%B0%9C/dashboard 웹 게임을 만들며 배우는 자바스크립트 - 인프런 본 강의에서는 자바스크립트를 활용해 프로그래밍하는 연습을 할 것입니다. 웹 게임인 구구단을 시작으로 끝말잇기, 숫자 야구, 틱택토, 로또 추첨기, 가위바위보, 지뢰 찾기, 카드 짝맞추기 게� www.inflearn.com
[Javascript] includes( ) string.includes( searchString ,length ) 배열또는 문자열에 특정 요소를 포함하고 있는지를 판별한다. searchString : 찾을 문자열을 넣는다. 대소문자를 구분한다! length : 검색을 시작할 위치이다. 생략시, 배열 또는 문자열 전체를 대상으로 찾는다.
[Javascript] setTimeout , setInterval , clearInterval setTimeout( ) 일정 시간 간격 이후에 함수가 한번 실행된다. 즉 코드가 단 한 번만 실행되고 끝난다. setInterval( ) 일정 시간 간격으로 함수가 계속 실행된다. clearTimeout( ) setTimeout을 종료시켜주는 함수이다. clearInterval( ) setInterval을 종료시켜주는 함수이다.