[KT AIVLE] 웹프로그래밍 JAVASCRIPT 기초 문법

Javascript

- 사용목적 : cpu, RAM, SSD(HDD)자원을 활용

1. 변수선언 : RAM 사용 문법 : RAM 저장공간을 만들어 데이터 저장
2. 데이터타입 : RAM 효율적 사용 문법 : 쓸데없는 공간의 낭비를 줄임
3. 연산자 : CPU 사용 문법 : 산술, 비교, 논리, 할당, 삼항
4. 조건문 : 조건 따라서 다른 코드 실행
5. 반복문 : 특정 코드를 반복적으로 실행
6. 함수 : 중복코드를 묶어서 코드 작성 실행 > 코드 유지보수 향상
7. 객체 : 식별자 1개로 여러 개의 데이터 저장(컬렉션) : 변수, 함수를 묶어서 코드 작성(클래스) 문법

 

개요

• 웹브라우져에서 동작되는 동적으로 페이지를 수정하고 이벤트를 처리하는 언어
• 인터프리터, 동적 타이핑, 객체지향
  • 코드작성(문자열) > 컴파일러 > 컴퓨터(이진수)
  • 컴파일러 동작 방식
    • 컴파일러 언어 : 속도 빠름, 코드 실행 전에 빌드(컴파일) 과정 필요, 문법이 어려움
    • 인터프리터 언어 : 속도 느림, 코드 실행전에 빌드과정 불필요, 문법 쉬움, 예) javascript, python
• ECMA Script : ECMAS, ECMA6, ECMA8

// console.log() : 식별자(변수)에 저장된 데이터 출력

console.log(data1, data2, data3, data4);

1. 변수선언 : variable

• 식별자 : 메모리의 저장공간을 구별하는 문자열
• 식별자 규칙
  • 문법
    • 대소문자, 숫자, '_', '$' 사용
    • 숫자는 가장 앞에 X
    • 예약어 사용 X
  • 컨벤션
    • 상수 : UPPER_SNAKE_CASE
    • 변수, 함수 : camelCase
    • 모듈 : PascalCase, UpperCamelCase

//식별자 1개, 데이터 1개
var data1=10;

//식별자 n개, 데이터 n개
var data2=20,
    data3=30;

//식별자 n개, 데이터 1개
var data4 = data5 = 40;

// console.log() : 식별자(변수)에 저장된 데이터 출력

console.log(data1, data2, data3, data4); //10 20 30 40

 

2. 데이터 타입 : datatype

• number : 숫자 데이터 타입
• string : 문자열
• boolean : 논리값
• function : 코드 저장
• object : 객체 저장

var data1=1.2;
var data2 = 'js';
var data3 = true;
var data4 = function(){console.log('func')};
var data5 = {key:'value',func:function(){console.log(123);}};

// typeof : 데이터타입 출력
// 동적 타이핑 : 데이터 타입을 설정하지 않아도 자동으로 데이터를 확인해서 데이터 타입 설정
console.log(typeof data1,typeof data2,typeof data3,typeof data4,typeof data5)

// number string boolean function object

 

데이터 타입 형 변환

• Number() : 숫자로 변환
• String() : 문자로 변환
• Boolean() : 논리값 데이터 타입으로 변환

var data1 = '1', data2=2;
console.log(typeof data1, data1)
console.log(typeof data2, data2)

//string 1
//number 2

console.log(typeof Number(data1))
//number

묵시적 형 변환

// 문자> 숫자: Number()
typeof (data1-0)
//'number'

// 숫자> 문자 : String()
typeof (''+data2)
//'string'

 

3. 연산자 : operator

• 산술 : 데이터 + 데이터 = 데이터 : +, -, *, /, %, **, ++, --
• 비교 : 데이터 + 데이터 = 논리값 : 조건 1개 : ==, !=, >, <, >=, <=, ===, !== (data type까지 비교)
• 논리 : 논리값 + 논리값 = 논리값 : 조건 2개 이상 : !, &&(T and T = T), ||(F or F = F)
• 할당 : 변수 산술 = 데이터 : 변수에 누적해서 연산 수행
• 삼항 : (조건) ? (참) : (거짓) : 간단한 조건문

