JavaScript 기본 문법 정리
Web/OpenTutorials

JavaScript 기본 문법 정리

- JavaScript란?

  : 웹브라우저를 프로그래밍적으로 제어하기 위해 필요한 언어이다.

  HTML,CSS 와 함께 웹 프론트엔드를 구성하는 요소 중 하나이고, 동적으로 컨텐츠를 바꾸고, 멀티미디어를 다루고,

  사용자와 상호작용 할수 있는 동적인 언어이다.

  : 오직 HTML 상에서 script태그 만으로 사용이 가능하다.

  : 각종 환경을 프로그래밍적으로 제어하기 위한 언어이다.

 

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

 

+) <script>~</script> 이 부분은 웹브라우저에게 지금부터 자바스크립트의 문법에 따라서 해석하라고 알려주는 일종의 태그이다.

 

+) 크롬 콘솔을 통해 자바스크립트 문구를 실행시킬 수 있었다.

 

2. 주석

: 개발자들이 따로 덧붙이는 메모 부분이다. // 나 /**/ 사이에 주석을 적어주자.

 

3. 줄바꿈과 여백

  : 자바스크립트는 줄이 바뀌면 명령이 끝났다고 생각함. 그렇지만 최대한 세미콜론을 끝에 붙이도록 하자.

  

 

4. 숫자와 문자(데이터형)

   1) 숫자

: 자바스크립트 내에서는 큰따옴표나 작은따옴표가 붙지 않은 숫자는 그냥 숫자로 인식된다.

<script type="text/javascript">
  alert(1.2+1.3);
</script>

: 컴퓨터 라는 것은 기본적으로 계산 기능을 구현하기 위한 기계이다.

    - Math.pow(3,2)// 3의 2승

    - Math.round(10.6) //10.6을 반올림한다

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

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

     ex)100*Math.random() 하면 0 부터 100.0 사이의 랜덤한 실수가 나오도록 응용할 수 있다.

         Math.round(100*Math.random()) 을 실행하면 0~100 사이의 반올림한 정수가 나올수 있다.

  

    2) 문자

    : 문자는 큰 따옴표 또는 작은 따옴표 중 하나로 감싸야 한다.

    : 문자열 안에 따옴표를 포함하고 싶을 때는 ' 앞에 역슬래시를 덧붙여줘야 한다.

<script>
  alert("egoing\'s coding everybody")
  </script>

  +) typeof() 함수는 데이터형을 알려준다.

 

   +) 문자와 문자를 더할때는 "coding"+"everybody" 와 같이 +를 덧붙여준다.

   +) 문자열의 길이를 구할 때는 문자열 뒤에 .length를 붙여준다.

   (문자열을 가공할 수 있는 함수는 상당히 많으니 몇가지만 알아둘것)

 

 5. 변수

  : 문자나 숫자 같은 값을 담는 컨테이너로 값을 유지할 필요가 있을 때 사용한다.

  : 변수는 var로 선언한다.

var a=1;
alert(a+1);

var first="coding"
alert(first+"everybody");

//변수 a에 coding, b에 everybody를 할당하는 방법은 아래와 같다.
 var a='coding',b='everybody';
 alert(a);
 alert(b);

 

=> 변수는 코드의 재활용성을 높여준다. 복잡함을 훨씬 줄여주고, 반복하지 않아도 된다.

  +) var은 생략이 가능하다.

//변수를 쓰기 전

alert(100+10);
alert((100+10)/10);
alert(((100+10)/10)-10);
alert((((100+10)/10)-10)*10);

// 변수 사용 후

a = 100;
a = a + 10;
alert(a);
a = a / 10;
alert(a);
a = a - 10;
alert(a);
a = a * 10;      
alert(a);

 

6. 비교 연산자

  1) ==

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

   

   2) === (strict) => 이 비교연산자를 사용하도록 권장된다.

   : 일치 연산자로 === 좌항과 우항이 '정확'하게(자료형까지) 같을때 true 다르면 false가 된다.    

  ex) 1=='1' - true,  1==='1' - false 즉, 문자 1과 숫자 1을 다르게 인식한다.

 

  ex2) null==undefined // true,  null===undefined // false 

       - undefined => 변수를 선언만 하고 값을 할당하지 않음, 즉 자료형이 결정되지 않은 상태이다.

       - null => 변수를 선언하고, 'null' 이라는 빈 값을 할당한 경우이다.

                    (프로그래머가 의도적으로 값이 없다는 것을 지정한 상황이다.)

         +) var foo 를 선언만 하고 값을 아예 대입한적 이 없으면 undefined라고 생각하자.  

 

    +) NaN - 0/0 과 같다. 계산할수 없음을 임의적으로 나타낸다.

  https://dorey.github.io/JavaScript-Equality-Table/

 

JS Comparison Table

=== (negated: !==) When using three equals signs for JavaScript equality testing, everything is as is. Nothing gets converted before being evaluated.

dorey.github.io

 

  7. 조건문

 : 주어진 조건에 따라서 애플리케이션을 다르게 동작하도록 하는 것이다.

   1) if

   : 조건문은 if로 시작한다. if 뒤에 괄호에 조건이 오고, 조건이 될수 있는 값은 boolean이다. 

   boolean의 값이 true라면 괄호 다음의 중괄호 구문이 실행된다.

 

    : if~ else if 구문을 통해 처리를 좀더 지능적으로 할수 있다.

//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);
}

 

 

2) 비교연산자와 조건문을 결합시켜 실용적으로 사용할 수 있다.

 ex) 로그인 폼 만들어보기

<!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>

 

 

3) 논리연산자 : &&(and ) 와 || (or)

  ex) 위의 예제를 개선해 볼수 있다.

id = prompt('아이디를 입력해주세요.');
password = prompt('비밀번호를 입력해주세요.');
if((id==='egoing' || id==='k8805' || id==='sorialgi') && password==='111111'){
    alert('인증 했습니다.');
} else {
    alert('인증에 실패 했습니다.');
}

 

  => 이를 응용해서 html 과 js를 결합시킨 로그인 폼을 하나 만들어 보았다.

<html>
<head>
<script>
function login(){
  var form=document.f;
  if(f.id.value=="admin"){
   alert("관리자 권한을 실행합니다");
   f.submit();
}}
</script>
</head>
<body>
<form name="f" method="POST" action="http://localhost/cinema.php">
   <p>ID: <input type="text" name="id"></p>
   <p>PW:<input type="password" name="pw"></p>
   <input type="button" onclick="login()" value="login">
</form>
</body>
</html>

관리자 권한일때만 접속 가능한 페이지를 만들 수 있다.

 

+) boolean의 대체제

   : if(0) -> false, 0이 아닌 값은 true로 간주된다.

 

 

8. 반복문

 : 인간이 잘하지 못하는 반복적인 작업을 컴퓨터에게 맡겨서 사용할 수 있게 된다.

 

1. while

    while(조건) {

   반복해서 실행할 코드} 

    

 ex) 반복문을 중단시키는 조건을 확인해 볼 수 있다.

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

 

  2. for

  for( 초기화; 반복조건 ; 반복될 때 마다 실행되는 코드){

  반복해서 실행할 코드}

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

 

=> document.write 코드를 열번 작성하는 대신 반복문을 사용하여 훨씬 간결하게 만들 수 있다.

 

  3) 반복문의 제어

   -> break, continue문을 이용하자

 

 4) 반복문의 중첩

// 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 />');
    }
}

 

 

'Web > OpenTutorials' 카테고리의 다른 글

JavaScript- (라이브러리~ 정규표현식)  (0) 2020.01.15
Javascript - 함수~모듈  (0) 2020.01.11
HTML 주요 태그 정리  (0) 2020.01.03
HTML로 간단한 웹페이지를 제작해보자  (0) 2020.01.03
PHP 언어 공부해봅시다 -1) (리눅스 환경 설정~배열)  (0) 2019.12.27

    티스토리툴바