1. Java Script
- HTML문서를 동적으로 만들어준다.1. Java Script DOM( Document Object Model )
- DOM 객체는 문서(HTML)내 요소(TAG)를 하나의 객체로 간주하는 개념이다.
- 태그안에 속성은 Object내의 Field로 간주한다.
- 문서 내 객체를 가져와 속성을 다루는 역할을 주로한다.2. DOM가져오기
<script>
var elemTag = document.getElementsByTagName('h1');
console.log(elemTag);//System.out.println();
var elemClass = document.getElementsByClassName('head2');
console.log('class : ',elemClass);
var elemId = document.getElementById('head3');
console.log('ID : ', elemId)
</script>- 자바스크립트의 변수는 데이터 타입이 없다. var에 다 넣으면 된다.
1. document.getElementsByTagName( ) : 문서 내에서 특정 태그를 갖는 요소들을 찾는다.(복수개)
2. document.getElementsByClassName( ) : 문서 내에서 특정 Class를 갖는 요소들을 찾는다.(복수개)
3. document.getElementById( ) : 문서 내에서 특정 ID를 갖는 요소를 찾는다(한 개)
4. console.log( ); ==System.out.println(); 3. query Selector
<script>
var elem;
elem = document.querySelector('h2');
console.log('h2',elem);
//.ex는 두개이지만 맨 위에있는 하나밖에 못가져옴
elem =document.querySelector('.ex');
console.log('.ex', elem);
//대신 다양한 방식으로 셀렉터를 사용할 수 있다.
elem = document.querySelector('div>p');
console.log('div>p :' , elem);
elem = document.querySelector('a[target="_blank"]');
console.log('a[target="_blank"] : ' , elem);
elem = document.querySelectorAll('button');
console.log(elem);
elem = document.querySelectorAll('p.ex');
console.log('p.ex',elem);
</script>- querySelector는 클래스나 태그여도 하나밖에 못가져와서 query Selectorall을 사용해야한다.
- 대신 다양한 방식으로 셀렉터를 사용할 수 있다.
- div>p : 자식객체 가져오기
- 'a[target="_blank"]' : 특정 속성을 가진 요소 가져오기
- 더블쿼터 안에는 싱글쿼터, 싱글쿼터 안에는 더블쿼터로 사용해야한다.4. Element내의 속성 활용하기
<body>
<a href="#" my-attr="head">링크 클릭</a>
<a href="#" my-attr="main">링크 클릭</a>
<a href="#" my-attr="footer">링크 클릭</a>
</body>
<script>
//a 태그의 href속성은 기본속성
//my-attr은 유저속성(내가 만듦)
var tags = document.getElementsByTagName('a');
console.log(tags[0]);//첫번째 태그 가져오기
//자바스크립트에서는 기본속성과 유저속성 모두를 다룰수 있다.
</script>- 자바스크립트에서는 기본속성과 유저속성 모두를 다룰 수 있다.
- a태그의 href속성은 기본속성, Element생성시 자동으로 부여된 속성이다.
- my-attr은 유저속성, 사용자가 Element에 명시한 속성이다.(사용자가 직접 만든거) <body>
<h1 id="p1"></h1>
<img id="image" src="../CSS/img01.jpg"/><br/>
</body>
<script>
var elem = document.getElementById('p1');
console.log(elem);
elem.innerHTML = "새로운 텍스트 등장";
elem.style.backgroundColor="yellow";
//속성을 변경하는 방식1 - 속성에 직접 접근<-유저속성을 다룰 수 없지만 편함
elem = document.getElementById("image");
console.log(elem.src);
elem.src = "../CSS/img02.jpg";
//속성을 변경하는 방식2 - set|getAttribute()
console.log(elem.getAttribute("src"));
elem.setAttribute("src","../CSS/img03.jpg");
</script>- innerhtml에 text도 들어갈 수 있기 때문에 innertext는 거의 쓰지 않는다.
- elem.innerHTML = "value" : html값을 변경한다( value값이 없으면 가져온다. )
- elem.style.backgroundcolor = "color" : 배경색을 변경한다.
- 특정 속성을 변경하는 방식
- elem.속성 ="" : 특정 속성에 직접 접근한다. 편하지만 유저속성은 다룰 수 없다.
- elem.getAttribute("속성") : 특정속성 값을 가져옴. 유저속성 가능
- elem.setAttribute("속성" ,"변경 값") : 특정속성 값을 변경. 유저속성 가능<body>
<input type="text" value="아무내용이나.."/>
<a href="#" my-attr="header">링크클릭</a>
<a href="#" my-attr="main">링크클릭</a>
<a href="#" my-attr="footer">링크클릭</a>
</body><script>
var input = document.getElementsByTagName('input');
console.log(input);
input[0].type = "button";
input[0].value = "click";
//input[0].onclick ="helle()";//onclick속성은 직접 접근으로 안된다.
input[0].setAttribute("onclick","hello()");
function hello (){
alert('HELLO');//실행문
}
var links = document.getElementsByTagName('a');
console.log(links);
for(var i=0; i<links.length;i++){
var attr = links[i].getAttribute("my-attr");
/*
if(attr == "header"){
links[i].innerHTML = '<h1>HEADER</h1>';
}
if(attr == "main"){
links[i].innerHTML = '<h1>MAIN</h1>';
}
if(attr== "footer"){
links[i].innerHTML = '<h1>FOOTER</h1>';
}*/
links[i].innerHTML ='<h1>'+attr.toUpperCase()+'</h1>';
}
</script>- input은 여러개로 배열 형태도 되어 있기 때문에 배열처럼 인덱스 지정을 해줘야 가져올 수 있다.
- input은 onclick속성에 직접 접근은 못한다. 자바스크립트에는 이렇게 직접접근 못하는 것들이 있다.
- for문 : attr에 my-attr의 값을 가져와서 하나씩 넣어주는 작업.
- toUpperCase() : 알파벳을 대문자로 바꿔준다5. event
- onload , onmouseover , onmouseout
<body onload="alert('loding 끝')"><!--태그안의 내용을 다 읽고나면-->
<div id = "over" onmouseover="mouseEvt('over')" onmouseout="mouseEvt('out')"></div>- onload : 태그안의 내용을 다 읽고나면 alert실행(창띄우는거)
- onmouseover : 마우스가 위로 올라왔을 경우
- onmouseout : 마우스가 특정 영역을 벗어 났을 경우function mouseEvt(evt){
//console.log('마우스 들어왔다.')
console.log('evt : ' + evt);
if(evt=='over'){
document.getElementById('over').innerHTML = 'mouse over';
over.style.backgroundColor='pink';
}
if(evt=='out'){
document.getElementById('over').innerHTML = "mouse out";
document.getElementById('over').style.backgroundColor='skyblue';
}
}- 함수를 선언할때는 접근제한자나 리턴타입 필요 없이 이름만 지정해 주면 된다.
- 64 : 만약 인자값 evt가 over라면 Id가 over인 요소의 HTML을 mouse over로 변경한다.
- 65 : Id가 over인 배경색을 pink로 변경한다
- id는 이런식으로 직접 바로 선언이 가능하지만 권장하진 않는다.
- 68 : 만약 인자값 evt가 out라면 Id가 over인 요소의 HTML을 mouse out로 변경한다.
- 69 : Id가 over인 배경색을 skyblue로 변경한다.- onclick
<h3>오늘의 날짜 : <span id ='demo'></span></h3>
<button onclick="getDay()">날짜 추출</button>- onclick : 클릭 했을 때
- span은 div처럼 어떤요소들을 묶을때 사용하는데 span은 inline이다function getDay(){
var date = new Date();
console.log(date);//date를 span태그 안에 띄우기
document.getElementById('demo').innerHTML = date;
}- new Data()는 현재시각을 의미한다.
- 날짜 추출 버튼을 클릭 했을때 id가 demo인 태그에 현재 날짜와 시간이 추출되게 된다.- onkeydown, onkeyup
<h3>입력한 값 :<span id = "typing"></span></h3>
<input id="keyon" type="text" onkeydown="typing()" value=""/>
<input id="keyup" type="text" onkeyup="typing2()" value=""/><br/>- onkeydown : 키가 눌렸을 경우
- onkeyup : 키가 눌렸다 떼졌을 경우 function typing(){
var val = document.getElementById('keyon').value;
console.log(val);
document.getElementById('typing').innerHTML = val;
}
function typing2(){
var val = document.getElementById('keyup').value;
console.log(val);
document.getElementById('typing').innerHTML = val;
}- typing() :키가 눌렸을 경우 Id가 typing인 태그에 그 키를 입력받게 된다.
- typing2() : 키가 눌렸다 떼졌을 경우 Id가 typing인 태그에 그 키를 입력받게 된다.- onchange
<select id="mySelect" onchange="selectEvt()">
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Benz">Benz</option>
<option value="Volvo">Volvo</option>
</select>- onchange : html문서가 변경이 있을경우 작동 function selectEvt(){
var selectVal = document.getElementById('mySelect').value;
console.log(selectVal);
document.getElementById('typing').innerHTML =selectVal;
}- id가 mySelect인 태그의 문서 변경이 있을 경우 id가 typing인 태그에 입력받기 <!--this는 현재 태그를 의미한다.-->
<input id="getelem" type="button" value="온클릭" onclick="getElem(this)"/>- 함수 인자값에 this를 넣어주면 현재 태그를 의미한다. function getElem(elem){
//document.getElementById("getelem").type = "text";
console.log(elem);
elem.type = 'text';
elem.value = '이건 텍스트야';
}- this를 넣어준 인자값 자리에 변수를 넣으면 그 태그의 속성을 직접 변경할 수 있다.
개발이좋아요