'프로그래밍' 카테고리의 글 목록 (4 Page)

프로그래밍

윈도우에서 'Node.js'와 'NPM'을 설치하기 2017.03.25
아이프레임에 높이가 바뀌는 제로보드xe 게시판 넣기 2016.02.05 1
iframe resize jquery 아이 프레임 리사이징 소스 2016.02.02
셀렉트 박스 링크 걸기 2016.01.30
eval() 2015.11.21
for 문 -- 별 삼각형 출력하기 2015.10.14
switch 문 2015.10.11
alert 창 띄우기 2015.10.09
부모창에 배너 띄우는 방법 2015.09.21
CSS 적용방법 2015.09.05

윈도우에서 'Node.js'와 'NPM'을 설치하기

2017. 3. 25. 12:30

1. Node.js 설치

노드js의 윈도우 버전은 인스톨러(Windows Installer, .msi)를 제공하기 때문에 원터치로 설치가 가능합니다!

노드js 홈페이지로 가서 설치하려는 윈도우에 맞게 (32bit or 64bit) 설치 파일을 다운받습니다.

URL : nodejs.org - Downloads

설치가 끝나면 명령 프롬프트(cmd) 를 열어서 아래와 같이 입력해봅니다. 문제가 없으면 정상적으로 설치가 된겁니다.

node.js 버전 확인 : node -v

npm 버전 확인 : npm -v

2. 업데이트 하기

자..여기서 설치는 다 했지만 npm 최신 버전으로 업그레이드를 해줘야 합니다.

우선 관리자모드로 명령 프롬프트(cmd) 혹은 파워셀을 실행해주세요.

그리고 아래 명령어를 차례로 입력해주세요.

1. Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force

2. npm install --global --production npm-windows-upgrade

3. npm-windows-upgrade

3번을 할때는 자신이 원하는 버전을 선택해주시면 해당 버전으로 변경이 됩니다.

저는 2017년 3월 24일자 최신 버전인 4.4.4를 선택했습니다.

참고 URL : https://github.com/felixrieseberg/npm-windows-upgrade

이제 Node.js와 npm 최신버전 업그레이드가 끝났습니다.

'프로그래밍 > Node.js' 카테고리의 다른 글

CasperJS 설치 (0)	2017.04.07
PhantomJS 설치 (0)	2017.04.07
XML/RSS 파싱에 cheerio-httpcli 이용 (0)	2017.04.06
HTML 파일에서 링크 추출 (0)	2017.03.27
node.js 특정 페이지 출력하는 코드 (0)	2017.03.27

아이프레임에 높이가 바뀌는 제로보드xe 게시판 넣기

2016. 2. 5. 22:52

JS 파일

var ifrmHeight;

var objFrame;

var str;

var cstr;

