본문 바로가기

Frontend/03. Java Script4

[JavaScript] Check box 전체 선택 후 전체 중 1개라도 해제하면 전체도 함께 해제되게 하기 전체 강아지 고양이 토끼 위와 같은 모양의 체크박스를 만들었다. 이때 전체를 선택하면 강아지,고양이,토끼가 모두 선택되고 전체를 해제하면 모두 해제되도록 코드를 작성해보자 $(document).ready(function(){ $("#selectall").bind("click", function(){ // 그룹구분 전체 선택 if($("#selectall").is(":checked")) $("input[name=animal]").prop("checked", true); else $("input[name=animal]").prop("checked", false); }); }); 전체가 선택된 상태에서 1개라도 해제가 되면 이때는 전체가 아니다 그러므로 전체 선택 중 1개라도 해제될땐 전체박스도 함께 해제되도.. 2023. 12. 8.
Radio button Y/N 설정하기 radio button으로 Y/N을 설정해보자. 이때, Y 또는 N 한가지만 설정할 수 있도록 해야하기 때문이 충분히 고려해서 작성하도록 한다. 사용여부 Y N 사용 여부에 관한 radio button을 만들었다. 둘 중 한번만 택하게 하기 위해 name을 동일하게 주었고, 디폴트값은 N으로 체크되게 설정하였다. Script단에서 체크된 버튼의 값을 이용하기 위해서는 아래와 같이 부르면 사용할 수 있다. let strUseYn = $('input[name=useYn]:checked').attr('id'); 2023. 12. 8.
[javascript] 모바일 서명 패드 만들기 터치 또는 마우스 드래그를 통한 서명을 받는 canvas 영역을 구현해야 했다. 나는 서명 그림을 png 또는 jpg로 저장하는것이 아닌 Base64 코드로 DB에 저장하는 방식을 채택했다. 화면은 상단과 같이 간단하게 구성했다. 물론 하단에 서명을 받은 뒤 넘어가는 넘어가는 "저장"과 같은 버튼이 있지만 이 글에선 생략하겠다. (function(obj){ obj.init(); $(obj.onLoad); })((function(){ canvas = $("#drawCanvas"); var div = canvas.parent("div"); //캔버스의 오브젝트를 가져온다 var ctx = canvas[0].getContext("2d"); var drawble = false; function canvasRes.. 2023. 12. 5.
[JS] Java Script의 기본 문법 DOCTYPE html> 01_자바스크립트기본문법.html /* SCC 문법 */ //자바 스크립트 코드 작성 영역 - 한줄 주석 : // - 여러줄 주석 : /* */ /* ● [JavaScript 자바스크립트] - 웹페이지의 3요소 : 구조(HTML) + 표현(CSS) + 동작(Javascript 또는 웹프로그래밍언어) - 웹브라우저에서 interpreter방식(enter로 구분된 문장을 바로 해석하는 방식)으로 해석되는 스크립트 언어 - Server Side Interface : JavaScript (front-end에서 정보를 보낼때 javascript(바리케이트 역할)를 거쳐 back-end의 서버 유효한 데이터를 보내게 된다) - on Server : JSP, ASP, PHP ~~~ - HTM.. 2022. 9. 12.