본문 바로가기
반응형

JavaScript7

[JavaScript] 1000단위로 ,(콤마) 찍기 웹페이지를 만들던 도중 천, 만 단위의 수치들을 천 단위로 콤마를 찍어주기로 하였다. ■ toLocaleString() 함수 여러가지 천 단위로 콤마를 찍는 경우(정규식)도 있었지만 가장 간단한 toLocaleString() 함수를 사용하였다. number.toLocaleString('ko-KR') 주의할 점은 함수의 앞 변수는 number 타입을 가져야한다! 미리 문자열 변수들을 정수 또는 실수(소수점을 가진)로 바꿔준다. var iTOTAL_PP = parseInt(o.AA); // 161295 var iTOTAL_SHIP = parseInt(o.BB); // 144450 var iTOTAL_BULK = parseInt(o.CC); // 3009.53 toLocaleString() 함수를 적용해 주었.. 2023. 3. 9.
REST API 개념과 예제 * 본 포스팅은 나동빈 - 이코테 2021 강의 몰아보기 에서 학습한 내용을 포스팅합니다. 출처 동빈나 이코테 ■ 서버와 클라이언트 클라이언트가 요청(Request)을 보내면 서버가 응답(Response)한다. ■ 클라이언트(Client) = 고객 서버로 요청(Request)을 보내고 응답(Response)이 도착할 때까지 기다린다. 서버로부터 응답을 받은 뒤에는 서버의 응답을 화면에 출력한다. 예시 1) 웹 브라우저 : 서버로부터 받은 HTML, CSS 코드를 화면에 적절한 형태로 출력한다. 예시 2) 게임 앱 : 서버로부터 받은 경험치, 친구 귓속말 정보 등을 화면에 적절한 형태로 출력한다. ■ 서버(Server) = 서비스 제공자 클라이언트로부터 받은 요청(Request)을 처리해 응답(Respon.. 2023. 2. 24.
[JavaScript] Template literals(`백틱) 그리고 JSP ■ Template literals 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 이중 따옴표나 작은 따옴표 대신 백틱(` `)(grave accent)을 이용한다. 플레이스 홀더를 이용하여 표현식에 넣을 수 있다. ( $ {expression} ) ■ Syntax `string text` `string text line 1 string text line 2` `string text ${expression} string text` tag `string text ${expression} string text` ■ Expression interpolation(표현식 삽입법) 표현식(expression)을 일반 문자열(normal strings)에 삽입하기 위해서 다음의 문법을 사용할 수 있다... 2023. 2. 22.
[JavaScript] 2020년도 지방기능경기대회 과제(웹디자인 및 개발) 공부하기4 * 본 포스팅은 필자가 개인적으로 학습한 내용정리 및 리뷰를 위해 포스팅합니다. // 구매하기 버튼 눌렀을 시 동작 $("#buy_btn").on("click", function () { $(".black-bg").addClass("show-modal"); }); ▲ 구매하기 버튼을 눌렀을 시 black-bg div에 show-modal 클래스 추가 .black-bg, .canvas-bg { width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, 0.5); z-index: 6; padding: 30px; visibility: hidden; opacity: 0; transition: all 0.5s; } ▲ 모달창 배경에 관한 CSS ... 2023. 1. 27.
[JavaScript] 2020년도 지방기능경기대회 과제(웹디자인 및 개발) 공부하기3 * 본 포스팅은 필자가 개인적으로 학습한 내용정리 및 리뷰를 위해 포스팅합니다. // 드래그 받는 곳 함수 function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); // data = 끌고오는 객체의 아이디 // 여기서 ev.target = drag-point 상자 ev.target.append(document.getElementById(parseInt(data) + 4)); $(`#${parseInt(data) + 4}`).css("display", "inline-block"); //장바구니 내의 객체 보이게하기 var childrens = $(".drag-point").children(); //drag-poi.. 2023. 1. 26.
[JavaScript] 2020년도 지방기능경기대회 과제(웹디자인 및 개발) 공부하기2 * 본 포스팅은 필자가 개인적으로 학습한 내용정리 및 리뷰를 위해 포스팅합니다. { "products": [ { "id": 0, "title": "식기세척기", "brand": "세척나라", "photo": "pr1.jpg", "price": 10000 }, { "id": 1, "title": "원목 침대 프레임", "brand": "침대나라", "photo": "pr2.jpg", "price": 20000 }, { "id": 2, "title": "천연 디퓨저 세트", "brand": "향기나라", "photo": "pr3.jpg", "price": 30000 }, { "id": 3, "title": "시원한 서큘레이터", "brand": "바람나라", "photo": "pr4.jpg", "price".. 2023. 1. 20.
반응형

티스토리툴바