Study/JavaScript
-
초보자를 위한 웹브라우져에 웹캠 비디오 영상 보여주기Study/JavaScript 2024. 3. 7. 11:44
웹캠을 이용하여 웹브라우져에 띄우는 작업을 하거나 카메라를 이용하여 서비스를 만든다고 하면 도대체 카메라를 웹브라우져에 어떻게 띄우는 걸까?! 궁금해 하실 저와 같은 병아리신입 개발자를 위해 글을 써볼까 함요. 그럼 잔말 말고 얼른 어케띄우는지 보자 1.결과 위에 이미지는 웹캠을 띄워서 일부 화면만 캡쳐했움...왜냐면 얼굴이 나오니까 일부만 캡쳐 함요. 여튼 결론적으로 브라우져에 실시간으로 웹캠영상을 띄웠음 2.설명 (1)html 코드 기본 html 코드에 video 에 id를 적어줘서 나중에 자바스크립트단에서 접근시 사용 하기 위함. 비디오 크기를 정하기 위해 width 와 height 를 정해줌. (2) javaScript 코드 설명은 주석으로 처리함. 참고로 javaScript 부분은 body 태그..
-
초보자를 위한 게시판의 글자색을 바꾸는 기능을 만들어 보자Study/JavaScript 2024. 2. 5. 17:57
초보자가 처음 프로젝트로 보통 게시판을 만들게 되는데, 이때 열의에 차서 게시판 기능에도 여러가지 기능을 넣고 싶을때가 있다. 나 또한 수강생시절 게시판 만들기를 했었고 사용자의 편의를 위해서 글자의 색을 바꾸고싶다는 생각으로 기능을 만들어 보았고, 간단하게 만든 기능이니 활용성이 떨어지지만 참고하여 기능을 확장 시키면 좋을듯하다 1.결과화면 글을 작성하는 페이지에 글자색을 사용자가 원하는 색으로 바꾸게해서 사용사의 활용성을 높이고싶다 할때 글자색을 어떻게 바꾸지 할때 제글을 보시길 바란다. *글자색 바꾸기전 *글자색 바꾸고 난 후 2. 구현 방법 (1)html 코드 먼저 글을 쓸수 있는 칸이 필요한데, 이거는 textarea 태그를 이용하면 되고 나는 편의를 위해 style을 지정해 사이즈를 정해두었고..
-
var 와 let 둘 중 뭐를 써야 될까??Study/JavaScript 2023. 8. 4. 14:03
자바스크립트를 배우거나 코드를 보다 보면 어떤 코드는 var를 잔뜩 써놓고 어떤 코드는 let을 잔뜩 써 놓았는데, 도대체 이게 뭐냐?? 하실겁니다. 일단은 var 와 let 둘다 변수를 선언할때 쓰입니다. 다만 var보다 let이 좀더 업그레이드 되었다. 고 생각 하심 좋을거 같습니다. 그렇다면 어떤 부분이 업글이 되었는지 궁금해 하실텐데 그전에 먼저 알아둬야 될 지식이 있습니다! 바로 Hoisting(호이스팅)기술 입니다. 보통 코드의 흐름은 위에서 아래로 물이 흐르듯이 차례차례대로 실행이 되는데, 자바스크립트는 실행이 될때 먼저 코드를 훝어서 변수와 함수를 갈고리로 낚아채듯 감아올려(hoist) 최상단에 두고 기억해 뒀다가 변수나 함수를 선언할때마다 메모리에 꺼내서 호출할수 있습니다! 즉, 변수나 ..
-
초보자도 쉽게 이해하는 jQuery 문법_태그 및 요소 추가하기_ .wrap() .wrapAll() .html() .text()_(2)Study/JavaScript 2023. 3. 26. 00:21
저번에 이어 jQuery 문법에 대해서 설명 ㄱㄱ (혹시 jQuery 문법중 .append() .prepend() .before() after() 문법이 궁금하신분은 아래 링크 참고하시길!!!) https://cbn1218.tistory.com/39 초보자도 쉽게 이해하는 jQuery 문법_태그 및 요소 추가하기_ .append() .prepend() .before() after()_(1) jQuery가 많이 없어지는 추세라고 하지만 금융권에서는 여전히 많이 사용하기도 하고 한번 익혀두면 편리하기에 공부하게 되었슴 특히 플젝에서 많이 사용하게 되는 html태그 추가나 요소를 추가 cbn1218.tistory.com (1) .wrap() .wrap()은 요소 하나하나를 감싸는 함수임 첫 번째 두 번째 이번..
-
초보자도 쉽게 이해하는 jQuery 문법_태그 및 요소 추가하기_ .append() .prepend() .before() after()_(1)Study/JavaScript 2023. 3. 25. 02:33
jQuery가 많이 없어지는 추세라고 하지만 금융권에서는 여전히 많이 사용하기도 하고 한번 익혀두면 편리하기에 공부하게 되었슴 특히 플젝에서 많이 사용하게 되는 html태그 추가나 요소를 추가할 경우 많이 쓰는걸 정리해 두었음 참고로 jQuery를 쓸 때 아래의 모양이 기본 형태임 $("지정하고자하는 html태그 또는 id 또는 class 등의 선택자").함수이름("선택자에 추가하고자 하는 내용"); 또한 jQuery를 쓸 때 head 태그안에 아래 링크를 넣어줘야 jQuery를 쓸수 있다. (1) .append() 선택자 뒤에 추가하고자 하는 내용을 넣어줄때 사용함. 첫 번째 두 번째 아래 결과화면을 보면 선택자인 #list 밑에 div태그가 추가 됨. (참고로 선택자의 태그인 oi 의 자식태그가 되어..
-
초보자를 위한 html요소 삭제하기 .remove().empty() .unwrap()Study/JavaScript 2023. 3. 15. 00:59
요즘 인사정보조회 기능을 만들고 있는데 DB에서 불러와서 .append()를 이용하여 jsp에 데이터를 뿌려 주는것 까지는 했는데, 데이터를 삭제하고 그자리에 새로운데이터를 부르고 싶다! 그럴때 .remove().empty() .unwrap() 이친구들을 사용하면 된다! (참고로 .append()를 이용하여 어떻게 뿌려주는지 궁금하다면 아래링크 참고!) 1. ("html요소").empty() .empty()는 선택한 요소의 자식요소를 삭제해주는 제이쿼리메서드로 나 같은 경우 주로 데이터를 바꿔끼워 넣기전에 그자리를 차지하고 있던 데이터를 먼저 비워주고 새로운 데이터를 채워넣을때 사용한다. 왼쪽그림을 보면 b 태그안에 데이터가 뿌려져 있음, 오른쪽은 .empty()메서드를 적용한걸로 b태그안에 데이터가 아..
-
초보자를 위한 Ajax통신으로 메뉴불러오기_(2)Study/JavaScript 2023. 3. 9. 22:45
앞서 백단에서 데이터를 불러오기 위해 작업을 했는데, 궁금하신분들은 아래 링크를 통해 전에 올린 글을 참고 하시길 초보자를 위한 Ajax통신으로 메뉴불러오기_(1) 현재 회사에서 인사조회 관련 기능을 만들고 있는데, 인사조회를 하다보면 특정 팀을 누르면 그팀에 해당하는 사람들을 DB에 끌어와 화면에 뿌려줘야 하는 경우가 있는데, 내가 이번에 구현했던 cbn1218.tistory.com https://cbn1218.tistory.com/32 controller에서 jsonView에 담았는데 그렇다면 이제는 프론트단을 만들어야 할때! 2.프론트단 로직 만들기 (1)HTML 작성 조직도 (1)영업부 (2)경영지원 프론트단의 제일 기본이 되는 html 작성 코드이다. 블로그에 글쓰기 용으로 최대한 간결하게 작성..