1. Java Script(자바스크립트), javascript 삽입하기, javascript 에서 변수 사용

2017. 2. 6. 23:31

. Java Script(자바스크립트)

: 자바스크립트는 넷스케이프사가 사이트의 처리능력을 높이기 위해 개발한

Live Script 에 선마이크로시스템사가 제작한 Java 의 기능을 결합하여 만들어낸

Script 언어 입니다.

Script 언어는 원래의 언어에서 지원하지 못하는 일을 대신 처리해 주기 위해서

사용합니다. 자바스크립트가 하는 대표적인 작업들도 HTML 이 지원하지 못하는

다양한 기능을 지원합니다. 스크립트 언어들은 번역과정 없이 즉 컴파일 되지 않고

어플리케이션이 실행되고 있는 동안 웹 브라우저 안의 해석기로

라인단위로 해석(인터프리터) 됩니다.

. 웹 프로그래밍을 위해 자바스크립트를 사용하는 이유

: 자바스크립트는 여러가지 면에서 Java 와 유사하기 때문에 HTML 태그에는

없는 변수를 선언하여 사용할 수도 있고 if 문 for문과 같은 제어문을 사용하여

로직을 기술할 수도 있습니다.

자바스크립트는 자바의 문법구조를 따르지만 자바와 동일한 언어가 아닙니다.

자바보다 훨씬 간단한 언어로 아주 쉽게 익힐 수 있습니다.

자바스크립트는 웹 브라우저에서 해석하고 실행하는 구조이기 때문에 별도의

설치없이 다양한 편집기를 이용하여 편집한 후 이를 웹브라우저에 읽어들이면

실행 됩니다.

자바스크립트는 HTML 에서 불가능한 동적인 웹 페이지를 작성할 수 있게 합니다.

자바스크립트는 HTML의 각 태그를 객체로 인식하여 상황에 따라서 서로 다른

페이지를 제공할 수 있게 합니다. 사용자가 마우스를 클릭한다든지, 키보드로 데이타를

클릭한것(이벤트 처리)에 대한 처리 역시 자바스크립트를 통해서만 가능합니다.

. 자바스크립트의 기본 구조

. 자바스크립트는 HTML 문서에 포함됩니다.

=> language="javascript" : 스크립트 종류를 표시

자바스크립트 코드;

......

</SCRIPT>

. 자바 스크립트의 문장

. 새로운 줄은 새로운 문장 시작으로 생각합니다. 그렇기 때문에

;(새미콜론) 을 생략한 채 한줄에 한 문장을 기술할 수 있습니다.

. 하지만 한줄에 두 문장 이상을 기술할때는 ;(세미콜론) 을 사용해

구분해 주어야 합니다.

. 명령문이 길어서 한 줄을 넘어 갈때는 '_' 로 연결해야 합니다.

. 자바스크립트의 선언과 실행

: 자바스크립트를 사용하기 위해서는 이를 선언하고

실행해야 하는데 크게 3가지 방법을 제공합니다.

1. HTML 문서에 포함하는 방법

. head 부분에 삽입하는 방법

. body 부분에 삽입하는 방법

2. 자바스크립트 외부에서 불러오는 방법

3. 이벤트 헨들러와 행을 입력하는 방법

1. javascript 삽입하기

<!doctype html>

<head>

<title>javascript 삽입하기</title>

<!--

// HTML 문서의 HEAD 부분에 삽입합니다.

document.write("자바스크립트 처음 사용<br>");

//-->

</SCRIPT>

</head>

<body>

</body>

</html>

<head 부분에 SCRIPT 부분을 복사하여 BODY부분에 삽입하기>

<!--

// HTML 문서의 HEAD 부분에 삽입합니다.

document.write("자바스크립트 처음 사용<br>");

//-->

</SCRIPT>

위 내용을 복사합니다.

<!doctype html>

<head>

<title>javascript 삽입하기</title>

</head>

<body>

<!--

// body 문서의 HEAD 부분에 삽입합니다.

document.write("자바스크립트 처음 사용<br>");

//-->

</SCRIPT>

</body>

</html>

<body 부분에 넣어도 실행 되지만 head 부분에 있을 때 먼저 해석되기 때문에 head 부분에 넣는걸 권장합니다.>

주석의 사용

<!doctype html>

<head>

<title>javascript 삽입하기</title>

</head>

<body>

<!--

//한줄주석과

여러줄 주석도 사용이 가능하다.

document.write("자바스크립트 처음 사용<br>");

//-->

</SCRIPT>

</body>

</html>

<한줄주석과 여러줄주석 사용의 예>

실행 후 소스보기한 모습

<주석이 보이지 않는다.>

