JavaScript에 대하여(1)

최지혜·2021년 10월 13일
front end
0

FRONT-END

목록 보기
3/7

1. 자바스크립트란?

자바스크립트(JavaScript)는 객체 기반의 스크립트 언어입니다.
html로는 웹의 내용을 작성하고, css로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있습니다.

자바스크립트는 주로 웹 브라우저에서 사용되지만, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있습니다.
현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있습니다.

(1) HTML 요소의 내용 변경

자바스크립트를 사용하면 html 요소의 내용을 손쉽게 변경할 수 있습니다.

(2) HTML 요소의 속성값 변경

자바스크립트를 사용하면 html 요소의 속성값을 간단히 변경할 수 있습니다.

(3) HTML 요소의 스타일 변경

자바스크립트를 사용하면 html 요소의 스타일을 손쉽게 변경할 수 있습니다.

2. 문법

자바스크립트의 실행문은 세미콜론(;)으로 구분됩니다.

var x = 10;
var result = x + 3;

자바스크립트는 대소문자를 구분합니다. 자바스크립트에서 변수나 함수의 이름, 예약어 등을 작성하거나 사용할 때는 대소문자를 정확히 구분해서 사용해야합니다.

var javascript = 10; // 변수 javascript와 JavaScript는 서로 다른 두 개의 변수로 인식됨.
var JavaScript = 20;
Var Script = 30; // 변수의 선언은 var 키워드로만 할 수 있으면 Var는 동작하지 않음.

(1) 리터럴(literal)

리터럴은 직접 표현되는 값 그 자체를 의미합니다.

다음 예제에서 등장하는 값들은 모두 리터럴입니다.

12            // 숫자 리터럴
"JavaScript"  // 문자열 리터럴
'안녕하세요'  // 문자열 리터럴
true          // 불리언 리터럴

(2) 식별자(identifier)

식별자는 변수나 함수의 이름을 작성할 때 사용하는 이름을 의미합니다. 자바스크립트에서 식별자는 영문자(대소문자), 숫자, 언더스코어(_) 또는 달러 ($)만을 사용할 수 있습니다.

(3) 키워드(keyword)

자바스크립트에서는 몇몇 단어들을 특별한 용도로 사용하기 위해 미리 예약하고 있습니다.
이렇게 미리 예약된 단어들을 키워드(keyword) 또는 예약어(reserved word)라고 합니다.
이러한 키워드들은 프로그램 내에서 식별자로 사용할 수 없습니다.

var firstVar = 10;      // var는 변수의 정의를 위해 예약된 키워드입니다.
function myFirstFunc {  // function은 함수의 정의를 위해 예약된 키워드입니다.
    var secondVar = 20; // var는 변수의 정의를 위해 예약된 키워드입니다.
}

(4) 주석(comment)

주석이란 코드 내에 삽입된 일종의 설명문입니다.
주석은 작성자나 다른 개발자가 나중에 코드를 수정할 때 참고할 수 있으며, 웹 페이지 개발 시 디버깅에서 사용됩니다.
이러한 주석은 자바스크립트 코드의 어느 부분에라도 작성할 수 있으며, 웹 브라우저의 동작에는 전혀 영향을 미치지 않습니다.

자바스크립트 주석은 다음과 같은 두 가지 형식으로 사용합니다.

1. 한 줄 주석 : // 주석문
2. 여러 줄 주석 : /* 주석문 */

3. 출력

자바스크립트는 여러 방법을 통해 결과물을 html 페이지에 출력할 수 있습니다.
자바스크립트에서 사용할 수 있는 출력 방법은 다음과 같습니다.

(1) window.alert() 메소드

<script>
    function alertDialogBox() {
        alert("확인을 누를 때까지 다른 작업을 할 수 없어요!");
    }
</script>

(2) HTML DOM 요소를 이용한 innerHTML 프로퍼티

<script>
    var str = document.getElementById("text");
    str.innerHTML = "이 문장으로 바뀌었습니다!";
</script>

(3) document.write() 메소드

<script>
    document.write(4 * 5);
</script>

(4) console.log() 메소드

