본문 바로가기
개발 공부/Javascript

자바스크립트 언어 기본 - 실습환경, 숫자, 변수, 비교, 조건문, 반복문

maxlafe 2020. 7. 1. 01:14

 

자바스크립트 언어 기본 - Javscript

0. Javascript 언어 소개

 

자바스크립트는 "프로그래밍"적으로 웹 브라우저를 제어하기 위한 언어.

오늘날 자바스크립트의 흐름은 "탈웹브라우저"이다. 

자바 스크립트가 웹브라우저 제어에서 벗어나고 있는 것이다.

웹브라우저와 자바 스크립트 동작이 분리되고 있는 것. (브라우저를 벗어나 웹 서버까지 확대)

 

웹 서버 사이드 스크립트 -> ex node.js

 

탈웹 ex Google Apps Script

웹브라우저 사용

 

 

언어라는 공통 분모 위에서 각각의 환경에 맞게 적용해주어야 한다.

 

 

Javascript 기본 - 실행방법과 실습환경

 

0.0 코드 작성과 실행

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <script>
            alert('Hello World');
        </script>
    </body>
</html>

크롬에서 바로 Ctrl+O를 눌러, 해당 파일을 열면 된다.

 

0.1 크롬 개발자 도구 - 콘솔 사용법

 

F12를 누르면 개발자 도구가 나온다.

 

하단 부분 Console을 클릭해 javascript를 입력하면 즉석으로 코드를 실행시켜 볼 수 있다

 

 

긴 것은 파일로 작업하는 것이 편하며, 터미널 처럼 화살표를 누르면 이전에 입력한 명령어도 볼 수 있다.

console.log(' '); 를 실행시키면 console에 로그를 편리하게 찍어볼 수 있다.

 

 

0.2 도구의 선택

 

 

Atom에서 script 다운로드.

 

 

0.4 주석

코드에 문법적으로는 해석되지 않는, 설명을 적어두는 것.

/* */로 여러 줄을 적어줄 수 있다.

 

 

0.5 줄바꿈과 여백

 

Tab 키로 가독성을 위한 여백을 줄 수 있다.

 

 

1. 숫자와 문자

 

1.1 수의 표현

File > Add Project Folder로 sublime에서 폴더를 추가할 수 있다.

 

html 파일을 저장한 뒤, html 키워드 + tab 키를 눌러 html 파일의 기본적인 내용을 자동으로 적을 수 있다.

 

 

1.2 수의 연산

Math.pow(3, 2);             // 거듭제곱

Math.round(10.6);             //11, 반올림

Math.ceil(10.2);               //11, 올림

Math.floor(10.6);             //10, 내림

Math.sqrt(9);                  //3, 제곱근

Math.random();             //0부터 1.0 사이의 랜덤한 숫자 출력

 

1.3 문자

Syntax error는 문법 에러라는 뜻

큰 따옴표 사이에 작은 따옴표를, 작은 따옴표 사이에 큰 따옴표를 넣을 수 있지만,

작은 따옴표 사이에 작은 따옴표를 넣기 위해선 아래와 같이 해 주어야 한다.

 

 

\ : escape문

 

1.4 문자의 연산

\n은 줄바꿈 문자,

문자와 문자를 +로 더할 수 있다.

 

alert("coding" + "everybody");

alert("coding everybody".length);   //length로 문자열의 길이를 구할 수 있다.

 

 

indexOf 함수로 문자의 index를 알 수도 있다.

 

 

2. 변수

2.1 변수의 사용법

javascript는 변수 선언 시 var을 사용한다.

 

2.2 변수의 효용

 

 

3. 연산자

 

3.1 연산자

a=1에서 =는 우항의 값인 1을 좌항의 변수 a에 대입하는 대입 연산자이다.

 

주어진 값들이 같은지, 다른지, 큰지, 작은지 등을 구분하는 것.

비교 연산자의 결과는 true나 false 중 하나이다.

 

3.2 비교 연산자(==와 ===)

 

==는 동등 연산자(equal operator)로 좌항과 우항을 비교해서 서로 값이 같다면 true, 다르다면 false가 된다.

 

=== 는 일치 연산자(strict equal operator)로 좌항과 우항이 정확하게 같아야 true가 된다.

 

 

3.3 ===를 사용하자!

var a;

위 변수의 타입은 undefined이다.

undefined는 그냥 값이 없는 것이고, null은 프로그래머가 의도해서 값이 없는 상태를 지정한 상황이다.

 

3.4 부정과 부등호

 

!=와 !==가 =와 ==의 부정형으로 쓰인다.

 

 

 

4. 조건문

 

 

4.1 조건문이란?(if, else)

//ex 1)
if(true){
    alert('result : true');
}

