var가 있고 없고 차이는?

var name = "도라에몽"
name = "도라에몽"



복습 !
javascript 객체생성방법!

ex1 ) 
var hong = {
"name" : "퉁퉁이",
"age" : 23,
"kor" : 30,
"math" : 20,
"eng" : 80
};

ex2 ) 
var kim = {};
kim.name = "김";
kim.age = 30;
kim.kor = 100;
kim.math = 70;
kim.eng = 80;


ex3 ) 함수로 만들기

function makeStudent(name, age, kor, math, eng){

var stu={};

stu.name = name;

stu.age = age;

stu.kor = kor;

stu.math = math;

stu.eng = eng;

return stu;

}

var hong = makeStudent('퉁퉁이', 23, 50, 30, 40);


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

자바스크립트 기능을 가지고 생성자를 흉내!


function makeStudent(name, age, kor, math, eng){

var stu={

"name" : name,

"age" : age,

"kor" : kor,

"math" : math,

"eng" : eng,

"getAverage" : function(){

return (kor + math + eng ) / 3;

}

};

return stu;

}

var hong = makeStudent('통통이', 23, 50, 30, 40);

alert("이름 : " + hong.name + "\n나이 : " + hong.age + "\n점수 :" + hong.getAverage());


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

생성자함수! ( 사실 생성자함수라는게 따로 존재하는 개념이 아님! )

함수에서 this키워드를 이용해 속성을 추가하면

new 연산자를 통해 함수를 호출하면 this키워드에 추가한 속성들로 이뤄진 객체가 만들어짐



function Student(name, age, kor, math, eng){

this.name = name;

this.age = age;

this.kor = kor;

this.math = math;

this.eng = eng;

this.getAverage = function(){

return (kor + math + eng) / 3;

}

}

var hong = new Student('퉁퉁이', 23, 50, 30 , 40);       // new를 사용하여 값을 넣으면 새로운 객체가 생성!


alert("이름 : " + hong.name + "\n나이 : " + hong.age + "\n점수 :" + hong.getAverage());


함수에서 this키워드를 이용해 속성을 추가하면

new 연산자를 통해 함수를 호출하면 this키워드에 추가한 속성들로 이뤄진 객체가 만들어짐


new 키워드를 사용하지 않았을때

this키워드는 window객체를 나타냄

-> 함수를 실행하는 동안 window객체에 속성을 추가하게 됨


new 키워드를 사용

함수가 실행될때 새로운 객체를 위한 공간을 만들고 this키워드가 해당 공간을 의미


-------------------------------------------------------------------------------------------------
window객체는 최상위 객체로써
alert, setTimeout등등 전부 window객체의 속성

----------------------------------------------------------------------------------------------
setTimeout등 함수를 사용하여 body에 있는 제목태그를 3초뒤에 빨간색으로 바꾸기!

window.onload = function(){
setTimeout(function(){
document.getElementById("header").style.color='red';// 여기에서 h1제목태그에 접근해서 글자색을 빨갱이로 바꾸도록 명령어 작성
}, 3000);
}


</script>
<body>
<h1 id="header">제목태그</h1>

</body>

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

태그영역에 마우스가 들어가면 빨간색이 됬다가 마우스가 나가면 다시 검은색이 되는 예제


window.onload = function(){

var h1 = document.getElementById('header');

h1.onmouseout = function(){

h1.style.color = 'black';

}

h1.onmouseenter = function(){

h1.style.color = 'red';

}

}


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

함수로 따로만들어서 헤드에서 함수를 불러주는 방법

제목태그에 마우스를 가져가면 팝업창이뜨는 예제


window.onload = function(){

var h1 = document.getElementById('header');

}

function doSomething(){

alert('hello');

}


</script>

<body>

<h1 id="header" onmouseenter="doSomething()">제목태그</h1>


</body>


Posted by 보로로롬
,

자바스크립트 함수


var f = function(d){

return d*d;

}


var val = f(3);

alert(val);


d는 매개변수를 값으로 받으려면 쓰고,

아니면 비워두어도 괜찮습니다.

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


var f = function(d){

  alert(arguments.length); // 호출되고 있는 현재함수가 받은 매개변수들에 대한 정보를  담고있는 객체

return d*d;

}


var val = f(2,3,4);

alert(val);


여기서 val = f(2,3,4) 중 매개변수 2는 d로 값이 전달되고 

3, 4도 함수값이 전달되기는 했음 ( 확인 하고싶으면 (arguments.length)로 확인가능 )

접근하려면 인덱스로 접근하면됨.


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

// 누적 곱 계산


var mul = function(){

var m=1;

for(var i=0; i<arguments.length; i++)   // arguments.length 까지 탐색!

m = m*arguments[i];

return m;

}

alert(mul(1,2,3,4));


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

함수안에 함수도 넣을수가 있음


function outer(){

function inner(x){

return x * x;

}

alert( inner(3));

}

outer();


outer()함수안에 inner을 넣어서 

ourer함수에서 매개변수 값을 넣어주고

outer()함수를 출력

출력값은 9 가 나와요.


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



