Notice
Recent Posts
Recent Comments
Link
Today
Total
05-03 00:03
Archives
관리 메뉴

Jeongchul Kim

Javascript 01 Javascript의 개요 본문

Web프로그래밍

Javascript 01 Javascript의 개요

김 정출 2016. 4. 29. 14:19


Javascript 01 Javascript의 개요





JavaScript의 개요

1. JavaScript의 개요

JavaScript의 개요

여러분은 인터넷을 하다가 JavaScript를 설치하라는 메시지를 보신적 있으신가요? JavaScript는 웹 브라우저에서 많이 사용하는 프로그래밍 언어로 웹 브라우저는 HTML 문서를 처리할 수 있는 응용 프로그램 이외에 Script를 해석할 수 있는 엔진을 가지고 있습니다. JavaScript는 본래에 넷스케이프의 Brendan Eich에 의해 모카라는 이름으로 만들어졌으며,  이후에 넷스케이프가 썬 마이크로시스템과 공동 개발하면서 JavaScript라는 명칭으로 변경되었습니다. 여러분이 많이 알고 있는 Java와는 다른 언어로 Java는 썬 마이크로시스템에서 개발한 객체 지향 언어이고, JavaScript는 브라우저 기반에서 실행되는 객체 기반 언어입니다.

2. JavaScript의 특징 및 구성요소

JavaScript는 HTML 문서와 함께 처리되므로, 일반 프로그래밍 언어보다는 기능이 제한적이라는 특징을 가지고 있으며, 좀 더 자세히 살펴보면, JavaScript는 객체 기반의 언어이고 이벤트 중심의 프로그래밍 언어이며, 인터프리터 언어로서 클라이언트의 웹 브라우저에 의해 해석되고 실행됩니다. 또한 HTML 문서 내에 기술되고 HTML 문서와 함께 수행되며, HTML에 연산, 제어 등 프로그래밍적인 요소를 구축하고 클라이언트 자원을 활용할 수 있습니다.


JavaScript는 객체, 문법, 이벤트와 이벤트 핸들러로 구성되어 있습니다. 객체는 속성과 메소드를 가지며, 가장 많이 사용되는 객체의 종류로는 사용자가 정의하여 사용할 수 있는 사용자 정의 객체, 기본적으로 제공되는 내장 객체, 브라우저 지원을 이용하는 브라우저 객체가 있습니다.


문법에는 자료형, 변수, 제어문, 함수 등이 있습니다.


이벤트와 이벤트 핸들러와 함께 자바스크립트를 사용하면 상호 작용이 있는 웹 페이지를 만들 수 있습니다.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JavaScript 실습하기!!</title>

<script>

alert('Hello World!!!');

</script>

</head>

<body>

</body>

</html>




JavaScript의 기본 문법

1. 기본 용어

JavaScript의 기본 문법

JavaScript에서 사용하는 기본 용어로는 표현식, 문장, 키워드, 식별자가 있습니다. 먼저, 표현식이란 제시된 코드와 같이 값을 만들어내는 간단한 코드로 다음과 같이 표현합니다.

다음은 문장입니다. 문장은 하나 이상의 표현식이 모여서 문장이 만들어지는데, 다음과 같이 문장 끝에 세미콜론을 찍어 문장의 종결을 알립니다.


키워드는 자바스크립트가 처음 만들어질 때 정해진 특별한 의미가 있는 단어로, 자바스크립트의 키워드에는 break, case, catch, continue, default, delete, do, else, false, finally, for, function, if, in, instanceof, new, null, return, switch, this, throw, true, try 등이 있습니다.

하지만 W3C에서는 자바스크립트 프로그램을 작성할 때 이와 같은 키워드를 사용하지 않기를 권고하고 있기 때문에 여러분도 자바스크립트를 사용할 때 주의하셔야 합니다.


