본문 바로가기

분류 전체보기

 (90)
[JavaScript] Math｜수학과 관련된 메서드 (+최댓값과 최솟값 사이에 랜덤수 구하기) Math() 는 수학적인 연산을 수행하는 상수와 함수를 포함하는 내장 객체입니다. 자주 사용하는 메서드 위주로 예시와 함께 확인해봅시다. round 는 반올림 메서드입니다. console.log(Math.round(3.5)); //4 console.log(Math.round(3.49)); //3 console.log(Math.round(2)); //2 console.log(Math.round(0.82)); //1 ceil 은 올림 메서드입니다. console.log(Math.ceil(1)); //1 console.log(Math.ceil(1.1)); //2 console.log(Math.ceil(2.01)); //3 console.log(Math.ceil(3.5)); //4 floor은 내림 메서드입니다..
[JavaScript] DOM DOM이란｜ 자바스크립트를 통해 웹페이지(문서)를 동적으로 제어해주는 인터페이스를 말한다. 약자를 풀어서 해석해보면 Document : 웹페이지를 구성하는 요소들(Element : body,div, ···) Object : 객체 Model : 모델 문서들을 객체로 만들어서 자바스크립트가 제어하도록 하는 장치를 DOM이라 한다. 브라우저는 HTML 코드를 해석하고 → 요소들을 트리 형태로 만든 문서(DOM)를 → 화면에 보여준다.(렌더링) DOM의 목적｜ 웹 페이지에 접근하여 페이지를 수정하고 이벤트 처리를 정의할 수 있다. DOM 접근 메소드｜ 메소드를 사용해 제어할 요소를 찾을 수 있다. 메소드 & 속성 설명 document.getElementById() 특정 id를 가진 요소를 선택한다. docume..
[JavaScript] 문자열을 배열로 변환, 문자열 자르기 요소가 숫자인 문자열을 배열로 반환한 후 max값을 구해봅시다. 처음 작성한 코드 const numbers = "10 11 5 6 12 7 3 9" const arrNum = [...numbers]; const maxNum = Math.max(...numbers); console.log (arrNum) //9 max값이 12가 아닌 9가 반환된 이유는 컴퓨터는 문자열에 담긴 numbers가 숫자인지 모르니 ['10', '11', '5', ···] 가 아닌 ['1', '0', ' ', '1', '1', ' ', '5', ' ', '6', ' ', '1', ' ','2', ' ', '7', ' ', '3', ' ', '9'] 이런식으로 띄어쓰기를 포함한 각 요소들을 배열로 변환되었기 때문입니다. 이를 해결하..
[JavaScript] 배열의 반복문｜map, forEach (w.Arrow function) Allow function ｜ 화살표함수는 함수를 간결하게 만들어줍니다. function 키워드와 중괄호를 생략하고 =>로 대신합니다. 아래 두 코드는 같은 의미입니다. const add = function (a, b) { return a + b; }; const add = (a, b) => a + b; map() 메서드란 ｜ 배열의 각 요소에 지정된 함수를 호출한 결과를 새로운 배열로 반환하는 메서드입니다. ex. 화살표 함수로 arr배열의 각 숫자를 곱한 값을 반환 const arr = [1, 2, 3, 4]; const squares = arr.map(num => num * num); console.log (squares) //[1, 4, 9, 16] '=>'는 화살표 함수(arrow functio..
[JavaScript] 객체지향 프로그래밍 Class 객체지향 프로그래밍이란｜ 각 객체들을 조합해서 프로그램을 만드는 방법이다. 예를 들어 차 클래스라는 틀에 공통적인 특성의 객체들을 묶을 수 있다. Class = 차(car) Object = Benz, Audi, Tesla 객체지향 프로그래밍의 장점 1. 프로그램 설계가 유연하다. 2. 추가 및 수정이 쉬워 유지 보수가 편하다. 3. 큰 규모의 객체나 비슷한 모양의 객체를 계속 찍어내야 할 때 용이하다. 객체지향 프로그래밍의 단점 1. 설계부터 해야하니 개발속도가 느리다. 2. 객체수가 많아지면 실행속도가 느리다. 3. 메모리양이 증가함에 따라 비용이 커진다. Javascript 사용으로 Class에 객체지향을 반영한 코드 class MyMath { constructor(a, b) { this.number..
[JavaScript] 만 나이 계산하기 가장 오래 걸린 만 나이 계산 문제🤤 그래도 다 풀고 나니 뿌듯하다!! 처음에 조건식을 한 줄로 작성하다가 조건식을 추가하면서 반환값을 맞추기 시작했다. 날짜를 이것저것 넣어 실행해보는데 어떤 날짜는 맞고 어떤 날짜는 틀리기를 반복하여 애꿎은 조건식만 계속 수정하다가 if와 else if의 조건식 자리를 서로 바꿔주었더니 해결되었다 : ) function getWesternAge(birthday) { const today = new Date(); //2023-7-13 기준 const birth = new Date(birthday); const yyyy = today.getFullYear() - birth.getFullYear(); const todayMm = today.getMonth(); const b..
[JavaScript] String과 Number의 조합과 변환 Javascript에서의 텍스트는 ""(쌍따옴표) 로, 숫자는 ""없이 표현합니다. 숫자를 ""로 감싸게 되면 텍스트로 인식합니다. const a = "1" + "1"; console.log (a) //11 console.loh(typeof a) //string const a = 1 + 1; console.log (a) //2 console.loh(typeof a) //number 텍스트와 숫자의 조합으로 연산해봅시다. console.log ('20' + '2') //202 (typeof:string) console.log ('20' - '2') //18 (typeof:number) console.log ('20' - 2) //18 (typeof:number) console.log (20 - '2') /..
[JavaScript] 매개변수(parameter)와 인자(argument) Javascript에서 함수는 입력과 출력으로 이루어져 있습니다. 입력 - parameter, argument 출력 - return 매개변수(parameter) 함수를 정의할 때 함수 내부에서 사용할 수 있는 변수명입니다. 함수 선언식 괄호 안의 (num)을 매개변수라고 합니다. 인자(argument) 함수를 호출할 때 전달되는 값입니다. 함수 호출문 괄호 안의(4), (10)을 인자라고 합니다. function divideNumber(num) { return num / 2; } console.log (divideNumber(4)) //2 (4/2) function divideAndAddNumber(num) { let result = divideNumber(num); return result + 1; }..
[JavaScript] var ｜ let ｜ const 의 차이 자바스크립트에서 변수를 선언할 때 var와 let, 그리고 const를 사용합니다. var 자바스크립트의 과거의 변수 선언 방식으로 중복선언이 가능합니다. 그리고 값을 선언하기 전에 값을 할당할 수 있습니다. 이것을 var hoisting 이라고 하는데 hoisting(n.끌어 올리기)은 어디서 선언했던지 상관없이 항상 선언을 최상단으로 끌어 올려주는 것을 말합니다. 정확한 에러를 파악하기 힘들고 값이 바뀔 우려 때문에 var는 가급적 사용하지 않도록 권장하고 있습니다. var name = “goopy” console.log(name) //goopy var name = “pooh” console.log(name) //pooh let 변수 중복선언할 수 없고 재할당은 가능합니다. (read/write) l..
[JavaScript] 함수 데이터 반환으로 price tax값 구하기 function getTax(price) { return price * 0.1; //price에 tax를 곱한 값 } function calculateTotal(price) { return price + getTax(price); //price에 tax를 더한 값★ } const result = calculateTotal(3000); console.log(result); //3,300 function getTotal(price1, price2) { return calculateTotal(price1) + calculateTotal(price2); //★ } console.log (getTotal(1000, 4000)) //5,500

티스토리툴바