HTML/DreamWeaver CS5 (드림위버)

 

홈페이지 전달기능, 미적기능, 인터렉티브한 기능을 충족할 수 있는 홈페이지를 작성하는 시간입니다.

홈페이지 제작의 기본을 이루는 HTML을 기초로 웹 페이지를 만들고 웹에 게시할 수 있도록 합니다. 또한 홈페이지 제작 도구인 드림위버로 서버와 클라이언트간의 상호작용으로 멀티미디어, 스타일시트,템플릿,라이브러리,자바스크립트를 효과적으로 다룰 수 있도록 합니다. HTML과 드림위버의 핵심 기능을 체계적으로 심도 있게 다루는 시간이 될 것입니다.

 

체계적 수업 지도로 디자인을 전공/비전공 하신 분 모두가 쉽게 홈페이지를 완성 하도록 합니다. 스타일시트와 자바스크립트로 역동적인 홈페이지를 만듭니다. 웹디자이너의 포트폴리오,웹마스터의 사이트구축에 필요한 실무 예제로 수업이 이루어집니다. 드림위버를 이용한 개인포트폴리오,회사의 사이트 관리, 쇼핑몰 구축에 사용하는 고급 시능을 재밌게 수업합니다^^

 

드림위버란?

 

어도비 드림위버(Adobe DreamWeaver)는 매크로미디어가 개발한 웹 개발 응용프로그램이며, 현재 2005년에 매크로미디어를 인수하였던 어도비 시스템즈 소유 드림위버는 맥과 윈도 운영 체제를 둘다 지원 최근에 나온 버전들은 CSS, 자바스크립트, 다양한 서버 사이드 스크립팅, 그리고 ASP,NET,콜드 퓨전,자바 서버 페이지,PHP 등의 프로그래밍 언어 및 프레임 워크과 같은 웹 기술에 대한 지원을 포함. 현재는 어도비 크리에이티브 클라우드에서 무료로 다운로드하여 사용

 

드림위버는 툴을 다루는 것과 스킬습득, 연습이 중효합니다!

배우는 방법은 독학을 통해 배우거나 관련학교 학과,학원을 통해서 배울수 있습니다. 컴퓨터 능력이 어느정도 있고 시간이 여유로우시고,그림이 손으로 된다면 독학을 통해서 가능하답니다

 

 

 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

자바스크립트 - 타이머함수

 
 

 

 
타이머 함수
타이머 함수는 일정시간마다 혹은 지정한 시간에 특정 함수를 실행할 수 있도록 하는 함수입니다.

타이머 함수의 경우 setTimeout()과 setInterval() 두 가지가 있고 각 함수에 맞는 타이머 취소 함수가 있습니다.
사실 타이머 함수는 Window객체의 메서드이므로 어디서나 사용 가능한 전역 함수입니다.

 

setTimeout(Function, millisecond)

Function - 특정 시간이 되면 실행시킬 함수

millisecond - 실행시킬 시간

지금 시점으로 몇 밀리초 후에 실행할 것인지를 지정하며 밀리초(1/1000) 단위입니다.

일정 시간 후 지정한 함수를 한 번 실행합니다.


serInterval(Function, millisecond)

Function - 특정 시간이 되면 실행시킬 함수

millisecond - 실행 주기

몇 밀리초 마다 특정 함수를 실행할 것인지를 지정하며 밀리초(1/1000) 단위입니다.

넘긴 시간을 주기로 매번 함수를 실행합니다.


clearTimeout(참조값)

참조값 - 중지시킬 타이머의 참조값

(setTimeout()을 실행시키고 return 받은 값)

setTimeout()으로 지정한 타이머를 중지시킵니다.


clearInterval(참조값)

참조값 - 중시시킬 타이머의 참조값

setInterval()을 실행시키고 return 받은 값)

setInterval()로 지정한 타이머를 중지시킵니다.

 

setTimeout(Function, millisecond)

일정한 시간이 지나면 특정 함수를 한 번 실행할 수 있습니다.

다음은 1초 후 hello() 함수를 실행하는 코드입니다.
 

<!DOCTYPE html>
 
<html lang="kr">
<head>
    <meta charset="utf-8" />
    <title>타이머</title>
 
    <script>
 
        var hello = function() {
            alert("반가워요");
        }
 
        setTimeout(hello, 1000);
 
    </script>
 
</head>
<body>
    타이머 테스트 1초 후 실행
</body>
</html>

 

결과 - 페이지가 로딩되고 1초 후 알림창이 나타납니다.
 

