confirm()함수에 대하여 알아봅니다.

 

예를 들어 어떠한 게시물을 삭제할때 정말로 삭제하시겠습니까? 라는 문구를 보신적이 있을텐데요.

 

그것이 바로 confirm창입니다.

confirm 많이들 보셨죠?

 

이것을 띄우기 위해서는 매우 간단합니다.

JavaScript

confirm("표시할 문구");

실제로 적용 해서 볼까요?

 

코드는 아래와 같이해 보세요

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

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

<script>

confirm("안녕하세요.");

</script>

</head>

<body>

</body>

</html>

 

 

confirm()함수는 어떤 값을 내보낼(반환)까요 ?

confirm()함수는 Boolean타입의 값을 반환 합니다.

Boolean의 값으로는 truefalse가 있죠?

그럼 변수를 선언하고 변수의 값에 confirm함수를 넣어서 실험해 봅시다.

취소와 확인을 눌렀을때 어떤 값을 출력 하는지에 대해서.

JavaScript

var con_test = confirm("어떤 값이 나올까요. 확인을 눌러보세요.");

document.write(con_test);

 

Source는 아래와 같이 코딩합니다.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

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

<script>

var con_test = confirm("어떤 값이 나올까요. 확인을 눌러보세요.");

document.write(con_test);

</script>

</head>

<body>

</body>

</html>

결과값이 어떻게 나오는지 코드를 실행해 보시기 바랍니다.

 

 

위의 소스를 실행해 보면 confirm()함수에 대한 버튼을 클릭했을 경우 화면에 확인을 누르면 true가 취소를 누르면 false가 출력이 됩니다.

 

if문을 활용 하여 결과에 대해 명령문 처리하고자 한다면

위의 소스에서 보면 con_test 변수를 선언하고 값으로 confirm()함수를 넣었더니 그에 대한 결과 값이 con_test에 대입이 되었습니다. 그리고 document.write를 사용하여 값을 출력 하니 그 값이 나왔구요.

 

if문을 사용하여 con_test == true 또는 con_test == false 라는 조건문을 줄 수 있습니다. 해볼까요

 

JavaScript

var con_test = confirm("어떤 값이 나올까요. 확인을 눌러보세요.");

if(con_test == true){

document.write("확인을 누르셨군요");

}

else if(con_test == false){

document.write("취소를 누르셨군요.");

}

 

 

그럼 다음 예제코드를 유심히 보시고 확인을 해보세요

Source

 

 

결과값은

 

 

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

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

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

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

 

블로그 이미지

itworldkorea

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

,

오늘은 switch 문에 대해서 학습합니다.

switch문도 if문 처럼 조건문중 하나에 속합니다. 사용법은
switch (변수명){
case 값A :
값A일때 실행할 명령문;
break;
case 값B :
값A일때 실행할 명령문;
break;
case 값C :
값A일때 실행할 명령문;
break;
case 값D :
값A일때 실행할 명령문;
break;
case 값E :
값A일때 실행할 명령문;
break;
default :
위의 값 A ~ E 모두 아닐때 실행할 명령문;
}
=====================
값은 문자열이 될수도 있고 숫자가 될수도 있고 합니다. ^^

위의 사용법만 보면 잘 모르니 실제 예제를 통해서 알아봅시다.

 

위 결과값 ? I Love disneyland

 

블로그 이미지

itworldkorea

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

,

if문

조건문 중에 하나인데요.
모든프로그래밍에서 사용하는 것이기때문에
잘 학습하시기 바랍니다.
예를들면,java,sql,mysql,등 다양한 곳에서 쓰이는 물건입니다.

사용하는 방법은 조건식이 아래와 같습니다.

if(조건식){
    조건식이 참이면 구동할 소스 입력
}


예제를 보면서 설명을 드리면

소스의 내용은 변수 a 의 값이 100 이면 a의 값은 100 입니다. 라는 문자열을 출력합니다

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트</title>
<script>
a = 100;
if(a == 100){
  document.write("a의 값은 100 입니다. ");
}
</script>
</head>
<body>
</body>
</html>

 

