객체
객체의 생성
배열은 숫자형태의 인덱스를 사용해 원소들을 식별했다. 하지만 인덱스로 문자를 사용하고 싶다면
객체를 사용한다. 다른 언어에서 맵,딕셔너리가 있다.
객체의 이름은 grades이고 key:value형태로 받아준다. (파이썬의 딕셔너리와 매우 형태가 비슷하다)
객체에 접근하고 싶다면
둘다 a라는 key에 해당하는 값인 10을 출력한다.
특히 grades.a일때는 grades.'a'가 아니라는 것에 주의해야한다.
객체를 생성하는 방법
{} 를 사용하는 방법
new object();를 사용하는 방법
객체와 반복문
객체에 저장되어 있는 key값과 value값을 반복문을 통해 출력해 볼 것이다.
특히 for (key in grades) 부분은 정말 파이썬이랑 유사한 것 같다.
객체 안의 객체
객체 안에는 객체를 담을 수 있다.
출력값은 'a':10,'b':20 이 나온다.
그러면 'a'의 value값인 10을 출력시키려면 어떻게 해야할까?
이렇게 해주면 된다!
객체 안의 함수
객체 안에는 함수도 들어갈 수 있다.
자바 스크립트에서는 함수도 일종의 값이고 변수에 저장될 수 있다.
this
this는 함수가 소속되어 있는 객체를 가리킨다. 저 사진 속에 this는 함수가 소속되어있는 객체인 grades를 가리키고 있
다.
그렇다면 this.list를 하게되면 list 라는 key에 해당하는 value값들이 출력 될 것이다.
++) grades.show();와 grades['show']()는 같다
list에 있는 key와 value값을 출력해주고 싶을때 this를 사용하면 편리하다
모듈
모듈의 장점
프로그램은 작고 단순한 것에서 크고 복잡한것으로 진화하는데 이 과정에서 코드의 재활용성을 높이고
유지보수를 쉽게 할 수 있는 다양한 기법이 존재한다. 이 중 하나가 코드를 여러개의 파일로 분리한다.
이를 통해 코드의 재활용, 코드 수정시 필요한 로직 빠르게 찾기, 메모리 낭비 줄이기의 장점등이 있다.
자바스크립트에서는 모듈이라는 개념이 분명하게 존재하지 않는데, 자바 스크립트가 구동되는 환경인
호스트 환경에 따라 서로 다른 모듈화 방법이 제공되고 있다.
모듈화
우선 모듈화가 되지 않은 main 파일을 만들어볼 것이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
function welcome(){
return "Hello World!";
}
</script>
</body>
</html>
|
cs |
fucntion 함수만을 모아놓은 js파일을 하나 더 만들어 볼 것이다. 파일이름은 greeting.js
이제 main 파일에서 js 파일에 있는 welcome 함수를 불러내고 싶으면
이러면 콘솔창에 "Hello World"가 뜬다.
핵심은 <head> 태그에
<script src="greeting.js"></script> 를 붙여주는 것! 그래야 greeting 파일에 있는
function을 쓸 수 있을 것이다.
라이브러리
라이브러리는 모듈과 비슷한 개념이다. 모듈이 프로그램을 구성하는 작은 부품으로서의 로직을 의미한다면
라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 정리한 일련의 코드들의 집합을 의미한다.
자바스크립트에는 jQuery라는 라이브러리가 있는데, 이 라이브러리는 내가 프로그래밍을 처음 배웠을 때부터 익히 들었던 라이브러리였다. ㅋㅋ 그만큼 유명하다는 것 !
[예제] 이렇게 empty라고 파란색으로 쓰여진 글자가 execute를 누르면 빨간색으로 변하는 프로그램을 만들려면 어떻게 해야할까?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<style>
#list{
color:blue;
}
</style>
</head>
<body>
<ul id="list">
<li>empty</li>
<li>empty</li>
<li>empty</li>
<li>empty</li>
</ul>
<input type="button" value="execute" id="execute_btn"/>
<script type="text/javascript">
$('#execute_btn').click(function(){
$('#list li').text('coding everybody').css("color","#ff0000");
})
</script>
</body>
</html>
|
cs |
여기서 중요한건 jQuery를 사용한 코드는 $ (달러모양)으로 시작한다.
아이디 선택자가 #execute_btn인 애가 클릭된다면 -> 아이디 선택자가 list인 애들의 text가 coding everybody로 바꾸는 함수가 실행된다.
반드시 function(){ }을 해줘야한다. 안그러면 text가 안바뀐다..
그리고 뒤에 css("color",변하게 하고 싶은 색깔)은 맞는지 모르겠는데 저렇게 하니까 바뀌었다..ㅋㅋ
https://truecode-95.tistory.com/63
[jQuery] 배경색, 글자색 변경
1. 배경색 $("#nameR").css("background-color","#000000"); $("#nameR").css("background-color","black"); 2. 글자색 $("#nameR").css("color","#ff0000"); * 색은 Color Picker 참고 HTML Color Picker Selecte..
truecode-95.tistory.com
'JavaScript > 기초' 카테고리의 다른 글
| [JS기초] this/상속 (0) | 2022.03.26 |
|---|---|
| [JS기초] 생성자와 new ,전역객체 (0) | 2022.03.22 |
| [JavaScript 기초] 함수지향 - 유효범위(전역변수,지역변수) (0) | 2022.03.16 |
| [JavaScript 기초] 배열 (0) | 2022.03.11 |
| [JavaScript 기초] 변수,비교, 조건문,반복문,함수 (0) | 2022.03.11 |
댓글