본문 바로가기

프로그래밍/JavaScript

 (27)
JavaScript_객체 내장 객체 : 미리 정의되어 있는 객체 → 문서 객체 모델(DOM) : 문서 뿐만 아니라 웹 문서 안에 포함된 이미지, 링크, 텍스트, 필드 등 모두 객체로 관리된다. → 브라우저 객체 모델(BOM) : 웹 브라우저에 정보를 객체로 관리 DOM은 HTML, XML 등의 웹 문서의 내용과 구조를 객체로 관리하는 반면에 BOM은 웹 브라우저의 창, 화면, URL 등과 같은 브라우저 정보를 객체로 관리한다. DOM과 BOM은 역할이 다르며 둘 다 사용해야 한다. 사용자 정의 객체 (스스로 생성) 객체 리터럴 타입 예제
JavaScript_이벤트 마우스 이벤트 키보드 이벤트 폼 이벤트 문서 로딩 이벤트 이벤트 예제 - click 상세보기 열기 멍멍 왈왈 상세보기 닫기
JavaScript_함수 함수 선언 (함수 정의) : function 예약어를 사용하고, { }안에 실행해야 할 명령어를 작성 함수 선언시 주의해야 할 것 ! 함수 호출 시 HTML 요소 중 렌더링이 완료되기 전에 호출하는 코드를 실행한다면 요소를 찾을 수 없어 오류가 발생한다. 함수 호출 (함수 실행) : 함수 이름을 사용해서 함수를 실행 let과 const let - 프로그램 안에서 값이 변할 수 있는 변수 const - 프로그램 안에서 값이 변하지 않는 상수 매개변수(parameter)와 인수(argument) 차이점 매개변수 (parameter) - 함수를 실행하기 위해 필요하다고 지정하는 값 - 함수를 선언할 때 함수 이름 옆의 괄호 안에 매개변수 이름을 넣음 function addNumber(a, b) { // 매개변..
JavaScript_자료형 JavaScript 자료형 : 컴퓨터가 처리하는 자료의 형태 숫자형 정수 - 소수점이 없는 숫자, 표현 방법에 따라 8진수, 10진수, 16진수 실수 - 소수점이 있는 숫자, 자바스크립트에서는 정밀한 실수 계산을 못함 ! .toFixed() 사용 예제 문자형 : 홑따옴표, 쌍따옴표로 표기한다. 논리형 : true, false undefined : 자료형이 정의되지 않았을 때의 상태 null : 처음에 할당된 값이 더이상 유효하지 않다는 의미 배열 : 하나의 변수에 여러 값을 저장, 인덱스 0부터 시작, [ ] 대괄호를 사용한다. → 자바에서 배열은 연관된 데이터를 통으로 관리하기 위해 사용하고, 자바스크립트에서 배열은 서로 연관되지 않은 데이터를 담아 사용할 수 있다. 객체 : 여러 자료형을 중괄호 { ..
JavaScript_컴파일러 VS 인터프리터 컴파일러 VS 인터프리터 컴파일러는 개발자가 작성한 원시 코드를 컴퓨터가 인식할 수 있는 파일로 변환 시켜서 프로그램을 실행시킨다. 인터프리터는 실행 시간에 코드를 해석하여 컴파일 과정 없이 프로그램을 실행한다.
JavaScript_.querySelector와 .innerHTML .querySelector : document.querySelector()는 제공한 선택자 또는 선택자와 일치하는 문서 내 첫번째 element를 반환한다. (일치하는 요소가 없으면 null 반환) .innerHTML : innerHTML은 요소 내에 포함된 HTML 또는 XML 마크업을 가져오거나 설정한다. 예제 결과화면
JavaScript_함수 ① 함수란 ? 자바스크립트 코드를 저장한다. function이라는 키워드를 이용하여 선언한다. 출력문, 제어문 등의 코드를 저장하고 데이터를 반환한다. - 기본 함수 정의문 function myFnc(){ document.write("hello"); ... } myFnc(); //함수 호출 한 번 myFnc(); //함수 호출 두 번 결과 hellohello - 일반 함수 정의 vs 익명 함수 선언 참조 testFnc(); //§ 호이스팅 function testFnc() { 자바스크립트 코드; } → 일반 함수는 함수 정의문보다 호출문이 먼저 나와도 함수 정의문을 끌어올려 함수를 호출할 수 있다. testFnc(); // 호이스팅X var testFnc=function() { 자바스크립트 코드; } →..
JavaScript_객체 ① 객체의 종류 내장 객체 : 문자(String), 날짜(Date), 배열(Array), 수학(Math), ... 브라우저 객체 모델(BOM) : window, screen, location, history, navigator, ... 문서 객체 모델(DOM) : , , , ... 참조변수(인스턴스 이름)= new 생성함수() - 수학 객체 종류 설명 Math.abs(숫자) 절댓값 반환 Math.max(숫자1, 숫자2, 숫자3) 가장 큰 값 반환 Math.min(숫자1, 숫자2, 숫자3) 가장 작은 값 반환 Math.pow(숫자, 제곱값) 거듭제곱 값 반환 Math.random() 0~1사이의 난수 반환 Math.round(숫자) 소수점 첫째 자리에서 반올림하여 정수로 반환 Math.ceil(숫자) 소수..

티스토리툴바