7주 JavaScript Part1

44
JavaScript part 1
  • Upload

    -
  • Category

    Software

  • view

    588
  • download

    0

description

WEB UI 6주 JavaScript Part1

Transcript of 7주 JavaScript Part1

Page 1: 7주 JavaScript Part1

JavaScript����������� ������������������  part����������� ������������������  1

Page 2: 7주 JavaScript Part1

수업방식����������� ������������������  변경

동영상시청 숙제제출질문/답변����������� ������������������  &����������� ������������������  실습위주����������� ������������������  수업

여긴 예습 여긴 복습

Page 3: 7주 JavaScript Part1

목표

Javascript가����������� ������������������  브라우저에서����������� ������������������  어떻게����������� ������������������  사용되는지����������� ������������������  안다.����������� ������������������  

Javascript의����������� ������������������  기본����������� ������������������  문법을����������� ������������������  안다.����������� ������������������  

함수의����������� ������������������  기본����������� ������������������  사용법을����������� ������������������  안다.

Page 4: 7주 JavaScript Part1

o p e r a t o r s

Page 5: 7주 JavaScript Part1

X = X + Y!

X = X * Y !

X +=Y!

X *= Y

operator����������� ������������������   shorthand����������� ������������������  operator����������� ������������������  

Assignment����������� ������������������  operators����������� ������������������  

Page 6: 7주 JavaScript Part1

Comparison����������� ������������������  operators“23” == 23; !

true == “1”;!

!“23” === 23;!

true === 1;!

!33.3 >= 33.33!

33.3 <= 33.33

Javascript����������� ������������������  엔진이����������� ������������������  임의로����������� ������������������  타입을����������� ������������������  변환해서����������� ������������������  비교한다....으악.

Page 7: 7주 JavaScript Part1

Comparison����������� ������������������  operators“23” == 23; !

true == “1”;!

!“23” === 23;!

true === 1;!

!33.3 >= 33.33!

33.3 <= 33.33

결론적으로����������� ������������������  Javascript의����������� ������������������  타입����������� ������������������  비교는����������� ������������������  ����������� ������������������  

정확한����������� ������������������  타입을����������� ������������������  모두����������� ������������������  비교할����������� ������������������  수����������� ������������������  있는����������� ������������������  ����������� ������������������  ‘===’����������� ������������������  ����������� ������������������  만을����������� ������������������  사용하는����������� ������������������  것이����������� ������������������  좋다.

Javascript����������� ������������������  엔진이����������� ������������������  임의로����������� ������������������  타입을����������� ������������������  변환해서����������� ������������������  비교한다....으악.

Page 8: 7주 JavaScript Part1

arithmetic����������� ������������������  ����������� ������������������  operatorsvar x = 2 , y = false;!

console.log(x--);!

console.log(x++);!

console.log(y++):

bitwise����������� ������������������  operators15 & 9 !

> 9 // 1111 & 1001 = 1001!

!15 | 9 !

> 15 // 1111 | 1001 = 1111!

!9 << 2!

> 36 // 1001 -> 100100

Page 9: 7주 JavaScript Part1

logical����������� ������������������  operators

true����������� ������������������  &&����������� ������������������  true;����������� ������������������  

>����������� ������������������  true����������� ������������������  

!“next”����������� ������������������  ||����������� ������������������  false;����������� ������������������  

>����������� ������������������  next����������� ������������������  

var����������� ������������������  a����������� ������������������  =����������� ������������������  false;var����������� ������������������  myValue����������� ������������������  =����������� ������������������  a����������� ������������������  ||����������� ������������������  “new����������� ������������������  value”;console.log(myValue)����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  //����������� ������������������  ?

Page 10: 7주 JavaScript Part1

숙제1����������� ������������������  

결과와����������� ������������������  그����������� ������������������  이유에����������� ������������������  대해서����������� ������������������  짧게����������� ������������������  쓰기

var����������� ������������������  aData����������� ������������������  =����������� ������������������  [0,����������� ������������������  false,����������� ������������������  -1,����������� ������������������  1,����������� ������������������  null,����������� ������������������  "",����������� ������������������  "����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  "����������� ������������������  ,����������� ������������������  undefined,����������� ������������������  NaN,];����������� ������������������  

