프로그래밍/JavaScript 자바스크립트
-
자바스크립트 - 화면 좌표 찾기프로그래밍/JavaScript 자바스크립트 2021. 10. 1.
screenLeft, screenTop / screenX, screenY 모니터 최상단을 기준으로 좌표 값 여기선 자바 스크립트 코드를 HTML 아래로 빼야 한다. 먼저 작성을 하면 객체를 못찾음 event.screenX; event.screenY; 는 마우스의 좌표를 알려준다 다만 screen. 으로 시작되면 모니터 크기 상관없이 해상도 따라서 모니터 최상단 좌측을 기준으로 한다. 사진을 보면 빨간곳을 클릭했는데 10,10이 아니라 10,220이 나온 이유가 Y가 모니터 기준으로 들어갔기 때문이다. clientX, clientY document의 가장 위쪽 지점을 기준으로 마우스 좌표(스크롤은 무시) event.clientX client는 모니터 최상단이 아니라 문서의 최상단 즉 인터넷 창에서 즐겨찾기..
-
자바스크립트 - form에 접근하기프로그래밍/JavaScript 자바스크립트 2021. 10. 1.
document 객체 이름 : 생일 : 나이 : 확인 자바스크립트에서 document 즉 HTML 쪽에서 작성한 form에 접근하는 여러 방법들이 있다. 1. form에 이름을 주고 자바스크립트에서 이름으로 접근 = HTML form name = "myForm" = 자바스크립트에서 var f = document.myForm; 2. form의 인덱스 번호로 접근 = HTML 문서에서 첫번째 form에 접근 = var f = document.forms[0]; 3. form의 값에 접근하는 법 = var name = document.myForm.name.value; = 폼 태그 안에 있는 name 값을 가져옴 4. 객체의 이름 속성을 이용해서 접근 = var birth = document.getElements..
-
자바스크림트 - BOM프로그래밍/JavaScript 자바스크립트 2021. 9. 30.
BOM은 브라우저 오브젝트 모델의 줄임말. window 객체 - 팝업 창 팝업창열기 팝업창닫기 window 객체를 이용해서 팝업창을 열고 닫을 수 있다. window.open(url, 팝업창 이름, 창의 속성) 을 이용해서 팝업창을 만들 수 있음. 닫을때는 win.close(); 파일 2개를 가지고 해보기 ex02.html 1111-서울 2222-인천 3333-경기 4444-부산 5555-제주 zip.html 우편번호 확인 url 특성을 이용해서 폴더내 다른 html 파일에 접근 해본다. window.open(url, "zip", flag); => zip.html에 접근 HTML 내용은 form 태그로 감싸준다. form 태그의 name을 가지고 접근을 할거기 때문에 꼭 form을 써야 한다. zip.h..
-
자바스크립트 - apply / call / bind프로그래밍/JavaScript 자바스크립트 2021. 9. 30.
Function - apply(), call() 메소드 apply는 함수를 호출하는 다른 방법 중 하나이다. sum()이라는 함수를 호출 하려고 할 때 apply를 통해서 호출 하려면 sum.apply(null, [1,2,3]) 이렇게 해야한다. null의 위치에는 원래 this.뭐뭐 가 들어간다. 뒤에 인자는 대괄호로 덮어야 한다. (배열과 비슷해 보이지만 배열 아님) call은 apply와 동일한데 뒤에 인자 부분에 대괄호가 필요 없다. (대괄호는 안쓰는데 전달 받은 인수를 배열로 처리함. 리스트화) Function - apply(), call() 메소드 apply와 call을 이용하면 코드를 간소화 시킬 수 있다. obj와 obj2를 비슷한 기능을 하게 하고 싶은데 obj의 내용을 똑같이 obj2에..
-
자바스크립트 - 클래스프로그래밍/JavaScript 자바스크립트 2021. 9. 30.
클래스 자바처럼 비슷하게 클래스 생성이 가능한데 주의할 점은 자바스크립트에서 생성자는 무조건 constructor를 통해서 생성 해야함. 클래스 자바와 유사한 모습 클래스 대괄호 [] 안에 함수 이름을 넣어서 그걸 메소드 이름으로 사용하는게 있는데 잘 안쓰인다. 클래스 - getter, setter 자바의 게터 세터 getter / setter 와 비슷한 내용 _언더바는 그냥 변수 이름이다. naem의 메소드가 2개있는데 인자가 있냐 없냐에 따라서 기능이 다른것. obj.name = '홍길동' 이건 클래스 User의 객체 obj를 통해서 name(newName)을 호출한 것이랑 동일 클래스 게터 세터 응용한 모습 클래스 - 프로퍼티 클래스 - 상속 자바스크립트도 자바처럼 상속의 개념이 있다. 자바의 su..
-
자바스크립트 - 객체(3)프로그래밍/JavaScript 자바스크립트 2021. 9. 30.
객체 - 프로퍼티 동적 추가, 삭제 객체 - 프로퍼티 접근 및 나열 객체 - 속성 및 메소드 추가 객체의 속성을 제거 할 때는 delete obj.city 이런식으로 해주기 객체 속성에 접근할때는 . 붙여서 obj.name 이렇게도 가능 하지만, obj['name'] 이렇게 대괄호로도 가능하다. 객체 메소드에 접근할때는 꼭 괄호 붙여야한다. ex) obj.msg() 보통 속성이나 메소드 추가할때는 그냥 점 붙여서 한다. 없는 속성을 새로 추가하고 싶을때 = obj.score = 80; 정적 메소드 생성자를 만들 수 있다. 인자가 필요한 생성자 안에도 변수의 기본값은 설정 가능하다. 프로토 타입 객체에 프로퍼티나 메소드 추가. prototype 이용 프로퍼티를 이용하면 이미 존재하는 객체 안에 새로운 함수..
-
자바스크립트 - 배열 / 객체 (2)프로그래밍/JavaScript 자바스크립트 2021. 9. 30.
객체 만들기 객체를 선언과 동시에 초기화 할 수 있다. 그리고 만든 객체의 여러 정보들을 보고 싶을때 console.log로 좋지만 console.dir도 자세한 정보를 보여준다. obj2.subject = "자바"; 이런식으로 기존에 만들었던 객체에 속성을 추가 할 수 있다. var obj3 = { name : '홍길동', age : 20, state : function() { return this.age >= 19 ? '성인' : '미성년자'; }, msg : function() { // 메소드안에서 속성 및 다른 메소드를 호출할때 this 생략 불가 var s = `${this.name}님은 ${this.state()} 입니다`; console.log(s); } }; 그리고 이건 객체에 속성을 넣었..