라몽(●'◡'●)디자이너

코딩/웹디자인에 대한 정보를 다룹니다.

코딩스터디/Javascript

*선택자.classList.add('추가할 객체'); -> addClass처럼 class값을 추가 할 수 있다. *선택자.classList.Name = '추가할 객체'; -> 마찬가지로 class값을 추가하지만 기존에 있던 class값을 삭제한다. *선택자.classList.remove('삭제할 객체'); -> class를 삭제할 수 있음 *선택자.classList.toggle('추가 혹은 삭제할 객체'); -> class를 추가 혹은 삭제할 때 사용(추가되어있는 경우에는 삭제, 삭제되어있는 경우에는 추가) -> add+remove를 동시사용 가능하다. [블로그참고] https://blog.naver.com/dpqmstnqlsdl/221910895991 자바스크립트 ClassList

2021. 6. 30.

코딩스터디/Javascript

audio객체 사용법 : var audioFile = new Audio(); audio 객체 속성 - src : 음악 파일의 경로나 url을 지정 - volumn : 음악의 음량을 설정. 0~1사이의 값을 가지며, 1에 가까울수록 소리가 큽니다. - currentTime : 음악의 재생 지점. 초단위이며, 0값인 경우에 처음부터 음악을 재생합니다. - loop : 음악의 반복 여부를 결정하며 boolean 값을 갖습니다. audio 객체 메소드 - play() : 음악을 재생 - pause() : 음악을 일시정지 합니다. [블로그참고] https://blog.naver.com/sxwe12/222357483162 - 자바스크립트 오디오 객체

2021. 6. 30.

코딩스터디/Javascript

constructor (생성자함수), prototype(프로토타입)을 활용한 객체지향 프로그래밍 [의미, 뜻] 생성자함수(통칭 ES6에서의 클래스) - 어떤 반복적인 대량의 결과물을 뽑아내기 위한 시스템적인 룰 (붕어빵을 찍어내기 위한 붕어빵틀) 인스턴스(instance) - 객체 - 생성자 함수를 통해서 복사가 된 실제적인 결과물 혹은 복사본 (붕어빵틀을 통해서 찍어낸 개별 붕어빵틀) 프로토타입 - 생성자함수를 만들면 자동으로 생성되는 공통의 저장공간 - 동일한 생성자함수를 통해서 복사된 인스턴스들은 동일한 프로토타입을 공유한다. - 보통 자주쓰는 함수(메서드)들을 프로토타입이라는 공통의 저장공간에 등록하여 모든 인스턴스들이 해당 메서드를 공유하도록 함 --> 함수를 여러 개 등록하면 메모리 공간을 많..

2021. 6. 23.

코딩스터디/Javascript

자바스크립에서 4가지의 객체가 있다. 1. 내장객체 (Built-in Object) 자바스크립트 안에는 미리 정의되어 있는 객체를 말한다. 날짜와 시간에 관련된 Date 객체, Number 객체, Boolean 객체, Array, Math 등의 내장 객체 있다. 2. 문서 객체 모델 (DOM - Document Object Model) - 내장 객체에 포함 객체를 이용해 웹 문서를 관리하는 방식을 문서 객체 모델이라고 한다.웹 문서뿐만 아니라 웹 문서 안에 포함된 이미지, 링크, 텍스트 필드 등 모두 각각 별도의 객체로 미리 만들어 놓은 것각각의 문서 객체 모델을 통해 웹을 편리하게 프로그래밍 할 수 있다. 3. 브라우저 객체 모델 (BOM - Browser Object Model) - 내장 객체에 포함..

2021. 6. 22.

코딩스터디/Javascript

배열 하나의 배열에 여러 데이터를 저장하고 싶을 때, 대괄호 안에 넣어주고, (콤마)를 통해 데이터 넣어주기 ex) let arr1 = [10]; console.log(arr1); 인덱스 : 배열이 가지고 있는 일종의 순서 [0],[1],[2] - 인덱스는 0부터 시작 객체 하나의 데이터에 여러개의 데이터를 표현하기 위해 사용 중괄호 {} 를 이용. 비어있는 객체{}를 채우려면, 바로 값을 적지않고, let obj = {키값},(=속성); ex) let student1 = [90,] [블로그 참고] https://blog.naver.com/didrh31/222149422815 자바스크립트 객체 https://blog.naver.com/sungyuna89/222375881183 자바스크립트 배열, 객체, ..

2021. 6. 21.

코딩스터디/Javascript

Date객체 - 자바스크립트에서 Date객체는 날짜를 저장할 수 있고, 날짜와 관련된 메서드도 제공해줍니다. *객체 생성하기 - Date 클래스를 이용해서 현재 시간을 출력할 수 있습니다. - Date 클래스를 호출하면 Date객체를 생성할 수 있습니다. new Date(year, month, date, hours, minutes, seconds, ms) ※로컬 pc에 설정된 현재 날짜 및 시간 데이터를 얻어옵니다. ※자바스크립트에서 월(month)을 나타날 때는 1월이 0으로 표현되고, 12월이 11로 표현됩니다. - year : 반드시 4자리이어야 합니다. - month : 0(1월)부터 11(12월) 사이의 숫자여야 합니다. - date : 일을 나타내는데, 값이 없을 경우엔 매월 마지막 일로 처리..

2021. 6. 15.

코딩스터디/Javascript

AJAX란? JavaScript 라이브러리입니다. Asynchronous JavaScript And XMl(비동기식 자바스크립트와 XML) 약자입니다. - XMLHttpRequest 객체를 이용하여 페이지 일부분만을 위해 데이터를 로드하는 기법 - 즉, 비동기 통신이며, 클라이언트와 서버간의 XML데이터를 주고 받는 기술입니다. ex) 검색어 입력, 지도 스크립트, 새로운 위치 선택 등 비동기방식 이란? - 여러가지 일을 동시다발적으로 수행 할 수 있다는 의미를 가집니다.(통신하는 동안 다른작업을 할 수 있다는 말) - 웨벺이지를 리로드를 하지 않고 데이터를 불러올 수 있으며, 데이터를 얻기 위해 모든 데이터를 재요청할 필요가 없으므로 리소스 낭비를 막아줍니다. AJAX의 장점 1. 속도 향상 -> 전체..

2021. 6. 12.

코딩스터디/Javascript

자바스크립트에서 this는 호출하는 객체에 바인딩된다. -this는 함수가 실행되는 공간을 가리킨다. -함수는 객체이며, 함수를 호출하면 바로 그 함수 객체가 실행된다. : 함수도 속성을 가지고 있기 때문에 객체라고 할 수 있다. - 바인딩이란, this가 가리킬 실행컨텍스트를 특정한 함수객체로 확정하는 것이다. : this는 전역컨텍스트가 있을 때에는 전역개체를 가리킨다. : 함수가 호출되어 실행되면 전역객체 위에 새로운 실행컨텍스트가 쌓이고, this는 이 새로운 실행컨텍스트를 가리키도록 정해진다. : 즉, 방금 실행된 함수객체에 바인딩된다. 바인딩[binding] 뜻 - bind의 사전적인 의미는 묶다 - 모든 프로그래밍 과정은 빌드, 컴파일, 그리고 실행되기 전 각각의 단계와 계층에서 필요한 각기..

2021. 6. 11.