function callThreeTimes(callBack){  // 전달되는 매개변수 받아내기 ( 6가지 자료형 아무거나 매개변수에 들어올수 있음)

for(vai i=0; i<3; i++)

callBack;  // 매개변수로 전달받은 함수를 호출

var callBack = function(){  // 함수도 6가지 자료형 중  하나이고 변수에 담길수 있음

alert('함수호출');

}

callThreeTimes(CallBack); // 매개변수에 함수를 전달


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



function callThreeTimes(myFunc){  // 전달되는 매개변수 받아내기 ( 6가지 자료형 아무거나 매개변수에 들어올수 있음)

for(var i=0; i<3; i++)

myFunc();  // 매개변수로 전달받은 함수를 호출

var myFunc = function(){  // 함수도 6가지 자료형 중  하나이고 변수에 담길수 있음

alert('함수호출');

}

callThreeTimes(myFunc); // 매개변수에 함수를 전달

//매개변수로 전달되는 함수를 콜백함수라고 부름

// 다른함수로 전달되어지는 함수 = 콜백함수


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

//두수를 매개변수로 받하서 합을 리턴하는 함수

var addFunc = function(a,b){

return a+b;

}


//두수를 매개변수로 받하서 곱을 리턴하는 함수

var mulFunc = function(a,b){

return a*b;

}


//함수를 매개변수로 받아 그 함수에 두개의 숫자를 넘겨주고

//호출한 함수가 리턴하는 값을 출력하는 함수 작성

var printFunc = function(func){

alert( func(3,2) );

}


printFunc( addFunc );

printFunc( mulFunc );


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


var misA = function(){

alert("미사일공격!");

}

var punA = function(){

alert("펀치공격!");

}


var flyM = function(){

alert("날아가기!");

var wolkM= function(){

alert("걸어가기!!");

}


fight = function(attack ,move){

attack();

move();

attack();

}


fight(punA,flyM)


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


var myFunc = function(){

alert('나는 함수를 리턴할거임ㅋ');

return function(){

alert('반환된 함수임ㅋ');

}

}


1번방법

var result = myFunc();

result();


// function(){  //자기호출함수

// alert('바로호출해줘');

// }();


2번방법

myFunc()(); //myFunc() 반환값(반환된함수) 호출


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

클로저 현상 예제

-> 함수내의 지역변수는 함수가 종료될때 메모리가 해제되야 되는데

반환값으로 사용한 내부함수에서 지역변수를 사용하고있어서 

해제되지 못하고 남아있는 현상


ex1 )

var myFunc = function(){

var hello = "hello world";      

var inner = function() {

alert(hello);

}

return inner;

}


var a = myFunc();

var b = myFunc();

a();

b();



ex2 )

var makeIntroduce = function(name){

var intro='안녕하세요. 제 이름은' + name + '입니다.';

return function(){


alert(intro);

}

}

var hongIntro= makeIntroduce('Hong')

var kimIntro= makeIntroduce('Kim')

hongIntro();

kimIntro();



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

내부함수 : 함수안에 함수를 정의할수있음

1. 원래 선언함수는 처음실행시 모두 읽어서 메모리에 로드 하는데

내부함수는 선언함수여도 속한 함수가 호출될때 로드됨


2.각자 이름공간을 갖음


자바스크립트에서는 함수도 하나의 자료형이므로

변수에 담길수 있고, 당연히 매개변수로 전달도 가능

콜백함수 : 다른함수에게 전달되어지는 함수


내부함수는 자신이 속한 함수의 지역변수에 접근가능


내부함수를 리턴으로 돌려줄수있음


클로저! -> 내부함수가

자신이 속한 함수의 지역변수를 물고있어서

속한 함수가 종료됐음에도 지역변수가 해제되지못하고 메모리 남아있는현상


클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다.


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

몇초 후에 기능을 하고싶다.

setTimeout( callBack, time);


ex1 )

setTimeout(function(){

alert('3초지남');}

, 3000);


ex2 )

setTimeout(function(){

location.href='http://www.naver.com';

},3000);


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


var id = serInterVal(function()){

alert('인터벌은 주기마다 계속 실행');   //조심해야됨

}, 1000);


setTimeout(function(){

clearInertval(id);

},5000);

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

alert('a');

setTimeout(function(){

alert('b')}, 0);  //남은명령코드 다실행 후 0초후에 alert('b')수행

alert('c');


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

ex 클로저를 이용해 0,1,2찍기


for(var i = 0; i<3; i++)

{

(function(a){

setTimeout(function(){

alert(a);

},0)

})(i);

}


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

함수를 매개변수로...콜백

함수에 함수를 ... 내부함수-사용이유 용도;



함수를 반환.. 내부함수반환 ->클로저개념


클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다.




setTimeout과 setInterval메소드에 대해


setTimeout & setInterval &clearInterval  이것은 window 객체에서 사용하는 메소드이다.


==> 실행되는 함수를 시간이 지난 후에 한번 실행한다.

객체이름 = setTimeout("함수호출", 시간);


setTimeout을 해제하기 위한 메소드