if의 조건문에서 같은가를 조건으로 사용할때는 ==(= 두번)를 사용합니다.
서로 값이 같은 지를 확인후 참이면 실행 아니면 미실행 입니다.

else if

else if문은 위의 if문에서 조건이 참이 아닐 경우 다른 조건을 내세울때 사용합니다.
그래서 이미 앞에서 작성한 if문과 짝이 됩니다.

위의 조건문에서는 a가 100 이면이죠 만약 a가 20이라고 하면 조건에 벗어 나게 되는데요.
그때 다른 조건 a가 20 이면 의 조건을 더 붙일 수 있습니다.

예문을 통해보면,

if의 조건문에서 같은가를 조건으로 사용할때는 ==(= 두번)를 사용합니다.
서로 값이 같은 지를 확인후 참이면 실행 아니면 미실행 입니다.

블로그 이미지

itworldkorea

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

,

오늘은  연산자에 대해서 학습합니다.

 

1) 논리 연산자

논리 연산자는 참인지 거짓인지를 나태내어 줍니다.

종류

AND(&,&&)

OR(|,||)

XOR(^)


AND 연산자는 모든 값이 참 일때 참을 뱉어냅니다.

OR 연산자는 값중에 하나라도 참 일때 참을 뱉어 냅니다.

XOR 연산자는 서로 값이 다를때 참을 뱉고 서로 값이 같다면 거짓을 뱉습니다.

아래의 표를 보면 이해가 쉽습니다.
 A가 거짓 B가 거짓 일때 AND연산자는 거짓을 알려주고 OR도 거짓 XOR도 거짓을 알려주는 구나 이렇게 이해 하시면 됩니다.

이유는 둘다 참일때 AND연산자는 참을 알려주고 OR는 하나라도 참이면 참을 알려주고 XOR는 서로 다를때 참을 알려주기 때문입니다.

 

2) 증감 연산자

증감 연산자의 종류에는 2개가 있습니다.

증가를 나타내는 ++와 감소를 나타내는 --가 있습니다.

서로 각각 1을 증가시키거나 1을 감소 시키는 기능을 하는데요.

a라는 변수가 있다고 할때

앞에 위치하거나 뒤에 위치하거나 할 때의 차이점을 나타냅니다.

예를 들어

++a, a++, --a, a--

위와 같이 사용을 하는데요.

++a 는 먼저 자신을 1증가 시키고 다른 연산을 시작하며

a++ 는 먼저 다른 연산을 한후 자신을 1 증가 시킵니다.

소스를 통하여 비교를 해봅시다.

 

<html>
<head>
<title></title>
<script>
a = 10;
b = ++a;
document.write(b);
</script>
</head>
<body>
</body>
</html>

결과값은 11

 

3)관계연산자

관계 연산자는 초등학교시절 배운거라서 쉽습니다. 부등호 아시죠? ^^

관계 연산자의 종류는 다음과 같습니다.

<크다.

<= 크거나 같다.

> 작다

> 작거나 같다

== 같다(===)

!= 같지 않다.(!==)

즉 3<4 라는 식이 있다면 거짓인 false를 출력 하게 됩니다.

그리고 4 < 3 이라는 식이 있다면 참인 true가 출력 됩니다.

같다에는 == 과 === 가 있죠. 서로 같으면 참을 보여줍니다.

같지 않다에는 !=과 !== 가 있죠 서로 같지 않으면 참을 보여줍니다.

== 과 === 의 차이 그리고 != 과 !== 의 차이는 무엇일까요?

== 은 값이 같다면 참이지만 ===은 값과 타입까지 같아야 참입니다.

!= 은 값이 다르면 참이지만 !==은 타입도 다르고 값도 달라야 참입니다.

여러 가지 식을 써서 한번 확인해보죠.

 

4) 조건 연산자

변수 = 조건?true:false;

변수 = 조건?true:false; 조건이 true면 true를 대입하고 false면 false를 변수에 대입하는데요.

예를 들어,

number = 10>5?"number":"string";

