[21.09.06] JavaScript#3

Object

객체.

자바스크립트 객체 표기법

{프로퍼티1 : 값1, 프로퍼티2 : 값2, ...}

var person={
	name : '토르',
	age : 400,
	email : '[email protected]'
};

for-in구문으로 객체의 프로퍼티에 접근하려면 문자열 인덱스를 사용합니다. 숫자가 아닌 객체의 프로퍼티가 인덱스가 됩니다.

for(x in person){
    //x=='name'
    output.innerHTML+=x+':'+person[x]+'<br>';
}

java처럼 new로 객체를 생성하거나 생성자 함수로 객체를 생성하는게 가능한데 비교적 권장하지는 않습니다.

자바스크립트의 객체는 자바의 클래스와 비슷함

  	var person={
  	  name : '유재석',
  	  phone : {
  	      home : '02-1234-5678',
  	      mobile : '010-1234-5678'
  	  }, //object 객체
  	  email : ['[email protected]','[email protected]'], //배열
  	  information : function() {
  	      return this.name+','+this.phone.home+','+this.email[0];
  	  } //method. this는 자기자신(person 객체)
  	};

객체 안에는 값만 들어가는게 아니라 객체, 배열, 함수가 들어갈 수 있어요.

기존에 없는 프로퍼티를 객체.프로퍼티3=값3; 으로 넣으면 객체(object)가 생성된 이후에 객체의 프로퍼티를 추가/삭제할 수 있음
프로토타입으로 생성자 함수에 프로퍼티 추가도 가능

Date

현재시간은 Date()로 객체생성하는 게 자바와 비슷함.

var curDate=new Date;

Date(년,월,일,시,분,초)로 날짜를 지정해서 가져올수도 있어요
월은 0부터 시작하기때문에 1월은 0으로 표기해야함.

getFullYear() : 년
getMonth() : 월 (0(1월)~11(12월))
getDate() : 일 (1~31)
getDay() : 요일 (0(일)~6(토))
getHours() : 시 (0~23)
getMinutes() : 분 (0~59)
getSeconds() : 초 (0~59)
getTime() : 1970년 1월 1일 0시 0분 0초 기준으로 milli-second(1/1000초)마다 1씩 증가된 시간

DOM(Document Object Model)

html에는 자체적으로 트리형식의 포함관계가 존재하는데요 그중 document는 모든 하위요소들의 최상위계급입니다.

표준 객체 모델
HTML을 위한 프로그래밍 인터페이스
모든 HTML 요소의 프로퍼티
모든 HTML에 접근하는 메소드
모든 HTML을 위한 이벤트

요소 접근하기

element.tagName : 요소의 이름
element.parentElement : 해당 요소의 상위요소 정보
element.children : 요소의 하위요소 여러개. 배열로 접근할 수 있다.
element.previousElementSibling : 같은 위치에 있는 요소 중 이전 요소. (코드기준 위)
element.nextElementSibling : 같은 위치에 있는 요소 중 다음 요소. (코드기준 아래)
element.firstElementChild : 첫번째 하위요소 정보

요소 찾기

getElementById('id'); : 같은 id의 요소가 여러개 있어도 처음나온 1개의 요소만 가져옴.
getElementsByTagName('tagName'); : 여러개를 가져올 수 있음. Object 타입.
getElementsByClassName('className'); : 여러개를 가져올 수 있음.
querySelectorAll('선택자') : 여러개.
querySelector('선택자') : CSS 선택자에는 클래스 ., id는 #으로 표기.
HTML Object Collection : body, form, images

onload

태그를 읽으면 실행하는 동작을 지정합니다.

<body onload="window.alert('반갑습니다')">
페이지 실행하자마자 alert가 실행됩니다.

event 핸들링

이벤트는 요소의 태그로도 지정할 수 있지만 보통 자바스크립트에서 하는게 좋다.

  <h1 id="title" 
  onclick="test1()" 
  onmouseover="test2()"
  onmouseout="test3()"> 이벤트 </h1>

onclick : 요소를 클릭했을 때 실행
onmouseover : 요소에 커서를 올렸을 때 실행
onmouseout : 요소에 커서가 없을 때 실행

title.onclick=function(){
   title.innerHTML='변경';
   title.style.fontSize='3em';
   title.style.fontWeight='bold';
}

이렇게 자바스크립트로 이벤트 핸들러를 등록할 수 있습니다.

<p onclick="change(this)">onclick 속성에서 js함수호출</p>
p 요소의 this는 p요소 자기 자신을 의미합니다.

그래서 change함수의 매개변수로는 <p onclick="change(this)">onclick 속성에서 js함수호출</p> 해당 html 태그가 넘어가요!

<input type="text" name="userName" id="userName" 
autofocus 
onfocus="changeBgColor(this)"
onblur="resetBgColor(this)" onchange="toUpper(this)">

autofocus : 자동으로 포커스를 받음
onfocus : 포커스를 받았을때
onblur : 포커스를 잃었을때
onchange : 입력된 내용이 바뀌었을 때(입력 후 엔터나 탭키를 눌렀을 때)
onkeyup : 키보드가 입력되었을 때마다

(21.09.29 추가)

Visibility

hidden : 요소를 갑춘다.
visible : 요소를 보여준다.

Display

none : 요소 공간을 감춘다.
block : 요소 공간 블록을 드러낸다.

Author And Source

이 문제에 관하여([21.09.06] JavaScript#3), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yeddoen/21.09.06-JavaScript3

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)