JavaScript

wonkeunC·2021년 3월 17일
0

JavaScript

목록 보기
1/15
post-thumbnail

JavaScript 란?

자바스크립트는 복잡한 무언가(주기적으로 내용이 갱신되는 기능이나 능동적인 지도, 변화하는 2D/3D 그래픽, 동영상 등)를 웹페이지에 적용할 수 있게 하는 스크립트 혹은 프로그래밍 언어입입니다. 자바스크립트는 표준 웹 기술이라는 레이어 케이크에서 세번째 층이라고 볼 수 있습니다. 다른 두 층(HTML과 CSS)에 대한 보다 자세한 정보는 학습 영역의 다른 부분에서 찾아 볼 수 있습니다.

JavaScript와의 연결고리

HTML은 제공할 웹 컨텐츠의 구조와 의미를 문단, 제목, 표, 삽입 이미지, 동영상 등으로 정의하고 부여하는 마크업 언어입니다.

CSS는 배경색, 폰트 등의 레이아웃등을 지정하여 HTML 컨텐츠를 꾸며주는 스타일 규칙 언어입니다.

JavaScript는 동적으로 컨텐츠를 바꾸고, 멀티미디어를 다루고, 움직이는 이미지 그리고 꽤나 많은 다른 일(물론, 전부는 아니지만 몇 줄만의 자바스크립트 코드로 얻는 결과는 놀라울겁니다.)들을 할 수 있는 스크립트 언어입니다.

3개의 요소들은 각각 유기적으로 잘 구성되어 있습니다. 예제와 같이 간단한 폼을 만들어 봅시다. HTML을 사용하여 그 구조와 목적에 맞게 마크업 할 수 있습니다.

JavaScript로 어떤 일을 추가적으로 할 수 있는가?

변수안에 값을 저장할 수 있습니다. 위의 예시를 보면, 작성된 새로운 이름을 name이라는 변수에 저장하였습니다.

프로그밍에서 '문자열(strings)'이라고 불리는 문자들도 조작 가능합니다. 위 예시에 보면 "Player 1:"이라는 문자열을 name이라고 만든 변수와 겹합하여 "Player 1: Chris"라는 글을 완성할 수 있었습니다.

웹 페이지상의 이벤트에 응답하는 코드를 작성할 수 있습니다. 예제에서 사용한 click 이벤트를 통해 요소가 언제 클릭되고, 텍스트 라벨을 업데이트 시킬지 정정의하였습니다.

웹페이지에서 JavaScript는 어떤 역할을 할까?

브라우저에서 웹페이지를 불러올 때, 실행 환경(브라우저 탭)안에서 HTML, CSS, Javascript 코드가 실행됩니다. 이는 마치 공장에서 원재료(코드)가 일련의 과정을 거쳐 제품(웹페이지)으로 탄생되는 것과 같습니다.

자바스크립트는 HTML과 CSS가 결합되고 웹페이지 상에서 올려진 후, 브라우저의 자바스크립트 엔진에 의해 실행됩니다. 이는 페이지의 구조와 스타일등을 정해놓고, 자바스크립트가 실행된다는 것과 같은 의미입니다.

동적으로 사용자 인터페이스를 업데이트하는 자바스크립트의 사용은 Document Object Model API를 통해 HTML과 CSS를 수정하는 것으로 좋은 현상입니다. 만약 자바 스크립트가 HTML과 CSS 전에 실행되었다면 문제가 분명 발생할 것입니다.

Data Type

데이터 타입은 모든 언어에서 다루는 첫번째 개념이다. 데이터 타입을 알지 못하는 것은 "스펠링을 모르면서 작문을 하겠다는 것과 같다". 지금부터 데이터 타입의 개념을 알아보자.

JavaScript에서 가장 기초적으로 다루는 data type은 Number, String, Boolean이 있으며,
더 나아가 Array, Object, Function, Null, undefined 가 있다.

우선 Number와 String 부터 알아보자.

Number

숫자를 표현하거나 산술 연산을 하는데 사용되는 데이터 타입이다.
기본적으로 +, -, *, / 등의 산술연산이 가능하며 Math 라는 내장객체를 이용하여 수학함수를 이용한 결과를 얻을 수도 있다. 명세에 따르면 자바스크립트의 Number는 "64비트 형식 IEEE 754 값" 으로 정의 된다.