<p>F12를 눌러서 콘솔 화면을 열면 결과를 확인할 수 있습니다.</p>
<script>
    console.log(4 * 5);
</script>

4. 적용

html 문서에 자바스크립트 코드를 적용하는 방법에는 다음과 같은 방법이 있습니다.

(1) 내부 자바스크립트 코드로 적용

자바스크립트 코드는 <script>태그를 사용하여 html 문서 안에 삽입할 수 있습니다.

다음 예제는 html 문서의 <head>태그에 자바스크립트 코드를 삽입한 예입니다.

<head>
    <meta charset="UTF-8">
    <title>JavaScript Apply</title>
    <script>
        function printDate() {
            document.getElementById("date").innerHTML = Date();
        }
    </script>
</head>

다음 예제는 html 문서의 <body>태그에 자바스크립트 코드를 삽입한 예입니다.

<body>
    <p>자바스크립트를 이용하면 현재 날짜와 시간 정보에도 손쉽게 접근할 수 있어요!</p>
    <button onclick="printDate()">현재 날짜와 시간 표시하기!</button>
    <p id="date"></p>
    <script>
        function printDate() {
            document.getElementById("date").innerHTML = Date();
        }
    </script>
</body>

(2) 외부 자바스크립트 파일로 적용

외부에 작성된 자바스크립트 파일은 .js 확장자를 사용하여 저장합니다.
해당 자바스크립트 파일을 적용하고 싶은 모든 웹 페이지에 <sript>태그를 사용하여 외부 자바스크립트 파일을 포함하면 됩니다.

//example.js 라는 이름으로 파일 저장
function printDate() {
    document.getElementById("date").innerHTML = Date();
}
<head>
    <meta charset="UTF-8">
    <title>JavaScript Apply</title>
    <script src="/examples/media/example.js"></script>
</head>

외부 자바스크립트 파일을 사용하면 웹의 내용을 담당하는 html 코드로부터 웹의 동작을 구현하는 자바스크립트 코드를 분리할 수 있게 됩니다.
이렇게 하면 html 코드와 자바스크립트 코드를 각각 읽기도 편해지고, 유지 보수도 쉬워집니다.

또한, 외부 자바스크립트 파일은 웹 브라우저가 미리 읽어 올 수 있어 웹 페이지의 로딩 속도가 빨라집니다.

5. 타입

타입(data type)이란 프로그램에서 다룰 수 있는 값의 종류를 의미합니다.
자바스크립트에서는 여러가지 형태의 타입을 미리 정의하여 제공하고 있으며, 이것을 기본 타입이라고 합니다.

(1) 기본 타입

자바스크립트의 기본 타입은 크게 원시 타입과 객체 타입으로 구분할 수 있습니다.

원시 타입은 다음과 같습니다.
① 숫자(number)

var firstNum = 10;     // 소수점을 사용하지 않은 표현
var secondNum = 10.00; // 소수점을 사용한 표현
var thirdNum = 10e6;   // 10000000
var fourthNum = 10e-6; // 0.00001

② 문자열(string)

var firstStr = "이것도 문자열입니다.";      // 큰따옴표를 사용한 문자열
var secondStr = '이것도 문자열입니다.';     // 작은따옴표를 사용한 문자열
var thirdStr = "나의 이름은 '홍길동'이야."  // 작은따옴표는 큰따옴표로 둘러싸인 문자열에만 포함될 수 있음.
var fourthStr = '나의 이름은 "홍길동"이야.' // 큰따옴표는 작은따옴표로 둘러싸인 문자열에만 포함될 수 있음.
var num = 10;
var str = "JavaScript";
document.getElementById("result").innerHTML = (num + str); // 10JavaScript

③ 불리언(boolean)

var firstNum = 10;
var secondNum = 11;
document.getElementById("result").innerHTML = (firstNum == secondNum); // false

④ 심볼(symbol) : ECMAScript 6부터 제공됨

var sym = Symbol("javascript");  // symbol 타입
var symObj = Object(sym);        // object 타입

⑤ undefined

  • typeof연산자
typeof 10;        // number 타입
typeof "문자열";  // string 타입
typeof true;      // boolean 타입
typeof undefined; // undefined 타입
typeof null;      // object 타입
  • null과 undefined
