HTML이랑 CSS는 예전에 공부했던 적이 있어서 JavaScript 문법 위주로 정리

1. HTML : 배치

화면에 원하는 요소들을 배치하는 문서

HTML은 하이퍼 텍스트 마크업 언어이다. 마크업 언어는 태그 등을 이용하여 문서나 데이터의 구조를 표현하는 언어이다. 뭔가 익숙해서 생각해 봤더니 깃허브의 README.md 파일이 마크다운 파일이었고, 마크다운도 마크업 언어의 일종이다. 마크다운은 서식이 있는 일반 텍스트 문서를 작성하는 데 사용되고 HTML은 웹 페이지를 위한 문서를 작성한다는 차이점이 있다.

2. CSS : 장식

HTML에서 배치한 것들을 보기 좋게 장식하는 문서
HTML에서 class를 적용한 요소들을 묶어 스타일 서식을 지정해 준다.

3. JavaScript : 동작

브라우저에서 HTML로 올려놓은 요소들을 동작하게 하는 문서

---

4. JavaScript 기본

모던 JavaScript 튜토리얼 [https://ko.javascript.info/
]의 순서를 따라 2.1~2.18까지의 개념 정리

2.1 Hello, world!
2.2 코드 구조

2.3 엄격 모드

use strict라는 특별한 지시자를 사용해 엄격 모드(strict mode)를 활성화 했을 때만 새롭게 제정된 ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 활성화되게 해놓았습니다.

2.4 변수와 상수

let : 변수
const : 상수

2.5 자료형

숫자형, bigint, 문자형, 불린형, null, undefined, 객체형, 심볼형

2.6 alert, prompt, confirm을 이용한 상호작용

alert : 메시지를 보여줍니다.
prompt : 사용자에게 텍스트를 입력하라는 메시지를 띄워줌과 동시에, 입력 필드를 함께 제공합니다. 확인을 누르면 prompt 함수는 사용자가 입력한 문자열을 반환하고, 취소 또는 Esc를 누르면 null을 반환합니다.
confirm : 사용자가 확인 또는 취소 버튼을 누를 때까지 메시지가 창에 보여집니다. 사용자가 확인 버튼을 누르면 true를, 취소 버튼이나 Esc를 누르면 false를 반환합니다.

2.7 형 변환

String()

Number()
undefined -> NaN
null -> 0
true and false -> 1 과 0
string -> 문자열의 처음과 끝 공백 제거 후 남아있는 문자열이 없다면 0, 그렇지 않다면 문자열에서 숫자를 읽습니다. 변환에 실패하면 NaN이 됩니다.

Boolean()
0, '', null, undefined, NaN -> false
나머지 -> true

2.8 기본 연산자와 수학

쉼표 연산자 ,는 여러 표현식을 코드 한 줄에서 평가할 수 있게 해줍니다. 이때 표현식 각각이 모두 평가되지만, 마지막 표현식의 평가 결과만 반환되는 점에 유의해야 합니다.

let a = (1 + 2, 3 + 4);

alert( a ); // 7 (3 + 4의 결과)

2.9 비교 연산자

비교하려는 값의 자료형이 다르면 자바스크립트는 이 값들을 숫자형으로 바꿉니다
일치 연산자(strict equality operator) ===를 사용하면 형 변환 없이 값을 비교할 수 있습니다.
일치 연산자는 엄격한(strict) 동등 연산자입니다. 자료형의 동등 여부까지 검사합니다.

2.10 if와 '?'를 사용한 조건 처리
2.11 논리 연산자

2.12 null 병합 연산자 '??'

null 병합 연산자(nullish coalescing operator) ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 ‘확정되어 있는’ 변수를 찾을 수 있습니다.

a ?? b의 평가 결과는 다음과 같습니다.

• a가 null도 아니고 undefined도 아니면 a
• 그 외의 경우는 b

안정성 관련 이슈 때문에 ??는 &&나 ||와 함께 사용하지 못합니다.

2.13 while과 for 반복문
2.14 switch문
2.15 함수

2.16 함수 표현식

함수 선언
함수를 생성하고 변수에 값을 할당하는 것처럼 함수가 변수에 할당됩니다.

let sayHi = function() {
  alert( "Hello" );
};

콜백 함수
함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 그 함수를 "나중에 호출(called back)"하는 것

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "동의하십니까?",
  function() { alert("동의하셨습니다."); },
  function() { alert("취소 버튼을 누르셨습니다."); }
);

함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성합니다. 따라서 실행 흐름이 함수에 도달했을 때부터 해당 함수를 사용할 수 있습니다.

함수 선언문은 함수 선언문이 정의되기 전에도 호출할 수 있습니다.
엄격 모드에서 함수 선언문이 코드 블록 내에 위치하면 해당 함수는 블록 내 어디서든 접근할 수 있습니다. 하지만 블록 밖에서는 함수에 접근하지 못합니다.

2.17 화살표 함수 기본

let sum = (a, b) => a + b;

/* 위 화살표 함수는 아래 함수의 축약 버전입니다.

let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3

~~2.18 기본 문법 요약
~~

---