DOM을 이용하면 자바스크립트로 웹 문서를 자유롭게 다룰 수 있다고 했을 때,하지만 웹 문서를 수정하거나 새로운 콘텐츠를 추가,삭제 하려면가장 먼저 다루고자 하는 노드를 접근하여야 한다. 일단 원하는 태그를 선택하는 가장 기본적인 방법은 document 객체의 메소드를 활용하는 것이라 했을 때, ▼ content라는 id 값을 가진 태그 콘솔에 출력하기// DOM 트리 접근하기const myTag = document.querySelector('#content')console.log(myTag);   위와 같이 document 객체의 메소드를 활용하여 태그를 선택했다면DOM 트리의 부모, 자식, 형제 관계를 활용해서 태그를 선택 하는 법을 알아보자.DOM Tree 접근하기(1) - 자식 요소 노드자식이라는..

DOM(Document Object Model) 문서 객체 모델​ Document Object Model(DOM) - 문서 객체 모델웹 브라우저 안에 나타나는 콘텐츠 부분을 웹 페이지라고도 부르지만 웹 문서라고도 표현한다.그래서 DOM을 간단하게 요약하면 웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것이다.그리고 이미 사용해봤던 document 객체가 이 웹 문서의 최상단 객체로 진입점의 역할을 하며,document 객체를 활용하면 웹 페이지 내부에 무엇이든 수정할 수 있고 새로운 컨텐츠를 만들어 낼 수 있다. ▼ 콘솔에 documnet 객체를 출력 // DOM (Document Object Model)console.log(document);console.log(typeof docume..

자바스크립트는 원래 웹 브라우저를 다루기 위해서 등장한 프로그래밍 언어이다.자바스크립트는 모든 것이 객체라고했듯이 우리가 사용하는 이 웹 브라우저를자바스크립트의 window라는 객체로 다룰 수가 있다.콘솔에 window 객체를 출력해보자면..▼ //window console.log(window);이렇게 윈도우 객체가 하나 나오는데, 펼쳐보면 정말 많은 프로퍼티들이 있다.윈도우 객체는 말 그대로 이 브라우저의 창을 대변하며 이 객체안에 있는 프로퍼티를 활용하면자바스크립트로 브라우저가 가지고 있는 다양한 정보를 얻거나,혹은 브라우저를 자유롭게 제어할 수 있다. window 객체 - innerWidth, innerHeight 프로퍼티예를 들어서 innerWidth, innerHeight 프로퍼티에 ..

1. 자바스크립트로 태그 선택하기 2. 유사배열배열과 유사한 객체 ex) HTMLCollection, NodeList, DOMTokenList, ...특징숫자 형태의 indexing이 가능하다.length 프로퍼티가 있다.배열의 기본 메소드를 사용할 수 없다.Array.isArray(유사배열)의 리턴값은 false다. 3. 이벤트와 이벤트 핸들링, 그리고 이벤트 핸들러이벤트 : 웹 페이지에서 발생하는 대부분의 일(사건)들 ex) 버튼 클릭, 스크롤, 키보드 입력, ... 이벤트 핸들링 : 자바스크립트를 통해 이벤트를 다루는 일 이벤트 핸들러 : 이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드. 이벤트 리스너(Event Listener)라고도 부른다.  4. 이벤트 핸들러를 등록하는 2가지..

웹 페이지에서 일어날 수 있는 대부분의 일들을 Event 라고 부른다.웹 페이지에는 다양한 이벤트들이 존재하는데그냥 마우스를 움직여도 이벤트이고 키보드를 누르거나 페이지를 스크롤 하는 것도 이벤트이다. 다운받은 index파일을 열면 클릭버튼 하나있는데지금은 클릭해도 아무런 변화가 일어나지 않는다.자바스크립트를 통해서 이 HTML 버튼을 클릭했을 때의 특별한 동작을 만들어내는 법을 알아보자 이벤트와 버튼 클릭 더보기 Click! 우선 querySelector를 이용해서 버튼을 선택한다.▼//이벤트(Event)와 버튼 클릭const btn = document.querySelector('#myBtn')▲ 'btn' 변수 생성하고 querySelector 메소드를 이용해서 id인 #myBtn 을 ..

