본문 바로가기

javascript, framework/javascript

 (50)
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..
Step01_example1 2 (querySelector) Step01_example 에서 연습한 예제를 확장시켰다. 2022.07.06 - [javascript] - Step01_example (javascript에서 태그 접근하기) 해당 모든 데이터를 array type으로 출력해주는 querySelectorALL과 다르게 querySelector는 첫번째에 있는 한개의 데이터만 출력해준다. 다음은 배운 것을 활용한 예제이다. 버튼을 누르면 텍스트가 변경되도록 작성하였다.
Step01_example1 (javascript에서 태그 접근하기) html, head, meta, title, body, p 등의 태그는 object type 형식을 띄고 있다. javascript로 특정 p태그에 접근해보기 앞서 배웠듯이 document.querySelectorAll("p") 에서 document는 뒤에 .이 있기에 object type, document.querySelectorAll은 뒤에 ()이 오기에 function type인 것을 알 수 있다. 이후 NodeList(5) [p, p, p, p, p] 정보에 []를 보면 document.querySelectorAll("p")은 array type이다. 이후 출력되는 값이 p태그 이기 때문에 object type 뒤에 작성하는 .을 입력하고 innerText를 통해 해당 string type 문자를..

티스토리툴바