코딩기록

//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("button"); function titleClick() { const clickedClass = "active" if(title.classList.contains(clickedClass)) { title.classList.remove(clickedClass); } else { title.classList.add(clickedClass); } } title.addEventListener("click", titleClick);// title.onclick = titleClick 같은 방법 className을 사용하면 기존에 가지고 있던 클래스도 없애버려서 사용불가 clickedClass 대신에 'active'를 넣어도 되지만 오류의 위험이..

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..

1."따옴표 사용했을 때" const name = "Alice"; const greeting = "Hello, " + name + "!"; console.log(greeting); // 출력값: "Hello, Alice!" 2. `백틱 사용했을 때` const name = "Alice"; const greeting = `Hello, ${name}!`; console.log(greeting); // 출력값: "Hello, Alice!" - `` 백틱을 사용하면 코드를 더 간결하게 쓸 수 있고 html작성할 때의 구조로도 작업 가능함. 예제는 gpt에서 가져옴,,

요즘은 var를 권장하지 않는다. var를 사용하면서 발생하는 문제점 ​ 1. 상수인지 변수인지 구분이 안된다. ​ 2. 변수는 let으로 사용한다. var a = "1"; var a = "10"; var는 위에서 1이라고 정의했어도 아래에서 10이라고 재정의가 가능해 스크립트 오류가 발생할 확률이 높다. 3. scope의 차이 var x = 1; if (true) { var x = 2; console.log(x); // 출력값: 2 } console.log(x); // 출력값: 2 let x = 1; if (true) { let x = 2; console.log(x); // 출력값: 2 } console.log(x); // 출력값: 1 var는 블록문 안에서 선언되었어도 밖에서 참조할 수 있고 let이..