자바스크립트 기초문법~함수기초

자바스크립트

정진수 | 2012.09

자바스크립트
(JavaScript == ECMAScript)

정진수
2012. 09

JavaScript
기초문법 ~ 함수기초까지

1-1

자바스크립트 1. 노드를 다루지 않을 시.

사용방법. <script>
소스입력
</script>

2. 노드를 사용할 경우

<script>
window.onload = function(){
소스입력
}
</script>

3. 외부 자바스크립트를 사용할 경우

<script src=‚자바스크립트 파일이름.js‛></script>

1-1

변수 1. 변수란?

- 데이터를 저장하는 장소
- 데이터를 읽고 쓰고 할 수 있는 장소
- 저장 할 수 있는 데이터는?
- 숫자 (정수형, 실수형)
- 문자열
- 함수
- 객체(인스턴스)

2. 변수 선언 방법.

- var 변수이름 = 값
- var 변수이름
변수이름 = 값

-변수이름 = 값 (비추!)

3. 변수 값 변경하기.

- var 변수이름 = 값;
- 변수이름 = 싞규 값;

1-1

디버깅 1. alert()

- 브라우저의 경고창에 출력된다.
- 예) var name = ‚정짂수‛; // 변수 name에 ‚정짂수‛ 라고 문자열
을 저장.
- alert(name);

2. console.log() - 추천

- 브라우저의 콘솔창에 출력된다.
- 예) var age = 28; // 변수 age에 숫자 28을 저장
- console.log(age);

3. document.write() - 비추

- 브라우저의 화면에 출력된다.
- 예) var address = ‚서울 서초구 잠원동‛ // 변수 address에
문자열 ‚서울 서초구 잠원동‛을 저장
- document.write(address)

1-1

자바스크립트 1. 기본형

자료형 - 숫자형(Number)
- 문자형(String) : ‚정짂수‛ , ‘정짂수’
- 논리형(Boolean) : true(참), false(거짓) 중 하나
- undefined = 미정된 값
- null = 미정된 값.

2. 참조형

- 배열(Array) – 데이터 집합
- 함수(Function) – 구문의 집합
- 객체(Object) – 데이터 + 함수 집합

1-1

변수종류 1. 지역변수(= Local Variable)

- 함수 또는 메소드안에서만 쓰이는 변수.
- 함수 안에서 만들어지고 함수 안에서만 사용.
- 함수가 끝나면 변수도 소멸.

2. 전역변수(= Global Variable)

- 함수 외부에서 선언됨.
- 어디서나 쓸 수 있는 변수.

3. 매개변수(= Parameter)

- 선언된 함수 내부로 값을 젂달시켜주는 변수.
- 매개변수 또한 지역변수라 함수가 종료됨에 따라 소멸.

4. 멤버변수(= Member Variable)

- 클래스 내부에 선언된 변수.
- 클래스가 인스턴스화 되어야 접근 가능.

1-1
예시.

변수종류 var global1 = "전역변수1"; // 전역변수 지정
global2 = "전역변수2"; // 전역변수 지정

function test1() {
var local1 = "지역변수"; //지역변수 지정
global3 = "전역변수3"; // var를 넣지 않았으므로 전역변수
console.log(global1); // “전역변수1” 출력
(function inner_test() { //함수안에 함수
console.log(local1); // “지역변수” 출력
})();
}
function test2(para1, para2) { // 다른 함수. 파라메터(para1,para2)
console.log(global3); // “전역변수3”출력
console.log(para1); // 1 출력
console.log(para2); // 2 출력
console.log(local1); // undefined (local1은 test1에 대한 지역함수이기때문에 출력되지 않음)

}

test1();
test2(1, 2);

// 멤버변수 예)
function Myname(){ // 생성자 함수. 각 인스턴스의 프로퍼티가 다른 값이 되도록 초기화
this.name = "정진수“ // 멤버변수. 이 변수는 각 인스턴스들에게 공유 된다.
}

Myname.prototype.inputName = function(){
console.log("name = ", this.name);

}

myName = new Myname();
myName.inputName();

1-1

변수 선언시 1. 숫자로 시작하면 안된다.

주의사항 - 구문에러가 뜬다.
- 알파벳또는 언더바(_)로 시작해야한다.

2. 대,소문자를 구분한다.

- var myName = ‚정짂수‛;
- var myname = ‚Jung JinSoo‛;

3. 예약어는 사용할 수 없다.

- 예약어들은 자바스크립트 프로그램 내에서 식
별자로(변수 이름, 함수 이름, 루프 레이블) 사
용 할 수 없는 단어들이다.

4. 공백이 포함 될 수는 없다.

- 뛰어쓰기를 하면 에러가 납니다!

1-1

기본연산자 - 1. +(더하기)

숫자 - var result1 = 10+10;
- console.log(result1); // 20이 출력

2. –(빼기)

- var result2 = 10-5;
- console.log(result2); // 5가 출력

3. *(곱하기)

- var result3 = 10*2;
- console.log(result3) // 20이 출력

4. /(나누기)

- var result4 = 10/2;
- console.log(result4) // 5가 출력

5. %(나머지)

- var result5 = 10%2;
- console.log(result5) // 0이 출력

1-1

기본연산자 - 1. +(더하기)

문자열 - var name1 = ‚정‛;
- var name2 = ‚짂‛;
- var name3 = ‚수‛;

- var name = name1 + name2 + name3;
- console.log(name); // ‛정짂수‛출력

1-1

복합연산자 1. +=

- var a = 10;
- a += 10;
- console.log(a) // 20이 출력
- a += 10 은 a = a + 10과 동일한 표현이다.

2. –=

- var a = 10;
- a -= 10;
- a -= 10은 a = a -10과 동일한 표현이다.

3. *=

- var a = 10;
- a *= 10;
- a *= 10은 a = a * 10과 동일한 표현이다.

4. /=

- var a = 10;
- a /= 10;
- a /= 10은 a = a / 10과 동일한 표현이다.

5. %=

- var a = 10;
- a %= 10;
- a %= 10은 a = a % 10과 동일한 표현이다.

1-1

증감 연산자 1.전위 연산자(전치 연산자)

- ++(또는 --)변수(피연산자) = 젂위 연산자(또는 젂치 연산자)
- 먺저 변수(피연산자)를 증감 시킨 다음 증가된 값을 결과로 내놓는다.

- var i = 1;
- j = ++i;
- console.log(" i = " + i , " j = " + j); // i와 j의 값은 2

2. 후위 연산자(후치 연산자)

- 변수(피연산자)++(또는 --) = 후위 연산자(또는 후치 연산자)
- 변수(피연산자)를 증가 시키지만 결과로는 원래의 증가되지 않는 값을 내놓는다.

- var i = 1;
- j = i++;
- console.log(" i = " + i , " j = " + j); // i는 1, j의 값은 2

1-1

연산자 우선순위 우선순위 연산자 내용
1 (),[] 괄호 / 대괄호
2 !,~,++,-- 부정/ 증감
3 *,/,% 곱셈/나눗셈
4 +,- 덧셈 / 뺄셈
5 <<,>>,>>> 비트단위의 쉬프트
6 <,<=,>,>= 관계 연산자
7. ==,!=
8 & 비트단위의 논리 연산자
9 ^
10 |
11 && 논리곱 연산자
12 || 논리합 연산자
13 ?: 조건 연산자
14 =,+=,-=,*=,/=,%=,<<=,>>=, 대입 / 할당 연산자
&=,^=,~=

햇갈린다 싶을땐 그냥 괄호를 넣자.

1-1

형변환 1.형변환이란?

(타입 변환) - 숫자 → 문자, 문자 → 숫자로 변환

2. 형변환의 종류는?

- 암시적 형변환

- 명시적 형변환

1-1

암시적변환. 1.암시적 변환이란?

- 자바스크립트 컴파일러에 의해서 자동으로 형변환이 일어난다.

2. 암시적변환의 예

- var result1 = 1+"2"; // 숫자 + 문자 = 문자로 변환

- var result2 = "2"+true; // 문자 + Boolean = 문자로 변환

- var result3 = "15" - 5; // 문자 - 숫자 = 숫자로 변환

1-1

명시적변환. 1.명시적 변환이란?

- '난 이렇게 바뀔꺼야!' 라고 지정해주는 것.

2. 명시적변환의 예

- // 숫자를 문자로
- var numType = 15;
- console.log(numType,typeof(numType));
- var nToString = String(numType);
- console.log(nToString,typeof(nToString));

- // 문자를 숫자로
- var strType = "300";
- console.log(strType,typeof(strType));
- var sToNum = parseInt(strType);
- console.log(sToNum,typeof(sToNum));

1-1

형변환 - 1.암시적 변환 방법

숫자에서 문자로 - var result1 = 1+"2";

- var result2 = "2"+true; // Boolean값을 문자로

2. 명시적 변환 방법

2-1. String()을 이용하는 방법

- var numType = 15;
- var nToString = String(numType);
- // 또는 var test1 = String(15); console.log(test1,typeof(test1))
- console.log(nToString,typeof(nToString));

2-2. .toString(진수)를 이용하는 방법
- var numType = 15;
- console.log(numType.toString()) // 문자열로 변환.
- console.log(numType.toString(8)) // 8짂수 문자열로 변환.

2-3. 이외 방법

- toFixed(); //소수점 이하의 숫자를 지정된 개수만큼 출력
- toExponential(); //소수점 앞의 숫자 하나와 지정된 개수의 소수점 이후 숫자로 구성되는 지수 표기법을
사용하여 숫자를 문자열로 변환... 배우지 않음...
- toPrecision(); // 지정된 수의 유효 숫자 개수만큼 숫자를 출력... 역시 배우지 않음.

1-1

형변환 - 1.암시적 변환 방법

문자에서 숫자로 - var result1 = "2"-2;
Boolean값에서
true는 1
false는 0
- var result2 = 2+true; // Boolean값을 숫자로 의 값을 가지고 있다.

2. 명시적 변환 방법

2-1. Number()을 이용하는 방법

- var test1 = "15";
만약 Number("15abc") 라고 한다면?
- Number(test1);
NaN(Not a Number)라고 뜸!
- Number("15");
- Number(true) 또는 Number(false) // Boolean값 변환

2-2. parseInt()을 이용하는 방법

- var test2 = "30";
- parseInt(test2);
parseInt(true) 혹은 parInt(false)라
- parseInt("30"); 고 한다면?
- parseInt("30abc"); 역시 NaN!

- parseInt("0xFF"); //255를 반환
- parseInt("30.111"); //30을 반환

2-3. parseFloat()을 이용하는 방법 parseFloat("100.50")은?
NaN!
- var test3 = "30.111"; .말고 다른 문자가 나오면 NaN
- parseFloat(test3); .이 중복되서 나오면 뒤에 나오는것은
무시된다.
- parseFloat("30.111");

1-1

if문. 1.if문이란?

- 예시) 만약 연봉협상이 성공한다면 - 연봉상승 , 실패한다면 -밥대싞 라면먹기
- if(연봉협상 == 성공){
- 기본연봉 += 99999999;
- }
- else{
- 밥대싞 라면;
- }
- 조건에 맞는 구문을 실행할때 사용하는 조건 제어문.

2. if문 구조

- 1단 : if문
- 2단 : if ~ else문
- 3단 이상 : if ~ else if ~ else . . . 문

1-1

논리연산자와 1.용도

비교연산자 - 주로 조건식에 사용된다. 연산자 수행되는 연산
== 동등한지 테스트
- 예)
- if(조건식) != 동등하지 않는지 테스트
- for(초기값;조건식;증감)
- while(조건식) === 일치하는지 테스트
!== 일치하지 않는지 테스트
2. 주의할점
<,<= 작다, 작거나 같다

- 조건식의 결과는 항상 true 또는 false >,>= 크다, 크거나 같다
|| OR
3. 예시
&& AND
- var a = true;
- var b = false;
- var c = 10;
- var d = 20;

- var result1 = ( a == true); // a는 true이므로 true
- var result2 = ( c > 10); // c는 10이므로 false
- var result3 = ( c < 10); // c는 10이므로 false
- var result4 = ( c <= 10); // c는 10이므로 true
- var result5 = ( a != true); // a는 true이므로 false
- var result6 = ( a == true || b == true); // a가 맞았으므로 true
- var result7 = (a == true && b == true); // a는 맞았지만 b는 틀렀으므로 false

1-1

if문과 1.예시

비교,논리연산자 - var a = 10;
사용하기. - if ( a < 10 ){
- alert("Warning < 10");
- }
- else if ( a > 10 ){ ===와 ==의 차이점
- alert("Warning > 10");
- }
==는 값만 같으면 되지만
- else {
===는 type도 같아야 한다.
- alert ("a는 10이므로 10보다
- 크거나 작지 않습니다")
예시)
- }
var a = 5;
----------------------------------------------
a == "5" //문자열이지만 5라는 같으므로 true
- if ( a == 10 ){
a === "5" // a는 숫자타입이지만 비교값은 문자이므로
- alert("Warning == 10");
false
- }
- if ( a === "10" ){
- alert("Warning === 문자10");
- }
- if ( a === 10 ){
- alert("Warning === 10");
- }
- if ( a <= 10 ){
- alert("Warning <= 10");
- }
- if ( a >= 10 ){
- alert("Warning >= 10");
- }

