📚 Study/JS, JQuery

동기방식 vs 비동기방식, 콜백함수와 Promise 까지 한번에 훑어보기!

데이터 처리 모델의 방식 :: 동기방식 vs 비동기방식 동기방식 순차적으로 동작하는 방식 요청을 보낸 후 해당 응답을 받아야 다음 동작을 실행하며 이 동작이 끝날때까지 다음 동작은 대기상태이다. 위 그럼 a처럼 카페에서 줄을 서서 커피를 받는 방식으로 비유하는데, 한 동작이 끝날때까지 기다리기 때문에 동작이 느리다는 느낌을 받을 수 있다. 이것은 실제 CPU가 느려지는 것은 아니지만 시스템 전체적인 효율이 저하된다고 볼 수 있다. 설계가 간단하고 직관적이라는 장점을 가지지만, 결과를 볼 때까지 아무것도 못하고 대기해야 한다는 단점이 있다! function func1(){ console.log("1번입니다"); func2(); } function func2(){ console.log("2번입니다"); fu..

[JavaScript] 자바스크립트 DOM (Document Obejct Model) 가볍게 이해하기 - 2

문서 객체 모델(The Document Object Model)은 웹페이지를 자유롭게 다루기 위해 웹페이지를 객체회 한 개념이고, 웹 페이지를 객체화한 각 요소요소들을 Node라고 부르고, 노드들 중에서 가장 상위 노드가 document 객체였다. 그래서 document 객체의 메소드를 활용하면 웹페이지의 상태나, 혹은 웹페이지 내의 다양한 노드에 접근할 수 있었는데 이번 포스트에서는 실제로 웹 페이지의 HTML을 자유롭게 다루는 메서드와 프로퍼티에 대해서 좀 더 정리해보고자 한다. 노드 생성하기 1. Html tag 노드 생성하기 (createElement 메서드) // document.createElement(tagName); const divElement = document.createElement..

[JavaScript] 자바스크립트 DOM (Document Obejct Model) 가볍게 이해하기 - 1

자바스크립트로 웹 페이지 좀 더 자유롭게 다루려면 DOM에 대한 이해가 필요하다. 문서 객체 모델 (DOM) 문서 객체 모델(Document Object Model, DOM)은 말 그대로 웹 페이지 내의 모든 콘텐츠를 객체로 나타내 주는 것이다. 그래서 간단하게 생각하면 웹 페이지를 document라고 부르고, document를 자유롭게 다루기 위해서 객체화 하고자 구현된 개념이 결국이 DOM이라고 생각할 수 있겠다. 그리고 HTML 태그와 글자, 속성 등 document의 담겨있는 모든 요소들을 하나하나를 객체화 한 단위를 가리켜 노드(Node)라고 부른다. 아무튼, 결국 DOM은 웹 페이지를 객체화 한 개념이고, 이 웹페이지의 가장 상단 진입점이 바로 document 객체이다. document 객체는..

[니코]# 8 WEATHER

8.0 Geolocation navigator.geolocation.getCurrentPosition() 이걸 부르면 브라우저에서 위치 좌표를 줄거다. WIFI, 위치, GPS JavaScript가 더많은 정보들을 줄거다 JS가 user의 위치를 전달해 줄거다. 코드 10줄로 user의 위치를 알 수 있음 8.1 Weather API 기본적으로 API는 다른 서버와 이야기할 수 있는 방법이다. 이 URL에서 정보를 응답할 거다. URL에서 가져오는 방법을 알아 볼거다. fetch를 사용해서 URL을 얻을 거다. 실제로 URL에 갈 필요 없이 JavaScript가 대신 URL 을 부를 거다. weather 전체 코드

[니코] # 7 TO DO LIST

7.0 Set up 7.1 Adding ToDos li.appendChild를 해서 li안에 span을 만듬 toDoList에 li요소를 추가함 greetings 섹션과 비슷한 걸 한거임 class에 뭐 추가하는 그런 기능들 7.2 Deleting To Dos button이 click event를 기다리고 있어야 한다. button이 클릭 된걸 인지는 하는데 어떤 li를 제거해야 되는 지를 알지 못한다. mouse클릭 좌표로 하기엔 너무 길다 path 를 이용 li를 찾는다 parentNode, parentElement를 tartget은 클릭된 HTML element 이다. 모든 HTML element에는 하나 이상의 property가 있다. parentElement는 클릭된 element의 부모이다. ..

[니코]#6 QUOTES AND BACKGROUND(명언 가져오기)

6.0 Quotes 작가는 밑에, 명언은 위에 Math.floor random 밑에quote가 아닌 author임 6.1 Background createElement 요소를 JS 로 HTML에 요소를 만든가.

[니코] #5 clock

시계 만들기 5.0 Intervals Interval은 ‘매번’일어나야 하는 무언가를 말한다. 하고싶은 거는 이 함수를 매 2초마다 실행하는 것이다. Javascript는 이미 그 개념을 내장하고 있다. 이런 기능을 제공하는 tool이 바로 setInterval()이다. setInterval은 두 개의 argument를 받는다. 첫번째 argument는 네가 실행하고자 하는 function이다 두번째 argument는 호출되는 function간격을 몇 ms(mileseconds) 로 할지 쓴다. setInterval(syhello, 5000) 매 5000ms 마다 호출 즉 5초마다 호출한다. function을 몇초마다 실행하는 방법 (Interval) 5.1 Timeouts and Dates setTim..

[니코] #4 로그인

4.0 Input Values 더 짧게 코딩한거 3줄 →2줄 첫 번째로 HTML에서 form을 찾고 있다. document.getElementById를 통해서 JS가 이걸 찾았다면 loginForm은 HTML 내에 있는 element라는 뜻이다. → 이 element를 JS로 끌고 왔다. 4.1 Form Submission HTML자체적으로 maxlength조절할 수 있어서 js에서는 안해두된다 html에서 할수 있는 거는 html로 div로 받으면 새로 고침해도 똑같이 유지가 되나 div 대신 form으로 받으면 자동으로 새로고침 되어 없어진다 form은 새로 고침되는 이유는form이 submit되고 있기 때문이다. 이 순간에 우리는 브라우저가 새로고침하지 않고 user 정보를 저장하도록 하고 싶은거다..

[니코] #3 JAVASCRIPT ON THE BROWSER

javascript가 어떻게 HTML과 상호작용하는지를 배우게 된다 3.0 The Document Object HTML은 접착제 같은거다. JavaScript를 사용하는 이유는, HTML과 상호작용하기 위해서 즉 HTML의 Element들을 JavaScript를 통해 변경하고 읽을 수 있기 때문이다. document는 브라우저에 이미 존재하는 object이다. HTML 코드를 JavaScript관점을 통해서 보고 있다. document의 object의 property들을 알아보는 것도 좋을 것 같다. 존나 쉽다 JavsScipt는 이미 HTML과 이미 연결되어있다. console.dir(document) -> object의 모든 property들을 볼 수 있다. JavaScript로 HTML을 변경한다...

[니코]#2 WELCOME TO JAVASCRIPT

javascript 2.1 두가지 데이터 타입 값 2+2 문자열 “hi”+”hello” 2.2 변수 게으르게 코딩 하게 만들기 위해서 변수를 사용한다 console.log(5+2) console.log(a+b) 출력 const a = 5 ; (변수 선언) 바뀌지않음 python 변수 선언 방식 very_Long js veryLongVariable 이런식 2.3 const and let 자바스크립트에서 변수 선언하는 방식은 두가지가 있다. const는 constant(상수)라는 것이고 constant는 값이 바뀔 수 없다. let은 선언하고 밑에가서 다시 선언하면서 값이 바뀔 수 있음 ex> let myName = “gigi” (letx)가능 myName = “ncicj” 바뀔 수 있다. 기본적으로 con..