var num;          // 초기화하지 않았으므로 undefined 값을 반환함.
var str = null;   // object 타입의 null 값
typeof secondNum; // 정의되지 않은 변수에 접근하면 undefined 값을 반환함.

null ==  undefined; // true
null === undefined; // false

객체 타입은 다음과 같습니다.
객체(object)

var dog = { name: "해피", age: 3 }; // 객체의 생성
// 객체의 프로퍼티 참조
document.getElementById("result").innerHTML =
    "강아지의 이름은 " + dog.name + "이고, 나이는 " + dog.age + "살 입니다.";

(2) 타입 변환

자바스크립트는 타입 검사가 매우 유연한 언어 입니다.
자바스크립트의 변수는 타입이 정해져 있지 않고, 같은 변수에 다른 타입의 값을 다시 대입할 수도 있습니다.

var num = 20; // Number 타입의 20
num = "이십"; // String 타입의 "이십"
var num;      // 한 변수에 여러 번 대입할 수는 있지만, 변수의 재선언은 할 수 없습니다. 재선언문은 무시됩니다.

① 묵시적 타입 변환(implicit type conversion)
자바스크립트는 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면, 자동으로 타입을 변환하여 사용합니다.
즉, 문자열 값이 오길 기대하는 곳에 숫자가 오더라도 자바스크립트는 알아서 숫자를 문자열로 변환하여 사용합니다.

10 + "문자열"; // 문자열 연결을 위해 숫자 10이 문자열로 변환됨.
"3" * "5";     // 곱셈 연산을 위해 두 문자열이 모두 숫자로 변환됨.
1 - "문자열";  // NaN

② 명시적 타입 변환(explicit type conversion)
자바스크립트에서는 묵시적 타입 변환을 많이 사용하지만, 명시적으로 타입을 변환할 방법도 제공합니다.
명시적 타입 변환을 위해 자바스크립트가 제공하는 전역 함수는 다음과 같습니다.

  1. Number()
  2. String()
  3. Boolean()
  4. Object()
  5. parseInt()
  6. parseFloat()
Number("10"); // 숫자 10
String(true); // 문자열 "true"
Boolean(0);   // 불리언 false
Object(3);    // new Number(3)와 동일한 결과로 숫자 3

③ 숫자를 문자열로 변환
숫자를 문자열로 변환하는 가장 간단한 방법은 String() 함수를 사용하는 것입니다.
또한, null과 undefined를 제외한 모든 타입의 값이 가지고 있는 toString() 메소드를 사용할 수도 있습니다.

숫자(Number) 객체는 숫자를 문자열로 변환하는 다음과 같은 메소드를 별도로 제공합니다.

  1. toExponential() : 정수 부분은 1자리, 소수 부분은 입력받은 수만큼 e 표기법을 사용하여 숫자를 문자열로 변환함.
  2. toFixed() : 소수 부분을 입력받은 수만큼 사용하여 숫자를 문자열로 변환함.
  3. toPrecision() : 입력받은 수만큼 유효 자릿수를 사용하여 숫자를 문자열로 변환함.

④ 불리언 값을 문자열로 변환
불리언 값을 문자열로 변환하는 방법에는 String() 함수와 toString() 메소드를 사용하는 방법이 있습니다.

String(true);     // 문자열 "true"
false.toString(); // 문자열 "false"

⑤ 날짜를 문자열이나 숫자로 변환
날짜를 문자열로 변환하는 방법에는 String() 함수와 toString() 메소드를 사용하는 방법이 있습니다.
자바스크립트에서 날짜(Date) 객체는 문자열과 숫자로 모두 변환할 수 있는 유일한 타입입니다.