!for(var����������� ������������������  i����������� ������������������  =����������� ������������������  0����������� ������������������  ;����������� ������������������  i����������� ������������������  <����������� ������������������  aData.length����������� ������������������  ;����������� ������������������  i++)����������� ������������������  {����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  if(aData[i])����������� ������������������  console.log(aData[i]����������� ������������������  +����������� ������������������  "����������� ������������������  is����������� ������������������  true����������� ������������������  ");����������� ������������������  

}

Page 11: 7주 JavaScript Part1

var����������� ������������������  a����������� ������������������  =����������� ������������������  null;����������� ������������������  

a����������� ������������������  =����������� ������������������  0����������� ������������������  +����������� ������������������  null;var����������� ������������������  myValue����������� ������������������  =����������� ������������������  a����������� ������������������  ||����������� ������������������  “default����������� ������������������  value”;console.log(myValue);����������� ������������������  ����������� ������������������  //?

숙제2����������� ������������������  

결과와����������� ������������������  그����������� ������������������  이유에����������� ������������������  대해서����������� ������������������  짧게����������� ������������������  쓰기

Page 12: 7주 JavaScript Part1

Conditional����������� ������������������  operators

var height = “182cm”!

var nHeight = parseInt(height);!

var handSome = (nHeight > 180) ? true : false;!

console.log(handSome); //?

Page 13: 7주 JavaScript Part1

NaN

‘숫자가����������� ������������������  아니다.����������� ������������������  not����������� ������������������  a����������� ������������������  number’����������� ������������������  라는����������� ������������������  표현으로����������� ������������������  숫자����������� ������������������  연산에서����������� ������������������  실패한����������� ������������������  경우에����������� ������������������  사용.����������� ������������������  

!1 / “2” !

> 0.5!

!1 / “next”!

>NaN!

!NaN == NaN !

> ??!

!1 / 0!

> Infinity!

Page 14: 7주 JavaScript Part1

S t a t e m e n t s

Page 15: 7주 JavaScript Part1

Conditional����������� ������������������  Statements

var x = 3;!!if ( x == 2) {! x++;!} else if(x ==3) {! x--;!} else {! console.log( ‘who a u ? ->’ , x);!} !!

if...else����������� ������������������  Statement

if (x == 2) x++; else if(x ==3) x--; else console.log('who a u ? ->' , x); brace의����������� ������������������  중요함…⋯����������� ������������������  아래����������� ������������������  코드가����������� ������������������  알아볼����������� ������������������  만����������� ������������������  하신가?

Page 16: 7주 JavaScript Part1

Loop����������� ������������������  Statements

!var result = 0;!for (var i=0 ; i < 10 ; i++ ) {! result += i;!} !console.log(result);!!!//이렇게도 가능하고!for (var i=0,j=0;;i++,j++){! console.log(i ,j);! if(i == 100)break;!}

for����������� ������������������  Statement

Page 17: 7주 JavaScript Part1

그����������� ������������������  밖에����������� ������������������  

while����������� ������������������  loop,����������� ������������������  ����������� ������������������  

do����������� ������������������  while����������� ������������������  loop����������� ������������������  ,����������� ������������������  

break,����������� ������������������  

continue,����������� ������������������  

switch����������� ������������������  

for����������� ������������������  in����������� ������������������  <객체를����������� ������������������  다룰����������� ������������������  때����������� ������������������  사용>

Page 18: 7주 JavaScript Part1

숙제3����������� ������������������  

결과����������� ������������������  코드����������� ������������������  제출하기

result����������� ������������������  =����������� ������������������  0;����������� ������������������  for����������� ������������������  (var����������� ������������������  i=0����������� ������������������  ;����������� ������������������  i����������� ������������������  <����������� ������������������  10����������� ������������������  ;����������� ������������������  i++����������� ������������������  )����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  result����������� ������������������  +=����������� ������������������  i;����������� ������������������  }����������� ������������������  ����������� ������������������  console.log(result);

다음코드와����������� ������������������  동일한����������� ������������������  while문을����������� ������������������  구현하세요

Page 19: 7주 JavaScript Part1

var arr = [1,2,3,4,44,66,42,12,32,“234”,33,98];

다음은����������� ������������������  배열입니다.����������� ������������������  

원소����������� ������������������  중에����������� ������������������  짝수의����������� ������������������  갯수가����������� ������������������  몇����������� ������������������  개인지����������� ������������������  출력하세요.����������� ������������������  

