TIL LIST (39) 썸네일형 리스트형 바닐라JS 강의 완강 챌린지와 동시 진행하고 있어서 그런지 정신이 없고 어디서부터 회고해야 할 지 감이 잡히지 않는다. 예습은 진짜 필수구나. 새로 배운 개념인 event, random, date, api 등등... 졸업 작품을 진행하면서 하나하나 천천히 TIL로 올려야 겠다. [기초 이론] if ... else if ... else JavaScript 는 위에서 아래로 한줄씩 순차적으로 코드의 흐름을 읽어나가는 데, 특정 조건을 걸고 조건을 충족하면 실행하거나 실행하지 않는 것을 조건문이라고 한다. 그 중 하나인 if ... else 는 만약 ... 이라면 ... 한다. 라고 생각하면 편하다. 즉 if ... else 문은 지정한 조건이 참(true)인 경우 명령문(Statement)을 실행한다. 조건이 거짓(false)인 경우 또 다른 명령문이 실행 될 수 있다. if(condition) { statement; } else { last statement; } 먼저 if 문을 작성해주는데 쉽게 구문으로 풀면 만약(라면) { 중괄호 안의 명령문을 시행한다 } 와 같다. 최종적으로 소괄호 안의 표현식이 true 일.. [기초 이론] Function Function 함수(Function)는 하나의 로직을 실행할 수 있도록 수행하는 코드의 집합이다. 사용자가 서버에서 특정한 일을 수행(x)하면 해당 명령을 입력(input) 해서 함수 box에서 처리(f)한다. 그리고 그 처리한 값을 출력(output) 하면 사용자는 함수가 처리한 값을 받을 수 있다. 즉, 함수에 값을 전달하면 함수는 값을 반환한다. 나는 이 지점에서 왜 '슈의 초코공장' 게임이 생각났는 지 모르겠다. 땅콩이 초코 볼에 들어가 볶아(?)져서 티피가 되는 게 비슷하다고 느낀 걸까. 함수의 장점 중 하나는 재사용성인데, 반복되는 구문을 계속 작성하지 않고 함수로 만들어서 필요할 때마다 재사용하는 것이 좋은 코더의 자세다. 함수 선언 함수의 대략적인 선언 방법은 아래와 같다. functio.. [기초 이론] Data Type: Object 시작하며 JavaScript의 객체는, 다른 프로그래밍 언어와 마찬가지로 현실 세계에서 객체(사물)라고 부르는 것과 비교할 수 있다. JavaScript 객체의 개념은 현실에서 인식 가능한 사물로 이해가 가능하다. JavaScript 에서 객체는 속성과 타입을 가진 독립적인 개체(Entity)이다. 현실의 컵과 비교해본다면, 컵은 '색', '디자인', '무게', '소재' 등의 속성을 가진 객체라고 할 수 있다. 마찬가지로 JavaScript 객체 역시 특징을 결정짓는 속성을 가질 수 있다. Object 객체는 관련된 데이터와 함수(일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메서드라고 부른다)의 집합이다. 여타 JavaScript 의 요소 들과 마찬가지로, 객체를 .. [기초 이론] Array Array Array 클래스는 리스트 형태의 고수준 객체인 배열을 생성할 때 사용하는 전역객체이다. 배열은 리스트와 비슷한 객체로서 순회와 변형 작업을 수행하는 메서드를 갖고 있다. JavaScript 배열은 길이도, 각 요소의 자료형도 고정되어 있지 않다. 배열의 길이가 언제든지 늘거나 줄어들 수 있고 데이터를 연속적이지 않은 곳에 저장할 수 있으므로 JavaScript 배열은 밀집성을 보장하지 않는다. 즉 배열은 정의된 상태에서 추가하거나 삭제할 수도 있고, 내용을 변경할 수도 있다. const week = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat']; week 이라는 변수에 6개의 요소를 가진 배열을 생성했다. 이렇게 정의된 상태에서 다양한 연산을 사용할 수 있다. .. [기초 이론] Data Type: Primitive 원시 값 JavaScript에서 원시 값(Primitive, 또는 원시 자료형)은 단일 데이터만 담을 수 있는 데이터이다. 복합 데이터인 객체나 객체의 속성 함수인 메서드 그리고 함수는 포함하지 않는다. 원시 값은 변하지 않으며 변형되지 않는다. 원시 값 자체와 원시 값을 할당할 변수를 혼동하지 않아야 한다. 변수는 새로운 값을 다시 할당할 수 있지만, 이미 생성한 원시 값은 객체, 배열, 함수와 달리 변형할 수 없다. // !!문자열 메서드는 문자열을 변형하지 않음 let bar = 'hangul' console.log(bar); // > hangul bar.toUpperCase(); // > 소문자를 대문자로 변환해주는 '문자열 메서드' console.log(bar) // > 여전히 hangul //.. [기초 이론] Variable, Constant 변수와 상수 변수(Variable)란 기본적으로 값(숫자, 텍스트 문자열 등)에 이름을 붙이는 것이다. 변수는 var, let 으로 구분되어 있으며 해당 키워드와 그 뒤의 이름으로 생성할 수 있다. 상수(Constant) 또한 변수처럼 이름을 붙인 값이지만, 변수와 달리 상수의 값은 바꿀 수 없다. 상수는 const 키워드와 그 뒤의 이름으로 생성할 수 있다. 변/상수 뒤에 등호(=, Equal Sign)를 붙여 원하는 값(Value)을 할당해준다. 근래 들어 var로 변수 선언하는 것은 최대한 지양하고 있으며, 변수는 let, 상수는 const로 고정하도록 한다. 상수 const a = 10; const b = 2; console.log(a + b); // 12 console.log(a - b); //.. [기초 이론] How to add the JavaScript to WebPage? 웹 페이지에 JavaScript를 어떻게 넣을까? CSS와 비슷한 방법으로 JavaScript를 HTML 코드에 적용할 수 있다. CSS가 요소로 외부 스타일 시트를 적용하고, 요소로 내부 스타일 시트를 적용했다면 JavaScript는 외부 JavaScript 가장 많이 쓰이는 방식으로 내부 JavaScript를 외부 파일로 분리하고 싶을 때 사용한다. 내부 JavaScript와 마찬가지로 HTML 파일의 부분의 최하단에 아래와 같이 입력한다. Lorem ipsum let a = 0; 인라인 JavaScript 가끔 HTML에 JavaScript 코드가 포함될 수 있다. HTML 코드에 인라인으로 CSS를 넣는 것처럼 인라인 JavaScript 또한 HTML 코드가 무거워지고, 수정이 비효율적이므로 되도.. 이전 1 2 3 4 5 다음
