Daily Coding Daily Coding

1️⃣ DOM 요소 생성, 삭제, 이동 방법 - DOM 요소 생성 1. 새로운 element를 생성한다. createElement 2. 새로운 element를 가지는 부모 element를 선택한다. querySelector 3. 부묘 오소에 새로운 element를 삽입한다. append - DOM 요소 삭제 1. 삭제할 element를 선택한다. querySelector 2. 삭제한다. remove - DOM 요소 이동 부묘 오소를 선택한 후 이동한다. 이동할 element.parentElement.append(이동할 element) // 📌 Add an element, HTML 새 요소 삽입 // 1. Create the new element // 특정 이벤트가 발생했을 때 요소를 추가하고 싶은 경우 ..

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 문서로만 접근 가능하다 🔥 첫 번째 자식은 첫 번째 자식 노드에 액세스 할 수 있..

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..

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

💡 함수 함수의 장점: 코드의 재사용 미국 나이 기준으로 성인이 된지 얼마나 됐는지 계산하고 싶을 때 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); 함수를 사용함으로써 한국 나이로 바꾸고 싶을 경우 ..

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..

다양한 종류 text - 텍스트 한 줄 입력 필드 - default email - 모바일의 경우 최적화된 (@, .com 등) 키패드가 나타남 - 잘못된 이메일 형식 입력 시 브라우저에서 알림 number - 모바일의 경우 숫자 키패드가 나타남 - number의 경우 숫자 조절 화살표 버튼을 자동으로 생성하는데, step: "값"을 통해 버튼의 변화폭 조절 가능 password 입력하는 텍스트가 숨겨져서 보여짐 date 브라우저가 날짜 선택기를 오버레이해서 보여줌 radio 다양한 옵션들 중 하나를 선택할 수 있는 버튼 checkbox - yes / no "toggle" - 동의 file 유저가 파일을 선택할 수 있게 함 ... 다른 속성들은 브라우저마다 지원 유무가 다르기 때문에 참고 - name: 텍..

오늘 배운 내용 Form element HTML form은 user input을 수집하기 위해 사용된다. user input은 프로세스을 위한 서버로 보내진다 form 태그가 다른 input 요소들을 감싸주는 형태이다 (text fields, checkboxes, radio buttons, submit buttons, ...) form 태그로 감싸면서 검색 엔진과 장치들에게 입력 양식이 시작할 것이라 알려주는 역할을 수행한다 양식이 어떻게 제출될지 제어하는 역할을 수행한다 input element input element는 closing tag가 필요 없는 void element이다 💡 종류: text, radio, checkbox, submit, button action Specifies where t..