다연이네

버튼을 누르면 공이 대각선 방향으로 움직이다가 끝에서 멈춘다. Click Me 공튀기기 코딩 공이 벽에 부딪히면 튀긴다. Click Me 버튼을 누르면 좌측 상단에 있던 공이 움직이기 시작하고, Click make 버튼을 누르면 누를때마다 새로운 공이 생성된다. Click Me Click make

해당 div태그들을 마우스 좌측 버튼을 이용해 드래그(이동)할 수 있다. 컴퓨터 TV 침대 책상 Drag me around 알아두기!! 마우스 관련 이벤트 1. onmouseover : 해당 영역위에 커서가 진입하는 순간 발생 2. onmouseout : 해당 영역에서 커서가 빠져나가는 순간 발생 3. onmousedown : 해당 객체의 영역에서 마우스 버튼이 눌려지는 순간 발생 4. onmouseup : 해당 객체의 영역에서 마우스 버튼이 떼는 순간 발생 5. onmousemove : 해당 객체의 영여겡서 커서가 움직이는 순간 발생 1. clientX, clientY 클라이언트 영역 내의 가로,세로 좌표 제공 (클라이언트 영역 : 현재 보이는 브라우저 화면이 기준이다) clientX : 브라우저 페이..

클로저 == 함수 폐쇄 js는 중첩함수를 지원한다. (함수 안에 함수 만들기) 부모함수가 닫힌 후에도 부모 범위에 접근할 수 있는 함수 + 중첩함수 test 버튼을 누를때마다 카운트가 증가한다. (클로저를 통한 접근) test 버튼을 눌러도 출력값이 1에서 변하지 않는다. 0에서 1증가해서 1이 되고 함수 호출 끝나면 지역변수 제거되고, 다시 호출되면 다시 0에서 1되고,.. 버튼 누를때마다 항상 0->1 되기 때문에 1만 반복되는 것이다. 지역변수는 함수를 호출할때마다 새로 만들어진다. 만약 지역변수도 있고 전역변수도 있다면 ? 그래도 1만 출력된다. => 똑같은 변수가 있다면 지역변수가 우선시 된다. (지역변수 카운터 먼저 쓰고 있다) test 9 출력, 지역변수가 전역변수보다 우선순위가 높다. te..

call()/apply() 메소드 객체를 매개변수로 사용하여 메소드를 호출하는 함수 위의 person1과 person2에서 이름, 나이 출력하는 print() 메소드가 중복된다. =>이 메소드만을 가지는 객체를 따로 선언하자 이 메소드를 호출하는 방법은 다음과 같다. person.print.call(person1); person.print.apply(person1); 위 상황에는 call과 apply가 같은 결과를 출력한다. 그렇다면 차이점은 무엇일까? 메소드에 자체 매개변수가 있을 경우 call()/apply() 사용에 차이가 있다.

js 객체 - js 기본형을 제외하면 모두 객체이다. - js 기본형 : string, number, boolean, null, undefined - js 객체(object) : Math, Date, 정규표현식, 배열, 함수(function), object ES5 (ECMAScript 2009) Getter, Setter 개념 도입 js Object Constructor(객체 생성자) 또는 js prototype 속성을 사용해서 객체 생성자에 새로운 속성을 추가할 수 있다. js 함수 closures(크로저) *** 나중에 중요하다 이게 function 함수명(매개변수...) { return 반환값; } 익명 함수를 x라는 변수에 담기 화살표 함수 사용 js Function() 생성자 자체 호출 함수 :..

1. JS 클래스 ES6 (ECMAScript 2015) - javascript 클래스를 도입했다. - class 키워드 + 항상 constructor() 함수(메소드) 추가 예시 2. form태그 유효성 검사 Name을 적지 않고 엔터친 경우 Age를 적지 않고 엔터친 경우 Name과 Age를 모두 적어야 페이지가 넘어간다. Name: Age: jquery로 수정 Name: Age: jQuery에서 이벤트를 취소하는 함수 event.preventDefault();

ES6(ECMAScript 2015) Arrow Function (화살표 함수) 추가 == 람다식 var hello = test; 처럼 test()가 아니라 함수명만 있다면? -> 함수 자체를 의미한다. 위 스크립트를 화살표 함수를 사용하여 수정해보자 this 1. 일반 무명(익명) 함수에서 this는? - 일반(무명)함수에서의 this는 함수를 호출한 객체를 나타낸다. window 객체가 load될 때 호출되는 hello에서는 this가 [object Window]이다. this 확인 버튼 btn1 객체가 click될때 호출되는 hello에서는 this가 [object HTMLButtonElement]이다. 즉, 같은 this라도 호출하는 객체에 따라 달라진다. 일반(무명)함수에서의 this는 함수를 ..

전역변수와 지역변수 1) 1. 100출력 2) 1.undefined 출력 함수선언보다 함수호출이 위에있어도 되지만, 변수가 함수호출보다 밑에 있으면 안된다. 왜 ? 자동으로 브라우저가 함수선언을 호출 위로 올린다. [ js hoisting ] : 변수선언, 함수선언 부분을 자동으로 맨 위로 이동시킨다. 3) 1.undefined 2.100 출력 밑의 2. n은 n이 함수 안의 지역변수라면 찍히지 않는다. "use strict"; 엄격한 모드 (변수를 선언후 사용하겠다 (var 선언하고 사용하겠다는 뜻)) 만약 전역변수로 form ="admin"을 선언한 후, 함수 내에서 form값을 변경하기 위해 다시 선언하는 과정에서 오타를 내 from = "hong"으로 작성했다. 그리고 출력은 form으로 하면 a..