위의 식을 보면 10>5가 크면 number라는 문자열을 number변수에 대입하고 아니라면 string라는 문자열을 대입하라는 것입니다. 10은 5보다 크므로 number이라는 문자열을 number 변수에 대입합니다.

다른 예

number = 10>5?10:5;

위의 식은 10이 5보다 크면 10을 number에 대입 아니면 5를 대입하는 식입니다. 이제 아시겠죠?

 

위 결과값은 10

 

블로그 이미지

itworldkorea

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

,

글로벌 변수, 로컬 변수

 

var

 

var는 변수를 선언할때 사용합니다.

변수 선언할때

var 변수명 = 변수의 값;

 

 

var를 붙이지 않아도 사용 가능 합니다.

 

일단 글로벌 변수와 로컬 변수는 이름에서 보듯이 글로벌 변수는 어디에서나 사용 가능한 변수이며 로컬 변수는 특정 지역에서만 사용하는 변수 입니다.

 

여기에서 말하는 특정지역은 함수를 말합니다. 자신이 만든 특정한 함수 안에서만 활동하는 함수는 로컬 함수로 함수 밖에서는 사용을 못하지요. 하지만 글로벌 함수는 이 함수 저함수 함수가 아닌곳에서도 사용이 가능 하답니다.

 

글로벌 변수 glo_var을 선언하고 함수 안에 로컬변수 local_var을 선언 해서 함수 밖에 출력문을 이용하여 glo_var 변수를 출력하는 예제입니다

 

<html>

<head>

<meta charset="utf-8" />

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

<style type="text/css">

</style>

<script type="text/javascript">

glo_var = 10;

function hello(){

local_var = 20;

}

document.write(glo_var);

</script>

</head>

<body>

</body>

</html>

 

 

위의 소스를 실행해보면 변수 glo_var의 값인 10이 출력되는걸 보실 수 있습니다.

 

그럼 위의 소스에서 출력문의 변수를 로컬 변수로 변경하여 값이 출력 되는지 안되는지 한번 해봅시다.

 

결과는 당연히 로컬변수이기 때문에 출력이 안됩니다만 그래도 눈으로 보고 이해를 해봅시다.

 

<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트</title>
<style type="text/css">
</style>
<script type="text/javascript">
 
glo_var = 10;
function hello(){
local_var = 20;
}
document.write(local_var);
 
</script>
</head>
<body>
</body>
</html>
위의 소스를 실행 해보면 결과에 아무것도 출력이 안되는걸 보실 수 있습니다. 그 이유는 로컬 변수를 해당 함수 밖에서 실행을 했기 때문이죠.

 

<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트</title>
<style type="text/css">
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js" ></script>
<script type="text/javascript">
 
glo_var = 10;
function hello(){
var local_var = 20;
local_var2 = 30;
}
document.write(local_var2);
 
</script>
</head>
<body>
</body>
</html>

 

결과값은 40이나옵니다.

 

블로그 이미지

itworldkorea

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

,

함수정의 함수선언,함수호출

 

함수 선언을 위해 funciton을 적은후 함수의 이름을 적어 줍니다. 그리고 괄호를 열고 닫고 그 후 대괄호를 열고 닫고 해주며 대괄호 안에 실행할 명령문들을 적습니다.

 

예를 들어 함수의 이름을 poly라고 해봅시다.

function poly(){

}

 위와 같이 function 후에 poly를 적고 괄호를 열고 닫고 그후 대괄호를 열고 닫고 합니다. 그럼 poly라는 함수가 생성된것입니다.

 

함수를 생성을 했는데 위와 같이 실행을 한다면 과연 실행이 될까요. 안됩니다. 함수를 따로 호출을 해야 하는데요 함수를 호출할때는 함수명(); 입니다.

 

함수 호출

함수명();

예를 들어 위와 같이 poly라는 함수를 만들었다면

poly(); <== 입니다.

  

소스를 통하여 테스트 해봅시다.

 

우선 함수를 만들어 봅시다. 함수는 hello world를 출력하는 함수 입니다.

function hello(){

document.write("Hello world");

}

 

