변수명 선언 법칙

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

그러나 변수명 선언 법칙은 존재합니다.
 
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)을 변화시킨다.

,

오늘은 자바스크립트의 출력문에 대해서 포스팅합니다.

JavaScript Source
document.write("내용");
위의 document.write가 출력 명령문이며 괄호() 안에 내용을 넣습니다.

예를 들어 Hello World라는 문구를 자바스크립트를 통하여 출력을 하려면
아래와 같은 소스를 작성하여 스크립트 태그 안에 넣습니다.

아래와 같이 작성하며 문자를 출력 할때
쌍따옴표 (") 또는 따옴표(')를 감싸 줍니다. "Hello World"
document.write("Hello World");
-------------------------
문자열 출력의 경우 따옴표로 사이에 입력을 했습니다.

숫자의 경우는 따옴표를 하지 않고 그냥 괄호 안에 작성합니다.
예를 들어 30을 출력하려면 다음과 같습니다.
document.write(30);
-------------------------
 이번엔 4칙 연산에 대해서 알아 봅시다.

4칙 연산

예를 들어 30 + 40 의 결과를 구해 본다면 30+40을 괄호 안에 작성 하면 됩니다.

더하기 +
document.write(30+40);

빼기 -
document.write(30-20);

곱하기 *
document.write(30*40);

나누기 /
document.write(30/2);

나머지 %
document.write(10%3);
다음과 같이하면 됩니다.
<script>
document.write(30+40);
document.write("<br  />");
document.write(30-20);
document.write("<br  />");
document.write(30*40);
document.write("<br  />");
document.write(30/2);
document.write("<br  />");
document.write(10%3);
</script>

따옴표 표현하기 \"
document.write("\"");

문자열의 연결 +

문자열의 연결이란 뜻은 Mickey 라는 단어와 Mouse 라는 단어를 연결 한다는 의미 인데요.
그렇게 함으로써 Mickey Mouse로 표현을 해 줄 수 있습니다.

문자열의 연결을 위하여 + 를 사용 하는데요
숫자의 경우는 3+3 하면 연산을 하여서 6으로 결과가 나옵니다만

문자열의 연결의 경우 "Mickey"+"Mouse" 라고 작성하면
결과는 Mickey Mouse가 나옵니다. 그럼 소스를 통해서 이해를 해봅시다.
document.write("Mickey"+"Mouse");

위 모든 내용을 종합하여 보면

 

 

 

결과값은

 

 

 

 

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

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

 

블로그 이미지

itworldkorea

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

,

 

 

자바스크립트 란?

자바스크립트를 소개해보고자 합니다.

지금은 HTML5,CSS3를 통하여 홈페이지에 동적 효과를 나타내는게 가능하지만

HTML5, CSS3가 나오기 전에는 자바스크립트를 이용하여 여러가지 다양한 효과를 구현했습니다.

그 외에 우리가 어떤 홈페이지를 가입할 때 다음과 같은 현상을 본적이 있으실 것입니다.

 "아이디 미 입력시 아이디를 입력해 달라는 문구
비밀번호가 서로 일치하지 않다는 문구
이메일을 형식에 맞게 입력해 달라는 문구"

위와 같은 경우도 있으며 또 한 어떠한 이미지 위에 마우스 포인터를 올리면

다른 이미지가 변경되거나 더 강조하는 이미지로 변경되거나 하는 작업등에 쓰이는게

 바로 자바스크립트로 구현한 것입니다.

자바스크립트는 기본 문서는 HTML문서의 head태그 안에서 사용합니다.

 

자바스크립트 소스를 넣는 곳은 head와 head 사이이다.
-------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트 시작</title>
<script>
// 이곳에 자바스크립트 소스를 넣습니다.
</script>
</head>
<body>
</body>
</html>

 

 

 

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

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

 

블로그 이미지

itworldkorea

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

,

 

 

자바스크립트객체  image, history, location

* Image객체
image에 관한 정보를 가지고 있는 객체를 말하며, name, src, height, width, hspace(가로여백), vspace(세로여백), border, align 등의 속성을 갖는다.

 

<html>
<head>

</head>
<body onclick="bgcol('pink','blue')">
<img name="img1" src="parksehun.png">
<br>
<script text="javascript">
 document.write(document.img1.src + "<br>");
 document.write(document.img1.name + "<br>");
 document.write(document.img1.width + "<br>");
 document.write(document.img1.height + "<br>");
</script>
</body>
</html>
 
위 처럼 img 태그 안의 name을 자바스크립트 안에서 document."이름" 으로 속성 등을 사용할 수 있다.
또한 document.images.length와 같이 document안의 이미지들의 개수 등을 구해줄 수도 있다.

 

* history 객체
history객체 역시 많이 이용하는 객체중에 하나로 보통은 전/후 단계로의 이동을 해주며,

 

//아래 두개는 같은 의미를 갖는다.
history.back()
history.go(-1)
 
length : 히스토리 안에 있는 url의 개수
back() : 전 단계로 이동
forward() : 히스토리 한 단계 앞으로 이동
go(): 히스토리에서 원하는 위치로 이동

 

* location 객체
문서에 대한 정보 프로토콜, 호스트 이름, 포트, 디렉토리, 파일 이름 등의 정보를 가지고 있다.
속성: href, host, hostname, protocol, pathname, port, hash, search
메소드: reload()-현재 페이지 재로드, replace()-현재 페이지를 원하는 페이지로 변경

 

<html>
<head>

</head>
<body onclick="bgcol('pink','blue')">
<br>
<script text="javascript">
 function rel(){
  location.reload();
 }
</script>
<input type="button" onclick="rel()" value="click">
</body>
</html>

 

 

 

 

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

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

 

블로그 이미지

itworldkorea

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

,

 자바 스크립트의 주석처리 방법은 두가지가 있다.

1. 한줄 주석 : //

사용 예)

