javascrip는 개인적으로 참 마음에 안드는 부분이 많은데, 그 중에서도 배열의 sort() 메소드는 좀 좌절스러운 것이… a = [0 to 10].map -> parseInt Math.random! * 100 # [ 74, 7, 45, 41, 43, 85, 84, 66, 41, 91 ] a.sort! # [ 41, 41, 43, 45, 66, 7, 74, 84, 85, 91 ] 숫자로 된 배열을 정렬할 때도 사전식으로 비교해서 어이없는 결과를 만들어낸다…. sort() 메소드는 비교 함수를 받긴하므로, 정수 크기별로 비교하려면, 다음과 같이 각 값을 정수형으로 계산한 결과를 던져주는 비교함수를 넣어준다.… 더 보기 »자바스크립트 배열의 정렬
m.render vs m.mount 미스릴은 virtual dom node를 생성하고, 이 가상 노드를 문서내의 특정 요소에 렌더링하거나 마운트한다. 가상 노드를 생성하는 컴포넌트를 작성하고, 해당 컴포넌트의 내용을 화면에 표시하기 위해서는 이미 존재하는 HTML 문서 내의 특정 DOM의 내부를 가상 노드로 채워주게 된다. 이 때 사용하는 함수로 m.render() 와 m.mount()가 있다. m.render()는 1회성으로 가상 노드를 렌더링하며, m.mount()는 특정 DOM에 가상 노드 컴포넌트를 마운트하는데, mithril은 마운트된 DOM 내에서 발생하는 이벤트를 체크하여 내부적으로 m.render()를 다시 호출해서 이벤트에 의해서 변경된 데이터가 UI에 반영될 수 있도록 자동으로 다시… 더 보기 »(연재) m.render – 가상 DOM 렌더링하기 – Mithril
좀 뒤늦게 jquery 기본 사용법(?)에 대해서 정리. 처음에는 JS문법으로 예제를 썼지만, 뒤로 갈 수록 LS문법을 씁니다.(괄호라든지 괄호라든지 괄호때문에…) jQuery Object jQuery 객체는 DOM 요소(단일요소 혹은 집합)에 대해 $()를 이용하여 생성한 객체를 의미한다. 이는 내부적으로 DOM 요소를 참조하면서 jQuery에 의해 제공되는 공통 API를 적용받게 된다. 속성들 .attr() 메소드는 getter/setter로 동작하며, 해당 DOM요소의 속성을 얻거나 변경할 수 있다. $('a').attr('href', 'allMyHrefsAreTheSameNow.html'); $('a').attr({ title: 'all titles are the same too!', href: 'somethingnew.html' }); $('a').attr('href'); //=> 첫 A 요소의 'href' 값을 리턴한다. 요소 선택 요소… 더 보기 »jquery 기본
객체지향 프로그래밍 언어하면 떠올리는 단어가 바로 “클래스”이고, 실제로 대부분의 객체 지향 성격을 갖는 언어들은 대부분 클래스를 지원한다. 그런데 자바스크립트는 클래스가 아닌 프로토타입 기반의 OOP를 사용한다. 오늘은 이 프로토타입에 대하여 살펴보도록 하겠다.
더 보기 »자바스크립트의 프로토타입에 대해constructor Object.prototype.constructor constructor는 특정 객체 인스턴스를 생성한 함수 객체를 리턴한다. 나역시 prototype이니, constructor니 하는 것이 보이는 것이 그리 탐탁치는 않지만, 객체 인스턴스를 대량으로 생성해야 하는 상황이라면 이에 대한 기본 지식을 조금 알고 있는 것이 여러 모로 도움이 될 수 있다. var o = {}; o.constructor === Object; // true var a = []; a.constructor === Array; // true var n = new Number(3); n.constructor === Number; // true 컨스트럭터와 프로토타입 다음은 매우 평이한 컨스트럭터 예제이다. 객체가 새롭게 호출되면, 객체는 name이라는… 더 보기 »Javacript – constructor
livescript는 자바스크립트로 컴파일되는 스크립트 언어로, 그 문법적 특징이 하스켈
의 것을 많이 참고하고 있다. 예를 들면 괄호없이 함수를 호출한다거나, 함수 파라미
터간의 컴마를 생략할 수 있다거나 하는 것들이 있다.
한 때 흥미삼아서 조금 만져보다가 관뒀었는데, 갑자기 모 사이트에서 NodeJS 튜토리얼을 몇 개 따라해보려다가1 생각이나서 그 사이트의 튜토리얼 코드들을 라이브스크립트로 코딩해봤더니 이거 썩 괜찮더라.
특히 화살표(->)를 이용한 익명함수 정의 문법2을 이용해서 함수를 인자로 전달하거나 함수가 함수를 리턴하는 것을 좀 더 간단하게 표기할 수 있게 한다.
예를 들어 이벤트핸들러를 등록하는 코드를 생각해보자.
var xhr = new XMLHttpRequest();
...
xhr.addEventListenser('onload', function(complete){
console.log(complete.target.responseText);
});
아래 스크립트는 현재 페이지까지의 경로 내에서의 모든 쿠키의 만료일을 예전 일자로 바꿔서 만료되도록해 삭제한다. 콘솔을 열고 아래 스크립트를 붙여넣고 실행하면 된다. (2022년 기준으로 코드를 좀 더 읽기 좋게 다듬고, 깔끔하게 정리했다.)
더 보기 »현재 사이트의 쿠키만 제거하는 법두 Date 객체를 빼면 그 사이의 밀리세컨드 값이 나온다.
var start = new Date();
/* perform some time-taking work... */
var end = new Date();
console.log(end - start);
정규식의 그룹 패턴 중에 Look-around라는 게 있는데, 특정 패턴의 앞/뒤로 만족하는 패턴이 있는 경우에만 해당 패턴을 만족시키는 케이스를 말한다. 예를 들어 apple(?=s)는 apples의 apple만 매칭되고 apple이나 appled는 매칭되지 않도록 하는 것이다. 이를 활용하여 비밀번호 유효성 검사에 정규식을 활용할 수 있다. 예를 들어,
라는 조건을 만족해야 한다면 저 전진 검색 패턴을 활용하면 된다.
더 보기 »정규식을 사용한 비밀번호 유효성 검사
자바스크립트에서 날짜 계산하기. 흔하게 사용하는 것인데 잠깐 생각이 안나서 메모. 두 날짜의 차이 날짜 객체를 빼면 밀리세컨드 값이 나온다. var a = new Date(2014, 4, 10); var b = new Date(2014, 4, 12); var c = b – a; console.log(c/(24 * 3600 * 1000)); 몇일 전 혹은 몇일 후 구하기 var today = new Date(); today.setDate(today.getDate() + 3); console.log(today.toLocaleString());