분류 전체보기

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 // 시작과 끝의 중간 인덱스..

배열을 하나하나 탐색하다. 내 풀이 주어진 숫자가 배열 안에 존재하면 그 수는 몇 번째에 위치합니다라고 출력하고 존재하지 않으면 그 수는 배열에 존재하지 않습니다라고 출력한다. 배열함수의 includes를 사용해서 배열에 존재하는지 안 하는지부터 확인하면 배열에 존재하지 않습니다를 바로 처리할 수 있다. 큰 틀로 if 조건문안에 includes를 사용해서 true면 존재하니까 반복문으로 들어간다. 반복문은 배열의 인덱스로 접근하는데, 인덱스가 0 ~ 인덱스 길이 - 1까지 있으므로 초기값 0, 증감식 i++ 조건부는 인덱스 길이 - 1까지 해주면 된다. 인덱스로 배열의 요소 접근하는 방법을 사용하여 주어진 값과 배열[i]이 같으면 배열에 그 수가 존재하고, 몇 번째인지 구하려면 i는 인덱스니까 몇 번째는..

소수를 구별하고 범위 내의 소수를 출력하는 함수를 만들다. 1. 소수 판별 함수 function primeNumber(num) { let count = 0; for (i = 1; i