우주바다 개발일지

과제 : 나만의 메모장 카드들에 들어갈 데이터를 불러오는 api 적용하기. frontend > index.html 파일로 작업 (나만의 링크 메모장) *코드 스니펫 1. api 2. 로딩 후 바로 실행 $(document).ready(function () { listing(); }); function listing() { console.log('실행확인'); } 로딩 후 바로 실행하는 코드 붙여 넣고 콘솔 창에서 연결 확인. console.log 대신 ajax 기본 코드. $(document).ready(function () { listing(); }); function listing() { $.ajax({ type: "GET", url: "http://spartacodingclub.shop/post",..

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

지난번 연습과 비슷한 내용 혼자 풀어보기. 서울시 따릉이 오픈 api (공공데이터)를 이용해서 실시간 업데이트 버튼 기능 만들기. frontend 폴더에 02_ajaxquiz02.html 파일 생성, 기본 골격 붙여 넣고 시작! 과제 내용 : - 표(table) 모양으로 붙여주고, - 주차된 자전거 수가 5 이하면 붉은색으로 표시. 필요한 값 3가지 console.log 부터 차근차근. 한 번 오류났었는데 살펴보니 bike 뒤에 [i] 붙이는거 빼먹었다. 반복문 안에서 선언할 때, 여러 값을 불러올거니까 [i]. 주의 표 내용 부분 복사해서 temp_data로 만들고, .append 붙이기 (콘솔로 테스트) 잘 되면, 맨 위에 empty( ) 추가. 마지막으로 붉은 글씨는 .low-stock { colo..

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

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

라이브러리 쓸 때 가장 먼저 할 일은 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 창을 켜고, 해당 부분 확인 /* 원하는 이..

CSS에 부트스트랩이 있다면 JavaScript에는 JQuery가 있다. 쉽게 가져다 쓸 수 있는 오픈소스 자바스크립트 라이브러리. *부트스트랩과 마찬가지로 상단에 import 해야 사용할 수 있다. * 길게 써야하는 코드를 짧고 직관적으로 쓸 수 있게 해준다.

파이참에서 frontend 폴더 open. 나만의 메모장(index.html) 열기. Q. 버튼 누른 횟수에 따라 홀/짝수를 alert 하는 함수 만들기. ( 포스팅박스 열기 버튼에) A. 먼저 함수 바깥에 변수를 1로 선언. (함수 안에서 선언하면 클릭할 때마다 다시 처음부터 실행하면서 1이 됨) (계속 홀수만 나옴) 함수 안에 조건문 넣기. 2로 나눴을 때 나머지가 0이면 짝수, 아니면 홀수. 누르는 순간 1을 2로 나눈 나머지가 1이므로 홀수입니다! alert. +1 하면서 2가 되고 끝. 한 번 더 누르면 2를 2로 나눈 나머지가 0이므로 짝수입니다! alert. +1 되면서 3이 되고 끝. 한 번 더 누르면 3을 2로 나눈 나머지가 1이므로~~~의 반복. let count = 1; functio..

예제 1) 서울시 미세먼지 콘솔 창에 코드 스니펫(서울시 미세먼지) 붙여 넣고 엔터. mise_list 불러보면 리스트 안에 딕셔너리가 25개 들어있는 구조. 딕셔너리를 순서대로 출력하려면 반복문 사용. for (let i = 0; i 0번부터 25번까지. 화살표 위 키로 반복문 다시 불러오기. 딕셔너리 하나를 열어 키 -밸류 구성 확인, console.log로 구 이름과 미세먼지 값만 반복해서 찍어보기. * 더블 클릭하면 그 영역만 선택됨. *선택된 부분을 클릭-드래그해서 옮기기 가능. 제대로 ..

자바스크립트 : 브라우저가 알아들을 수 있는 유일한 프로그래밍 언어. head 태그 안에 를 만들어 사용. 파이썬 등 다른 언어로 만드는 것도 가능하겠지만, 사용하지 않는다. 웹의 등장과 함께 최초의 언어로 쓰이며 표준으로 굳어졌기 때문. 관습적으로 css 밑에, 아래 형식으로만든다. function 이름( ){ 명령할 내용; } 안녕이라는 경고창을 띄우는 함수를 만들었다. 이름은 hey() 이걸 저장 버튼에 적용 태그 안에 onclick = "hey()" 입력. *onclick: 클릭했을 때 " "안의 내용을 실행함. 개발자 도구 - 콘솔 창에서 함수 이름을 입력, 엔터 누르면 실행된다. 파이참만 쓰는 것 보다 편리하고 빠르니 활용하기. 영역을 클릭하면 해당하는 코드로 바로 이동할 수 있고 명령이 잘 ..