1. 문서 객체 모델 2. DOM 요소에 접근하는 여러가지 방법 3. 웹 요소의 속성 가져와서 수정하기 1. 문서 객체 모델(DOM,Document Object Model) 문서 객체 모델 정의 : 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법. 즉, DOM을 이용하면, 웹 문서의 모든 요소(텍스트,이미지,표 등)를 객체로 해석할 수 있다. DOM 사용 여부에 따라, h3 내용 가리기 예시 예를 들어, HTML로 작성한 다음과 같은 정보에서, '상세설명'을 보이지 않게 하려고 한다. 1) DOM을 사용하지 않고 내용을 가리려면 ... 상세 설명 2차 세계대전 이후 ~~~ ~~~ ... 웹 문서를 비쥬얼 스튜디오 코드로 열어 상세 설명이 가려지도록 CS..

1. Date 객체 간단히 알아보기 자바스크립트에는 날짜와 시간 정보를 다루는 Date 객체가 이미 내장되어 있다. Date객체를 사용하면? 현재 날짜와 시간을 알 수 있다. 특정 날짜나 시간까지 얼마나 남았는지 등도 계산할 수 있다. 자바스트립트 프로그램에서 Date 객체를 사용하려면? Date 객체의 인스턴스를 만들어야 한다. 현재 날짜 정보를 가지는 Date 객체 만들기 new Date() 2. 특정 날짜나 시간 정보를 가지는 Date 객체 만들기 new Date("2018-02-25") Date 객체의 주요 함수 - set~ (): 날짜,시간 정보를 설정하는 함수 - get~ (): 날짜, 시간 정보를 가져오는 함수 (주의) getMonth()와 getDay() 함수를 사용하면, 결과값이 0부터 ..

객체를 왜 사용할까? : js을 사용해, 웹 사이트나 애플리케이션의 자료를 다루려면 하나의 변수에 여러 정보를 저장할 수 있는 객체가 꼭 필요하다. (ex)회원제 사이트에서, 회원 정보를 저장할 때는 회원이름,id,비밀번호,가입 날짜,생년월일 등 여러 정보가 하나의 회원 정보에 저장된다) 1. 자바스크립트에서 객체의 종류 1. 내장 객체 : 자바스크립트 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의되어 있다. 이러한 객체를 '내장 객체(Built-in-Object)라고 한다. ex) 날짜나 시간과 관련된 프로그램 작성 -> Date 객체를 사용해, 현재 시각을 알아내고 그 정보를 손쉽게 사용할 수 있다. ex) Date,Number,Boolean,Array,Math 등 2...

//누르면 change-Pic()함수 실행 1. 마우스 이벤트 1. click - 사용자가 HTML요소를 마우스로 눌렀을 때 이벤트가 발생 2. mousedown - 사용자가 요소 위에서 마우스 버튼을 누르는 동안 발생합니다. 3. mouseup - 사용자가 누르고 있던 마우스 버튼에서 손을 뗄 때 이벤트 발생 4. dblclick - 사용자가 HTML요소를 마우스로 더블 클릭했을 때 발생합니다. 5. mousemove - 사용자가 해당 element에서 마우스를 움직일 때 발생합니다. 6. mouseover - 마우스 포인터가 요소 위로 옮겨질 때 이벤트 발생 7. mouseout - 마우스 포인터가 요소를 벗어날 때 이벤트 발생 8. mouseenter - 사용자가 마우스를 해당 element 바깥에..

이벤트(Event): 웹 문서에서 버튼을 누르거나 이미지 위에 마우스 포인터를 올려 놓는 등의 사건. 함수의 재사용성 : 입력을 바꿔서, 여러번 사용할 수 있는 성질 매개변수: 함수를 선언할 때, 함수 이름 옆의 괄호 안에 이름을 넣어줌. 함수를 실행하기 위해 필요하다고 지정하는 값 인수: 함수를 실제 실행할 때, 매개벼수 자리에 실제로 넣어주는 값 ES6에서는, 매개변수가 있는 함수를 선언할 때, 매개변수의 '기본값'을 지정하는 기능도 생김 여러 동작을 묶은 덩어리, 함수 함수, 왜써? - 자바스크립트에도 여러 함수가 미리 만들어져 있어서, 개발자는 그 함수를 가져다가 사용할 수 있다. 함수 정의와 실행 - 함수를 선언할 때, function이라는 예약어를 사용한다. -함수 정의와 실행 순서 : 순서는..

1. React-Query  -  리액트 쿼리는, 서버에서 가져온 데이터를 웹 브라우저 앱에서 사용하기 쉽게 도와주는 기술 - 서버는 클라이언트에게 데이터베이스에 있는 정보를 전달해주는 역할을 한다   > 이 때, 서버:api서버 / 클라이언트: 리액트 앱(웹 브라우저에서 실행되는, 우리가 작성한 앱) server state / client state를 가지고 있는 어플리케이션의 아키텍쳐 구조 데이터베이스에서 가져온 데이터를 클라이언트에서 보여주기 위해 우리는 ajax를 이용하는데, 이 때 서버에서 가져오는 데이터를 '서버의 상태'라고 이야기 한다. (서버 스테이트)      서버는, 데이터 베이스에서 기록된 정보 (ex.유저 기록)를 불러온다. 이러한 정보들을 조합해서, 서버state를 만들고, 클라이..

보호되어 있는 글입니다.