특히 이러한 형태로 Setter 메서드를 생성할 때 주로 사용하게 되는데 JavaScript에도 this가 있다.
JavaScript this
* 렉시컬 스코프
var x = 1;
var foo : function() {
var x = 10;
bar();
}
var bar : function() {
console.log(x);
}
foo();
bar();
위와같이 두 개의 함수를 선언하고 실행했다. 결과는 둘 다 1이 나올것이다. 이처럼 렉시컬 스코프는 어디서 실행하였는지가 중요한게 아니라 어디서 선언하였는지 중요한 것이다. foo()함수에서 실행했던간에 bar()함수는 전역에서 선언하여 전역 변수를 사용하게 된 것이다.
자바스크립트에서 this는 호출되었을때 동적으로 바인딩 된다.
foo() {
console.dir(this);
}
foo(); //window
var obj = {foo : foo;}
obj.foo(); // obj
var instance = new foo(); //instance
이런식으로 말이다. this는 기본적으로 전역변수에 바인딩 된다. 심지어 내부 함수로 설정되었더라도 일반 함수, 메소드, 콜백함수 어디에서 선언되었든 관게없이 this는 전역객체를 바인딩한다.
기본적으로 java로 이루어진 언어이기 때문에 연산자나 기호는 java랑 비슷하다 하지만 변수 선언 만큼은 다르다.
var 변수이름 = 값;
이런 형식으로 변수를 선언하는데 java처럼 자료형을 지정하지 않는다. 그렇기 때문에 초기화와 동시에 자료형이 결정된다. 따라서 초기화하지 않고 선언만하게되면 undefined자료형을 가진다. 이런 방식의 언어를 동적타입의 언어라고 한다.
js에서 변수를 선언하는 방법은 이렇게 3가지가 있다. 세가지 변수 선언 방식이 차이점을 가지는 포인트 4가지는 재선언, 재할당, 호이스팅, 범위가 있다.
var : 재선언 가능, 재할당 가능, 호이스팅이 이루어진다, 함수 레벨 스코프다.
let : 재선언 불가능, 재할당 가능, 호이스팅이 이루어지지 않는다, 블록 레벨 스코프다.
const : 재선언 불가능, 재할당 불가능, 호이스팅이 이루어지지 않는다, 블록 레벨 스코프다.
선언하지 않음 : 선언하지 않고도 변수를 사용해서 값을 할당할 수 있다. 선언하지 않고 변수명을 통해서 값을 찾을땐 암시적 전역변수로 선언이 되어 불러진다. 이는 호이스팅이 일어나지 않으며 추후에 오류를 만들 수 있다. 따라서 'use strict'를 선언하여 엄격한 룰 적용을 하는것으로 방지할 수 있다.
* 여기서 호이스팅이란 해당 선언문을 스코프의 선두로 가져간것 처럼 동작한다는 것이다.
* javascript의 문자열은 inmmutable(변경 불가능)하므로 문자열의 일부를 수정할 수 없고 새로운 재할당을 해도 문자열이 바뀌는것이 아니라 새로운 문자열이 생성되고 참조하는 주소가 바뀌는 것이다.
* 함수 레벨 스코프는 선언된 함수 내에서 사용할 수 있다. 따라서 함수 외부에서 선언하게 되면 전역 변수가 되게 된다. 그리고 var선언 특성상 재 할당이 가능하므로 변수가 바뀌는 위험이 있을 수 있다.
* 블록 레벨 스코프는 선언된 블록 내에서 사용할 수 있다. var의 단점으로 인해 ES6부터 let과 const가 생기게 됐다.
var t = 1;
document.write(t+”<br>”); // 1
var t = 2;
document.write(t+”<br>”); // 2
t = 3;
document.write(t+”<br>”); // 3
document.write(r+”<br>”); // undefined
var r = 4;
document.write(u+”<br>”); //
이 처럼 var는 t를 두번 선언하는 재선언, t의 값 변경인 재할당, r을 아래에 선언해도 값은 할당이 안되지만 선언 자체가 가능하다. 선언 자체가 되지 않으면 u처럼 아무 결과도 나오지 않는다.
let t = 1;
document.write(t+”<br>”); // 1
let t = 2;
document.write(t+”<br>”); //
이렇게 let으로 선언하면 두 번째 let t=2에서 아무 스크립트가 나오지 않는것을 볼 수있다.
let t = 1;
document.write(t+”<br>”); // 1
t = 2;
document.write(t+”<br>”); // 2
document.write(r+”<br>”); //
let r = 3;
이처럼 재할당을 할 경우 값이 제대로 나오는 것을 볼 수 있고 호이스팅이 이루어지지 않아 변수 선언자체가 되지 않는다.
const t = 1;
document.write(t); // 1
const t = 2;
document.write(t); //
t = 3;
document.write(t); //
document.write(r); //
const r = 4;
const는 재선언, 재할당, 호이스팅이 불가능한것을 볼 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>javascript</title>
<meta charset="utf-8">
</head>
<body>
a<br>
<script>
document.write("b"+"<br>");
var a,b,c;
a=5;
b=6;
c=a+b*10;
let d = 'string';
let e = ' linked string';
let f = a+" "+d;
document.write(a+"<br>");
document.write(c+"<br>");
document.write(d+"<br>");
document.write(f);
</script>
</body>
</html>
또한 js는 객체지향 언어이기 때문에 객체도 작성이 가능하다. 항상 key:value형식으로 작성해야한다.
객체 이므로 메서드 선언도 가능하다. 단, key:value 형태를 유지한다. 메서드명 : function() {}형식이다.
javascript의 자료형
javascript의 자료형으로는
number : int,float 전부 하나의 자료형으로 표현된다.
string : 문자열
null
undefined : 할당되지 않았다.
Boolean
여기까지 원시타입의 immutable(primitive)한 자료형으로 변경이 불가능하다. 실제로 값을 변경 할 수 없는것이 아니라 메모리 구조상 참조하고 있는 주소에 할당된 값을 변경할 수 없다. 따라서 재 할당시에 메모리에 새로 할당될 값이 생성되고 변수가 참조하고 있는 위치가 변경되는 것이다.
(*) 여기서 input이랑 button으로 똑같은 기능을 하는 두 개를 작성했는데 이유는 문득 input으로 만든 버튼과 button으로 만드는것이 다를까 라는 근본적인 궁금증 때문이다. input으로 만드는것으로 연습해 보자
script태그
script태그 내에 자바스크립트 코드를 작성하면 된다.
<!DOCTYPE html>
<html>
<head>
<title>javascript</title>
<meta charset="utf-8">
</head>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script type="text/javascript">
document.write("hello");
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html>
그럼 결과를 볼 수 있다. 다만 script를 가장 마지막에 선언해야 한다. 이유는 모르겠다. p태그를 script태그 아래에 선언 했더니 아무것도 나오지 않는다. 그 이유는 좀 더 찾아서 새로 포스팅 해보겠다.
function(함수)
js는 객체지향의 함수이므로 이벤트 실행시에 발생하는 함수를 작성할 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>javascript</title>
<meta charset="utf-8">
</head>
<body>
<h2>JavaScript in Body</h2>
<p id="demo">함수 실행 전</p>
<input type="button" value="함수 실행" onclick="func()"><br><br>
<input type="button" value="다른 함수" onclick="fun()"><br><br>
<script>
document.write("default write");
function func(){
document.getElementById("demo").innerHTML = "함수 실행 됨";
}
function fun() {
document.write("다른 함수");
}
</script>
</body>
</html>
이런 식으로 script태그 내에 선언하면 된다. 이벤트 부분에 함수를 두어 해당 이벤트 발생 시에 해당 함수가 실행된다. 여기서 document.write()를 사용해서 하면 다음에 자동으로 추가될줄 알았는데 새로운 문서가 생기고 거기에 write되는것을 확인했다. 앞으로 함수에 document.write()는 잘 안쓸것 같다.
혹은 .js 로 끝나는 확장자를 가진 파일을 만들어 연결하여 사용할 수도 있다. 마치 css적용하는것 처럼 말이다. 하지만 css와 다른점이 있다면 css는 link로 연결하고 style태그를 통해서 다른 css효과를 줄 수 있지만 script는 그렇지 않다. 두 개의 함수를 각각 하나는 script태그 내부에 하나는 js파일에 두고 실행하면 script태그 내에 있는 함수는 작동되지 않음을 볼 수 있다.
이와 같이 작성하면 href의 주소값과(반드시 #을 주소 가장 앞에 써야한다.)해당 문서의 id값과 일치하는 부분으로 이동 할 수 있다. 마치 웹의 맨위로 같은 버튼과 같은 것이다.
2.<p> : 문단을 지원하는 태그
위 코드를 작성하면 아래와 같은 결과를 볼 수 있는데
‘이것’에는 p태그가 없으나 앞뒤로 개행이 되어있는것을 볼 수 있다.
이처럼 p태그는 문자열을 문단으로 만들어주고 해당 태그 앞뒤로 개행문자가 포함되어있다.
title : 툴 팁이 표시되게 하는 태그로 <p title=”I’m a tooltip”>This is a paragraph.</p> 와 같이 적으면 title내부 값이 툴팁으로 표시된다.
<!DOCTYPE html>
<html>
<body>
<p title="I'm a tooltip">This is a paragraph.</p>
<p title=about w3schools>this is a ex</p>
이것
<p title="jhon 'sg'">p tag
pp tag
ppp tag</p>
</body>
</html>
3.<h1> : 제목을 작성할 때 규격화된 크기로 지정하는 태그로 숫자가 커질수록 크기는 작아진다. 제목인 header를 지정하는 태그이므로 p태그 처럼 앞뒤로 개행 문자가 존재한다.
style : CSS 속성중 하나로 꼭 h1태그가 아닌 다른 태그에서 해당 태그에 스타일 즉, 색상(color:blue), 글꼴(font-family:굴림), 크기(font-size:40px) 등과 같은 요소에 스타일을 추가할 때 사용하는 속성이다. h태그는 글자의 크기를 조절 할 수 있다. 여기에 style 속성으로 글씨 크기를 조절 한다면 어떻게 될까?
<h1 style=”font-size:40px;”>heading</h1> 이와 같이 작성하면 글씨의 기본 크기가 증가하여 더 큰 h1태그를 볼 수 있다. *여기서 px는 픽셀을 의미한다.
4.서식 : 문자의 상태를 나타내는 태그
<!DOCTYPE html>
<html>
<body>
<b>굵은체 텍스트</b><br>
<strong>강조 텍스트</strong><br>
<i>이탤릭체 텍스트</i><br>
<em>중요한 텍스트</em><br>
<small> 작은 텍스트</small><br>
<mark> 강조 텍스트</mark><br>
이것은 <del>삭제될</del>텍스트<br>
이것은 <ins>추가될</ins>텍스트<br>
이것은 <sub>아래첨자</sub>텍스트<br>
이것은 <sup>위첨자</sup>텍스트<br>
</body>
</html>
17. <article> : 이 태그는 독립적이고 독자적인 컨텐츠를 지정한다. 이 태그를 사용할 수 있는 분야는 포럼 게시물, 블로그 포스트, 신문기사 등이 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
여기는 일반 영역
<article>
여기서 부터는 article 영역
<h2>오늘의 주제</h2>
<p>
article 태그는 왜 필요한가?
이 전까지는 주로 보여주는 부분에 의미를
둔 태그가 많지만 이처럼 해당 부분이 가지는
의미를 나타내는 태그도 있다.
</p>
</article>
</body>
</html>
18. <header> : 해당 문서의 헤더를 지정한다.
19.<footer> : 해당 문서, 영역의 바닥 글을 지정한다. 일반적으로 작정자, 저작권, 연락처 등이 해당 태그 내에 기재된다.
