Notice
Recent Posts
Recent Comments
Link
매일 매일 미라클 코딩
[JavaScript] (조금은 뻔뻔한) 자바스크립트 함수와 객체 본문
자바를 공부하다가 자바스크립트를 접하며 드는 생각은
문법이 쉬운만큼 '무작정'이라는 느낌이 많이 드는 언어라는 것이다.
그중에서도 함수를 선언하고 사용하는 데에 있어서 매우 단순하고 들이대는 스타일인 것 같다. 익숙해져보자.
함수(메소드)선언
1. var showAll() { }
2. function showAll() { }
3. function name(param){
document.write(param);
}
=> 매개변수 타입은 따로 쓰지 않는다. 가장 헷갈렸던 부분.
=> 조건문을 이용해 조건부 함수선언도 가능하다.
함수활용
ex) 버튼 클릭시 실행될 경고창이 뜨도록 함수 선언하기.
addEventListener('click', function(event){
<!--명령문-->
});
<body>
<button type='button'>실행</button>
<script>
document.querySelector('button').addEventListener('click', function(event){
alert("버튼 클릭시 경고창이 뜹니다.");
});
</script>
</body>
객체 생성
var workers = {
"programmer" : "선주",
"designer" : "연화",
"singer" : "지은"
}
이렇게 key : value 형식으로 객체 생성이 가능하다.
객체속성 추가
객체 속성을 추가하고 싶다면 따로 선언이 필요 없이 객체이름 + Key = "Value"; 형식으로 들이댄다
예)
workers.scientist = "동선";
혹은
workers["scientist"] = "동선" ;
* 이제 workers 에 담긴 데이터는 { "programmer" : "선주", "designer" : "연화", "singer" : "지은", "scientist" : "동선"}
이터레이터반복자를 통해 객체 데이터에 접근하기
for(var key in workers) {
document.write(key);
<!-- 이렇게 workers 라는 객체의 데이터들의 key 값과 value 를 모두 출력하고 싶다면-->
document.write(workers[key]);
}
위 코드를 workers 객체의 메소드로 추가 하고 싶을 땐?
무작정 함수 이름을 지어서 원래 workers에 선언된 메소드인 양 추가해준다.
showAll 이라는 이름으로 뻔뻔하게 추가해보겠다.
workers.showAll = function(){
for(var key in this) { //this 는 workers를 지칭, 어느 객체든 이와 같이 메소드를 추가할 수 있다.
documentwrite(key);
}
}
함수에 대한 더 자세한 문법과 활용은 MDN 참고
developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%ED%95%A8%EC%88%98
'FrontEnd' 카테고리의 다른 글
| jQuery datePicker - 선택가능한 날짜 범위지정하기 (오늘 이전날짜 막기, min/maxDate 설정) (0) | 2021.04.15 |
|---|---|
| [JavaScript, jQuery] datepicker 에서 특정 기간 비활성화 하기 (0) | 2021.03.26 |
| [JavaScript] 조건문이용한 토글 기능 만들기 (야간모드) (0) | 2021.02.17 |
| [JavaScript] 엘리먼트에 접근하기 (배열&반복문) (0) | 2021.02.17 |
| JavaScript와 DOM/BOM (0) | 2021.02.13 |
'FrontEnd' Related Articles
more
