달리는 자동차

JavaScript 정리5 본문

JavaScript,JQUERY/JavaScript

JavaScript 정리5

@또또 2020. 8. 25. 19:25

객체생성

1. function을 이용하여 객체의 속성지정

2. 메소드를 만들어서 속성을 어떻게 할 것인지 지정.

3.객체를 생성

ex) 자동차

공통적으로 이름, 엔진, 제작사, 색 -->속성

시동을 건다,달린다,커브를 돈다 --> 메소드

자동차를 만드는 것 --> 객체생성

<!--속성 선언-->
function makeCar(){//makeCar속성을 정의하는 함수의 이름
//속성은 this로 사용하여 선언
this.name; 이름 속성
this.company; 제조사 정의
this.color; 자동차 색 정의
this.numPeople; 탑승인원
this.meth=showCar; //이러한 자료들로 어떻게 할지에 대한 메소드 연결. 
showCar라는 메소드명을 지정하여 선언.
}

<!--메소드 생성-->
function showCar(){//메소드의 역할은 만든 자동차가 어디회사의 것인지
몇명이 탈수있는지 보여주는 기능을 한다.
document.write("자동차 이름:"+this.name+"<br/>");
document.write("자동차 제조사:"+this.company+"<br/>");
document.write("차량색상:"+this.color+"<br/>");
document.write("자동차 탑승인원:"this.numPeople+"<br/>");
}

<!--객체 생성-->
r8 = new makeCar(); 
//객체(만들상품)를 생성할 변수를 선언한 후 new라는 명령어를 사용하고 객체 속성을 선언한 함수 명을 적어준다.
//이렇게 하면 아무속성도 없는 깡통자동차 하나가 생긴것. 이제 속성을 부여해주자.
r8.name="R8";
r8.company="AUDI";
r8.color="white";
r8.numPeople=2;
r8.meth(); //showCar가 담긴 메소드 호출

다시정리

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>자동차 만들기</title>
<script>
function makeCar(){
	this.name;
    this.company;
    this.color;
    this.numPeople;
    this.meth=showCar;
}
function showCar(){
	document.write("자동차 이름 :" +this.name+"<br/>");
    document.write("자동차 제조사:" +this.company+"<br/>");
    document.write("자동차 탑승인원:" +this.numPeople+"<br/>");
    document.write("차량색상:" + this.color+"<br/>");
}

r8 = new makeCar();
r8.name="R8";
r8.company="AUDI";
r8.numPeople=2;
r8.meth();
</script>
</head>
<body>
</body>
</html>

만약 내가 람보르기니의 우루스를 만들고싶다.! 

그럼 아래 r8을 만든것처럼 객체를 다시 생성한다.

우르스 = new makeCar( );
우르스.name="우르스";
우르스.company="람보르기니";
우르스.color="Yellow";
우르스.numPeople=4;
우르스.meth();

 

셀렉터 : 선택자
-> 이벤트에 대한 학습을 위해서이다. 예를 들어 어떤 버튼을 클릭 후에 어떠한 명령문이 실행되게 하게끔 하는것이다.
CSS에서는 셀렉터에 대해서 학습할 때 ID또는 태그를 선택해서 style을 적용하였다.
JavaScript에서는 셀렉터를 생성하고 이벤트를 붙이는 방식으로 진행한다.
document.getElementsByClassName( )
document.getElementsByTagName( )
document.getElementsById( )
document.querySelector( )
document.querySelectorAll( ) 을 사용한다.

 

1. Class Selector

클래스 속성을 가진 태그의 셀렉터 생성방법

document.getElementsByClassName(클래스명)[순서];

클래스는 같은 이름으로 여러개를 생성할 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>자바스크립트</title>
<script>
	window.onload=function(){
	document.getElementsByClassName('hello')[2].style.color="red";
  };
</script>
</head>
<body>
	<p class="hello">Hello World</p>
    <p class="hello">Hello world</p>
    <p class="hello">Hello world</p>
</body>
</html>

window.onload=function( ){}가 없을 경우 p태그를 읽기 전 document.getElementsByClassName('hello')[2]가 실행되어 해당클래스들이 없기때문에 (인터프리터방식)실행이 안된다. 이럴경우 window.onload=function(){}을 사용하여 자바스크립트가 문서가 준비된 상황 이후에 발동하도록 하는 코드를 함께 사용해준다. 이것이 window.onload 메소드 이다.

window.onload 로 재정의(오버라이딩)하여 
함수 내의 코드를 웹브라우저 내의 모든 요소가 준비되어야 실행이 되도록 할 수 있다.

 

2. Tag Selector

태그도 같은 태그를 여러개 생성 할 수 있기 때문에 getElements를 사용한다. ClassName대신 TagName을 사용한다.

document.getElementsByTagName(태그명)[순서]; 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>태그 셀렉터</title>
<script>
	window.onload=function(){
    	document.getElementsByTagName('p')[1].style.color="red";
    };
