Front-end
-
[100DaysOfCode] 34강Front-end/100DaysOfCode 2022. 9. 12. 12:43
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 문서로만 접근 가능하다 🔥 첫 번째 자식은 첫 번째 자식 노드에 액세스 할 수 있..
-
[JavaScript] ⭐️DOM 개념 정리Front-end/javascript 2022. 9. 4. 23:49
모든 객체는 속성 or 메서드를 가지고 있다 1️⃣ Window 객체 History(주소내역), Location(주소표시줄), document(문서), window(창 - 최상위 객체) Window 객체의 속성 일부 innerWidth innerHeight 창의 콘텐츠 영역 폭/높이를 반환 - 스크롤바, 제목표시줄 등은 제외 outerWidth outerHeight 창의 모든 인터페이스 요소(스크롤바 등)를 포함한 폭/높이를 반환 closed 창이 열려 있는지 닫혀 있는지를 Bool 표현식으로 반환 닫혀 있으면 true, 열려 있으면 true 반환 top 현재 창의 최상위 브라우저 창을 반환 예시) Window 객체의 메서드 일부 close 창을 닫는 메서드 - 매개변수X moveBy/To(x,y) 창을..
-
[100DaysOfCode] 33강Front-end/100DaysOfCode 2022. 9. 4. 23:17
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..
-
[100DaysOfCode] 32강Front-end/100DaysOfCode 2022. 9. 1. 09:28
💡 메서드에 대해 알아보자 📌 객체 object(lable: value) 객체란 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다 자바스크립트는 객체를 생성하기 위해 클래스를 먼저 정의하고 생성자를 호출할 필요 없이 리터럴로 객체를 생성할 수 있다! let job = { title: "developer", location: "Seoul", }; 📌 객체에 메서드 추가 자바스크립트의 함수는 일급 객체라서 함수를 값으로 취급할 수 있기 때문에 프로퍼티 값으로 사용할 수 있다 let person = { name: "Yeonsu", // 프로퍼티 // 메서드(매개변수, return값X) // 프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라 부른다 greet() { conso..
-
[100DaysOfCode] 31강Front-end/100DaysOfCode 2022. 8. 26. 23:56
💡 함수 함수의 장점: 코드의 재사용 미국 나이 기준으로 성인이 된지 얼마나 됐는지 계산하고 싶을 때 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); 함수를 사용함으로써 한국 나이로 바꾸고 싶을 경우 ..
-
[JS Deep Dive] 04. 변수Front-end/javascript 2022. 8. 23. 22:35
1️⃣ 변수란 무엇이고 왜 필요한가? 💡 컴퓨터는 아래 식을 어떻게 계산할까? 1 + 2 메모리 상의 임의의 위치(메모리 주소)에 1, 2 숫자 값이 각각 저장되고, CPU에서 값을 읽어들여 연산을 수행한다. 연산 결과로 생성된 숫자 3도 메모리 상의 임의의 위치에 저장된다. 😨 만약 연산 결과 3을 재사용하고 싶다면? 3이 저장된 메모리 공간에 직접 접근해야 하지만 오류 발생 확률이 높기 때문에 자바스크립트는 메모리 제어를 허용하지 않는다. 따라서 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어들여 재사용하기 위해 변수 메커니즘을 사용한다. ⭐️ 변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다 변수를 사용하면 직접 메모리 주소를 ..
-
[100DaysOfCode] 30강Front-end/100DaysOfCode 2022. 8. 23. 18:43
Hi, JavaScript! 👋 변수(variables) 데이터를 담는 박스에 이름을 붙인 것 let age = 32; age라는 박스에 32 값이 들어있다 HTML 파일에 .js 파일 연동하기 실습 코드 // 큰따옴표, 작은따옴표 중 무엇을 써도 상관 없지만, 하나를 정하면 일관되게 사용해야 한다 // 따옴표는 시작과 끝을 명시해주는 역할을 하기 때문에, 문자열 안에서 출력해 사용하고 싶다면 역슬래시를 사용하면 된다 //value alert('"안녕하세요 저는 김연수입니다"'); //내장된 자바스크립트 명렁어, alert를 브라우저에게 전송 alert(24); //variable let greeting = "Hi, I'm Bonny🐰"; alert(greeting); let age = 24; alert..
-
[100DaysOfCode] 27강 - 28강Front-end/100DaysOfCode 2022. 8. 21. 23:55
다양한 종류 text - 텍스트 한 줄 입력 필드 - default email - 모바일의 경우 최적화된 (@, .com 등) 키패드가 나타남 - 잘못된 이메일 형식 입력 시 브라우저에서 알림 number - 모바일의 경우 숫자 키패드가 나타남 - number의 경우 숫자 조절 화살표 버튼을 자동으로 생성하는데, step: "값"을 통해 버튼의 변화폭 조절 가능 password 입력하는 텍스트가 숨겨져서 보여짐 date 브라우저가 날짜 선택기를 오버레이해서 보여줌 radio 다양한 옵션들 중 하나를 선택할 수 있는 버튼 checkbox - yes / no "toggle" - 동의 file 유저가 파일을 선택할 수 있게 함 ... 다른 속성들은 브라우저마다 지원 유무가 다르기 때문에 참고 - name: 텍..