# part1 - 웹 페이지 틀 & 메뉴 생성 게시글 앨범 할일 사진 게시글목록 head태그 부분 1. 제이쿼리 사용하기 위해 CDN 서버 연결 2. 제이쿼리 핸들바 라이브러리 사용하기 위해 연결 3. 만들어둔 css(외부파일) link 태그로 연결 body태그 부분 4. div태그로 page를 생성해 전체적인 틀을 잡아준다. 5. div태그로 page안에 header, menu, content, footer를 생성해 각 영역을 구분하고 역할을 부여한다. 6. content에는 스크립트와 핸들바+ajax를 이용해 생성한 데이터가 들어간다. 7. header에 img태그로 메인 이미지 삽입 8. menu에는 span태그를 이용해 한 줄로 각 메뉴를 출력 9. content에는 h1으로 타이..

jQuery의 $.ajax 메소드 - 비동기적(동시실행)으로 웹 서버와 통신하는 기술 - 웹 페이지의 내용을 새로 고침하지 않고도 웹 서버에서 데이터를 가져오거나 서버에 데이터를 보낼 수 있으며 웹 사이트의 사용자 경험을 향상시킬 수 있다. Json (JavaScript Object Notation) - 웹 어플리케이션에서 정보를 주고받을 때 사용하는 데이터 포맷 - 데이터를 쉽게 인코딩 & 디코딩 할 수 있어 웹 애플리케이션에서 서버와 클라이언트 간 데이터 교환 시에 많이 사용된다. Json샘플 데이터 참고 사이트 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake AP..

핸들바 (Handlebars) - 스크립트 내에서 html을 용이하게 작성할 수 있는 템플릿 엔진이다. - 코드의 재사용 및 유지 보수성을 향상시키며 jQuery와 같은 라이브러리와 함께 사용할 수 있다. #사용법 1. handlebars 라이브러리 로드 - 태그 안, 제이쿼리 cdn 아래에 해당 코드를 작성한다 2. 템플릿 정의 -핸들바를 사용할 곳에 - 핸들바 안에서의 반복문은 {{#each}}를 사용하며.(마침표)를 입력 시 전체를 반복한다는 의미이다. - 스크립트 내 배열 값을 가져올 때는 {{키네임}}으로 작성한다. (배열 키와 동일하게 넣어줌) - 반복문의 마감태그는 {{each}} ** {{키네임}} 으로 감싸진 부분이 주입되는 데이터와 바인딩되는 부분이다. ** {{#each}} {{/ea..

JQuery를 사용하려면 JQueryCDN으로 소스를 가져와야 한다. [아래 포스팅 참고] https://shinye-developmentdiary.tistory.com/8 제이쿼리(JQuery)를 사용하는 이유와 사용법 제이쿼리(JQuery)란 오픈소스 기반의 자바스크립트 라이브러리를 의미한다. 라이브러리는 SW의 구성요소 중 한 가지로 API를 바탕으로 대상 환경(플랫폼)에서 바로 실행될 수 있도록 모듈화 된 프 shinye-developmentdiary.tistory.com HTML 태그 영역 [주소입력] 이름 주소 [주소목록] CSS (html - head의 태그 안) h3{ color: rgb(6, 64, 172); } table{ border-collapse:collapse ; } td{ bo..

자바스크립트로 빙고게임 만들기 이틀차에는 자바스크립트를 이용해 빙고게임을 만들었다! 😆 ※대각선은 지원하지 않음※ 선택한 칸의 색은 노란색으로 바뀌며 가로줄과 세로줄이 모두 채워지면 빙고 = 해당 줄의 색이 분홍색으로 변한다. 아래 링크로 들어가면 직접 실행시킬 수 있으며 밑의 소스 코드 안 태그의 텍스트를 수정하여 새로운 빙고판을 생성할 수 있다. 빙고게임하러가기↓↓↓ https://shinye-developmentdiary.tistory.com/16 JavaScript Bingo game - 자바스크립트로 만든 빙고 게임 (색칠하기) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 shinye-developmentdiary.tist..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

자바스크립트를 사용해서 핑퐁게임을 만들어봤다! 처음이라 미흡한 부분이 많지만 결과물이 잘 나와서 아주 만족~😎 앞으로 더 열심히 공부해서 퀄리티 높은 작업물을 만들 수 있도록 노력해야겠다 !! 핑퐁게임 하러가기 ↓↓↓ https://shinye-developmentdiary.tistory.com/14 JavaScript ping pong game - 자바스크립트로 만든 핑퐁 게임 공 튕기기 게임 #can{ background-color: rgb(224, 216, 217); display: block; margin: 0 auto; } var canvas = document.getElementById('can'); var ctx = canvas.getContext('2d'); var x = canvas.wi..

제이쿼리(JQuery)란 오픈소스 기반의 자바스크립트 라이브러리를 의미한다. 라이브러리는 SW의 구성요소 중 한 가지로 API를 바탕으로 대상 환경(플랫폼)에서 바로 실행될 수 있도록 모듈화 된 프로그램의 모음이다. 혼자서 동작하는 완전한 프로그램이 아니라 특정한 부분의 기능만을 수행하도록 제작되었으며 컴파일 기계어의 형태로 존재한다. 1. javascript , JQuery의 차이점 자바스크립트 : 선택자의 설정, 스타일 등 기존 명령이나 코드 작성이 달라 초반 진입장벽이 높다는 단점이 있으며 내장형 스크립트를 사용한다. 제이쿼리 : 자바스크립트의 진입장벽을 낮추기 위해 만들어졌으며 cdn방식이나 외부 연결방식으로 파일을 연결해 사용한다. (호환성 부분은 1.12.4 버전이 가장 안전함) [사용하는 이..