728x90

제이쿼리 5

웹개발 종합반 2주차 (2-12) : api 활용 - 실시간 환율 달기

과제 : 1주 차에 만들었던 원페이지 쇼핑몰에 환율정보 추가하기. *강의에서 제공되는 코드 스니펫 2개 활용. (api 링크, 로딩 되자마자 호출하는 ajax 코드.) 5주 차에 서버 사서 올리는 것까지 끝낸 폴더라서 이것저것 있지만 다 무시하고 복습 파일로 진행! homework > index.html 로 작업했었고 (복습 파일 명은 fake_index.html) 스크립트 태그 자체가 없으니 만들고 그 안에 로딩과 동시에 불러오는 코드 태그 안에 붙여넣고 시작. $(document). ready(function( ){ }) *괄호 짝 주의 $(document).ready(function(){ alert('로딩 완료!') }); 예시 이미지. 브라우저 열어서 아까 연결한 alert 잘 뜨는 거 확인하고 ..

웹개발 종합반 2주차 (2-11) : Ajax 연습 - 랜덤 고양이

frontend 폴더에 02_ajaxquiz03.html 파일 생성. 내용 지우고 골격 붙여넣기. [예제] 고양이 api , 완성 예시 페이지 참고해서 만들기. Hint : 구글 검색 - jQuery 이미지태그 src 바꾸기 (분명 힌트를 줬지만 ㅋㅋㅋ복습이랍시고 검색 안 하고 혼자 해보다 무한 물음표 지옥에 빠져있다. 근데 그게 즐거운 estj ..^^) 일단 api 부터 열어보기. 새로고침 할 때마다 주소가 바뀌고 list[ { dictionary} ] 구조로 되어있다. 이제 html 전체 코드 위에서부터 보기.. 그런데 css에 처음 보는 게..(견딜수 없음) 인간은 모르는 걸 보면 본능적으로 불편합니다. ( 이고잉님 말씀 음성지원 ㅋㅋㅋㅋ) type 이건 뭐고.. 왜 신경쓰이게 줄이 그어져있으며...

웹개발 종합반 2주차 (2-6) : JQuery 연습 퀴즈 3개

연습용 html 파일 생성. 02_jquery 이미 있으니 복습용으로 _review 붙여서 만들었다. 내용 다 지우고 기본 골격 붙여넣고 시작, Quiz. 완성 페이지를 참고해서 기능 구현하기. 원본 퀴즈 페이지 단순하게 내용 편집 후, 문제 풀이 시작! 원래는 이름 붙이는 건데 끝말잇기로 만들면 재밌을 것 같아서 바꿔봤다. 1번 문제 빈칸에 입력한 값을 가져와서 담을 변수를 정해야하는데 let $('#아이디').val() = 'content' 라고 해서 막혔다. 정답은 반대로 입력해야 함. 변수를 선언하는 거니까 변수 이름 먼저! let content = $('#아이디').val(); let 변수이름 = 가져올 값 2번 문제 힌트에 includes 사용하라는데 .includes 로 썼던 것 같아 기억나..

웹개발 종합반 2주차 (2-5) : JQuery 적용 (여닫기 버튼)

[포스팅 박스 여닫기 버튼 구현] 스크립트에서 연습했던 hey( ) 삭제. (홀짝 함수) 포스팅 박스 열기 버튼에 적용된 onclick = "hey( )" 도 이름 변경. ( open_close) alert로 연결 확인. 기억에 의존해서 한 번 짜 본 코드. 작동 x if문부터 이미.. 불가능을 직감했지만 그냥 막 써봤다. *제이쿼리는 자바스크립트의 일종 (라이브러리)이므로 스크립트 태그 안에서 활용할 수 있다. 오답 주석처리해두고 내용 입력. let status = $('#posting_box'). css('display'); console.log(status); 콘솔 창 열고 버튼 누르면 display 값인 block이 찍힌다. 완성본. if 조건문 전에 let으로 박스의 display 상태를 나타낼..

웹개발 종합반 2주차 (2-4) : JQuery 기초 연습 - $(' # id ').함수( );

라이브러리 쓸 때 가장 먼저 할 일은 import! ▼ w3schools 의 jQuery 카테고리 ▼ https://www.w3schools.com/jquery/jquery_get_started.asp Google CDN 을 복사해서 head 태그 안에 붙여 넣으면 되는데... 부트스트랩에서 import 했던 코드를 보면 같은 내용이 이미 있다. (동적인 부분이 css에 포함되어있기 때문) 지금은 다른 과제를 하느라 있지만, 없는 경우에는 위 방법으로 import 해야한다. CSS에서 대상을 꾸밀 때, class로 이름 붙이고 명령 했듯이 class = " 이름" JQuery에서는 id를 부여하고 명령한다. id = "이름" 이메일 입력하는 칸 Elements 창을 켜고, 해당 부분 확인 /* 원하는 이..

728x90