javaScript 썸네일형 리스트형 [JS] javascript DOM이란? DOM이란 문서 객체 모델(The Document Object Model, 이하 DOM) 프로그래밍 인터페이스이다 자바스크립트는 이러한 객체 모델을 이용하여 다음과 같은 작업을 할 수 있다 - 자바스크립트는 새로운 HTML 요소나 속성을 추가 - 자바스크립트는 존재하는 HTML 요소나 속성을 제거 - 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경 - 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경 - 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경 - 자바스크립트는 HTML 문서에 새로운 HTML 이벤트를 추가 - 자바스크립트는 HTML 문서의 모든 HTML 이벤트에 반응 우리가 보고 있는 웹페이지는 일종의 문서(document)이다 DOM 은 프로그래밍 언어는 아니지만 DO.. 더보기 [JS] javascript 자바스크립트 버튼 클릭 시 페이지 이동 window.location.href = "경로" addEventListener 사용 시 ex) loginButton.addEventListener('click', () => { window.location.href = "경로" }) 더보기 [JS] 배열(array)의 요소 조작 문제 풀어보기 배열의 요소를 가지고 문제를 풀어 봅니다 문제) divideArrayInHalf 함수를 다음과 같이 구현해주세요 divideArrayInHalf 함수는 array를 인자로 받습니다. 이 array는 숫자 값으로 만 구성되어 있으며 총 5개의 요소(element)들로 구성되어 있습니다. divideArrayInHalf 함수는 인자로 들어온 array로부터 새롭게 구성된 배열 result을 리턴합니다. array 요소들 중 10과 같거나 작은 값의 요소들은 result의 맨 앞으로, 10보다 큰 값의 요소들은 result의 맨 뒤로 재구성된 배열을 리턴해주세요. 재구성이 되는 순서는 array의 맨 뒤 요소부터 맨 앞 요소까지 입니다. 즉, 배열의 뒷 요소부터 재구성을 진행해주세요. 예를 들어, 인자로 들어.. 더보기 [React / javascript] React 시작하기 React 시작하기 전 필수로 설치해야 할 요소들이 있습니다. 아니면 React를 무겁게 배우기는 싫다 그냥 가볍게 React가 어떤 건지 알고만 싶다 하시면 CodePen Create a New Pen ... codepen.io Stackblitz React (forked) - StackBlitz stackblitz.com 사용하여 간단하게 react 사용환경을 경험하실 수 있습니다 저는 VScode를 기준으로 설명해 드리겠습니다 주의) Node.js의 최신버전이 설치되어 있어야 합니다! 각 운영체제의 맞는 터미널 환경을 확인해 주세요! 저는 바탕화면에 React-playground라는 폴더를 새로 생성하여 불러왔습니다 순수하게 html, css, js로만 작성할때는 파일을 바로 만들면 간단하게 사용할.. 더보기 [JS / javascript] scroll X, Y 값 구해보기 필요한 학습 문법이 있습니다 addeventlistener 알고 계시면 scroll값을 편하게 구할 수 있습니다 이것을 통해 간단하게 스크롤 이동을 할 수 있습니다 예시를 통해 봅시다 제가 간단하게 만든 자기소개 페이지입니다 지금 보이는 화면은 페이지의 하단이고 우측 하단에 보이는 TOP 이라는 버튼을 누르면 페이지의 제일 상단으로 이동하고 싶습니다 순서를 정리해 보자면 1. 화면의 스크롤 Y 값을 구한다 2. 버튼을 누르면 구한 스크롤 Y 값으로 페이지가 이동한다 3. 부드럽게 이동시켜 본다 1. 스크롤 값 구하기 window.addEventListener('scroll', function() { console.log(window.scrollY); }); console창으로 확인 했을때 페이지 제일 상.. 더보기 [JS / javascript] if문 조건식 한번에 여러개 비교하기 if문의 조건을 두 가지, 세 가지 한 번에 비교할 수 있는 방법이 있습니다 우리가 아는 형태의 if문 입니다 저기 조건식 부분에 조건을 여러 개 넣고 비교하려면 여러 가지 방법이 있겠으나 제가 아는 방법입니다 한 번에 비교하기 &&(논리 연산자)는 두 개의 조건식이 모두 맞아야 ture를 출력하는 연산자입니다 예시) num이라는 파라미터에 5라는 숫자를 넣었을 경우 두 가지의 조건식이 만족하는지 확인합니다 첫 번째 조건식은 10 보다 작은 숫자인가? 두 번째 조건식은 num 숫자가 5와 일치하는가? 이렇게 두 가지 조건식이 일치할 경우 내가 실행하고 싶은 자바스크립트 코드가 실행됩니다 더보기 [JS / javascript] addEventListener에 사용할 수 있는 문법 보통 이벤트리스너로 버튼을 클릭했을 때 ~~ 이러한 코드를 실행 주세요 라는 기능을 많이 사용한다 클릭뿐 많이 아니라 이벤트리스너로 사용할 수 있는 예약어들이 있다 내가 보려고 만드는 것이니 하나하나씩 추가하겠다 click 예를 들면 버튼을 클릭했을 때 실행할 코드~ mouseover 마우스를 요소에 스윽 가져다 놓았을 때 정확히는 내가 찾은 id라는 요소 안으로 마우스가 들어왔을 때를 얘기함 input input 창에 입력값이 들어왔을 때 더보기 [JS / javascript] javascript CRUD란 무엇인가? 혼자서 아주작은 프로젝트를 만들어 보고 있는 나에게 CRUD라는 중요한 것이 다가왔다 CRUD가 무엇이냐면 C = create(생성) R = read(읽기) U = update(수정, 갱신) D = delete(삭제) 이 약자들을 합쳐 놓은 소프트웨어 용어라고 보면 됨 프로젝트를 하게 되면 JS로 처음에 이 규칙을 따라 만들어보고 한 싸이클을 돌려보는게 좋다 예를 들어 가장 처음, 그리고 많이 만들어 보게 되는 TO DO LIST도 이 CRUD형태를 가지고 만드는것 더보기 이전 1 2 3 4 5 6 다음
