Front-End

좋아요 기능을 만들어 보다. 👍0 좋아요 싫어요 좋아요 +1, 싫어요 -1 (음수가 될 순 없음) 함수 만들기 👍0 좋아요 싫어요 const like = () => { // 좋아요를 눌렀을 때 작동되는 함수 let num = document.getElementById("number") // HTML의 number아이디를 가진 요소 가져오기 number = parseInt(num.innerText) // 가져온 요소의 텍스트를 정수화 console.log(num) // 제대로 가져왔는지 확인 코드 console.log(number) number++ // 누를 때마다 +1 num.innerText = number // HTML의 요소의 텍스트만 수정하기 } const hate = () => { // 싫어요를..

특정 요소에 원하는 이벤트를 적용하는 방법을 배우다. h1태그 컨텐츠 직접 작성 핸들러용 버튼 리스너용 버튼 이벤트 객체용 버튼 Case 1) HTML태그에 직접 함수의 이름을 명시 직접 작성 // 단점 : 하나의 요소 당, 하나의 이벤트만 처리 가능, 함수명이 노출 전 글에서 사용했던 방식. Case 2) 이벤트 핸들러 eventHandler // Case 2. 이벤트 핸들러 // "핸들러용 버튼"을 클릭했을 때, popUp 함수를 호출 // 단점: 하나의 이벤트만 처리 가능하다. 2개를 해도 하나만 뜸, 1:1 이벤트 처리 let btn1 = document.getElementById("btn_han") console.log("btn1 : ", btn1) // 잘 가져왔나 확인 btn1.onclick..

DOM을 활용한 예제 클릭 한번 해볼까요? h1 태그 생성 a 태그 생성 ul 태그 생성 /* 누른 버튼에 따라 각각 다른 값들이 id가 box인 div안에 누적되도록 만약 => h1Btn => h1입니다. => aBtn => Google로 이동 => ulBtn => 마라탕 */ let box = document.getElementById("box") 버튼을 누를 때마다 div 태그 안에 각 태그를 넣으려고 한다. 그렇다면 일단 HTML의 div 요소를 가져와야 한다. 앞에서 배웠듯이 document.getElementById("box")를 box 변수에 넣어준다. const ckh1Btn = () => { console.log("h1 btn"); box.innerHTML += "h1입니다." } con..

자바스크립트의 꽃, DOM을 배우다. 안녕하세요 p태그1 p태그2 새로운 정보인 DOM을 배우다. 내가 이해하기 위해 생각한 DOM을 사용하는 이유는 바로 이거다. 우리는 지금 HTML과 JS를 함께 사용하고 있다. 그 두 개는 어딘가 연관되어야 하는데 그 둘의 다리 역할을 해주는 게 바로 DOM이다. 솔직히 프리트레이닝 기간에 DOM을 배울 때는 이해가 1도 안 됐는데, 왜 쓰는지를 생각하고 실습도 해 보고 이해하려고 노력해서 이해했다. HTML에 접근하기 위해서 노드의 개념도 이해해야한다. 최상위 노드인 문서노드에 접근하기 위해 // 1 - 1) id가 text인 요소를 가져오기 // - document. // - getElementById let h1Tag = document.getElementBy..

배운 객체를 가지고 좋아하는 포켓몬 3마리 소개하다. 새롭게 배운 점 객체의 속성값으로 이미지 주소를 넣으면 이미지를 띄울 수 있다. -> 배열의 요소로 객체를 사용해서 인덱스 번호로 반복문을 사용해서 이미지도 반복문에 추가할 수 있다.

새로운 자료형, 객체를 배우다. 내 주관적인 생각에 객체에서 기억해야 될 것은 2가지다. 객체의 요소에 접근하는 방법과 신문법. 객체의 요소에 접근하는 방법은 2가지가 있는데 ( .key이름 )을 사용하거나 [ key이름]를 사용하거나. 객체이름.key이름 객체이름[key이름] 객체와 배열은 서로가 서로의 요소가 될 수 있다. 그때 요소에 접근하는 방법도 하던대로 해주면 된다. 바깥에서부터 안으로 하나씩 접근.. 신문법은 알고있으면 안좋을 거 없는 방법이다. 코드가 직관성있기 때문에 보기 편하다.

가짜 햄버거를 만들어보다. 🍔 1. 햄버거 만드는 기본 함수 /* Step 1. 1 - 1. 햄버거를 제작하는 함수. makeBurger 화살표 함수 이용하기 1 - 2. 햄버거 함수 호출하면 문서에 빵 깔기, 토마토 올리기, 패티 올리기, 빵 닫기 1 - 3 햄버거의 가격 5000원 반환 */ const makeBurger = (burger) => { document.write("빵 깔기 " + "토마토 올리기 " + `${burger}패티 올리기 ` + "빵 닫기 " + `${burger}버거 완성 `) return 5000 } 함수 선언문을 function을 사용해서 선언할 수도 있지만 지금부터는 const를 사용해서 함수 선언을 해야 한다. 왜냐하면 const를 쓰지 않으면 함수이름을 사용해서 변..

이진탐색 알고리즘 이진탐색 개념 이진탐색이란 양 쪽에서 범위를 줄여나가면서 수를 찾는 것이다. 그리고 배열이 무조건 정렬 되어있어야 한다. 범위를 줄일 때 범위의 절반 값을 찾고싶은 수와 비교해서 절반 값 찾고싶은 수 → 양 끝 수 중 큰 수를 절반값으로 범위를 줄인다. 범위를 줄이다보면 찾고싶은 수가 나온다. 풀이 1. 변수 선언 let arr = [1, 3, 5, 7, 19, 32, 54, 100, 105]; // let start = 0; // 탐색범위 시작 인덱스 let end = arr.length - 1; // 탐색 범위 끝 인덱스 let find = 5; let middle = 0 // 시작과 끝의 중간 인덱스..