for����������� ������������������  loop����������� ������������������  를����������� ������������������  사용하며����������� ������������������  문자열을����������� ������������������  만나면����������� ������������������  loop를����������� ������������������  탈출합니다����������� ������������������  참고����������� ������������������  :����������� ������������������  Array에는����������� ������������������  length����������� ������������������  property가����������� ������������������  있음����������� ������������������  (arr.length)

숙제4����������� ������������������  

결과����������� ������������������  코드����������� ������������������  제출하기

Page 20: 7주 JavaScript Part1

f u n c t i o n

Page 21: 7주 JavaScript Part1

function functionName (arg0,arg1 ......argN) {! statements!}

function getMessage (name) {! message = “Hello ! ” + name;! return message;!}!!result = getMessage(“jisu” , “youn”);!console.log(result);

Ex.

함수

Page 22: 7주 JavaScript Part1

함수를����������� ������������������  선언하는����������� ������������������  두가지����������� ������������������  방법

function addNumber (num) {! return num++;! }

var addNumber = function (num) {! return num++;!}

function����������� ������������������  declaration function����������� ������������������  expression

addNumber(2); addNumber(2);

두����������� ������������������  개는����������� ������������������  어떻게����������� ������������������  다를까?

Page 23: 7주 JavaScript Part1

function getMessage (name) {! message = “Hello ! ” + name ;! return message;!}

Javascript의����������� ������������������  인자(arguments)갯수는,호출시����������� ������������������  달라도����������� ������������������  상관����������� ������������������  없음����������� ������������������  

!result = getMessage();!console.log(result);

Page 24: 7주 JavaScript Part1

모든����������� ������������������  함수는����������� ������������������  arguments라는����������� ������������������  배열과����������� ������������������  유사한����������� ������������������  속성을����������� ������������������  가지고����������� ������������������  있다.����������� ������������������  

arguments에는����������� ������������������  length����������� ������������������  속성을����������� ������������������  가지고����������� ������������������  있어����������� ������������������  길이를����������� ������������������  알����������� ������������������  수����������� ������������������  있다

function getMessage (name) {! message = “Hello ! ” + name + “.” + arguments[1];! return message;!}!!result = getMessage(“jisu” , “youn”);!console.log(result);

Page 25: 7주 JavaScript Part1

var addNumber = function (num) {! return num++;!}

함수를����������� ������������������  이렇게����������� ������������������  표현할����������� ������������������  수����������� ������������������  있다는����������� ������������������  건����������� ������������������  무슨����������� ������������������  의미일까?����������� ������������������  

함수����������� ������������������  이름(addNumber)은����������� ������������������  단지����������� ������������������  ,����������� ������������������  함수를����������� ������������������  가리키는����������� ������������������  이름(변수)일����������� ������������������  뿐.

Page 26: 7주 JavaScript Part1

함수의����������� ������������������  실행

function getName(name) {! console.log("my name is " + name);!}!!getName("hary");!my name is hary

Page 27: 7주 JavaScript Part1

함수의����������� ������������������  실행����������� ������������������  

(크롬����������� ������������������  개발자도구에서����������� ������������������  간단히����������� ������������������  테스트����������� ������������������  가능)

Page 28: 7주 JavaScript Part1

“자바스크립트는����������� ������������������  함수형언어”����������� ������������������  

����������� ������������������  함수를����������� ������������������  다른����������� ������������������  함수의����������� ������������������  인자로����������� ������������������  사용하거나����������� ������������������  반환값으로����������� ������������������  사용할����������� ������������������  수����������� ������������������  있음.����������� ������������������  

Page 29: 7주 JavaScript Part1

함수를����������� ������������������  함수의����������� ������������������  인자로����������� ������������������  넣을����������� ������������������  수도����������� ������������������  있다.����������� ������������������  

function addNumber (num , func) {! value = func(num);! return value;! }! ! newfun = function(arg) {return ++arg};! addNumber(2,newfun);!

Page 30: 7주 JavaScript Part1

함수의����������� ������������������  반환값으로����������� ������������������  사용할����������� ������������������  수도����������� ������������������  있다����������� ������������������  

function addNumber (num , func) {! value = func(num);! return function(){return ++value};! }! ! var newfun = function(arg) {return ++arg};! resultfun = addNumber(2,newfun); resultfun();!

Page 31: 7주 JavaScript Part1

debugger;����������� ������������������  

function addNumber (num , func) { debugger;! value = func(num);! return function(){return ++value};! }! ! var newfun = function(arg) {return ++arg};! resultfun = addNumber(2,newfun); resultfun();!

