국비 38일차 Javascript operator
2021. 3. 3. 18:17
2021.03.03 국비교육 38일차
변수 범위
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function outputNumbers(count){ //리턴타입 없음
for(var i =0; i<count;i++){
console.log(i)
}
console.log(">>>" + i);
}
outputNumbers(5);
console.log(i); // 에러 발생 --> i는 함수를 벗어남
</script>
</head>
<body>
<p>Hello</p>
</body>
</html>scope
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var a =10;
if(true){
var n = 10;
}
console.log(a);
console.log(n);
/////////////////////////////////
function xxx(){
var x = 20;
console.log(x);
} // 함수범위의 scope
xxx(); // 함수호출
console.log(x); // error
console.log(a);
console.log(n);
</script>
</head>
<body>
<p>Hello</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var a =10; // 전역변수
function xxx(){
var b = 20; // 로컬변수
c = 20; // window 객체의 속성으로 추가된다. 권장되지 않음
}
/*
var를 지정하지 않으면 전역 scope(전역객체 window)에 동적으로 변수 정의됨
즉, var가 없으면 변수가 정의되는 것은 파싱단계가 아니고 런타임에 동적 적의됨
*/
</script>
</head>
<body>
<p>Hello</p>
</body>
</html>즉시호출함수 (익명함수)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 즉시호출함수 : 함수호출하지 않아도 자동으로 호출 됨
//익명함수() : function 이름없음(){코드구현}(); // 자기 자신 실행
(function(){
console.log("즉시 호출 함수 실습")
})();//자신의 함수 호출 - 구현과 동시에 실행
(function() {
console.log("test");
})();
</script>
</head>
<body>
<p>Hello</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//호이스팅 : var로 선언된 것은 어떤 위치에 있든 간에 위로 끌어올려짐
console.log(foo); //undefined
var foo;
foo =3;
console.log(foo); //3
////////////////////////////////////////////
function showFoo(){
console.log(">>" + foo); //undefined
var foo; //주의
foo = "inky";
console.log(foo); //inky
}
showFoo();
</script>
</head>
<body>
<p>Hello</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var scope = "hello"; //전역
function f(){
document.write(scope + "<br>"); //브라우저에 출력 // 13라인의 scope를 hoisting해오기 때문에 undefined
var scope = "test"; // 지역변수
document.write(scope + "<br>"); // test - 지역변수 사용
}
f(); // 함수 호출 주의
</script>
</head>
<body>
<p>Hello</p>
</body>
</html>prompt
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var p = prompt("Plese enter your name", "");
console.log(p);
</script>
</head>
<body>
<p>Hello</p>
</body>
</html>operator
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
console.log(10 + 20);
console.log(20-3);
console.log(20 * 3);
console.log(20/3); //6.6666
console.log(20%3); //2
var n = 10;
var n2 = 20;
var result = n + n2;
console.log(n + n2);
console.log(result);
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
console.log("10" + 20 + 30 + 40); // 문자열 연결 10203040
console.log(20 + 30 + 40 + "10"); //덧셈, 문자열 연결
console.log("10" + 20);
console.log("20" - 3); //자동형변환 후 계산
console.log("20" * 3); //자동형변환 후 계산
console.log("20" / 3); //자동형변환 후 계산 6.666
console.log("20" % 3); //자동형변환 후 계산 2
var n = "10";
//n = parserInt(n);
var n2 = 20;
console.log(parseInt(n) + n2);
console.log("n*n2 ==" + (n*n2));
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var n =10;
var n2 = 5;
//n = n + 2;
n += n2;
console.log(n,n2)//15,5
//n = n - 2;
n -= n2;
console.log(n,n2)//10,5
//n = n * 2;
n *= n2;
console.log(n,n2)//50,5
//n = n / 2;
n /= n2;
console.log(n,n2)//10,5
//n = n % 2;
n %= n2;
console.log(n,n2)//0,5
</script>
</head>
<body>
</body>
</html>비교연산자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var n = 10;
var n2 = 5;
console.log(n == n2); //false
console.log(n != n2); //true
console.log(n > n2); //true
console.log(n >= n2); //true
console.log(n < n2); //false
console.log(n <= n2); //false
console.log(n == 10); //true
console.log(n == null); //false
console.log(n == undefined); //false
console.log(n == NaN); //false
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var n =10;
var n2="10";
console.log(n == n2); // 자동형변환 후 비교 true
console.log(n === n2); // 자동형변환 후 하지 않음 false
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
console.log(!true); //false
console.log(!false); //ture
console.log(!(3 > 4)); //true
var x = 3;
var x2 = 5;
console.log(!(x > x2)); //true
console.log(true || true); //t
console.log(true || false); //f
console.log(false || true); //t
console.log(false || false); //f
console.log((3 > 4) || (4 == 5)); //false
var x = 3;
var x2 = 5;
console.log( (x>x2) || (x==x2)); //f
console.log( true && true);
console.log( true && false);
console.log( false && true);
console.log( false && false);
console.log( (3>4) && (4==5)); //f
var n = 3;
var n2 = 5;
console.log( (n>n2) && (n==n2)); //f
</script>
</head>
<body>
</body>
</html>증감연산자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var n =10;
var n2 = n++; //n2에 n값을 저장한 후에 ++ 처리됨
console.log(n, n2); // n= 11, n2 =10
var m =10;
var m2 = ++m; // 덧셈후에 m2에 m저장
console.log(m, m2) //m = 11. m2 =11
</script>
</head>
<body>
</body>
</html>3항연산자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//3항 연산자
//(조건식)? 값1:값2;
var n = (4>3)?100:200;
console.log(n); //100
var n2= (4>3)?"aa":"bb";
console.log(n2);//"aa"
/////////////////////////////////////
var x =4;
var x2= 3;
var n3 = (x > x2)?"aa":"bb";
console.log(n3); //"aa"
var n4 = (x>x2 && x==x2)?"aa":"bb";
console.log(n4); // "bb"
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
alert("hello");
var k =(4>5) ? 100 :200;
console.log("k : " + k);
var k2 = (4 >5 ) ? alert(1) : alert(2);
console.log("k2 : " + k2);
var k3 = (4>5) ? (alert(1), 100) : (alert(2), 200);
console.log("k3 : " + k3);
var k4 = ("22") ? 100 : 200;
console.log("k4 : " + k4);
</script>
</head>
<body>
</body>
</html>총정리
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//1. 산술연산
var a = 10;
var b = 3;
console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);
var aa = "10";
console.log(aa + 20);//1020
console.log(aa - 5);
console.log(aa * 5);
console.log(aa / 5);
//2. 증감연산
var y = 3;
var y2 = 3;
++y;//4
y2++;//4
console.log(y + " " + y2); //4, 4
var y3 = ++y;
var y4 = y2++;
console.log(y + " " + y3); //5 ,5
console.log(y2 + " " + y4); //5, 4
//3. 대입연산자
var a = 10;
var b = 5;
console.log(a += b);
console.log(a -= b);
console.log(a *= b);
console.log(a /= b);
console.log(a %= b);//0
//4. 비교연산자
var v1 = 10;
var v2 = 9;
console.log( v1 == v2 ); // equal
console.log( v1 > v2 );
console.log( v1 >= v2 );
console.log( v1 < v2 );
console.log( v1 <= v2 );
console.log( v1 != v2 );
//주의할 점
var w1 =10;
var w2 = "10";
console.log("w1 == w2", w1 == w2); // 형변환 함 -- true
console.log("w1 === w2", w1 === w2); // 형변환 안함 -- false
//5. 논리 연산자
console.log(true && true);
console.log(true && false);
console.log(false && true);
console.log(false && false);
console.log(true || true);
console.log(true || false);
console.log(false || true);
console.log(false || false);
//or시 좌객체 참 => 좌객체 // 좌객체 거짓 => 우객체 반환
console.log("'123' || 10", "123" || 10);
console.log(0 || 10);// ==> 리턴 10
//////////////////////////////////////////////
console.log("'123' && 10", "123" && 10);
console.log(0 && 10);
// 3항
var aaa = (4>3)? 100:200;
console.log(aaa);
var aaa2 = (4>3)? alert(100) : alert(200);
console.log(aaa2);
var aaa3 = ("aaa")?"AA":"BB";
console.log(aaa3);
function x(a){
var arr = a ||[]; // 배열저장
console.log(arr);
}
x();
x([1,2]);
</script>
</head>
<body>
</body>
</html>'ETC > 국비교육' 카테고리의 다른 글
| 국비 40일차 Javascript (객체 BOM DOM) (0) | 2021.03.05 |
|---|---|
| 국비 39일차 Javascript 함수 + 응용 (0) | 2021.03.04 |
| 국비 37일차 CSS(position, overflow, float) + javascript 기초 (0) | 2021.03.02 |
| 국비 36일차 css 정리 2 (0) | 2021.02.26 |
| 국비 35일차 css 정리 (0) | 2021.02.25 |