전체 글 84

[JavaScript] 문자열 객체 (String Object)

문자열 객체 (String Object)는 문자형 데이터를 객체로 취급 , JavaScript에서 많이 사용하는 객체중 하나이다. 기본형 var 참조변수 = new String(문자형데이터) var t = new String("hello world"); //문자열 객체 생성 1. String()메서드 2. 문자형 데이터 // 문자열 객체는 다음고 같이 참조 변수에 문자형 입력해도 객체가 생성 var 참조 변수 = 문자형 데이터 ex) var t = "hello world";// 문자열 객체 생성 1. 참조변수 2. 문자형 데이터 문자열 객체의 메서드 및 속성 종류 설명 charAt(index) 문자열에서 인덱스 번호에 해당하는 문자를 반환 ex) var str = "web he she"; str.char..

[JavaScript] 배열객체

배열객체 여러개의 데이터를 하나의 장소에 저장하기 위해서는 배열 객체 (Array Object)를 생성하면된다 . 배열객체의 기본형은 다음과 같다. 1 var 참조 변수 = new Array(); 참조변수[0]=값1; 참조 변수[1]=값2; 참조변수[2]=값3; ... 참조 변수[n-1]=값n; var 참조 변수 = new Array(값1 값2,값3 ...값n); var 참조 변수 = [값1, 값2,값3 ... 값n] 배열 객체를 생성하는 방법은 다음과 같이 3가지가 있고 원하는 방식을 사용하면 됩니다. 방법 1. var d = new Array(); d[0] = 30; d[1] = "하이"; d[2] = true; 방법 2. var d = new Array(30, "하이", true); 방법 3. va..

[JavaScript] 수학 객체

수학객체 자바스크립트 내장 객체에는 수학과 관련된 기능과 속성을 제공하는 수학객체가 있다. 종류 설명 Math.abs(숫자) 숫자의 절대값을 반환 Math.max(숫자 1, 숫자2, 숫자 3, 숫자 4) 숫자 중 가장 큰 값을 반환 Math.min(숫자1, 숫자2, 숫자3, 숫자4) 숫자 중 가장 작은값을 반환 Math.pow(숫자, 제곱갓) 숫자의 거듭제곱값을 반환 Math.random() 0~1사이의 난수를 반환 Math.round() 소수점 첫째 자리에서 반올림하여 정수를 반환 Math.ceil 소수점 첫째 자리에서 무조건 올림하여 정수를 반환 Math.floor 소수점 첫째 자리에서 무조건 내림하여 정수를 반환 Math.sqrt 숫자의 제곱근값을 반환 Math.Pl 원주율 상수를 반환

[JavaScript] 내장객체 (Built - in Object)

내장 객체 생성하기 내장객체를 생성할 때는 new라는 키워드와 함께 생성함수를 사용합니다. 참조변수 (인스턴스 이름) = new 생성함수() 날짜 정보 객체 현재 날짜의 정보를 제공하는 Date 객체는 다음과 같이 생성합니다. 참조 변수 = new Date(); "날짜 관련 메서드 " 날짜 정보를 가져올 때(GET) getFullYear() 연도 정보를 가져옴 getMonth() 월 정보를 가져옴 getDate() 일 정보를 가져옴 getDay() 요일 정보를 가져옴 getHours() 시 정보를 가져옴 getMinutes() 분 정보를 가져옴 getSconds() 초 정보를 가져옴 getMilliseconds() 밀리초 정보를 가져옴 (1/1,000초 단위) getTime() 1970년 1월 1일부터 ..

[JavaScript] 객체(object)

객체란 ? 자바스크립트는 기본적으로 객체(object)기반의 언어이다. 객체는 기본적으로 "기본" 과 "속성"을 가지고 있다. 자바스크립트에서 다야한 기능은 "메서드" 라고 하며 또한 객체는 속성을 가지고 있습니다. 자바스크립트 객체의 메서드와 속성의 기본형은 다음과 같습니다. 1 객체.메서드(); 2 객체.속성; 또는 3 객체.속성= 값 1 . 객체의 메서드를 실행. 2. 객체의 속성값을 가져옴. 3. 객체의 속성값을 바꿈. 객체의 종류 자바스크립트의 객체의 종류에는 크게 내장객체, 브라우저 객체 모델 (BOM , Browser Object Model), 문서 객체 모델 (DOM , Document Object Model) 로 나눌 수 있다. 내장객체 내장객체는 자바스크립트 엔진에 내장되어 있어 필요한..

[HTML+CSS] 3차원 변환

변환함수 설명 translate3d(translateX, translateY, translateZ) 특정 크기만큼 이동함 translateX(translateX) X축으로 특정 크기만큼 이동함 translateY(translateY) Y축으로 특정 크기만큼 이동함 translateZ(translateZ) Z축으로 특정 크기만큼 이동함 scale3d(scaleX,scaleY,scaleZ) 특정크기 만큼 확대 및 축소함 scaleX(scaleX) X축으로 특정 크기만큼 확대 및 축소함 scaleY(scaleY) Y축으로 특정 크기만큼 확대 및 축소함 scaleZ(sclaeZ) Z축으로 특정 크기만큼 확대 및 축소함 rotate3d(angleX, angleY, angleZ) 특정 각도만큼 회전 rotateX(..

[HTML+CSS] 2차원 변환

▶ 보통은 컴퓨터 프로그램 화면 좌표를 가로는 x축 세로는 y축이며 왼쪽 위에 위치하는 점이 영점으로 볼 수 있다. 여기에 z축을 추가 하면 3차원 화면 좌표로 확장이 되는 것 입니다. 간단한 예시를 보겠습니다. See the Pen by yeojinho (@yeojinho) on CodePen. ▶ 2차원 변환 함수 변환 함수 설명 translate(translateX, translateY) 특정 크기 만큼 이동함 translateX(transrateX) X축으로 특정 크기 만큼 이동 translateY(transrateY) Y축으로 특정 크기 만큼 이동 scale(scaleX,scaleY) 특정 크기만큼 확대 및 축소 scaleX(scaleX) X축으로 특정 크기 만큼 확대 및 축소 scaleY(sc..

[HTML+CSS] 키 프레임과 애니메이션 속성

ex) animation 속성 설명 animation 모든 animation을 한 번에 적용 animation-delay 이벤트 발생 후 몇 초 후에 재생할지 지정 animation-direction 애니메이션 진행 방향 설정 animation-duration 애니메이션 몇 초 쓸지 지정 animation-timing-function 수치 변형 함수를 지정 animation-play-state 애니메이션 재생 상태를 지정 animation-iteration-count 애니메이션 반복 횟수를 지정 animation - name 애니메이션 이름을 지정 예시) See the Pen by yeojinho (@yeojinho) on CodePen. ▶ animation-direction 속성 ▶ animation..

[HTML+CSS] 애니메이션 (변형 속성)

▶ 애니메이션 속성에는 애니메이션 속성과 변형 속성으로 나뉜다. 가장 기본적인 예시를 보면 See the Pen by yeojinho (@yeojinho) on CodePen. 출력된 결과물 오렌지 사각형에 마우스를 올려두면 애니메이션이 구현이 됨을 알 수 있다. 속성 설명 transition 모든 transition 속성을 한 번에 사용함 transition-delay 이벤트 발생 후 몇 초후에 재생할지 지정 transition-duration 몇 초 동안 재생할지 지정 transition-property 어떤 속성을 변형할지 지정 transition-timing-function 수치 변형 함수 지정. 또다른 예시를 들어 보겠습니다. See the Pen by yeojinho (@yeojinho) on..