달력

9

« 2020/9 »

  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  •  
  •  
  •  

   

배열과 객체의 사용

객체를 최소로 만들고,

배열의 객체에 접근해서 동적으로 배열 요소 추가

   

학습내용

자바에는 없는 형태

패턴이 바뀔 경우

   

소스 코드

   

  1. <script type="text/javascript">
  2.         // 객체 생성
  3.         var students = [];
  4.          
  5.         //객체를 배열에 저장
  6.         students.push( { name:'홍길동', korean:90, math:70, english:89, science:80 } );
  7.         students.push( { name:'이순신', korean:95, math:79, english:78, science:87 } );
  8.         students.push( { name:'유관순', korean:100, math:96, english:67, science:67 } );
  9.         students.push( { name:'일지매', korean:89, math:85, english:87, science:98 } );
  10.         students.push( { name:'대장금', korean:99, math:97, english:96, science:88 } );
  11.          
  12.         //students배열내의 모든 객체에 메소드 추가
  13.         for(var i in students){
  14.                 //총점 구하는 메소드 추가
  15.                 students[i].getSum = function(){
  16.                         return this.korean + this.math + this.english + this.science;
  17.                 };
  18.                  
  19.                 //평균 구하는 메소드 추가
  20.                 students[i].getAverage = function(){
  21.                         return this.getSum()/4;                
  22.                 };             
  23.         }
  24.          
  25.         //출력
  26.         var output = "이름, 총점, 평균\n";
  27.         for(var i in students){
  28.                 output += students[i].name + ' , ' + students[i].getSum() + ', ' +students[i].getAverage() + '\n';
  29.         }
  30.          
  31.         alert(output);
  32.          
  33. </script>
  34. </head>
  35. <body>
  36.    
  37. </body>

 

   

출력결과

   

   

Posted by codedragon codedragon

댓글을 달아 주세요

속성 제거 

객체의 프로퍼티를 delete연산자를 이용해 즉시 제거할 수 있습니다.

delete연산자는 객체의 프로퍼티를 삭제할 뿐, 객체 자체를 삭제하지는 못합니다.

delete(student.취미);

   

   

소스 코드

// 객체 생성

var student = {};

//객체에 속성 추가

student.name = '홍길동';

student.hobby = '피아노';

student.specialty = '자바';

student.willjob = '프로그래머';

document.write('<br>====================================<br>');

//객체의 메소드 추가

student.toString = function(){        //속성의 명세 호출하기

var msg = '';

for(var key in this){        //this: 객체 안에서 객체 참조

if(key!='toString'){

msg += key + ' : ' + this[key] + '<br>';        

}                                

}

return msg;

};

//출력

document.write(student + '<br>');

   


   

   

소스 코드

document.write('<br> 속성 제거====================================<br>');

//속성 제거

//delete student.hobby; 동일

delete(student.hobby);

document.write(student + '<br>');

   


   

   

   

객체 삭제 시도

delete는 프로퍼티만 제거하고 객체는 제거하지 않습니다.

객체가 삭제되지 않아 student객체의 값이 그대로 출력된 것을 확인할 수 있습니다.

   

  1. //객체 삭제 시도
  2. delete student;
  3. document.write(student + '<br>');

 

   

   

   

   

전체 소스

  1. <html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>속성 제거</title>
  5. <script type="text/javascript">
  6.         // 객체 생성
  7.         var student = {};
  8.          
  9.         //객체에 속성 추가
  10.         student.name = '홍길동';
  11.         student.hobby = '피아노';
  12.         student.specialty = '자바';
  13.         student.willjob = '프로그래머';
  14.          document.write('<br>====================================<br>');
  15.                 //객체의 메소드 추가
  16.                 student.toString = function(){  //속성의 명세 호출하기
  17.                         var msg = '';
  18.                  
  19.                         for(var key in this){   //this: 객체 안에서 객체 참조
  20.                                 if(key!='toString'){
  21.                                         msg += key + ' : ' + this[key] + '<br>';       
  22.                                 }                              
  23.                         }
  24.                         return msg;
  25.                 };
  26.                 //출력
  27.                 document.write(student + '<br>');
  28.                  
  29.                 document.write('<br> 속성 제거====================================<br>');
  30.                  
  31.                 //속성 제거
  32.                 //delete student.hobby; 동일
  33.                 delete(student.hobby);
  34.                 document.write(student + '<br>');
  35.                  
  36.                 document.write('<br> 객체 삭제 시도====================================<br>');
  37.                 //객체 삭제 시도
  38.                 delete student;
  39.                 document.write(student + '<br>');
  40.                  
  41. </script>
  42. </head>
  43. <body>
  44.    
  45. </body>
  46. </html>


