본문 바로가기

분류 전체보기126

9. Ajax Ajax(Asynchronous JavaScript and XML): 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 웹 개발 기법 *Ajax는 JQuery를 import한 페이지에서만 동작한다. $.ajax({ type: "GET", url: "여기에URL을입력", data: {}, success: function(response){ console.log(response) } }) 메모메모 페이지에서 개발자도구(F12)를 열어주고, 위의 ajax를 작성 URL 입력 부분에 미세먼지 OpenAPI URL를 붙여 넣어준다. http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 response에서 ['R.. 2021. 8. 25.
8. 포스팅박스 열고 닫는 기능 추가하기 자바 스크립트 함수로 포스팅박스를 여닫는 기능을 추가해보자. 1. 버튼을 눌렀을 때 포스팅박스를 열고 닫을 수 있게 한다. 2. status라는 변수를 생성해서 현재 포스트박스가 보이는지 안 보이는지 판단을 해주게 된다. 3. 포스트박스가 열려있는 상태라면 block이 반환되므로, 4. 현재 status가 block이라면 버튼을 눌렀을 때 포스트박스를 닫아야 하기 때문에 hide()를 사용 5. 그게 아니라면 버튼을 눌렀을 때 포스트박스를 열어야 하기 때문에 show()를 사용 그리고 페이지를 들어왔을 때 포스팅박스가 닫혀있는 상태로 만들려면 posting-box css부분에 display:none;을 추가 -JQuery 연습- jQuery + Javascript의 조합을 연습하자! 1. 빈칸 체크 함수.. 2021. 8. 24.
7. JQuery jQuery: HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것, 즉 라이브러리라고 할 수 있다. 미리 작성된 Javascript 코드 이기 때문에 쓰기전에 import를 해야 한다. https://www.w3schools.com/jquery/jquery_get_started.asp jQuery Get Started jQuery Get Started Adding jQuery to Your Web Pages There are several ways to start using jQuery on your web site. You can: Download the jQuery library from jQuery.com Include jQuery from a CDN, like Google.. 2021. 8. 23.
6. 부트스트랩을 이용해서 상품페이지 틀 만들어보기 귀여운 곰 인형을 팝니다. 가격:1,0000원/개 미니소에서 팔고 있는 귀여운 곰 인형이에요. 카카오톡 선물하기에도 이렇게 생긴 곰인형이 많더라구요. 제 애착인형이에요. 주문자 이름 옵션 --옵션을 선택하세요-- 브라운 베어 허니 베어 블랙 베어 수량 --수량을 선택하세요-- 1개 2개 3개 전화번호 주문하기 결과 1. 부트스트랩 템플릿 적용 2. 이미지 주소를 넣어주고 margin과 width를 조절함 3. 상품명을 적어주고, 옆에 가격을 적어주는데 가격은 글자 크기를 줄여야 하므로 을 이용한다. 4. 부트스트랩에서 적절한 코드를 찾아와 복붙해준다. 5. 자바스크립트를 이용해서 주문하기 버튼을 누르면 주문이 완료되었다는 알림창이 나타나게 한다. -> 자바스크립트 함수를 만들어서 버튼 클래스 앞에 onc.. 2021. 8. 22.

티스토리툴바