자바스크립트
실행 환경 {
‘IDE’ : ‘Eclipse’
‘Java_Version’ : ‘JDK 1.8’
‘Browser’ : ‘Chrome’
}
자바스크립트 심화-1
파일명 : ex05.html
객체를 만들어서 메소드 추가하기1
var o = {
name: '마이콜',
age:20,
hasProperty:function(property){
return property in this;
}
}
console.log(o.hasProperty('name'))
console.log(o.hasProperty('age'))
console.log(o.hasProperty('email'))
// 위에서 만든 hasProperty는 최상위로 정의된 자바스크립트 내장 기능이 있음, 다만 메소드 추가해보기 실습용.
console.log(o.hasOwnProperty('name'))
console.log(o.hasOwnProperty('age'))
console.log(o.hasOwnProperty('email'))this로 객체 내 정보 사용, with 사용하기
// with
var o = {
name: '마이콜',
age:20,
//this를 사용하지 않으면 o객체에서의 name을 가져오지 못하며 함수 외부에서 찾게된다.
info1:function(){
console.log(this.name + ":" +this.age)
},
// with를 통해서 각 변수마다 this를 붙여주지 않는 방식으로 작업
info2:function(){
with(this){
console.log(name + ":" +age)
}
},
// for문 사용 시 주의사항, 내부 반복도는 것을 var 로 선언해준다.
info3:function(){
var str ='';
for (var prop in this){
str += (prop+ ":");
}
console.log(str.substring(0, str.length-1));
}
}
o.info1();
o.info2();
o.info3();
>>마이콜:20
>>마이콜:20
>>name:age:info1:info2:info3자바스크립트로 메뉴 select 컨트롤하기.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>리스트를 이용한 메뉴 만들기</title>
<style type="text/css">
* { margin:0; padding:0 }
body { font-family: '맑은 고딕' '돋움'; font-size:0.75em; color:#333 }
ul, ol {list-style-type:none;}
.tab-box{
margin:20px auto;
width: 520px;
border: 1px solid #333;
}
.tab-box ul li{
float:right;
width:100px;
height:22px;
border:1px solid #999;
background-color:#ccc;
text-align:center;
padding-top: 5px;
margin-right: 2px;
border-top-left-radius:10px;
border-top-right-radius:10px;
cursor:pointer;
}
.tab-box ul li.selected{
background-color:#fc6;
}
.tab-box ul li:hover{
background-color:#fff;
}
.tab-box ul{
height: 29px;
}
.tab-box div{
width:516px;
margin-top:-1px;
border:1px solid #999;
text-align:center;
height:200px;
line-height:200px;
}
</style>
<script>
var tabBox = {
init : function(){
var divTabBox = document.getElementsByClassName('tab-box')[0];
var ulTabBox = divTabBox.childNodes[1];
var lisTab = ulTabBox.getElementsByTagName('li');
for(i = 0; i < lisTab.length; i++){
lisTab[i].addEventListener('click', this.onTabClicked);
}
},
onTabClicked : function(event){
// click이벤트를 받은 타겟
var liClicked = event.target;
if(tabBox.liSelected != null){
tabBox.liSelected.className = '';
}
liClicked.className='selected';
tabBox.liSelected = this;
}
}
window.onload = function(){
// init함수만으로 호출하기 위해
tabBox.init();
}
</script>
</head>
<body>
<div class="tab-box">
<ul>
<li>메뉴 1</li>
<li>메뉴 2</li>
<li>메뉴 3</li>
<li>메뉴 4</li>
<li>메뉴 5</li>
</ul>
<div>
탭뷰입니다.
</div>
</div>
</body>
</html>
####
'HTML, CSS, ECMA6 > 자바스크립트(Java Script)' 카테고리의 다른 글
| [자바스크립트] Event 처리 (0) | 2019.07.08 |
|---|---|
| [자바스크립트] 심화4 - Escape 다루기 (0) | 2019.07.04 |
| [자바스크립트] 심화3 - String 다루기 (0) | 2019.07.04 |
| [자바스크립트] 심화2 - Array 다루기 (0) | 2019.07.04 |
| [자바스크립트(JavaScript)] 시작하기 (0) | 2019.07.03 |