본문 바로가기

JavaScript131

Array.from() Array.from() Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만듭니다. 번호 기본값 메서드 리턴값 //01 const text1 = "javascript"; const result1 = Array.from(text1); //02 const text2 = "javascript"; const result2 = Array.from(text2, (el) => el + "10"); //03 const text3 = "javascript"; const result3 = [...text3].map((el) => el); 2022. 9. 27.
이펙트 응용편 - 마우스 이펙트 네번째 마우스 이펙트4 이번 마우스이펙트는 마우스가 움직일때 이미지가 움직입니다. centerPageX = window.innerWidth / 2 - mousePageX; 을 이용하여 가운데 사진의 좌표값을 지정합니다. 그후 GSAP를 이용하여 효과를 씁니다. JS 설명 gsap를 써서 마우스커서가 움직이게 작동했습니다. 코드 보기 gsap.to(imgMove, { duration: 0.5, left: centerPageX / 20, top: centerPageY / 20, }); 원본 소스 보기 원본 사이트 보기 2022. 9. 27.
이펙트 응용편 - 마우스 이펙트 세번째 마우스 이펙트3 이번 마우스이펙트는 마우스가 움직일때 원본 이미지가 보인는것입니다. background-attachment: fixed; 로 고정을 시킨후 e.pageX - circle.width / 2, 으로 동그란 원이 가운데로 가게했습니다. JS 설명 gsap를 써서 마우스커서가 움직이게 작동했습니다. 코드 보기 window.addEventListener("mousemove", (e) => { gsap.to(cursor, { duration: 0.6, left: e.pageX - circle.width / 2, top: e.pageY - circle.height / 2, }); }); 원본 소스 보기 원본 사이트 보기 2022. 9. 27.
JavaScript - 클래스 함수 클래스 클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성됩니다. 기본문법 class MyClass { // 여러 메서드를 정의할 수 있음 constructor() { ... } method1() { ... } method2() { ... } method3() { ... } ... } 클래스 사용 예제 class study { constructor(num, name, job) { this.num = num; this.name = name; this.job = job; } result() { console.log(this.num + "이름 : " + this.name + "직업 : " + this.. 2022. 9. 20.
JavaScript - 객체구조활당 객체 구조화 활당 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. 예시 const obj = { a: 100, b: 200, c: "javascript", }; const { a, b, c } = obj; 객체 구조화 활당 let result = document.querySelector(".sample22_result"); const obj = { a: 100, b: 200, c: "javascript", }; const { a, b, c} = obj; document.write(a); document.write(b); document.write(c); 결과 확인하기 객체 구조 분해 할당 let result = docume.. 2022. 9. 20.
JavaScript - 내부 함수 내부함수 스코프 현재 실행되는 컨텍스트를 말합니다. 여기서 컨텍스트는 값과 표현식이 **"표현"**되거나 참조 될 수 있음을 의미합니다. 만약 변수 또는 다른 표현식이 "해당 스코프"내에 있지 않다면 사용할 수 없습니다. 스코프는 또한 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만 반대는 불가합니다. 출처 : MDN 클로저 클로저는 주변의 상태 (lexical environment)의 참조와 함께 번들로 묶인 함수의 조합입니다. 즉, 클로져는 우리에게 inner함수에서 outer함수의 스코프에 접근을 가능하게 해줍니다. 자바스크립트에서 클로저는 함수가 생성될 때마다 생성됩니다. 출처 : MDN 내부함수 예제 function func() { console.log("콘솔이 실행.. 2022. 9. 20.
728x90
반응형

자바스크립트 사진

JavaScript

자세히보기