javascript, framework (68) 썸네일형 리스트형 Step02_example4 (변수 연산, if, return) 다음은 변수를 활용한 연산의 복습이다. 2022.07.07 - [javascript] - Step02_example1,2 (변수 연산, if, CamelCase) div1~div10까지의 innerText가 바꾸기 버튼을 누를때마다 하나씩 김구라로 바뀌는 예제이다. 필자가 작성한 코드로 index=0을 index=-1로 작성하여 버튼을 클릭할때 array를 0부터 시작하게 만들었다. 선생님의 코드로 굳이 index 초기갑을 -1로 실행할 필요 없이 연산식을 뒤에 배치하여 0부터 시작하고 연산을 하게 만들었다. 또 if문을 활용하여 10이상일때는 실행하지 못하게 강제하여 추후 버튼클릭이 10회 이상일때 오류가 나지 않도록 만들었다. 같은 동작을 if 와 return을 활용해서 작성한 예시이다. 이 방식이 .. Step02_example3 (반복문, for) for 반복문의 형식 for ( let 변수명 = 초기값; 변수명 < 종료값; 변수명++ ) {}; ex) for (let i=0; i Step02_example1,2 (변수 연산, if, CamelCase) 다음은 배운 것들을 활용한 예제이다 2022.07.07 - [javascript] - Step02_event3 여기서 count 값을 미리 let으로 정의해두고 addEventListener을 작성한 것을 알 수 있다. 이후 count+"px" 연결연산을 활용하여 클릭시 변경하여 작동하게 만들었다. 전 예제와 같은 방식으로 이번엔 img에 margin을 사용하여 클릭시 이동하는 것처럼 보이게 만들었다. if 문을 활용하여 0이 아닐때만 동작하게 했다. 그림의 margin값이 음수가 나와서 안보이는 곳으로 이동하는 것을 막은 것이다. *여러 속성을 문자로 만드는 형식 kebab-case move-right-bottom snake_case move_right_bottom CamelCase MoveRightB.. Step02_event3 (이벤트 목록, 좌표값) 배운 것들을 응용해서 예제를 작성해보자 1,2번 예제는 2022.07.07 - [javascript] - Step02_event (addEventListener) 2022.07.07 - [javascript] - Step02_event2 (css에 접근하기) 이전 배운 것들을 참고하여 작성하였다. 3번 예제는 구글링을 하여 작성하였다. https://developer.mozilla.org/ko/docs/Web/API/MouseEvent/clientX 해당 글에서 마우스 좌표값을 구하는 공식이 있는데 해당 내용을 예제에 맞게 변경하고 싶어서 더 찾아봤다. 자주 쓰일 것 같은 이벤트 목록 keydown : 키보드를 눌렀을 때 실행 keyup : 키보드를 눌렀다가 놓았을 때 실행 mousedown : 마우스 .. Step02_event2 (css에 접근하기) 최근까지 javascript로 html에 접근하는 방법을 배웠다면 이번에는 css에 접근하고 변경하는 방법을 배워보자. myDiv를 id 값으로 가지고 있는 div를 변수 div1으로 지정하여 css를 변경했다. 물론 변수를 지정하지 않고 작성해도 가능하다. css 작성법과 약간의 차이가 있다. javascript에서 css를 수정할때 -등의 연산자를 주의해서 작성해야하는 것이다. 예시의 backgroundColor 처럼 여러 단어로 조합된 css property 는 - 대신에 다음 단어의 첫글자를 대문자로 작성한다. myDiv는 변수 선언후 css를 작성하고, yourDiv는 변수 선언하지 않고 css를 작성하였다. 배운 것을 활용한 script 작성 예시이다. Step02_event (addEventListener) 그동안 onclick을 활용하여 일련의 javascript를 동작하게 했었다. 이는 script glabal area에 함수를 만들게끔 강제되는 것으로 global area에 함수가 많아지면 여러 단점이 존재하기에 addEventListener 함수를 사용하여 새로운 코드를 작성해보자. global area에 함수가 많아지면 단점 사용자가 javascript에 접근하여 변경하기 쉬워진다. 추후 같은 변수명을 선언하게 될 경우 오류가 난다. addEventListener 함수를 배워보자. event, function, useCapture 순서로 적으며 event : 이벤트 이름 function : 이벤트 발생 시 호출 실행할 함수 useCapture : 이벤트 확산 여부 참거짓. (1: 확산방지, 0: 확.. Step01_example3 2 (코드 줄여보기) 다음은 Step01_example3에서 작성했던 코드이다. 2022.07.06 - [javascript] - Step01_example2,3 (inner Text, value 변경, Number()) 이것을 더 간결하게 작성하려 한다. 자주쓰는 코드를 input1, input2, resultnum이라는 변수명을 만들어 작성하였다. 위치 정보 코드들만 gloabl area에서 선언했다. 여기서 value와 innerText는 같이 선언하지 않고 해당 함수 안에 그대로 둔다. 로드 시점의 value와 innerText값이 필요한게 아니라 버튼 클릭 시점의 값이 필요한 것이기 때문이다. Step01_example2,3 (inner Text, value 변경, Number()) input 요소에 사용자가 입력한 문자열을 javascript로 접근할때 innerText가 아닌 value로 접근할 수 있다. 다음은 예시 문제이다. 입력값은 value, 결과값은 innerText로 작성해준 것을 볼 수 있다. let msg=document.querySelector("#one").value;를 함수안에다 적어야 정상 작동한다. 리로드 시점의 input 텍스트를 입력하는 것이 아니라 버튼 클릭 시점의 텍스트를 입력하는 것이기 때문이다. 비슷한 방식으로 삭제 버튼도 만들 수 있다. -예제 input type 입력값으로 연산이 가능하게 작성해야 한다. 응용해서 연산이 가능한 기능을 만들었다. 저번 방식과 달라진 점은 input type="number"로 변경한 점과 valueAsNumber.. 이전 1 ··· 4 5 6 7 8 9 다음