날짜(Date) 객체는 날짜를 숫자로 변환하는 다음과 같은 메소드를 별도로 제공합니다.

  1. getDate() : 날짜 중 일자를 숫자로 반환함. (1 ~ 31)
  2. getDay() : 날짜 중 요일을 숫자로 반환함. (일요일 : 0 ~ 토요일 : 6)
  3. getFullYear() : 날짜 중 연도를 4자리 숫자로 반환함. (yyyy년)
  4. getMonth() : 날짜 중 월을 숫자로 반환함. (1월 : 0 ~ 12월 : 11)
  5. getTime() : 1970년 1월 1일부터 현재까지의 시간을 밀리초(millisecond) 단위의 숫자로 반환함.
  6. getHours() : 시간 중 시를 숫자로 반환함. (0 ~ 23)
  7. getMinutes() : 시간 중 분을 숫자로 반환함. (0 ~ 59)
  8. getSeconds() : 시간 중 초를 숫자로 반환함. (0 ~ 59)
  9. getMilliseconds() : 시간 중 초를 밀리초(millisecond) 단위의 숫자로 반환함. (0 ~ 999)
String(Date());        // Mon May 16 2016 19:35:25 GMT+0900
Date().toString();     // Mon May 16 2016 19:35:25 GMT+0900
var date = new Date(); // Date 객체 생성
date.getFullYear();    // 2016
date.getTime();        // 1463394925632 -> 1970년 1월 1일부터 현재까지의 시간을 밀리초 단위의 숫자로 반환함.

⑥ 문자열을 숫자로 변환
문자열을 숫자로 변환하는 가장 간단한 방법은 Number() 함수를 사용하는 것입니다.

자바스크립트는 문자열을 숫자로 변환해 주는 두 개의 전역 함수를 별도로 제공합니다.

  1. parseInt() : 문자열을 파싱하여 특정 진법의 정수를 반환함.
  2. parseFloat() : 문자열을 파싱하여 부동 소수점 수를 반환함.

⑦ 불리언 값을 숫자로 변환
불리언 값을 숫자로 변환하는 방법에는 Number() 함수를 사용하는 방법이 있습니다.

Number(true);  // 숫자 1
Number(false); // 숫자 0

(3) 변수

  • 변수의 선언과 초기화
    자바스크립트에서는 선언되지 않은 변수를 사용하려고 하거나 접근하려고 하면 오류가 발생합니다.
    단, 선언되지 않은 변수를 초기화할 경우에는 자동으로 선언을 먼저 한 후 초기화를 진행합니다.
var month; // month라는 이름의 변수 선언
date = 25; // date라는 이름의 변수를 묵시적으로 선언

선언된 변수는 나중에 초기화할 수도 있고, 선언과 동시에 초기화할 수도 있습니다.

var month;     // 변수의 선언
var date = 25; // 변수의 선언과 동시에 초기화
month = 12;    // 변수의 초기화

쉼표(,) 연산자를 이용하여 여러 변수를 동시에 선언하거나 초기화할 수도 있습니다.

var month, date;             // 여러 변수를 한 번에 선언
var hours = 7, minutes = 15; // 여러 변수를 선언과 동시에 초기화
month = 10, date = 5;        // 여러 변수를 한 번에 초기화
  • 변수의 타입과 초깃값
    자바스크립트의 변수는 타입이 정해져 있지 않으며, 같은 변수에 다른 타입의 값을 다시 대입할 수도 있습니다.
    이렇게 한 변수에 다른 타입의 값을 여러 번 대입할 수는 있지만, 한 번 선언된 변수를 재선언할 수는 없습니다.
var num = 10;        // 변수의 선언과 함께 초기화
num = [10, 20, 30];  // 배열 대입
var num;             // 이 재선언문은 무시됨.

자바스크립트에서 선언만 되고 초기화하지 않은 변수는 undefined 값을 갖습니다.

var num;  // undefined
num = 10; // 10
  • 변수의 이름
    자바스크립트에서 변수는 이름을 가지고 식별하므로, 변수의 이름은 식별자(identifier)입니다.
    변수의 이름은 영문자(대소문자), 숫자, 언더스코어(_) 또는 달러($)로만 구성됩니다.
    또한, 숫자와의 구분을 빠르게 하려고 숫자로는 시작할 수 없습니다.
    이러한 변수의 이름은 대소문자를 구분하며, 자바스크립트 언어에서 예약된 키워드는 이름으로 사용할 수 없습니다.
profile
최지혜
지혜의 괴발개발과정
이전 포스트

CSS에 대하여

다음 포스트

JavaScript에 대하여(2)

0개의 댓글