아래의 소스는 함수는 만들었으나 함수를 호출하는 코드는 없습니다. 결과를 통하여 한번 체험 해보세요. 결과가 아무것도 안나오면 정상입니다.

 

<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트</title>
<script>
function hello(){
    document.write("Hello world");
}
</script>
</head>
<body>
</body>
</html>
우선 함수를 만들어 봅시다. 함수는 hello world를 출력하는 함수 입니다.
function hello(){
document.write("Hello world");
}


아래의 소스는 함수는 만들었으나 함수를 호출하는 코드는 없습니다. 결과를 통하여 한번 체험 해보세요. 결과가 아무것도 안나오면 정상입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트</title>
<script>
function hello(){
    document.write("Hello world");
}
</script>
</head>
<body>
</body>
</html>


이 예제 실행 & 수정

위의 소스를 타이핑 해보시거나 이 소스를 웹에서 보기 버튼을 눌러 테스트를 해보시면 결과 화면에 아무것도 안나오는 것을 알 수 있습니다.

그럼 다음의 함수 호출문을 사용하여 결과를 확인해 봅시다.
    hello();


위의 소스는 hello라는 함수를 호출하는 함수 입니다. 그럼hello라는 함수가 호출되므로 hello함수 안에 있는 출력문이 실행합니다.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트</title>
<script>
function hello(){
  document.write("Hello world");
}
hello();
</script>
</head>
<body>
</body>
</html>

위 소스의 결과를 보면 hello함수가 작동하여 hello world라는 문구가 출력하는 것을 볼 수 있습니다.

 

 

 

블로그 이미지

itworldkorea

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

,

변수명 선언 법칙

변수명은 자유롭게 이름을 지을수 있다

그러나 변수명 선언 법칙은 존재합니다.
 
1. 변수명은 영문의 대문자와 소문자를 구별한다.

2. 변수명에는 영문과 숫자과 언더바(_)만 들어간다.
 
3. 변수명의 첫 문자는 숫자가 올 수 없습니다

