JS

clean JS

JS를 깔끔하기 적는 법 + 수업 들으면서 내가 몰랐던 부분 공부 정리. 1. html에 id를 적으면 적혀있는 id의 이름으로 js에서 바로 호출 가능 ex) html에서 id="hi"로 이름을 지었다면 js에서 console.log(hi)를 호출하면 id부분이 나옴. const hi = window.document.getElementById('hi')를 적어주는 이유는 자동완성을 쓸 수 있기 때문. 2. 여러 기능을 할 때 사용할 때 data-set을 이용하면 되게 편리함. data-set 사용 시 이렇게는 무조건 적어주고 시작하자. const functions = { //이 부분에는 기능을 구현하는 부분을 적어주면 됨. 메소드처럼 사용하면 되는 듯? //handleEditStart: (element..

가위바위보

안녕하세요. 오늘은 가위바위보 게임을 JS로 작성해보겠습니다. 1. 유저의 가위, 바위, 보(html로 받겠습니다.) 2. 컴퓨터의 가위, 바위, 보 3. 유저와 컴퓨터 비교 function rcs(user_choice) { //매개변수 user_choice alert("rcs!") alert("유저 : " + user_choice) //가위 바위 보 var com_choice=Math.ceil(Math.random()*3) // 1~3 if(com_choice==1){ com_choice='가위' }else if(com_choice==2) { com_choice='바위' }else if(com_choice==3){ com_choice='보' } alert("컴퓨터 : " + com_choice) if(..

lotto JS

안녕하세요. 오늘은 JS로 로또(중복이 없는) 번호를 출력해보겠습니다. 1. 로또 번호 변수 생성 2. 로또 번호를 받을 배열을 생성 3. 반복문을 통한 로또 번호 랜덤화. Math를 이용 Math.ceil의 경우 주어진 숫자보다 크거나 같은 숫자 중 가작 작은 숫자를 integer로 반환 즉, 입력받은 숫자를 올림 한 정수를 리턴) 4. 로또 번호 중복 검사. indexOf() 이용 indexOf()의 경우 받는 인자의 인덱스를 확인해줌 즉, indexOf(num)의 경우 랜덤화 받은 num의 인덱스를 찾는다. 여기서 lotto는 현재 빈 배열인 상태이다. 빈 배열의 상태에서는 index의 값이 없는 상태 즉, 0보다 작은 상태를 의미한다. 여기서 우리가 더 확인해야 할 것은 중복을 체크해야 되기 때문..

Scroll Effect

안녕하세요. 오늘은 화면을 스크롤 시 상단 부분을 바뀌는 부분을 JS로 구현해보겠습니다. SETTING Home 안녕하세요 초보개발자 청춘고양이 안녕하세요 JS를 통해 상단 화면을 변경해 보겠습니다. .header { align-items: center; width: 100vw; background-color: #111111; border-bottom: 3px solid #666665; backdrop-filter: blur(5px); display: flex; flex-direction: row; justify-content: space-between; font-size: 1.5rem; padding-bottom: 2rem; padding-top: 2rem; position: fixed; z-index..

Timer

안녕하세요. 오늘은 간단하게 Timer effect를 구현해 보겠습니다. 50초부터 시작해서 1초씩 올라가서 분, 초를 나타내는 Timer입니다. 다음에는 시, 분, 초를 찍어내는 Timer를 구현해보겠습니다. let time = 50; let min = 0; let sec = 0; let timeFormat = ""; function tick() { time++ if(time>=60){ min=time/60 min=parseInt(min) if(min

Text Effect

안녕하세요. 오늘은 한 글자 씩 나오는 글자 효과를 JS로 만들어 보겠습니다. SETTING Hellow .title { color: #000000; font-size: large; text-align: center; } .title > h1 { margin-top: 0; margin-bottom: 0; } span { opacity: 0; transition: all 1s ease; } span.fade { opacity: 1; } opacity: 0으로 인해 현재 화면은 아무것도 보이지 않는 화면이 생깁니다. 그렇다면 JS를 통해서 각각의 글자에 fade를 주면 opacity: 1로 인해 글자가 생깁니다. 그러면 글자를 하나 씩 생기게 하면 한 글자씩 생기는 효과가 생기겠네요. JS //hi 선택자를..

NodeList

안녕하세요. 오늘은 NodeList에 대해 알아봅시다. NodeList 웹 문서에서 추출한 노드의 집합이며 HTMLCollection 객체와 거의 비슷하다. 즉, 배열은 아니나 배열처럼 Index를 통해서 각 노드에 접근이 가능하다. Index는 배열과 동일하게 0부터 시작한다. 모든 브라우저는 childNodes 속성에 대해 NodeList 객체를 반환하며 대부분의 브라우저는 querySelectorAll () 메서드에 대해 NodeList 객체를 반환한다. 그렇다면 NodeList는 배열의 기능을 할 수 있을까? NodeList 객체는 Array는 아니지만 forEach()를 사용하여 반복할 수 있다. 하지만 배열의 map이나 filter, find 등의 여러 가지 기능은 사용하지는 못 한다. 이때 ..

Lambda JS

오늘은 람다에 대해서 알아보겠습니다. 람다식은 기존 for문을 좀 더 간결하게 작성하는 방식입니다. 따라서 람다는 코드의 간결성과 코드의 퍼포먼스를 향상할 수 있습니다. 단점으로는 람다식을 남용하면 오히려 코드를 이해하기 어려운 부분이 있지만 for문에서 람다식을 사용하면 코드를 매우 간결하게 끝날 수 있으므로 람다식을 배우고 나면 람다를 자주 사용하도록 합시다. forEach : 모든 값 반복 let primeNumbers = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29]; 배열로 이루어진 primeNumbers 변수를 생성해서 2, 3, 5, 7, 11, 13, 17, 19, 23, 29를 가지는 배열을 만들었습니다. 각각의 primeNumbers를 호출하려면 기존의 for문을 사..