'web/javascript'에 해당하는 글 5건


1. script 는 기본적으로 window 객체 안에서 돌아간다.

2. 로드된 스크립트들은 window객체 안에 있고, 모듈간의 의존성 문제, 변수 및 함수의 침범이 일어났다.

3. 이를 방지하기 위해 commonJS / AMD(Asynchronous Module Definition) 가 생겨났고, es6 또한 제공하기 시작

AMD              require([""], function(module) {})

CommonJS    var module = require("")

ES6                 import { module } from "";

4. 서로 지원하는게 달라서 춘추전국시대가 열림

5. 이 모든것을 통합 해주는 babel 등장 ( js 하위버전으로 변환까지 해줌 ) 으로 결국 모두 바벨 사용해야함.



- 읽어보기

https://blog.pigno.se/post/157992405313/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%AA%A8%EB%93%88-%EC%A0%9C%EA%B3%B5%EC%9D%84-%EC%9C%84%ED%95%9C-amd-commonjs-%EA%B7%B8%EB%A6%AC%EA%B3%A0-requirejs-%EC%86%8C%EA%B0%9C

https://d2.naver.com/helloworld/591319


# 결국 node는 commonjs / 웹팩은 AMD / 클라이언트 프레임워크 ES6를 선택...... 이게 무슨..

'web > javascript' 카테고리의 다른 글

javascript 의 모듈 제공 방법  (0) 2018.09.05
js regexp wrong results?  (0) 2018.05.03
overflow-x 된 DOM에서 마우스 휠로 좌우스크롤 움직이기  (0) 2016.06.29
javascript reduce  (0) 2016.06.10
javascrpt map  (0) 2016.06.09

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret


var str = "FRANCE";

var re = new RegExp("[A-z]{2}", "ig");

for(var i=0; i<str.length; i++){
        var substring = str.substr(i, 2);
        console.log("re.test(substring)", substring, re.test(substring));
}


위의 소스를 돌려보면 아래와 같이 모두 true / false 가 번갈아 가면서 나온다.

re.test(substring) FR true
re.test(substring) RA false
re.test(substring) AN true
re.test(substring) NC false
re.test(substring) CE true
re.test(substring) E false

정규식이 두글자의 문자일때 true가 반환되어야 하지만 정상적인 경우에도 false가 나온다.

이는 regExp의 g 옵션때문인데, g는  글러벌 속성으로 마지막으로 통과한 정규표현식의 위치를 기억하고

다음번엔 해당 index부터 시작하게 된다.

위의 경우 첫번쨰  FR을 통과 했으므로 LastIndex = 1이 되고, 다음번 RA를 검사할시 LastIndex가 1이기 때문에 RA에서  A부터 검사하여 false이 리턴된다. 그리고 다시 LastIndex는 0으로 초기화된다.


이렇게 for문 안에서 반복적인 정규표현식을 사용할 경우엔 g옵션을 빼고 사용하거나,

혹은 LastIndex를 지속적으로 0으로 초기화를 해야 한다.

re.lastIndex = 0;


참조 : https://stackoverflow.com/questions/1520800/why-does-a-regexp-with-global-flag-give-wrong-results

'web > javascript' 카테고리의 다른 글

javascript 의 모듈 제공 방법  (0) 2018.09.05
js regexp wrong results?  (0) 2018.05.03
overflow-x 된 DOM에서 마우스 휠로 좌우스크롤 움직이기  (0) 2016.06.29
javascript reduce  (0) 2016.06.10
javascrpt map  (0) 2016.06.09

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret

먼저 html


 <div class="content">
<div class="overflow-x" id="overflow-x">
국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다. 모든 국민은 법률이 정하는 바에 의하여 납세의 의무를 진다.

탄핵소추의 의결을 받은 자는 탄핵심판이 있을 때까지 그 권한행사가 정지된다. 모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다.국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다. 모든 국민은 법률이 정하는 바에 의하여 납세의 의무를 진다.

탄핵소추의 의결을 받은 자는 탄핵심판이 있을 때까지 그 권한행사가 정지된다. 모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다.국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다. 모든 국민은 법률이 정하는 바에 의하여 납세의 의무를 진다.

탄핵소추의 의결을 받은 자는 탄핵심판이 있을 때까지 그 권한행사가 정지된다. 모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다.국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다. 모든 국민은 법률이 정하는 바에 의하여 납세의 의무를 진다.

탄핵소추의 의결을 받은 자는 탄핵심판이 있을 때까지 그 권한행사가 정지된다. 모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다.국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다. 모든 국민은 법률이 정하는 바에 의하여 납세의 의무를 진다.

탄핵소추의 의결을 받은 자는 탄핵심판이 있을 때까지 그 권한행사가 정지된다. 모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다.국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다. 모든 국민은 법률이 정하는 바에 의하여 납세의 의무를 진다.