</script>
</head>
<body>
	<p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
</body>
</html>



3. ID selector

id는 특성상 같은 아이디 명을 사용하지 않는 것이 규칙이다. 그래서 getElements를 사용하지 않고 getElement를 사용한다. 또한 인덱스도 없다. 아이디는 고유하기 때문에..

document.getElementById(ID명); 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>아이디 셀렉터</title>
<script>
	window.onload=function(){
    	document.getElementById('hello').style.color="red";
    };
</script>
</head>
<body>
	<p>Hello World</p>
    <p id="hello">Hello World</p>
    <p>Hello World</p>
</body>
</html>

 

4. querySelector

-CSS공부할때 정리 ->우선 skip

클릭 이벤트 생성
1. inline방식. = onClick사용
2. script태그에서 클릭이벤트 실행하기. =addEventLister() 함수사용

inline방식

태그에 onClick속성을 지정하고 값으로 실행문을 입력한다. 예를 들어 p태그를 클릭할 때 클릭 이벤트를 지정한다면,

<p onClick="명령문">click here</p>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>클릭 이벤트</title>
</head>
<body>
	<p onClick="alert('Hello');">클릭해</p>
</body>
</html>

 

Script태그에서 클릭이벤트 실행하기

addEventLister()함수안에 첫번째 아규먼트로 이벤트명을 입력하는 방식

선택자.addEventLister('이벤트유형',function(){명령문;}); 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>addEventLister()사용</title>
<script>
	window.onload=function(){
	var target = document.getElementsByTagName('p')[0];
 	target.addEventListener('click',function(){alert('Hello');});
 };
</script>
</head>
<body> 
	<p>click here</p>
</body>
</html>
마우스이벤트 생성 
-특정요소에 마우스 포인터를 올리면 색이 짙어진다던가 그림자가 생김 
-다양하게 마우스포인터를 올렸을 때, 클릭한 후 때는 순간 등등.

1. mouseover

-마우스포인터를 올렸을 때 이다.

-P태그 생성 후 p태그에 마우스 포인터를 올렸을 때 텍스트의 색을 변경 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>mouseover</title>
<script>
	window.onload=function(){
    var target = document.getElementsByTagName('p')[0];
    target.addEventListener('mouseover',function(){
    	target.style.color="blue";
    });
    };
</script>
</head>
<body>
	<p>here</p>
</body>
</html>

2. mouseout

-마우스 포인터가 떠날 때 이벤트이다.

-위의 코드에 mouseout 이벤트만 추가해놓으면 된다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>마우스 떠날때 색 원위치</title>
<script>
	window.onload= function(){
    var target=document.getElementByTagNage('p')[0];
    target.addEventListener('mouseover',function(){
    	target.style.color="blue";
    });
    target.addEventListener('mouseout',function(){
    	target.style.color="black";
        });
     };
</script>
</head>
<body>
	<p>here</p>
</body>
</html>

3. mousedown & mouseup

누르는 순간은 mousedown 떼는 순간은 mouseup이다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>마우스 올리고 떼기</title>
<script>
	window.onload = function(){
    var target = document.getElementsByTagName('p')[0];
    target.addEventListener('mousedown',function(){
	target.style.color="pink";
  	});
    target.addEventListener('mouseup',function(){
    	target.style.color="black";
    	});
	};
</script>
</head>
<body>
	<p>here</p>
</body>
</html>

위에서 사용한 이벤트들을 inline방식으로 사용한다고 하면 앞에 on을 붙인다

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>자바스크립트 마우스이벤트</title>
</head>
<body>
	<p
    onMouseover="this.style.color='red';"	//가까이가면 빨강
    onMouseout="this.style.color='black';"	//멀리가면 검정
    onMousedown="this.style.color='yellow';"  //누르는 순간 노랑색
    onMouseup="this.style.color='pink';">	//떼는순간 핑크색
    here
	</p>
</body>
</html>
스크롤 값을 확인하는 함수
document.addEventListener('scroll',function(){
});		 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>스크롤이벤트</title>
<script>
	document.addEventListener('scroll',function(){
    var currentScrollValue=document.documentElement.scrollTop;
    console.log('currentScrollValue is'+currentScrollValue);
    });
</script>
<style>
	div{height:2000px}
</style>
</head>
<body>
 	<div></div>
</body>
</html>

 

저작자표시

'JavaScript,JQUERY > JavaScript' 카테고리의 다른 글

JavaScript 정리4  (0) 2020.08.24
JavaScript 정리 3  (0) 2020.08.24
JavaScript 정리2  (0) 2020.08.22
JavaScript 정리1  (0) 2020.08.22
자바스크립트 함수  (0) 2020.08.18
'JavaScript,JQUERY/JavaScript' Related Articles more
Comments