티스토리 뷰
11월 30일
배열(array)
javascript에서는 객체와 변수외에도 '배열'이라는 그릇을 사용할 수 있다.
배열을 데이터를 순차저그올 저장하는 그릇.
var 변수이름 = [{데이터1}, 데이터2,데이터];
0 1 2
예제)
var array = [100,200,300],
sum1,
sum2,
result;
sum1 = array[0]+array[1]; => 300
sum2 = array[1]+array[2]; => 500
result = 'bg'+array[i]+'.png'; => bg100.png
--------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------
a02/function.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>함수-function()</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Orbitron">
<script src="js/modernizr-custom.js"></script>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/function.js"></script>
</head>
<body>
<p class="txt">
</p>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------
a02/main.css
@charset "utf-8";
@import url(normalize.css);
/*base*/
body {
font: 16px 'Orbitron', sans-serif;
}
--------------------------------------------------------------------------------------------------------------------------
a02/function.js
$(function(){
var a1 = add(1,2),
a2 = add(3,4),
a3 = a1+a2;
//.animate 이펙트 .on 시점 제어 가능
function add(n1,n2){
return n1 + n2;
}
//화면출력1
//alert(a3);
//화면출력2 f12 개발자모드 console창에 출력됨
//console.log(a1,a2,a3);
//요소삽입3 '.html()','.text()'
$('.txt').text(a3);
});
--------------------------------------------------------------------------------------------------------------------------
a03
"연산자" - operator
[산술 연산자]
+
(11+0=11; '11'+0=110; 'bg'+1+'.jpg'=bg1.jpg)
-
*
/ (몫)
% (나머지)
예)
0 % 3 = 0
1 % 3 = 1
2 % 3 = 2
3 % 3 = 0
4 % 3 = 1
5 % 3 = 2 <- 배너 만들 때 사용. 첫번째 두번째 세번째 다시 첫번째 이미지
++, -- ('1씩' 증가시키거나 감소시킬 때 사용한다.)
예)
var a = 0,
b = 1
a++, ++a (a가 0이므로 1이 된다) <- 1씩 증가하는 수열 만들 때
b--, --b (b가 1이므로 0이 된다)
[대입 연산자]
var a = 5
'=' | 데이터 저장(대체) | var a = 5 | a는? 4
'+=' | a += 2(a = a + 2) | a는? 7
'-=' | a -= 2(a = a - 2) | a는? 3
'*=' | a *= 2(a = a * 2) | a는? 10
'/=' | a /= 2(a = a / 2) | a는? 2.5
'%=' | a %= 2(a = a % 2) | a는? 1
[비교 연산자] => 'boolean: 진위여부' (true 1 /false 0)
'<' | 4 < 4 | 결과는? 거짓(false);
'<=' | 4 <= 4 | 결과는? 참(true);
'>' | 4 > 4 | 결과는? 거짓(false);
'>=' | 4 >= 4 | 결과는? 참(true);
'==' | '4' == 4 | 결과는? 참(true); -> value가 같니?
'!=' | 4 != 3 | 결과는? 거짓(false); -> 같지 않을 경우 참, 같을 경우 참. 부정 의문문.
'===' | '4' === 4 | 결과는? 거짓(false); -> 속성까지 같니? 문자열/숫자열. 따라서 속성 다르다
'!==' | 4 !== 3 | 결과는? 참(true);
예제)
(1=='1') => 참(값이 같으면 상관없음 - '문자열', 숫자)
(1!='1') => 거짓(두 값이 같음)
(1==='1') => 거짓(값과 속성이 모두 같아야 참)
(1!=='1') => 참(두 값과 속성이 다름)
[논리 연산자]
'&&' A && B 조건 A와 B 모두 참이면 ==> 참
'||' A && B 조건 A와 B 중 하나만 참이면 => 참
'!' !A 조건 A의 boolean(진위여부)값을 반대로 인식함(청개구리 조건)
***조건이 참이면 | 거짓
조건이 거짓이면 | 참
"null"
=> '비어있는 값'
"undefined"
=> '변수를 선언했지만 값을 지정하지 않는 경우'
undefined == null; 참(true)
undefined === null; 거짓(false) 속성 비교
--------------------------------------------------------------------------------------------------------------------------
a03/operator.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Play">
<script src="js/modernizr-custom.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/operator.js"></script>
<title>Operator</title>
</head>
<body>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------