Written by Jieun

👩🏻‍💻 내 마음대로 Today I Learned

JavaScript, TypeScript

1. document.createElement("tagName") 지정된 이름의 HTML요소 생성 2. document.createTextNode("textNode") 선택한 요소에 텍스트 삽입 🔎 하지만 createElement로 생성만 했을 뿐, DOM트리와는 아무런 관계가 없기 때문에 DOM트리에 삽입하기 위해선 노드를 연결시켜야 한다. 3. node.appendChild(aChild) 부모 노드의 자식노드 리스트 중 마지막 자식노드로 삽입 const myUl = document.querySelector("ul"); const myLi = document.createElement('li'); const myText = document.createTextNode('첫번째 문장'); myUl.appen..

2023. 3. 12.

JavaScript, TypeScript

classList 선택자에 특정 클래스를 제어하는 방법 클래스 추가: element.classList.add("클래스 명") 클래스 삭제: element.classList.remove("클래스 명") 클래스가 존재하면 삭제, 없으면 추가 (add, remove 동시 사용): element.classList.toggle("클래스 명") See the Pen classList by Jieun Kim (@ji-silver) on CodePen.

2023. 3. 11.

JavaScript, TypeScript

1. 이벤트(Event)란? 쉽게 말해 사용자가 웹페이지에서 무언가를 클릭하거나 키를 누르면 그게 바로 이벤트가 발생할 수 있다. 이런 동작에 의해 웹 페이지 HTML요소들이 변경되거나 반응할 수 있도록 자바스크립트를 이용해서 특정 동작을 수행할 수 있다. 2. HTML 이벤트 이벤트 종류는 정말 많다. (MDN 문서 참고) 대체로 많이 사용되는 이벤트는 마우스, 키보드, 포커스, 폼, 윈도우 이벤트 등이 있다. click: 클릭 mouseover: 마우스오버 mouseout: 마우스 아웃 mousedown: 마우스 클릭 mouseup: 마우스 뗐을 때 mousemove: 마우스 움직였을 때 focus: 포커스 이동 change: 값 변경 submit: submit 버튼을 눌렀을 때 reset: rese..

2023. 3. 10.

JavaScript, TypeScript

1. DOM (Document Object Model): 문서 객체 모델 XML / HTML 문서 내의 모든 요소를 정의하고 각 요소를 접근 하는 방법을 제공하여 문서구조, 스타일, 내용 등을 변경할 수 있도록 한다. 정적인 웹페이지에 접근하여 동적인 웹페이지로 만들기 위해 내장되어있는 자바스크립트로 DOM을 조작 (프로그래밍 언어와 독립적이기 때문에 다른 언어도 가능) 2. HTML 요소 선택 - document.getElementById('id'): 해당 아이디 요소 선택 const selectedItem = document.getElementById("id"); //아이디가 #id인 요소 선택 - document.getElementsByTagName('tagname'): 해당 태그명으로 요소 모두 ..

2023. 3. 9.

JavaScript, TypeScript

arr.push() : 배열 맨 뒤 데이터 삽입 arr.pop() 배열 맨 뒤 데이터 제거 arr.shift() : 배열 맨 앞 데이터 제거 arr.unshift() : 배열 맨 앞 데이터 삽입 arr.reverse() : 배열 역순 출력 (원본 배열 변형) 🔎 원본 배열을 유지하고 싶으면? [...arr].reverse() -> 얕은 복사 해주기 arr.fill(배열에 추가할 값, 시작 인덱스, 끝 인덱스) : 배열안에 같은값으로 채우기. 시작인덱스와 끝인덱스(끝인덱스는 포함x)를 정해서 일부 값만 바꿀 수 있음 arr.join(구분자) : 배열의 모든 요소들을 연결해 새로운 문자열로 만들기 let x = ['hello', 'world', 'javascript'] x.join() //구분자 생략 시 (..

2023. 3. 7.

JavaScript, TypeScript

str.charAt(인덱스) : 해당 인덱스의 문자를 읽어내기 str.length() : 문자 길이 출력 str.toUpperCase() : 문자열 대문자로 변환 str.toLowerCase() : 문자열 소문자로 변환 str.indexOf(’찾을 문자’, 시작위치) : 앞에서부터 또는 시작위치를 정해서 일치하는 문자 검색 후 인덱스 출력(없으면 -1 출력) let str = 'abcd'; str.indexOF('a'); console.log(str); // 0 let str = 'javascript'; str.indexOf('a', 3); console.log(str); // 3 str.lastIndexOf(’찾을 문자’, 시작위치) : 뒤에서부터 또는 시작위치를 정해서 일치하는 문자 검색 후 인덱스 ..

2023. 3. 6.