// 산술 연산자
 var data1=11, data2=4;
console.log(data1/ data2, data1%data2, data2**3);
// 2.75 3 64

//++data : +1 후에 데이터 대입
var data1=1, data2=2;
data1= ++data2;
console.log(data1, data2) //3 3

//++data :  데이터 대입 후에 +1
var data1=1, data2=2;
data1= data2++;
console.log(data1, data2) //2 3

//비교연산자
var data1=1, data2='1'
console.log(data1==data2, data1===data2)

//true, false

//논리연산자
console.log(true && false, true || false);

//false true

// 조건 1개 : 예금잔고(balance)에서 인출 금액(withdraw)으로 인출이 가능하면 true, 불가능하면 false
// 조건2개 : 1회 최대 출금금액은 50원으로 제한
var balance = 100, withdraw = 60;
console.log(withdraw<=50 && balance>=withdraw);

//false

//삼항연산자
var balance = 100, withdraw = 10;
var msg=balance>=withdraw ? '인출가능':'인출불가';
console.log(msg);

//인출가능

// 할당연산자
var data1=10;
data1 += 10
console.log(data1)
//20

 

4. 조건문 : condition

• if, else if, else
• switch, case, default

//학점출력
var point=87;
if (point>=90){
    console.log('A')
} else if(point>=80){
    console.log('B')
} else if (point>=70){
    console.log('C')
} else{
    console.log('F')
}
//B

// 승점출력
var point='무승부';
switch(point){
    case '승':
        console.log('승점', 3);
        break;
    case '무승부':
        console.log('승점', 1);
        break;
    default:
        console.log('승점', 0);
}
//1

5. 반복문

 

6. 함수

// argument, parameter : 함수를 호출하는 코드에서 함수를 선언하는 코드로 데이터를 전달함
function showlotto(endNumber){ //endNumber : parameter
    var count = 6, lotto='';
    for(var i =0; i<count; i++){
        var randomNumber = Math.ceil(Math.random()*endNumber); //올림
        lotto += randomNumber;
        if(i != count -1) lotto+=' '
    }
    console.log(lotto)
}

//로또번호 1~45까지 출력
showlotto(45) //45:argument

//로또번호 1~50까지 출력
showlotto(50)

함수 선언식

• 선언식과 표현식의 차이
  • 선언식 함수: 선언하는 코드가 최상단으로 올라서 우선적으로 선언 후 다른 코드 실행
  • hoisting : 선언식으로 작성된 코드를 우선적으로 메모리에 할당

plus3(1,2);
function plus3(n1,n2){
    console.log(n1+n2);
}
//3
//표현식은 오류남

 

스코프 : scope

• 함수 밖 : 전역영역 : global
• 함수 안 : 지역영역 : local

var data=10;
function change(){
    data=20; //var를 사용하지 않으면 전역영역의 변수로 사용됨.
}
change();
console.log(data)
//20

var data=10;
function change(){
    var data=20; //var를 사용하면 지역영역의 변수로 사용됨.
}
change();
console.log(data)
//10

 

 

익명함수 : anonymous function

• 선언과 동시에 호출
• 일회성으로 사용 > 외부에서 익명함수 내부의 변수, 함수 사용 불가 > 보안이 좋아짐

//내부
(function join2(id, pw){
    console.log(id, pw)
}('Andy', '1234'))
// Andy 1234

//외부 호출
join2('andy', '1234')
//error!

return

• 함수에서 실행된 결과를 변수에 저장하거나 출력
• 함수에서 코드 실행 중단

 

웹브라우져 객체

• window : 전역 객체 : 모든 전역 변수를 저장하는 객체
• location : URL 데이터를 저장하는 객체
• document : 현재 페이지에 대한 문서 정보를 저장하는 객체

javascript를 이용한 element 선택

• 아이디
• 클래스
• 속성값
• 태그
• 셀렉터 : document.querySelector()