ohmyfun ohmyfun

협업 프로젝트를 하다보면 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

js에서 변수를 선언할 때 a = 1; 이런식으로 선언을 해주면 이것은 전역 변수이다. 하지만 var a = 1; 이렇게 선언을하면 이것은 지역변수가 된다. 위 사진의 결과를 보면 알겠지만 add 함수에서 선언된 a는 전역변수이다 따라서 add 함수를 실행한 다음 console로 a를 출력하면 데이터가 제대로 출력이 된다. 하지만 add2 함수에서 선언된 b는 지역변수이다. 즉 add2함수 내에서만 사용가능한 변수라는 뜻! 따라서 b를 add2함수 밖에서 출력하면 에러가 발생하는 것을 할 수 있다. 함수내 함수 함수안의 함수에서는 부모함수의 지역변수를 사용할 수 있다.

js 함수 js에서 함수를 선언하는 방식은 총 3가지가 있다. 1.정규 표현식 var add = new Function("x,y","return x+y;"); js의 함수는 객체다. 객체를 선언한 후 var 참조변수를 사용하여 이름을 부여해줌 2.편의상 선언 방식 var add2 = function(x,y){ return x+y; } 3.편의상 선언 방식 function add(x,y){ return x+y; } js함수의 매개변수 js함수의 매개변수는 그냥 의미가없다. js의 매개변수는 값을 받는 그릇의 역활을 수행 하지 않는다. js의 funtion이라는 객체에 내부적인 컬렉션이 존재한다(arguments) 다른 언어에서는 함수의 매개변수 갯수에 맞게 함수를 사용해야하는데 위 사진처럼 매개변수를 여러..

js에서의 연산자들은 java나 c와 거의 모두 동일하다 하지만 다른게 하나 있다 === 와 !== 이다. ==는 java에서 데이터값을 비교하는 연산자 이다. js의 ===는 ==와 달리 데이터의 타입 까지 검사하는 연산자이다. 즉 데이터가 같아도 타입이 다르다면 false를 출력한다. 결과를 보면 숫자와 문자의 타입이 다르기때문에 === 가 false가 나온것을 볼 수 있다. 그리고 또 신기한것을 발견했다. js에서는 변수명이 다르더라도 그 값이 같으면 같은 메모리공간에 저장이된다.