WebSocket▼ HTTP 프로토콜의 한계 • HTTP 프로토콜의 특징을 이야기 할 때 항상 화자되는 중요 특징이 Connection Oriented 와 Stateless 이며Connection Oriented 라는 특징은 네트워킹을 통해 데이터를 주고 받고자 하는 두 애플리케이션이 상호 연결된 상태에서 데이터 송신/수신이 이루어 진다.HTTP 프로토콜은 Connection Oriented 하다고 주로 말하는데,우리가 관심을 가지고 있는 웹 애플리케이션으로 이야기 하자면 브라우저와 웹 서버가 네트웍에서 연결된상태에서 상호 데이터를 주고 받으면서 브라우저에 백앤드 데이터가 출력되는 것이다. • HTTP 프로토콜이 가지는 또 하나의 중요 특징이 Stateless 이다.Stateless 는 웹 애플리케이션을..

CSS 선택자로 태그 선택하기(id 선택) - querySelector('#name')document.querySelector('#name')▲ querySelector 메소드의 파라미터로 CSS 선택자를 문자열로 전달해 준다. // css 선택자로 태그 선택하기const myTag = document.querySelector('#myNumber'); // = getElementById('myNumber')console.log(myTag);▲ 그리고 CSS 선택자로 id 선택은 #을 사용하므로 문자열의 소괄호 안에 넣어주고변수에 담아준 다음 콘솔에 출력하면 다음과 같이 결과가 나온다.▼이렇게 myNumber라는 id값을 가진 태그가 출력되었는데결국 querySelector('#myNumber')는 get..

어떤 태그를 움직이거나 사용자의 마우스를 클릭에 반응하도록 하기위해선먼저 본인이 다루고자 하는 태그를 선택해야한다.자바스크립트로 본인이 원하는 태그를 선택하는 방법은 여러가지있는데,한번 id 속성을 통해 HTML 태그를 선택해보자 id로 태그 선택하기 - document.getElementById기본 문법은 다음과 같다▼document.getElementById() 자바스크립트를 배울 때 가장 많이 사용 했던 console.log 처럼 그냥 미리 만들어져있는 document 라는 객체의 getElementById 메소드를 사용한다.메소드 이름 그대로 id 속성을 통해서 어떠한 요소를 가져오겠다는 의미이다. 그래서 이 메소드의 파리미터로 우리가 접근하고자 하는 태그의 id 값을 문자열로 전달해 주게 되면 ..

Storage• 데이터를 영속적으로 저장하거나 아니면 영속적으로 저장된 데이터를 가져와 애플리케이션에서 이용하는것은 애플리케이션에서 가장 기초적면서 가장 빈번하게 작성되는 것 중 하나이다. 백앤드 애플리케이션에서는 영속적인 데이터 저장을 위해 대부분 데이터베이스를 이용하며오라클, SQL Server, MySQL, MariaDB 부터 클라우드에서 제공하는 데이터베이스까지 많은 데이터베이스들이 있으며 이를 이용해 데이터를 영속적으로 저장해 사용한다.브라우저에서 데이터를 영속적으로 저장할 수 있는 방법을 제공해야 하고 프런트 자바스크립트에서 WebAPI 를 이용해 프로그램을 작성해 데이터를 영속화 시켜야 한다. 프런트 웹 애플리케이션에서 데이터 영속적 저장을 위해 사용되는 Web API 는 크게 스토리지와In..

Ajax• Ajax 는 서버 연동을 위한 자바스크립트 프로그램이다.Asynchronous Javascript XML 의 약어이며 비동기 서버 연동을 위해 제공되는 기술이며브라우저에서 서버에 네트워크 통신을 할 때 Ajax 를 제외한 모든 통신은 동기 통신이다.화면에 링크가 있고 그 링크를 사용자가 클릭해서 서버와 통신하는 경우, 화면에 버튼이 있고 그 버튼을 클릭해 서버와 통신하는 경우 등 대부분의 통신은 동기적 통신이며동기 통신이란 브라우저에서 서버에 요청(request)을 보내면 서버에서 응답(response) 할 때까지 브라우저는 대기상태가 된다는 의미이다.• 서버에 요청을 보내게 되면 브라우저는 이 요청을 동기적으로 처리하게 됨으로 응답이 올때까지 대기하게되며 이로 인해 사용자는 브라우저를 이용할..