달력

12

« 2019/12 »

  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  
  •  
  •  
  •  

익명함수를 매개변수로 받는 함수

자바스크립트 고유 문법

   

   

소스 코드

<html>

<head>

<meta charset="UTF-8">

<title>익명함수를 매개변수로 받는 함수</title>

<script type="text/javascript">

/* callFunctionTenTimes() 한번 호출해서 justFunction() 7 호출 */

// 함수를 열번 호출하는 함수

function callFunctionTenTimes(otherFunction){

for(var i=0; i<7; i++){

//매개변수로 전달된 함수를 호출

otherFunction();

}

}        

//함수 호출 (전달할 함수를 익명함수 형태로 기재)        

callFunctionTenTimes(function(){

document.write('Hello JavaScript World!!! <br>');

});

   

</script>

</head>

<body>

</body>

</html>

   

출처: <https://github.com/10zeroone/study_javascript/blob/master/WebContent/ch04-function/06.html>

   

인자로 넘긴 익명함수가 callFunctionTenTimes()함수 내부에서 정상적으로 호출된 것을 확인할 수 있습니다.

   

Posted by codedragon codedragon

댓글을 달아 주세요

(중요 문법)

선언적함수를 매개변수로 받는 함수

   

   

소스 코드

function callFunctionTenTimes(otherFunction){

for(var i=0; i<7; i++){

//매개변수로 전달된 함수를 호출

otherFunction();

}

}

function justFunction(){

document.write('Hello JavaScript!!! <br>');

}

//함수 호출

callFunctionTenTimes(justFunction());

   

출처: <https://github.com/10zeroone/study_javascript/blob/master/WebContent/ch04-function/05.html>

   

callFunctionTenTimes(justFunction( )); > callFunctionTenTimes(justFunction);로 수정해야 합니다.

이런식으로 코드를 작성하면 매개변수로 함수를 전달하는 것이 아니라 함수를 1회 실행되는 것을 의미함으로 따라서 전달되는 함수가 없기 때문에 함수가 한번 실행된 후 오류가 발생함

   

   

   

전체 소스

<html>

<head>

<meta charset="UTF-8">

<title>선언적 함수를 매개변수로 받는 함수</title>

<script type="text/javascript">

/* callFunctionTenTimes() 한번 호출해서 justFunction() 10 호출 */

//함수를 열번 호출하는 함수

function callFunctionTenTimes(otherFunction){

for(var i=0; i<7; i++){

//매개변수로 전달된 함수를 호출

otherFunction();

}

}

function justFunction(){

document.write('Hello JavaScript!!! <br>');

}

//함수 호출

callFunctionTenTimes(justFunction);

//callFunctionTenTimes(justFunction());

//이런식으로 코드를 작성하면 매개변수로 함수를 전달하는 것이 아니라 함수를 1 실행되는 것을 의미함으로

//따라서 전달되는 함수가 없기 때문에 함수가 한번 실행된 오류가 발생함

</script>

</head>

<body>

</body>

</html>

   

출처: <https://github.com/10zeroone/study_javascript/blob/master/WebContent/ch04-function/05.html>

   

인자로 넘긴 선언적 함수가 callFunctionTenTimes()함수 내부에서 정상적으로 호출된 것을 확인할 수 있습니다.

Posted by codedragon codedragon

댓글을 달아 주세요

return 문

함수 호출한 쪽으로 특정 값을 되돌려 주려 할 경우 사용

호출된 함수가 종료되고 함수를 호출한 곳으로 되돌아 감

return문 아래 코드는 수행되지 않음

   

   

return 문 정의 전

소스 코드

<html>

<head>

<meta charset="UTF-8">

<title>return</title>

<script type="text/javascript">

function returnTest(){

document.write('문장 A' + '<br>');

document.write('문장 B' + '<br>');                

}

//함수 호출

returnTest();

</script>

</head>

<body>

</body>

</html>

   

출처: <https://github.com/10zeroone/study_javascript/blob/master/WebContent/ch04-function/04_1.html>

   

   

   

return 문 정의 후

소스 코드

<html>

<head>

<meta charset="UTF-8">

<title>return</title>

<script type="text/javascript">

   

function returnTest(){

document.write('문장 A' + '<br>');

//함수를 호출한 곳으로 되돌아

//함수가 종료됨

//return 아래 코드는 수행되지 않음

return;        

document.write('문장 B' + '<br>');                

}

//함수 호출

returnTest();

</script>

</head>

<body>

</body>

</html>

   

출처: <https://github.com/10zeroone/study_javascript/blob/master/WebContent/ch04-function/04.html>

   

   

   

   

Posted by codedragon codedragon

댓글을 달아 주세요

지역변수 vs 전역변수

지역변수

함수 안에서 var를 사용해서 선언한 변수

함수가 끝나면 소멸

함수 안에서 var를 명시한 변수는 지역변수이기 때문에 함수 종료 후 메모리에서 소멸됨

함수 종료 후에 다시 지역변수 호출하면 오류 발생

전역변수

함수 밖에서 만들어진 모든 변수

(중요)함수 안에서 var 없이 만들어진 변수var를 명시하지 않고 전역변수 선언하는 것은 권장하지 않음

함수가 끝나도 메모리에 남아 있음

   

   

학습 내용

  • 함수 안에서 var로 명시한 지역 변수 호출
  • 함수 밖에서 var로 명시한 지역 변수 호출
  • 전역 변수 호출
  • 전역 변수 재 호출
  • 함수 안에서 var 없이 변수 선언(전역 변수)
  • var없이 전역 변수 명시 1, 2, 3

   

   

함수 밖에서 var로 명시한 지역변수 호출

소스 코드

function test1(){

//지역 변수

var i = 10;        

document.write(i + '<br>');

}

//함수 호출

test1();

document.write('<br>함수 종료 : ' + i + '<br>');        //에러 발생

   

출처: <https://github.com/10zeroone/study_javascript/blob/master/WebContent/ch04-function/03.html>

   

함수 안에서 var를 명시한 변수는 지역변수이기 때문에 함수 종료 후 메모리에서 소멸되어 함수 종료 후에 다시 지역변수 호출하면 오류 발생

   

   

   

var 없이 전역 변수 선언

소스 코드

p;

function test6(){

p = 50;

document.write(p + '<br>');                

}

test6();

   

출처: <https://github.com/10zeroone/study_javascript/blob/master/WebContent/ch04-function/03.html>

   

var를 명시하지 않고 전역변수를 만들 때 선언만 하고 초기화 하지 않은 상태에서 함수 안에서 초기화해서 호출하면 오류 발생함

   

   

전체 소스

<html>

<head>

<meta charset="UTF-8">

<title>지역변수 vs 전역변수</title>

<script type="text/javascript">

document.write('지역 변수 호출 ==================<br>');

function test1(){

//지역 변수

var i = 10;        

//지역 변수 호출

document.write(i + '<br>');

}

//함수 호출

test1();

//함수 밖에서 지역 변수 호출

//document.write('<br>함수 종료 : ' + i + '<br>');        //에러 발생

/* 함수 안에서 var 명시한 변수는 지역변수이기 때문에 함수 종료 메모리에서 소멸됨

함수 종료 후에 다시 지역변수 호출하면 오류 발생 */

   

document.write('<br> 전역 변수 호출 ==================<br>');

var j;        //전역 변수

function test2(){

j = 300;

document.write(j + '<br>');

}

test2();

   

document.write('<br> 전역 변수 호출 ==================<br>');

function test3(){

document.write(j + '<br>');

}

test3();

   

document.write('<br> 함수안에서 var 없이 변수 선언(전역 변수) ==================<br>');

function test4(){

//전역 변수, 권장하지 않음

m = 30;

document.write('함수 안에서 호출: ' + m + '<br>');

}

test4();

document.write('함수 종료 호출: ' + m + '<br>');

   

document.write('<br> var없이 전역 변수 명시1 ==================<br>');

n = 40;

function test5(){

document.write(n + '<br>');                

}

test5();

   

document.write('<br> var없이 전역 변수 명시2 ==================<br>');

//var 명시하지 않고 전역변수를 만들 선언만 하고 초기화 하지 않은 상태에서 함수 안에서 초기화해서 호출하면 오류 발생함

//p;

function test6(){

p = 50;

document.write(p + '<br>');                

}

test6();

   

document.write('<br> var없이 전역 변수 명시3 ==================<br>');

//var 명시하지 않고 전역변수 선언(권장하지 않음)

//권장하지 않음

//p;

q = 20;

function test7(){

q = 60;

document.write(q + '<br>');                

}

test7();

</script>

</head>

<body>

</body>

</html>

   

출처: <https://github.com/10zeroone/study_javascript/blob/master/WebContent/ch04-function/03.html>

   

Posted by codedragon codedragon

댓글을 달아 주세요

선언적 함수 vs 익명 함수

선언적 함수

익명 함수

