- HTML: Hyper text markup language
-markup: 문서나 데이터를 처리하기 위해 문서에 추가되는 정보
-즉, 웹사이트의 뼈대를 구성하기 위해 사용하는 마크업 언어
-Tag(태그): 구조형성, 태그는 열었으면 꼭 닫아줘야 함. ex) <html>,</html> or <br/> 은 열고 닫는 것 한 번
1)head tag :제목 같은 속성이 들어감. ex) title
2)body tag: 실제로 웹사이트에서 보이는 콘텐츠가 들어감.
- SPA: Single page application
-하나의 페이지로 웹사이트 표현 ( content 부분을 react로 구현 )
- CSS: cascading style sheets
-웹사이트의 색상, 글꼴 등 디자인 입히기
- JavaScript(ECMAScript,ES6기준으로 설명)
- 사용자 입력 등과 같이 동적인 부분을 담당
-javascript와 같은 script language는 런타임에 코드가 해석되고 실행됨.
*c언어와 java같은 컴파일 언어는 과정을 통해서 소스코드가 해석되고 실행 가능한 형태로 변형된다.
- 동적 타이핑(dynamic typing)이므로 변수가 대입되는 시점에 해당 변수의 타입이 결정됨.
따라서, 변수를 선언할 때 다른 프로그램 언어처럼 자료형을 먼저 쓰지 않고 var (variable) , let 을 사용하여 객체 선언
- 자료형(Data Type) :데이터를 정해진 유형으로 저장하기 위해 사용
- number type, string type, boolean type, null type, undefined type, array type, object type이 있음.
0. 변수에 값이 대입되는 순간 동적 타이핑 방식으로 해당 자료 방식이 결정됨.
1.undifined type은 값이 아직 정의되지 않은 상태, null type은 값이 정의되긴 했지만 그 값이 null인
2.array type 안에는 여러 가지 자료형의 변수들이 같이 들어갈 수 있는게 다른 언어와 차이, 배열에 있는 값은 순서대로 index 값을 가지게 된다. (index는 0부터 시작함) 또한, console.log함수를 사용해서 배열의 각 원소들을 index를 활용하여 접근하고 결과 출력한다.
4. object type은 객체를 다루기 위한 자료형. 여기서의 객체는 객체지향프로그램에서의 의미와는 다름.
javascript에서의 객체는 key과 value(값) 쌍으로 이루어진 것. key는 문자열이어야하고 value는 어떤 자료형이든 들어갈 수 있음. 심지어, 11번째 줄에서는 객체가 값으로도 들어가는 것을 볼 수 있음.
* console.log(객체명['key']) 또는 (객체명.key)로 입력해서 값을 불러냄.
5.추가로 더 공부하고 싶다면 아래의 링크 참조!
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures
- 연산자(operator)
1. 대입 연산자(assignment operator) : 항상 오른쪽에서 왼쪽 방향으로 흐름 ★
2-1. 사칙 연산자: 덧셈(+),뺄셈(-),곱셈(*),나눗셈(/)
2-2. 산술 연산자(arithmetic operators): 나머지 구하는 연산자(%), 지수 연산자(**)
3. 증가연산자(++), 감소연산자(--) : 쓰는 순서가 중요 ★
- postfix 방식: a++
- prefix 방식:++a (변수 값을 증가 시키고 증가된 값을 반환)
ex1. postfix방식이므로 b에 1이 대입되고 a는 2가 됨.
ex2. prefix 방식이므로 d=1에다가 1을 더한 값이 됨. c는 여전히 1.
4. 관계 연산자(relational operators) = 비교 연산자(comparison operators) :왼쪽을 기준으로 읽어라
<,>와 같은 것
5-1. 동등 연산자(equality operators)
a==b(a와b는 같다), a!=b(a는 b와 같지 않다)
5-2. 일치 연산자(strict equality operators) : java script에서만 제공되는 특별한 기능 ★
값과 자료형이 완전히 일치하는지까지 검사하는 것
a===b(a와 b 값 and 자료형이 모두 같다)
a!==b( a와 b 값 or 자료형이 같지 않다)
설명: a의 자료형은 number, b의 자료형은 string으로 자료형이 다름. 값은 1로 같음.
6. 이진 논리 연산자(binary logical operators) : true 와 false를 만드는 boolean type
a&&b (a and b가 모두 true이면 true)
a\\b(a or b가 true면 true)
7. 조건부 연산자(conditional operator) = 삼항 연산자(ternary operator)
조건식 ? true일 경우 :false일 경우
ex1. 4번째 줄 a는 true이므로 1이 출력
ex2. 7번째 줄 b는 false이므로 2가 출력
*그 외 java script 연산자가 더 궁금하다면
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators
- 함수
:입력을 받아 정해진 출력을 하는 것.
-> 입력을 파라미터(parameters) or 인자(arguments)라고 부름
*함수 선언 하는 방법 2가지
function statement
2번째 줄 : sum이라는 함수를 열고 a와b라는 파라미터를 받아서 a+b를 반환한다.
arrow function expression
10번째 줄을 보면 const라는 키워드를 사용했고 multiply라는 함수 이름을 지었음.
a와 b라는 파라미터를 받아서 a*b의 값을 반환하도록 함.