변수(variable)

프로그램을 만들 때는 일시적으로 특정한 값을 자주 사용할 경우가 있는데, 이 때 변수를 사용한다.

이는 디스크가 아닌 메모리에 저장하는 일시적인 저장방법이다.

코딩을 할 때, 사람이 하나하나 입력하는 경우에는 실수가 발생할 수 있으며 정보처리시간 또한 길어지게 된다.

그러므로 ‘let’ 이라는 변수를 선언하여 이를 방지하여야 한다.

예를 들어,

let numberOne = 123의 변수를 선언하는 입력을 한다면

let numberOne = 123

undefined

이라는 결과값을 나타내게 되고, 후에 NumberOne 이라는 입력을 하면

numberOne

123

라는 결과값을 자동으로 나타낸다.

이와 같은 ‘let’으로 시작하는 명령을 선언이라 한다.

이를 응용한다면,

let numberOne = 1000

let numberTwo = 2000

let numberThree = 3000

numberOne + numberTwo + numberThree

6000

과 같은 결과값을 출력할 수 있다.

추후에, 이 선언을 바꾸고 싶다면 명령어를 입력하여

NumberOne = 4000 4000

와 같이 바꿀 수 있다.

또한, 이 선언문을 없애고 싶을 경우, 빈 값인 ‘null’ 값을 입력하여 선언문을 없앨 수 있으며

예를 들어, let NumberTwo = nul 이라는 명령어를 입력한다면

let NumberTwo = null

undefined

와 같은 결과값이 나타나게 되고, 후에 NumberTwo라는 명령어를 입력하게 된다면

NumberTwo

null

과 같은 결과값이 나타나게 된다.

이러한 변수는 영어 뿐만이 아닌 한글, 한자, 유니코드, ‘$, _’같은 특수문자도 선언이 가능하다.

상수(constant)

‘let’ 외에도 변수를 선언하는 예약어로 ‘const’ 와 ‘var’가 있다.

‘const’는 바꿀 수 없는 선언문이며, 이를 바꾸려고 한다면 에러가 발생한다.

예를 들어, const a = 'B' 라는 명령어를 입력했을 경우

const a = 'B'

undefined

라는 결과 값이 나타나며

a = 'C’ 라는 a의 변수선언문에 다른 값을 대입을한다면

a = 'C' VM7443:1 Uncaught TypeError: Assignment to constant variable. at <anonymous>:1:3

와 같은 결과값이 나타난다.

‘var’는 다시 선언할 수 있는데, 이는 사용간 착오를 불러 일으킬 수 있으므로 버그가 발생할 가능성이 있다.

따라서, 과거의 명령에서는 쓰였지만 현재는‘let’과 ‘const’로 완벽히 대체할 수 있으므로 사용하지 않는다.

+, -, *, /

컴퓨터에서는 ‘+, -, *, /’를 더하기, 빼기, 곱하기, 나누기로 인식하여 사용할 수 있다.

**

거듭제곱을 사용하고 싶다면, '**'의 기호를 사용 할 수 있는데

예를 들어, 23을 입력한다면 8이 출력되며 32를 입력한다면 9가 출력된다.

연산자를 사용한다면 사칙연산에 의해 처리되며, 우선순위가 같은 연산자는 왼쪽에서 부터 처리된다.

예를 들어, 

2 + 3 * 4를 입력한다면 사칙연산에 의해 14의 결과값을 나타내게 되며, 2+3을 먼저 처리하고 싶다면

(2 + 3) * 4로 입력하여 앞의 2 + 3 부분을 먼저 처리해 20의 결과값을 나타내게 된다.

예를 들어, 1 + 2 ** 3을 입력할 경우에는 결과값이 9가 나오지만, (1 + 2) ** 3 을 입력한다면 괄호 안의 계산 먼저 처리하게 되어 27의 결과값이 나오게 된다.

숫자를 사용 할 경우 그 수의 양이 크다면 10000의 경우에 1e4로 입력할 수 있으며 결과 값은 10000로 출력된다.

==, ===

자바스크립트에서는 값이 같은지 비교하기 위해서는 ‘=’ 연산자가 아닌’==’ 연산자를 사용하며

‘=’ 연산자는 비교하는 연산자가 아닌 대입 했다는 의미이다.

하지만

'1' == 1

true

의 결과값을 나타내는데, 이는 자료형이 같은 경우에 형 변환을 한 후 비교하기 때문이다.

그러므로 자료형까지 같은지 비교하기 위해서는 ‘===’ 연산자를 사용하며 이는 값 뿐만이 아닌 자료형까지 같은지도 비교한다.

따라서, ‘===’ 연산자를 사용한다면

'1' === 1 false

와 같이 다른 결과값을 나타낸다.

‘같지 않다’ 라는 표현을 자바스크립트에서 입력하기 위한 방법으로는 ‘!=’ 연산자를 사용할 수 있으며

이는 역시

'1' != 1 false

의 결과값을 볼 수 있으며, 형을 변환하지 않으며 비교하기 위해서는 ‘!==’ 연산자를 사용하고 이를 사용했을 때는

'1' !== 1 true

처럼 다른 결과값을 나타낸다.

'3개의 세미콜론이 있다' 라는 것은 3개의 명령이 있는 것이다.