선언적 함수를 사용할 경우는 호출 문이 먼저 나와도 에러 없이 처리됨

  

익명 함수를 사용할 경우는 호출 문이 함수 선언 이후에 호출되어야 에러가 발생하지 않음

   

   

학습 내용

  • 선언적 함수: 동일한 함수명 사용가능
    • javascript는 동일한 함수명 사용가능
    • 동일한 함수명 사용시 에러 나지 않음
    • 마지막에 호출된 함수가 수행됨
  • 선언적 함수: 함수 선언 전에 호출
  • 익명함수: 동일 함수명 사용
  • 익명함수: 함수 선언 전에 호출

   

   

전체 소스

   

<html>

<head>

<meta charset="UTF-8">

<title>선언적 함수 vs 익명 함수</title>

<script type="text/javascript">

//javascript 동일한 함수명 사용가능

//동일한 함수명 사용시 에러 나지 않음

//마지막에 호출된 함수가 수행됨

document.write('선언적 함수: 동일한 함수명 사용가능 ===========<br>');

function aaa(){

document.write('함수1 aaa<br>');                

}

function aaa(){

document.write('함수2 aaa<br>');                

}

//함수 호출

aaa();

   

document.write('<br>선언적 함수: 함수 선언 전에 호출 ===========<br>');

//선언적 함수를 사용할 경우는 호출문이 먼저 나와도 에러없이 처리됨

//함수 호출

bbb();

function bbb(){

document.write('함수 bbb<br>');

}

   

   

document.write('<br>익명함수: 동일 함수명 사용===========<br>');

var ccc = function(){

document.write('함수1 ccc <br>');

};

var ccc = function(){

document.write('함수2 ccc <br>');

};

//함수 호출

ccc();

   

document.write('<br>익명함수: 함수 선언 전에 호출 ===========<br>');

//선언적 함수를 사용할 경우는 호출문이 먼저 나와도 에러없이 처리됨

//익명 함수를 사용할 경우는 호출문이 함수 선언이후에 호출되어야 에러가 발생하지 않음

//함수 호출        

//ddd();        //오류 발생

var ddd = function(){

document.write('함수 ddd <br>');

};        

   

</script>

</head>

<body>

</body>

</html>

   

출처: <https://github.com/10zeroone/study_javascript/blob/master/WebContent/ch04-function/02.html>

   

   

   

익명함수: 함수 선언 전에 호출

소스 코드

ddd();        //오류 발생

var ddd = function(){

document.write('함수 ddd <br>');

};        

   

출처: <https://github.com/10zeroone/study_javascript/blob/master/WebContent/ch04-function/02.html>

   

   

Posted by codedragon codedragon

댓글을 달아 주세요

익명 함수 생성 (함수 표현식 방식), function expression

함수 리터럴로 하나의 함수를 만들고, 생성된 함수를 변수로 할당하여 함수를 생성하는 방법으로,

자바스크립트에서는 함수도 하나의 값처럼 취급됩니다.

함수표현식을 사용한 익명함수 생성시 세미콜론(;)을 붙이는 것을 권장합니다.

var 함수변수= function (매개변수명 ) {

코드

return 반환값 // 반환할 값이 있을 경우 지정

};

   

함수 호출

함수변수(매개변수에 전달할 값);

   

   

소스 코드

<html>

<head>

<meta charset="UTF-8">

<title>함수표현식으로 함수생성</title>

<script type="text/javascript">

//add() 함수 표현식 정의

var add = function (x, y) {

return x + y;

};

//add 가지고 있는 함수 참조값을 plus변수에도 그대로 할당

var plus = add;

//함수 표현식으로 생성된 함수 호출

document.write(add(1,2) + '<br>');

//동일한 함수 참조값을 가진 변수를 통해 함수 호출

document.write(plus(3,4) + '<br>');

   

</script>

</head>

<body>

</body>

</html>

   

출처: <https://github.com/10zeroone/study_javascript/blob/master/WebContent/ch04-function/16.html>

   

Posted by codedragon codedragon

댓글을 달아 주세요

Function( )생성자 함수

일반적으로 자주 사용되지 않으므로 소스 분석 수준으로만 알아두기 바랍니다.

var 함수= new Function (arg1, arg2, arg3,…… argN, functionBody)

   

arg1, arg2, arg3,…… argN

함수의 매개변수

functionBody

함수가 호출될 때 실행되는 코드를 포함한 문자열

   

   

소스 코드

   

<html>

<head>

<meta charset="UTF-8">

