본문 바로가기
높이 자동조절 textarea 구현 (auto-resizing textarea) [textarea 리사이징] 사용자의 입력값에 따라 textarea 크기가 자동으로 조정되는 auto-resizing 기능이 있는 아래와 같은 textarea를 구현해보자. 1. 유저가 값을 입력했을 때 textarea 영역의 높이를 자동으로 증가/축소시킨다 2. 입력 가능한 라인 수(textarea 높이)는 제한한다 3. 입력시엔 textarea를 사용하고, 노출(읽기모드)시엔 textarea 대신 border가 없는 다른 tag를 사용한다 [구현에 필요한 사전지식] 1. HTML DOM element 와 jQuery Object this 사용시 this가 jQuery Object 인지 DOM element 인지 명확히 구분해야 한다. (참고1, 참고2) 1. $(): jQuery Object 2. $.. 2020. 12. 15.
[javascript] promise 를 사용한 비동기 후처리 1. callback을 사용한 비동기 후처리 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 var callApi = function(successCallback, failCallback){ $.post('/user.do', $("#parameter").serialize()) .done(function(response){ successCallback(response); }) .fail(function(xhr, status, err){ failCallback(err); }); } //on button click callApi(function(data){ alert("this is successCallback!"); if(data.alertMssage !.. 2020. 5. 4.
[javascript] 자바스크립트의 객체 - 자바스크립트에서 원시 타입을 제외한 모든 나머지 값들(함수 배열 정규표현식 등)은 객체. - 객체는 key 와 value 로 구성된 property 의 집합 - 프로퍼티 값이 함수인 경우 일반 함수와 구분하기 위해 메소드라 부름 (자바스크립트의 함수는 일급객체(참고)이므로 값으로 취급 가능) - 객체는 데이터를 의미하는 프로퍼티와 데이터를 참조하고 조작할 수 있는 동작(메소드)로 구성된 집합 - 프로퍼티 및 메소드를 모두 포함할 수 있어 하나의 단위로 구조화하기 유용 - 프로토타입을 상속받아 객체지향의 상속을 구현한다 [프로퍼티] - 프로퍼티 키를 중복 선언시 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어씀 - 프로퍼티간 순서를 보장하지 않음 [메소드] - 프로퍼티 값이 함수인 경우 메소드라 .. 2019. 12. 2.
[jQuery] radio에 onchange 적용하기(선택받지 못한 radio 값 지우기) 이상하게 라디오 관련 처리는 매번 할 때마다 바로바로 기억이 안나 정리해둔다. [HTML] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 radio1 radio2 radio3 Colored by Color Scripter cs [script] 1 2 3 4 5 6 7 8 9 $('input[type=radio][name=type]').change(function(){ var arr = $('input[type=radio][name=type]'); console.log($(this).val()) for(var i=0; i 2019. 11. 15.
[javascript] strict mode(엄격모드) 란? javascript 는 일부 에러를 무시하고 실행이 가능하다. 에러가 존재해도 동작한다는 이점이 있으나, 개발자의 디버깅을 더 힘들게 한다는 단점도 존재한다. [ strict mode ? ] ECMAScript5 에 추가된 기능으로써 에러를 더 엄격히 제한하는 기능. 사용법은 어렵지 않지만, strict 사용시 기존에 묵인되던 에러들이 에러를 뿜게되니 관련부분은 나중에 정리. 참고 : https://www.geeksforgeeks.org/strict-mode-javascript/ 2019. 11. 15.
[javascript] 자바스크립트 this 정리 1. 메소드 안 : 메소드를 소유한 object this : object person 1 2 3 4 5 6 7 8 var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; Colored by Color Scripter cs 2. alone(어디에도 속하지 않을 때?) : 전역 객체 (window) 1 2 3 4 var x = this; document.getElementById("demo").innerHTML = x; Colored by Color Scripter cs 3. 함수 안 : 전역 객체 (window) 1 2.. 2019. 11. 15.
[javascript] 자바스크립트의 Scope 정리 [scope란?] 참조대상 식별자를 찾아내기 위한 규칙. 특정 변수가 선언되어 있을 때, 해당 변수를 소스 내 어디에서 찾아서 사용할 지를 규정하는 규칙. [전역스코프 vs 지역스코프] 전역스코프 : 코드 내 모든 곳에서 참조 가능. 지역스코프 : 함수 코드 블록 내에서 만들어진 스코프로 함수 자기 자신과 하위 함수에서만 참조 할 수 있다. ※ 최상위 스코프는 window [블록레벨스코프 vs 함수레벨스코프] 블록레벨스코프 block-level scope : if문, for문 과 같은 블록 내에 선언된 변수는 블록 밖에서는 참조가 불가하다. (대부분의 C언어, 자바언어) 함수레벨스코프 function-level-scope : 함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 참조가 가능하다... 2019. 11. 12.
[javascript] 호이스팅(hoisting)이란? javascript 에서 hoisting 이란 단어 뜻 그대로 끌어올리기라는 의미로써, 변수를 최상단으로 끌어올리는 것을 뜻한다. 이와 같은 자바스크립트에서의 호이스팅이란 특징으로 인해, javascript에서 변수는 사용된 이후 선언 될 수 있다. (==변수를 사용한 후 선언 할 수 있다) [case 1] 1 2 3 4 5 $(document).ready(function(){ var x; x = 5; console.log(x); }); cs 변수를 선언 후 변수에 값을 저장한 케이스. 보기에도 문제가 없어보이고 실행 결과도 문제가 없다. [case 2] 1 2 3 4 5 $(document).ready(function(){ x = 5; console.log(x); var x; }); cs 변수에 값을 .. 2019. 11. 11.
[javascript] typeof typeof 는 js에서 타입을 반환하는 연산자(operator)로써 변수의 타입을 확인할 때 사용한다. typeof 로 아래와 같이 number, string, object, boolean, function 타입을 확인 할 수 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 console.log(typeof 123); //number console.log(typeof "str"); //string console.log(typeof new Object()); //object console.log(typeof {test : "test"}); //object console.log(typeof true); //boolean console.log(typeof Symbol()); //sym.. 2019. 11. 11.
[javascript] 함수의 특징 (1급 객체) javascript 에서 함수는 1급객체이다. javascript 에서 함수는 아래와 같은 특징을 지닌다. 1. 익명함수로 작성 가능 2. 리턴값으로 사용 가능 3. 매개변수로 사용 가능 4. 변수, 자료구조로 저장 가능 위와 같은 특징으로 인해 callback 함수 같은 개..념이 존재. [함수 선언식 vs 함수 표현식] 함수 선언식 : function func(){} 함수 표현식 : var func = function(){} 함수선언식으로 소스를 작성해도, 해당 소스 구동시 js 엔진 내에서 함수선언식을 함수표현식으로 바꾼다. 2019. 11. 9.