7주 JavaScript Part1
description
Transcript of 7주 JavaScript Part1
JavaScript����������� ������������������ part����������� ������������������ 1
수업방식����������� ������������������ 변경
동영상시청 숙제제출질문/답변����������� ������������������ &����������� ������������������ 실습위주����������� ������������������ 수업
여긴 예습 여긴 복습
목표
Javascript가����������� ������������������ 브라우저에서����������� ������������������ 어떻게����������� ������������������ 사용되는지����������� ������������������ 안다.����������� ������������������
Javascript의����������� ������������������ 기본����������� ������������������ 문법을����������� ������������������ 안다.����������� ������������������
함수의����������� ������������������ 기본����������� ������������������ 사용법을����������� ������������������ 안다.
o p e r a t o r s
X = X + Y!
X = X * Y !
X +=Y!
X *= Y
operator����������� ������������������ shorthand����������� ������������������ operator����������� ������������������
Assignment����������� ������������������ operators����������� ������������������
Comparison����������� ������������������ operators“23” == 23; !
true == “1”;!
!“23” === 23;!
true === 1;!
!33.3 >= 33.33!
33.3 <= 33.33
Javascript����������� ������������������ 엔진이����������� ������������������ 임의로����������� ������������������ 타입을����������� ������������������ 변환해서����������� ������������������ 비교한다....으악.
Comparison����������� ������������������ operators“23” == 23; !
true == “1”;!
!“23” === 23;!
true === 1;!
!33.3 >= 33.33!
33.3 <= 33.33
결론적으로����������� ������������������ Javascript의����������� ������������������ 타입����������� ������������������ 비교는����������� ������������������ ����������� ������������������
정확한����������� ������������������ 타입을����������� ������������������ 모두����������� ������������������ 비교할����������� ������������������ 수����������� ������������������ 있는����������� ������������������ ����������� ������������������ ‘===’����������� ������������������ ����������� ������������������ 만을����������� ������������������ 사용하는����������� ������������������ 것이����������� ������������������ 좋다.
Javascript����������� ������������������ 엔진이����������� ������������������ 임의로����������� ������������������ 타입을����������� ������������������ 변환해서����������� ������������������ 비교한다....으악.
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
logical����������� ������������������ operators
true����������� ������������������ &&����������� ������������������ true;����������� ������������������
>����������� ������������������ true����������� ������������������
!“next”����������� ������������������ ||����������� ������������������ false;����������� ������������������
>����������� ������������������ next����������� ������������������
var����������� ������������������ a����������� ������������������ =����������� ������������������ false;var����������� ������������������ myValue����������� ������������������ =����������� ������������������ a����������� ������������������ ||����������� ������������������ “new����������� ������������������ value”;console.log(myValue)����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ //����������� ������������������ ?
숙제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����������� ������������������ ");����������� ������������������
}
var����������� ������������������ a����������� ������������������ =����������� ������������������ null;����������� ������������������
a����������� ������������������ =����������� ������������������ 0����������� ������������������ +����������� ������������������ null;var����������� ������������������ myValue����������� ������������������ =����������� ������������������ a����������� ������������������ ||����������� ������������������ “default����������� ������������������ value”;console.log(myValue);����������� ������������������ ����������� ������������������ //?
숙제2����������� ������������������
결과와����������� ������������������ 그����������� ������������������ 이유에����������� ������������������ 대해서����������� ������������������ 짧게����������� ������������������ 쓰기
Conditional����������� ������������������ operators
var height = “182cm”!
var nHeight = parseInt(height);!
var handSome = (nHeight > 180) ? true : false;!
console.log(handSome); //?
NaN
‘숫자가����������� ������������������ 아니다.����������� ������������������ not����������� ������������������ a����������� ������������������ number’����������� ������������������ 라는����������� ������������������ 표현으로����������� ������������������ 숫자����������� ������������������ 연산에서����������� ������������������ 실패한����������� ������������������ 경우에����������� ������������������ 사용.����������� ������������������
!1 / “2” !
> 0.5!
!1 / “next”!
>NaN!
!NaN == NaN !
> ??!
!1 / 0!
> Infinity!
S t a t e m e n t s
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의����������� ������������������ 중요함…⋯����������� ������������������ 아래����������� ������������������ 코드가����������� ������������������ 알아볼����������� ������������������ 만����������� ������������������ 하신가?
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
그����������� ������������������ 밖에����������� ������������������
while����������� ������������������ loop,����������� ������������������ ����������� ������������������
do����������� ������������������ while����������� ������������������ loop����������� ������������������ ,����������� ������������������
break,����������� ������������������
continue,����������� ������������������
switch����������� ������������������
for����������� ������������������ in����������� ������������������ <객체를����������� ������������������ 다룰����������� ������������������ 때����������� ������������������ 사용>
숙제3����������� ������������������
결과����������� ������������������ 코드����������� ������������������ 제출하기
result����������� ������������������ =����������� ������������������ 0;����������� ������������������ for����������� ������������������ (var����������� ������������������ i=0����������� ������������������ ;����������� ������������������ i����������� ������������������ <����������� ������������������ 10����������� ������������������ ;����������� ������������������ i++����������� ������������������ )����������� ������������������ {����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ result����������� ������������������ +=����������� ������������������ i;����������� ������������������ }����������� ������������������ ����������� ������������������ console.log(result);
다음코드와����������� ������������������ 동일한����������� ������������������ while문을����������� ������������������ 구현하세요
var arr = [1,2,3,4,44,66,42,12,32,“234”,33,98];
다음은����������� ������������������ 배열입니다.����������� ������������������
원소����������� ������������������ 중에����������� ������������������ 짝수의����������� ������������������ 갯수가����������� ������������������ 몇����������� ������������������ 개인지����������� ������������������ 출력하세요.����������� ������������������
for����������� ������������������ loop����������� ������������������ 를����������� ������������������ 사용하며����������� ������������������ 문자열을����������� ������������������ 만나면����������� ������������������ loop를����������� ������������������ 탈출합니다����������� ������������������ 참고����������� ������������������ :����������� ������������������ Array에는����������� ������������������ length����������� ������������������ property가����������� ������������������ 있음����������� ������������������ (arr.length)
숙제4����������� ������������������
결과����������� ������������������ 코드����������� ������������������ 제출하기
f u n c t i o n
function functionName (arg0,arg1 ......argN) {! statements!}
function getMessage (name) {! message = “Hello ! ” + name;! return message;!}!!result = getMessage(“jisu” , “youn”);!console.log(result);
Ex.
함수
함수를����������� ������������������ 선언하는����������� ������������������ 두가지����������� ������������������ 방법
function addNumber (num) {! return num++;! }
var addNumber = function (num) {! return num++;!}
function����������� ������������������ declaration function����������� ������������������ expression
addNumber(2); addNumber(2);
두����������� ������������������ 개는����������� ������������������ 어떻게����������� ������������������ 다를까?
function getMessage (name) {! message = “Hello ! ” + name ;! return message;!}
Javascript의����������� ������������������ 인자(arguments)갯수는,호출시����������� ������������������ 달라도����������� ������������������ 상관����������� ������������������ 없음����������� ������������������
!result = getMessage();!console.log(result);
모든����������� ������������������ 함수는����������� ������������������ arguments라는����������� ������������������ 배열과����������� ������������������ 유사한����������� ������������������ 속성을����������� ������������������ 가지고����������� ������������������ 있다.����������� ������������������
arguments에는����������� ������������������ length����������� ������������������ 속성을����������� ������������������ 가지고����������� ������������������ 있어����������� ������������������ 길이를����������� ������������������ 알����������� ������������������ 수����������� ������������������ 있다
function getMessage (name) {! message = “Hello ! ” + name + “.” + arguments[1];! return message;!}!!result = getMessage(“jisu” , “youn”);!console.log(result);
var addNumber = function (num) {! return num++;!}
함수를����������� ������������������ 이렇게����������� ������������������ 표현할����������� ������������������ 수����������� ������������������ 있다는����������� ������������������ 건����������� ������������������ 무슨����������� ������������������ 의미일까?����������� ������������������
함수����������� ������������������ 이름(addNumber)은����������� ������������������ 단지����������� ������������������ ,����������� ������������������ 함수를����������� ������������������ 가리키는����������� ������������������ 이름(변수)일����������� ������������������ 뿐.
함수의����������� ������������������ 실행
function getName(name) {! console.log("my name is " + name);!}!!getName("hary");!my name is hary
함수의����������� ������������������ 실행����������� ������������������
(크롬����������� ������������������ 개발자도구에서����������� ������������������ 간단히����������� ������������������ 테스트����������� ������������������ 가능)
“자바스크립트는����������� ������������������ 함수형언어”����������� ������������������
����������� ������������������ 함수를����������� ������������������ 다른����������� ������������������ 함수의����������� ������������������ 인자로����������� ������������������ 사용하거나����������� ������������������ 반환값으로����������� ������������������ 사용할����������� ������������������ 수����������� ������������������ 있음.����������� ������������������
함수를����������� ������������������ 함수의����������� ������������������ 인자로����������� ������������������ 넣을����������� ������������������ 수도����������� ������������������ 있다.����������� ������������������
function addNumber (num , func) {! value = func(num);! return value;! }! ! newfun = function(arg) {return ++arg};! addNumber(2,newfun);!
함수의����������� ������������������ 반환값으로����������� ������������������ 사용할����������� ������������������ 수도����������� ������������������ 있다����������� ������������������
function addNumber (num , func) {! value = func(num);! return function(){return ++value};! }! ! var newfun = function(arg) {return ++arg};! resultfun = addNumber(2,newfun); resultfun();!
debugger;����������� ������������������
function addNumber (num , func) { debugger;! value = func(num);! return function(){return ++value};! }! ! var newfun = function(arg) {return ++arg};! resultfun = addNumber(2,newfun); resultfun();!
함 수 와 ����������� ������������������ ����������� ������������������ 유 효 범 위
자바스크립트는����������� ������������������ ����������� ������������������
블록({...})����������� ������������������ 유효범위가����������� ������������������ 없다
function test() { for (var i = 1; i < 10 ; i++ ) {! continue;! } !! console.log("i -> " + i);!}!!test();
자바스크립트는����������� ������������������ ����������� ������������������
블록({...})����������� ������������������ 유효범위가����������� ������������������ 없다
function test() { for (var i = 1; i < 10 ; i++ ) {! continue;! } ! debugger;! console.log("i -> " + i);!}!!test();
!function printFun() { var innerValue = 3; } !!console.log(innerValue);
ReferenceError: innerValue is not defined
자바스크립트는����������� ������������������ ����������� ������������������
함수����������� ������������������ 단위����������� ������������������ 유효범위만����������� ������������������ 있을����������� ������������������ 뿐.
!function printFun() { innerValue = 3; } !!printFun();!console.log(innerValue);
하지만����������� ������������������ var����������� ������������������ 키워드����������� ������������������ 없이����������� ������������������ 사용하면����������� ������������������ 전역변수
그래서����������� ������������������ 이런����������� ������������������ 상황이����������� ������������������ 발생하기도����������� ������������������ 함.
var value = 4;!!function printFun() { value = 3;!} !!printFun();!console.log(value); 여기서����������� ������������������ value의����������� ������������������ 값은����������� ������������������ 무엇인가?
변수����������� ������������������ scope가����������� ������������������ 어떻게����������� ������������������ 되는지����������� ������������������ 한����������� ������������������ 번����������� ������������������ 들여다보자.
var value = 4;!!function printFun() {! var innerValue = 3;! debugger; value = innerValue;!} !!printFun();!console.log(value);
함수가����������� ������������������ 실행되면����������� ������������������ ����������� ������������������
scope(유효범위)����������� ������������������ chain이라는����������� ������������������ 게����������� ������������������ 생긴다.
이런����������� ������������������ 함수가����������� ������������������ 있다고����������� ������������������ 가정하자.����������� ������������������ (자바스크립트는����������� ������������������ 함수����������� ������������������ 안에����������� ������������������ 함수가����������� ������������������ 있을����������� ������������������ 수����������� ������������������ 있다)
var gb = "global";!!function firstfun() {! var outer = "outer";!! function secondfun() {! var inner = "inner";! } !}
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가����������� ������������������ 있음.
서로다른����������� ������������������ 유효범위의����������� ������������������ 변수를����������� ������������������ 참조����������� ������������������ 할����������� ������������������ 수����������� ������������������ 있는지����������� ������������������ 확인����������� ������������������
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);
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);
End ;-D