WEB/JavaScript

WEB/JavaScript

[Javascript] BOM - window

🔻window 객체🔻 최상위 root 객체이다. window. 생략이 가능하다. 메소드 window.open(URL, name, options) : url 주소 페이지를 새창을 통해 나타낸다. URL : 새창의 URL (외부/내부 URL) name : 새창 이름 (빈 칸으로 두면 새창이 계속 열리고, 지정하면 창이 하나만 열린다.) options : 새창 옵션들 (주로 크기를 설정한다.) window.close() : 현재 윈도우를 닫는다. 🔶새 창 열기 및 닫기 window 객체 창 제어하기 window.open이 object 를 반환하는 특성을 이용한다. 새로 생성한 자식 창을 child 변수로 저장하여 새 창에 접근할 때 child로 접근한다. 🔶자식창에서 부모창 접근하기 자식 페이지 부모창의 wi..

WEB/JavaScript

[JavaScript] HTML 속성 조작하기

🔻HTML 속성 조작하기🔻 1. 태그를 찾아 속성을 조작할 수 있다. 2. 내용물(PCDATA)을 조작할 수 있다. 🔶조작 규칙 1. HTML의 대부분 속성은 JavaScript에서 동일한 이름의 프로퍼티로 제공한다. txt1.value = '홍길동' 2. HTML 속성명이 복합어로 되어 있으면 JavaScript에서는 캐멀표기법으로 제공한다. txt1.maxLength = 5; 3. 플래그 타입의 속성은 boolean 값으로 조작한다. txt1.readOnly = true; 4. 열거형 타입의 속성 및 색상 속상은 문자열로 조작한다. window.document.body.bgColor = 'blue'; 🔶조작 하기 JavaScript로 태그의 속성 제어하기 버튼을 누를 때마다 배경색이 변경되고 버튼의 ..

WEB/JavaScript

[JavaScript] Event Handling + 마우스 이벤트 + 키 이벤트

🔻Event🔻 객체에서 발생하는 사건 언제 발생할지 예측 불가능하다. 🔻Event Handling🔻 이벤트를 처리 및 등록한다. 언제 발생할지 예측 불가능한 사건에 대비하여 미리 처리할 코드를 준비한다. 사건이 발생하면 준비한 코드를 자동으로 실행할 수 있다. 오라클의 트리거 개념과 유사하다. 이벤트 등록 onXXX 속성(프로퍼티)로 제공한다. 1. 정적 이벤트 HTML 태그에 적용한다. btn2 클릭시, text box에 '홍길동' 삽입된다. 2. 동적 이벤트 자바스크립트에서 사용한다. Event btn3 클릭시, text box에 '홍길동' 삽입된다. 🔻마우스 이벤트🔻 onmouseXXX 으로 제공한다. 1. onmouseover / onmouseenter 해당 객체 영역에서 마우스 커서가 진입하는 ..

WEB/JavaScript

[JavaScript] BOM(Browser Object Mode)

🔻HTML 계층 구조🔻 HTML 계층 구조는 Tree 구조로 이루져있다. 그 조직을 이루는 방식이 BOM, DOM이 있다. 1. BOM 초창기 모델, 현재도 사용하고 있다. 선택적 모델 : 계층 구조에 일부 태그만 포함되어 있다. 계층 구조에 포함되지 않은 태그는 조작이 불가능하다. 조작 가능 태그 : 이미지, 링크, 폼태그 접근 방법 : 태그의 name을 사용하여 검색한다. (id, class는 인식할 수 없다.) 최상위 계층은 window 이다. 2. DOM 현재 발전된 모델 전역 모델 : 계층 구조에 모든 태그가 포함되어 있다. 모든 태그 조작이 가능하다. 🔻BOM(Browser Object Mode)🔻 html, css를 조작한다. JavaScript를 사용하여 브라우저 창의 크기, 위치, 히스토..

WEB/JavaScript

[JavaScript] 배열, Array (선언, 대입, 꺼내기)

🔻배열, Array🔻 자바 Array의 외형과 ArrayList의 성질(길이가변, 자료형object)을 가지고 있다. Array 내장 객체를 사용한다. 배열 선언 및 대입하기 초기화 리스트 값 추가 및 꺼내기 push와 pop 사용이 가능하다.

