프로젝트를 하던 도중 이미지 미리보기를 구현할 일이 있었다.file을 가져오면서 FileReader를 사용하게 되었다.document.getElementById('images').addEventListener('change', function (event) { const files = event.target.files; const imageContainer = document.getElementById('div_added_pictures'); imageContainer.innerHTML = ''; // 기존 미리보기 이미지 제거 Array.from(files).forEach(file => { const reader = new FileReader(); read..
JavaScript, React 🍦
년과 월을 선택하면 달력을 보여주는 프로그램을 생성하자 2024년 2025년 2026년 년 1월 2월 3월 4월 5월 6월 7월 8월 9월 10월 12월 12월 ..
아래처럼 시작단과 끝단을 입력한 후 구구단 출력 버튼을 누르면 구구단이 출력되도록 만들어보자 시작단 : ~ 끝단 :
검색어를 입력하고 포털사이트(다음, 네이버, 구글)을 선택한 후 검색페이지 이동 버튼을 누르면아래와 같이 해당 포털 사이트에서의 검색결과가 나오는 프로그램을 생성해보자검색조건으로는 2자이상이 입력되도록 하였다 검색어 : 네이버 다 음 구 글
아래와 같이 1~45까지의 수 중에 중복된 수가 없이 로또번호가 출력되게 하자
아래와 같은 표를 만들자 아래의 코드를 베이스로 하여 만들면 더 간단하다
아래와 같은 구구단 테이블(표)을 만들어보자 다른 방식으로도 만들어보자
year(년)을 지정하면 그에 따른 캘린더(달력)가 나오도록 만들어보자 토요일은 파란색처리, 일요일은 빨간색 처리되고 오늘의 날짜는 대괄호([ ]) 안에 넣어지는 달력을 만들어 보자 콘솔창에도 달력을 출력할 수 있다
javascript로 아래 사진과 같은 표를 만들어보자방법1document.write()를 여러 번 사용해 구현해보자 Document console.log('시작'); document.write('') for(let row=1; row'); for(let col=1; col*'); } else { document.write(''); } } document.write(''); ..
Contents JSX은 react를 사용해 개발할 때 거의 필수적으로 사용 JSX란? JS: JavaScript JSX : A syntax extension to JavaScript(자바스크립트의 확장 문법) JSX : JavaScript + XML/HTML JSX 코드 // 대입연산자 오른쪽에 html 코드가 나옴 // JavaScript코드와 HTML 코드가 결합된 JSX 코드 const element = Hello, world!; JSX의 역할 JSX는 내부적으로 XML/HTML 코드를 JavaScript 코드로 변환하는 과정을 거침 그렇기 때문에 실제로 우리가 JSX로 코드를 작성해도 최종적으로는 JavaScript 코드가 나오게 됨 아래에서 JSX 코드를 JavaScript 코드로 변환하는 역..
