분류 전체보기
-
[JQuery] 제이쿼리 탐색 선택자JQuery 2023. 6. 9. 11:25
탐색 선택자 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 좀 더 정확하게 선택합니다. 대표적으로 배열의 idnex를 사용하여 선택하는 "위치 탐색 선택자"와 지정된 속성과 값으로 선택하는 "속성 탐색 선택자"가 있습니다. 위치 탐색 선택자 기본 선택자로 선택한 요소는 배열에 담깁니다. 이때 배열의 인덱스를 사용하면 특정 요소를 좀 더 정확하게 선택할 수 있습니다. 하나씩 예제와 함께 살펴보겠습니다. first/last 선택자 선택된 요소 중 첫 번째 요소만 선택 마지막 요소만 선택 1. $("요소:first") or $("요소").first() 2. $("요소:last") or $("요소").last() 탐색 선택자 내용1 내용2 내용3 내용4 even/odd 선택자 홀수 번째 요소 ..
-
[Jquery] 제이쿼리 선택자JQuery 2023. 6. 8. 00:01
선택자 제이쿼리 선택자느 CSS 선택자와 마찬가지로 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있습니다. HTML에서 작성한 스타일은 사용자의 동작에 의해 변경할 수 없기 때문에 정적이다 라고 이야기 하고, 제이쿼리에서 작성한 CSS는 동적으로 적용할 수 있습니다. 문서 객체 모델 문서 객체 모델은 DOM(Document Object Model) 입니다. 다음 HTMl 문서의 객체 구조는 아래와 같습니다. 위와 같이 문서 객체 구조를 그림으로 표현하면 트리 구조가 됩니다. 가장 상위 Root Node인 html을 시작으로 뿌리로 뻗어 나갑니다. 선택자 사용하기 제이쿼리는 무문서 객체를 불러와서 선택자를 사용할 수 있습니다. 내용 위와같이 작성하게되면 txt를 선택할 수 없습니다. 우리는 우선 bo..
-
[Jquery] 제이쿼리 시작하기JQuery 2023. 6. 7. 09:23
제이쿼리란? 제이쿼리는 자바스크립트 개발자였던 존 레식이 자바스크립트를 이용해 만든 라이브러리입니다. 제이쿼리의 장점 호환성 문제 해결 자바스크립트는 DOM과 이벤트 객체의 호환성이(크로스 브라우징) 떨어진다는 단점이 존재합니다. 예를 들어 인접 요소 선택자 중 다음 요소 선택자는 IE8 이하의 브라우저에서 DOM을 선택 했을 때와 이후 버전의 브라우저에서 선택 했을 때 결과가 다릅니다. 이러한 호환성 문제가 제이쿼리에서는 모두 해결되었습니다. 쉽고 편리한 애니메이션 효과 기능 구현 제이쿼리는 애니메이션과 다양한 이벤트를 지원하는 메서드를 제공하기 때문에 개발 시간 및 코드 길이를 많이 단축할 수 있습니다. 제이쿼리 라이브러리 연동하기 다운로드 방식 1. https://cdnjs.com 에서 jquery..
-
이펙티브 타입스크립트 아이템 1~3TypeScript 2023. 6. 2. 15:38
아이템1: 타입스크립트와 자바스크립트의 관계 이해하기 TypeScript는 JavaScript의 상위 집합입니다. 따라서 main.js를 main.ts로 변경하여도 달라지는 것은 없습니다. 이것은 JavaScript를 TypeScript로 마이그레이션하는데 큰 도움을 줍니다. 다음 예제를 확인해보겠습니다. function greet(who: string) { console.log('Hello', who) } JavaScript는 who: string에 대해서 Unexcepted Token 에러를 발생시킵니다. function greet(who) { console.log('Hello', who) } 하지만 위의 예제를 TypeScript에서는 에러가 발생하지 않습니다. 따라서 JavaScript의 상위집합..
-
[JavaScript]프로토타입-3JavaScript 2023. 1. 12. 17:06
직접 상속 Object.create에 의한 직접 상속 Object.create(~~)는 ~~를 프로토타입으로 하는 객체를 만들라는 명령어 입니다. // 프로토타입이 null인 객체를 생성한다. 생성된 객체는 프로토타입 체인의 종점에 위치한다. // obj → null let obj = Object.create(null); console.log(Object.getPrototypeOf(obj) === null); // true // Object.prototype을 상속받지 못한다. console.log(obj.toString()); // TypeError: obj.toString is not a function // obj → Object.prototype → null // obj = {};와 동일하다. o..
-
[JavaScript]프로토타입-2JavaScript 2023. 1. 5. 19:02
프로토타입의 생성 시점 프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성됩니다. 사용자 정의 생성자 함수와 프로토타입 생성 시점 // 함수 정의(constructor)가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성된다. console.log(Person.prototype); // {constructor: ƒ} // 생성자 함수 function Person(name) { this.name = name; } 위 예제와 같이 전역 컨텍스트가 실행될 때 함수 선언문이 먼저 실행되므로(이 때 프로토타입도 같이 생성된다.) console.log 에 프로토타입이 출력될 수 있다. 하지만 화살표함수와 같이 생성자함수가 없는 함수는 프로토타입도 미리 생성되지 않는다. // 화살표 함수는 non-c..
-
[JavaScrip] 프로토타입 - 1JavaScript 2023. 1. 3. 17:52
자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다. 자바스크립트는 클래스 기반 객체지향 프로그래밍 언어보다 효율적이다. 자바스크립트는 원시 타입의 값을 제외한 ‘모든 것’이 객체라고 할 수 있다. 객체지향 프로그래밍 객체지향 프로그래밍은 독립적 단위인 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 말합니다. 객체지향 프로그래밍은 실체를 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작합니다. 따라서, 실제는 특징이나 성질을 나타내는 속성을 가지고 있고, 이를 통해 인식하거나 구별합니다. 예를 들어, 사람은 이름, 주소, 성별 등 다양한 속성을 갖습니다. 이름 xx 성별 xx 나이 xx 인 사람으로 구체적인 속성을 표현하..
-
[JavaScrip] 함수와 일급 객체JavaScript 2022. 11. 24. 16:09
일급객체 일급객체는 다음 조건을 모두 만족하는 객체를 말한다. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. 자바스크립트의 함수는 위 조건을 모두 만족하므로 일급 객체이다. // 1. 함수는 무명의 리터럴로 생성할 수 있다. // 2. 함수는 변수에 저장할 수 있다. // 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다. const increase = function (num) { return ++num; }; const decrease = function (num) { return --num; }; // 2. 함수는 객체에 저..