Javascript : Variable(변수)

javascript

Javascript : Variable(변수)

ThatHomr 2023. 3. 14. 12:22

<!DOCTYPE html>

<head>

<title>JavaScript - Variable</title>

</head>

<body>

// HTML 문서(DOM)에 원하는 컨텐츠를 출력

document.writeln("Hello World!");

document.writeln("Hello JavaScript!");

// → HTML 문서에서는 모든 공백을 하나의 공백으로 처리

// → 따라서 각 줄마다 출력하기 위해 script 태그를

// pre 태그 안에 작성

</script>

<hr>

document.writeln("Hello World!");

document.writeln("Hello JavaScript!");

// 정적(static) vs 동적(dynamic)

// - 정작 = 변하지 않고 유지되는 특성

// - 동적 = 외부 요인(데이터, 사용자)에 따라 변하는 특성

// HTML 과 CSS 만으로 작성하면 이는 '정적 페이지'로만 작성된다.

// → 문서를 작성하고, 그 작성한대로만 출력

// JavaScript 를 통해서 '동적 페이지'를 만들 수 있다.

// → 사용자가 원하는 대로 상황에 따라 다르게 만들어질 수 있다.

// → 만약 게시글이 7개가 있다면 7개의 행만 만들고

// 만약 게시글이 5개가 있다면 5개의 행만 만든다.

</script></pre>

<hr>

// 데이터(Data)

// - 프로그램에서 다루는 값

// - 300, -10, 3.1111, "itemA" ...

// - 실 생활에서 숫자와 문자를 구분하듯이

// JavaScript 에서도 데이터를 구분하여 사용한다.

// 자료형(Data Type)

// - 프로그램에서 사용되는 데이터의 종류를 정의

// - 종류

// blooean = 논리

// : 참 또는 거짓을 표현하기 위한 타입

// : 명제 또는 조건의 결과를 표현할 때 사용되는 데이터의 타입

// : "나이가 20살 이상입니까?"

// : true(참), false(거짓)

// number = 숫자

// : 소수점이 없는 수(정수)와 소수점이 있는 수(실수)를

// 표현하기 위한 타입

// : 10, -5, 3.112

// string = 문자열

// : 다수의 문자들을 하나의 집합으로 표현하기 위한 타입

// : 따옴표로 문자들을 묶어서 표현

// : 따옴표로 묶지 않고 바로 작성하면, 이를 데이터가 아닌

// 키워드 또는 식별자로 인식

// : "Hello", "100", ...

// function = 함수, 기능

// : 하나의 기능을 표현하기 위한 타입

// : 하나의 기능을 구현하기 위한 명령어들로 작성

// : println(), alert(), ...

// object = 객체

// : 특정 사물, 대상을 표현하기 위한 타입

// : document, console, window, ...

// undefined = X

// : '아무런 데이터가 존재하지 않는다' 를 의미

//-------------------------------------------------------------

// boolean 타입

// - 명제 또는 조건의 결과를 표현하기 위한 타입

// - 0, "", null, undefined → false 와 같은 취급

// 그 외 모든 데이터 → true 와 같은 취급

document.writeln("===== boolean =====");

document.writeln(true); //참

document.writeln(false); // 거짓

// 10 이 20보다 크다 → 거짓

document.writeln(10 > 20);

// 10 이 20보다 크다 → 참

document.writeln(10 < 20);

// number 타입

// - 정수(inteer)

// : 소수점이 없는 수

// - 실수(floating-point)

// : 소수점이 있는 수

document.writeln("===== number =====");

document.writeln(100); // 정수

document.writeln(-50); // 정수

document.writeln(1.5); // 실수

// 더하기 연산자(+)를 통해 수학 연산을 할 수 있다.

document.writeln(1.5 + 50); // 실수

// string 타입

// - 문자 또는 문자들의 집합을 표현

// - 문자 형식의 데이터들은 따옴표로 묶어서 작성

// - 연결 연산자(+)를 통해서 다른 데이터와

// 하나의 문자열로 만들 수 있다.

document.writeln("===== string =====");

document.writeln("width : " + 300);

// = document.writeln("width : 300");

document.writeln("height : " + 300 + 400);

// = document.writeln("height : 300" + 400);

// = document.writeln("height : 300400");

// → 연결 연산자와 더하기 연산자를 연달아 사용할 경우

// 먼저 작성된 것부터 연산하게 된다.

document.writeln("height : " + (300 + 400)) ;

// = document.writeln("height : " + 700) ;

// → 먼저 연산되어야 하는 부분이 있으면

// 소괄호를 통해 묶어줘야한다.

// document.writeln("Wonderful Day!

// Beautiful Day!");

// → 문자열 내에 엔터를 넣어줄 수 없다.

// document.writeln("My name is "Park"!");

// → 문자열을 만드는 따옴표를 문자열 내에 작성할 수 없다.

// 제어 문자(Escape Character)

// - 위와 같이 문자열 내에 표현할 수 없는 문자들을

// 표시하기 위한 문자

// - 제어 문자는 역슬래쉬(\, 또는 원화)로 시작

// - 종류

