ohmyfun ohmyfun

html 번호1 번호2 수행할 이벤트 1.버튼1번을 누르면 li첫번째 번호1 text가 hello로 변한다. 2.버튼2번을 누르면 li두번째 번호2 text가 wrold로 변한다. js window.addEventListener("load", function(){ var sec1 = document.getElementById("sec1"); var btn = sec1.getElementsByClassName("btn1")[0]; var btn2 = sec1.getElementsByClassName("btn1")[1]; var lis = sec1.getElementsByTagName("li"); btn.onclick = function (){ lis[0].textContent = "hello"; } btn..

html + = js window.addEventListener("load", function(){ var section = document.getElementById("section"); var inputs = section.getElementsByTagName("input"); var textx = inputs[0]; var texty = inputs[1]; var textresult = inputs[2]; var btn = inputs[3]; btn.onclick = function (){ var x = parseInt(textx.value); var y = parseInt(texty.value); textresult.value = x+y; test.value = x+y; } });

html + = js window.addEventListener("load", function(){ var textx = document.getElementById("text-x"); var texty = document.getElementById("text-y"); var result = document.getElementById("text-result"); btn.onclick = function (){ var x = parseInt(textx.value); var y = parseInt(texty.value); result.value = x+y; } });

협업 프로젝트를 하다보면 html부분과 js부분을 2명의 개발자가 따로 개발할 상황이 발생할 수 도 있다. 하지만 지금까지 작성한 코드들은 html과 js부분이 함께 작성되어있기때문에 분업화하기가 까다롭다. 하지만 js와html부분을 따로 개발하여 연동하면 이 문제를 해결할 수 있다. 다음과 같이 js부분을 따로 개발하여 바인딩해주면 아무런 문제가 없다! 하지만 js부분이 2개가 있다면 어떻게될까? 다음과 같이 작성하면 js이벤트를 둘 다 읽지 못한다 왜냐 첫번째로 읽어들인 이벤트를 두번째에서 초기화되어 두번쨰 이벤트만 실행되기때문이다. 이를 해결하기위해 이벤트를 누적해주는 window의 내부객체(addEventListener)를 사용한다. 다음과 같이 코드를 작성하면 event들이 누적되어 모든 이벤트..

개발자는 항상 가독성이 좋은 코드를 작성해야한다. 아래의 코드를 보자 하이요 init함수를 보면 btnprint.onclick = add; 부분이 있다. 이는 add함수를 만들고 또 대입함으로써 불필요한 작업이다. 이를 수정해보겠다. 하이요 add함수를 그냥 바로 대입시켜줌으로써 두번해야하는 작업을 한번으로 줄였다. 이때 함수이름명 add를 생략해도된다 그러면 아래와 같이 이름이 없는 함수 즉 익명함수가 된다. 하이요 다음으로 window객체의 하위객체 onload를 사용하여 init함수를 window를 모두 읽어들인 후 실행한다. 이 또한 init함수 앞에 바로 기입할 수 있다. 하이요 처음 코드와 수정한 코드의 차이를 보면 가독성이 정말 좋아졌다는것을 볼 수 있다.

js는 코딩 순서대로 로딩이 됩니다. 하이요 다음과 같이 코드를 작성하였다. id가 btnprint인 객체를 클릭하면 add함수가 실행되어 id update 의 innerText를 변경하는 내용이다. 하지만 이코드는 제대로 실행되지 않는다. 그 이유는? 코드 순서상 script가 모두 읽어진후 html부분이 읽혀지기 때문에 click을 해도 아무런 이벤트가 실행되지 않는다. 그럼 해결 방안은? script부분은 html아래로 이동 시키면 된다. 하이요 이런식으로 하지만 또 다른 방법이 존재한다. window의 onload 객체를 사용하여 window창(브라우저 창)을 모두 읽은후 해당 함수를 실행하게 하는 법이다. 하이요 이런식 하지만 이건 잘못된 스크립트 작성 방식이다 해당id의 객체를 읽을때 이런식으..

window객체 window 창 전체를 의미 window.history객체 뒤로가기버튼 객체 window.location객체 주소창 객체 window.document(input,image,form)객체 페이지의 구성 객체 이때 history , location , document 는 window객체의 하위 객체들이다. 사용자와 상호작용할 수 있는 대화상자 alert ,prompt ,confirm prompt confirm