==> clearTimeout("객체이름");


==> 반복적으로 실행하기 위해서는

setInterval("함수호출", 시간);


이것을 해제하기 위해서는

==> clearInterval(객체이름);




Posted by 보로로롬
,

자바스크립트를 쓰려면!!

HTML파일이나 JSP에서 보통 <head>에

<script type="text/javascript"> </script>을 넣어서사용합니다.


자바스크립트는 

-오류를 잡아주지않습니다...

-에러가 있어도 실행은 하나 에러 전까지의 작업만 수행합니다.


자바스크립트의 var

-var은 변수인데 참조변수라서 배열, 문자, 숫자 상관없이 다 사용가능합니다.


//문자열

   alert('이것도 문자열이고 ');

   alert("이것도 문자열임..");

   alert("제 이름은 'name'입니다");    // " "안에 있는것은 모두 문자입니다.

   alert('제 이름은 "name"입니다');    // '  '안에 있는것도 모두 문자입니다.

   alert('서식문자   \" name\"');      // java에서 쓰듯이 "앞에 \를 써줘도 됩니다!


//숫자 자료형

   alert(23);        // " "나 ' '가 없으면 숫자입니다! 

   alert(23.9);      //

   

//논리자료형

   alert(2>3);      // 비교를 하면 논리자료형이되고 값은 true / flase 로 출력됩니다.

   alert(3>2);


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

타입확인


 var a = '드루와';

 var b = 23;

 var c = 2>3;

 var d = {};

 var e = [];

 var f = function(){};


     타입

 alert(typeof(a))    ;//String 

 alert(typeof(b));    //number

 alert(typeof(c));    //boolean

 alert(typeof(d));    //object

 alert(typeof(e));    //object

 alert(typeof(f));    //function

 alert(typeof(g))    ;//undefined 값이 없어서 undefined로 나옵니다.

 alert("??????");



var array = [ 1, '문자', true];    // 배열도 var에서 선언가능합니다.

array.push = function(d){

alert(d+"가 들어왔네 ");

};

array.push('추가염');    // push 에 

alert(array[0]);

alert(array[1]);

alert(array[2]);

alert(array[3]);

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

배열도 객체라는 것을 보여주기위한 예제


var object = {

"num" : 1,

"str" : '문자',

"bool" : true

};

object.num = 2;            //기존 추가   num값이 1이였는데 2로 수정 

object.addVal = "새로추가";   

alert(object["num"]);        // alert(object.num); 

alert(object["str"]);          // alert(object.str);

alert(object["bool"]);        // alert(object.bool);

alert(object["addVal"]);     //   alert(object.addVal);


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

if문 예제

현재시간을 받아와서 if을 사용해 값을 출력하는 예제입니다.


var date = new Date();

var hour = date.getHours();

if(hour > 12)

alert('오후네요');

else

alert('오전이네요 아직도');


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

else if문 예제

위와 같은 예제로 else if문도 사용가능하겠구요!


var date = new Date();

  var hour = date.getHours();

  if(hour < 12)

     alert("오전");

  else if(hour <13 )

     alert("점심");

  else if(hour< 18)

     alert("오후");

  else 

     alert("저녁");


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

switch 예제

사용자로부터 prompt를 사용하여 숫자를 입력받아 숫자를 2로 나눠

짝수, 홀수를 판별. default를 사용해서 숫자가 아닌값을 받으면 아래와같이 출력

*prompt 는 scaner 처럼 값을 입력받을 때 처럼 창을 띄워서 값을 입력받는 거에요. 



var input = Number(prompt('숫자를 입력하세요.', ' text창에 띄워주는 text '));

   switch(input % 2){

   case 0:

      alert("짝수네요");

      break;

   case 1:

      alert("홀수네요");

      break;

   default :

      alert("숫자가 아니네요")

      break;

   }


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

for문 예제

간단한 배열을 for문을 돌려서 출력!


var arr = [1,2,3,4,5];

for(var i in arr )

alert(arr[i]);


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

같은 출력 (for in문) 

var arr = [1,2,3,4,5];

for(var i in arr )

alert(arr[i]);


*for(var 변수 in 데이터셋)

-> 데이터셋에서 데이터의 식별자를 하나씩 꺼내서 변수에 담고 구문 실행


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


함수 : 명령어의 집합

자바스크립트에서의 함수 : 코드의 집합을 나타내는 자료형


var myFunction = function(){    //익명함수

alert('함수ㅋㅋ');

};

alert(myFunction)    // myFunction 은 문자를 가지고있을뿐....

myFunction();         // 함수로 사용하려면 (); 를 붙이면 들고있는 명령어집합을 실행!



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

선언함수는 명령어 흐름이 스타트포인트에서 출발하기 전에 미리 모든 선언함수는 스캔

*그래서 선언함수가 많으면 프로그램이 무거워짐.. 시작부터 바로 메모리로드가 되버려서


var myFunction = function(){    //익명함수

alert('함수ㅋㅋ');

};


myFunction();

functionA();


//선언함수

function functionA(){

alert('나는 선언함수')

}






Posted by 보로로롬
,