clearTimeout(참조값)

    <script>
 
        var hello = function() {
            alert("반가워요");
        }
 
        //타이머를 걸고 해당 타이머에 대한 참조값을 timeout 변수에 저장
        var timeout = setTimeout(hello, 1000);
 
        //timeout 타이머를 취소시킴
        clearTimeout(timeout);
 
    </script>

Colored by Color Scripter


결과 - 페이지가 로딩되고 1초가 지나도 아무 반응도 일어나지 않습니다. 타이머가 취소 되었기 때문입니다.

 

serInterval(Function, millisecond)

일정 시간마다 특정 함수를 실행 시킵니다.

 

<head>
    <meta charset="utf-8" />
    <title>타이머</title>
 
    <script>
 
        var hello = function() {
            alert("반가워요");
        }
 
        setInterval(hello, 1000);
 
    </script>
 
</head>
<body>
    타이머 테스트 1초마다 실행
</body>
</html>

 

결과 - 1초마다 알림창이 뜹니다.(확인 버튼을 계속 눌러야 합니다)

 

clearInterval(참조값)

실행한 setInterval() 함수를 중지시킵니다.


    <script>
 
        var hello = function() {
            alert("반가워요");
        }
 
        var interval = setInterval(hello, 1000);
 
        //setTimeout을 통해 3초 후 setInterval()을 중지
        setTimeout(function () {
            clearInterval(interval);
        }, 3000);
 
    </script>

Colored by Color Scripter
 

결과 - 알림창이 1초마다 한번씩 3번까지 뜨다가 더이상 나타나지 않게 됩니다


블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

[JavaScript/자바스크립트] 조건문(if 문, if ~ else, else if문 ]

 

조건문

 조건문이란 특정 조건에 따라서 프로그램이 다르게 작동하도록 제어하는 문법을 의미한다.
 JavaScript에서는 크게 두 종류의 조건문을 지원한다. if 문과 switch ~ case 문이다.

if 문

 if 문을 정의하는 방법은 아래와 같다.


 위와 같이 if 뒤에는 괄호가 오고 조건식이 온다. 조건식은 Boolean 형인 true나 false의 값을 리턴하는 값만이 올수 있다. 이 조건식이 참(true)일 경우에만 블록 안의 코드가 실행된다


if ~ else 문

 if 문은 참(true)의 조건만을 출력한다. 조금 더 다양한 동작을 하기 위해서는 if ~ else 문을 사용할 수 있다. if ~ else 문을 정의하는 형식은 아래와 같다.


 if 절은 똑같다. 조건식이 참인 경우에 코드를 실행한다. else 절에는 조건식이 거짓(false)인 경우에 코드가 실행된다

if ~ else if ~ else 문


 다양한 조건에 따라서 실행되는 조건문을 정의하기 위해서는 else if 문을 사용하면 된다. 정의하는 형식은 아래와 같다.


 위와 같이 if ~ else 사이에 else if 절을 추가하면 된다. else if는 몇 개가 와도 상관없다. 주의할 점은 if와 else 사이에서만 정의할 수 있다. 또한 조건식이 여러 개를 만족하는 경우라도 조건을 먼저 만족하는 절에서만 실행이 되고 조건문은 종료된다. 즉, 1개의 블록만이 실행된다. 참고로 else는 생략하여도 상관없다.

 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,


[javascript/자바스크립트] 연산자(operator)
 

 

 


자바스크립트 연산자(operator)


 이번 포스팅에서는 javascript에서 사용되는 연산자에 대해서 알아보도록 하겠다. 연산자란 값에 대해 작업을 컴퓨터에게 지시하기 위해 사용되는 기호를 의미하며, 아래와 같은 종류들이 있다.


연산자와 연산자 기호
 

산술 연산자
 
+, -, *, /, %
 

대입 연산자
 
=, +=, -=, /=, *=, %=, >>=, <<=, &=, |=
 

관계 연산자
 
>, >==, <, <==, ==, ===, !=
 

조건 연산자
 
조건식?구문1:구문2
 

논리 연산자
 
!, &&, ||
 

증감 연산자
 
++, --
 

산술 연산자

 

 산술 연산자는 말 그대로 숫자를 더하거나 빼는 등의 수학적 용도의 연산자를 의미한다. 다른 언어에서도 동일하게 사용되며, 대부분 알고 있는 기호일 것이다.


산술연사자 기호 와 내용
 

+
 
더하기
 

-
 
빼기
 

*
 
곱하기
 

/
 
나누기
 

%
 
나머지
 


대입 연산자


대입 연산자는 변수에 특정 값을 저장하기 위해 사용하는 연산자를 의미한다. 프로그래밍 언어 공부가 처음이라면 어렵고 생소할 수 있으나 굉장히 많이 사용되며 편리하다.

 

