04/15 Javascript 코드분리와 노드 선택 방법(계산기)

 

(저번시간에 )

document에 write기능이 있지만 그걸로 다 하는 것보다는,  로드되어있는 컨텐츠를 선택하고 사용


스크립트 코드가 아무대나 들어갈 수는 있지만 스크립트 아래에 있는 로드가 안된 코드는 사용할 수 없다

-> 이벤트를 기반으로 코드를 수행하게 하기

-> 함수를 호출하고 함수를 정의하게 하는 방식으로 

 

 

 

 

 

 

 

 

 

태그에 직접 쓰지 않고 스크립트 블럭에 몰아넣는 것이 좋겠다

 

하나의 블럭으로

 

 

 

 

 

()를 안쓰면 함수를 위임한다는 뜻 / ()는 리턴값이 있는 것

 

굳이 함수 이름을 붙이지 않고 이런식으로 해도 된다

 

 

함수를 명명하지 않고 위임하게 되면 함수의 개체를 늘리지 않으면서도 적절하게 사용될 수 있다

 

이벤트 함수들은 이름을 만들 필요가 없다

 

 

함수 이름 없이 만듬

 

 

 

 

 

스크립트 코드를 다른 자바스크립트 파일로 새로 만들어 분리해주자

 

 

 

 

 

 

asideTitle이라고 쓰는 것은 옳지않은 표기법이기 때문에 aisde-title로 바꾸게 되면 

 

스크립트 코드안에서는 사용할 수 없게 된다...

 

원래 html코드 안의 아이디는 스크립트에서 쓰는게 아니다

 

 

그러면 어떻게???

-> 변수사용

스크립트 코드 내에서 사용할 수 있는 asideTitle 변수 만들어서 document 객체 안에 있는 id "aside-title"을 가리켜줬다

 

-> 그렇게 하고 함수내에서 사용

 

 

 

 

 

 

 

계산기로 예제

 

ex1의 계산기에서 버튼을 누르면 "테스트"라는 글자가 콘솔에 출력되도록 해보자

 

 

위의 코드와 아래코드는 같은 결과나온다

id ex1을 section이라해주고 

그 section 안에 있는 submit-button을 찾아준 것 

 

이때 getElementsByClassName -> 배열을 담은 것이다 

몇번째인지 일러주지 않으면 배열을 통채로 쓰는 것이기 때문에 어차피 한개밖에 없지만 0번째라고 말해줘야 한다

-> 안그러면 ex1이 아닌 다른 객체로 오해할 수 있음

 

 

 

 

 

 

 

 

 

 

 

 

 

숙제  :  숫자 받아와서 계산하고 결과값 내보내는 계산기 만들어보기