탄핵소추의 의결을 받은 자는 탄핵심판이 있을 때까지 그 권한행사가 정지된다. 모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다.

</div>
</div>


css


.content{
width: 700px;
}

.overflow-x{
width:420px;
height:170px;
border:1px solid red;
white-space:nowrap;
overflow-x:scroll;
}


js




window.onload = function () {

$.fn.horizontalmouse = function () {
var select_dom = document.getElementById(this.selector.replace("#", ""));

if (select_dom.addEventListener) {
select_dom.addEventListener("mousewheel", MouseWheelHandler, false);
select_dom.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else select_dom.attachEvent("onmousewheel", MouseWheelHandler);

function MouseWheelHandler(e) {

var e = window.event || e;
var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));

$(this).animate({
scrollLeft: '-=' + delta * 100
}, 10);

return false;
}
};

$(function () {
$("#overflow-x").horizontalmouse();
});
};


해당 id만 지정해 주면 마우스로 움직임( 이미지 캐러셀 같은곳에 쓰면 좋을듯..)

'web > javascript' 카테고리의 다른 글

javascript 의 모듈 제공 방법  (0) 2018.09.05
js regexp wrong results?  (0) 2018.05.03
overflow-x 된 DOM에서 마우스 휠로 좌우스크롤 움직이기  (0) 2016.06.29
javascript reduce  (0) 2016.06.10
javascrpt map  (0) 2016.06.09

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret


map()함수는 배열의 각각의 원소에 함수를 적용하는것이라면 

reduce()함수는 배열의 각 배열들을 순서대로 함수를 적용하는것입니다. 


예를 들어 1~5까지의 배열이 있을때 합을 구하고 싶다면 다음과 같습니다.


[1, 2, 3, 4, 5].reduce( (x, y) => x+y, 0); // 15


위의 소스는 (((((0+1) + 2) + 3) + 4) +5) 와 같이 동작합니다. 

그렇습니다. 함수중에서 가장 피곤한!! 재귀함수와 비슷합니다.  (재귀함수는 수학식을 코딩하기에 알맞지만 디버깅과 소스 분석이 어려운 단점이 있지요.)

일명 fold 함수라고도 하는 고차함수입니다.

reduce도 고차함수에 속하는 것으로 아래와 같이 움직이게 됩니다. 



reduce에 의해 함수를 마치면  리턴은 하나가 됩니다.  (map()은 리스트가 반환됩니다.)




아래는 리스트의 모든 데이터를 하나의 스트링으로 만드는 소스 입니다. 


function appendCurrent (previousValue, currentValue) {
return previousValue + "::" + currentValue;
}
var elements = ["abc", "def", 123, 456];
var result = elements.reduce(appendCurrent);
console.log(result); // "abc::def::123::456"


reduce()는 보통 리스트내의 계산 부분(통계 / 합) 부분에 많이 쓰입니다~

'web > javascript' 카테고리의 다른 글

javascript 의 모듈 제공 방법  (0) 2018.09.05
js regexp wrong results?  (0) 2018.05.03
overflow-x 된 DOM에서 마우스 휠로 좌우스크롤 움직이기  (0) 2016.06.29
javascript reduce  (0) 2016.06.10
javascrpt map  (0) 2016.06.09

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret

javascrpt map

web/javascript 2016.06.09 13:24

map 메서드(Array)

map 함수는 배열의 각 요소에 대해 정의된 콜백 함수를 호출하고 결과가 포함되어 있는 배열을 반환합니다.

1. 배열의 각요소에 루트값을 구하기

let list = [2, 4, 5];
console.log(list.map(Math.sqrt)); // [1.4142135, 2, 2.23606]


2.  배열의 각 요소를 제곱근으로 하기

var numbers1 = list.map(function(num){
return num * num
});
console.log(numbers1); //[4, 16, 25]

 

2-1  배열의 각 요소를 제곱근으로 하기(함수 사용)

map()에 해당 함수만 표기해 주면 됩니다.


const square = x => x * x;
var numbers2 = list.map(square);
console.log(numbers2); //[4, 16, 25]



3.  오프젝트 배열를 키/값으로 다시 재성립



var kvArray = [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}];
var reformattedArray = kvArray.map(function(obj){
var rObj = {};
rObj[obj.key] = obj.value;
return rObj;
});


console.log(reformattedArray[0]['1']); //10
console.log(kvArray[0]['value']); //10



4.  문자열 리버스~


[].map.call('hello', x => x).reverse().join('') //"olleh"


'web > javascript' 카테고리의 다른 글

javascript 의 모듈 제공 방법  (0) 2018.09.05
js regexp wrong results?  (0) 2018.05.03
overflow-x 된 DOM에서 마우스 휠로 좌우스크롤 움직이기  (0) 2016.06.29
javascript reduce  (0) 2016.06.10
javascrpt map  (0) 2016.06.09

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret