JavaScript31 [Javascript/Jquery] 자바스크립트 onclick 이벤트 리스너 설명 및 소스(초간단) 안녕하세요. 오늘은 자바스크립트 onclick 이벤트에 대해서 설명드리겠습니다. - onclick 동작방식 ● 이벤트가 발생시 실행될 함수를 만들어줍니다. ● 엘리먼트(Element)에 onclick 이벤트를 명시해줍니다. ● 엘리먼트(Element)를 클릭할 경우 이벤트가 발생됩니다. - 소스 설명 ↓ 화면 구성 소스 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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 // 성명을 클릭 했을때 동작하는 함수 function inp1Cli.. 2020. 2. 13. 자바스크립트(JavaScript)란 무엇이며 특징 및 장단점(기초) 안녕하세요. 오늘은 자바스크립트(JavaScript)가 무엇인지 알아 보겠습니다. - 자바스크립트의 역사 1995년에 처음 만들어졌으며 모카(Mocha)라는 명칭으로 개발이 되었으나 추후 이 언어를 공식적으로 라이브스크립트(LiveScrip)로 불렀으며 나중에는 자바스크립트(JavaScript)라고 불리게 됩니다. - 자바스크립트(JavaScript)란? 자바스크립트(JavaScript)를 쉽게 설명하자면 저희가 웹(Web)에서 행하는 행동을 제어할 수 있는 객체(Object)기반의 스크립트 언어입니다. 객체(Object)라는 말이 조금 어렵게 느껴지시면 쉽게 말씀 드리자면 저희가 크롬, IE, 파이어폭스등 저희가 사용하면 인터넷 브라우저에서 버튼을 클릭하고 새로운 사이트로 이동하는 행위를 하는 기능을 .. 2020. 2. 12. [ Jquery ] 제이쿼리 addClass(), removeClass() 설명 및 예제(간단) 안녕하세요. 오늘은 제이쿼리 addClass()와 removeClass()에 대해서 알아 보겠습니다. - addClass()의 경우 object에 class를 추가 하는 것입니다. - removeClass()의 경우 object에 존재하는 class를 제거 하는 것입니다. 아래의 소스에 예제 및 설명을 적어놨습니다. 참고하시면 좋을거 같습니다. 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 26 27 28 29 30 $(document).ready(function(){ // 'divAdd'라는 id를 가진 object에 'addCl'이라는 class를 추가 $("#divAdd").click(function(){ $(this).addC.. 2020. 2. 4. [Jquery] 제이쿼리 오브젝트(object) 클래스 이름 가져오기, 클래스 데이터 추출 안녕하세요. 오늘은 클릭 이벤트 발생 시 해당 Object의 Class Name를 가져오는 이벤트에 대해서 설명 드리겠습니다. 아래의 소스에 예제와 설명이 있습니다. 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 26 27 28 29 30 31 32 33 34 // 버튼클릭 $("#testBtn").click(function(){ // class name 가져오기 var select = $(this).attr('class'); // 'testclass' 라고 alert에 표출. alert(select); }); // div 클릭 $("#testD").click(function(){ // class name 가져오기 var select.. 2020. 2. 3. [Jquery] 제이쿼리 체크박스 체크하기(간단) 안녕하세요. 오늘은 제이쿼리를 사용하여 체크박스 제어를 해보겠습니다. 아래의 소스에 설명이 달려 있습니다. 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 26 // 버튼클릭 $("#testBtn").click(function(){ // 체크박스 체크하기 $("#testChk").prop("checked", true); // 체크박스 체크풀기 $("#testChk").prop("checked", false); }); 감사합니다. 2020. 2. 3. [Jquery] 제이쿼리 null 체크 함수 예제(간단) 안녕하세요. 오늘은 null 체크 함수를 공유할려고 합니다. 아래의 소스를 보시면 설명이 달려 있습니다. 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 26 27 28 29 30 31 32 33 34 35 36 37 // id 'testBtn'이라는 버튼을 클릭 시 체크박스 검사. $("#testBtn").click(function(){ // id 'testInput'의 value의 null 체크 if(vali($("#testInput").val())){ alert("데이터가 존재하지 않습니다."); } else { alert("데이터 존재."); } }); // null 체크 함수(custom) function vali(val){ .. 2020. 2. 3. 이전 1 2 3 4 5 6 다음