식별자는 자바스크립트에서 이름을 붙일 때 사용하는 단어로, 식별자의 예로 변수명과 함수명이 있습니다. 식별자를 만들 때 반드시 지켜야 하는 규칙으로, 키워드를 사용하면 안되고, 숫자로 시작해서도 안됩니다. 또한 특수 문자는 _와 $만 허용되고, 공백 문자를 포함할 수 없습니다. 그리고 대부분의 자바스크립트 개발자들 사이에서 지키는 관례로는 생성자 함수의 이름은 항상 대문자로 시작하고, 변수와 인스턴스, 함수, 메소드의 이름은 항상 소문자로 시작합니다. 또한 여러 단어로 이루어진 식별자는 각 단어의 첫 글자를 대문자로 합니다.


2. 변수

변수는 값을 지정할 때 사용하는 식별자입니다. 변수를 사용하기 위해서는 두 단계가 필요한데, 첫 번째는 변수를 선언해야 하며, 두 번째는 변수에 값을 할당 해야 합니다. 다음 제시된 예제는 age라는 변수를 선언한 이후에 age의 변수값을 26으로 할당하도록 하였습니다.  


3. 연산자

연산자에 대해 살펴보겠습니다. 연산자의 유형에는 사칙 연산자, 비교 연산자, 논리 연산자, 복합 대입 연산자, 증감 연산자가 있습니다. 먼저, 사칙 연산자는 더하기, 빼기, 곱하기, 나누기 연산자를 의미합니다.


비교 연산자는 좌변과 우변을 비교하는 연산자로서 >=은 좌변이 우변보다 크거나 같음을 의미하고, <=은 우변이 좌변보다 크거나 같음을 의미합니다.

><는 각각 좌변 또는 우변이 클 때 사용하고, == 두 개가 연속으로 있을 때에는 좌변과 우변이 같음을 의미하며, !=은 좌변과 우변이 다름을 의미합니다.


논리연산자에는 논리부정 연산자와 논리곱 연산자, 그리고 논리합 연산자가 있습니다. 느낌표는 논리 부정 연산자를 의미하고, &&는 논리곱 연산자를 의미하며, ||는 논리합 연산자를 의미합니다. 논리곱과 논리합의 연산자를 조금 더 자세히 살펴보면 먼저 논리곱 연산자는 좌변과 우변이 모두 True일 경우에만 결과값이 True가 되고, 어느 한쪽이 False일 경우에는 결과값이 False가 됩니다. 반면 논리합 연산자는 어느 한쪽이 True일 경우, 결과값은 True가 되고, 좌.우변 모두 False일 경우에만 결과값이 False가 되는 것입니다.



복합 대입 연산자는 기존 변수의 값에 값을 더하거나 빼거나 곱하고, 나누고, 나머지를 구하는 연산자로 +=은 기존 변수의 값에 값을 더해야 하고, -=은 기존 변수의 값에 값을 빼야 하며, *=과 /=은 각각 기존 변수의 값에 값을 곱하거나 나눌 때 사용합니다. 이 밖에 %=이 있는데, %=은 기존 변수의 값에 나머지를 구할 때 사용합니다.  


마지막으로 증감연산자는 기존 변수의 값을 증가하거나 감소하는 연산자로 변수에 ++가 뒤에 붙으면 기존의 변수의 값에 1을 더하는 후위 연산자이며, ++가 변수 앞에 붙으면, 역시 기존의 변수 값에 1을 더하지만 전위 연산자가 됩니다. 마이너스 역시 마찬가지입니다. 변수에 –가 뒤로 붙으면 기존의 변수의 값에 1을 빼는 후위연산자가 되며, 변수 앞에 –-가 붙으면 역시 기존의 변수 값에 1을 빼지만 전위연산자가 됩니다. 전위연산자이냐 후위 연산자이냐에 따라 값이 다르게 나타나니 증감연산자를 사용하실 때는 항상 주의하셔야 합니다.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>변수 사용하기!!</title>

<script>

var radius = 20;

var pi = 3.14;

alert(2 * pi * radius);

</script>

</head>

<body>

</body>

</html>




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>연산자 실습하기!!</title>

<script>

alert('사칙 연산자');

