개발 무지렁이

트리거(trigger) 어떤 액션/이벤트 이(가) 일어났을 때, 요소(Node)가 갖고있는 이벤트를 강제 호출 🌝 Add New HTML Content - append(): 자식노드로 추가, 뒤 - prepend(): 자식노드로 추가, 앞 - after(): 형제노드로 추가, 뒤 - before(): 형제노드로 추가, 앞 🌚 Remove HTML Content - remove(): element 자체를 제거 - empty(): 하위요소를 제거 $(function() { $("#removeId").click(function() { // 어떤 액션/이벤트가 발생했을 때, trigger $("div").remove(); // 이벤트 강제 호출 }); $("#emptyId").click(function() { ..

폼이 비어있을시 $(function() { $("#form").submit(function() { if($("#id").val == "") { alert("아이디를 입력해주세요."); $("#id").focus(); return false; } if($("#pwd").val() == "") { alert("비밀번호를 입력해주세요"); $("#pwd").focus(); return false; } }); }); 비밀번호, 비밀번호 확인 $(function() { $("#pwd").keyup(function() { // 사용자가 누른 키가 올라갔을시 호출 if($(this).val() == "" && $("#pwdConfirm").val() =="") { $("#lblError") .text("암호를 입력하..

html에서 element들이 javascript에서는 객체로 다루어진다. ⚠️ element들은 JavaScript에서 Node라 불린다 - document.getElementById("아이디"); // Node 한개만 찾는다 - document.getElementByClassName("클래스이름"); // Node를 여러개 찾는다(NodeList) - document.getElemetnByTagName("태그이름"); // Node를 여러개 찾는다(NodeList) - querySelector("selector종류"); // Node 한개만 찾는다 - querySelectorAll("selector종류"); // Node가 여러개(NodeList) onload = function() { // wind..

🌝. 동기 방식 : 하나의 처리가 끝나는 시간과 다음 처리가 시작하는 시간이 같도록 처리하는 방식을 말한다. ex. HTTP... 🌚. 비동기 방식 : 여러 개의 처리가 함께 실행되는 방식으로, 동기 방식에 비해 단위시간 당 많은 작업을 처리할 수 있다. AJAX (asynchronous javascript and xml) 🌚 비동기화통신 응답을 기다리지 않는다, 딴거하고 있다가 응답 이벤트를 받으면 일부부만 갱신 ❗ 사용자의 액션에 따라 화면에 새로고침 없이, 화면의 일부분을 갱신하는 것 (1)XMLHttpRequest생성 -> (2)open -> (3)send -> (4)response -> (5)갱신 🌚 한정적 렌더링 => 부드러운 화면전환 효과 $(function() { $("#send").cli..

📌. on() 함수는 정적 또는 동적 element에 이벤트를 적용할 수 있다. $( ).on("이벤트종류", function(){ }) 정적 element에 이벤트 등록 $(function() { $("#chkAll").on("click", function() { // chkAll을 클릭하면 모든 checkbox를 선택 or 해지 // alert(this.checked); $(":checkbox").prop("checked", this.checked); if(this.checked) { $("span").text("전체해지"); } else { $("span").text("전체선택"); } }); }); $(document).on("이벤트종류", "이벤트대상", function(){ }) 동적으로 새로..

JavaScript 라이브러리, jQuery 🚀 cross-browser - HTML/DOM manipulation - CSS manipulation - HTML event methods - Effects and animations - AJAX - Utilities $: jQuery의 약자 onload $(document).ready(function() { // jQuery methods go here... }); // 축약형 $(function() { // jQuery methods go here... }); method chain 기법 .(쩜)을 찍어가면서 계속 method를 호출해주는 기법 // method-chain 기법 $("h3, h4") .css("border", "1px solid red"..