주석(//) : 컴퓨터가 아닌 코드를 읽는 타인에게 코드에 대한 설명이 필요할 때, 주석을 달아서 설명할 수 있다.

컴퓨터는 주석에 대한 부분을 읽지 않고 넘기므로, 코드 구성에서 신경쓰지 않아도 문제가 없다.

그러므로, 잠깐동안 쓰는 코드 혹은 쓰지 않는 코드는 주석으로 처리할 수 있다.

값(Value) : 프로그램이 조작할 수 있는 데이터이며 값에는 여러 종류가 있다. 이러한 값의 종류를 자료형(Data Type)이라고 한다.

불값(Boolean) : true와 false를 나타내는 자료형의 종류이다.

문자열(string) : 시작과 끝이 ‘(작은 따옴표), “(큰 따옴표), `(백틱)로 감싸진 값을 문자열이라 한다.

만약 이 점이 문자열인지 헷갈린다면

typeof ‘헷갈리는 문자열’; 이라고 입력할 때, 문자열이 맞을 경우

“string” 이라는 값이 나타난다.

숫자열 : ‘123’이라는 숫자를 입력했을 때, 이는 컴퓨터에서 문자열로 인식이 된다.

만약 123이라는 숫자를 숫자열로 인식하고 싶다면 ‘parseInt’와 ‘number’를 사용할 수 있다.

예를 들어, parseInt(’123’)이라는 명령어를 입력한다면 이는 숫자열로 변환되며 number 함수에서도 같이 적용된다.

숫자를 따로 직접 입력하고 싶다면 parseInt (prompt())를 입력할 수 있으며, 이는 직접 값을 입력할 수 있는 창을 띄워준다.

만약, 숫자열인지 확인하고 싶다면 typeof (’확인하고 싶은 숫자’)를 입력했을 경우에 숫자열이 맞다면 ‘number’라는 출력을 볼 수 있다.

예를 들어, ‘typeof parseInt(Prompt())’ 라는 명령어를 입력했을 경우에 이는 프롬프트 창 안에 입력한 숫자를 정수로 변환하며 이는 문자열인지 숫자열인지 확인이 가능하다.

‘NaN(NotaNumber)’과 ‘Infinity’는 숫자가 아닌 문자이지만 컴퓨터에서는 숫자로 인식하는 특이한 경우이며, 사람의 관점으로 보는 것이 아닌 컴퓨터적인 관점에서 이해하여야 한다. 실제로, typeof NaN과 typeof Infinty를 입력하면 숫자열로 인식하며 typeof (’NaN’)과 typeof (’Infinity’)를 입력하면 문자열로 인식한다.

컴퓨터는 0과 1의 이진법 계산에 강하며 다른 수로 계산할 때는 취약하다. 따라서 소수를 계산할 때,

0.1 + 0.2를 입력하면 0.30000000000000004로 결과값이 나타나게 된다.

그러나 위와 같은 결과값을 원하지 않을 때에는 각 소수를 곱하여 더하여 정수를 만들어주고 다시 나누는 방법이 있는데,

이는

(0.1 * 10 + 0.2 * 10) / 10같이 입력한다면 0.3로 결과값이 나타나게 된다.

문자열 안에 (`, ‘, “)등의 값을 넣고 싶을 때, 같은 기호를 입력한다면 에러가 나타날 수 있는데, 이는 컴퓨터가 문자열이 끝난다고 인식하기 때문이다. 이 때는 다른 기호를 넣어 감싸면 에러가 나지 않으며 표현이 된다.

하지만 꼭 같은 모양의 기호를 넣어야 한다면 ‘\(역슬래시)’를 기호 앞에 써주면 되는데, ‘\’를 입력한다면 컴퓨터에서 명령어가 아닌 기호로 인식하여 에러가 발생하지 않게 된다. 이처럼 ’ \’는 특수한 역할을 한다.

자바스크립트 언어의 가장 기본적인 내용부터 적어보겠습니다. 

( ) : parentheses

{ } : braces

[ ] :brackets

(`) : 백틱이라고 불리며, 이는 줄바꿈이 가능합니다.

ParseInt : 문자를 숫자열(정수)로 바꿔주는 함수입니다.

parseFloat : 문자를 숫자열(소수)로 바꿔주는 함수입니다.

Number : 문자를 숫자열로 바꿔주는 객체입니다.

(prompt()) : 값을 입력할 수 있는 창을 띄워줍니다.

다음은 주로 발생할 수 있는 오류 내용들입니다. 

uncaught TypeError: console,lo is not a function console

제대로 입력했으나, log에서 오타를냈을 때 발생하는 에러입니다.

대소문자를 구별하여야 하며, 마침표(.) 역시 빼놓아서는 안됩니다.

log는 console의 기능중 일부이기 때문에 오타가 있어서는 안됩니다.

Uncaught SyntaxError: missing ) after argument List

따옴표(’)를 사용하지않았을 때 발생하는에러입니다.

예를 들어, 'Hello,world!'같은 경우는 ’(백틱)이나 ’(작은따옴표)또는 "(큰따옴표)로 감싸줘야 합니다.

uncaught SyntaxError: Invalid or unexpected token

따옴표의 짝을 맞추지 않았을 때 발생하는 에러입니다.

예를 들어, 'Hello,world!' 같은 경우는 앞의 기호와 뒤에 기호가 일치하여야 합니다.

프로그램을 사용 할 때, 문법의 실수나 오타가 있다면 프로그램이 동작하지 않으므로 정확히 입력해주어야 합니다.

웹 작동 방식

URL 입력 > 인터넷 상에 있는 원격 컴퓨터(서버)에 연결 요청) > 코드 명령어 송신 > 화면상의 컨텐츠 표출

위의 순서로 작동되며,  브라우저를 통해 코드의 형태로 전송되어 사용자에게 컨텐츠화 된다.

웹  개발에 필요한 3가지 언어

1. HTML(HyperText Markup Language)

 실제 웹사이트의 내용과 구조를 만드는 데에 사용되며 이는 문단, 제목, 데이터 표 등을 정의하거나 페이지에 

2. CSS(Cacading Style Sheets)

 표현된 페이지와 위의 콘텐츠를 꾸며주는 데에 사용된다.

3. Javascript

버튼 등의 상호작용에 사용된다.