✅ 프론트엔드 : Javascript 기초
Chapter13 JavaScript Beginner
JavaScript 소개
browser를 효과적으로 다루기 위해 Mocha부터 JavaScript 탄생
browser war : browser 시장의 점유율을 차지하기 위한 싸움 Netscape(JavaScript) vs MS IE(JScript), 서로 호환 안되게 해버림
동일한 웹 문서가 브라우저마다 다르게 동작함
JavaScript 표준화 필요성 생김 → ES5, ES6 표준
Web API + ECMAScript = JavaScript
Type이 느슨한 언어
Script 태그 사용
(HTML)
<body>
<h1>안녕하세요!</h1>
<p>JavaScript는 어려워:(</p>
<script src="ex01.js"></script>
</body>
(JavaScript)
document.write('<p>JavaScript는 재밌어:)</p>');JavaScript tag 위치에 따라 출력이 바뀜
body 태그 가장 하단 부분에 넣는 것이 가장 적절함, 왜냐하면 html 읽는 중 JavaScript 만나면 파싱을 멈추는데, 상대적으로 무거운 JavaScript를 로드하면 어려움이 생길 수 있음
부득이하게 head 태그에 넣더라도 거기서도 가장 하단에 넣는 것이 적절함
변수(Variable), 주석(Comment)
간단한 내용이라 코드는 생략
변수 : 데이터를 담아 놓기 위해 이름을 지정해 둔 공간
사용할 수 없는 변수명
숫자가 앞에 오는 변수명
특수문자
예약어
변수명 컨벤션
camelCase : sendEmailDate
snake_case : send_email_date
JavaScript에서도 주석은 타 언어와 비슷하게 사용한다.
Single line comment : //
Multiple line comment : /* */
자료형
자료형
기본형, 단순형, 원시형 : number, string, boolean, undefined, null, symbol
참조형, 객체(Object)
var 키워드로 모든 변수 선언
기본형 변수 실습
객체(Object)
속성의 모음으로 이루어진 데이터
속성에는 어떤 데이터 타입이라도 할당 가능
속성의 구분은 콤마로, 속성의 정의는 속성명:속성값
JavaScript에서 다루는 대부분은 객체임
연산자
연산자 : 1개의 식에 대해 산술, 대입, 논리, 타입 등을 평가하여 값을 생성
산술연산자 : +, -, *, /, %
단항연산자 : ++, --
대입/할당연산자 : +=, -= , ...
비교연산자 : ==, !=. >=, ...
논리연산자 : &&. ||. !
typeof : 해당 변수의 type 리턴
문자열
문자열 선언은 쌍따옴표, 따옴표 둘 다 가능
더하기 연산자로 문자열 합치기 가능
템플릿 리터럴(ES6)
백틱(`)으로 사용, 줄바꿈도 입력한 그대로 출력
${} 형태로 변수도 문장 내에서 바로 사용 가능
문자열함수 : indexOf, toUpperCase, toLowerCase, slice, startsWith, endsWith, include 등
배열
배열(Array) : 복수의 데이터를 순서대로 담고 있는 자료구조
배열은 일종의 객체이다. 키=>인덱스, 값=>요소
각 원소를 element, 요소라고 부르며 데이터 타입의 제한은 없음
mbti[0] // 호출은 하던대로
mbti.length // 배열 원소 개수
mbti[3] = 'ESFP'; // 이렇게 그냥 새 원소 추가도 가능
push : 원본 배열 맨 뒤에 추가, return값은 수정된 배열의 길이
pop : 원본 배열 맨 마지막 원소 리턴
unshift() : 앞에 요소 넣기
스프레드 문법, 원본 배열은 그대로 살리기
var newMbti = [...mbti, 'ESFP', 'ISTJ'];
join() : 기본 구분자는 콤마, 문자열로 반환
sort() : 정렬
조건문
코드로 요약
반복문
코드로 요약
에러처리
try : 에러가 발생할 가능성이 있는 코드
catch : 에러 발생 시 실행할 코드
finally : 에러 발생 여부와 상관없이 무조건 실행
throw new Error('에러')와 같이 의도적으로 에러 발생 가능
함수
함수(functions)
작업의 묶음
코드를 반복해서 작성하는 비효율을 줄임
JavaScript에서 예약어는 function
JavaScript만의 독특한 함수 정의법 - 함수를 하나의 객체로, 변수에 대입
var multiply2 = function (a, b) {
return a * b;
};변수 키워드 : var, let, const
var : 보통은 제어문이나 함수 내의 변수를 지역변수로 생각하지만 javascript에서는 전역변수에 접근 가능
let : let으로 선언 시 함수 내부의 변수가 전역변수를 변경하지 않음
const : 상수 키워드
호이스팅 : 초기화하는 구문이 순서상 아래에 있어도 javascript는 끌어올려서 처리해줌
화살표 함수
Chapter14. JavaScript
DOM
DOM 구조 → Document Object Model
브라우저 전체는 Window 객체로 관리
웹 문서가 렌더링 되어 보여지는 부분이 Document
이 외에도 다양한 객체들이 존재
Event
이벤트
폼 이벤트 - 사용자가 제출, 초기화
마우스 이벤트 - 클릭, 더블클릭, 마우스 이동
키보드 이벤트 - keydown(아무키나 눌렀을 때), keypress(특정키를 눌렀을 때), keyup(키를 뗄때)
등등
on + event type
var myfunc = function(){ alert("addEventListener로 동작"); }
var el = document.getElementById("brand-title");
// 특정 요소를 가져온 뒤
el.addEventListener("click", myfunc);
// 클릭 시 해당 함수 실행
Chapter15. 실습 - 만 나이 계산기
