Today I Learn 20220731

Jiwontwopunch·2022년 7월 31일

JavaScript TIL

TIL

목록 보기

79/92

❤ Error & Solution

❤ What I learned

[JavaScript] 예외 구문

→ github front-code

예외 발생 시 catch 블록으로 예외 객체 exception이 전달. 이 객체에는 예외와 관련된 다음과 같은 정보가 들어 있다.

name: 예외의 이름
message: 예외에 대한 짧은 메세지
description: 예외에 대한 긴 설명

라이브러리는 func라는 함수를 제공하며 이 함수 내부에서 처리를 하되 실행을 계속할 수 없는 문제가 발생하면 throw 구문으로 예외를 던진다. 클라이언트 측에서는 라이브러리의 func() 함수 호출문을 try 블록으로 싸 둔다. 그러면 함수 실행중에 예외가 발생하더라도 예외를 잡아 처리할 수 있다. 제일 마지막 줄의 document.write 호출문은 예외 여부에 상관없이 항상 정상 실행된다.

[JavaScript] 클로저

→ 독학 카테고리

[JavaScript] 객체 멤버의 참조

[] 괄호 안에는 멤버 이름을 문자열 형태로 적어야 하므로 따옴표가 반드시 필요하다.

[JavaScript] 생성자, 프로토타입

생성자

<script>
  function Human(name, age){
  this.name=name;
  this.age=age;
  this.intro=function(){
  	document.write("name=" +this.name+"<br>");
  	document.write("age=" +this.age"+"<br>");
  };
  }
  var kim = new Human("김모씨", 26);
  var lee = new Human("이모씨", 30);
  kim.intro();
  lee.intro();
</script>

프로토타입

<script>
  function Human(name, age){
  this.name=name;
  this.age=age;
  }
  
 Human.prototype.intro=function(){
  	document.write("name=" +this.name+"<br>");
  	document.write("age=" +this.age"+"<br>");
 };
  
 var kim = new Human("김모씨", 26);
 var lee = new Human("이모씨", 30);
 kim.intro();
 lee.intro();
</script>

[JavaScript] get/set

get/set은 특별한 메서드이기 때문에 function 키워드 대신 get, set 키워드를 사용한다. get 메서드는 내부적으로 계산된 속성값을 리턴하며 값을 돌려 주어야 하므로 반드시 return문이 있어야 한다. set 메서드는 인수로 전달받은 값을 내부의 멤버에 대입한다. 이때 무조건 저장하지 않고 일정한 조건을 점검하여 조건이 맞을 때만 저장하면 객체의 무결성을 지킬 수 있다.

<script>
  var human={
  	name: "서지원",
  	$age: 30,
  	get age() { return this.$age; },
  	set age(newage){
  		if(newage>0 && newage<130) this.$age=newage;
    }
  },
  intro: function(){
  	document.write("name=" +this.name+"<br>");
  	document.write("age=" +this.age"+"<br>");
  }
};
human.age=250;
human.intro();        // age=29
human.age=19;
human.intro();        // age=19
</script>

[JavaScript] 선택 메서드 each, find

each

<body>
  <h3>문단0</h3>
  <h3>문단1</h3>
  <h3>문단2</h3>
  <h3>문단3</h3>
  <h3>문단4</h3>
  <script>
    var arColor=['yellow','red','green','blue','gray'];
    $('h3').each(function(idx,item){
    $(item).css('background', arColor[idx]);
    });
  </script>
</body>

find

<body>
  <p> 문단 안에 <strong>강조</strong> 표시가 있다.</p>
  <div>디비전 안에 <strong>강조</strong> 표시가 있다.</div>
  <script>
    $('p').find('strong').css('background','yellow')
  </script>
</body>

[JavaScript] 유틸리티 메서드 filter

<body>
  <p>문단0</p>
  <p>문단1</p>
  <p>문단2</p>
  <p>문단3</p>
  <p>문단4</p>
  <script>
    $('p:odd').filter(':contains(1)').css('background','yellow');
  </script>
</body>

[JavaScript] 태그 관리 text(), html()

<p>문단1</p>
<p>문단2</p>
<p>문단3</p>
<hr />
<script>
  document.write("html()로 읽은 내용:" +$('p').html() + "<br>");
  // html()로 읽은 내용: 문단1
  document.write("text()로 읽은 내용:" +$('p').text() + "<br>");
  // text()로 읽은 내용: 문단1문단2문단3
</script>