JavaScript (10) 썸네일형 리스트형 [Javascript] 자바스크립트로 클론 만드는 방법 # 코드 - 객체 또는 배열 클론 만들기 Array.from(document.querySelectorAll('li')).forEach(li => { }) > 제이쿼리의 $('li').each(() => {$(this) // li element}) 함수랑 같은 역활을 한다.제이 쿼리가 아닌 순수 자바스크립트로는 위와 같이 구현을 한다.querySelectorAll() 함수는 유사배열을 반환한다. Array의 프로토타입 함수를 사용하려면 Array.form() 함수를 이용해서 유사배열을 배열로 변환해야한다. 이후에Array.protototype.foreEach() 함수를 이용해 li 엘리먼트를 순회할 수 있다.Array.prototype에는 map(), reduce(), every(), some() 등 lo.. [Javascript] 자바스크립트로 비동기 데이터 전송 구현 방법 # 비동기 함수 요즘 웹 추세는 비동기로 데이터 통신을 하는 방식으로 가고 있다.비동기 데이터 통신을 모르면 웹을 할줄 모르는 사람이라고 할 정도로비동기 데이터 통신은 필수적이며 절대적이다.때문에 우리는 비동기 방식을 알아햐 한다. 비동기 방식과 동기방식의 차이는 조만간 포스팅 하도록 하겠다.먼저 코드를 보도록하겠다. const req = new XMLHttpRequest()req.open('GET', '/resource', true);req.onreadystatechange = () => { if (req.readyState === 4) { if (req.status === 200) success() else faile() }}req.send(null) > 우리는 XMLHttpRequest객체를 사용하.. [Javascript] 자바스크립트로 문자열 변경하는 방법 # 코드 - 특정 노드의 문자열을 변경하고 싶은 경우 document.querySelector('#foo').innerHTML = 'Hello umnyaum' > foo를 아이디로 가진 노드의 텍스트를 변경 # 마무리 위 포스트는 제가 직접 제작한 것 입니다.그렇기 때문에 틀린점이나 설명이 엉성한 점이 존재할 수 있습니다.만약 틀린점이나 설명이 엉성한 부분이 존재하면 댓글로 알려주세요.빠른 처리 하도록 하겠습니다. 티스토리 앱으로는 댓글 이용이 불가능 하므로 웹 브라우저로 봐 주세요(URL : http://junprogramer.tistory.com/) 읽어주셔서 감사합니다. [Javascript] 자바스크립트에서 클래스를 추가하는 방법 # 코드 - 특정 노드에 클래스를 추가하는 방법 document.querySelector('#foo').classList.add('active'); > foo를 가진 노드에 active 클래스를 추가 document.querySelector('#foo').className += ' active'; > IE에서는 메소드 별로 지원 버전이 다르다. 때문에 위와 같은 방식으로 추가하거나 다른 방법을 사용해야 한다. # 마무리 위 포스트는 제가 직접 제작한 것 입니다.그렇기 때문에 틀린점이나 설명이 엉성한 점이 존재할 수 있습니다.만약 틀린점이나 설명이 엉성한 부분이 존재하면 댓글로 알려주세요.빠른 처리 하도록 하겠습니다. 티스토리 앱으로는 댓글 이용이 불가능 하므로 웹 브라우저로 봐 주세요(URL : http.. [Javascript] 자바스크립트 이벤트 구현하는 법 # 코드 - 이벤트 리스너 만들기 document.addEventListener('DOMContentLoaded', function() => { // start ...}) > HTML을 파싱한뒤 DOM 객체를 생성이 완료되면 ‘DOMContentLoaded’ 이벤트가 발생한다. 우리는 이 이벤트에 리스너를 추가하는 방식으로 똑같이 구현할 수 있다. - 클릭 이벤트 만들기 document.querySelector('a').addEventListener('click', evt => { // 이벤트 처리 ...}) or document.querySelector('a').click() > a태그를 가져와 클릭 이벤트를 작성한다. - 커스텀 이벤트 만들기 const evt = new CustomEvent('@cl.. [Javascript] 클래스 속성이나 아이디, 태그로 셀렉터 가져오기 # 코드 - 클래스 명 또는 아이디에 해당하는 값을 가지고 오고 싶을 경우 document.querySelector('#app' or '.app') - 클래스 명에 해당하는 노드를 찾고 싶을 경우 document.getElementsByClassName('container') document.querySelectorAll('.container') > 함수명에 “Elements”와 all 이라는 복수형에서 알 수 있듯이 여러 개 돔을 유사 배열 형태로 반환한다. - 태그명으로 노드를 가지고 오고 싶은 경우 document.getElementsByTagName('div') document.querySelector('div') document.querySelectorAll('div') - 해당되는 태그에 속성.. [자바스크립트(javascript)]가장 기본적인 아이디 가져오는 방법 document.getElementById() # 설명 document.getElementById('id')설명 간단한 함수이다. 자바스크립트를 사용할 때, 특정 HTML태그를 지정해줘야 동적으로 웹페이지 제작이 가능해진다. 제이쿼리(JQuery)로 치면 $('id')와 같습니다.사용자가 만약 자바스크립트를 사용하게 된다면이 코드는 필수로 들어가야 하는 코드인 기초적인 기초의 코드입니다.그럼 예제를 한번 확인해 보도록 합시다. 실행결과 See the Pen Document.getElementById by HyeonJun, Bang (@UmNyaUm) on CodePen. 위 소스 코드는 버튼을 눌렀을때 id값이 test인 h1태그의 color의 색을 바꾸는 코드로간단하게 구현되어져 있습니다.때문에 그리 이해하는데는 어렵지 않을꺼라 예상됩니다. 이렇듯.. [자바스크립트(javascript)/제이쿼리(jquery)]자릿수에 맞춰 0을 집어 넣어주는 기능 # 실행 실행결과 See the Pen ZeroPadding exam by HyeonJun, Bang (@UmNyaUm) on CodePen. # 마무리 위 포스트는 제가 직접 제작한 것 입니다.그렇기 때문에 틀린점이나 설명이 엉성한 점이 존재할 수 있습니다.만약 틀린점이나 설명이 엉성한 부분이 존재하면 댓글로 알려주세요.빠른 처리 하도록 하겠습니다.읽어주셔서 감사합니다. 이전 1 2 다음
