array 에 데이터를 추가 하는 방법


안녕하세요.
고코더 입니다. 



자바스크립트에서 배열은 매우 중요합니다. 특히 데이터를 배열에 추가하여 다시 사용하는건 프론트엔드 개발의 기본입니다. 그래서 오늘은 배열에 값을 넣는 대표적인 2가지 방법인 push()와 unshift()를 배워보겠습니다.



 1. push() : 배열 뒤에 값을 입력한다.


push()는 배열 뒤에 값을 입력하는 대표적인 배열에 값을 추가하는 방법입니다.
배열을 선언하고 해당 배열에 push로 데이터를 넣는 방식입니다. 뒤로 순차적으로 데이터가
쌓이기에 백엔드에서 전달해주는 데이터 그대로를 담을 수 있습니다. 
1
2
3
4
5
6
    jvar arryData = [];    //배열을 선언
    arry = {
        "name"    :    'gocoder',
        "url" :    'gocoder.net'
    };      
    arryData.push(arry);    //배열을 push 뒤에 넣는다
cs

푸시한 데이터는 순차적으로 배열에 입력 됩니다.


 2. unshift() : 배열 맨 앞에 데이터를 담기


실무에서 자주 쓰는 함수입니다. 순차적으로 담긴 데이터 맨 앞 배열에 해당 데이터를 입력합니다.  
예제를 보시면 먼저 담긴 홈페이지 주소보다 이름 주소가 먼저 나타납니다. 
1
2
3
4
5
6
7
8
9
10
11
12
13
    var arryData = [];    //배열을 선언
 
    arry = {
        "name"    :    'gocoder',
        "url" :    'gocoder.net'
    };      
    arryData.push(arry);    //배열을 push 뒤에 넣는다
 
    arry = {
        "name"    :    '이름',
        "url" :    '주소'
    };      
    arryData.unshift(arry);    //배열을 unshift 맨 앞에 넣는다
cs
배열에 맨 앞으로 데이터를 보냅니다.



 3. 종합 예제


두개의 함수를 이용해 예제를 실행해봅니다.
이해하기 어렵지 않으니 눈으로 한번 학습하시길 바랍니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
<head>
<script type="text/javascript">
var arryData = [];    //배열을 선언
 
    node = {
        "name"    :    'gocoder',
        "url" :    'gocoder.net'
    };      
    arryData.push(node);    //배열을 push 뒤에 넣는다
 
 
    node = {
        "name"    :    '이름',
        "url" :    '주소'
    };      
    arryData.unshift(node);    //배열을 unshift 맨 앞에 넣는다
 
 
    node = {
        "name"    :    'gc',
        "url" :    'gocoder.net'
    };      
    arryData.push(node);    //배열을 push 뒤에 넣는다
 
    for (var i = 0; i < arryData.length; i++) {
        document.write(arryData[i].name);
        document.write(' , ');
        document.write(arryData[i].url);
        document.write('<br>');
    }
</script>
</head>
 
</html>
cs

결과 값은 이렇게 노출 됩니다. 



마무리


push() 할 데이터 점점 많네~



댓글을 달아 주세요


몇 초후에 한번 실행 , 초 마다 반복 실행


안녕하세요.
고코더 입니다.


