Web develop/Javascript

[JavaScript] 자바스크립트, 자바와 차이점 부분 위주 정리

ForA 2019. 6. 22. 17:59
728x90

JavaScript

  • 웹브라우저에서 실행되는 프로그램이다
  • HTML문서내에서 실행(html에 종속적이다,브라우저에서 실행된다!!)
  • HTML문서(정적페이지) → JavaScript적용 (동적페이지)
  • HTML문서를 통해 입력된 데이터를 얻어오고 데이터에 대한 유효성 검사를 할 때 사용.
  • HTML문서에 대한 조작(태그,속성,스타일)
  • 자바스크립트를 왜(어디서) 사용하는가?
  • 문서 조작(태그와 속성)
    => 조작에 필요한 데이터가 외부에 존재한다면(현재HTML없을시) Ajax를 사용!!
  • 유효성 검사(서버에게 데이터를 보내기 전에 검사)

자바의 경우

  • 서버 스크립트
  • JVM에서 실행

자바스크립트의 경우

  • 클라이언트(사용자, 브라우저) 스크립트
  • 브라우저에서 실행

JavaScript 문법

자바스크립트 선언 위치

HTML문서내에 포함되어서 실행. (HTML문서내의 어떤 위치라도 정의 가능)

<head>
<script>
변수선언, 함수정의
</script>
</head>
<body>

<script>함수호출</script>
<script src="자바스크립트 파일"></script>
</body>

자료형을 선언, 정의하지 않는다

var su; //변수선언
su=2000; //number
su="strin"; //String타입
su=true; //boolean 타입
su = new Date(); //Date 타입

자바스크립트에서의 문자열(text) 표현

:작은 따옴표와 큰 따옴표를 구분 없이 사용. 전혀 차이가 없음

name1= "홍길동"; (O)
name2= '길라임'; (O)
name3= "김주원'; (X)

세미콜론 생략가능

: 자바스크립트는 구분자, 종결자 역할을 하는 ';'을 생략하는 것이 가능.
⇒이유: 라인(줄바꿈)을 통해 서로 다른 문장을 구분하기 때문

name='길동'
age=13
==> (O)

name="라임" age=15
==> (X)

name="주원"; age=17
==> (O)

문자열 비교

자바의 경우

"java".equals("JAVA") ==> (O) 문자열 내용 비교
"java" == "JAVA" ==> (O) 메모리 주소 비교

자바스크립트의 경우

"javascript".equals("JAVASCRIPT") ==> (X) 에러발생
"javascript" == "JAVASCRIPT"      ==> (O) 문자열 내용 비교

'==' 연산자 와 '==='연산자

'=='연산자: 데이터 내용만 비교

'==='연산자: 자료형 비교, 내용비교를 같이하는 엄격한 연산자

100 == '100' --->true //내용만 같다면 자동형변환 해서 비교
100 === '100' --->false //내용,자료형 비교 (자료형이 다르면 false)

조건문

if(조건식){
    조건식의 결과가 참일 때 실행할 문장;
}
--->실행할 문장이 한개였을때 영역괄호{}는 생략가능

if(조건식){
    조건식의 결과가 참일 때 실행할 문장;
}else{
    조건식의 결과가 거짓일 때 실행할 문장;
}

if(조건식1){
    조건식1의 결과가 참일 때 실행할 문장;
}else if(조건식2){
    조건식1의 결과가 거짓이고!!
    조건식2의 결과가 참일 때 실행할 문장;
}else{
    조건식1,2의 결과가 거짓일 때 실행할 문장;
}

if문에서 자바와 차이점

if(조건식 ==> boolean, 숫자, 객체){ //자바는 boolean값만 조건식

}
  • 숫자: 0인 수(false), 0아닌 수(true)로 구분

  • 객체: 브라우저에서 지원되는 객체인지 아닌지 판별.

  • ---> 변수에 값이 존재하는지 판단.

  • 존재하는 객체(문자열, 브라우저가 지원하는 객체) ---> true
    null, undefined(초기화되지 않은변수) ---> false

    if(0){ //0은 false. 0이 아닌 수는 true
      document.write("if");
    else{
      document.write("else");
    }

빈문자열 체크

str.length == 0 //str.length() X
str == '' // 더 많이사용함
  • str.length() : 에러발생

알림창

alert("time");//메세지창 출력
confirm("this");//확인대화상자: 삭제전 '확인'에서 많이 사용
prompt("whit"); //입력창

함수(메소드) 정의

자바의 경우

void hello(String name, int age){}
int hello(String name, int age){return 100;}

자바스크립트의 경우

function hello(name, age){}
function hello(name, age){return 100;}

자바스크립트 함수형식

function 함수명(){
}  -----> return; 생략가능

function 함수명(변수명1, 변수명2){

  return "리턴데이터";
}

※주의: 자바스크립트의 함수는 오버로딩을 제공하지 않음

function hello(){
안녕
}

hello(); 호출 ----> 안녕

function hello(){
씬짜오
}
==> 에러가 발생하지 않는다

hello(); 호출 ----> 씬짜오

function hello(name){
봉쥬르
}
==> 에러가 발생하지 않는다

hello(); 호출 ----> 봉쥬르
hello('나길동'); ----> 봉쥬르
hello('나길동',13); ----> 봉쥬르
  • 함수호출시 매개변수(인자)의 갯수와 상관없이 함수명만 일치하면 호출 가능
  • 같은 영역(파일)에 동일한 이름의 함수가 여러개 존재한다면(인자의 갯수는 상관없이) 제일 아래에 있는 함수로 overwrite됨

'Web develop > Javascript' 카테고리의 다른 글

[JavaScript] 내장함수 , 배열, JSON  (0) 2019.06.22