- Event 종류    1. Mouse Event  const submitBtn = document.querySelector(".submit-btn");const form = document.querySelector("form");const title = document.querySelector("h2");// EVENTsubmitBtn.addEventListener("click", handleEvent);submitBtn.addEventListener("dblclick", handleEvent);submitBtn.addEventListener("mousedown", handleEvent); // 요소를 클릭했을 때submitBtn.addEventListener("mouseup", handleEvent..

Q. 어떤 버튼을 클릭했을 때 어떤 액션이 일어나게 하려면 어떻게 해야 할까?  - Event Listener :마우스를 이용해서 버튼을 클릭할 때는 클릭 "이벤트"가 발생한다.이렇게 이벤트가 발생했을 때 어떠한 액션을 위한 함수를 호출하는데, 그 함수가 바로 이벤트 리스너이다.  - addEventListener() :위에서 말한 것처럼 어떠한 이벤트가 발생했을 때 이벤트 리스너를 호출하기 위해서는이벤트 리스너를 해당 객체나 요소에 등록해줘야 한다.이벤트 리스너 등록 방법을 살펴보도록 하자. 1. 자바스크립트 코드에서 프로퍼티로 등록.window.onload = function () { // 문서가 load 될 때 이 함수를 실행 let text = document.getElementById("te..

- Window Object window 객체는 브라우저에 의해 자동으로 생성되며 웹 브라우저의 창(window)을 나타낸다.또한 window는 브라우저의 객체이지 자바스크립트의 객체가 아니다. 이 window 객체를 이용해서1. 브라우저의 창에 대한 정보를 알 수 있고, 이 창을 제어하고 할 수 있다.2. 또한 var 키워드로 변수를 선언하거나 함수를 선언하면 이 window 객체의 프로퍼티가 된다.   - Document Object Window 객체가 브라우저 창이라고 하면document 객체는 브라우저 내에서 콘텐츠를 보여주는 웹 페이지 자체라고 할 수 있다.  이제부터 DOM 객체를 자바스크립트를 사용하여 삭제하거나 업데이트 해보도록 하겠다.아래의 코드를 사용할 것이다.  M..

- HTML을 이용한 화면에 UI 표현하기 브라우저에서 UI를 볼 수 있는 것은 이 HTML을 분석해서 보여줄 수 있다.이 HTML은 요소(Element)로 구성되어 있다.   - DOM이란? (Document Object Model) Window 객체 안에 Document 객체가 있다. => window.documentwindow 자체를 브라우저에서 제공하는 것이므로 window.document도 브라우저에서 제공하는 것이다.(자바스크립트 코드 안에 있지만 자바스크립트 코드가 아니다) DOM(문서 객체 모델)은 메모리에 웹 페이지 문서 구조를 트리구조로 표현해서웹 브라우저가 HTML 페이지를 인식하게 해준다. 또한 웹 페이지를 이루는 요소들을 자바스크립트가 이용할 수 있게끔브라우저가 트리구조로 만든 객..

ex) window.alert("hello"); Window Object가 굉장히 많은 기능들을 제공한다.사실 이것은 자바스크립트 객체가 아니고 브라우저에서 제공해주는 객체이다.window 객체는 브라우저에 의해 자동으로 생성되며, 웹 브라우저의 창(window)을 나타낸다. 이 window 객체를 이용하여1. 브라우저의 창에 대한 정보를 알 수 있고, 이 창을 제어하고 할 수도 있다. 2. var 키워드로 변수를 선언하거나 함수를 선언하면 이 window 객체의 프로퍼티가 나타난다.  - Window Object 사용 // Alertalert("Hello World");// Promptconst input = prompt();alert(input);// Confirmif (confirm("Yes or ..

- Loops : 자바스크립트에서 루프(Loop)를 사용하면 코드 블록을 여러 번 실행할 수 있게 해준다.  - 루프의 종류 1. for : 코드 블록을 여러 번 반복한다. - continue : 뒤에 부분을 생략하고 다시 앞으로 돌아가 반복.- break : 바로 끝내버리는 것. 2. for/in : 객체의 속성을 따라 반복한다. 여기서 x는 각 속성을 의미. - while : 지정된 조건이 true인 동안 코드 블록을 반복한다. - do/while while 루프의 변형이다.이 루프는 조건이 true인지 검사하기도 전에, 코드 블록을 한 번 실행한다.그리고 나서 조건이 true인 동안 루프를 반복한다.  - 배열을 Loop를 사용해서 컨트롤해주기 주로 배열을 컨트롤할 때, forEach, map을 많..