홍가의 코딩공부

안녕하세요 홍가 입니다. 오늘은 jQuery를 소개해드리려고 합니다. jQuery란 DOM 조작과 이벤트 제어 및 애니메이션 등등 웹 화면을 다루는 자바스크립트 라이브러리 입니다. JS로 작성시 4줄이 나오는데 jQuery를 사용 시 2줄로 완성이 됩니다. jQuery를 사용하면 코드가 짧아지고 개발시간이 줄어든다는 장점이 있습니다. 그러고 작성하는 코드양이 적어져서 읽기 쉽고 정리하기도 쉬운 코드가 됩니다. jQuery를 사용하여 버튼을 클릭 시 경고창이 나타나도록 했습니다. jQuery를 사용하는 방식은 파일 다운로드, CDN 방식이 있습니다. 상황에 따라 사용하시면 됩니다. 저는 보통적으로 CDN방식을 사용하고 있습니다. jQuery는 사용방식이 있는데 보통 방법 3번 처럼 사용을 합니다. jQue..

Html, Css, JavaScript 기초공부 2023. 1. 31. 10:00

안녕하세요 홍가 입니다. 오늘은 문서 객체 모델에 대해 글을 작성하려고 합니다. document기능 및 구조를 알아보기 위해 작성을 해보았습니다. 이런식으로 구조가 잡혀있으며 부모 자식을 알 수 있습니다. 큰 사진과 작은 사진을 나눠서 제품을 보여주게 만들었습니다. querySelectorAll을 사용하여 for문을 썻습니다. 이미지를 클릭하면 이미지가 교체 되도록 만들었습니다. getElementById부분과 querySelector의 차이는 ById는 id선택자만 Selector은 class, id등 상관없이 선택이 가능합니다. 그래서 selector은 ById에 비하여 속도가 느리다는 단점이 있습니다. 아까 위에서 본 부분에 상세 설명 보기를 클릭 시 상세 설명이 나타나도록 했습니다. 콜백함수를 사..

Html, Css, JavaScript 기초공부 2023. 1. 22. 10:00

안녕하세요 홍 가 입니다. 오늘도 코어 라이브러리에 대하여 글을 써보려고 합니다. 가장 많이 사용되는 String 메소드가 엄청 많습니다. 우선 문자열을 알려주는 length가 있습니다. charAt를 이용하여 문자열을 출력합니다. setInterval을 사용하여 1초마다 출력이 되도록했습니다. indexOf를 사용하여 문자열이 처음 등장하는 위치를 알려줍니다. slice는 (2,2)는 | begin,end로 나타나며 arr[2]~ arr[2]까지인데 end부분은 미포함이라 아무것도 나오지 않습니다. slice(2,3)은 | arr[2]~arr[3]까지인데 KOREA중에 E가 포함되지 않아 R만 나타나는 것 입니다. slice(2,4)는 RE가 나타나는거죠 slice(2,-1)이면 KOREA중에 R~A인..

Html, Css, JavaScript 기초공부 2023. 1. 14. 10:00

안녕하세요 홍 가 입니다. 오늘은 자바스크립트 코어 라이브러리를 알아보려고 합니다. 코어 라이브러리란 개발자를 위해 기본적으로 제공해주는 기능입니다. 우선 타이머 함수를 사용해 보겠습니다. setInterval(함수이름, 지연시간) 으로 사용이 가능합니다. 일정 시간 마다 주기적으로 특정 구문을 실행 시킵니다. setTimeout은 일정 시간이 지난 후 특정 구문이 한 번 만 실행이 됩니다. clearInterval은 실행중인 타이머 함수를 멈추게 해줍니다. 요번에는 Math를 사용해 보려고 합니다. random, floor, ceil, sin이 있습니다. setInterval을 사용하여 1초마다 출력이 되도록 했고 Math.random을 사용하여 1~6의 숫자가 랜덤으로 나오게 했습니다.

Html, Css, JavaScript 기초공부 2023. 1. 7. 14:59

안녕하세요 홍가입니다. 오늘은 함수와 이벤트 편을 적어보려고 합니다. 처음에는 반복문을 사용해보고 두 번째는 함수와 매개 변수를 사용했습니다. 세 번째는 사용한 코드를 재사용해봤습니다. 두 번째 코드처럼 임의의 수를 넣어 사용을 했다면 세 번째 코드는 숫자 대신 count로 넣어 매개변수 부분에 숫자를 넣어 실행되게 했습니다. 함수에다가 매개변수를 사용하여 alert로 값이 나오게 했습니다. 요번에는 while문을 사용하여 숫자를 입력하면 값을 더하고 0을 치면 종료가 되도록 만들었습니다. parseInt를 사용하여 숫자를 정수 타입으로 받습니다. 전역 변수는 프로그램 어디에서나 사용이 가능하고 프로그램 종료 시 사라진다. 지역변수는 함수나 {}안에서 사용 가능하고 함수나 함수 내용이 사라지면 종료된다...

Html, Css, JavaScript 기초공부 2022. 12. 5. 10:00

안녕하세요 홍가 입니다. 오늘은 jQuery 사용 법을 알려드릴게요. Download jQuery | jQuery link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download jquery.com CDN방식이 있고 파일을 다운하는 방식이 있습니다. 저는 다운하는 방식으로 진행을 했습니다. 자바스크립트로 스타일을 줘서..

Html, Css, JavaScript 기초공부 2022. 11. 30. 10:00

안녕하세요 홍 가 입니다. 오늘은 자바스크립트 기초 편 조건문과 반복문에 대해서 글을 작성하려고 합니다. 숫자와 별 반복문인데요. for문을 사용하여 1~10까지 출력하게 했습니다. write부분에 *을 넣어 별 찍기를 했습니다. 반복문에 배열을 넣어서 글자를 출력했습니다. prompt를 사용하여 사용자로부터 입력을 받고 parseInt를 사용하여 문자열을 정수로 받게 했습니다. prompt로 사용자로부터 입력을 받고 parseInt를 사용하여 문자열을 정수로 만들었습니다. for문을 사용하여 구구단을 출력하게 만들었습니다. window.prompt와 prompt랑 같습니다. window를 붙이던 안 붙이던 똑같습니다. 아이디 입력 부분에 Shin을 입력하면 환영합니다. 가 출력이 되고 다른 걸 입력 시..

Html, Css, JavaScript 기초공부 2022. 11. 20. 17:53

안녕하세요 홍가 입니다. 오늘은 자바스크립트 기초편을 진행을 해보려고 합니다. 예전에 인프런 이벤트를 했을때 강의를 받아놓은 것이 있는데 기한이 얼마 남지 않아 빠르게 강의를 시청 해보려고 합니다. 자바스크립트랑 jQuery를 같이 배우더라고요 기초 1,2 중급 1,2 고급 1,2 이렇게 나뉘어져 있어요. 이론은 노션으로 정리를 하고 있습니다. 블로그에서는 이론보다 실습을 위주로 올리려고 합니다. 기초 1은 강의 시간이 9시간 40분인데 이 중에 이론 시간이 거의 4시간 정도 더라고요 다른 강의들은 긴건 16시간? 짧은건 12시간? 이렇더라고요 강의가 단원식으로 나뉘는데 단원이 끝나면 한 개 씩 올리려고 합니다. 회사를 다니면서 공부를 하려고 하니 생각보다 힘들더라고요 오늘은 변수와 자료형 그리고 연산자..

Html, Css, JavaScript 기초공부 2022. 11. 10. 10:00