4. 예약어는 사용 할 수 없습니다.. (예, if,for,while등 외 다수

 

예약어의 종류 다음가 같은 것들입니다.

 


사용할 때 주의 사항
예를 들어 다름과 같은변수명은 사용 할 수 없습니다.
1hi = "안녕";    변수명의 첫글자가 숫자이므로 안됨
if = "만약";   예약어를 사용했으므로 안됨
kim+hong = "안녕";  +기호가 있으므로 안됨

블로그 이미지

itworldkorea

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

,

변수를 이용하여 계산하기

그럼 이번엔 변수를 이용하여 사칙 연산을 해봅시다.

예를 들면 a 에 5를 대입 b에 10을 대입 하여
c에 a 와 b를 더하기를 대입 하여 결과를 보는건데요.

어떤 말일지 몰라서 소스로 살펴 봅시다.

a = 5; a에 5를 대입
b = 10; b에 10을 대입
c = a + b; c에 a+b를 대입 즉 a의 값은 5이고 b의 값은 10이며 a+b를 하면 15겠죠.
즉 c는 a와 b를 합한값인 15라는 값을 갖게 됩니다.
document.write(c); c의 값을 출력 합니다.

<script>
    a = 10;
    b = 10;
    c = a + b;
    document.write(c);
</script>


결과값을 출력해보면 20이 출력될 것입니다.
이번엔 4칙연산과 나누기 값을 구해주는 소스를 보면

더하기는 +

빼기는 -

곱하기는 *

나누기는 /

나머지는 %

나머지란 5 나누기 3을 했을때 나머지가 2이죠 그 나머지 값을 구해주는 거랍니다.

위 내용을 학습한 다음 아래 내용도 확인해 보세요

 

 

 

위 내용의 결과입니다.

 

 

블로그 이미지

itworldkorea

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

,

변수란 ?

어떤 값을 저장하기 위한 공간 입니다.

그럼 예를 들어 어떤 값을 10 이라고 해봅시다.

그럼 어떤값이 10이니 10을 저장하기 위한 어떤 공간 에서 어떤 공간이 바로 변수이죠.

그 공간을 a라고 하고 싶다면 a라고 작성을 하면 됩니다.

그럼 a 라고 하고 싶다면 a 라고 하고 a에 어떤 값인 10을 저장 하려면 어떻게 할까요.

바로 = 를 이용 합니다. 어떤 공간인 a 를 작성하고 저장하는 =을 쓰고 어떤 값인 10을 작성 합니다.
다음과 같이하면 됩니다
a = 10;

숫자를 어떤 값으로 한다면 10이라고 적으면 되며,

값을 안녕하세요.라고 문자로 지정한다면 어떻게 할까요 바로 ""로 감싸 줍니다.
a = "안녕하세요.";

JavaScript
num = 10;
str = "안녕하세요.";
document.write(num);
document.write("<br />");
document.write(str);
위에 소스를 보면 num이라는 변수를 선언하여 값을 10 을 주었고,
str이라는 변수를 선언해 안녕하세요 라는 문자열을 값으로 주었습니다.

document.write("<br />");보기 편하게 하위 하여 태그를 넣어줍니다.
태그는 ""안에 감싸서 사용 가능 합니다.

 

아래 자바스크립트 코드를 보고 따라해 보세요

 

 

 

결과값을 표하면 아래와 같습니다.

 

앞으로 프로젝트 전자상거래 홈페이지 작업할 때 자바스크립트는

유용하게 사용될 때가 있으니 잘 익혀두시기 바랍니다.

 

 

블로그 이미지

itworldkorea

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

,

 

[자바스크립트] javaScript 경고,알림 창 띄우기


웹 서핑을 하시면서 따로 웹상에 띄어지는 작은 박스를 한번쯤은 보신적 있을것입니다.

오늘은 이 alert창을 띄우는 방법에 대해서 알아봅시다.

JavaScript
alert('hi');


위의 소스를 script태그 안에 넣으면 박스가 띄어지고 hi라는 문구가 출력 됩니다.

문자열을 입력할때는 따옴표로 문자열을 감싸주세요.

소스를 타이핑 해보면서 체험해 봅시다.

JavaScript
<script>
alert('hi');
</script>
위와 같이 스크립트 태그 안에 자바스크립트 소스를 넣어 주시면 됩니다.

------------------------
alert()창에서 연산하기

alert()창에서 어떤 연산을 해보는것도 가능 합니다. 예를 들어 5+3을 작성하면 결과인 8을 보여줍니다.

바른예 : alert(5+3);숫자로 인식 하기 때문에 5+3을 연산합니다.
나쁜예: alert('5+3'); ''로 감싸져 있어 문자열로 인식 하므로 연산하지 않습니다.

위와 같이 작성을 하는데요. 컴퓨터가 숫자로 인식해야 하기 때문에 문자열에서 쓰듯이 따옴표를 감싸주면 안됩니다.
그럼 실제 소스를 작성 해봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트</title>
<script>
alert(5+3);
</script>
</head>
<body>
</body>
</html>

위의 결과를 보시면 연산 결과인 8이 alert창에 출력되는것을 볼 수 있습니다.

그럼 얼럿창에 12*6=72 라는 문구를 나타내기 위해서는 어떻게 할까요?

앞에 있는 12*6은 문자열로 나타내주면 됩니다. 문자열로하면 연산을 하지 않기 때문이죠
그리고 72는 문자열로 나타내지 않으면 됩니다. 그럼 계산을 하기 때문이죠.


12*6=은 문자열로 나타내므로 따옴표로 감싸구요 이렇게. '12*6=' 이렇게 하고 뒤에 72는 12*6으로 나타냅니다.

그럼 위와 같이 '12*6=' 이것과 12*6을 연결을 해야 하는데요 연결은 + 를 사용 합니다.
그러므로 아래와 같이
alert('12*6='+12*6);

전체 소스를 보면
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트</title>
<script>
alert('12*6='+12*6);
</script>
</head>
<body>
</body>
</html>

 

 

 

위 결과화면은

이래

 

 

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)

 

 

블로그 이미지

itworldkorea

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

,