제 홈페이지 고코더넷(http://gocoder.net)에 
학생분이 질문을 남기셔서
열코딩 하다 강의 작성 모드로 스위치를 바꿨습니다.

문의한 사항은 이렇습니다.


요즘 학생분들이 코딩 많이 하시네요.
(덕분에 선생님 소리도 들어보네요)
좋은 현상입니다.



차이점 이론


1. setTimeout()
이 메서드는 
    일정 시간 후에 함수를 한번! 
실행합니다.

setTimeout(function(){alert('gocoder.net')}, 1000); // 1초 후에 스크립트 실행


 2. setInterval()
이 메서드는
    해당 시간마다 반복해서 함수를 
실행합니다.

setInterval(function(){alert('반복 gocoder.net')}, 1000); // 1초 후에 스크립트 실행



예제로 실행해봐요


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
    <script type="text/javascript">
        var cnt = 0;
        setTimeout(function(){
            cnt = cnt + 1;
            alert('setTimeout gocoder.net ('+cnt+')');
        }, 500)
 
        setInterval(function(){
            cnt = cnt + 1;
            alert('setInterval gocoder.net ('+cnt+')');
        }, 1000)
    </script>
</head>
</html>
cs
처음에 나타나는 경고문은 0.5초만엨
setTimeout 을 이용해 한번 실행 되고


이후에 영원히 이 경고창이 실행 됩니다



마무리


학원에서 배우시고 계신 이 두 메서드는
실무에서도 정말 많이 사용 하고
유용한 기능 입니다. 


댓글을 달아 주세요



array 배열을 for 문으로 출력 


안녕하세요. 고코더 입니다.

오늘은 간단한 PHP 예제를 배워보겠습니다.
배열의 값을 확인하는 가장 기초적인 방법은

▼ 이처럼 []을 이용해 순서대로 배열의 값을 꺼내 올 수 있습니다.
1
2
3
4
5
6
7
8
<?php
 
$num[0= 0;
$num[1= 1;
 
echo $num[1];
 
?>
cs



▼이것을 for문 모든 배열을 으로 자동적으로 꺼내 쓰는 방법은 이렇습니다.
전에 다룬  form 페이지의 받는 부분을 아래처럼 작성하였습니다. 

▼ 혹은 아래 파일로 테스트 해보세요

$_GET["gocoder"] 
     - 이 부분은 겟으로 넘오은 method의 변수 값을 받는 부분입니다.
     배열로 넘어왔다면 배열로 노출이 가능합니다.

count();
     - 배열의 갯수를 세어줍니다.



1
2
3
4
5
6
7
<?php
 
for($i = 0$i < count($_GET["gocoder"]); $i++) {
    echo $i."번째 value 값 :".$_GET["gocoder"][$i]."<Br>";    
}
 
?>
cs

▼위에 코드를 실행하면 아래처럼 확인이 가능합니다. 



▼테스트 가능한 소스를 올려 드립니다.

test.php


어떤 개발자 분께서 문의 주셔서
기초적인 부분을
짧게 남겨 드립니다.

감사합니다.


마무리


문의 내용 댓글 남겨주신 개발자님 홧팅 !


댓글을 달아 주세요



이미지가 화면에 올때 로딩 되게 하기


안녕하세요. 고코더 입니다.




오늘은 동적으로 이미지를 호출하여
페이지 로딩은 빠르게 하고 고객이 원하는 곳에 갔을 때만
해당 이미지를 볼 수 있도록 만들어 보려고 합니다. 
모바일을 많이 사용하는 환경에서 이젠 동적 호출은 기본이 되어가고 있습니다.

오늘 써볼 플러그인은 lazyload() 입니다.

▼홈페이지는 아래와 같습니다.

공식적인 API 의 내용은 읽어보셔서 참고 하시길 바랍니다.

저는 좀 더 익스프레스 하게 알려드리기 위해 샘플을 코딩 해보았습니다.

▼ 아래 내용을 참고해주세요
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.lazyload.js"></script// 플로그인 참조
    <script type="text/javascript">
        $(function(){
            $('img.gocoder').lazyload({        // 이미지를 동적으로 호출 하도록
                placeholder : 'loading.gif',    // 로딩 이미지
                threshold: 0,                 // 접근 ~px 이전에 로딩을 시도한다.
                load : function(){              // 로딩시에 이벤트
                    $(this).attr('alt',$(this).attr("data-original"));
                }
            });
        });
    </script>
</head>
<body>
    <Table>
        <tr>
            <td><img data-original="img (1).jpg"  class="gocoder" width="300"></td>
            <td><img data-original="img (2).jpg"  class="gocoder" width="300"></td>
        </tr>
        <tr>
            <td><img data-original="img (3).jpg"  class="gocoder" width="300"></td>
            <td><img data-original="img (4).jpg"  class="gocoder" width="300"></td>
        </tr>
    </Table>
</body>
</html>
cs

예제만 보시면 대부분 이해가 될거라 생각이 듭니다.
그래도 조금 더 자세히 설명을 드리면

1. lazyload() -> 7번째 줄
$('img.gocoder').lazyload()
- 해당 기능을 호출합니다. 이렇게만 쓰셔도 옵션 없이 정상 작동합니다.

2. placeholder -> 8번째 줄
placeholder : 'loading.gif'
- 호출 전 이미지를 지정합니다. 보통 로딩 gif가 올거 같네요. img 태그의 src의 주소를 매칭하여 사용할 수 있습니다.

3. threshold -> 9번째 줄
threshold: 0,
- 호출 할 시점을 입력합니다. 숫자가 높을 수록 먼저 로딩을 하고 있습니다. 

4. load -> 10~12번째 줄
load : function()
- 호출 시점에 이벤트를 실행 할 수 있습니다. 파일명을 이미지 속성 alt에 입력 되게 해보았습니다.

▼ 이처럼 필요시기에 이미지를 불러 옵니다.
(로딩에 맞춰 캡쳐하기 힘드네요)



이 밖에 이펙터 같은 옵션이 더 있으나 실무에서 거의 사용하지 않는 부분이라
필요한 부분만 코딩 하였습니다. 그리고 아직 플러그인이 완성됐다는 느낌은 안들어서
기본 기능만 사용하시는걸 추천드립니다.



마무리

좋은 플러그인이 많네요. 자신만의 레퍼런스를 만들어서 빠르게 사용하세요



댓글을 달아 주세요



문자열 replace 변경 하기 


안녕하세요 고코더 입니다.


오늘은 PHP의 기본 함수은 str_replace를 알려드리려고 합니다.
모든 언어에는 replace 함수가 있습니다. 당연히 PHP에도 있습니다.

단지 함수 이름 앞에 "str_" 을 붙혀넣었습니다. 문자열(str) 변경한다는 용도를 강조한 듯합니다.
PHP에는 "replace" 라는 6글자의 함수는 없고 용도를 표시한 [*]_replace가 있습니다.
개발자를 위한 배려지만 조금은 헷갈리는 구조입니다.



그래도 완벽함 치환 함수를 제공해주고 있으니 한번 알아보겠습니다.

▼해당 함수의 사용법입니다.
str_replace(
     1번째 인수 : 변경대상 문자
     2번째 인수 : 변경하려는 문자
     3번째 인수 : 변수, replace가 바꾸고자 하는 문자열(변수수)
)

이런식으로 되어 있습니다.
ASP의 replace 랑은 1,3번째 인수가 바뀌어 있네요.
언어 마다 사용법과 명명은 같은데 사용법이 조금씩 다르네요

▼ 그리고 쉽게 예제를 한번 만들어 보았습니다.
1
2
3
4
5
6
7
8
<?php
 
    $txt = "고코더 개발 Express 개발강의";   //대상 문자열
    $result = str_replace('개발' , 'IT'$txt);
    // str_replace('바껴서 없어질 문자' , '변경 완료 될 문자', '대상 문자열');
    echo "변경 전 문자열 : ".$txt."<br>";
    echo "변경 후 문자열 : ".$result;
?>
cs

최대한 한눈에 들어오게 코딩을 해보았는데요
개발 이란 글자를 -> IT라고 바꾸는 방법을 알아보았습니다.
(처음 블로그 이름이었다고 요즘은 범위가 넓어져 개발이름 이름 대신 IT를 쓰고 있습니다.)

▼웹에서 확인한 결과입니다.
IT Express !!!




마무리

 replace 만 이라도 사용법을 모든 개발언어가 통일 했으면 하네요.


댓글을 달아 주세요



ASP 기본 정규식으로 치환,  체크 하기



안녕하세요. 고코더입니다. 
날씨가 점점 좋아지고 있으니 열심히 코딩을 해볼까요?

정규식은 너무나 잘 알고 있고
너무나 잘쓰고 필요한 기술입니다. 

특히 프론트 개발자는 정규식 쓸일이 참 많습니다. 
이 기술이 있어서 하드코딩 할 내용도 덕분에 한줄로 처리가 가능합니다.

그런데 ASP가 한참 개발 시절에는 정규식 보단 날 코딩이 유행이라 
정규식을 잘 쓰지 않았습니다.

그런지 레퍼런스도 잘 없네요.

오늘은 한번 짧게 정규식의 가장 기초적인 패턴을 코딩 해보았습니다.

▼소스는 아래와 같습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%
    exStr = "정규식 테스트 공감버튼 1번 클릭 부탁드립니다."
    Set exReg = New RegExp
 
    exReg.Pattern = "[0-9]"             '// 정규식 패턴 입력
    exReg.Global = True                 '// 문자열 전체 검색
    exReg.IgnoreCase = True             '// 대소문자 구분 안함         
    result_1 = exReg.Replace(exStr, "한")
    
    Set match = exReg.Execute(exStr)    '// 정규식 패턴이 발견 된 만큼 0이면 false 0이상이면 true
    result_2 = match.count                '// .count를 이용해 체크 됐는지 확인한다.
 
    Set exReg = Nothing
    Set match = Nothing
 
 
    Response.write "치환 결과 = " & result_1 & "<Br>"
    Response.write "체크 결과 = " & result_2 & "<Br>"
%>
cs



설명할 내용이 참 없네요

▼해당 공간에 패턴을 입력하고 
1
 exRegExp.Pattern = ""



▼치환 하는 부분
1
exRegExp.Replace(temp, "")



▼패턴을 체크 하는 부분
1
Set match = exReg.Execute(exStr)




제가 코딩한 소스를 잠깐만 살펴보면 충분히 이해 하실거라 생각 됩니다.



마무리


정규식 체크는 프론트 언어(javascript)로 하시길 추천합니다.


댓글을 달아 주세요