현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.
1. 자바스크립트란?
HTML은 마크업 언어, CSS는 스타일시트 언어이다.
그렇다면 자바스크립트는? 자바스크립트는 프로그래밍 언어이다.
자바스크립트는 서버 개발, 어플리케이션 개발 등 다양한 목적을 위해 사용할 수 있는
팔방미인(?) 언어이지만, 주된 활동 분야는 역시 ‘웹 개발’이다!
웹 개발이란?
인터넷을 통해 서비스되는 웹사이트를 개발하는 일!
나의 처음 목표는 이 개발 삼형제를 마스터하기 위해 개발을 배우기 시작했다.
1) 자바스크립트의 역할
웹사이트 개발에 있어, 자바스크립트의 역할은
- 웹 브라우저 및 하위 객체가 가진 기능을 구동하거나
- HTML/CSS를 통해 렌더링된 화면을 조작할 수 있다.
위와 같은 역할을 정상적으로 수행하기 위해서는, 자바스크립트 코드를 올바른 위치에 작성하는 것이 중요하다!
2) 자바스크립트 작성 위치
웹 페이지에 자바스크립트 코드를 적용시키는 방법으로는 다음 두 가지가 있다.
• HTML 문서 내부에 작성하기
• 자바스크립트 파일을 만들고, 그 안에 작성한 코드를 HTML 문서에 연결하기
실습!
2. 자바스크립트 동작원리 & 출력해보기
1) 스크립트 동작 원리
자바스크립트는 프로그래밍 언어로써, 소프트웨어적 대상에게 명령을 내리는 역할을 수행한다.
여기에서 소프트웨어적 대상이란, 웹 브라우저, 웹 요소, 웹 스타일 등을 의미한다.
명령을 내리고픈 대상에 자바스크립트 명령을 전달하면, 다음 절차대로 작업이 이루어진다.
2) 입력 > 처리 > 출력
- 입력 : 객체에게 어떤 작업을 수행하라는 명령을 전달한다.
- 처리 : 객체가 주어진 작업을 수행한다.
- 출력 : 객체가 작업을 수행한 결과를 사용자에게 반환한다.
자바스크립트의 모든 명령문은 대~부분 위와 같은 절차에 따라 수행된다!
그리고 자바스크립트에는 다양한 객체 이름이 미리 정의되어 있어, 사용자는 이를 어떻게 사용하는지만 알고 있으면 된다.
3) 객체 다루는 방법
자바스크립트가 제공하는 객체 이름을 선택하고, 뒤에 점(.)을 붙인 다음 전달하고자 하는 명령을 적어준다.
4) window
웹 브라우저는 소프트웨어 세계에 존재하는 사물, 즉 객체이다.
그리고 자바스크립트에는 웹 브라우저에 명령을 전달할 수 있는 객체 이름이 정의되어 있다.
window.alert(x)
window.alert(x) 명령문은 웹 브라우저에게 ‘경고창에 x라고 쓴 다음 화면에 띄워줘!’라는 명령을 전달한다. x에는 사용자가 원하는 내용을 입력하면 된다.
5) 주석
실습!
3. 콘솔 출력 & 자료형 개념
1) console
콘솔(console)은 브라우저의 디버깅 콘솔을 의미한다.
콘솔은 브라우저 안에 내장된 브라우저의 하위 객체이므로, 브라우저 객체를 통해 접근할 수 있다.
2) 디버깅 콘솔
웹 브라우저의 ‘개발자 도구’를 열면 메뉴 중 ‘콘솔(console)’이라는 항목이 존재하는데,
이것을 누르면 나타나는 화면이 바로 디버깅 콘솔이다.
TiP
우리가 웹 브라우저에 접근할 수 있게 해주는 객체 window는 console을 비롯한 다양한 하위 객체 및 데이터, 메소드 등을 포함하고 있는데, 사용자는 편의를 위해 window.을 생략한 채로 코드를 작성할 수 있다.
3) console.log(x) & 자료형
console.log(x) 명령문은 디버깅 콘솔에게 ‘콘솔창에 x라고 써줘!’라는 명령을 전달한다. x 자리에는 사용자가 원하는 내용을 입력하면 되는데, 자바스크립트 문법으로 표현될 수 있는 데이터만이 x 자리에 들어갈 수 있다.
자바스크립트에는 데이터를 표현할 때 사용하는 몇 가지 형식이 정의되어 있는데, 이러한 형식을 통틀어 ‘자료형’이라 한다!
4. 자바스크립트 주요 자료형
- 숫자
- 문자열
- 불리언
- 다양한 목적과 형태의 객체
1) 숫자
숫자는 우리가 알고 있는 그 숫자가 맞다. 숫자는 정수와 실수로 구분할 수 있다.
산술 연산은 더하기, 빼기 등 수를 이용한 계산이다.
두 개의 숫자 데이터를 피연산자로 받아서 하나의 숫자 데이터를 결과로 반환한다.
let 변수(재할당 가능 ✅)
자바스크립트에서 변수(Variable) 는 데이터를 저장하는 컨테이너.
값을 저장할 수 있는 "이름표가 붙은 상자"라고 생각하면 된다.
블록 스코프를 가지며, 재선언은 불가능하지만 값 변경
변수 만드는 방법
let 변수이름 = 데이터;변수의 선언과 초기화 따로하기
let 변수이름; // 변수 선언
변수이름 = 데이터; // 변수 초기화let변수는 데이터를 기억하기 위해 사용한다. 변수는 한번에 하나의 데이터만 기억할수 있으며, 기억하고 있는 값을 바꿔가며 사용할수있다
let 변수이름 = 데이터1; // 변수 선언과 동시에 초기화 동시 진행
변수이름 = 데이터2; // 새로운 데이터 대입
변수이름 = 데이터3; // 새로운 데이터 또 대입 변수 제약사항
변수는 ‘데이터에 붙이는 이름표’이다.변수의 이름은 기본적으로 짓는 사람 마음대로 지어 줄 수 있지만, 몇 가지 제약사항도 존재한다.
- 변수명에는 오직 문자와 숫자, 그리고 기호$과 _ 만이 포함될 수 있다.
- 변수명의 첫 번째 글자로 숫자가 올 수 없다.
- 이미 다른 뜻을 가지고 있는 단어(키워드)는 변수명으로 사용할 수 없다.
변수에는 값을 대입한다.
대입이란, 오른쪽 피연산자의 데이터를 왼쪽 피연산자에 집어넣는(?)작업을 뜻한다.
변수에 값을 기억 시키는 작업 또한 대입이며, 이때 대입 연산자를 사용한다.
const 상수(변경 불가능 🚫)
상수란 수식에서 ‘변하지 않는 값’을 뜻한다. 변수와 반대되는 것으로, 상수는 ‘단 하나의 데이터만을 위해 사용하는 이름표’ 로써, 값의 변경이 불가하다.
const로 선언한 변수는 재할당이 불가능. (한번 값이 정해지면 바꿀 수 없음)
상수 만드는 방법
const 상수이름 = 데이터;상수도 변수처럼 지정된 데이터 대신 사용할 수 있다. 상수 이름짓기 규칙은 변수 이름짓기와 동일하다.
상수의 선언과 초기화 따로하기
const 상수이름;
상수이름 = 데이터; // 에러발생상수를 만들때는 선언과 동시에 초기화를 해주어야 한다. 그러지 않으면 데이터를 지정할 수 없다.
상수는 자신이 선언될 때 지정된 데이터로 고정된다. 선언이 후 데이터를 대입하려고 하
면 에러가 발생한다.
Naming Convention
- camelCase : 대부분의 언어에서 많이 사용, 띄어쓰기 할때 대문자로 쓸것
- snake_case : 파이썬 같은 언어에서사용, 언더스코어로 쓴다.
- PascalCase : C# 마이크로소프트 계열의 언어에서 사용함
실습!
2) 문자열
자바스크립트에서 문자열이란, ‘기호의 순차 수열’을 뜻한다.
문자, 숫자, 특수문자 등 다양한 기호를 조합해 만들 수 있는 ‘기호의 집합’이며, 따옴표로 시작해 따옴표로 끝나는 데이터이다.
자바스크립트 문자열을 대상으로 더하기(+) 연산을 수행할 수 있다. 이때 더하기는 산술적인 덧셈을 수행하지 않고, 문자열 이어붙이기를 수행한다.
window 객체의 prompt(x) 메소드는 사용자로부터 문자열을 입력받을 수 있는 다이얼로그 박스를 열어주는 메소드이다. 괄호 안에 x로는 다이얼로그 박스에 띄울 메시지(문자열)를 전달할 수 있다.
prompt(x) 메소드는 실행 시에 사용자로부터 문자열을 입력받고, 입력받은 문자열을 자신이 사용된 곳에 그대로 ‘반환’한다. 즉, 메소드가 문자열로 바뀌게 된다.
템플릿 리터럴
템플릿 리터럴은 문자열을 표현하는 또 다른 방법으로, 따옴표를 이용해 표현하는 방법에 비해 조금 늦게 추가된 문법이다.
템플릿 리터럴은 백틱을 이용해 표현한다.
백틱(`)은 키보드 왼쪽 상단에 있으며, 쉬프트 키와 함께 누르면 물결(~)이 된다.
템플릿 리터럴은 반환값이 존재하는 자바스크립트 코드, 즉 표현식을 내장할 수 있는 문자열 표현법이다.
이는 문자열의 내용에 데이터를 삽입한다는 것을 의미한다.
템플릿 리터럴로 표현한 문자열 내부에 플레이스홀더 (${})를 기입하고, 그 안에 데이터를 기입하면 데이터는 문자열의 멤버가 된다.
데이터를 반환하는 메소드 또한 데이터와 같이 취급할 수 있다.
modifier
${modifier}는 문자열 안에 변수를 포함시키거나, 표현식을 삽입할 때 사용됩니다. ${} 안에 변수를 넣으면 해당 변수의 값이 문자열에 포함된다.
예를 들어, ${modifier}는 modifier라는 변수를 문자열 안에 포함시키는 역할을 한다.
let modifier = 'height';
console.log(`The value of the modifier is ${modifier}`); // The value of the modifier is height위 예제에서 ${modifier}는 modifier 변수가 가진 값을 문자열 안에 삽입한다. 템플릿 리터럴은 문자열을 더 쉽게 구성할 수 있도록 도와준다. 또한, ${} 안에는 단순한 변수뿐만 아니라 표현식도 사용할 수 있다.
let a = 5;
let b = 10;
console.log(`The sum of a and b is ${a + b}`); // The sum of a and b is 15이렇게 ${}는 자바스크립트에서 변수나 표현식을 문자열에 동적으로 삽입할 때 사용된다.
실습!
3) undefined, null, boolean, window.confirm(x)
undefined & null
자바스크립트 프로그래밍을 하다 보면 undefined나 null이라는 키워드를 목격하는 경우가 생긴다.
undefined는 아직 데이터가 정의되지 않았음을 나타내고, null은 의도적으로 데이터가 없음을 나타내기 위해 사용하는 일종의 표현 수단이다.
기본 자료형 boolean(불리언)
불리언(불린이라고 해도 돼요)은 숫자, 문자열과 같은 데이터 타입 중 하나이다.
true와 false, 단 두 가지 값만 존재한다.
참과 거짓 여부를 나타내기 위해 사용하는 데이터이다.
window.confirm(x)
window.confirm(x)는 사용자에게 확인과 취소 둘 중 하나를 선택하게 하고, 선택에 따라 true 또는 false를 반환하는 명령이다.
실습!
최종 실습
끝맺음.
처음 접하는 자바스크립트..
뭔가...수학공부하는 느낌이 든다.ㅎㅎㅎ