//ex 2)
if(false){
    alert('result : true');
}

//ex 3)
if(true){
    alert(1);
    alert(2);
    alert(3);
    alert(4);
}
alert(5);

//ex 4)
if(false){
    alert(1);
    alert(2);
    alert(3);
    alert(4);
}
alert(5);

 

4.2 else, else if

 

//ex 1)

if(true){
    alert(1);
} else {
    alert(2);
}

//ex 2)

if(false){
    alert(1);
} else {
    alert(2);
}
//ex 1)
if(false){
    alert(1);
} else if(true){
    alert(2);
} else if(true){
    alert(3);
} else {
    alert(4);
}
// 결과 : 2

//ex 2)
if(false){
    alert(1);
} else if(false){
    alert(2);
} else if(true){
    alert(3);
} else {
    alert(4);
}
//결과 3

//ex 3
if(false){
    alert(1);
} else if(false){
    alert(2);
} else if(false){
    alert(3);
} else {
    alert(4);
}

4.3 조건문의 응용

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <script>
        id = prompt('아이디를 입력해주세요.')
        if(id=='egoing'){
            alert('아이디가 일치 합니다.')
        } else {
            alert('아이디가 일치하지 않습니다.')
        }
    </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <script>
        id = prompt('아이디를 입력해주세요.');
        if(id=='egoing'){
            password = prompt('비밀번호를 입력해주세요.');
            if(password==='111111'){
                alert('인증 했습니다.');
            } else {
                alert('인증에 실패 했습니다.');
            }
        } else {
            alert('인증에 실패 했습니다.');
        }
    </script>
</body>
</html>

 

4.4 논리 연산자

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <script>
        id = prompt('아이디를 입력해주세요.');
        password = prompt('비밀번호를 입력해주세요.');
        if(id=='egoing' && password=='111111'){
            alert('인증 했습니다.');
        } else {
            alert('인증에 실패 했습니다.');
        }
    </script>
</body>
</html>
id = prompt('아이디를 입력해주세요.');
password = prompt('비밀번호를 입력해주세요.');
if((id==='egoing' || id==='k8805' || id==='sorialgi') && password==='111111'){
    alert('인증 했습니다.');
} else {
    alert('인증에 실패 했습니다.');
}

 

 

4.5 boolean에 대체재

 

javascript에서 숫자1은 true를 대체할 수 있다. (추천되지는 않음)

undefined나 null, NaN, 0, 빈 문자열은 false를 대체할 수 있다.

 

5. 반복문

 

5.1 반복문 기본문법 - while

while (조건){
    반복해서 실행할 코드
}

 

5.2 반복 조건

var i = 0;
// 종료조건으로 i의 값이 10보다 작다면 true, 같거나 크다면 false가 된다.
while(i < 10){
    // 반복이 실행될 때마다 coding everybody <br />이 출력된다. <br /> 줄바꿈을 의미하는 HTML 태그
    document.write('coding everybody <br />');
    // i의 값이 1씩 증가한다.
    i++
}

 

5.3 for 문

for(var i = 0; i < 10; i++){
    document.write('coding everybody'+i+'<br />');
}

 

5.4 반복문의 효용성

5.5 반목문의 제어

continue로 continue 아래의 내용을 실행시키지 않고 반복문을 그 다음부터 실행하거나,

break로 반복문을 아예 빠져나갈 수 있다.

5.6 반복문의 중첩사용과 디버거

// 0부터 9까지 변수 i에 순차적으로 값을 할당        
for(var i = 0; i < 10; i++){
    // 0부터 9까지의 변수를 j의 값에 순차적으로 할당
    for(var j = 0; j < 10; j++){    
        // i와 j의 값을 더한 후에 출력
        // String은 숫자인 i와 j의 데이터 타입을 문자로 형태를 변환하는 명령이다. 
        // String()을 제거하고 실행해보면 의미가 좀 더 분명하게 드러날 것이다.
        document.write(String(i)+String(j)+'<br />');

크롬 개발자도구를 debugger처럼 쓸 수 있다.

변수들을 Watch 탭에 추가해서 편하게 볼 수 있다.

 

 

'개발 공부 > Javascript' 카테고리의 다른 글

웹브라우저 Javascript - Element, Node, Document, Text 객체  (0) 2020.09.25
웹브라우저 Javascript - 1.OT, 2. BOM, 3.DOM  (0) 2020.09.24
자바스크립트 언어 기본 - 객체지향  (0) 2020.09.08
자바스크립트 언어 기본 - 함수지향  (0) 2020.09.08
자바스크립트 언어 기본 - 함수, 배열, 객체, 모듈  (0) 2020.09.08

'개발 공부/Javascript' Related Articles

티스토리툴바