Posted by codedragon codedragon

댓글을 달아 주세요

후손 선택자

   

자식 선택자 vs 후손 선택자

여러 태그 선택

,

$('h1, p')

자식 선택자

>

$('body > div')

후손 선택자

  

$('body div')

   

   

소스코드

   

   

소스코드

//후손 선택자

$('body div').css('border', '5px solid orange')

   


   

   

'Development > JavaScript, jQuery, ...' 카테고리의 다른 글

배열과 객체의 사용- 07.html  (0) 2014.12.06
속성 제거- 06.html  (0) 2014.11.30
후손 선택자- 08.html  (0) 2014.11.25
빈 객체에 속성 추가- 05.html  (0) 2014.11.23
객체의 활용- 04.html  (0) 2014.11.19
자식선택자- 07.html  (0) 2014.11.18
Posted by codedragon codedragon

댓글을 달아 주세요

자식선택자

   

소스코드

   

   

소스코드

//자식 선택자

//태그의 자식(직계자식)으로 범위 한정

$('body > div').css('border', '5px solid orange')

   


   

   

Posted by codedragon codedragon

댓글을 달아 주세요

   

Project Explorer내 위치 선택 > 마우스 우클릭 > New > Other...

   

JavaScript - JavaScrpt Source File

Next

   

File name작성(app.js)

Finish

Posted by codedragon codedragon

댓글을 달아 주세요

태그선택자와 클래스선택자 연결

   

   

소스코드

<script type="text/javascript">

//$(document).ready(function(){}) = $(function(){})

$(function(){

$('.item').css('color', 'orange');                

});

</script>

</head>

<body>

<h1 class="item">Header-0</h1>

<h1 class="item select">Header-1</h1>

<h1 class="item">Header-2</h1>

<p class="item">Item-0</p>

</body>

   


   

   

   

소스코드

$('.item').css('color', 'orange');

$('h1.item').css('background', 'red');

   


   

   

   

   

소스코드

$('.item').css('color', 'orange');

$('h1.item').css('background', 'red');

$('h1.item.select').css('background', 'yellow');

   


   

Posted by codedragon codedragon

댓글을 달아 주세요

 

 

개별 파일선택 후 인코딩 설정하기

해당 파일 선택 > 마우스 우클릭 > Properties

   

Resource > Text file encoding-Other >

UTF-8 설정 > OK

   

파일의 인코딩 방식이 바로 변경되어 한글이 깨지게 됩니다.

그러므로 인코딩 방식 변경 전에 해당파일의 내용을 다른 곳(메모장, Sublime, EditPlus등)에 복사 한 후 인코딩 방식을 변경하시기 바랍니다.

그 다음 인코딩 방식을 변경한 후 복사해 놓은 내용을 해당 파일에 다시 붙여 넣기 하여 인코딩 변경 후에도 한글이 깨지는 문제를 쉽게 해결할 수 있습니다.

   

임시로 저장한 js파일 내용

   

다시 이클립스의 js파일로 붙여넣기 한 화면

   

 

 

 

Posted by codedragon codedragon

댓글을 달아 주세요

태그선택자와 id선택자 연결

   

   

소스코드

<body>

<h1>header-0</h1>

<h1 id="target">header-1</h1>

<h1>header-2</h1>

</body>

   

출처: <https://github.com/10zeroone/study_jQuery/blob/master/jQuery/WebContent/ch01-selector/05.html>

   

출력결과

   

   

소스코드

//특정 id속성을 가지는 태그 선택

$('h1#target').css('color', 'red');

   


   

출력결과

Posted by codedragon codedragon

댓글을 달아 주세요

 

 

JavaScript Source File(.js)만 인코딩 설정하기

메뉴 > Window > Preferences > General-Context Types > Content types:-Text-JavaScript Source File 선택

   

Default encoding: UTF-8 입력 >

Update > OK

   

이제 부터 새로 만들어지는 js파일은 UTF-8로 지정되어 있습니다.

app3.js생성 후 등록정보 확인

   

   

Posted by codedragon codedragon

댓글을 달아 주세요

여러 개의 태그 선택

   

   

소스코드

<body>

<h1></h1>

<p>여름</p>

<h1>가을</h1>

<div>겨울</div>

</body>

   


   

   

   

소스코드

//여러개의 태그 선택

$('h1, p').css('color', 'red');

   


   

   

Posted by codedragon codedragon

댓글을 달아 주세요