전체 글(120)
-
JS | Event (이벤트)
1. Event (이벤트)- 이벤트는 '사건'- 브라우저에서의 사건(event)이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미한다.2. Event 종류1) Mouse Event- click : 마우스 클릭- dbclick : 마우스 더블클릭- mousedown : 마우스 버튼을 누르고 있을 때- mouseup : 누르고 있던 마우스 버튼을 해제할 때- mousemove : 마우스를 움질일 때 (터치X)- mouseover : 어떤 요소 위에 마우스가 위치할 때 (터치X)- mouseout : 어떤 요소밖으로 마우스가 벗어날 때 (터치X)2) Keyboard Event- keydown : 키를 누르고 있을 때- keypress : 키를 누..
2023.06.20 -
CSS | Function (함수)
1. 명명함수 - 이름이 있는 함수- 함수 선언 : function 함수명 (매개변수 선언) { ~ }- 함수 호출 : 함수명(매개변수) ;2. 익명함수 - 이름이 없는 함수 - 이벤트의 콜백 함수로 주로 사용한다 - 함수 선언 : function (매개변수 선언) { ~ }//명명함수function add(n1, n2){ var r = n1+n2; return r;}var res = add(3,2); //5console.log(res);//익명함수var f1 = function (n1,n2){ var r = n1-n2; console.log(r); return r;}f1(5,1); //4//함수의 매개변수로 다른 함수의 리턴값 넣기function mul(n1){ con..
2023.06.20 -
JS | Array (배열)
1. Array (배열)- 여러 데이터를 하나의 변수로 사용- 배열의 길이가 정해져있지 않고, 하나의 배열 안에서 요소들의 데이터 타입이 달라도 됨 - 자바에서의 Array보다 ArrayList와 조금 더 유사하다- Array 생성 1) 빈 배열 생성 var ar = [] ; 2) 데이터가 있는 배열 생성 var ar2 = [1,2,3] ; 2. Array의 주요 메서드1) pop() : 배열의 마지막 요소를 삭제한 후 해당 요소를 리턴 2) push(data) : 배열의 마지막에 새로운 요소를 추가한 후 해당 배열의 길이를 리턴 3) shift() : 배열의 첫번째 요소를 삭제한 후 해당 요소를 리턴4) unshift(data) : 배열의 첫번째에 새로운 요소를 추가한 후 해당 배열의 길이를 리턴..
2023.06.20 -
JS | Document API / Element API
1. Document API1) 하나의 요소(Element) 선택 : id로 접근 - [window.]document.getElementById("Id명");- 해당되는 id의 요소에 접근한다 2) 다중 요소 선택 : class, tag로 접근 - document.getElementsByClassName("")- document.getElementsByTagName("")- document.getElementsByName("")- 결과물은 모두 배열 (결과물이 한 개이더라도 배열임)3) form태그 선택 시 name속성의 값으로 선택 4) CSS Selector 사용- document.querySelector("css selector") : 선..
2023.06.20 -
JS | Window / BOM / DOM
1. Window1) Window 객체- 브라우저의 요소들과 자바스크립트 엔진, 그리고 모든 변수를 담고 있는 객체- window는 모든 객체의 조상으로 전역객체(글로벌객체)라고 한다. - 모든 객체를 다 포함하고 있기 때문에 window는 생략가능하다.- 속성(property, 변수)과 메서드가 있다.2) 사용법[window.]속성명또는메서드명()3) window 객체의 대표적 메서드 - alert("msg") : 메세지를 가지고 있는 대화상자를 띄운다 - prompt("msg") : 텍스트를 입력할 수 있도록 안내하는 선택적 메세지를 갖고 있는 대화 상자를 띄운다 - conform("msg") : 확인과 취소 버튼으로 구성된 모달창을 화면에 보여준다 - open() : 새 창 만들기 - op..
2023.06.20 -
JS | JavaScript 기본
1. Print- console.log("출력할 내용");- Web browser의 개발자모드의 console에서 출력 결과 확인 가능2. 변수 선언- var 변수명;- 자바스크립트는 var라는 키워드 하나로 변수를 선언한다3. 데이터타입- number : 숫자, 자바의 double과 동일- string : 문자열은 '' 또는 ""으로 감싸서 표현 - boolean : true, false- undefined : 선언하지 않았거나, 선언했지만 값은 지정하지 않은 경우의 값 - null : 명시적으로 값이 비었음을 나타낼 때 사용하지만, null을 할당한 변수의 typeof는 object- 문자 타입(char)은 없음 4. 연산자- 산술연산자 : +, -, *, /, %- 비교연산자 : >, =, ..
2023.06.20