alert(5+2*9);

alert('비교 연산자');

alert(4 < 2);

alert('논리 연산자');

alert(30<10 && 20<40);

alert('복합 대입 연산자');

var a = 10;

a *= 3;

alert(a);

alert('증감 연산자');

var b = 11;

b++;

alert(b);

b--;

alert(b);

</script>

</head>

<body>

</body>

</html>



4. 자료형

자료형에 대해 살펴보겠습니다. 자료형이란 변수에 사용되는 값을 의미하는데, 이와 같은 자료형의 종류로는 정수형, 부동소수점, boolean, null, 그리고 문자열이 있습니다.


먼저 정수형은 10진수, 16진수, 8진수의 3가지 형태로 나타낼 수 있는데, 10진수는 일반적인 숫자 형태로 숫자 10으로 표기하고, 16진수 10은 Ox를 숫자 앞에 붙여 0~9와 A~F까지의 문자로 표현하기 때문에 0xA로 표현하며, 8진수 10은 0~7까지의 숫자만 사용하기 때문에, 012로 나타냅니다. 정수형을 자바스크립트에서 표현하는 방법은 다음과 같습니다.


부동소수점은 소수점을 가지고 있는 숫자 즉 실수형을 의미하는데, 이와 같은 부동소수점은 소수형 실수와 지수형 실수로 나뉩니다. 부동소수점은 다음과 같이 선언하여 사용할 수 있습니다.   


boolean은 크기가 1비트인 자료형으로서 주로 함수의 리턴 값이나 관계 연산자의 결과값에 사용됩니다. boolean은 true와 false의 두 가지 값만 사용할 수 있는데, 사용방법은 다음과 같습니다.  

null은 공백과는 다른 정의되지 않은 데이터로 아무것도 없다는 것을 의미하는데, null은 주로 예외처리시 사용합니다. null을 표현하는 방법은 다음과 같습니다.

문자열은 따옴표 안에 들어가는 모든 문자를 의미하는데, 사용방법은 다음과 같이 따옴표 안에, 한글, 영문, 숫자, 기호 등을 넣어 사용할 수 있습니다.


5. 형변환

다음은 형 변환에 대해 알아보겠습니다. 형 변환이란 숫자를 문자로 변환하거나, 문자를 숫자로 변환하는 것을 말하는데요,

이러한 형 변환의 종류로는 암시적 형 변환과 명시적 형 변환이 있습니다. 먼저 암시적 형 변환이란 명령어를 수행하는 과정 중에 자바스크립트엔진이 자동으로 변환하는 것으로 형 변환은 자바스크립트 컴파일러에 의해 자동으로 일어납니다. 그럼 암시적 형 변환의 예제를 살펴보겠습니다. 먼저 첫 번째 줄의 example1은 숫자 10과 문자 20을 더하도록 정의하였는데, 이를 실행하면 결과는 모두 문자로 변환됩니다. 두 번째 줄의 example2는 문자 10에서 숫자20을 빼도록 정의하였습니다. 이를 실행하면 결과는 모두 숫자로 변환됩니다. 세 번째 줄의 예제는 문자 10과 false라는 boolean형을 더했는데, 이를 실행하면 문자로 변환이 됩니다.

명시적 형 변환이란 명령어로 값을 원하는 유형으로 변환하는 것으로 사용자가 직접 지정해주는 방식을 말합니다. 먼저 숫자를 문자로 변환할 경우에는 string()을 이용하는 방법과 toString(진수)를 이용하는 방법을 사용하고, 문자를 숫자로 변환활 경우에는 Number()을 이용하는 방법과 parseInt()를 이용하는 방법, 그리고 parseFloat()을 이용하는 방법을 사용하여 형 변환을 할 수 있습니다. 각각을 클릭하여 명시적 형 변환 방법의 예제를 살펴보세요.