<title>function() 생성자 함수를 통한 함수 생성</title>

<script type="text/javascript">

var add = new Function('x', 'y', 'return x + y');

document.write(add(1, 2));

</script>

</head>

<body>

</body>

</html>

   

출처: <https://github.com/10zeroone/study_javascript/blob/master/WebContent/ch04-function/17.html>

   

   

Posted by codedragon codedragon

댓글을 달아 주세요

Node.js

자바스크립트 개발자에서 브라우저 기반의 프로그래밍을 넘어 서버 기반 프로그래밍까지 개발 가능하도록 해주는 플랫폼입니다.

   

자바스크립트 언어를 제대로 이해하는 것 중요.

   

   

홈페이지

http://nodejs.org/

   

Posted by codedragon codedragon

댓글을 달아 주세요

HTML5와 CSS3 사용의 장점

   

웹 개발의 플랫폼

의미가 더 분명한 태그들, 사이트나 창 사이의 더 나은 데이터 교환, 애니메이션, 더 나은 멀티미디어 지원 등, 더 좋은 사용자 인터페이스 구현 가능

더 분명한 마크업

내용을 설명하는데 직접 연관된 요소 추가 (제목, 푸터, 내비게이션 절, 사이드바, 글을 정의하는 요소들)

플러그인에 덜 의존하는 멀티미디어

오디오, 비디오 기능 제공

웹 소켓

HTML5는 서버와의 연결을 유지시키는 웹 소켓을 지원

클라이언트 측 스토리지

웹 스토리지와 웹 SQL 데이터베이스 API를 이용하면 브라우저에서 동작하긴 하지만 모든 데이터를 사용자의 컴퓨터에 보관하는 애플리케이션을 만들 수 있음.

더 좋은 인터페이스

테이블에 스타일을 적용하거나, 둥근 모서리를 만드는 등 사용자 인터페이스를 좀 더 풍요롭게 사용 가능.

더 좋은 폼

더 나은 사용자 인터페이스 컨트롤 제공

향상된 접근성

스크린 리더 같은 프로그램을 사용해서 보조 기술에 의존하는 사람에게 더 좋은 웹 페이지 접근성을 제공.

개선된 선택자

CSS3에서 제공하는 선택자를 이용하면 테이블의 홀수 행과 짝수 행을 지정한다거나, 선택된 체크박스를 전부 찾는다거나, 심지어는 특정 그룹에서 마지막 문단을 찾아낼 수도 있음.

시각효과

CSS3을 통해, 배경 이미지에 의존하거나 마크업을 추가하는 일 없이 요소에 그림자와 그래디언트를 넣을 수 있음.

 

'Development > HTML, CSS, XML, ...' 카테고리의 다른 글

자바스크립트 소스 파일(.js) 생성 방법  (0) 2014.08.20
웹표준  (0) 2014.06.09
HTML5와 CSS3 사용의 장점  (0) 2014.06.05
HTML5 지원 API  (0) 2014.06.05
Tomcat 설정 및 Dynamic Web Project 생성  (0) 2014.06.05
02.html-시멘틱 태그 작성  (0) 2014.05.20
Posted by codedragon codedragon

댓글을 달아 주세요

HTML5 지원 API

API

내용

웹 스토리지(Web Storage)

로컬 스토리지(Local Storage). 웹의 내용을 사용자 컴퓨터에 임시저장하는 기능

드래그앤트롭(Drag & Drop)

웹 페이지상에서 원하는 항목을 드래그할 수 있게 해주는 기능

지오로케이션(Geolocation)

공개지도 API와 함께 사용하면 자신의 현재 위치를 알아낼 수 있는 기능

캔버스(Canvas) 2D

Canvas 요소와 그리기 API를 제공

웹 워커(Web Workers)

CPU에 부하를 많이 주는 작업을 여러 워커(Worker)로 나누어 작업

웹 SQL 데이터베이스

(Web SQL Database)

웹 브라우저에 내장 데이터베이스를 만들고 SQL 질의를 사용할 수 있는 기능

 

'Development > HTML, CSS, XML, ...' 카테고리의 다른 글

웹표준  (0) 2014.06.09
HTML5와 CSS3 사용의 장점  (0) 2014.06.05
HTML5 지원 API  (0) 2014.06.05
Tomcat 설정 및 Dynamic Web Project 생성  (0) 2014.06.05
02.html-시멘틱 태그 작성  (0) 2014.05.20
01.html-시멘틱 태그  (0) 2014.05.20
Posted by codedragon codedragon

댓글을 달아 주세요