프론트엔드 개발자가 될거야./js
-
[TIL] Today I Learned : 개념공부 - string <-> number 변환 / 날짜 객체프론트엔드 개발자가 될거야./js 2022. 6. 23. 18:02
String Number 변환 자바스크립트는 데이터 타입을 신경쓰지 않는다. 이것은 편할 수는 있지만 자칫하면 오류가 날 수 있다. 주의! +는 둘 중 하나가 문자면 둘 다 문자! -의 경우, 오로지 숫자에만 사용 되는 연산 console.log('200'+'10'); //20010 console.log('200'-'10'); //190 console.log(200+'11'); //20011 console.log('200'+11); //20011 console.log('200'-'안녕'); //NaN 날짜 객체 var rightNow = new Date(); console.log(rightNow); // 2022-06-23T00:45:06.562Z 2022-06-23T00:45:06.562Z 이것은 사람..
-
[TIL] Today I Learned : Srting - sliceCityFromAddress함수프론트엔드 개발자가 될거야./js 2022. 6. 23. 17:37
String 함수 알아보기 알아서 대소문자를 바꿔주는 함수 String.toUpperCase(); 이름에서 보면 알 수 있듯이 대문자로 바꿔준다. String.toLowerCase(); 또한 이름에서 보몀 알 수 있듯이 소문자로 바꿔준다. let lastName = 'Yeri Kim'; let upperLastName = lastName.toUpperCase(); let lowerLastName = lastName.toLowerCase(); console.log(lastName); // Yeri Kim console.log(upperLastName); // YERI KIM console.log(lowerLastName); // yeri kim 문자 길이 배열의 길이는 length 라는 속성으로 알 수 있..
-
[TIL] Today I Learned : 배열 요소 추가, 제거 - divideArrayInHalf 함수프론트엔드 개발자가 될거야./js 2022. 6. 23. 16:02
배열 요소 추가하기 - index로 접근,push(), unshift() 1. index로 접근 let cities = [ ]; 일 때 cities[0] = "서울"; // ["서울"] cities[1] = "대전"; // ["서울", "대전"] cities[2] = "대구"; // ["서울", "대전", "대구"] 이렇게 요소를 추가해 줄 수 있다. 2. 메서드로 접근 push는 배열의 마지막 부분, 즉 꼬리에 요소들을 추가하고, unshift는 배열의 맨 앞부분, 즉 머리 부분에 요소를 추가한다. let cities = [ ]; 일 때 cities.push("경주", "전주"); // ["경주", "전주"] cities.unshift("인천"); // [ "인천", "경주", "전주"] 배열 요소 제..
-
[TIL] Today I Learned : 수학표현식, 논리연산자, 가위 바위 보 게임 함수 만들기(rockPaperScissors 함수)프론트엔드 개발자가 될거야./js 2022. 6. 23. 15:25
공부하다가 헷갈리는 개념들이 있어서 정리해보려고 한다. 간단하지만 헷갈리는...... 컴퓨터 언어에서 사용되는 수학 표현식 let num = 1; num++; console.log(num); // 2 num++는 풀어서 쓰면 num = num + 1; 이다. let num = 1; let newNum = num++; console.log(num); // 2 console.log(newNum); // 1 잠시 여기서 의문! num도 2고 newNum도 2 일 줄 알았는데..... 왜 저런 답이 나왔을까? let newNum = num++;을 풀어서 써보면 let newNum = num = num + 1 이다. newNum = num ---> newNum = 1 이고 그 다음에 num + 1 을 해주어서 n..
-
[TIL] Today I Learned : for문 - findSmallestElement 함수프론트엔드 개발자가 될거야./js 2022. 6. 22. 20:38
많이 공부했다고 생각했는데... 문제 푸는데 많이 막혔다! 먼저, for문에 대해 알아보자. for문 for 문을 사용하면 코드를 원하는 만큼 반복시킬 수 있다. 실행 조건에 따라 언제부터 언제까지 반복하게 될 것이라고 알려주면 된다. 반복문 내의 조건문 반복문과 조건문은 함께 많이 쓰인다. 잘 이해해두어야 한다! 예시를 함께 보자. const home = "대전"; let cities = ["서울", "대전", "대구", "대전", "광주", "대전"]; for (let i = 0; i < cities.length; i++) { if (cities[i] === home) { console.log("아, "+ cities[i] +" 사시는군요"); } } for (var i = 0; i*
-
[노마드 코더] 바닐라 JS로 크롬 앱 만들기프론트엔드 개발자가 될거야./js 2022. 6. 19. 18:03
listen하고 싶은 event를 찾는 가장 좋은 방법 console.dir(h1); 메소드 & element의 내부를 볼 수 있음. 이벤트도 알 수 있음. -> on만 빼면 됨 className, classList, toggle의 사용 (feat. css는 css에서!) - className의 버그 : 이전의 class들은 상관하지 않고 모든걸 교체해버림 => 이것을 해결한 것이 classList - classList => clsaaList의 코드를 한 줄로 해결한 것이 toggle // css .clicked { color: red; } // JS if(h1.classList.contains("clicked")) { h1.classList.remove("clicked"); } else { h1.cla..
-
JS함수 정리 - 화살표함수, 즉시실행함수, 호이스팅, 타이머함수, 콜백프론트엔드 개발자가 될거야./js 2022. 6. 14. 11:17
* 화살표함수 // 화살표 함수 // () => {} vs function () {} const double = function (x) { return x + 2 } console.log('double: ', double(7)) const doubleArrow = x => x * 2 console.log('doubleArrow', doubleArrow(7)) // 화살표 함수 객체데이터 사용법 const doubleArrow = x => ({ name: 'jeongeun' }) console.log('doubleArrow', doubleArrow(7)) * 즉시실행함수 IIFE : 함수가 한 번 실행되고 쓸 일이 없을 때 : 이름이 없는 익명함수를 만들자마자 그 자리에서 바로 실행가능 // 즉시실행함수 ..
-
자바스크립트 라이브러리 정리프론트엔드 개발자가 될거야./js 2022. 6. 13. 16:45
swiperjs swiperjs 슬라이드 기능 구현해주는 라이브러리 사용법 1. CDN 가져오기 (주의! link테그도 함께 가져오기) 2. HTML 레이아웃 Slide 1 Slide 2 Slide 3 ... 3. JS에서 swiper초기화 new Swiper(선택자, 옵션) 4. 여러 스타일이 있으니 홈페이지에서 'Demos' 참고 gsap 자바스크립트 애니메이션 라이브러리 사용법 gsap 1. CDN 가져오기 2. gsap 이해하기 나같은 경우는 gsap.to를 이용했다. gsap.to(요소, 지속시간, 옵션) 3. 넣고싶은 옵션 공부하기 gsap.to gsap 홈페이지 가서 구경해보자! gsap.to로 구현한 코드 html css .fade-in{ opacity: 0; } javascript con..