js
-
[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..
-
나의 첫번째 웹사이트 수정편프론트엔드 개발자가 될거야./js 2022. 6. 13. 16:43
맨 처음에 만든 자기소개 웹사이트가 승에 차지 않아서 레이아웃을 대폭 수정했다. 웹사이트 구경가기 첫번째페이지 방명록도 작성할 수 있다. 저장이 되지는 않는다...ㅎㅎ 추후 구현해야지! 그리고 about me! 버튼을 누르면 메인페이지로 들어갈 수 있다. 메인페이지 쟈쟌.. 전에보다 훨씬 깔끔해졌다 :) 단, Develpert 스펠링 틀림.. 인생은 단 한 번뿐, 대충 살아서는 행복할 수 없어! 내가 진짜 좋아하는 문구...... 내 가치관이라서 이 문구를 보면 힘이난다. 그리고 position: fixed를 사용해 navbar도 고정시켰다. 자꾸 겹치는 버그가 발생해서 구글에게 물어보니 body에 padding-top을 해주라고 해서 해줬다 :) 푸터도 만들었다. 이렇게 보니 나름 갖추어진 홈페이지가 ..
-
자바스크립트 타이핑 효과프론트엔드 개발자가 될거야./js 2022. 6. 13. 16:35
html, css 자기소개 페이지 만들고나서 JS로 타이핑 효과를 주어서 더 동적으로 만들고 싶었다. 자바스크립트 타이핑 효과 이분의 벨로그를 활용하여 나의 자기소개 페이지에 타이핑 효과를 구현할 수 있었다 :) 코드해석은 해석이 필요한 부분만 정리했다. HTML코드 해석 | 깜빡깜빡하는 효과를 주기위해 | 를 사용했다. CSS코드 해석 .text_box .blink { animation: blink 0.5s infinite; font-size: 20px; } @keyframes blink { from { opacity: 1; } to { opacity: 0; } } animation과 @keyframe의 이름은 blink로 같다. 같은 걸 바라보고 있다는 것을 의미한다. animation의 이름은 @k..
-
[위코드 35기] 객체프론트엔드 개발자가 될거야./js 2022. 6. 13. 16:32
객체란 무엇일까? 자바스크립트 데이터 타입 중의 하나이다. key값과 value값을 쌍으로 이루고 있고 배열과는 다르게 순서가 중요하지 않다. Object Literal 객체를 만드는 방법은 여러가지이지만 그 중 중괄호를 이용해 만드는 방식이다. let person1 = { name: '곽철용', bloodType: 'AB형', mbti: 'ENFP', favoriteCoffee: '바닐라라떼' } 객체가 필요한 이유 배열은 index number를 기억해야하지만 객체는 원하는 정보의 key값만 알면 정보에 접근할 수 있다. 배열과 객체의 차이점 또한 배열은 순서가 중요하지만 객체는 객체에 넣은 순서대로 프로퍼티가 출력되지 않는다. 즉, index 순서가 없다. 객체 속성 접근 1. 점 표기법 👀 Dot..
-
[위코드 35기]배열과 반복문프론트엔드 개발자가 될거야./js 2022. 6. 13. 16:29
배열과 반복문은 함께 많이 쓰인다. 배열과 반복문 문제를 풀 때 어려웠던 부분을 정리해두고자 한다. 👀 07번 문제 👀 for문을 사용하여 getAllLetters 함수를 작성하세요. 단어(str 인자)가 주어졌을 때 함수의 리턴값은 주어진 단어를 구성하는 모든 문자를 담고 있는 배열입니다. 만약 빈 문자열이 주어졌다면, 빈 배열을 반환해야 합니다. let output = getAllLetters('Radagast'); console.log(output); // --> ['R', 'a', 'd', 'a', 'g', 'a', 's', 't'] ✍🏻 풀이 ✍🏻 function getAllLetters(str) { // 아래의 코드를 수정하지 마세요. let strArray = []; // 빈 문자열을 가진 ..