분류 전체보기

컴퓨터가 랜덤으로 만든 수를 5번의 기회 안에 맞추는 게임을 만드려다 실패하다. 나의 접근 과정을 보기 위해 작성함 숫자 맞추기 게임 결과값이 여기 나옵니다! 남은 기회: 5번 확인 초기화 이상한 점 cnt = 4로 시작 숫자 입력하고 확인버튼 누르고 초기화하면 랜덤 숫자 생성과정이 1번 일어나야 하는데 버그처럼 2번, 4번, 5번 일어나는 현상, 초기화를 했음에도 불구하고 초기화 전에 입력했던 값을 입력하면 전에 입력했다고 뜨는 현상 1. 랜덤 숫자 생성 및 변수 선언 let ranNum = parseInt((Math.random() * 100) + 1) console.log("랜덤 숫자: ", ranNum) let cnt = 4; let numList = []; // 이전에 입력했던 수 확인용 배열 ..

DOM을 활용하여 HTML태그에 스타일을 적용해 보다. DOM 스타일 속성 실습 스타일 변경 Case 1) 자바스크립트 코드로 스타일 직접 작성하기 // + 버튼에 클래스속성 추가하기 btn.addEventListener("click", () => { // 간단한 스타일 변경은 자바스크립트 코드로 구현 let h1Tag = document.getElementsByTagName("h1")[0]; let btn = document.getElementsByTagName("button")[0]; h1Tag.style.color = "yellow"; h1Tag.style.background = "black"; 간단한 스타일을 적용할 때 사용하는 방법이다. DOM으로 태그네임을 통해서 가져온 태그는 유사배열이니까 ..

변경버튼을 누르면 수지 ↔ 아이유가 되는 코드를 만들다. 변경! 1. 변경버튼의 기능 만들기 document.getElementById("btn").addEventListener("click", () => { // 1 - 1) 변경이라는 버튼을 눌렀을 때 let inputTag = document.getElementById("name") // 1 - 2) 입력값을 변수에 저장 let inputText = inputTag.value console.log("입력", inputText) 변경 버튼을 눌렀을 때 우리는 사용자의 입력값을 받아내야 한다. HTML문서의 btn아이디를 가진 button태그에 이벤트리스너를 걸어서 변경버튼을 클릭했을 때의 기능을 만들려고 한다. 익명 함수에 name아이디를 가진 inp..

DOM으로 속성에 접근하는 방법을 배우다. input태그 값 가져오기 Get! 이미지 태그 값 가져오고 바꿔보기 Change HTML문서에서 input태그로 입력받은 값을 가져오기 // ** input 태그 내에 사용자가 입력한 값을 가져와보자! // 1 - 1) input 버튼에 이벤트 걸기 document.getElementById("inputBtn").addEventListener("click", () => { // 1 - 2) input 안에 있는 값을 가져오기 console.log("ck!") let inputTag = document.getElementById("inputText") console.log("input", inputTag.value) // innerText는 태그안의 컨텐츠 / ..

선입선출 데이터구조인 Queue(큐) 구조를 배우다. 스택구조와는 반대로 배열의 맨 앞 데이터인 인덱스 0번부터 제거해야 한다. index 변수를 만들어서 0부터 1씩 증가하게 만들어준다. index로 데이터를 추가할 때마다 0, 1, 2.. 번째 자리에 데이터가 추가되게 한다. 데이터를 제거할 때는 스택구조와 마찬가지로 splice함수를 사용한다. 중요한 점은 데이터를 제거할 때마다 index를 1씩 감소해야 하는데 그 이유는 데이터를 제거하면서 인덱스도 함께 줄어들기도 하고 데이터 추가할 때 index가 정상적으로 실행되게 하기 위함이다.

차곡차곡 데이터를 쌓아올리는 스택을 배우다. 웹 브라우저 뒤로가기처럼 마지막의 데이터가 가장 먼저 출력되는 것이 Stack(스택) 구조이다. pop 배열함수를 사용하지않고 인덱스, splice를 사용해서 배열의 가장 마지막 데이터를 출력한다.

좋아요 기능을 만들어 보다. 👍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..