티스토리 뷰
들어가며
본 글은 국민대학교 임베디드 소프트웨어 동아리 KOBOT의 과제를 위해 개인적인 기록용으로 유노코딩의 입문자를 위한 자바스크립트 기초의 내용을 정리한 포스트입니다.
내용
JavaScript
자바스크립트는 프로그래밍 언어로 서버 개발, 애플리케이션 개발 등 다양한 목적을 위해 사용할 수 있는 언어이지만 주된 활용 분야는 인터넷을 통해 서비스되는 웹사이트를 개발하는 웹 개발이다.
웹 사이트를 개발 할 때는 HTML, CSS, JS를 한 묶음으로 많이 다루는데, 각 부분의 쓰임을 다시 정리하자면 다음과 같다.
HTML : 웹 콘텐츠를 정의한다.
CSS : 웹 콘텐츠를 스타일링한다.
JavaScript : 웹 사이트의 동작이나 상호작용을 정의한다.
콘텐츠에 JS를 더하는 방법으로는 크게 두 가지 방법이 있다.
- HTML 문서 내부에 작성하기 (보통 <body></body> 제일 아래쪽에 작성하는 경우가 많다.)
- 자바스크립트 파일(.js 파일)을 만들고, 그 안에 작성한 코드를 HTML 문서에 연결하기
- CSS에서 링크를 연결할 것과 유사하게 <script src="script.js"></script>와 같은 서식으로 가져온다.
두 방법 모두 <script></script> 태그를 사용한다.
주석은 C와 같이 // 주석 or /* 주석 */과 같은 서식으로 쓴다.
객체
객체의 사전적 의미는 실세계에 존재하는 대상 또는 생각할 수 있는 어떤 개념을 의미한다.
JS에서의 객체란 어떤 사물이나 개념을 소프트웨어적으로 표현하기 위해 사용하는 문법적 수단으로 JS 코드 내에서 객체란 '값 또는 기능을 가지고 있는 데이터'이다.
object.data;
object.func(); etc..
웹브라우저도 소프트웨어 세계에 존재하는 사물로서 객체이다. 그리고 JS는 웹브라우저라는 객체에게 명령을 내리기 위해 사용하는 언어이다. JS는 window 등의 웹브라우저와 관련된 다양한 객체를 제공한다.
window.alert(); 알림 창을 띄운다.
window.prompt(); 사용자의 문자열을 입력받을 수 있는 다이얼로그 박스를 띄운다.
콘솔
콘솔(console)은 브라우저의 디버깅 콘솔을 의미한다. 콘솔은 브라우저 안에 내장된 브라우저 하위 객체이므로 브라우저 객체를 통해 접근할 수 있다. window.console (사용자의 편의를 위해 window. 은 생략 가능)
window.console.log();
window.console.clear();
자바스크립트 코드 작성 규칙
- 대문자와 소문자를 잘 구분하여 작성하여야 한다.
- 구문의 끝에는 세미콜론을 입력해 구문의 끝을 알릴 수 있으나 이는 선택사항이다.
- 가능하면 한 줄에는 두 개 이상의 구문을 쓰지 않는다.
변수
변수란 데이터에 붙이는 이름표이다. 변수를 이용하면 지정한 데이터를 필요할 때마다 재사용 할 수 있다. 해당 구문은 다음과 같다.
let 변수이름 = 데이터;변수를 만드는 작업을 '변수의 선언'이라 부르고, 만들어진 변수에 첫 데이터를 지정하는 작업을 '변수의 초기화'라 부른다. 이 과정은 동시에 진행될 수도 있고 따로 진행될 수 있으며 앞선 구문의 경우 두 과정을 동시에 진행한 경우이다. 따로 진행하는 경우는 다음과 같다.
let 변수이름; // 변수 선언
변수이름 = 데이터; // 변수 초기화키워드 let은 변수를 만들겠다는 의미로 쓰인다.
변수의 이름을 정할 때는 몇 가지 제약사항이 존재한다.
- 변수명에는 오직 문자와 숫자, 그리고 기호 $과 _만이 포함될 수 있다.
- 변수명의 첫 번째 글자로 숫자가 올 수 없다.
- 이미 다른 뜻을 가지고 있는 단어(키워드)는 변수명으로 사용할 수 없다.
변수에는 자바스크립트로 표현할 수 있는 모든 데이터의 유형을 넣을 수 있다. 데이터 유형에는 숫자, 문자열 등 여러 가지가 있는데, 이러한 데이터의 유형을 자료형이라 한다.
숫자에는 정수와 실수로 나뉘어 있으며 예시는 다음과 같다.
let number1 = 10; // 양의 정수
let number2 = 0;
let number3 = -10; // 음수 앞에 - 기호 사용// 실수를 표현할 때는 . 을 이용한다.
let number1 = 3.14; // 양의 실수
let number2 = -3.14; // 음의 실수
JS에서 문자열이란 기호의 순차 수열을 뜻한다. 문자, 숫자, 특수 문자 등 다양한 기호를 조합해 만들 수 있는 기호의 집합이며 따옴표로 시작해 따옴표로 끝나는 데이터이다. 여기서 따옴표는 큰 따옴표, 작은따옴표 모두 사용이 가능하다. 단 시작하는 따옴표와 끝나는 따옴표가 같아야 한다.
let string1 = '문자열에는 기호가 들어간다.';
let string2 = "12345...!?";문자열은 표현식을 내장할 수 있는 템플릿 리터럴으로도 표현될 수 있으며 이는 백틱(`)으로 표현된다.
// 따옴표를 이용한 문자열
const str1 = '작은 따옴표';
const str2 = "큰 따옴표";
// 백틱을 이용한 템플릿 리터럴
const str3 = `백팁`;백틱 내부에 플레이스홀더(${})를 기입하면 데이터는 문자열의 멤버가 된다. 파이썬의 f-string과 유사한 개념 같다.
const data1 = 100;
const str1 = `문자열 중간에 ${data1} 삽입하기`;
console.log(str1);
상수
상수란 변수와 반대되는 개념으로 단 하나의 데이터만을 위해 사용하는 이름표로서, 값의 변경이 불가하다. 예는 다음과 같다.
const 상수이름 = 데이터;
상수는 변수와 달리 선언과 동시에 초기화를 해 주어야만 한다. 그렇지 않으면 이미 정의된 상수에 새로운 값을 대입하려는 것으로 파악해서 인터프리터가 에러를 발생시킨다.
연산
연산이란 식이 나타낸 일정한 규칙에 따라 계산함을 뜻하며 사용자는 JS 코드를 통해 연산을 처리하는 식을 만들 수 있다. 여기에 사용하는 기호를 연산자라 한다.
산술 연산
대입 연산
연산자 우선순위
하나의 구문에 여러 개의 연산자가 함께 사용되는 경우, 연산자 우선순위가 반영되어 우선순위가 높은 것부터 계산된다.
null
null 데이터는 없다를 의미하는 데이터이다. 의도적으로 데이터가 없음을 나타내기 위해 사용하는 일종의 표현 수단이다.
let number;
// 이 변수는 숫자 0이다.
number = 0;
// 이 변수에는 아무 것도 없다.
number = null;undefined
undefined는 아직 데이터가 정의되지 않았음을 나타낸다.
let number;
// 아직 값을 정의하지 않았는데 출력을 시도하면 undefined가 출력이 된다.
console.log(number); // undefinedboolean
불리언(혹은 불린)은 숫자, 문자열과 같은 데이터 타입 중 하나이다. true와 false 단 두 가지 값만 존재하며 이는 참과 거짓 여부를 나타내기 위해 사용하는 데이터이다.
let value;
value = true; // 소문자로 써야 한다.
value = false; // 참, 거짓 모두 마찬가지
value = False;
value = True; // 이 두 가지는 안된다.
DOM(Document Object Model)
웹브라우저는 HTML 문서를 해석하고 화면을 통해 해석된 결과를 보여준다. 해석한 HTML 코드를 화면을 통해 보여주는 과정을 렌더링이라 한다. 이때 브라우저는 HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 문서(객체)를 생성한다. 이를 DOM이라 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링 한다.
DOM은 자바스크립트를 사용해서 웹 콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 키보드 타이핑 등 이벤트에 대한 처리를 정의할 수 있도록 제공되는 프로그래밍 인터페이스이다.
window.document
브라우저 객체 window의 document 속성은 창이 포함한 문서를 참조한다. 즉, window.document는 현재 브라우저에 렌더링 되고 있는 문서를 의미하며 이 속성을 이용하면 해당 문서에 접근할 수 있다.
documnet는 문서(HTML, XML, SVG 등)에 대한 공통의 속성과 메소드를 제공한다. 즉, 다양한 API를 제공한다. 관련 문서
요소를 선택하기 위해 대표적으로 다음 두 메소드를 사용할 수 있다. 두 메소드는 모두 요소(Element) 객체를 반환한다.
documnet.querySelector
document의 querySelector 메소드는 선택자를 인자로 전달받아, 전달받은 선택자와 일치하는 문서 내 첫 번째 요소(Element)를 반환한다. 일치하는 요소가 없다면 null 데이터를 반환한다. 인자로 전달되는 선택자는 문자열 타입의 유효한 CSS 선택자를 의미한다.
// p 태그를 선택
document.querySelector("p");
// id가 text인 요소를 선택
documnet.querySelector("#text");
// class가 text인 요소를 선택
documnet.querySelector(".text");document.getElementById
documnet의 getElementById 메소드는 id를 인자로 전달받아 전달받은 선택자와 일치하는 문서 내 요소(Element)를 반환한다. 일치하는 요소가 없으면 null 데이터를 반환한다. 인자로 전달되는 선택자는 문자열 타입의 id를 의미한다.
// id가 text인 요소를 선태
document.getElementById("text");
// id가 image인 요소를 선택
document.getElementById("image");
textContent
textContent 속성은 해당 노드가 포함하고 있는 텍스트 콘텐츠를 표현하는 속성이다. textContent를 통해 요소가 포함한 텍스트를 읽을 수도, 변경할 수도 있다.
// p 요소를 반환받아 상수로 이름을 붙인다.
const p = document.querySelector("p");
// p 요소의 textContent 속성을 콘솔에 출력한다.
console.log(p.textContent);
// p 요소의 textContent 값을 변경한다.
p.textContent = "텍스트를 이걸로 바꿔";
비교 연산
자바스크립트에선 주어진 두 항을 비교할 수 있는 비교 연산자를 제공한다. 유형은 다음 두 가지가 있다.
- 대소 비교
- 등가 비교
비교 연산식은 언제나 boolean 데이터를 반환한다.
대소 비교
등가 비교
등가 비교를 할 때 등호(=)의 대수에 따라 비교 규칙에 차이를 보인다.
==는 추상적(abstract) 같음 비교로서 자료형이 서로 다르더라도 같다고 판단할 수 있는 비교이다.
===는 엄격한(strict) 같음 비교로서 자료형과 데이터 모두 일치해야만 같다고 판단한다.
console.log('1' == 1) // true
console.log('1' === 1) // false
조건문
조건문이란 주어진 조건의 참/거짓 여부에 따라 프로그램의 흐름을 결정할 수 있는 구문을 뜻한다. 여기서 조건이란, 불리언 데이터를 반환하거나 불리언 데이터로 해석할 수 있는 표현식을 의미한다.
if문
키워드 if를 이용해 만드는 구문 if문은 가장 일반적인 형태의 조건문이다.
if(조건) {
// 조건이 true일 때 실행할 코드
}else를 추가하여 조건이 거짓일 때의 할 일을 추가 정의할 수 있다.
if(조건) {
// 조건이 true일 때 실행할 코드
} else {
// 조건이 false 일 때 실행할 코드
}
반복문
반복문은 비슷하거나 동일한 구문을 반복해서 수행할 수 있는 구문이다. 대표적인 반복문은 다음 두 가지이며, 두 반복문은 구조 및 동작 방식에서 차이를 보인다.
- while문
- for문
while문
키워드 while을 이용해 만드는 구문 while문은 주어진 조건이 참일 동안에 구문을 반복하는 반복문이다. while 문의 기본 형태는 다음과 같다.
while(조건) {
// 조건이 true인 동안에 반복 수행할 코드
}for문
for문은 구문 작성 시 반복을 위해 필요한 세 가지 요소를 한 곳에 모아 작성함으로써 보다 명시적으로 반복 횟수를 표현할 수 있는 직관적인 구문이다.
for(초기식; 조건식; 반복식) {
// 조건이 true인 경우 반복 수행할 코드
}초기식은 반복 조건의 초기화 작업이다.
반복식은 반복이 한 번 끝날 때마다 실행될 작업이다.
함수
함수는 호출될 수 있는 코드 조각이다. 변수를 선언하고 데이터를 대입하면 변수의 이름을 데이터 대신 사용할 수 있는 것처럼, 함수를 선언하면 함수의 이름을 코드 조각 대신 사용할 수 있다. 함수를 만드는 방법에는 다음 두 가지가 있다.
- 함수 선언식
- 함수 표현식
함수 선언식
함수 선언식은 다음과 같은 형태를 가진다. 선언 후 함수명은 중괄호 안의 기능 대신 사용될 수 있다.
function 함수명() {
// 함수의 기능을 표현한 구문
}함수 표현식
const 함수명 = function() {
// 함수의 기능을 표현한 구문
}
위 두 식에는 문법적인 차이 외에도 함수를 호출할 때 함수 선언식은 함수 호출하는 부분보다 위에 있어도 되나 함수 표현식은 반드시 아래에 있어야 한다.
함수 이름을 기을 때는 변수 이름을 정할 때의 규칙과 유사하나 다음 같은 사항들을 추가적으로 고려하는 것이 좋다.
- 함수의 기능을 적절하게 표현할 수 있는 이름을 사용하자
- 명사보다는 동사로 된 이름을 사용하자(기능이므로)
- 소문자로 시작하되, 여러 단어가 섞인 경우 카멜 표기법을 사용하자
데이터 반환
함수를 만들 때, 함수가 데이터를 반환하도록 할 수 있다. 함수가 데이터를 반환한다는 것은 함수 호출문이 데이터로 대체됨을 뜻한다. 이를 위해선 return 키워드를 이용한다.
function getThree() {
// 이 함수를 호출하면, 호출문이 3을 반환할 것이다.
return 3;
}return은 두 가지 기능을 가지고 있다.
- 함수로부터 데이터를 반환한다.
- 함수를 끝낸다.
매개변수
재료를 전달받아 기능을 수행하는 함수를 만들 때는 재료의 이름을 정해주어야 한다. 이를 매개변수라 한다.
/*
함수 호출 시, sayVegetable 함수에는
데이터 하나를 전달할 수 있다.
전달된 데이터를 vegetable이라 부르고,
이것을 사용해 구문을 수행하도록 하겠다.
*/
function sayVegetable(vegetable) {
console.log("함수에 전달된 채소는?");
console.log(vegetable);
}
sayVegetable("당근"); // 함수에 전달된 채소는?\n당근재료를 전달받기 위해 만들어 둔 변수를 매개변수(parameter), 실제 함수 호출 시에 전달하는 데이터를 인자(argument)라 부른다.
이벤트(event)
사용 중이거나 프로그래밍 중인 시스템 내에서 일어나는 사건을 뜻한다.
웹에서 발생하는 이벤트 예
- 웹페이지 사용자가 버튼을 클릭했다. <= 클릭 이벤트
- 웹페이지 사용자가 키보드를 눌렀다. <= 키다운 이벤트
- 웹페이지 사용자가 입력 폼의 내용을 제출했다. <= 제출 이벤트
- 외 다수
이벤트 핸들러(handler)
각각의 이벤트들은 이벤트 핸들러를 가질 수 있다. 이벤트 핸들러란 이벤트가 발생되면 실행될 코드 블록을 뜻하며 주로 함수가 이 역할을 담당한다. 이벤트 핸들러 역할을 수행할 함수를 정의하는 것을 이벤트 핸들러 등록이라 한다.
예시
웹 사용자가 버튼 요소를 클릭했을 때 경고 다이얼로그 박스를 띄워 환영의 메시지를 보여주는 경우
const handleClick = function() {
window.alert("환영합니다^^")
}
const button = document.querySelector("button")
button.onclick = handleClick // 여기가 포인트구문의 기본적인 형태
이벤트가 발생할 수 있는(혹은 발생할 예정인) 타겟을 선택하고, 이벤트 핸들러 속성에 이벤트 핸들러를 대입한다.
타겟.on이벤트명 = 이벤트핸들러함수
===>
button.onclick = handleClick※ 함수를 넣는 것이지 함수의 반환값을 넣으면 안 된다. handleClick O handleClick() X
addEventListener
onclick, onkeydown과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는 것보다 현대적인 방법은 addEventListener 메소드를 활용하는 것이다.
// 고전적
target.onclick = function(){}
// 현대적
target.addEventListener('click', function(){})이 메소드는 이벤트 핸들러 속성을 사용하는 것에 비해 다음과 같은 이점을 제공한다.
- 이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메소드가 존재한다.
- 같은 리스너(타겟)에 대해 다수의 핸들러를 등록할 수 있다.
- 추가적인 옵션 사항들이 제공된다.
이벤트 객체
이벤트 객체는 추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달되는 데이터이다. 이를 활용하기 위해서는 이벤트 핸들러 함수에 매개변수를 추가하여 이벤트 발생 시마다 전달받을 수 있도록 해야 한다.
// click 이벤트가 발생하면 함수를 호출하겠다.
target.addEventListener('click', function(){})
// click 이벤트가 발생하면 함수를 호출하겠다.
// + 이때 자동으로 전달되는 이벤트 객체를 매개변수 event에 대입하겠다.
target.addEventListener('click', function(event){})
document.createElement
documnet의 createElement 메소드는 지정된 이름의 HTML 요소를 만들어 반환해 준다.
document.createElement('div')
document.createElement('p')
document.createElement('a')HTML 요소가 만들어지고 반환되었다고 해서 해당 요소가 곧장 웹 브라우저 화면에 추가되는 것은 아니다. 따로 DOM에 추가하는 작업을 진행해 주어야 한다.
appendChild
appendChild 메소드는 DOM 내 개별 요소(노드)에 자식 요소를 추가할 때 사용하는 메소드이다.
기본 사용법
target.appendChild(자식으로_추가할_요소)예제
const p = document.createElement("p");
document.body.appendChild(p);append
appendChild 메소드와 비슷한 역할을 하는 append 메소드도 있다. 이는 타겟 요소에 자식 요소를 추가한다는 점에서 같으나, 차이점도 존재한다.
appendChild와 append 사이의 주요한 차이
- appendChild의 경우 추가한 자식 노드를 반환하지만, append는 반환 데이터가 없다.
- append를 이용하면 요소에 노드 객체 또는 문자열을 자식 요소로 추가할 수 있으나 appendChild는 노드 객체만을 추가할 수 있다.
삼항 연산
세 개의 항을 이용해 결과를 반환하는 연산이다. 보통 if문의 단축 형태로 사용되기 때문에, 삼항 조건 연산식이라고도 부른다.
// 구문
조건식 ? 참일_경우의_결과 : 거짓일_경우의_결과- 조건식 : 조건 역할을 하는 표현식
- 참일_경우의_결과 : 조건식의 결과가 참일 경우 반환될 결과
- 거짓일_경우의_결과 : 조건식의 결과가 거짓일 경우 반환될 결과
타이머 관련 기능
setTimeout
정해진 시간이 지나고 나면 주어진 함수를 실행해 주는 타이머 메소드
사용 방법
setTimeout(실행할_할수, ms_단위의_시간);사용 예
// 1000ms 가 지나고 나면 함수를 실행한다.
setTimeout(function(){
console.log("재미있다.")
}, 1000);setInterval
일정한 시간 간격에 따라 함수를 반복 실행할 수 있도록 해주는 타이머 메소드
사용 방법
setInterval(반복_실행할_함수, ms_단위의_시간);사용 예
// 500ms 마다 함수를 반복 실행한다.
setInterval(function(){
console.log(.안녕하세요^^");
}, 500);clearInterval
setInterval 메소드가 호출되어 반복 실행할 함수 타이머를 등록하면 타이머는 0이 아닌 숫자를 반환한다. 숫자는 타이머의 ID를 의미하며 이를 clearInterval 메소드에 전달하면 해당 타이머의 반복 실행이 취소된다.
// 셋팅된 타이머의 반환값(ID)을 변수에 저장하자
let timer;
timer = setInterval(function(){
console.log("안녕하세요^^")
}, 500);
// 셋팅된 타이머를 멈추자
clearInterval(timer);
Element.classList
웹 요소(Element)로부터 클래스 콜렉션을 반환하는 읽기 전용 속성이다.
<p class="hello greet good">
안녕하세요
</p>const p = document.querySelector('p')
console.log(p.classList)
이렇게 반환된 클래스 콜렉션은 유용한 메소드를 다수 포함하고 있다.
로컬스토리지(localStorage)
window.localStroage 속성은 현재 도메인의 로컬 저장소에 접근할 수 있게 해 준다. 로컬 저장소는 웹 브라우저에서 각 도메인에 대해 할당해 주는 저장 공간으로 여기에는 데이터를 영구적으로 보관할 수 있다.
데이터 보관 시에는 데이터 이름과 데이터의 실제 값을 각각 지정하며 이때 데이터 타입은 문자열 형태만 허용된다.
※ 영구적으로 보관한다는 말은 브라우저를 껐다가 켜거나 페이지를 새로고침해도 해당 페이지에 데이터가 남아있도록 할 수 있다는 뜻이다.
로컬스토리지로부터 데이터를 읽거나 쓸 때에는 메소드를 이용해 접근한다.
여기서 로컬스토리지의 데이터 이름은 중복될 수 없다.
'공부한 내용 정리 > 웹' 카테고리의 다른 글
| CSS 레이아웃 - flex (0) | 2023.02.08 |
|---|---|
| CSS 기초 (0) | 2023.01.18 |
| HTML 기초 (0) | 2023.01.16 |