코딩기록

혼자 해보려고 했지만 대실패,, 코드 받아쓰기에 현타가 와서 자바스크립트를 좀 더 공부한 다음에 챌린지에 도전하기로 함..

새로고침할 때마다 배경 바꾸기 const images = ["0.png","1.png","2.png","3.jpg","4.png"]; const chosenImage = images[Math.floor(Math.random() * images.length)]; //images[내림(랜덤 숫자 * images의 길이)]; const bgImage = document.createElement('img'); //이미지 태그 추가 bgImage.src = `img/${chosenImage}`; //이미지 경로 bgImage.classList.add('bg_img'); document.body.appendChild(bgImage); body 안에 자식요소로 이미지태그 새로고침할 때마다 명언 바꾸기 const qu..

//html 간단한.... form과 h1에 hidden 클래스 넣어주기 //javascript const loginForm = document.getElementById('login_form'); const loginInput = loginForm.querySelector('input'); const greeting = document.querySelector('#greeting') // 이렇게도 가능! // const loginInput = document.querySelector('#login_form input'); // const loginButton = document.querySelector('#login_form button'); const HIDDEN_CLASSNAME = 'hidden'..

const title = document.querySelector(".hello:first-child h1"); function titleClick() { title.style.color = 'blue'; } function titleMouseEnter() { title.innerHTML = "mouse is here@!" } function titleMouseLeave() { title.innerHTML = "mouse is gone!" } title.addEventListener("click", titleClick); title.addEventListener("mouseenter", titleMouseEnter); title.addEventListener("mouseleave", titleMouseL..

프롬프트 창에 나이를 입력하면 콘솔창에서 확인할 수 있음. const age = parseInt(prompt("your age")); //or 연산자 true || true === true false || true === true false || false === false //and 연산자 true && true === true true && false === false false && false === false // console.log(isNaN(age)); if(isNaN(age) || age < 0){ // age가 숫자가 아니거나 0이하일 때 console.log("0이상의 숫자를 입력해주세요"); } else if(age < 18) { // age가 18 미만일 떄 console.log("..

파일 선택 버튼이 추가 되었음. ​ //html accept ="image/*" 파일은 이미지파일로 이미지 파일형식은 모든 파일 Fill Destroy Erase //js const fileInput = document.getElementById("file"); //file function onFileChange(e) { const file = e.target.files[0]; const url = URL.createObjectURL(file); //url 가져오기 const image = new Image(); image.src = url;// html 코드와 동일 image.onload = function() { ctx.drawImage(image, 0, 0, canvasWidth, canvasHei..

대충 모양 나오는 그림판 ​ //html data-color 값을 줘서 js에서 불러올 수 있게함. 'color'는 사용자 임의대로 지정할 수 있음. data-potato, data-abc.. Fill Destroy Erase //js 코드가 너무 길어서 정리하고 싶은데 일단 나중으로 미뤄본다. const colorOptions = Array.from( document.getElementsByClassName("color_option") ); forEach를 써야하는데 배열로 바꿔주어야해서 array.from을 씀. const modeBtn = document.getElementById("mode_btn"); const destroyBtn = document.getElementById("destroy_b..

//.js const canvas = document.querySelector("canvas"); const ctx = canvas.getContext('2d'); canvas.width = 800; canvas.height = 800; ctx.fillRect(200 - 40, 200, 15, 100); ctx.fillRect(350 - 40, 200, 15, 100); ctx.fillRect(252 - 40, 200, 60, 200); ctx.fillRect(212, 420, 25, 150); ctx.fillRect(246, 420, 25, 150); ctx.arc(280 - 40, 140, 50, 0, 2 * Math.PI); //num * Math.PI 원의 둘레 구하기 위한 공식 1이면 반원 ct..

누추한 조개껍데기 만드는방법 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext('2d'); canvas.width = 800; canvas.height = 800; ctx.lineWidth = 2; const colors = [ "#FFAD9E", "#D7AFFF", "#B3D89C", "#9FE2BF", "#F0F0F0", "#A2B9F2", "#E2B1E1", "#B8E080", "#FFD1DC" ] function onclick(event){ console.log(event); ctx.beginPath(); ctx.moveTo(0,0); const color = colors[Math.floor(Math.ran..