JavaScript/javascript
-
호이스팅이란? Javascript 에서 var 키워드 변수나 함수는 선언 위치와 관계 없이 다른 코드 실행전에 변수 및 함수 선언과 초기화가 이루어지는걸 의미한다. var 키워드 변수는 선언 및 초기화가 한꺼번에 이루어지며,함수 선언문의 함수는 선언 및 초기화 그리고 할당까지 모두 이루어진다. 호이스팅을 알기 전에 변수 생성단계를 먼저 알아야 한다. 변수 생성 단계 자바스크립트는 3가지 단계를 거쳐 변수를 생성한다. 1. 선언단계 변수를 실행 컨텍스트의 변수 객체에 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다. 2. 초기화 단계 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다. 이 단계에서 변수는 undefined 로 초기화 된다. 3. 할당 단계 undefined 로 초기화된 변수..
호이스팅(Hoisting)호이스팅이란? Javascript 에서 var 키워드 변수나 함수는 선언 위치와 관계 없이 다른 코드 실행전에 변수 및 함수 선언과 초기화가 이루어지는걸 의미한다. var 키워드 변수는 선언 및 초기화가 한꺼번에 이루어지며,함수 선언문의 함수는 선언 및 초기화 그리고 할당까지 모두 이루어진다. 호이스팅을 알기 전에 변수 생성단계를 먼저 알아야 한다. 변수 생성 단계 자바스크립트는 3가지 단계를 거쳐 변수를 생성한다. 1. 선언단계 변수를 실행 컨텍스트의 변수 객체에 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다. 2. 초기화 단계 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다. 이 단계에서 변수는 undefined 로 초기화 된다. 3. 할당 단계 undefined 로 초기화된 변수..
2023.03.14 -
input 태그의 type="text"는 위와 같이 maxlength 를 통해 최대길이를 설정할 수 있다. 하지만 type="number" 는 maxlength 를 설정할 수 없기 때문에 직접 함수를 통해 설정해줘야 한다. let numberMaxLengthCheck = function(obj){ if(obj.value.length > obj.maxLength){ obj.value = obj.value.slice(0, obj.maxLength); } }; // HTML obj.value = obj.value.slice(0, obj.maxLength); oninput 을 통해 값이 입력될 때마다 numberMaxLengthCheck() 함수를 호출한다. numberMaxLengthCheck 에서는 inpu..
HTML input 태그 maxlength 설정input 태그의 type="text"는 위와 같이 maxlength 를 통해 최대길이를 설정할 수 있다. 하지만 type="number" 는 maxlength 를 설정할 수 없기 때문에 직접 함수를 통해 설정해줘야 한다. let numberMaxLengthCheck = function(obj){ if(obj.value.length > obj.maxLength){ obj.value = obj.value.slice(0, obj.maxLength); } }; // HTML obj.value = obj.value.slice(0, obj.maxLength); oninput 을 통해 값이 입력될 때마다 numberMaxLengthCheck() 함수를 호출한다. numberMaxLengthCheck 에서는 inpu..
2023.02.06 -
Javascript 에서 함수를 생성하고 해당 함수를 괄호 없이 호출할때가 있다. 함수를 호출할 때 괄호가 있을때와 없을때의 차이점을 알아보자 아래와 같은 예시가 있다. a 라는 함수에 console.log 를 찍는 함수인데 괄호 없이 a 함수를 호출했을 때는 함수 그 자체를 보여준다. 하지만 a(); 처럼 괄호를 붙일 경우 함수 내부에 선언된 console.log 가 정상적으로 찍힌다. 이유는 함수에 () 괄호가 붙을 경우 자바스크립트 함수를 즉시 호출한다. 하지만 함수에 () 괄호가 없을 경우 함수의 주소를 뜻한다. 추가로 아래 예시도 확인하자. setInterval() 을 통해 1초마다 함수를 호출하는 구문이다. 1초마다 a라는 함수를 괄호없이 잘 호출하는걸 볼 수 있다. setInterval() ..
Javascript 함수(function)에 괄호 () 여부Javascript 에서 함수를 생성하고 해당 함수를 괄호 없이 호출할때가 있다. 함수를 호출할 때 괄호가 있을때와 없을때의 차이점을 알아보자 아래와 같은 예시가 있다. a 라는 함수에 console.log 를 찍는 함수인데 괄호 없이 a 함수를 호출했을 때는 함수 그 자체를 보여준다. 하지만 a(); 처럼 괄호를 붙일 경우 함수 내부에 선언된 console.log 가 정상적으로 찍힌다. 이유는 함수에 () 괄호가 붙을 경우 자바스크립트 함수를 즉시 호출한다. 하지만 함수에 () 괄호가 없을 경우 함수의 주소를 뜻한다. 추가로 아래 예시도 확인하자. setInterval() 을 통해 1초마다 함수를 호출하는 구문이다. 1초마다 a라는 함수를 괄호없이 잘 호출하는걸 볼 수 있다. setInterval() ..
2022.10.12 -
window.location window.location은 read-only 속성을 가졌으며, document의 현재 location 정보를 담은 Location 객체를 리턴해준다. Location properties [ Location.ancestorOrigins ] : 주어진 Location 객체와 연관된 document의 모든 조상 browsing context들이 역순으로 담긴 static한 DOMStringList이다. [ Location.href ]: 전체 URL을 담고있는 USVString을 리턴하는 stringifier이다. 값이 바뀌면 연관된 document는 새로운 페이지로 이동한다. [ Location.protocol ] : URL의 프로토콜 스키마를 담고 있는 USVString]이다..
location.href, location.assign, location.replacewindow.location window.location은 read-only 속성을 가졌으며, document의 현재 location 정보를 담은 Location 객체를 리턴해준다. Location properties [ Location.ancestorOrigins ] : 주어진 Location 객체와 연관된 document의 모든 조상 browsing context들이 역순으로 담긴 static한 DOMStringList이다. [ Location.href ]: 전체 URL을 담고있는 USVString을 리턴하는 stringifier이다. 값이 바뀌면 연관된 document는 새로운 페이지로 이동한다. [ Location.protocol ] : URL의 프로토콜 스키마를 담고 있는 USVString]이다..
2022.09.15 -
인코딩(Encoding) 정보의 형태나 형식을 표준화, 보안, 처리 속도 향상, 저장 공간 절약 등을 위해서 다른 형태나 형식으로 변환하는 처리 또는 그 처리 방식을 얘기한다. Base64 인코딩 64진법 데이터로 바이너리 데이터(이미지, 실행파일) 등 문자 코드에 영향을 받지 않는 공통 ASCII 영역의 문자들로만 이루어진 일련의 문자열로 바꾸는 인코딩 방식 Base64 인코딩을 사용하는 이유는 통신과정에서 바이너리 데이터의 손실을 막기 위해 사용됩니다. 그래서 바이너리 데이터를 Character set에 영향을 받지 않는 공통 ASCII 영역의 문자로만 이루어진 문자열로 바꾼다. Javascript Base64 인코딩 방법- btoa() : 인코딩- atob() : 디코딩 btoa() javascri..
Base64 인코딩(btoa(), atob())인코딩(Encoding) 정보의 형태나 형식을 표준화, 보안, 처리 속도 향상, 저장 공간 절약 등을 위해서 다른 형태나 형식으로 변환하는 처리 또는 그 처리 방식을 얘기한다. Base64 인코딩 64진법 데이터로 바이너리 데이터(이미지, 실행파일) 등 문자 코드에 영향을 받지 않는 공통 ASCII 영역의 문자들로만 이루어진 일련의 문자열로 바꾸는 인코딩 방식 Base64 인코딩을 사용하는 이유는 통신과정에서 바이너리 데이터의 손실을 막기 위해 사용됩니다. 그래서 바이너리 데이터를 Character set에 영향을 받지 않는 공통 ASCII 영역의 문자로만 이루어진 문자열로 바꾼다. Javascript Base64 인코딩 방법- btoa() : 인코딩- atob() : 디코딩 btoa() javascri..
2022.09.08 -
location.assign location.replace 기능 새로운 페이지로 이동된다. 현재 페이지에서 새로운 페이지로 이동하기 때문에 뒤로가기 버튼을 통해 이전페이지로 이동이 가능하다. 현재 페이지에서 새로운 페이지를 덮어 씌운다. 현재 페이지를 새로운 페이지로 덮어 씌우기 때문에 이전 페이지로 이동이 불가능하다. 타입 메서드 메서드 히스토리 기록된다. 기록되지 않는다. 예 location.assign = 'https://www.naver.com' location.replace = 'https://www.naver.com' location.assign 는 기존페이지에서 새로운 페이지로 이동시키기 때문에 뒤로가기 버튼을 통해 이전페이지로 갈 수 있다. 하지만 location.replace 는 기존페이..
location.assign 와 location.replace 차이location.assign location.replace 기능 새로운 페이지로 이동된다. 현재 페이지에서 새로운 페이지로 이동하기 때문에 뒤로가기 버튼을 통해 이전페이지로 이동이 가능하다. 현재 페이지에서 새로운 페이지를 덮어 씌운다. 현재 페이지를 새로운 페이지로 덮어 씌우기 때문에 이전 페이지로 이동이 불가능하다. 타입 메서드 메서드 히스토리 기록된다. 기록되지 않는다. 예 location.assign = 'https://www.naver.com' location.replace = 'https://www.naver.com' location.assign 는 기존페이지에서 새로운 페이지로 이동시키기 때문에 뒤로가기 버튼을 통해 이전페이지로 갈 수 있다. 하지만 location.replace 는 기존페이..
2022.09.07