BackCoder

- JS 로 이벤트를 처리하는 방법은 크게 3가지다. - [3가지 방법]이 다 쓰인다. 최근엔 Listener 방식을 많이 사용! [ 1. html 태그 속성 추가 방식 ] 장점 - 설정,가독성 좋다 ( 호출함수까지 한번에 볼수있음 ) 단점 - html 태그 부분과 JS 이 독립성이 없다. - 같은 태그에 대해 같은 이벤트 발생시 처리함수 1개만 가능 - 이벤트 처리 등록했다가 다시 해제 불가능 [ 2. DOM 방식 ] document.querySelector(" ").onclick = function(){ }; 이미 정의된 함수가 있다면 document.querySelector(" ").onclick = f1; 장점 - html 과 JS 코드분리 된다. 독립적 - 같은 태그에 대해 같은 이벤트 발생시 ..

[ JS로 HTML 태그 속성 get set 하기 ] let qr = document.querySelector("input"); -속성값 set 하기 ( hobbit 으로 잘못줬다. 다시 set 하자 ) qr.setAttribute("속성이름", "속성값"); qr.setAttribute( "name" , "hobby" ); : name 속성을 hobby 로 set ( 있었으면 오버라이딩하는거고, 없었으면 새로 만드는 것 ) -속성값 get 하기 alert(qr.getAttribute("name")); : name 속성값 줘 => hobby alert(qr.name); ( 그냥 이거랑 같은기능 ) => hobby -속성값 있는지 확인하기 qr.hasAttribute("id"); => true -속성값 r..

(Document Object Model) DOM 트리 - HTML 구성요소들을 정리해보니, 나무모양이더라. - 구성요소들을 태그 / 속성 / innerHTML 내용별로 이렇게 부르겠다. 1.요소노드 ( 태그 ) 2.속성노드 ( 속성 ) 3.텍스트노드 ( innerHTML ) DOM 방식은 -html 태그 형태를 HTML => JS 형태로 변환시켜 DOM var h1 = {id : "xx", style : xx, } let ele = document.getElementById.innerHTML; DOM 객체로 요소를 가져와서 사용하는 방식을 말한다. [ DOM객체로 요소가져오기 ] [ getElement 4형제 ] 1. getElementById("hobby"); :아이디로 가져오기 ..

[ 웹브라우저용 객체들 ] [ history ] 뒤로버튼 앞으로버튼 뒤로버튼 앞으로버튼 [ location ] .href 연결 => 링크걸기 document.getElementById("move").onclick = function(){ location.href = "http://www.google.com Mozilla (브라우저 계열) navigator.platform => 윈도우 navigator.userAgent => 코드네임, 플랫폼, 웹브라우저종류, 등등 다 알려줌 (만능) : Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36 if( navigat..

[ 브라우저 관련 내장된 객체 ] [ window - 창 객체 ] => 팝업으로 자식창 만들고, 부모창과 데이터 주고받게 해줌 (1) 새 창(웹브라우저) 만들기 window.onload = function(){ document.getElementById("openWindow").onclick = function(){ window.open ( "newPage.html", "new page", "width=400, height=500, left=50, top=50, resizable=yes, location=yes"); } } open ( "오픈할 html파일 / URL", "창제목title", "넓이, 높이, x위치, y위치, resizable, location ); resizable => 크기조정 loc..

[ 함수 가지고 놀기 ] 0. : 넘치면 버리고, 없으면 없는대로 실행은 시켜준다. function t2( p,q ){ document.write( "test"+ p + q );} - 매개변수 2개를 취하는 함수다. t2(7,9); => test79 t2(7,9,8); => test79 t2(7); => test7undefined - 매개변수를 넘치게주면 앞부분 필요한 매개변수만 받고, 뒤에 넘치는 부분은 무시하고 그냥 실행시켜준다. - 매개변수를 부족하게 주면 준 부분만 실행하고 부족한 부분은 undefined 로 실행시켜준다. 1. function outer(){ function inner(){document.write("Hello!")..

[배열] Array (자바에서 배열은 정적인 크기 동일타입 데이터만 저장 ) JavaScript => 동적인크기 => 모든타입 데이터 저장 ( ArrayList랑 유사 ) [ 값 집어넣기 ] 1. 하나하나 넣기 var a = [ ]; - 크기 안정하고 이렇게 생성 가능 (동적) a[0] = 1; a[1] = "java"; a[0] = 10; => 오버라이딩 a[99] = 99; => 순서대로 넣을 필요없이 원하는 index에 넣을 수 있다. a.length => 100 (비어도 길이로는 인정) a.push(100); : 배열의 가장 끝에 추가 => a[100] = 100; => 계속 push로만 넣으면, 빈값없이 집어넣을 수 있다 a.pop( ); : 현재 배열의 가장 끝을 삭제 => a[100] = 1..

[ 객체 ] -------------- class A{} A a1 = new A(); => JS 에선, 이걸 간소화 시켜 사용한다. (1) 기본 literal 객체정의 let c1 = { id : 100, name : "June", salary : 4500.99, f1 : function(){} }; - 전형적인 JS 에서의 객체 모습이다. => 이게 "JSON 형식" : 이 형식은 통신할 때 다른 언어프로그램 에서도 모두 인식이 되는 약속된 형태 (2) 생성자 함수 이용 function emp(id, name, salary){ this.id = id; this.name = name; this.salary = salary; this.f1 = function()..

- 브라우저 화면에 canvas를 깔고, => 그 위에, 삼각형 원 글씨 이미지등을 JavaScript 를 사용해 그려낸다. 1. 캔버스 만들기 - id / width / height 필수 : HTML 에서 태그로 만들고 ( style=border 줘서 영역 표시해서 사용하면 편함 ) 2. 캔버스랑 펜 준비 : 에서 그린다. let paper = document.getElementById("a"); //캔버스 let pen = paper.getContext("2d"); // 펜 - 사실상 2d 만 거의 사용 (소문자 d) 3. 붓으로 그리기 - 사각형메소드 ( x, y, width, height ) : 왼쪽부터x 위쪽부터 y, 가로 세로길이 pen.strokeRect(50, 50..

: 이벤트가 처리되는 타이밍 1) 사용자 호출 즉각 실행 2) 이벤트 처리기 등록 - 이벤트 발생시 마다 (onclick) 3) 10분후 1번만 / 1분에 1번씩 타이머 설정 let timer1 = setInterval( 함수, 1/1000초시간 ); - 시간간격마다 함수 실행 ( 무한반복 ) setInterval 가 걸린 함수를 timer1 변수에 담고, function(){clearInterval( timer1 );} : timer1 에 걸린 Interval을 clear 하고 정지시키겠다. setTimeout( function(){clearInterval( timer1 )}, 10000); : 10초후에 정지시키겠다. setTimeout( 함수, 1/10..