[JavaScript] JavaScript 기초 / (변수선언, 입출력, 적용법)

[JavaScript] JavaScript 기초 / (변수선언, 입출력, 적용법)공부방2023. 1. 11. 12:43@mag1c

Table of Contents

728x90

[ JavaScript ]

JavaScript란?

객체(Object) 기반의 프로그래밍 언어이다.

HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있다.

(HTML은 웹의 '뼈대', CSS는 뼈대의 '디자인', 자바스크립트는 '뇌' 라고 생각하자)

Node.js와 같은 프레임워크를 사용하면 서버영역에서도 사용할 수 있다.

자바스크립트는 1995년에 넷스케이프(Netscape)의 브렌던 아이크(Brendan Eich)에 의해 만들어졌다.

처음에는 모카(Mocha)라는 이름으로 개발되었으나, 그 후에 라이브스크립트(LiveScript), 최종적으로는 자바스크립트(JavaScript)라는 이름으로 변경됐다.

1996년에 넷스케이프(Netscape)는 자바스크립트를 국제 표준안으로 만들기 위해 ECMA(European Computer Manufacturers Association)에 제출했다. 그 결과 ECMAScript라는 새로운 표준을 제정하였고, 국제 표준이 된다.

첫 번째 버전인 ECMA-262를 1997년에 공표했다.

현재 자바스크립트의 최신 표준은 2015년에 발표된 ECMAScript 6이다.

JavaScript의 특징

1. 객체 기반의 스크립트 언어이다.

2. 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다.

3. 프로토타입 기반의 객체 지향 언어지만, 멀티패러다임의 프로그래밍 언어이다.(함수지향 프로그래밍과 객체지향 프로그래밍을 모두 지원하는 언어이다.)

4. 현 시점에서 브라우저에 동작하는 유일한 프로그래밍 언어이다.

vs Java

Java	Java Script
컴파일 언어	인터프리터 언어
타입 검사가 엄격하다	타입 명시를 하지 않음
클래스 기반의 객체지향 언어	프로토타입 기반의 객체지향 언어

변수 선언

변수 선언 시 타입을 명시하지 않는다.

var String test = "123"; (x)
var test = "123";

선언 방식

변수	설명
var	변수 선언 시 재선언, 재할당 가능
let	재할당만 가능
const	상수 / 모두 불가능

1. var

재선언 및 재할당이 가능하다.

var a = "100";
console.log(a); // 100
var a = "200";
console.log(a); // 200
var a = "300";
console.log(a); // 300

2. let

재할당만 가능하다.

// 불가능하다
let a = "100";
console.log(a);
let a = "200";
console.log(a);

let a = "100";
console.log(a); // 100
a = "200";
console.log(a); // 200

3. const

재선언 및 재할당이 불가능하다. (상수)

const는 처음 선언할 때 반드시 초기화(할당)를 해주어야 한다.

const c = 100;
c = 200;  // TypeError: Assignment to constant variable

입·출력

입력

prompt를 사용한다

prompt("입력하세요");

출력

1. window.alert() 메서드

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

3. document.write() 메서드

4. console.log() 메서드

window.alert()

let x=20, y=30;
if(x==y) alert("같다");
else if(x>y) alert("왼쪽이 크다");
else alert("오른쪽이 크다");

innerHTML

HTML DOM 요소를 이용한 방법이다.

document 객체의 getElementByID()나 getElementsByClassName() 등의 메서드를 사용하여 HTML요소를 선택 후

innerHTML 프로퍼티(속성)를 이용하면 선택된 HTML 요소의 내용이나 속성값 등을 변경할 수 있다.

<script>
    var str = document.getElementById("text");
    str.innerHTML = "바꼈다ㅋㅋ";
</script>

DOM 요소를 배운 뒤 더 자세하게 설명해보겠다.

document.write()

웹 페이지가 로딩될 때 실행되면, 가장 먼저 데이터를 출력한다.

웹 페이지의 모든 내용이 로딩된 후에 해당 메서드가 실행되면, 웹 페이지 내에 로딩된 모든 데이터를 지우고 자신의 데이터를 출력한다.

테스트나 디버깅 외의 용도로 사용할 경우 데이터가 손실되지 않게 주의하여 사용해야 한다.

<button onclick="document.write(77 * 77)">버튼</button>

console.log()

웹 브라우저의 콘솔을 통해 데이터를 출력해준다.

웹 브라우저에서 F12를 누른 후, 콘솔을 클릭하면 콘솔 화면을 사용할 수 있다.

콘솔 화면을 통한 데이터의 출력은 디버깅하는데에 많은 도움이 된다.

for(var i=0; i<=3; i++){
    for(var j=0; j<=3; j++){
        console.log("숫자1 : "+i+" 숫자2 : "+j);
    }
}

JS 적용방법

내부 적용

script 태그를 이용한다.

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

외부 적용

외부 js파일과 html을 연결한다.

<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <script src="/test/test.js"></script>
</head>