자바스크립트 start

자바스크립트 START !

 자바스크립트는 프론트엔드(Front-End) 개발 언어라고 부른다.

-개발 환경 준비하기

-개발자 도구를 보면

Elements : HTML(element) , 요소에 적용된 스타일(CSS)를 검사할 수 있다.

Console : 자바스크립트 오류 체크는 물론 디버깅을 할 수 있다.

Source : 브라우저가 자바스크립트 소스를 파싱(parsing)해오는 과정을 보여준다. 소스 패널도 오류 체크와 디버깅을 할 수 있다.

 

% 디버깅 이란 ?

-> 프로그래머가 실수로 잘못 코딩한 프로그램을 실행하면 오류가 발생하는데 이런 현상을 버그라고 부르고 이런 버그를 검사하고 수정하는 작업을 디버깅이라 한다.

 

-doocument

-document는 문서 객체이며 문서 출력 메서드인 write()를 이용해 데이터를 문서에 출력할 때 사용한다.

 

-주석 처리

-설명글을 넣고 싶을 때 주석 처리를 하면 된다 //는 한줄 설명글 ‘/* 내용 */’ 은 여러 줄 설명 글이다.

%HTML소스의 설명글은 <!--HTML (내용) --> 로 표시한다

 

-내부 스크립트 외부로 분리하기

-HTML 내부에 작성된 자바스크립트는 마지막에는 외부로 분리하는 작업을 해야한다. 그렇게 하면 자바스크립트 소스를 찾기 쉽기 때문이다.

 

기본형 |　 <script src=“JS 파일 경로 ” > </script>

 

내부 스크립트를 외부로 분리하려면 따라 파일을 만들어서 저장해야 한다.( HTML 내에서 JS파일을 연동하면 됨 )

 

1.확장자인 JS파일 만들고 저장

ex) document.write(“환영”);

 

2. head부분에 <script>를 추가하여 js파일을 추가한다.

 

 

-코드 입력 시 주의 사항 ! ! !

1.자바스크립트는 대, 소문자를 구분하여 작성한다.

ex) 날짜 객체 생성 : new Date() ; (O)

New date() ; (X)

 

2. 세미콜론은 꼭 쓴다.

 

3. 문자형 데이터를 작성할 때는 큰따옴표(“ ”)와 작은 따옴표(‘ ’)의 겹침 오류를 주의한다.

ex) 큰따옴표 겹침 오류

document.write(“책에”자바스크립트 “ 라고 나와 있다 .”) ; (X) ->큰따옴표 겹침

잘된 예

document.write(‘책에 “자바스크립트”나와있다 .’) ; ( O )

document.write(“책에 \”자바스크립트\“ 나와있다 ) ; (O)

-변 수 (Variables)

-변수란 데이터(값)를 저장할 수 있는 메모리 공간이다. 데이터를 담을 수 있는 그릇.

변수에는 호직 한 개만 저장된다.

종류 : 문자형 (String) 숫자형 (Number) , 논리형 (Boolean) 빈(Null) 데이터가 있다.

 

변수 선언

-var키워드를 변수명 앞에 붙인다. 변수명에는 한글을 사용할 수 없다. 영문과 숫자 그리구 일부 특수문자(_,$)만 포함할 수 있다. 

낙타 표기법이라고 부르기도 한다.

 변수에는 하나의 값만 넣을 수 있다

기본형 | var 변수명 ; OR var 변수명= 값 ;

 

box라는 변수에 100 대입 예) var box;

box=100;

 

-문자형

-문자형 데이터는 문자나 숫자를 큰따옴표 도는 작은 따옴표로 감싸고 있다.

또한 문자형 데이터에 HTML태그를 포함하여 출력하면 태그로 인식한다.

 

기본형 | var 변수 = “사용할 문자나 숫자” ;

ex)

var s=“javascript”;

var num=“100” ;

var tag=“<h1>String</h1>” ; ->태그를 포함해서 String이란 문자를 h1태그로 입힘

 

-숫자형

-“100”과 같이 큰따옴표가 숫자를 감싸고 있다면 숫자가 아닌 문자형 데이터.

이 경우 Number(“100”)을 이용하면 문자형 데이터를 숫자형 데이터로 바꿀 수 있다.

 

기본형 | var 변수=숫자; OR Number(“문자형 숫자”) ;

ex) var s=100;

var t=Number(“500”); //문자형 500을 숫자형으로 바꾸고 t에 저장

-논리형

-참 OR 거짓이 있다. 데이터는 주로 2개의 데이터를 비교할 때 나오는 결과.

예를 들어 ‘100보다 10이 크다’는 잘못된 비교이므로 false라는 결과 반환.

 

기본형 | var 변수=true OR false ; OR Boolean(데이터);

ex) var s=true;

var t=10>=100; //false

var k=Boolean(“hello”) //true

 

%Boolean() 메서드에 데이터를 입력하면 논리형 데이터인 true OR false를 반환한다. Boolean() 메서드는 숫자 0과 null, undefined, 빈문자 (“ ”)를 제외한 모든 데이터에 대해 true를 반환한다.

 

ex) var m=Boolean ( 0 ) //false

var k =Boolean (“홍길동”) //true

 

-null & undefined 데이터

-undefined는 다음과 같이 변수 s에 값이 등록되기 전의 기본값이고, null은 변수에 저장된 값이 null인 경우이다. null은 변수에 저장된 데이터를 비우고자 할 때 사용한다.

 

기본형 | var s; //undefined ( 값 저장 전 상태 )

var t=hello ; //t에 hello값을 넣음

t=null ; // 데이터를 비우고 null을 가리킴

 

-typeof

typeof는 지정한 데이터 또는 변수에 저장된 자료형을 알고 싶을 때 사용한다.

기본형 | typeof 변수 또는 데이터 ;

 

ex) <script>

var num=100;

var str="자바스크립트";

document.write(typeof num,"<br>"); //number라는 자료형 화면에 출력

document.write(typeof str); //string이라는 자료형 화면에 출력

</script>

 

%변수 선언 시 주의 사항

1.변수명 첫 글자로는 $, _(언더바), 영문자만 올 수 있다.

ex) var 1num=0; (X)

var $num=10; ( O )

 

2.변수명 첫 글자 다음은 영문자 , 숫자 , $, _ (언더바) 만 포함가능하다.

 

ex) var 100num=10; (X)

var num100=10; (O)

 

3.변수명으로는 예약어 (document,location,window등)을 사용할 수 없다. 예약어란 이미 자바스크립트에서 사용 중인 단어를 말한다.

ex) var doucument=10; (X);

var num=10; (O);

 

4.변수명을 사용할 때는 대소문자를 구별한다