newlecture: js es5 브라우저 플랫폼

(84) 자바스크립트 DOM for VanillaJS 프로그래밍 18강 - window 플랫폼을 이용한 대화 parseInt, alert, prompt, confirm - YouTube

감사합니다 뉴렉쌤

 

window 플랫폼을 이용한 대화 parseInt, alert, prompt, confirmwindow

 

alert는 자스크립트 함수가 아냐... 브라우저 객체의 함수야. 크롬같은 애들 꺼다.

 

 

 

 

위와 같은 것들이 window 객체이다.

우리가 종종 사용하는 alert 또한 window.alert() 로 window 객체이며, 생략이 가능했던 것 뿐이다.

 

**

parseInt는 "25px" 등.. 뒤에 문자가 들어가면 그 문자를 제거해준다.

"px" 등 문자만 들어가면 NaN 에러를 반환한다. Not a Number

 

 

<script>
  var fn1 = function() {
        console.log(2);
  };
</script>

<input type="button" onclick="console.log(1);" onmouseover="fn1();" value="imButton" />

위와 같이 버튼을 누르거나 커서를 올리는 등에 따라 제어가 가능하며,

함수를 지정할 수도 있다.

 

 

또 위와 같은 방식으로 문서의 객체 속성을 사용할 수 있다.

 

 

다만 위와 같은 span태그 같은 경우는 value 란 속성이 없다. 때문에 아래와 같은 방법으로 접근해야 한다.

 

위 코드는 참조에러가 발생한다. 그 이유는 브라우저가 해당 문서 객체를 모두 로딩하기 이전에 정의된 함수가 해당 변수를 접근하지 못하기 떄문이다.

 

**

위 문장 중 switchable.onclie = fn1; 에서.. fn1()을 대입하면 안된다. 이것의 뜻은 함수를 호출함과 동시에 해당 값의 반환 결과를 저장하겠다는 것이다.. 우리가 원하는것은 함수를 대입하는 것이다 !

 

위와같이 window.onload 를 사용하면 문서가 로딩된 시점에 init 함수를 호출하여 사용할 기능들에 대해 초기화(선언)해준다.

또 html, css에서는 낙타표기가 아니라 btn-print 등의 표기를 사용한다.

 

이제 위와 같이 구조를 바꾸면 한번 변수 선언과 불필요한 이름 선언이 줄어든다.

 

 

아래와 같은 test.js 를 만들자.

 

 

html이 2개의  js파일을 내포하고 있는데.. 문제는 이 과정에서 onload 가 뒤에것으로 대체된다..

이를 방지하려면 이벤트를 누적하는 방식으로 바인딩해주어야 한다.

바로 addEventListener 이다.

 

위와 같이 해주면 된다.

 

 

간단한 사칙 계산기

 

위에 마우스를 얹으면 arithmetic operation해주는 계산기다

 

 

다행히 js의 변수들은 기본적으로 참조변수이기 때문에 위와 같이 var leftVal로 선언만 하고

getValue() 함수를 통해 호출해도 값이 연결된다. 포인터 변수를 생각하면 이해가 된다.

 

참고로 뉴렉쌤은 위와같이 readonly로 결과를 받아왔다.

 

아래는 뉴렉쎔 코드

 

innerText는 IE부터 쓰인 속성명으로, 범용적으로 사용되어 와서.. 표준아닌 표준이 되었고..

textContent는 웹표준이다.. 후자를 사용하는것이 더 바람직해 보인다.

 

노드 선택 방법을 위와같이 바꿀수 있다..

그리고 index 기준이 아닌 의미있는 이름으로 바꾸어보자.

 

 

Selectors API를 이용해서 바꾸어보자. CSS Selector 구문을 이용하여 노드를 선택할 수 있다. 편리하다.

 

아래처럼 querySelectorAll로 모든 Tag를 꺼내와서 하는 방법도 가능하다.

 

아래와 같이 name 을 지정하고 선택하는 방법도 있다.