HTML 에서는 태그를 입력하지 않고 그 줄만 입력하여도 내용이 바로 출력 됩니다.

하지만 script 태그 안에서는 안됩니다.

내용을 그대로 출력하고 싶다면

document.write() 스크립트를 사용해야 합니다.

document.write :

2. JavaScript 삽입하기

파일 > 새 파일 > 다른 파일들 클릭

JavaScript 선택하고 확인

document.write("Javascript Test");

document.write("<BR>");

document.write("즐거운 금요일 따뜻한 날씨");

<script_1.js로 저장>

<!doctype html>

<head>

<title>JavaScript 삽입하기</title>

<!--

//외부 화일 script1.is 을 불러 옵니다.

//-->

</SCRIPT>

</head>

<body>

</body>

</html>

외부에서 불러와도 실행이 가능합니다. body 부분에 SCRIPT를 복사해서 넣어도 똑같은 결과를 출력합니다.

. javascript 에서 변수 사용

: 자바스크립트에서 변수명을 지정할 경우에 다른 프로그래밍 언어의

변수와 같이 다음과 같은 규칙이 있습니다.

. 첫번째 문자는 영문자나 '_' 기호를 이용합니다.

. 한국어나 특수문자는 사용할 수 없습니다.

. 변수명의 글자와 글자 사이에 공백을 삽입할 수 없습니다.

. for, if, else 와 같이 예약어는 변수명으로 사용할 수 없습니다.

예

abstract, boolean, break, byte, case, catch........

. 데이타 형

: 변수에 입력할 수 있는 값의 형태, 즉 데이타의 형태는

숫자, 문자열, 논리값 그리고 null 로 분류됩니다.

. 숫자 : 정수와 실수

. 문자열 : "abcdef" 따옴표로 묶어서 문자로 표현

. 논리값 : true, false

. NULL : null 을 나타냄

3. 변수 사용하기

<!doctype html>

<head>

</head>

<body>

<!--

변수를 이용하여 화면에 출력

var a = 1234;

b = " 아름다운 사람 ~~~~";

document.write("a 는");

document.write(a);

document.write("입니다.");

document.write("<br>");

document.write("b 는");

document.write(b);

document.write("입니다.");

//-->

</SCRIPT>

</body>

</html>

4. 산술, 증감, 대입 연산자 사용

<!doctype html>

<head>

</head>

<body>

<!--

// 산술 연산자 사용

a = 7;

b = 3;

document.write(" a = ");

document.write(a);

document.write("<br>");

document.write(" b = ");

document.write(b);

document.write("<br><br>");

document.write("a + b = ");

document.write(a+b);

document.write("<br><br>");

document.write("a - b = ");

document.write(a-b);

document.write("<br><br>");

document.write("a * b = ");

document.write(a*b);

document.write("<br><br>");

document.write("a / b = ");

document.write(a/b);

document.write("<br><br>");

document.write("a % b = ");

document.write(a%b);

// 대입 연산자 사용

document.write("<br>");

document.write(" a = ");

document.write(a);

document.write("<br>");

document.write(" b = ");

document.write(b);

document.write("<br><br>");

document.write("a += b : ");

document.write(a += b);

document.write("<br><br>");

document.write("a -= b : ");

document.write(a -= b);

document.write("<br><br>");

document.write("a *= b : ");

document.write(a *= b);

document.write("<br><br>");

document.write("a /= b : ");

document.write(a /= b);

document.write("<br><br>");

document.write("a %= b : ");

document.write(a %= b);

document.write("<br><br>");

// 증감 연산자 사용

x = 5;

y = 3;

document.write("<br>");

document.write(" ++x = ");

document.write(++x);

document.write("<br>");

document.write(" --y = ");

document.write(--y);

document.write("<br><br>");

document.write(" x++ = ");

document.write(x++);

document.write("<br>");

document.write(x);

document.write("<br>");

document.write(" y-- = ");

document.write(y--);

document.write("<br>");

document.write(y);

document.write("<br><br>");

x = 5;

y = 3;

k = ++x + y--;

document.write(k);

document.write("<br><br>");

document.write(++x + y--);

document.write("<br><br>");

document.write(++x + --y);

document.write("<br><br>");

//-->

</SCRIPT>

</body>

</html>

5. Javascript 자료형

<!doctype html>

<head>

<title>Javascript 자료형</title>

<!--

var age ; // 변수명을 지정하여 변수를 선언

age = 25; // 값을 부여

document.write("AGE : <font color='#00f'>");

document.write(age);

document.write("</font>");

//-->

</SCRIPT>

</head>

<body>

</body>

</html>

6. 논리 비교 연산자 사용

