본문 바로가기

WEB

(88)
[JavaScript] forEach 자바스크립트에서 반복문을 쓸 때 forEach문을 사용할 수 있다. item에는 배열의 인덱스에 저장된 item, index는 인덱스를 알려준다, let nums = [10,20,30,40,50] nums.forEach(function(item,index){ console.log(index+"인덱스에 저장된 item:"+item); }); 예제 /* 바꾸기 버튼을 누르면 모든 p요소의 innerText를 "김구라"로 바꿔보세요. 단, 배열의 forEach()함수를 이용해서 */ document.querySelector("#changeBtn").addEventListener("click",function(){ document.querySelectorAll("p").forEach(function(item,i..
[JavaScript] 전역변수(Global) / 지역변수(Local) 변수는 유효범위에 따라 전역변수와 지역변수로 구분할 수 있다. 전역변수는 함수 외부에서 선언된 변수로 프로그램 전체에서 접근할 수 있는 변수이다. 지역변수는 함수 내부에서 선언된 변수로, 함수가 실행되면 만들어지고 함수가 종료되면 소멸하는 변수다. 함수 외부에서는 접근할 수 없다.
[HTML] select / option select를 사용하면 드롭다운 박스로 옵션을 선택할 수 있게 만들어준다. 코드 고양이 개 코끼리 하나 두울
[JavaScript] 자바스크립트에서 CSS사용하기 / 마우스 올리면 배경 색 변경 예제 자바스트립트에서 css에 접근하려면 style로 접근해야한다. 마우스를 누르면(mouseup) 노란색, 마우스를 떼면(mousedown) 흰색으로 작동되는 코드이다. document.querySelector("#myDiv").style.backgroundColor = "white"; 이런식으로 css에 접근하면된다. div1
[HTML] 자동 완성 기능 / VScode / emmet VScode에서는 html의 개발의 편의성을 위해서 자동 완성 기능을 제공해준다. 이 기능을 emmet이라고 말한다. innerText div{div} div div{div$}*5 div1 div2 div3 div4 div5 클래스, 아이디 button.btn button#btn div.box div.box#one 자식 태그 및 숫자만큼 생성 ul>li*5 자세한 내용은 여기서 확인 https://docs.emmet.io/cheat-sheet/ Cheat Sheet Download cheat sheet as printable PDF A5 docs.emmet.io
[JavaScript] 반복문 [반복문을 사용하지 않은 코드] 이렇게 반복되는 구문을 여러개 적을때 하드코딩하지 않기 위한 방법이 반복문이다. [반복문 적용 코드] 자바스크립트에서의 반복문은 이렇게 코딩하면된다. 예제 모든 div의 innerText를 바꾸기 버튼을 클릭하면 innerText로 바꾸기 ​ p요소에 마우스를 올리면 모든 div의 배경색을 노란색으로 바꾸기 //위의 p요소에 마우스를 올리면 모든 div의 배경색을 노란색으로 바꿔보세요. document.querySelector("#one").addEventListener("mouseover",function(){ for(let i=0;i
[JavaScript] 마우스 x,y 좌표값 구하기 / client / offset / screen 마우스 x,y 좌표값 구하기 좌표의 종류 clientX, clientY : 현재 문서 기준 위치 offsetX, offsetY : 현재 오브젝트 기준 위치 screenX, screenY : 현재 모니터 기준 위치 div1 function 파라미터로 event를 넣으면 이러한 오브젝트를 받을 수 있다. event.offsetX등을 사용하면 좌표값을 얻을 수 있다. div1
[HTML/JavaScript] 효율적인 event처리 example 전송 input 요소에 문자열을 입력하고 전송버튼을 누르면 input요소에 입력한 문자열이 p요소에 출력되도록 프로그래밍 하는 예제이다. document.querySelector("#sendBtn")해서 버튼을 찾아준 후 addEventListener을 사용한다. 클릴할 때 실행되야하므로 클릭이벤트이다. 결과적으로, document.querySelector("#sendBtn").addEventListener("click",function(){ }); 이렇게 만들어주고 function안에 text를 가져오는 코드를 짠다. input요소에서 text를 추출해야하므로 input요소의 id인 inputMsg를 사용한다. document.querySelector("#inputMsg").value를 사용해서 tex..