the Rabbit_Sand, IT Blog 🍀

이벤트의 종류 1. 고전 이벤트 모델(기본) : 요소객체를 가져와 해당 요소객체에 이벤트 속성으로 접근한 후에 이벤트 핸들러를 연결한다. - 이벤스 속성에 null을 대입하여 이벤트를 제거할 수 있다. - 동일한 이벤트를 여러 번 사용할 수 없고, 나중에 작성된 이벤트로 덮어쓰기가 된다. 고전 이벤트 버튼1 고전 이벤트 버튼2 2. 인라인 이벤트 모델 : 요소 내부에 직접적으로 이벤트 속성을 제시하여 실행할 내용을 정의한다. - 주로 script 태그에 정의돼있는 함수를 호출하는 방식으로 사용한다. - 이 모델은 구문이 길어지고 복잡해보여 잘 사용하지 않는다. 버튼 누르기 버튼 클릭 3. 표준 이벤트 모델(addEventListener) - 동일한 이벤트를 여러 번 사용할 수 있다. - 이벤트 대상 요소..

window용 객체 : JavaScript의 최상위 객체이며, 크게 BOM과 DOM으로 나뉜다. - BOM(Browser Object Model): location 객체, screen 객체, navigator 객체, history 객체 - DOM(Document Object Model): document 객체 1. window.open("url", "창 이름", "특성"); 1) 첫 번째 인자값: 새 창에서 열 url 주소 2) 두 번째 인자값: 창 이름, 같은 이름의 창이 이미 열려있으면 원래 열려있던 창에서 새로고침된다. 3) 세 번째 인자값: 창의 특성, 새 창의 너비와 높이, 툴바, 스크롤바, 상태표시줄 등(브라우저마다 다름) * 창의 특성 - yes/no, resizable(창 크기 조절 가능 ..

객체의 선언 및 호출 : 중괄호 {}를 사용하여 객체를 생성하고, {} 안에 객체에서 필요로 하는 속성들을 정의한다. - 속성값에 모든 자료형들의 값을 담을 수 있다. - 속성: key와 value 형태로 정의한다. - Java의 HashMap과 유사하다. var 변수명 = { 속성명1:속성값1, 속성명2:속성값2, ... }; - 객체 내부 속성에 직접적으로 접근하는 방법 : 방법1. 객체명['속성명'] var product = { pName:"냉장고", pCompany:"LG", pColor:["silver", "white", "black"] }; divE.innerHTML += product['pName'] + " "; // 냉장고 divE.innerHTML += product['pCompany']..

선언적 함수 : 매개변수가 없는 경우에는 매개변수를 생략할 수 있고, 반환값이 없을 경우에 반환값을 생략할 수 있다. function 함수명(매개변수1, 매개변수2, ...){ 해당 함수를 호출했을 때 실행할 소스코드; return 결과값; } 익명함수 : 주로 특정 변수나 속성에 대입되는 함수(이벤트 핸들러)를 제시할 때 사용한다. - 이벤트 핸들러: 이벤트 속성에 대입되는 function function(매개변수1, 매개변수2, ...){ 소스코드; } 함수의 매개변수 - 매개변수를 제시할 땐 자료형을 지정하지 않고 변수명만 작성한다. - 정의한 매개변수의 개수보다 많이 전달되면 초과된 전달값은 무시되고 개수 만큼 반환된다. - 정의한 매개변수의 개수보다 적게 전달되면 undefined가 반환된다. ..

배열 : JavaScript에서의 배열은 Java의 Collection과 유사하다. 변수를 선언할 때, 별도의 자료형을 지정하지 않기 때문에 모든 값들을 하나의 배열에 담을 수 있다. var arr = [1, 2.5, "키위", false, [5, 6, 7]]; - 배열의 0번 인덱스부터 마지막 인덱스까지 접근할 때 사용하는 반복문: for in문 for(var i in arr){ span.innerHTML = arr[i] + " "; } 배열의 선언 : 배열을 선언할 때, 배열의 크기를 지정한 채로 선언하거나 크기를 지정하지 않고 선언해도 된다. var arr1 = new Array(); // 배열의 크기 0 var arr2 = new Array(5); // 배열의 크기 5 var arr3 = []; ..

내장함수(문자열과 관련된 메소드) ◈ toUpperCase() : 영어 대문자로 만든다. ◈ toLowerCase() : 영어 소문자로 만든다. ◈ .length : 문자열/배열의 길이를 알려준다. ◈ .charAt() : 한 글자씩 반환한다. ◈ .indexOf() : 앞에서부터의 해당 문자의 위치를 반환한다. ◈ .lastIndexOf() : 뒤에서부터의 해당 문자의 위치를 반환한다. ◈ .substring(시작 인덱스) : 문자열에서 시작 인덱스부터의 문자열을 반환한다. ◈ .substring(시작 인덱스, 마지막 인덱스) : 문자열에서 시작 인덱스부터 마지막 인덱스 전까지의 문자열을 반환한다. ◈ .split() : 분할의 기준을 넣어 문자열을 분할한다. ◈ typeof() : 어떤 자료형인지 알..

변수 : 변수는 var나 let, const를 사용하여 선언할 수 있다. var와 let, const의 차이점 1. var ① 변수의 선언: 중복 선언O, 재할당O → var는 중복된 변수가 생기거나 값이 변경될 수 있기 때문에 이를 보완한 타입이 let과 const이다. ② 변수의 사용 범위(스코프): 변수가 선언된 함수 영역 내에서 사용할 수 있다. 2. let ① 변수의 선언: 중복 선언X, 재할당O ② 변수의 사용 범위(스코프): 변수가 선언된 블록({}) 내에서만 사용할 수 있다. 3. const ① 변수의 선언: 중복 선언X, 재할당X → 상수의 개념과 같음 ② 변수의 사용 범위(스코프): 변수가 선언된 블록({}) 내에서만 사용할 수 있다. 변수의 선언 위치에 따른 전역변수/지역변수 특정한 ..

HTML 요소에 접근하기 : 해당 요소 객체를 가져온다. 1. 아이디로 접근하기 : 선택된 요소의 속성들에 접근하여 속성값을 가져오거나 변경할 수 있다. - 선택된 요소.접근할 속성명 접근 2. 태그명으로 접근하기 : 태그는 중복이 가능하여 배열에 담겨서 반환된다. - document.getElementByTagName("태그명"); 목록1 목록2 목록3 목록4 목록5 접근 3. name 속성값으로 접근하기 : document.hetElementsByName("name속성값"); 취미 노래 부르기 게임하기 운동하기 접근 4. 클래스명으로 접근하기 : document.getElementsByClassName("class속성값"); 접근

window : 자바스크립트에 내장된 객체이며, 웹 브라우저 내에 존재하는 모든 요소들의 최상위 객체이다. → 모든 곳에 적용되기 때문에 생략할 수 있다. ex) window.alert ⇒ alert document : 웹 문서마다 하나씩 만들어지는 객체이며, HTML 문서에 대한 정보들을 가지고 있다. 데이터를 출력하는 기본 구문 1. window.alert("출력할 문구"); : 알림창을 띄워 문구를 출력시킨다. 2. window.console.log("출력할 문구"); : 콘솔창에 문구를 출력시킨다. 3. document.write("출력할 문구"); : 화면에 문구를 출력시킨다. - 문자열에 html 태그가 포함돼있으면 태그로 읽어온다. 출력 4. 선택한 요소.innerHTML/innerText ..

* 웹의 3요소는 HTML과 CSS, JavaScript이다. - HTML: 웹 문서의 뼈대를 담당한다. - CSS: 웹 문서의 스타일(색상, 테두리 등)을 담당한다. - JavaScript: 웹 문서 상에서 이벤트가 발생했을 때에 실행할 동작들의 처리(동적 효과)를 담당한다. 자바스크립트(JavaScript)란, : 웹 브라우저에서 가장 많이 사용되며, 인터프리터(interpreter) 방식의 스크립트 언어(scripting language)이다. - 인터프리터: 프로그래밍 언어의 소스 코드를 컴파일을 거치지 않고 바로 실행하는 프로그램을 뜻한다. 웹 브라우저에서 HTML 문서가 로딩될 때 코드를 한 줄씩 읽어내려간다. 코드에 문법적 문제가 있는 경우에 바로 알려주는 것이 아니라 실행 시에 알려준다. ..