My Tech Blog (JavaScript)

// JSON 데이터 다루기 위한 JS 사용법// [1] : 데이터 const person = [ `{"name":"이순신","age":20,"nationality":"대한민국"}`, {"name":"맥아더","age":30,"nationality":"미국"}, {"name":"엘리자베스","age":40,"nationality":"영국"}, {"name":"잔다르크","age":50,"nationality":"프랑스"},]; console.log(typeof person); // objectconsole.log(typeof person[0]); // stringconsole.log(typeof person[1]); // object 첫번째 요소를 작은 따옴표로 감싸면 string ..

브라우저 위에서 동작하는 웹사이트나 웹 어플리케이션과 같은 Client들이 어떻게 Server와 통신할 수 있을까? 1. HTTP(Hypertext Transfer Protocal)Client 와 Server 이 어떻게 Hypertext를 주고 받을 수 있을 지 규약한 프로토콜Client가 Server에게 데이터를 request하면, Server는 그에 맞는 response를 Client로 보냄 2. AJAX(Asynchronous JavaScript And XML)웹페이지에서 동적으로 서버에게 데이터를 주고 받을 수 있는 기술대표적인 예로는 브라우저API에서 제공하는 XMLHttpRequest(XHR) 오브젝트가 있다.혹은 fecth() API로 간편하게 데이터를 주고받을 수 있다.  3. XMLhtm..

[자바스크립트] html/css/js로 계산기 만들기 제1탄자바스크립트로 간단하게 계산기 만들어 보기 ㅎㅎㅎ 깃허브에 올려야 하는데 깃허브 한 번 정리하고 손봐야 되서 그냥 블로그에 올린다.나중에 전체 소스만 깃허브로 보내기 1. 버튼 16개 만awesomepossum.tistory.com 여기서 손을 좀 대겠습니다 ㅎㅎㅎ기능 추가랑 계산기 색상 추가  1. 숫자 지울 수 있는 backspace 버튼2. 그리고 다중 계산을 위해 숫자와 연산자 입력을 이어서 받을 수 있도록 로직 개선.3. 계산기에 색상 입히기 1. backspace 기능 추가 버튼을 어디다 넣을까 div 태그 한 줄 더 써서 추가할까 하다가 그냥 첫번째 row에 집어 넣어주기로 함...    7    8    9    +    ← 스크립..

자바스크립트로 간단하게 계산기 만들어 보기 ㅎㅎㅎ 깃허브에 올려야 하는데 깃허브 한 번 정리하고 손봐야 되서 그냥 블로그에 올린다.나중에 전체 소스만 깃허브로 보내기 1. 버튼 16개 만들기 7 8 9 + 4 5 6 - 1 2 4 / C 0 = x  여기까지 html로 버튼 16개 만들기이제 script 태그 안에 각 버튼마다 이벤트 리스너 달아줘야 함#num-0과 #num-1에 대해서만 이벤트 리스너 달아주면 이런 식으로 동작함d..

이번 포스팅에서 promise, async await의 차이점을 알아보자!1. 자바스크립트에서 비동기 처리가 필요한 이유자바스크립트에서 비동기 처리가 필요한 이유는 주로 응답 시간이 긴 작업을 효율적으로 처리하기 위함이다. 자바스크립트는 기본적으로 단일 스레드로 동작하기 때문에, 시간이 오래 걸리는 작업이 있을 경우 이를 비동기로 처리하지 않으면 전체 애플리케이션이 멈추거나 반응이 느려질 수 있다.js는 동기적인 언어이나  대기시간이 긴 작업(서버에 데이터를 요청하는 작업)을 하는 경우 비동기 작업을 하기도 한다.아래는 비동기 처리가 필요한 간단한 예시이다.getHotels()는 서버에서 호텔의 데이터를 받아오는 함수이다.그리고 우리는 getHotels()의 응답값을 받아 출력하고 싶다.function ..

📝 JavaScript ✅ 1. screen 객체screen 객체는 사용자의 모니터 정보(속성)을 제공하는 객체입니다. 예를 들어 모니터의 너비나 높이 또는 컬러 표현 bit을 반환합니다.  1-1. 기본형 screen.속성;screen.width; //모니터의 너빗값 반환 1-2. screen 객체 의 속성 종류종류설명screen.width화면의 너비값 반환screen.height화면의 높이값 반환screen.availWidth(작업 표시줄을 제외한) 화면의 너비값 반환 screen.availHeight (작업 표시줄을 제외한) 화면의 높이값 반환 screen.colorDepth사용자 모니터가 표현 가능한 컬러 bit를 반환  ✅ 2. location 객체location 객체는 사용자 브라우저와 관련..

📝 JavaScript 🖥️ 브라우저 객체브라우저에 내장된 객체를 '브라우저 객체'라고 합니다. window는 브라우저 객체의 최상위 객체이고, window 객체에는 하위 객체가 포함되어 있습니다. 즉, 계층적 구조로 이루어져 있으며 이것을 브라우저 객체 모델(BOM, Browser Object Model)이라고 합니다. ​✅ window 객체의 메서드 한눈에 보기​종류기능open("URL", "새 창 이름", "새 창 옵션")URL 페이지를 새 창으로 나타내기alert(data)경고 창을 나타내고 데이터를 보여주기사용자가 [확인] 누르면 alert() 사용한 다음 위치 코드 수행prompt("질문", "답변")질문과 답변으로 질의응답 창을 나타내기confirm("질문 내용")질문으로 확인이나 취소 ..

✅ 문제 자바스크립트에서 소수점 첫째자리에서 반올림하여 정수를 반환 받기 위해서는 Math.round() 를 사용하면 된다. 그렇다면 소수점 n째자리에서 반올림 하려면 어떻게 할까? 숫자를 특정 자릿수로 반올림하려면 toFixed() 메서드를 사용하면 된다.이 메소드는 숫자를 문자열로 반환하며, 소수점 아래 특정 자릿수까지 반올림하여 표시한다.만약 반올림된 값을 숫자로 사용하려면 parseFloat() 메서드를 사용하여 다시 숫자로 변환해 주어야 한다. ✅ 1. 소수점 n째 자리에서 반올림하기​var number = 2.15435;var roundedNumber = number.toFixed(2);console.log(roundedNumber); // 출력: "2.15" ​예를 들어, 2.15435..