우주바다 개발일지

클라이언트와 서버는 api를 통해 json 형식의 데이터를 주고받는다. API (Application Programming Interface) (응용 프로그램 프로그래밍 인터페이스) : 컴퓨터나 컴퓨터 프로그램 사이의 연결. 컴퓨터와 인간을 연결하는 사용자 인터페이스(UI)와 반대로, API는 컴퓨터나 소프트웨어를 서로 연결한다. JavaScript Object Notation. 호환성, 용량 등 장점이 많아 데이터 형식 중 가장 보편적으로 쓰인다. 서울시 미세먼지 Open API (실시간) http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 서버에서 클라이언트로 보내는 제이슨 데이터를 볼 수 있는..

연습용 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..

과제는 homework 폴더 안에서 진행. homework 폴더 열기 그 안에 index.html 파일 만들어서 시작 템플릿 붙여 넣고 시작. *과제 내용 ▼부트스트랩 홈페이지▼ 참고해서 예시 이미지처럼 레이아웃 만들고 주문하기 버튼 누르면 '주문이 완료되었습니다.' alert 하기. https://getbootstrap.com/docs/4.0/components/alerts/ *이미지 : div로 영역 만들고 background에 이미지 씌워도 되고, img 태그만 사용해도 됨. *주문하기 버튼처럼 text 속성을 가진 컴포넌트 가운데 정렬: 가로 길이 설정 , margin: auto; 해서 안되면 display : block ;으로 설정할 것. img 태그로 한 것과 / div 태그로..

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

cf. 수학에서의 함수: 값을 넣으면 해당하는 결과 값이 나옴. *프로그래밍에서 함수: 부르면 정해진 일을 실행함. *개발자 도구 콘솔 : { }로 조건 입력할 때 처럼, 명령 없이 다음 줄로 넘어가려면 shift + enter 자바스크립트는 변수, 자료형, 함수, 조건문, 반복문 5가지만 알고 있어도 기본적인 로직 구현 가능. [3] 함수 (이어서) : *만들기 (선언) function 함수이름(필요한 변수들) { 내릴 명령 내용을 순차적으로 작성 } *사용하기 함수이름(필요한 변수들); ex 1) 더하는 함수 만들기 function sum(num1, num2) { return num1 + num2; } : sum 이라는 이름의 함수는 num1 과 num2를 가지고, 두 값을 더한 값으로 반환(retu..

*개발자 도구 콘솔 : 검사를 열었던 브라우저 페이지 새로고침 하면 초기화. clear console 버튼만으로는 화면만 지워지고, 정의했던 정보가 남아있음. : 화살표 위 키 : 전에 적었던 것 불러오기 자바스크립트는 변수, 자료형, 함수, 조건문, 반복문 5가지만 알고 있어도 기본적인 로직 구현 가능. [1] 변수(variable) : 변하는 값. 알파벳 또는 문자 안에 숫자나 '문자'를 담을 수 있다. 변수가 아니라 문자로 쓸 때는 '' 또는 ""를 붙여야 인식 가능. a, b, c... 보다는 모두가 알아보기 쉽도록 ex 2) 처럼 단어로 쓰는 것이 좋다. ex 1) let a = 2 (a를 2라고 정의(선언)한다.) a + 3 = 5 a = 5 (a를 5로 재정의) a + 3 = 8 ex 2) ..