Page 32: 7주 JavaScript Part1

함 수 와 ����������� ������������������   ����������� ������������������  유 효 범 위

Page 33: 7주 JavaScript Part1

자바스크립트는����������� ������������������  ����������� ������������������  

블록({...})����������� ������������������  유효범위가����������� ������������������  없다

function test() { for (var i = 1; i < 10 ; i++ ) {! continue;! } !! console.log("i -> " + i);!}!!test();

Page 34: 7주 JavaScript Part1

자바스크립트는����������� ������������������  ����������� ������������������  

블록({...})����������� ������������������  유효범위가����������� ������������������  없다

function test() { for (var i = 1; i < 10 ; i++ ) {! continue;! } ! debugger;! console.log("i -> " + i);!}!!test();

Page 35: 7주 JavaScript Part1

!function printFun() { var innerValue = 3; } !!console.log(innerValue);

ReferenceError: innerValue is not defined

자바스크립트는����������� ������������������  ����������� ������������������  

함수����������� ������������������  단위����������� ������������������  유효범위만����������� ������������������  있을����������� ������������������  뿐.

Page 36: 7주 JavaScript Part1

!function printFun() { innerValue = 3; } !!printFun();!console.log(innerValue);

하지만����������� ������������������  var����������� ������������������  키워드����������� ������������������  없이����������� ������������������  사용하면����������� ������������������  전역변수

Page 37: 7주 JavaScript Part1

그래서����������� ������������������  이런����������� ������������������  상황이����������� ������������������  발생하기도����������� ������������������  함.

var value = 4;!!function printFun() { value = 3;!} !!printFun();!console.log(value); 여기서����������� ������������������  value의����������� ������������������  값은����������� ������������������  무엇인가?

Page 38: 7주 JavaScript Part1

변수����������� ������������������  scope가����������� ������������������  어떻게����������� ������������������  되는지����������� ������������������  한����������� ������������������  번����������� ������������������  들여다보자.

var value = 4;!!function printFun() {! var innerValue = 3;! debugger; value = innerValue;!} !!printFun();!console.log(value);

Page 39: 7주 JavaScript Part1

함수가����������� ������������������  실행되면����������� ������������������  ����������� ������������������  

scope(유효범위)����������� ������������������  chain이라는����������� ������������������  게����������� ������������������  생긴다.

Page 40: 7주 JavaScript Part1

이런����������� ������������������  함수가����������� ������������������  있다고����������� ������������������  가정하자.����������� ������������������  (자바스크립트는����������� ������������������  함수����������� ������������������  안에����������� ������������������  함수가����������� ������������������  있을����������� ������������������  수����������� ������������������  있다)

var gb = "global";!!function firstfun() {! var outer = "outer";!! function secondfun() {! var inner = "inner";! } !}

Page 41: 7주 JavaScript Part1

var gb = "global";!!function firstfun() {! var outer = "outer";!! function secondfun() {! var inner = "inner";! } !}!

global context - gb - firstfun context - outer - secondfun context - inner

scope����������� ������������������  chain

각각의����������� ������������������  context가����������� ������������������  가지고����������� ������������������  있는����������� ������������������  scope가����������� ������������������  있음.

Page 42: 7주 JavaScript Part1

서로다른����������� ������������������  유효범위의����������� ������������������  변수를����������� ������������������  참조����������� ������������������  할����������� ������������������  수����������� ������������������  있는지����������� ������������������  확인����������� ������������������  

var gb = "global";!!function firstfun() {! var outer = "outer";!! function secondfun() {! var inner = "inner";! console.log(typeof gb , typeof outer , typeof inner);! } ! secondfun();! console.log(typeof gb , typeof outer , typeof inner); !}!!firstfun();!console.log(typeof gb , typeof outer , typeof inner);

Page 43: 7주 JavaScript Part1

debugger로����������� ������������������  변수의����������� ������������������  접근을����������� ������������������  확인����������� ������������������  

var gb = "global";!!function firstfun() {! var outer = "outer";!! function secondfun() {! var inner = "inner";! console.log(typeof gb , typeof outer , typeof inner);! debugger;! } ! secondfun();! console.log(typeof gb , typeof outer , typeof inner); !}!!firstfun();!console.log(typeof gb , typeof outer , typeof inner);

Page 44: 7주 JavaScript Part1

End ;-D