DEVELOPMENT NOTE/Javascript

[Javascript] 반복문(Iteration Statement)

자바스크립트의 반복문에 대한 정리. 반복문 (Iteration Statement) 반복문은 특정 조건을 만족할 때 까지 어떤 동작을 여러 번 반복하는 구문이다. 반복문의 종류는 여러가지가 있는데, 그 중에 많이 쓰이는 세 가지를 정리해보았다. 기본 for문 for(let 반복하는 요소의 초기값; 반복 횟수 조건; 변수값의 증감;) { 반복하는 내용들 } // i값을 0부터 li의 갯수 이하까지 반복문을 돌린다 for (let i = 0; i { // 클릭했을 때 li의 i번째 인덱스에 이벤트를 붙힌다 console.log('text'); // 클릭시 console로 "text"를 출력한다 }) 가장..

2022. 12. 19. 09:59

DEVELOPMENT NOTE/Javascript

[Javascript] 배열(Array)과 배열 관련 함수

자바스크립트의 배열과 관련 함수에 대한 정리. 배열(Array) 배열은 참조형 자료 중 하나로, 연관된 값들을 하나의 그룹으로 묶어서 나열한 자료 구조이다. const fruits = ["cherry", "melon", "banana, berry"]; console.log(fruits[0]); // "cherry"가 출력된다 fruits[0] = "apple" console.log(fruits[0]); // "apple"이 출력된다 console.log(fruits.length); // 4 배열은 인덱스(index)라는 순서값을 가지고 있다. 인덱스는 0부터 시작하며, 배열명[index]로 불러올 수 있다. 배열도 값을 덮어쓸 수 있으며, 배열명.length로 배열에 들어있는 값의 갯수를 확인할 수 있다..

2022. 12. 18. 09:26

DEVELOPMENT NOTE/Javascript

[Javascript] 연산자(Operator) / 조건문(Conditional)

자바스크립트의 연산자와 조건문 정리. 연산자 (Operator) 연산자는 특정 값을 도출하기 위해 연산을 처리하는 식별자다. 다음과 같은 종류가 있다. 산술연산자 - 사칙연산을 다루는 기본 연산자. ex_ +(더하기, -(빼기), *(곱하기), /(나누기), %(나머지값 반환) ++(1씩 증가), --(1씩 감소) 등 전위연산자 - 변수 초기값에서 연산을 먼저 하고 그 뒤에 값을 활용한다. ex_ ++num 후위연산자 - 변수 초기값을 먼저 활용하고 그 뒤에 값을 연산을 처리한다. ex_ num++ 대입연산자 - 변수에 값을 대입할 때 사용하는 연산자. 산술 연산자와 결합하여 사용할 수도 있다. ex_ =, +=, -=, *=, /=, %= 비교 연산자 - 왼쪽과 오른쪽의 피연산자를 비교하여 불린값(Bo..

2022. 12. 17. 09:31

DEVELOPMENT NOTE/Javascript

[Javascript] 자료형(Data Type) / 형 변환

자바스크립트의 자료형 종류와 형 변환에 대한 정리. 원시형 자료 (Primitive type) 원시형 자료는 특정 값이 메모리에 바로 저장된 것이다. 값만 저장된다. let num1 = "2"; //문자 let num2 = 2; //숫자 let isOk = true; //boolean let error; //undefined let isBlank = null; //null console.log(typeof num1); //string console.log(typeof num2); //number console.log(typeof isOk); //boolean console.log(typeof error); //undefined (값이 선언되지 않았으므로) console.log(typeof isBlank)..

2022. 12. 16. 09:03

DEVELOPMENT NOTE/Javascript

[Javascript] 변수(Variable)의 종류와 사용법

자바스크립트 변수의 정의와 용도, 사용법에 대한 정리. 변수 (Variable) 변수는 특성 데이터 값을 임시로 저장하는 공간이다. ex_ var 변수명 = 대입할 값; 한 번 찾은 데이터를 재활용하기 위해서 사용한다. 변수들을 가지고 다양한 연산을 할 수 있다. 자주 쓰는 데이터 값을 효율적으로 관리하기 위해서 사용한다. const title = document.querySelector("#title") const plus = "WORLD"; let message = `HELLO ${plus}`; console.log(message); 변수를 포함한 문자는 백틱으로 감싸고, 변수는 ${변수명} 으로 불러온 모습. 변수에서 문자는 반드시 ""(쌍따옴표), ''(홑따옴표=작은따옴표), ``(억음부호=bac..

2022. 12. 15. 09:15

DEVELOPMENT NOTE/HTML／CSS

[HTML/CSS] absolute로 가운데 정렬하기

absolute를 사용해 브라우저 크기가 몇이든 가변적으로 가운데 정렬을 유지하는 방법 정리. @charset 'utf-8'; /* reset */ * {margin: 0; padding: 0;} ol,ul,li {list-style: none;} a {outline: 0; text-decoration: none;} img {border: 0;} #wrap { width: 100%; height: 100%; } #wrap .box1 { width: 400px; height: 400px; background: lightblue; } 기본적으로 별도의 설정을 하지 않으면 대상은 좌상단에 붙어있게 된다. 하지만 웹사이트 등에서는 레이아웃 및 요소들이 가운데 정렬되는 경우가 많다. position: absolu..

2022. 12. 14. 09:39

DEVELOPMENT NOTE/Javascript

[Javascript] 예약어 / 식별자 / 실행문

자바스크립트의 예약어 / 식별자 / 실행문 의미 정리. 예약어 (Reserved Word) 자바스크립트 자체의 기능을 실행하기 위해 예약된 명령어 ex_const, boolean, for, typeof... 예약어는 이미 자바스크립트 자체에서 문법적인 용도로 사용되고 있기 때문에, 식별자로 사용할 수 없다. 식별자 (Identifier) 특정 대상을 유일하게 구별할 수 있도록 사용자가 임의로 만드는 이름. ex_변수나 함수의 이름 등 식별자 작성 시 예약어는 사용할 수 없다. 실행문 (Execute statement) 자바스크립트에서 실제 동작을 지시하기 위한 구문 ex_const title = document.querySelector("h1") 예약어와 식별자가 모여 실행문을 구성한다. 자바스크립트를 ..

2022. 12. 13. 10:17