JS

Javascript란?

document.write(); -HTML 문서내에 출력 console.log(); -console 창에 출력 alert(); -알림 팝업창으로 출력

변수 var 키워드 사전적 의미로는 "변화를 줄 수 있는" 또는 "변할 수 있는 수" 프로그래밍에서는 데이터를 담을 수 있는 공간 저장하는 데이터에 따라서 자료형이 결정 Java vs Javascript var vs let vs const

배열(array) : 같은타입의여러변수를하나의묶음으로다루는것

객체(Object) : 객체지향 프로그래밍에서 데이터(속성)과그데이터에 관련되는 동작(절차,방법,기능)을모두포함한 개념

주어진 조건을 비교·판단하여 결과를 얻는 구문

어떤 조건에 만족할 때까지 같은 처리를 반복하여 실행하는 구문

출력결과

전역변수 함수의 바깥쪽에 선언하여 문서 전체 범위에서 사용할 수 있는 변수 지역변수 함수 안에 선언을 하면 선언된 함수 내부에서만 사용할 수 있는 변수

함수표현식 익명함수를 사용해 변수에 할당하여 사용하는 함수로 호이스팅이 발생하지 않는다.

화살표 함수 ECMA6에 도입된 함수로 함수 표현식을 간소화한 함수

DOM (Document Object Model)

Document 웹 페이지 자체를 가리키는 객체로, HTML 요소에 접근하려면 반드시 이 객체를 통해서 접근

innerHTML, innerText, textContent의 차이점 innerHTML innerHTML은 'Element'의 속성으로, 해당 Element의 HTML, XML을 읽어오거나, 설정할 수 있습니다. innerText innerText는 'Element'의 속성으로, 해당 Element 내에서 사용자에게 '보여지는' 텍스트 값을 읽어옵...

Event 종류

이벤트가 발생했을 때 어떤 요소에서 이벤트가 발생했는지 어떤 종류의 이벤트가 발생했는지 등의 정보를 포함

마우스 이벤트에서 클릭위치 확인

event.preventDefault() 요소의 기본 이벤트 동작을 취소하는 메소드 용도 a태그를 눌렀을 때 페이지 이동되지 않도록 할 경우 form 내 submit 동작을 막아야 할 경우 -> 입력한 값 유효성 검사 form 내 submit 기능을 막고 결과가 나오도록 구현 마우스 이벤트에서 우클릭을 막기 event.key or event....

form 접근 document.form이름 form 요소의 name 속성값을 통해 속성값 접근 document.form이름.input이름 form 요소의 name 속성값을 통해 자식요소(input)접근

document.from이름.select이름 form요소의 name속성값을 통해 자식요소(select) 접근 select 내 모든 option 요소 접근 -> select요소.selectedIndex 선택한 option 값 접근 -> select요소.options[index].value

요소 CSS 스타일 다루기 document.요소명.style.속성

class 속성 다루기 -접근 document.요소명.classList HTML 요소의 class 속성값 접근 class 속성 다루기 - 추가 document.요소명.classList.add() HTML 요소의 class 속성값 추가 class 속성 다루기 - 삭제 document.요소명.classList.remove() HTML 요소의 cl...

class 속성 다루기 - 토글 document.요소명.classList.toggle() HTML 요소의 class 속성값 존재확인 후 추가 또는 삭제 버튼을 눌렀을 때 다크모드로 바뀌는 기능을 구현 업로드중..