1-1

switch문. 1.if문과의 차이점

- 여러개의 조건을 처리해야 할때 if문이라면
- if(조건1)
- else if(조건2)
- else if(조건3)
- ...

- 이렇게 조건이 여러개 있때 젂문적으로 처리하는 구문! switch문 입니다.

- 즉 switch문이란 여러개의 조건에 맞는 구문을 실행할 때 사용하는 제어문(조건문) 입니다.

2. switch문 문법

- switch(식){
- case "값" :
- 구문들;
- break;
- case "값" :
- 구문들;
- break;
- ........
- default :
- // 모든 조건이 맞지 않을 경우 이곳에 있는 구문이 실행됩니다.
- }

1-1

switch문. break 를 넣지 않는다면?

- 예시)

- var inputNumber = window.prompt("1~3까지의 숫자를 넣어주세요");

- switch(inputNumber){
- case "3" :
- alert("3번을 선택했습니다.");

- case "2" :

- case "1" :
- break;
- default :
- alert("1~3까지의 숫자를 넣어달라니깐....-_-");
- }

- break없는 switch문은 브레이크가 고장난
- 자동차와 똑같습니다. 사고납니다. 넣으라면 넣으세요.

1-1

반복문 1.반복문이란?

-for문 - 말 그대로 뭔가를 여러번 반복하고 싶을때 사용하는 구문.

2. for문 구조

- 반복구문이 한문장일때는 { }를 생략할 수 있다.
- for(초기값; 조건식; 증감)
- 실행구문;

- 반복구문이 여러문장일때는 { }로 감싸야 한다.
- for(초기값; 조건식; 증감){
- 실행구문1;
- 실행구문2;
- ......
- }

3.for문 예시

- for(var i =0; i<10;i++){
- console.log(" i = " + i);
- }
- console.log("최종 i = " + i);

- // for문이 처음 실행되면 초기값,조건식 실행. i 는 0이고 i는 10보다 작으므로 참(true) → 실
행구문 실행(console.log에 i 출력) → 증감 실행된후 조건 실행. 즉 i 는 1이고 i는 10보다 작
으므로 참(true), 조건식이 거짓(false)가 될 때까지 반복.
- .......
- i가 10일때 i 는 10보다 작지 않으므로 거짓(false), 실행구문이 실행되지 않고 for문을 빠져
나옴. 그후 i값 출력

- 그래서 for문 안에 있는 i는 0~9의 숫자가 출력되고 최종 i에는 10이 출력된다.

1-1

반복문 1.continue란?

-continue, - 반복문에서 continue문을 만나면 continue 이후의 구문을 실행하지 않고 바로 for로 이동.
-break
1-1. continue 예시.

- for( var i = 1; i <=10; i ++){
- if(i%2 == 1){ // 만약 i의 나머지 값이 1이라면 (즉 홀수라면)
- continue; // for문으로 이동
- }
- console.log(i); //위의 if문에서 홀수는 걸러지게 되므로 i에는 짝수값만 출력된다.
- }

2.break란?

- 실행구문 중 break문을 만나면 for문은 그대로 정지되며 for루프를 빠져나옴.
- 즉, for문을 강제로 빠져나오고 싶을때 사용하면 됩니다.

2-1. break 예시.

- for( var i = 1; i <=10; i ++){
- if(i == 5){ // 만약 i가 5이라면
- break; // for문을 빠져나온다
- }
- console.log(i); // i가 5이면 위의 break문이 실행되므로 1~4까지의 숫자만 출력된다.
- }

1-1

반복문 1.while문이란?

-while문 - for문과 같은 반복문
- 차이점은 초기값, 증감값 없이 오직 조건식만 있음.
- 즉, while문은 for문보다 좀더 심플한 반복문이라고 볼 수 있다.

2. while문 구조

- while(조건식){
- 실행구문1;
- 실행구문2;
- }

3.while문 사용용도

- for문과 같다.
- 다만, 무한반복문에 더 잘 어울린다.
- 또한, 주로 파일을 읽어들일때 주로 많이 사용된다.(파일 끝에 도달할때까지 반복문 실행되는 원리로)

1-1

반복문 1.while문 예시

-while문 예제 - var i = 1; // 초기값
- while ( i < 10){ //while문 조건식 i가 < 10이 될때까지 반복
- console.log("정짂수"+i); // 콘솔창에 "정짂수" + i값을 출력
- i++; // i값을 증가
- }

2. while문 + continue 예시

