My Tech Blog (Coding/JavaScript)

# 템플릿 리터럴(Template Literal)ES6부터 새로 도입된 문자열 표기법문자열 생성시 따옴표 대신, 백틱(`)을 사용var str_01 = `hello world`;//백틱 사용const x='x';const y='y';const z='z';console.log(`${x}는 x, ${y}는 y, ${z}는 z이다. `); //x는 x, y는 y, z는 z이다. ▶︎ 백틱(`)은 자바스크립트 JS ES6(ECMAScript 2015)부터 도입되었다.▶︎ 개행 문자(\n)를 사용하지 않아도 자동 줄바꿈 ▶︎ 생김새가 작은따움표(')와 비슷하니 헷갈리지 않도록 주의# 템플릿 리터럴 - 백틱(`)의 기능 줄바꿈(개행: Multi-line strings)  ▶︎ 백틱(`)으로 템플릿 리터럴을 사용하면..

// 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..

자바스크립트 이벤트 리스너 간단히 포스팅하려고 심플한 To Do List를 만들어 보았다!    1. 구글폰트, 스타일시트, 자바스크립트 연결- `style.css`와 `script.js` 연결- 구글 폰트 `Poppins`  사용하기 위해서 Embed Code를 2.  전체  적용될 css 설정 & container에 배경 추가⚡  폰트는 구글 폰트 `Poppins` 로 설정 ⚡ `box-sizing: border-box;`요소의 크기를 계산할 때 `패딩(padding)`과 `테두리(border)`까지 포함하도록 설정하는 속성. 기본적으로 CSS에서 box-sizing의 기본값은 `content-box`이다. `content-box`는 요소의 `width`와 `height`가 콘텐츠 영역..

같은색깔 카드 맞추기 메모리 게임이라고도 하고 ㅎㅎㅎ 기억력 카드게임이라고도 하는데.... 색상만 넣으면 심심하니까 과일이모지도 함 같이 넣어보겠습니다 자바 스크립트 연습 겸 시간 날 때 해 보자 ㅋㅋㅋㅋ ❌노가다 방지 협회 ❌ 카드는 12장(6쌍)만 만들자 1. 순서도draw.io로 작성했고, svg 파일로 내보내기 함. PNG나 JPEG는 해상도 설정 안하면 깨지니 주의 2. 셔플 후 카드 생성하기 자바스크립트가 아닌, CSS로 뒤집기를 해 줄것입니다.... 2-1. CSS클래스이름역할CSScard카드 전체를 감싸는 컨테이너카드 크기, 3D 시점 설정card-inner카드 요소 안에서 카드 앞,뒷면 감싸는 내부 컨테이너카드 뒤집을 때 transform: rotateY() 회전축 card-front카드..

[자바스크립트] 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..