코딩기록

const data = 'new york;10.22;2000'; const transformData = data.split(';'); transformData[1] = +transformData[1] console.log(transformData); //(3) ['new york', 10.22, '2000'] split() - split(); (괄호)안에 구분자를 통해 문자열을 구분함. - transformData[1] = +transformData[1] -> 숫자로 변환 const nameFragments = ['max', 'anna']; const aaaa = ['123', 'dd'] const name = nameFragments.join('/ '); console.log(name); //max/ ..

const hobbies = ['drawing', 'swimming', 'yoga', 'filiates']; 내 취미 hobbies.push('trip'); //배열의 맨 끝에 값을 추가 -> ['drawing', 'swimming', 'yoga', 'filiates', 'trip'] hobbies.unshift('coding'); //배열의 앞순서에 추가 -> ['coding', 'drawing', 'swimming', 'yoga', 'filiates', 'trip'] hobbies.pop(); //배열의 맨 끝의 값을 제거 -> ['coding', 'drawing', 'swimming', 'yoga']; hobbies.shift() // 배열의 맨 앞의 값을 제거 -> ['drawing','swimm..

반복문 for 반복문 for-of 반복문 for-in 반복문 while 반복문 for (let i = 0 i < 3; i++ { console.log(i) } for (const el of array) { console.log(el); } for (const key in obj) { console.log(key); console.log(obj[key]); } while (isLoggedIn) { .... } for 반복문 - for(변수를 초기화; 조건; 매 반복 이후에 실행할 코드) - 특정횟수만큼 코드를 실행하도록 함. - 보통은 매 반복마다 증가 또는 변화 - 세미콜론으로 구분 for-of 반복문 - 배열의 모든 요소에 대해 코드를 실행할 수 있도록 함. - of를 사용하여 상수를 생성 for in..

새로고침할 때마다 배경 바꾸기 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..

const clock = document.getElementById('clock'); function getClock() { const date = new Date(); const hours = String(date.getHours()).padStart(2, "0"); const minutes = String(date.getMinutes()).padStart(2, "0"); const seconds = String(date.getSeconds()).padStart(2, "0"); clock.innerText = `${hours}:${minutes}:${seconds}` } getClock(); setInterval(getClock, 1000); // function sayHello(){ // clock...

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