자바스크립트 기본문법 2 (입력과 데이터 가공: 이벤트, 객체)

 

이벤트

document.getElementById('form').onsubmit=function(){
 console.log('clicked');
}

이벤트에 대입하는 함수의 () 안에는 매개변수가 없고, {} 안에 return 명령어도 없음.

=> 매개변수와 반환 값이 없는 함수도 존재한다.

 

* onsubmit 이벤트는 전송버튼이 아닌 부모요소 form 에서 발생한다

 

 

입력 내용 가져오기

document.getElementById('form').onsubmit=function(){
        var search = document.getElementById('form').word1.value;
        document.getElementById('output').textContent=search+' 검색중...';
        return false; //폼의 기본 동작 '전송버튼 클릭시 데이터 전송' 취소
};

 

텍스트 필드나 텍스트 area의 입력 내용은 변수 search 처럼 읽어올 수 있다.

word1이 바로 form 요소 중 읽고 싶은 양식의 name 속성이다.

 

 

date 객체

기능

1. 현재 시간 가져오기
2. 과거나 미래의 시간 설정
3. 일시를 계산

 

초기화

 

Date 객체를 포함한 몇몇 객체는 new를 사용해서 초기화한 후 사용해야한다.

 

var now=new Date();

=> Date 객체를 사용해서 일시를 출력하거나 계산하기 위해 먼저 초기화한 후 그것을 now에 대입한다.

=> 매개변수를 생략했으므로 현재 일시를 기준일로 사용.

 

 

초기화가 필요한 객체 = 여러 개의 객체를 생성할 수 있는 경우

 

초기화 : 원본 객체의 완전한 복사본을 만드는 작업

변수에 저장된 복사본 객체는 원본과 동일한 메서드와 프로퍼티를 가지지만,

각각 독자적인 프로퍼티 값을 저장할 수 있다.

즉 기준일이 다른 date 객체를 여러개 만들 수 있다.

 

ex) math 객체 : math 객체의 프로퍼티는 읽기 전용, 객체별로 프로퍼티값을 저장할 수 없음. 초기화 x

window, document 객체 : 프로퍼티값 변경은 가능하지만, 브라우저 창이나 브라우저에 표시되는 html은 하나뿐이므로 초기화 x

 

 

 

 

math 객체

math객체의 프로퍼티에는 수학에서 사용하는 상수 8개가 정의되어있음. ex) Math.PI

var point=function(num,digit){
	var time=Math.pow(10,digit);		//Math.pow(a,b) : a의 b제곱
    return Math.floor(num*time)/time;	//Math.floor(숫자) : 소수점 이하 버리기
}

 

Math.random() 의 경우는 0~1 사이의 난수(임의의 수)를 생성한다. ex) 최대 0.99999

 

1 이상 임의의 정수를 사용하고 싶을 때 ( ex. 1~10, 1~6 등 )

Math.floor(Math.random()*숫자)+1

 

 

 

 

 

※ 상기 내용은 '처음 만나는 Javascript (제이펍)' 내용을 정리한 것입니다.