<!doctype html>

<head>

</head>

<body>

<!--

// 논리 연산자 사용

var a;

var b;

a = true;

b = false;

window.document.write("a = ");

window.document.write(a);

document.write("<BR>");

document.write("b = ");

document.write(b);

document.write("<BR><BR>");

document.write("a && b = ");

document.write(a && b);

document.write("<BR>");

document.write(" a || b = ");

document.write(a || b);

document.write("<BR><BR>");

document.write(" ! a = ");

document.write(!a);

document.write("<BR><BR>");

document.write(" ! b = ");

document.write(!b);

document.write("<BR><BR>");

// 관계 연산자 사용

c = 6;

d = 3;

document.write(" c = ");

document.write(c);

document.write(" d = ");

document.write(d);

document.write("<BR><BR>");

document.write(" c == d = ");

document.write(c == d);

document.write("<BR><BR>");

document.write(" c != d = ");

document.write(c != d);

document.write("<BR><BR>");

document.write(" c >= d = ");

document.write(c >= d);

document.write("<BR><BR>");

document.write(" c <= d = ");

document.write(c <= d);

document.write("<BR><BR>");

//-->

</SCRIPT>

</body>

</html>

7. 문자열 연산자

<!doctype html>

<head>

</head>

<body>

<!--

// 문자열을 연결합니다.

txt =" 아름다운 대관령~~!~!~ "

document.write("txt = " + txt + " 값이 저장 되어 있습니다.");

//-->

</SCRIPT>

</body>

</html>

8. 조건 연산자

<!doctype html>

<head>

</head>

<body>

<!--

// 조건에 따라 다른 값을 할당 합니다.

a = 5;

b = 7;

c = (a > b) ? a: b;

d = (a < b) ? a: b;

document.write(" a와 b 중 큰 값을 출력 =" + c + " 입니다.<br>");

document.write(" a와 b 중 작은 값을 출력 =" + d + " 입니다.");

//-->

</SCRIPT>

</body>

</html>

9. IF 조건문 사용하기

<!doctype html>

<head>

</head>

<body>

<!--

// 변수 a 값에 따라 조건을 판단한 후 명령문을 실행 합니다.

a = prompt(" 당신의 나이는 ? 숫자로 입력 하세요","10");

if (a < 15)

{

document.write("너무 늦은 시간 입니다. 일찍 잠자리에 드세요.");

}

else if (a < 19)

{

document.write("성인을 위한 사이트 입니다.");

}

else

{

document.write("즐거운 시간 되십시오");

}

//-->

</SCRIPT>

</body>

</html>

10. 이벤트 헨들러와 행을 입력하는 방법

파일 > 새 파일 > 다른 파일들을 클릭합니다.

JavaScript를 선택하고 확인을 클릭합니다.

document.write("<script type='text/javascript' src='b_1.js'><"+"/script>");

function test1(){

alert("seoul 서울");

document.write("a_1.js 실행됨!!!!!");

test2();

};

위와 같이 적고 a_1.js로 저장합니다.

document.write("<script type='text/javascript' src='c_1.js'><"+"/script>");

function test2(){

alert("test2 실행됨");

alert("test3 실행됨");

alert("test4 실행됨");

alert("test5 실행됨");

document.write("b_1.js 실행됨!!!!!");

test3();

}

다시 파일 > 새 파일 > 다른 파일들 > JavaScript를 클릭해 위와 같이 적고 b_1.js로 저장합니다.

function test3(){

alert("test66 실행됨");

alert("test77 실행됨");

alert("test88 실행됨");

alert("test99 실행됨");

document.write("c_1.js 실행됨!!!!!");

}

마찬가지로 위와 같이 적고 c_1.js로 저장합니다.

<!doctype html>

<head>

<title>Document</title>

</head>

<body>

<button type="button" onclick="test1()">korea</button>

</body>

</html>

실행하면 왼쪽에 버튼이 하나 생깁니다.

확인을 클릭하면 창이 나옵니다.

위에 값을 넣은것 만큼 창이 계속 뜹니다. 창에 원하는 내용을 넣으시면 됩니다.

저작자표시 비영리 변경금지

'자바스크립트(Javascript)' 카테고리의 다른 글

4. javascript 활용, Login Page 꾸미기, Image 넘기기, Image 버튼으로 넘기기 (0)	2017.02.08
3. 객체 사용, 브라우저 관련 내장 객체 (0)	2017.02.07
2. 선택문, switch 문, 반복문, while 문, do~while 문, 내장 함수, Javascript 함수의 정의 와 호출, 배열의 사용, 이벤트 사용 (0)	2017.02.06

테스토리