Daily Coding Daily Coding

JavaScript HTML DOM W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com DOM 드릴링 & 텍스트 노드 🔥 HTML 컨텐츠는 HTML 요소뿐만 아니라 텍스트, 텍스트 조각들도 DOM에 저장된다 🔥 노드와 자식 노드들로 둘 다 접근 가능하고, {children}으로는 저장된 HTML 문서로만 접근 가능하다 🔥 첫 번째 자식은 첫 번째 자식 노드에 액세스 할 수 있..

모든 객체는 속성 or 메서드를 가지고 있다 1️⃣ Window 객체 History(주소내역), Location(주소표시줄), document(문서), window(창 - 최상위 객체) Window 객체의 속성 일부 innerWidth innerHeight 창의 콘텐츠 영역 폭/높이를 반환 - 스크롤바, 제목표시줄 등은 제외 outerWidth outerHeight 창의 모든 인터페이스 요소(스크롤바 등)를 포함한 폭/높이를 반환 closed 창이 열려 있는지 닫혀 있는지를 Bool 표현식으로 반환 닫혀 있으면 true, 열려 있으면 true 반환 top 현재 창의 최상위 브라우저 창을 반환 예시) Window 객체의 메서드 일부 close 창을 닫는 메서드 - 매개변수X moveBy/To(x,y) 창을..

length property let userName = "yeonsu"; let hobbies = ["Sports", "Cooking", "Reading"]; 문자열의 길이 userName.length 배열 요소의 개수 hobbies.length 💡 배열과 문자열은 비슷하다! 문자열: 문자의 모음 배열: 종류의 제한이 없는 값의 모음 Window 객체와 Document 객체 비교 Built - in Variables & Functions Global "window" Object The "document" Object Holds information and functionality related to the active browser window / tab Holds information and funct..

익스텐션이란? 타입을 나눠서 작성하고, 하나의 타입으로 동작하는 것 기존에 작성된 타입이나 남이 작성한 타입을 확장할 수 있다 서로 다른 파일에 작성 가능하다 class Dog { func eat() { print("밥먹기") } } // 확장 extension Dog { func growl() { print("으르렁") } } var myDog = Dog() myDog.eat() // 원래 클래의 메서드 myDog.bike() // 확장한 클래스의 메서드 익스텐션으로 가능한 것 계산 프로퍼티, 메서드, 프로토콜, 서브스크립트, 중첩 타입, ... 불가능한 것 designated initializer, 저장 프로퍼티 extension과 프로퍼티 - 계산 프로퍼티 가능 (designated initiali..

객체 지향 프로그래밍 [예시] - 학사 관리 시스템 학생의 이름, 전공 수강신청 과목 수강신청 하기 - 게임 캐릭터 캐릭터의 능력 캐릭터 이동, 공격, 방어 등 객체 지향 프로그래밍 작성 방법 [객체의 속성] 가로, 세로 길이가 10, 20인 사각형 사각형은 객체이고, 가로 세로 길이는 사각형 객체가 가진 속성이다 [객체의 행위] 사각형의 넓이 계산 사각형은 정사각형인지 판단 사각형을 다루는 애플리케이션 클래스 객체의 타입 정의 프로퍼티 객체의 속성 정의 메소드 객체의 행위 정의 클래스에서 객체 생성 객체 생성 객체에 속성 설정 객체 메소드 실행 클래스 정의와 객체 생성 클래스 정의 class Rectangle { } 객체 생성 var rect = Rectangle() // var: 새로운 객체 대입 가..

💡 메서드에 대해 알아보자 📌 객체 object(lable: value) 객체란 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다 자바스크립트는 객체를 생성하기 위해 클래스를 먼저 정의하고 생성자를 호출할 필요 없이 리터럴로 객체를 생성할 수 있다! let job = { title: "developer", location: "Seoul", }; 📌 객체에 메서드 추가 자바스크립트의 함수는 일급 객체라서 함수를 값으로 취급할 수 있기 때문에 프로퍼티 값으로 사용할 수 있다 let person = { name: "Yeonsu", // 프로퍼티 // 메서드(매개변수, return값X) // 프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라 부른다 greet() { conso..

💡 프로토콜 - 특정 역할을 하기 위한 메서드, 프로퍼티 등의 청사진이다(채택받는 타입이 구현을 약속한다) - 프로토콜은 구현부 {}가 없기 때문에 단독으로 사용이 불가하다 -> 클래스, 구조체와 함께 사용 - 프로토콜을 사용하면 클래스, 구조체 등 다른 타입이더라도 같은 인터페이스로 다양한 구현이 가능하다! 프로토콜 정의 protocol 프로토콜 이름 { 프로토콜 정의 } 프로토콜 채택 // 구조체, 클래스, 열거형에서의 구현 방법 struct SomeStruct: AProtocol, AnotherProtocol { // 구조체 정의 } class SomeClass: AProtocol, AnotherProtocol { // 클래스 정의 } enum SomeEnum: AProtocol, AnotherPr..

💡 함수 함수의 장점: 코드의 재사용 미국 나이 기준으로 성인이 된지 얼마나 됐는지 계산하고 싶을 때 let adultYears = age - 18; // 미국 성인 나이 계산 let manAge = age - 18; let womanAge = age - 18; 만약 한국 나이로 바꾸고 싶다면? 일일이 'age - 18' 코드를 변경해주어야 한다😨 함수 사용 let age = 0 function calculateAge(age) { return age - 18; } let manAge = calculateAge(20); let womanAge = calculateAge(21); console.log(manAge); console.log(womanAge); 함수를 사용함으로써 한국 나이로 바꾸고 싶을 경우 ..