IT_

JS/JS (자바스크립트) ES5

자바스크립트 Basic

0304호 2022. 12. 28.

프로토타입 기반 객체지향 언어이다.

변수들의 타입에 있어서 차이를 두지 않는다.

특성상 플랫폼에 독립적이며 모든 웹 브라우저에서 동일한 실행결과를 얻을 수 있다.

 

스크립트 언어란?

어플리케이션이 실행되는 동안 라인 단위로 해석(인터프리터)되어 실행되는 언어. 별도의 컴파일 과정이 없다

html문서 내에서 스크립트 언어는 <script></script>사이에 작성한다.

 

자바스크립트 사용가이드 사이트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide

 

JavaScript 안내서 - JavaScript | MDN

JavaScript 안내서에서 JavaScript 언어 개요와 사용법을 알아보세요. 언어 기능에 대해 상세한 정보가 필요하면 JavaScript 참고서를 방문하세요.

developer.mozilla.org

 

ES5문법이 자바스크립트의 기본 문법이다.

 

자바스크립트 기본구조

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log('hello');
    </script>
</body>
</html>

개발자도구 콘솔창에 입력한 내용이 출력된 것을 확인할 수 있다.

 

자바스크립트 사용방법

자바스크립트를 외부파일로 사용되는 경우 링크삽입위치가 중요하다. (head의 내부선언 외에도 적용가능하다,)

js의 링크 순서는 반드시 head에 있는 것은 아니고, 파일에 렌더링 순서에 따라 달라질 수 있다.

<script type="text/javascript" src="호출할 자바스크립트 파일명.js"></script>

 

변수

자바스크립트 구문

문장 끝에 세미콜론(;)을 입력한다.

구문 사이를 구분하기 위해 사용. 생략해도 무관하나 오류방지를 위해 권장한다.

 

자바스크립트 주석

// : 한 줄 주석 처리. 프로그램 코드 끝에 사용 /* ~ */ : 한 줄 이상의 주석 처리

( alt + shift + a 또는 ctrl +/ )

 

변수 선언

var 키워드 이용

자바스크립트에서 변수의 스코프(scope)는 코드 블록({ })이 아닌 함수 단위

let키워드 이용

(ES6문법에 추가된 변수) var는 동일 변수의 중복을 허용하지만 let은 중복 변수의 선언을 허용하지 않습니다

 

 

출력

자바스크린트는 문법이 틀리면 화면상에 표시되지 않는다.

개발자도구 F12에서 확인해야하며, 콘솔의 결과도 개발자 도구에서 확인한다.

분류 명령어
출력 alert("경고창출력");
console.log("콘솔창출력");
확인 confirm("확인창출력");

 

데이터 타입

타입 종류 사용
기본타입 number(숫자) 정수,실수 구분없음
string(문자열) 문자, 문자열 구분 없음 쌍따옴표("") 로 묶어도 되고, 홑따옴표(‘’)로 묶어도 됨
boolean(불린타입) 빈문자열, false, NaN,0,null등 잘못된 연산의 경우는 false로 판단이 된다.

동등비교를 할 경우 타입도 같이 비교해주는 === 연산자 사용을 권장한다,
undefined 변수를 선언했으나, 초기화를 하지 않은 경우 (초기값을 지정하지 않을 때)
null 초기값을 지정했는데 그 값이 없을 경우
참조타입 배열 [ ]
객체 { }
더보기 
 <script>
        var num1 = "10"; //문자
        var num2 = '10'; //문자
        var num3 = 10; //숫자

        //변수의 변경 - 타입을 지키지 않아도 된다.
        num1 = 3.14;
        num2 = 10;
        num3 = '10';
    
        //숫자+숫자 = 숫자, 숫자+문자 = 문자
        var result = num1 + num2 + num3;
        console.log(result); //13.1410
        console.log(num1 +num2); //13.14
        console.log(20 + '20'); //2020
        console.log(10 + undefined); //잘못된 숫자연산결과, NaN
    </script>

데이터타입

기본타입
숫자 정수, 실수 구분없음
문자열 문자, 문자열 구분없음 
쌍따움표로 묶어도되고 홀따움표로 묶어도됨
불린 true/ false
비교결과가 0, null "", false, undefined, NAN으로 판탄되면 false
동등비교할경우 타입도 같이 비교해주는 ===사용을 권장
undefined 변수는 선언했으나 초기화를 하지않은경우 자동 저장된다.
불린형은 false로 반환, 숫자는 NaN, 문자열은 "undefined"로 반환됨
null 값은 저장했으나 존재하지 않을 때 나타난다
참조타입
배열 []
객체 {}로 생성

예시

더보기 
<script>
        var num1 = "10";
        var num2 = '10';
        var num3 = 30;

        num1 = 3.14;
        num2 = 10;
        num3 = '10';

        //숫자+숫자 = 숫자
        //숫자 + 문자 = 문자
        var result = num1 + num2 + num3;
        console.log(result);
        console.log(10+3.14);       //13.14
        console.log(20+'20');       //2020
        console.log(10+undefined);  //NaN  ->  잘못된 연산

        //데이터타입 number, str, boolean, undefined, null

        var bool = true; //false
        console.log(bool);

        //undefined - 초기값을 지정하지 않으면 나타난다
        var un;
        console.log(un);

        //null - 초기값을 지정했는데 값이 존재하지 않을 때 나타남
        var tag = document.getElementById("a");
        console.log(tag);

        //키워드 - typeof
        console.log(typeof num1);
        console.log(typeof num2);
        console.log(typeof num3);
        console.log(typeof bool);
        console.log(typeof un);

    </script>

연산자

연산자

산술연산자
+ - *  % ++ --

 

비교연산자
< > <= >= == != === !==

 

대입연산자
= += -= *= %= /=

 

논리연산자
! && || & |

 

삼항연산자
조건식 ? 실행문1 : 실행문2

 

비교연산자 중 자바랑 다른건?
== 대신 타입까지 비교하는 ===를 사용하는것을 권장함
!= 대신 타입까지 비교하는 !==를 사용하는것을 권장함
논리연산자 중 자바랑 다른건?
& 대신 &&를 사용해야함
| 대신 ||를 사용해야함

예시

더보기 
<script>
        
        var num1 = "10";
        var num2 = 10;
        console.log(num1 == num2);  //true 값만 비교
        console.log(num1 != num2);  //false 값만 비교
        
        console.log(num1 === num2);  //false 값과 타입까지 비교
        console.log(num1 !== num2);  //true 값과 타입까지 비교
        
        var a;
        var b = null;
        console.log( a, b, a==b );   //변수값을 동시에 출력 //true 값만 비교
        console.log( a, b, a!=b );   //변수값을 동시에 출력 //false 값만 비교

        console.log( a, b, a===b );   //변수값을 동시에 출력 //false 값과 타입까지 비교
        console.log( a, b, a!==b );   //변수값을 동시에 출력 //true 값과 타입까지 비교
        
    </script>

 

저작자표시

'JS > JS (자바스크립트) ES5' 카테고리의 다른 글

JS (자바스크립트) 렉시칼 스코프 & 클로저  (0) 2022.12.28
자바스크립트 함수(function)  (0) 2022.12.28
자바스크립트 반복문  (0) 2022.12.28
자바스크립트 조건문  (0) 2022.12.28
자바스크립트 배열 (Array)  (0) 2022.12.28

댓글

티스토리툴바