function init() {

try{

objFrame = document.all["ifrm"];

str = window.clipboardData.getData("Text");

cstr = str.split("|");

ifrmHeight= eval(cstr[1]);

}catch(e){

}

function reSize()

{

try{

(ifrmHeight > 240) {

objFrame.style.height = ifrmHeight;

}else{

objFrame.style.height = 240;

}

}catch(e){

}

function init_iframe() {

reSize();

setTimeout("init_iframe()",100);

}

init_iframe();

</script>

삽입

제로보드 버전에 따라 다르지만 모듈-게시판-게시판정보-게시판관리에 하단내용에 반드시 넣어야한다.

window.clipboardData.setData('Text', document.body.scrollWidth+"|"+document.body.scrollHeight);

</script>

'프로그래밍 > Javascript' 카테고리의 다른 글

iframe resize jquery 아이 프레임 리사이징 소스 (0)	2016.02.02
셀렉트 박스 링크 걸기 (0)	2016.01.30
eval() (0)	2015.11.21
for 문 -- 별 삼각형 출력하기 (0)	2015.10.14
switch 문 (0)	2015.10.11

iframe resize jquery 아이 프레임 리사이징 소스

2016. 2. 2. 21:12

요즘 반응형이 아이프레임을 리사이징 하는것에 대해서는 어떻게 해야 난감할때가 있습니다.

일반 리사이징하면 가로*세로 비율이 유지되면서 리사이징이되는것을 생각하지만 기준이 가로폭이 됩니다.

하단에 스크립트 넣어주시고, 혹은 *.js로 저장하시고,

해당 아이프레임에 아이디값 embeded-content을 줍니다. 높이를 제시해야.. 아이프레임 영역이 생성됩니다.

'프로그래밍 > Javascript' 카테고리의 다른 글

아이프레임에 높이가 바뀌는 제로보드xe 게시판 넣기 (1)	2016.02.05
셀렉트 박스 링크 걸기 (0)	2016.01.30
eval() (0)	2015.11.21
for 문 -- 별 삼각형 출력하기 (0)	2015.10.14
switch 문 (0)	2015.10.11

셀렉트 박스 링크 걸기

2016. 1. 30. 12:56

모든 옵션에 링크가 걸릴경우

링크 띠엄띠엄 걸 경우(위의 것은 value 하나라도 안넣은 option이 스크립트 에러나온다.)

<select name="select" onchange="javascript：go_url(this.options[this.selectedIndex].value);">
   <option selected> 계열사를 선택하세요</option>
   <option value="http://www.naver.com">네이버</option>
   <option value=http://www.daum.net>다음</option>
</select>

[출처]http://cafe.naver.com/bulsasinzod.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=44

'프로그래밍 > Javascript' 카테고리의 다른 글

아이프레임에 높이가 바뀌는 제로보드xe 게시판 넣기 (1)	2016.02.05
iframe resize jquery 아이 프레임 리사이징 소스 (0)	2016.02.02
eval() (0)	2015.11.21
for 문 -- 별 삼각형 출력하기 (0)	2015.10.14
switch 문 (0)	2015.10.11

eval()

2015. 11. 21. 12:31

eval 함수는 일부 프로그래밍 언어에서 제공하는 함수의 일종입니다.

문자열을 입력 받아 그 문자열을 expression으로 처리한 후 결과값을 반환하는 함수입니다.

위의 말을 풀어보면.. 아래와 같이 선택한 값을 그대로 알려줍니다.

1번을 선택하면 1번, 2번을 선택했으면 2번을 선택했다는 메시지창이 출력됩니다.

첨부파일 :eval.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        function fx1(){
            var f = window.document.checkform;
            var tt = "현재 ";

            for (var i = 1; i< 6; i++)
            {
                if (eval("f.count"+ i +".checked"))
                {
                    tt += i + "번 체크박스 ";
                }
            }

tt += "가 선택되었습니다";

            alert(tt);
        }
    </script>

'프로그래밍 > Javascript' 카테고리의 다른 글

iframe resize jquery 아이 프레임 리사이징 소스 (0)	2016.02.02
셀렉트 박스 링크 걸기 (0)	2016.01.30
for 문 -- 별 삼각형 출력하기 (0)	2015.10.14
switch 문 (0)	2015.10.11
alert 창 띄우기 (0)	2015.10.09

for 문 -- 별 삼각형 출력하기

2015. 10. 14. 13:37

C, C++ 프로그래밍 책에서 제일 흔하디 흔한 예제죠..

별만들기..

자바스크립트에서 for문을 사용하여 별 만들기가 됩니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var output = ""; for (var i=0; i<10 ;i++ )
        {
            for (var j = 10;j>i ;j-- )
            {
                output += ' ';

            }
         for (var j=0;j<2*i-1 ;j++ )
            {
                output += "*";
            }
            output += "\n";
        }

        alert(output);
    </script>
</body>
</html>

소스다운 받기 : for.html

'프로그래밍 > Javascript' 카테고리의 다른 글

셀렉트 박스 링크 걸기 (0)	2016.01.30
eval() (0)	2015.11.21
switch 문 (0)	2015.10.11
alert 창 띄우기 (0)	2015.10.09
부모창에 배너 띄우는 방법 (0)	2015.09.21

switch 문

2015. 10. 11. 00:00

자바스크립트 내에서도 switch 문을 사용할 수 있습니다.

아래와 같이 예를들면 숫자를 입력하여 나머지가 짝수냐 홀수냐로 나뉘게 됩니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var input = Number(prompt("숫자를 입력하세요:","숫자 : "));

switch (input %2)
        {
            case 0:
                alert("짝수");
                break;
            case 1:
                alert("홀수");
                break;
            default:
                alert("숫자가 아닙니다");
                break;
        }
    </script>
</body>
</html>

소스 다운받기 : switch.html

실행화면은 아래와 같습니다.

숫자 1을 입력했을 때 실행화면입니다.

'프로그래밍 > Javascript' 카테고리의 다른 글

셀렉트 박스 링크 걸기 (0)	2016.01.30
eval() (0)	2015.11.21
for 문 -- 별 삼각형 출력하기 (0)	2015.10.14
alert 창 띄우기 (0)	2015.10.09
부모창에 배너 띄우는 방법 (0)	2015.09.21

alert 창 띄우기

2015. 10. 9. 13:27

웹사이트를 하다보면 회원가입 혹은 잘못된 정보를 받았을 때 자바스크립트를 사용하여 alert 창을 띄우게 됩니다.

소스는 아래와 같으며, 예제는 12시 이전이면 오전, 12시 이후에는 오후를 띄우도록 하였습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var date = new Date();
        var hour = date.getHours(); if(hour < 12) {
            alert("오전입니다");
        }

        if (hour >=12)
        {
            alert("오후입니다");
        }
    </script>
</body>
</html>

소스 다운받기 : alert.html

아래 사진은 실행시킨 모습입니다. 현재 오후 1시 27분이기 때문에 오후라고 떴습니다.

'프로그래밍 > Javascript' 카테고리의 다른 글

셀렉트 박스 링크 걸기 (0)	2016.01.30
eval() (0)	2015.11.21
for 문 -- 별 삼각형 출력하기 (0)	2015.10.14
switch 문 (0)	2015.10.11
부모창에 배너 띄우는 방법 (0)	2015.09.21

부모창에 배너 띄우는 방법

2015. 9. 21. 11:26

홈페이지를 돌아다니시다보면 팝업창을 클릭했을 때, 부모창으로 링크가 보여지고 팝업이 닫혀지는 효과가 있는데 그것을 구현하는 소스입니다.

01. 팝업창의 Head태그 안에 다음 스크립트를 넣으세요.

<script language="JavaScript" type="text/JavaScript">

</script>

02. 다음과 같은 방식으로 팝업창에서 링크 설정

a href="javascript:linkToOpener('링크주소');"

윈도우 창과 다른 창과의 통신은 name속성으로 하게 되어 있습니다. 예를 들어 창을 띄울때 window.open("경로명", "윈도우이름");에서 윈도우 이름이 새롭게 만들어진 창의 이름이 됩니다. 그리고 이때 새로운 창을 만든 부모창을 opener window라고 합니다. 따라서 새로운 창과 부모창 간의 통신은 open window와 opener window간의 것이 되는 거죠.

스크립트를 보시면
window.opener && !window.opener.closed - 부모창이 존재하고 닫혀있지 않을때
window.opener.location - 부모창에서 이동할 주소
window.close(); - 창닫기

즉, 부모창이 존재하면 부모창에서 URL로 이동하고 열려 있는 창은 닫는다. 만약 부모창이 존재하지 않으면 팝업창은 그냥 닫혀 버립니다.

- 출처 : 지식인에서 soiyeon님의 답변 -
http://kin.naver.com/db/detail.php?d1id=1&dir_id=109&eid=zoGvuyHvmR50NZZqS+CzKxSZey/+3XKV&qb=xsu+97i1xak=

** 추가하자면 팝업창에서 부모창을 리로드 시키고자 할 때
opener.parent.window.location.reload();

** 팝업창에서 또 팝업창이 열렸을 경우 최하단의 웹페이지 리르드 시키고자 할 때
opener.opener.parent.window.location.reload();

'프로그래밍 > Javascript' 카테고리의 다른 글

셀렉트 박스 링크 걸기 (0)	2016.01.30
eval() (0)	2015.11.21
for 문 -- 별 삼각형 출력하기 (0)	2015.10.14
switch 문 (0)	2015.10.11
alert 창 띄우기 (0)	2015.10.09

CSS 적용방법

2015. 9. 5. 20:34

오랜만에 포스팅을 하네요~

지난시간 CSS 꾸미는 방법은 3가지가 있다고 했었죠?

1. 각 요소에 직접 적용하는 CSS가 있습니다.

이 방법은 웹 표준의 방법에서 보면 그리 좋은 방법은 아닙니다. HTML안에 하나씩 일일히 적용해야 하는 불편함이 있지만 특별하게 페이지 혹은 게시판을 만들 때 유용하게 사용될 때가 있습니다.

아래와 같은 예제를 하나 만들었습니다.

html보다 조금 복잡해보이죠?

<body> </body> 사이에 집어 넣은 이 예제는 <p> 태그를 사용했습니다. p는 paragraph의 약자로 <p></p> 사이 글자색인 파란색과 배경을 노란색으로 하였습니다.

<span></span>은 Inline Text Container (문장 단위로 텍스트 영역을 지정하는 것)"인데, 그 자체로는 아무 역할도 하지 않고, 문장의 특정 구역에 CSS스타일을 지정할 때 사용합니다.

DIV 태그의 역할과도 비슷하지만, DIV 태그는 사각형 박스 모양으로 구역을 지정하고, SPAN은 한 문장 단위입니다. 웹페이지 중에서, 어떤 태그도 달려 있지 않은 곳에, 뭔가를 지정하기 위해서는 SPAN 태그를 사용하면 됩니다. 다시 본론으로 돌아오면, font-size를 사용해서 폰트 크기를 변경해라 라는 뜻입니다.

결과를 보면 아래와 같습니다.

파일 예제 다운받기 :css_0.html

2. style요소를 활용한 방법

<body></body> 내에 CSS를 섞어서 쓰면 헷갈리고 불편할때가 있습니다. 이럴때는 <head></head>사이에 따로 모아 놓는 방법이 있습니다.

그 방법은 아래와 같습니다.

1번의 방법보다 <body></body>부분의 작업이 좀 편해지겠죠? 그런데 head부분에

<body></body> 내에 <p></p>로 감싼 부분은 파란색 글씨, 배경은 노란색이고 <span></span>으로 감싼 부분은 폰트가 24예요. 결과는 1번과 같습니다.

파일 예제 다운받기 :css_1.html

3. 외부 파일로 만들어서 연결하는 방법

제일 많이 사용하는 방법이고 관리하기도 편한 방법입니다. 2번의 <style> 부분을 따로 빼내서 .css 파일로 만들어서 HTML에서 불러오는 방법이예요.

1,2번과는 약간 다른 방법인데 외부 파일을 불러오기 위해서는 link라는 속성을 써야 합니다.

'rel' 속성은 현재 문서와의 관계를 나타내는 속성이고 'href'를 이용해서 CSS 파일의 경로를 지정합니다.

외부의 CSS 파일 내용은 아래와 같습니다.

간단하죠?

2번의 내용을 그대로 복사해오면 되요 @charset "utf-8";은 문자 코드셋으로 지정을 안하시면 문자가 깨져서 나올때도 있어요.

이렇게 하면 <p>나 <p span>만 바꿔주면 적용된 파일을 하나하나 바꿀 필요없이 한번에 바꿀 수 있는 정말 도움이 되는 방법이예요~

1,2번보다는 3번으로 공부하시는게 많은 도움이 되실꺼에요

다음 시간에는 CSS 문법 을 하나하나 배워보겠습니다

'프로그래밍 > CSS3' 카테고리의 다른 글

Box Model (0)	2020.01.08
CSS Syntax (0)	2020.01.07
CSS란? (0)	2015.08.16

PREV 1 2 3 4 5 NEXT

Nickoo's Blog