// 슬러쉬: 한 줄만 주석처리 할 경우 사용.

 

2. 전체 주석 : /* */

/* //주석시작

    alert("hello javascript");
    alert("1");
    alert("2");
    alert("3");
   */ //주석 끝

/*와 */ 사이에 있는 코드들은 실행되지 않는다.

 

1. Javascript

<script type="text/javascript">

<!--

document.getElementById("demo").innerHTML=Date();

//-->

</script>

 

<script type="text/javascript">

<!--HIDE

document.write("<FONT color=#333333>Now!</FONT>") // This is a comment

/* This is a comment */

//STOP HIDING-->

</SCRIPT>

 

Using an External JavaScript

<head>

<script type="text/javascript" src="xxx.js"></script>

</head>

 

<head>

<script type="text/javascript" src="xxx.js" charset="utf-8"/></script>

</head>

 

JavaScript in <head>

<head>

<script type="text/javascript">

function displayDate()

{

document.getElementById("demo").innerHTML=Date();

}

</script>

</head>

 

JavaScript in <body>

<body>

<p id="demo">This is a paragraph.</p>

<script type="text/javascript">

document.getElementById("demo").innerHTML=Date();

</script>

</body>

 

// body에서 버튼 클릭, 링크로 head함수 호출

<head>

<script type="text/javascript">

function tost(){

alert("I am an alert box!");

}

</script>

</head>

 

<body>

<input type="button" name="btn01" value="버튼01" onclick="tost()" />

<a href="javascript:tost()" style="text-decoration:underline; color:#515151">클릭</a>

</body>

 

2. HTML

<!--This is a comment. Comments are not displayed in the browser-->

 

2. CSS

/*This is a comment*/

 

External style sheet

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css" />

</head>

 

Internal style sheet

<head>

<style type="text/css">

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

</style>

</head>

 

Inline style

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

   

4. XML

<!-- This is a comment -->

 

5. PHP

//This is a comment

 

/*

This is

a comment

block

*/

 

<div class="leftmenu">

<?php include("menu.php"); ?>

</div>

 

 

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

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

 

블로그 이미지

itworldkorea

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

,