목록Frontend (28)
개발 무지렁이
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"..
DOM(Document Object Model) 웹페이지가 로드될 때, 브라우저가 생성하는 문서객체모델 (element기반, Tree형태) (문서의 구조화된 표현을 제공) WHY? DOM을 기준으로 element를 찾아서, 추가, 속성추가, 제거 등 재구성할 수 있다 DOM에 결과 반영 및 렌더링 BOM(Browser Object Model) 원래 브라우저(Browser)가 내장하고 있는 객체 (window, document, location, history, screen, navigator)
자바스크립트 Date 객체 let now = new Date(); Wed Apr 12 2023 20:57:29 GMT+0900 (한국 표준시) [clock.html] 시계 움직이기... ⭐. myInterval = setInterval(function, 1000); // 1초마다 계속 (단, 처음 1초가 지난 후에) 멈추기: clearInterval(myInterval); ⭐. myTimeout = setTimeout(function, 1000); // 1초가 지나면 딱 한 번 재귀호출에서 많이 사용 멈추기: clearTimeout(myTimeout); 📌 toLocaleString() -- Date객체의 내장메서드 날짜의 현지화 날짜를 언어별로 구분하여 문자열로 반환