글
**자바스크립트의 배경지식
1. 변수는 페이지 단위로 관리된다.
- 페이지 내에 있는 변수는 다른 페이지에서 접근할 수 없다.
- 페이지와 페이지 사이에는 절대로 변수를 공유할 수 없다.
탭과 탭은 별도의 윈도우라는 것을 알아야 한다.
2. 글로벌 변수는 그 페이지 내에서 어디서든 접근할 수 있는 변수.
-예전에는 오프너라 해서 다른 창에 있는 변수 접근이 가능했으나
현재는 자바스크립트 보안 관계로 다른 창의 변수를 가져올 수 없도록 하였다
0. 변수와 자료형
- 변수 선언 : 자바스크립트는 데이터형을 선언하지 않는다.
var a; => 이 변수에는 어떠한 값을 넣어도 가능하다.
a=10; (number 데이터형)
a=홍길동; (String 데이터형)
a= true; (boolean 데이터형)
a= new Object(); (Object 데이터형)
a=function() {}; ( function 데이터형)
- 출력 : 브라우저의 콘솔 창으로 출력할 수 있다.
ex> console.log(10);
- 바인딩 : 변수의 데이터형이 결정되는 것
언제 결정이 되는 것인가? => 값을 할당한 후 결정된다.
ex>var b; => 바인딩이 안되어 있는 상태
console.log(b);
1. 자료형 검사 : typeof()
자료형 : null, undefined
- 변수의 데이터형 알아내기 : 바인딩 된 후 변수의 데이터 형 확인 typeof()
ex>b=10;
console.log(typeof(b));
b=10.5;
console.log(typeof(b));
-동적 바인딩(dynamic binding <> static binding ex: Java, C, C++, C#)
-변수의 데이터 형은 고정되어 있지 않다. 값을 할당하는 순간 결정되기 때문이다.
자바스크립트는 값을 할당할 때 데이터 형이 결정되는 것이 특징이다.
가능한 변수의 용도를 결정했으면 그대로 사용하여야 한다.
ex> b=”홍길동”;
console.log(typeof(b));
b= true;
console.log(typeof(b));
b=null;
console.log(typeof(b));
b= new Object();
console.log(typeof(b));
b = function(){};
console.log(typeof(b));
- 이전 자바스크립트 명세에서는 var를 선언하지 않고 만든 변수는 글로벌 변수로 설정
현재는 반드시 var를 붙여야 한다.
* “use strict”;
=> 브라우저에게 자바스크립트 문법을 엄격하게 검사할 것을 요구.
스크립트를 진행하기 전에“use strict”;를 선언함으로 해서 브라우저에게 자바스크립트를 엄격하게 검사할 것을 요구한다.
이 문법은 최근 문법이다.
예전 브라우저는 일반 문자열로만 바라보지만
최근 브라우저는 문자열로 선언하더라도 일반 문자열로 보지 않고 엄격한 검사를 요구한다는 것을 인지한다.
c=20;
console.log(typeof(c));
=> 최근 브라우저는 인지를 한다. 유지보수가 어려운 상황이 발생할 수 있으므로
미연에 방지하기 위해서 “use strict” 문법을 먼저 선언해주는 것이다.
선언해주는 동시에 위에 예시는 검사해서 에러를 발생시킨다.
그러므로 이 문법을 사용할 경우에는 반드시 ‘var’ 를 통한 변수선언을 해 주어야 한다.
- 중복 선언은 오류가 아니다. 단, 기존 변수를 덮어쓴다.
var c =”홍길동”;
console.log(c);
- window 객체 : 브라우저에 미리 정의된 객체. 브라우저의 정보를 다루는 객체.
. 글로벌 변수나 함수를 포함하고 있다.
. 글로벌 변수는 모두 window 객체의 프로퍼티로 포함된다.
. 글로벌 함수도 또한 모두 window 객체에 포함된다.
ex> console.log(window.c);
ex> var d = 20;
window.e=30;
console.log(e); => e 앞에는 window 객체 레퍼런스가 생략된 것.
console.log(window.d);
2. prompt(), confirm()
ex >
var r = prompt(“당신의 나이는?”);
console.log(r);
var r2= confirm(“당신은 비트 수강생입니까?”);
console.log(r2);
alert(“오호라.... 단순 메시지 출력!”);
3. 배열 [ , , , ] ;
배열은 [ ] 내부에 데이터 형을 따지지 않으므로 어떤 형이든 입력이 가능하다.
ex>
var names = [“홍길동”, “임꺽정”, “유관순”];
for(var i = 0; i < names.length; i++){
console.log(names.[i]);
}
4. == 와 ===의 차이
var x1 = 20;
var x2 = “20”;
if(x1 == x2){
console.log(“x1 == x2”);
}
=> 앞의 값과 데이터 형을 맞추기 위해서 암시적 형변환이 발생한다.
- 암시적 형변환 없이 정확하게 데이터형과 값이 일치하는지 확인하고 싶다면?
“ === ” 활용
ex>
if(x1 === x2){
console.log(“x1 === x2”);
}else{
console.log(“x1 !== x2”);
}
* alert 창 사용
ex>
<script>
alert(‘This\’ is “String”);
alert(“This\” is ‘String’);
</script>
=> alert 창 내부에 “ ” , ‘ ’ 둘 다 사용이 가능하다. 단, 창 내부에 두가지를 혼용할 수는 없다.
혼용하기 위해서는 ‘ \ '을 위에 예시 처럼 사용하면 된다.
* 숫자와 문자열을 덧셈할 경우의 예시
<script>
// 1번
console.log('52 + 273');
// 2번
console.log(52 + 273);
// 3번
console.log('52' + 273);
// 4번
console.log(52 + '273');
// 5번
console.log('52' + '273');
</script>
=> 결과
52273
=> 문자열은 문자열 그대로 출력/ 숫자는 그대로 더한 결과값 출력
문자 + 숫자일 경우와 문자 + 문자일 경우에는 합계가 아닌 이어 붙인 결과가 출력된다.
문자와 숫자를 더해서 합한 결과를 얻고자 할 경우에는 타입 캐스팅 하는 방법을 사용해야 한다.
ex> console.log((number)‘52’ + 273);
<script>
alert(Boolean(0));
alert(Boolean(NaN));
alert(Boolean(''));
alert(Boolean(null));
alert(Boolean(undefined));
</script>
=> alert 창으로 모두 false 가 출력됨
* 조건연산자
var a = (20 > 30) ? "와~ 정말?" : "그러면 그렇지...";
console.log(a);
조건 연산자를 사용할 경우 출력은 true, false로 판단해서 결과 출력.
-> 예시문 출력결과 : "그러면 그렇지..."
* ||와 &&의 다른 활용
ex> var x = 20;
var b = true || (x=30);
‘ || ’ 를 사용할 경우 앞에 값이 true 인 경우에는 뒤에 값은 검사하지 않고 앞의 값으로 출력
ex> var age = Number(prompt("너 나이 몇이야?", "18"));
(age > 18) || console.log("미성년입니다.");
' || ' 를 사용할 경우에는
둘 중 하나라도 true이면 true
둘 다 false일 경우는 false
둘 다 true인 경우는 true
'&& '를 사용할 경우에는
둘 중 하나라도 false이면 false
둘 다 true여야만 true이다.
둘 다 false일 경우는 당연히 false이다.
** 조건문
ex>
* if ~ else
<script>
// 변수를 선언합니다.
var date = new Date( );
var hour = date.getHours( );
// 조건문
if (hour < 11) {
// "hour < 11"가 참일 때 실행합니다.
alert('아침 먹을 시간입니다.');
} else if (hour < 15) {
// "hour < 11"이 거짓이고 "hour < 15"가 참일 때 실행합니다.
alert('점심 먹을 시간입니다.');
} else {
// "hour < 15"가 거짓일 때 실행합니다.
alert('저녁 먹을 시간입니다.');
}
</script>
원래는 else if가 자바에서는 아래와 같이 활용되어야 하는 것이 정확하다.
if (hour < 11) {
// "hour < 11"가 참일 때 실행합니다.
alert('아침 먹을 시간입니다.');
} else {
if (hour < 15) {
// "hour < 11"이 거짓이고 "hour < 15"가 참일 때 실행합니다.
alert('점심 먹을 시간입니다.');
} else {
// "hour < 15"가 거짓일 때 실행합니다.
alert('저녁 먹을 시간입니다.');
}
}
** 함수(function)
1. 함수 선언
- 리턴 타입이 없다. => 데이터형이 없기 때문에
- 함수 선언시 주의사항 : 파라미터 변수는 var를 붙이지 않는다.
엄격하게 검사하기 위해서 함수 선언 전에 “use strict” 를 붙인다.
- 모든 근로벌 변수, 함수는 window 객체에 포함된다.
ex>
<script>
console.log(plus(10, 11));
=> plus 함수는 다음 script 엘리먼트에서 만들기 때문에 여기서는 호출할 수 없다.
스크립트는 순서대로 실행이되므로 함수 이전에 console.log를 찍게 되면 찾을 수 없으므로 결과를 출력할 수 없다.
</script>
<script>
“use strict”;
function plus(a, b){
return a+b;
}
console.log(plus(10, 20));
console.log(window.plus(10, 20));
</script>
2. 자바스크립트 실행 순서
- 자바스크립트는 <script></script> 엘리먼트 단위 순서대로 실행된다.
script element 안에서는 함수 선언을 먼저 실행하고 => 함수 밖의 문장을 순서대로 실행한다.
- 다음 스크립트 엘리먼트에서는 이전 스크립트 엘리먼트에서 만든 변수나 함수는 글로벌 변수, 함수이므로 접근할 수 있다.
ex>
<script>
console.log(plus(20, 30));
</script>
=> 스크립트 엘리먼트가 나뉘더라도 위에 함수가 먼저 선언되었으므로
정상적으로 실행될 수 있다.
3. 함수 선언2
- 함수 객체를 생성하는 방법
(함수 선언이 아니라 함수를 선언하는 방법으로 객체를 생성한 것이다.)
ex> "use strict";
var plus = function(a, b){
return a+ b;
};
console.log(plus(50, 50));
'학습정리 > by ㅎㅈㅇ' 카테고리의 다른 글
| 실무 web 프로그래밍의 구성 (0) | 2013.06.27 |
|---|
RECENT COMMENT