- var i = 1; // 초기값
- while ( i <= 10){ // i가 10보다 작거나 같을때까지 반복
- i++; // i값을 증가
- continue; // continue에 걸려서 다시 while문 실행
- console.log( i ); // continue 때문에 구문 실행 안됨
- }
- console.log( "최종 i = " + i ); // 최종적으로 이 값만 출력 ( i = 11)

3.while문 + break 예시

- var i = 1; // 초기값
- while ( i <= 10){ // i의 값이 10보다 작거나 같을때 까지 반복
- if ( i == 5){ // 만약 i의 값이 5와 같다면
- break; // break문에 의해 while문을 빠져나오게 된다.
- }
- console.log( i ); // i 의 값이 5가 될때까지 i값 출력 (1~4까지)
- i++; // i값 증가
- }

1-1

함수 1.함수란?

(function) - 특정 기능을 하는 변수와 구문들의 집합
- 일종의 포장 기술
- 중복 구문을 함수로 묶어서 재사용 가능

2. 기본 함수 구조

- // 파라메터와 반환(return)값이 없는 함수.
- function 함수이름( ){
- }
- // 파라메터만 있고 반환값이 없는 함수.
- function 함수이름(파라메터이름1, 파라메터이름2...){
- }
- // 파라메터와 반환값이 있는 함수.
- function 함수이름(파라메터이름1, 파라메터이름2...){
- ......
- return 반환값;
- }

3.함수종류

- 일반 함수
- 콜백 함수
- 중첩 함수
- 클로저

1-1

함수 생성방법 1.function 키워드로 함수 만들기 - 必
function hello(){
console.log("hello World");
- 가장 일반적인 방식 }
- function 함수이름(파라메터1...){ hello();
- return 반환값;
- }

2. 리터럴 방식으로 함수 만들기 - 必
var hello = function (){
console.log("hello World");
- 이 방식도 많이 사용됨. }
- 함수이름 = function(파라메터1...){ hello();
- return 반환값;
- }

3.이름 없는 함수 만들기
(function(){
- 주로 어떤 내용을 외부와 완젂히 분리 시키고자 할 때 사용 console.log("hello World");
- (function(파라메터1...){})( })();
- return 반환값
- );

4.Function 객체 가지고 만들기
var hello = new Function(undefined,
- 거의 사용 안함 'console.log("hello World")');
- var funcName = new Function(인수... , 함수본체); hello();

1-1

함수- 1.파라메터란?
파라메터 - 함수 내부는 무작정 접근 불가!
- 접근 하는 방법은 파라메터를 이용해서 값을 넘겨주는 방법.
- 즉! 파라메터의 용도는 외부 데이터를 함수 내부로 받아 올 수 있는 역활.
- 파라메터는 지역 변수로서 함수 내부에서만 사용 가능.

2. 파라메터 예제.

- // 파라메터에 문자를 넘긴 경우
- function showName(name){
- console.log("안녕하세요. 저는" + name + "입니다");
- }
- showNmae("정짂수");

- // 파라메터에 숫자를 넘긴 경우
- function showAge(age){
- console.log("저의 나이는" + age + "입니다");
- }
- showAge(19);

- //함수를 넘긴 경우
- function hello(){
- alert("Hello World");
- }

- function world(func){
- func();
- }
- world(hello);

1-1

함수- 3. arguments란?
arguments와 - 파라메터의 정보가 담겨 있는 객체.
return - 배열은 아니지만 배열처럼 사용하면 된다.

4. return란?

- 함수를 실행한 곳에 실행한 결과물을 알려줘야 할때 사용
- 굳이 돌려줄 값이 없다면 쓸 필요 없다.

5. 예시

- function add(v1,v2){
- var result = v1+v2; //result에 v1과 v2의 더한값을 담는다.
- console.log(arguments); // 파라메터의 정보가 나온다.
- console.log("v1 = " + arguments[0]); // 첫번째 파라메터의 정보(v1)
- console.log("v2 = " + arguments[1]); // 두번째 파라메터의 정보(v2)
- console.log("파라메터의 갯수 = " + arguments.length); // 파라메터의 갯수
- return result; // 변수 result의 값 반환.
- }
- console.log(add(10,20)); // 30이 출력, 만약 return이 없다면 여기엔 undefined이 출력 된다.

감사합니다.

if( !END ){
to be continued
}
맞나...?

자바스크립트 기초문법~함수기초

More Related Content

What's hot

Viewers also liked

Similar to 자바스크립트 기초문법~함수기초

자바스크립트 기초문법~함수기초