// \n : new line , 개행 문자 = 엔터

// \t : tab, 탭 문자

// \' : 작은 따옴표 문자

// \" : 큰 따옴표 문자

// \\ : 역슬래쉬, 원화 문자

document.writeln("Wonderful Day!\nBeautiful Day!");

document.writeln("My name is \"Park\"!");

//------------------------------------------------------

document.writeln("===== typeof =====");

// 자료형 검사

// - typeof 연산자

// - 연산자 다음에 오는 데이터의 타입을 반환하는 연산자

document.writeln(typeof 200);

document.writeln(typeof "200");

document.writeln(typeof document);

document.writeln(typeof document.write);

</script></pre>

// 변수(Variable)

// - "변하는 수"

// - 프로그램 내에서 데이터를 다루기 위한 가장 기본적인 수단

// - 프로그램은 스스로 데이터를 저장하지 않기 때문에

// 데이터를 직접 저장하고 관리하기 위한 수단이 필요

// - 변수의 가장 기본적인 기능 = 데이터의 저장/사용

// - 변수에는 저장된 데이터들을 구분하기 위한 식별자를 부여

// → 변수 = 데이터를 저장하기 위한 '식별자가 부여된 저장 공간'

// 변수의 용도

// - 입력/연산된 데이터의 저장

// - 데이터의 재사용

// - 사용되는 데이터의 용도/목적

// 변수를 사용하기 위한 방법

// 1. 변수 선언

// - 앞으로 사용할 변수를 생성

// - 데이터를 저장할 공간을 만들고 식별자를 부여하는 과정

// - var 키워드와 함께 식별자를 작성

// - 식별자는 저장될 데이터의 용도/목적을 알 수 있도록 작성

// 사각형의 너비를 저장하기 위한 변수

var width; // 식별자가 'width' 인 변수 생성

// 2. 데이터 대입(저장)

// - 선언된 변수에 데이터를 대입(저장)하는 과정

// - 대입 연산자(=)를 통해 변수에 데이터를 저장

// - 대입 연산자의 좌측에는 변수를

// 대입 연산자의 우측에는 저장할 데이터 또는 표현식을 작성

// - 대입 연산자가 우선 순위가 제일 낮기 때문에

// 우측의 표현식의 연산을 모두 한 다음 그 결과 값을 저장

// - 언제든지 다른 값으로 저장할 수 있으며

// 이전에 사용된 명령어에는 아무런 영향이 없다.

width = 200; // 변수 width 에 200 을 저장

width = 200 + 50; // 변수 width 에 200 과 50을 더한 값을 저장

// → width = 250;

// 3. 변수 초기화

// - 변수 선언과 동시에 데이터를 대입하는 과정

// - 변수 선언만 하게 될 경우 변수에 아무런 값이 없기 때문에

// 이후 코드에서 문제가 될 가능성이 있다.

// - 원하는 값이 없더라도 기본 값으로 저장을 하는 것이 좋다.

// 기본 값 = 0, false, null, ...

// var height;

// document.writeln( height ); // = undefined = 아무것도 없다.

// document.writeln( height + 50 ); // = NaN = Not a Number

var height = 200; // 변수 height 를 선언하고 200 을 저장

document.writeln( height );

document.writeln( height + 50 );

// 4. 변수 접근

// - 변수의 식별자를 코드에 그대로 작성

// 저장 공간에 접근할 수 있다.

// - 어떤 연산자와 같이 사용하더라도

// 변수에 저장된 값을 가져오는 것을 우선 시한다.

document.writeln(width);

// → document.writeln(250);

document.writeln("height = " + height);

// document.writeln("height = " + 200);

// document.writeln("height = 200");

document.writeln("height = " + height + "px");

document.writeln("area = " + (width * height) );

// → 출력되는 데이터를 연산하는 공식을 쉽게 알리기 위해

// 변수를 사용

var area = width * height;

// var area = width * height;

// var area = 250 * 200;

// var area = 50000;

// → 변수 area 에 저장되는 것은 'width' * 'height'의 식이 아닌

// 연산된 결과 값이 저장된다.

width = 100;

// → 변수 width 에 100을 저장 → 기존에 있던 250 은 삭제

// → 새로운 값이 저장되면, 이후 명령어부터 적용

area = width * height;

// → 변수 width 의 값이 다른 값으로 저장됐기 때문에

// 넓이도 다시 연산하여 저장해야한다.

document.writeln("area = " + area);

// 선언되지 않은 변수를 사용하면 오류가 발생

// - Uncaught ReferenceError: perimeter is not defined

// document.writeln(perimeter);

</script></pre>

// 상수(constant)

// = "변하지 않는 수"

// = 항상 같은 수

// = 프로그램의 끝까지 값을 유지해야하는 경우에 사용되며

// ES6 에 추가된 키워드

const yes = true;

const no = false;

// 초기화를 통해 데이터를 한 번 저장하면

// 이후 절대 다른 값으로 저장할 수 없다.

// yes = 10;

// - Uncaught TypeError: Assignment to constant variable.

</script></pre>

</body>

</html>

저작자표시 (새창열림)