연산자와 연산자 설명
 

a=b
 
우항(b)을 좌항(a)에 대입
 

a+=b
 
좌항(a)과 우항(b)을 더한 후 좌항(a)에 대입(a = a + b)
 

a-=b
 
좌항(a)을 우항(b)으로 뺀 후 좌항(a)에 대입(a = a - b)
 

a/=b
 
좌항(a)을 우항(b)으로 나눈 후 a에 대입(a = a / b)
 

a*=b
 
좌항(a)을 우항(b)과 곱한 후 a에 대입(a = a * b)
 

a%=b
 
좌항(a)을 우항(b)으로 나눈 후 나머지를 a에 대입(a = a % b)
 

a>>=b
 
a만큼 b를 오른쪽 시프트 연산 수행 후 결과를 a에 대입
 

a<<=b
 
a만큼 b를 왼쪽 시프트 연산 수행 후 결과를 a에 대입
 

a&=b
 
a와 b를 AND 연산 후 a에 대입
 

a|=b
 
a와 b를 비트 OR 연산 후 a에 대입
 


 

 


블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,


[자바스크립트] 변수 선언 및 할당 - var
 

javascript 변수(variable)
 변수는 메모리에 데이터를 저장하기 위한 기억 공간을 의미한다. 즉, 데이터를 담아놓는 그릇이라고 생각하면 된다. 또한 변수에 담긴 데이터는 필요에 따라 수시로 데이터를 변경시킬 수 있다.


변수의 선언과 대입
 자바스크립트에서 변수를 선언하는 방법은 [var 변수명;]으로 사용한다. 예를 들어 var myvar;와 같이 변수를 선언하면 myvar라는 변수를 지금부터 사용하겠다는 의미가 된다. 변수를 선언하면 값을 대입할 수 있고, [변수명 = 데이터;]로 값을 대입한다. 이때 =은 같다는 의미가 아니고 우항(데이터)을 좌항(변수)에 대입한다는 의미이다.


 일반적으로 변수의 선언과 대입은 한 번에 작성한다. [var 변수명 = 데이터;] 와 같이 작성하면 된다. 변수에 문자열의 데이터를 저장하기 위해서는 쌍따옴표("")나 외따옴표('') 사이에 데이터를 입력하고 숫자 데이터를 저장할 때는 ""와 ''를 사용하지 않고 숫자만 입력한다.

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
    <title>변수</title>
</head>
<body>
    <script>
        var str1 = 'hello';            // 문자열 변수 선언/할당
        var str2 = " javascript!";     // 문자열 변수 선언/할당
        var a = 3;                     // 숫자 변수 선언/할당
        var pi = 3.14;                 // 숫자 변수 선언/할당
       
        document.write(str1 + str2 + "<br>"); // 웹 브라우저에 데이터 출력
        str2 = " 자바스크립트!";                // str2 변수값 변경
        document.write(str1 + str2);           // hello 자바스크립트! 출력
    </script>
</body>
</html>
 

 변수를 선언할 때 var를 생략해도 가능하다. 하지만 var는 유효범위(scope)에 영향을 미치기 때문에 의미에 대해 정확한 이해가 있을 때까지는 var를 명시해주도록 하자.

변수명 작성 시 주의사항

 1. 변수명은 대/소문자를 구분한다. 즉, var A와 var a는 다른 변수를 의미한다.
 2. 변수명에는 영문자, 숫자, $, _를 사용할 수 있다. 하지만 변수명의 첫 글자는 숫자로 시작할 수 없다.
 3. 자바스크립트에 설정된 예약어는 변수명으로 사용할 수 없다.(for, while, if, this, new 등)

 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

[JavaScript 강좌] 데이터 타입 문자열(String)

 

 

 

 

문자열(String)

 

