내운연 주식회사

∮ AJAX가 뭘까 여기서 ajax는 네덜란드의 축구팀 아약스를 말하는 것이 아니라, 프로그래밍 할때 쓰는 애잭스를 말하는 것이다. 인스타그램에서 게시물에 좋아요를 누르거나, 유투브에서 구독 버튼을 누를때를 잘 생각해 보면 누르는 즉시 페이지 업데이트 없이 내가 수정한 내용이 반영된다. 만약 이런 동작을 할 때마다 페이지가 업데이트 된다면 사용자 입장에서는 데이터 소모도 많아질 뿐더러, 동작을 수행하기 매우 귀찮아질 것이다. 이런 불편을 해결하기 위한 방법이 ajax이다. ajax를 사용하면 내가 수행하는 동작에 대한 변화가 새로고침 없이 바로 페이지에 반영이 되고(좋아요, 구독 누르기 등), 이 내역은 페이지를 수동으로 새로고침한 뒤에도 남아있게 된다. ∮ AJAX의 기본 개념 어떻게 하는 것일까? 생..

환 codes web/JS(JavaScript) 2021. 1. 23. 15:15

0. 자바스크립트 응용 - 이벤트 구현 아래 링크는 자바스크립트를 이용해서 DOM 조작 연습을 하기 좋은 페이지이다. 피로그래밍에서 연사님이 준비해 오신 페이지인데, 도움이 많이 된 것 같아서 가져왔다. Document DOM 단일 객체 탐색 • querySelector 제목입니다. 본문입니다. 푸터입니다. 버튼입니다. const title = document.querySelector('#title') console.log('id로 선택', title) const content = document.querySelector('.content') console.log( choiteemo.pythonanywhere.com 링크에 처음 들어가서 자바스크립트를 조작하기 위해서는 .js파일을 건드릴수도 있지만, 개..

환 codes web/JS(JavaScript) 2021. 1. 23. 10:56

앞서 배운 자바스크립트의 기본 문법에 이어서, 이번 세션에서는 1. 자바스크립트의 DOM에 대한 개념과, 2. 자바스크립트에서 직접 요소를 선택해서 html컨텐츠를 조작하는 방법, 그리고 3. 자바스크립트를 이용한 간단한 웹 게임 만들기를 다룬다. 1. 자바스크립트와 DOM DOM은 Document Object Model의 줄임말이다. 자바스크립트에서 DOM은 문서 내용을 나타내고 조작하게 하는 역할을 한다. 추가로, html의 텍스트를 각각의 객체로 만들고 이들 객체를 부모자식 관계로 표현할 수 있는 트리 구조로 구성한 것이 DOM이다. 트리 구조에 대해서는 아래 사진을 참고하면 이해하기 쉽다. € 문서 노드(document node)는 트리의 최상위 시작점으로, 말 그대로 문서 자체를 의미한다. € ..

환 codes web/JS(JavaScript) 2021. 1. 13. 09:18

0. 우선, 자바스크립트는 자바와 전혀 다른 언어이다. 흔히들 이 둘관의 관계를 인도와 인도네시아에 비유하곤 한다. 1. 웹코딩을 하는데 자바스크립트가 왜 필요한가? 1. HTML과 CSS를 코드의 수정 없이 바꿔서 사용자에게 화면이 바뀌는 효과를 주기 위해서 2. 웹페이지에서의 이벤트(클릭, 스크롤 등)을 인식하고 입력받기 위해서 3. AJAX 기술을 이용한 웹 서버와의 통신 모두가 웹을 만들기 위해서 꼭 필요한 기능들이다. 2. 자바스크립트를 어떻게 적용하는가? 기본적으로 .js파일을 새롭게 만들어서 html파일에 css를 적용시키는 것처럼 태그로 감싸서 같이 넣어준다. 그러면 이제 html의 어디에 script태그를 넣어야 하는지에 대해 궁금증이 생길 수 있는데, ㄱ. 크게 head태그에 넣는 방법..

환 codes web/JS(JavaScript) 2021. 1. 12. 23:57