// 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 ..
JSON과 XML은 데이터를 표현하고 전송하기 위해 사용하는 두 가지 형식이다.1. XMLXML은 데이터를 저장하고 전달할 목적으로 만들어졌으며, 저장되는 데이터의 구조를 기술하기 위한 언어이며 EXtensible Markup Language의 약자이다. - XML은 다른 목적의 마크업 언어를 만드는 데 사용되는 다목적 마크업 언어- XML은 다른 시스템끼리 다양한 종류의 데이터를 손쉽게 교환할 수 있도록 해준다.- XML은 새로운 태그를 만들어 추가해도 계속해서 동작하므로, 확장성이 좋다. - XML은 데이터를 보여주지 않고, 데이터를 전달하고 저장하는 것만을 목적으로 한다.- XML은 텍스트 데이터 형식의 언어로 모든 XML 문서는 유니코드 문자로만 이루어진다.XML 기반의 언어 XHTML, SVG,..
브라우저 위에서 동작하는 웹사이트나 웹 어플리케이션과 같은 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..
블로그 꾸미기 하면서 간단한 뮤직 플레이어를 만들었다. 음악이 재생 중일 때만 현재 플레이중인 음악 정보를 표시하는 코드 어떻게 짰는지 간단히 올려 본다. 플레이 버튼을 누르기 전까지는 `Title` 과 `Progress Bar` 이 숨겨져 있다가 곡이 재생되면 제목과 프로그레스바가 플레이어 위로 부드럽게 나타나는 코드이다. ⚡ music-info 클래스 CSS 코드음악 재생 전(기본상태).music-body .music-container .music-info { opacity: 0; /* 투명도 100%로 화면에서숨겨짐 */ transform: translateY(100%); /* (수직 방향) 자기 자신 높이만큼 아래로 이동 */ transition: transform 0.3s ease-in..
[자바스크립트] 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..
깃허브에 올려야 하는데 귀찮아서 일단 블로그에 먼저 포스팅 1. 시작 2. 몇 명이 참가할 지 선택 prompt3. 참가자 순서 number4. 제시어 저장할 변수 word5. 입력한 단어를 저장할 변수 newWord input 이벤트로 단어 입력 -> 입력 버튼 클릭 -> 입력 단어 newWord에 저장 판단1_제시어가 비어 있는가?판단2_입력한 단어가 올바른 단어인가? (앞 단어의 마지막 글자랑 일치하는가)판단1판단2결과제시어가 비어있음단어가 올바르다입력한 단어가 제시어제시어가 비어있음단어가 올바르지 않다입력한 단어가 제시어제시어가 비어있지 않음단어가 올바르다입력한 단어가 제시어제시어가 비어있지 않음단어가 올바르지 않다올바른 단어 입력하라고 알림창 띄우기 No -> alert('올바른 단어 입력')Y..
✅ Windows10 자바스크립트로 만든 팝업창 무한 로딩 현상(Internet Explore) Internet explore > 속성 > 고급 > 관리자 권한으로 실행 체크 ✅ 자바스크립트 무한 팝업- 팝업코드가 함수의 재귀 호출이나 - while, for 등의 loop 안에 있는 경우, 조건이 종료되지 않으면 무한히 팝업이 반복- 잘못 설정된 EventListener 이 무한히 트리거되면서 팝업이 계속 뜰 가능성- setInterval 타이머 문제- 브라우저 새로고침 문제 window.onload 또는 DOMContentLoaded 재귀호출function showPopup() { alert("This is a popup"); showPopup(); // 무한 재귀 호출로 인해 팝업이 계속..