문자열을 변수의 값으로 사용하려면 작은 따옴표(') 또는 큰 따옴표(")로 감쌉니다.

var jb = '하나님 예수님 성도';

var jb = "하나님 예수님 성도";

 

어떤 것으로 해도 상관 없으나 작은 따옴표로 시작해서 큰 따옴표로 끝나거나 큰 따옴표로 시작해서 작은 따옴표로 끝나면 안됩니다.

 

문자열에 작은 따옴표가 있다면 큰 따옴표로, 큰 따옴표가 있다면 작은 따옴표로 감쌉니다.

var jb = '하나님 "예수님" 성도.';

var jb = "하나님 '예수님' 성도.";

 

만약 작은 따옴표와 큰 따옴표가 같이 있다면 역슬래시를 이용합니다.

var jb = '하나님 "예수님" \'성도\'.';

 

문자열에 역슬래시가 들어가야 한다면 역슬래시를 두번 입력합니다.

var jb = '하나님 \\예수님\\ 성도.';

 

예제

<!doctype html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>JavaScript | String</title>

<script>

var jb1 = '1. 하나님 예수님 성도';

var jb2 = "2. 하나님 예수님 성도";

var jb3 = '3. 하나님 "예수님" 성도.';

var jb4 = "4. 하나님 '예수님' 성도.";

var jb5 = '5. 하나님 "예수님" \'성도\'.';

var jb6 = '6. 하나님 \\예수님\\ 성도.';

</script>

</head>

<body>

<script>

document.write( '<p>' + jb1 + '</p>' );

document.write( '<p>' + jb2 + '</p>' );

document.write( '<p>' + jb3 + '</p>' );

document.write( '<p>' + jb4 + '</p>' );

document.write( '<p>' + jb5 + '</p>' );

document.write( '<p>' + jb6 + '</p>' );

</script>

</body>

</html>

 

 

               

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

[JavaScript 강좌] 주석(Comment) 넣기

 

 

 

자바스크립트(JavaScript) 코드에 주석을 넣는 방법은 두가지입니다.

하나는 한 줄을 주석 처리하는 것이고, 또 하나는 여러 줄을 주석처리 하는 것입니다.

한 줄 주석

한 줄 주석은 //로 만듭니다.
// single line comment

// 앞은 코드로 처리하고, // 뒤의 문자들이 주석이 됩니다. 예를 들어
var jb = 'hi'; // Comment

라고 하면 빨간색은 코드로 인식합니다.

코드에 관한 간략한 설명을 붙일 때 유용합니다.

여러 줄 주석

여러 줄을 주석으로 만들 때는 /*와 */로 둘러쌉니다.
/*
  Comment 1
  Comment 2
​*/

위와 같이 해도 주석 처리가 되나, 보통 다음과 같은 모양으로 만듭니다.
/*
 * Comment 1
 * Comment 2
​ */

주의할 점

자바스크립트 주석은 소스보기를 하면 다 보입니다.

따라서 개발 과정에서 작성했지만 공개되면 안되는 주석들이 있다면 삭제를 해야합니다.

 

               

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

[프로그래밍] return은 값을 반환하는 명령어

 

함수 안에서 명령문들을 실행하다가 return을 만나면 함수를 빠져나가게 됩니다.

그리고 return문에 있는 것을 반환값을 돌려 줍니다.

 

예를 들어서,

function hey(a,b){

add = a+b;

return add;

}

위와 같이 작성을 한다면

hey함수는 add변수의 값을 반환 합니다. 반환된 값을 보기 위해서는 당연히 출력문안에서 함수를 호출 해야 겠죠?

document.write(hey(1,2));

위와 같이 출력 한다면 return문에 add가 있으므로 add값인 3이 출력이 됩니다.

Source

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>자바스크립트</title>

<script>

function hey(a,b){

add = a+b;

return add;

}

document.write(hey(1,2));

</script>

</head>

<body>

</body>

</html>

이 예제 실행 & 수정

 

return문에 add가 아닌 20을 넣어 봅시다.

그렇게 하면 20을 반환 합니다.

 

 

위 예제 실행값은 20

 

이것으로 return뭌에 대한 강좌를 마치겠습니다.

 

........................................................................................................................

직장을 다니면서 투잡 ( 재택알바 / 부업 )으로 월급만큼 수익을 얻을 수 있는 곳을 소개합니다.

 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

함수 안에는 계산식을 넣어도 되고 필요하신 명령문을 작성하시면 됩니다. ^^

 

그럼 이번엔 5+3을 수행하는 함수를 만들어 봅시다.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>자바스크립트</title>

<script>

function add(){

add = 5+3;

document.write(add);

}

add();

</script>

</head>

<body>

</body>

</html>

 

그럼 이번엔 24+10을 수행하는 함수를 만들어 봅시다.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>자바스크립트</title>

<script>

function add(){

$add = 24+10;

document.write($add);

}

add();

</script>

</head>

<body>

</body>

</html>

 

위 같이 5+3을 계산하는 함수를 만들어봤고 24+10을 하는 함수도 만들어 봤습니다. 이렇게 같은 더하기 기능을 하는데 더하는 숫자가 다르다고 해서 함수를 또 만들거나 하면 함수를 만드는 의미가 없습니다.

 

이것을 설명하기 위해서 같은 기능을 함수를 갖는 예제 소스를 2번 만들어봤습니다.

 

그럼 위와 같이 같은 기능을 하는데 입력값이 다른 경우는 어떤 방법을 사용해야 할까요? 바로 함수를 호출 할때 값도 같이 보내서 호출 하는 방법이 있습니다.

 

, 24+10을 한다고 하면 더하기 기능은 함수에 지정 해두고 2410을 함수 호출시에 보내면 됩니다. 그 방법은 함수를 호출 할때에 아래와 같이 괄호 안에 값을 적어 줍니다.

 

add(24,10);

 

위와 같이 함수를 호출 하면 함수 호출 시에 2410add함수에 넘어 가게 되며 24 10은 계산식에 의해 합이 계산되고 출력문에 의해 계산된 값이 출력 됩니다.

 

그렇다면 위와 같이 함수를 호출 할때 값을 보내준다면 함수를 만들때는 어떻게 해야 할까요?

 

보내주는 수만큼 함수의 괄호 안에 변수를 넣어 주면 됩니다. 24a라는 변수에 넣고 10b라는 변수에 넣기 위해서

 

JavaScript

function add(a,b){

}

 

위와 같이 선언을 해주면 됩니다. 위에 있는 a, b는 파라미터(매개변수)라고 부릅니다.

그러면 24a의 값이 10b의 값이 됩니다.

실제 예문을 통해 알아 봅시다.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>자바스크립트</title>

<script>

function add(a,b){

add = a+b;

document.write(add);

}

add(24,10);

</script>

</head>

<body>

</body>

</html>

 

나중에 규모가큰 작업을 한다면 소스의 재활용성이 높아져서 편리하게 사용하실수 있습니다.

숫자외에도 문자열도 되고 하니 테스트 해보시기 바랍니다.

function string_output(str){

document.write(str);

}

string_output("함수에 들어가서 저는 출력 될게요.");

 

예제 소스로 본다면,

 

결과가 잘 나오시죠 ?

 

 

 

아참 그리고 좋은 정보 하나 알려 드리겠습니다. 요즈음  많은 분들이 하고 있는 투잡입니다.

투잡(재택알바/부업)을 원하신다면 제가 도와드릴 수 있습니다. 우선 상담을 받아보세요

[여기]를 누르시고 이름과 연락처로 상담신청을 하시면 자세히 설명을 받으실 수 있습니다.

그리고 그곳 저의 홈페이지 오른쪽에 보시면 전화번호가 있으니 연락주세요 감사합니다.

 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

자바스크립트 / 함수 만들기

 

먼저 function 라고 적어 줍니다. 그리고 함수의 이름을 적은후 괄호를 열고 닫고 그리고 대괄호를 열고 닫고 끝!!

function functionName(){

}

 

위와 같습니다. 그리고 {}안에 실행할 명령문을 적어주면 됩니다.

 

그리고 함수는 함수를 호출해줘야만 함수가 작동합니다. 즉 저렇게 작성만 하면 작동하지 않습니다.

 

함수 호출 하기

 

함수호출 하는 방법은 함수명() !

 

,

functionName();

입니다.

 

그럼 헬로우 월드를 출력하는 함수를 만들고, 그 함수를 호출을 해봅시다.

function hello(){

document.write("Hello World!!");

}

 

위와 같이 hello라는 함수를 만들고 헬로우 월드 출력문을 {}안에 넣어 줍니다.

 

그리고 함수호출은

hello();

 

위와 같이 작성하면 호출이 됩니다.

 

예문을 통해서 알아봅시다. 함수 호출문이 없는 소스 입니다.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>자바스크립트</title>

<script>

function hello(){

document.write("Hello World!!");

}

</script>

</head>

<body>

</body>

</html>

 

이 소스를 웹에서 보기 버튼을 눌러 실행해 보시면 아무것도 출력이 안되는 것을 보실 수 있습니다.

 

그럼 이번엔 함수 호출문을 넣어서 테스트 해봅시다.

 

 

위의 예제를 실행해 보시면 출력문인 hello world가 보이실 것입니다.

 

아참 그리고 좋은 정보 하나 알려 드리겠습니다. 요즈음  많은 분들이 투잡을 하고 있는데 제가하고 있는 투잡입니다.

상담해 보시고자 하시면 제가 도와드릴 수 있습니다. 우선 상담을 받아보세요

[여기]를 누르시고 이름과 연락처로 상담신청을 하시면 자세히 설명을 받으실 수 있습니다.

그리고 그곳 저의 홈페이지 오른쪽에 보시면 전화번호가 있으니 연락주세요 감사합니다.

 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,