티스토리 뷰

데일리 코딩

코딩 32일째

파푸가 2016. 11. 30. 17:54

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


--------------------------------------------------------------------------------------------------------------------------


[범위와 명명규칙]
범위?
범위는 '변수나 함수를 사용할 수 있는 영역(유효범위)'를 말한다.
Javascript의 변수와 함수는, 선언하거나 작성한 부분 안에서만 사용할 수 있다.

-전역범위: 프로그램의 어디서든 사용할 수 있다.
 (010)

-지역범위: 프로그램의 제한된 범위 안에서만 사용할수 있다.
 (02)
 
[범위확인예제]

① var global = 'This is global';
=> 모든 함수의 외부에 선언되어 있으므로 모든 함수에서 사용가능.

function a(){
 var local_a = 'This is local(a)';
 global; 0
 local_a; 0
 local_aa; X
 local_b; X

 function aa(){
  var local_a = 'This is local(aa)';
  global; 0
  local_a; 0
  local_aa; 0
  local_b; X
 }
 
  function b(){
  var local_b = 'This is local(b)';
  global; 0
  local_a; X
  local_aa; X
  local_b; 0
 }
}

[변수명 함수명 명명규칙]
- 사용할 수 있는 문자열은 '영문'과 '$','_' 등이다.

- 함수 이름은 숫자로 시작할수 없다.
  (1num: X | num1: 0 )
  
- 대문자 소문자를 구별한다. ('abc'와 'ABC'는 전혀 다름)

- 예약어는 사용할 수 없다.
  (javascript에서 사용하는 문자열 또는 향후 사용될 예정인 문자열)
  
  break, do, if, package, throw
  case, else, implements, private, true, false
  catch, enum, import, protected, try
  class, export, in, public, typeof
  const, extends, instanceof, return, var
  continue, interface, static, void
  debugger, finally, let, super, while
  default, for, new, switch, with
  delete, function, null, this, yield


--------------------------------------------------------------------------------------------------------------------------


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>


--------------------------------------------------------------------------------------------------------------------------

'데일리 코딩' 카테고리의 다른 글

코딩 34일째  (0) 2016.12.02
코딩 33일째  (0) 2016.12.01
코딩 31일째  (0) 2016.11.28
코딩 30일째  (0) 2016.11.25
코딩 29일째  (0) 2016.11.24
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
more
«   2025/07   »
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 31
글 보관함