String()을 이용하는 방법은 먼저 numstring이라는 변수를 선언하고 숫자 20을 할당합니다. 그 다음 numstring의 데이터 유형을 표시하고, 변수 ns를 선언한 뒤, 변수 numstring를 문자로 변환합니다. 마지막으로 ns의 데이터 형태를 출력하면, 결과 값은 문자 20이 나타나게 됩니다.

toString()을 이용하는 방법은 먼저 numstring이라는 변수를 선언하고 숫자 20을 할당합니다.  그 다음 일반 문자열로 변환하려면, numstring.toString()을 사용하고, 8진수 문자열로 변환하려면 numstring.toString(8)을 사용하며, 10진수 문자열로 변환하려면 numstring.toString(10)을 사용하고, 16진수 문자열로 변환하려면 numstring.toString(16)을 사용합니다.


Number()를 이용하는 방법은 먼저 stringnum 변수를 선언하고 문자 20을 할당합니다. 그 다음 문자열을 숫자로 변환하여  바꿀 수 있으면 true를 리턴하고 바꿀 수 없으면, false를 리턴합니다.


parseInt()를 사용할 때에는 먼저 stringnum 변수를 선언하고, 문자 20을 할당합니다. 그 다음  parseInt를 사용하여 stringnum을 정수형으로 변환하면, 세 번째 줄의 코딩은 숫자 20을 반환하고, 네 번째 줄의 코딩은 16진수 0xFF를 10진수 정수형으로 변환하여 숫자 255가 반환되며, 다섯 번째 줄의 코딩은 29.234라는 실수가 정수형으로 변환되어 29만 출력이 됩니다.


parseFloat()을 사용할 때에는 먼저 stringnum이라는 변수를 선언하고, 문자 12.345를 할당합니다. 그러면 두 번째 줄의 parseFloat(stringnum);은 실수형 숫자로 표시하기 때문에 12.345가 출력되고, 세 번째 줄의 코딩은 정수형으로 출력을 하기 때문에 소수점을 제외한 12가 할당됩니다.




6. 함수

자바스크립트 함수에 대해 알아보겠습니다. 함수란 특정 기능을 하는 변수와 구문들의 집합으로 함수를 사용하면 중복구문을 묶어서 재사용이 가능합니다. 기본 함수의 구조는 다음과 같이 파마메타와 반환값이 없는 함수와 파라메타만 있고, 반환값이 없는 함수, 그리고 파라메타와 반환값이 있는 함수로 구분할 수 있습니다.


그럼 지금부터는 함수를 생성하는 방법에 대해 알아보겠습니다. 함수를 생성하는 첫 번째 방법으로는 function 키워드로 함수를 만드는 방법이 있습니다. 이 방법은 함수를 생성하는 가장 일반적인 방법으로 예문은 test라는 함수를 선언하고, 그 함수를 실행하는 코드입니다.

두 번째 방법은 리터럴 방식으로 함수를 만드는 것으로 다음과 같이 함수를 리터럴 형태로 포함시켜 사용합니다.


마지막으로 function 객체를 가지고도 함수를 만들 수 있는데, new function이라는 객체 참조를 사용하여 선언하는데, 이 방법은 요즘 거의 사용되지 않고 있습니다.


파라메타에 대해 살펴보겠습니다. 파라메타란 외부 데이터를 함수 내부로 받아 올 수 있도록 하는 매개변수를 말합니다.

함수 내부는 무작정 접근이 불가능하기 때문에 접근을 하려면 파라메타를 이용하여 값을 넘겨주는 방법을 사용해야 합니다. 파라메타는 지역변수로서 함수 내부에서만 사용이 가능한데, 파라메타의 사용방법은 다음과 같습니다.




저작자표시

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

음성인식 STT 한글 음성인식 Annyang API  (4) 2017.07.03
Javascript 02 Javascript 객체 및 이벤트 처리  (0) 2016.04.29
CSS 05 CSS3 좌표계  (0) 2016.04.29
CSS 04 CSS3 선택자  (0) 2016.04.27
CSS 03 CSS 레이아웃 및 HTML5 적용  (0) 2016.04.27
'Web프로그래밍' Related Articles more
Comments