WEB/JavaScript

[JavaScript] Date 객체

🔻Date 객체🔻 자바스크립트는 클래스가 없어서 내장 객체라는 것을 제공하여 그것으로 객체를 생성한다. 날짜/시간을 표현할 때는 Date 객체를 사용한다. 현재 날짜/시간 가져오기 자바스크립트는 date자료형이 없고 number, string, boolean 외의 object로 다룬다. 요소 추출 getDate(), getMonth(), getFullYear(): 날짜를 반환한다. getHours(), getMinutes(), getSeconds(): 시간을 반환한다 . 출력하기 toString() : 문자열로 변환하여 출력합니다. toLocaleString() : 현재 날짜와 시간을 지역화된 문자열로 반환한다. toLocaleDateString() : 현재 날짜를 지역화된 문자열로 반환한다. toLoc..

WEB/JavaScript

[JavaScript] 문자열 함수

🔻문자열 함수🔻 길이, 검색, 대소문자 변환, 추출, 치환, 공백제거, 분할, 검색, 자릿수 채우기 등이 있다. 거의 자바와 사용법이 유사하다 문자열 길이 length : 문자열의 길이를 반환한다. 검색 indexOf(substring), lastIndexOf(substring): 부분 문자열의 첫 번째 등장 인덱스와 마지막 등장 인덱스를 반환한다. 찾지 못한 경우 -1을 반환한다. 대소문자 변환 toUpperCase() : 문자열을 모두 대문자로 변환한다. toLowerCase() : 문자열을 모두 소문자로 변환한다. 추출 substring(start, end) : 지정한 인덱스의 문자들을 잘라내어 새로운 문자열을 반환한다. substr(start, end) : 문자열에서 지정한 위치부터 지정한 길이만..

WEB/JavaScript

[JavaScript] 형변환 (parseInt, parseFloat) + isNaN

🔻형변환, Casting🔻 형변환 내장 함수(Built-in Function) 1. number parseInt(value) : value를 정수로 변환한다. 2. number parseFloat(value) : value를 실수로 변환한다. number parseInt(value) 변수의 값을 절삭하여 정수로 반환한다. 숫자를 문자형으로 표현한 데이터도 정수로 변환이 가능하다. 단, 문자데이터만 있는 경우 NaN 값을 반환한다. (NaN : Not a Number, 숫자가 아니다) 숫자가 앞에 나오면 앞에 나온 숫자만 인식하여 반환한다. javascript에서 css 조작할 때 위와 같이 사용하기도 한다. number parseFloat(value) parseInt 와 동일하다. boolean isNa..

WEB/JavaScript

[JavaScript] 변수의 스코프

🔻Scope, 스코프🔻 변수의 생명주기 및 변수 영역을 의미한다. 자바의 스코프 멤버 변수 : 클래스 전역에 존재 지역 변수 : 메소드&제어문 전역에 존재 자바스크립트의 스코프 전역 변수 : 한 페이지 내에서만 존재 var 키워드 없이 선언한 변수는 모두 전역 변수이다. 지역 변수 : 함수&제어문 전역 존재 자바스크립스트의 지역 변수는 함수 단위 지역변수이다. 함수만 자기 영역으로 인식한다.(함수 스코프) 제어문은 영역으로 인식을 못한다. 전역변수 지역변수 주의할 것❗ 1. 조건문 내에서 선언한 변수는 전역변수이다. 2. var 키워드 없이 선언한 변수는 모두 전역 변수이다.

WEB/JavaScript

[JavaScript] undefined와 진성 비교 연산자(===, !===)

🔻'값 없음' 표현🔻 1. null : 개발자가 의도적으로 비어놓은 상태 2. undefined : 변수가 선언된 직후 상태(초기화되기 전 상태) 🔻진성 비교 연산자🔻 일반 연산자 ==, != 자료형 비교를 하지 않는다. 값만 비교한다. 진성 비교 연산자 ===, !=== 자료형 비교와 값 비교를 한다. null과 undefined의 자료형은 같지 않다.

developer of the night sky
'WEB/JavaScript' 카테고리의 글 목록 (5 Page)