String 문자열

toUpperCase() : 소문자 문자열을 대문자로 변환시켜준다.
toLowerCase() : 대문자 문자열을 소문자로 변환시켜준다.

console.log('hello'.toUpperCase()) // 출력 : 'HELLO'
console.log('Hello'.toLowerCase()) // 출력 : 'hello'

indexOf : 문자열에서 특정 문자 찾기.

console.log("hello World".indexOf('O')) // 출력 : -1
console.log("hello World".indexOf('o')) // 출력 : 4
console.log("hello World".indexOf('World')) // 출력 : 6

그 밖의 String 메소드

replace()
charAt()
split()

자료형, 변수(variable)

모든 프로그래밍 언어는 내장 자료형이 있지만, 종종 이러한 내장 자료형은 언어마다 다르다. 이 문서에서는 자바스크립트의 내장 자료형과, 내장 자료형에서 사용할 수 있는 속성들에 대해 알아본다. 이로써 내장 자료형들로 더 복잡한 자료형을 만드는데 사용할 수 있을 것이다. 가능하다면 다른 언어와도 비교해보자.

var foo = 42;    // foo 는 이제 Number 
var foo = "bar"; // foo 는 이제 String
var foo = true; // foo 는 이제 Boolean

var - let - const

// var : 변수 재선언 가능

var variable = '변수선언함'; 
console.log(variable); //변수선언함 

var variable = '또 변수선언함';
console.log(variable); //또 변수선언함

-------------------------------------

// let : 변수 재선언 불가능, 변수 재할당 가능

let variable = '변수선언함';
console.log(variable); // 변수선언함 

variable = '변수 재할당함';
console.log(variable); //변수 재할당함

let variable = '또 변수선언함';
console.log(variable); //또 변수선언함

-------------------------------------

// const : 변수 재선언 불가능, 변수 재할당 불가능

const variable = '변수선언함'; 
console.log(variable); //변수선언함 

variable = '변수 재할당함'; 
console.log(variable); //변수 재할당함(에러) 

const variable = '또 변수선언함'; 
console.log(variable); //또 변수선언함(에러)

기본 타입 (Primitive value)

오브젝트를 제외한 모든 값은 변경 불가능한 값 (immutable value) 이다. 예를 들자면, 특히 C 언어와는 다르게도, 문자열은 불변값 (immutable) 이다. 이런 값을 "primitive values" 라고 일컫는다.

Operator 연산자

자바스크립트는 여러 종류의 연산을 위한 다양한 연산자(operator)를 제공하고 있습니다.

산술 연산자(arithmetic operator)

산술 연산자는 사칙연산을 다루는 기본적이면서도 가장 많이 사용되는 연산자입니다.

대입 연산자(assignment operator)

대입 연산자는 변수에 값을 대입할 때 사용하는 이항 연산자이며, 피연산자들의 결합 방향은 오른쪽에서 왼쪽입니다.

또한, 앞서 살펴본 산술 연산자와 결합한 다양한 복합 대입 연산자가 존재합니다.

증감 연산자(increment and decrement operator)

증감 연산자는 피연산자를 1씩 증가 혹은 감소시킬 때 사용하는 연산자입니다.

이 연산자는 피연산자가 단 하나뿐인 단항 연산자입니다.

증감 연산자는 해당 연산자가 피연산자의 어느 쪽에 위치하는가에 따라 연산의 순서 및 결과가 달라집니다.

비교 연산자(comparison operator)

비교 연산자는 피연산자 사이의 상대적인 크기를 판단하여, 참(true)과 거짓(false)을 반환합니다.

비교 연산자는 모두 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽입니다.

논리 연산자(logical operator)

논리 연산자는 주어진 논리식을 판단하여, 참(true)과 거짓(false)을 반환합니다.

&& 연산자와 || 연산자는 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽입니다.

! 연산자는 피연산자가 단 하나뿐인 단항 연산자이며, 피연산자의 결합 방향은 오른쪽에서 왼쪽입니다.

profile
개발자로 일어서는 일기

0개의 댓글