자바스크립트(정식명칭은 ECMAScript)는 웹 개발자가 반드시 알아두어야 하는 프로그래밍 언어이다.
◆ 자바스크립트 (JavaScript)
DB작업등의 기술적 작업은 백엔드에 속하고, css나 자바 스크립트 같은 디자인 관련 작업은 프론트엔드라 칭한다. 개발자는 보통 백엔드의 작업을 하지만, 자바스크립트는 개발자의 영역이다.
▶ 자바스크립트의 특징
- 자바스크립트를 이용하면 HTML의 자체 변화를 일으키게 유도할 수 있다.
해당 HTML파일에 자바스크립트를 섞어서 전송하게 되면 새로운 HTML을 보내지 않아도 해당 페이지 내의 자체 변화를 일으키게 유도할 수 있다.
- 자바스크립트는 <script>~</script> 안에 작성한다.
▶ 간단예시
▼아래 이미지에 마우스를 올려보세요
◆ 자바스크립트의 기본 문법
▶ 자바스크립트 변수의 선언은 모두 var로 선언한다.
ex ) var x, y, z;
- 선언은 var로 하지만 변수에 들어있는 값에 따라 타입이 달라질 수 있다.
- 변수의 타입은 ‘typeof 변수’해당 변수의 타입을 확인할 수 있다.
- 변수에 숫자를 집어넣게 되면 변수의 type은 number이 되지만, 해당 변수에 다시 true란 값을 넣게 되면 type은 boolean으로 바뀌게 된다.
- 단, 변수의 값이 없는 경우 undefined가 되고, undefined는 자바의 null과 비슷한 용도로 사용된다.
▶ 자바스크립트에는 char형이 없기 때문에 문자열 표기를 할 때, 쌍 따옴표나 홑 따옴표 둘 다 string형으로 인식한다. 즉, 둘 다 써도 상관이 없다.
▶ 코드는 순차적으로 진행. ( 따라서, 보통 메서드로 정의 해두고 쓰인다. )
▶ 주석 처리는 java와 동일. ( // , /**/ )
▶ 기본형 타입은 boolean, number, string
( 자바스크립트에도 null은 있음 )
▶ 자바스크립트에는 기본형 데이터가 없다. ( =모두가 객체)
ex ) true.toString(), 47.4265.toFixed(2) 등등 모든 데이터 값을 객체로 인식함.
=> toFixed(2)는 소수점 두 번째 자리까지 끊도록 변경
▶ 기본 연산 작업(산술, 비교, 대입)은 자바와 대체로 동일하다.
▶ 메서드는 function으로 선언한다. 또한 반환형을 적어주지 않고, 매개변수 앞에 자료형을 쓰지 않는다.
ex ) function A( num ){ }
- 호출할 때는 A( 2 ), A(true), A(“바보”) 등 다양한 형태의 자료형을 넣어도 되고, 여러 개의 인자를 보내도 상관없지만, 맨 처음 인자만 인식한다.
- 태그 안에서 on옵션에 인자를 넘길 때는 홑 따옴표 안에 쓰도록 한다.
( 쌍 따옴표랑 겹치기 때문에 )▶ 자바스크립트에서 for문도 가능하지만, 확장 for문은 불가
확장포문 : for( String s : ar ) 불가
▶ HTML태그의 onclick등의 스크립트메서드를 호출하는 옵션에서는 스크립트언어로 적용되기 때문에 window.alert()등 한 줄짜리 메서드는 굳이 스크립트로 만들지 않아도 호출이 가능하다.
▶ number타입은 정수와 실수를 구분하지 않으므로 숫자의 나누기 연산은 몫을 구하는 것이 아닌 해당 나누기 값을 구한다.
ex ) 14/3 = 4가 아닌 4.333333 이 나오게 된다.
▶ 자바스크립트의 문자열비교는 equals가 아닌 == 로 한다.
◆ 자바스크립트 기본 메서드
-
- console.log(“내용”);
-
f12 개발자도구
의 콘솔 탭에서 내용들을 볼 수 있게 해준다.( 테스트용으로 자주사용 )
-
- window.prompt(“내용”);
- String값을 입력 받을 수 있는 창을 제공한다. 매개인자의 내용은 화면에 보여줄 내용 - string반환
-
- window.alert(“내용”);
- 내용으로 알림창만 제공
-
- window.confirm(“내용”);
- 예(true), 아니요(false) 버튼을 클릭할 수 있는 알림 창 - boolean반환
-
- document.getElementById(“아이디”)
- 태그의 옵션으로 설정한 아이디에 해당하는 태그객체를 불러오는 메서드
=> ‘.옵션’ 으로 해당 태그의 옵션 값이 무엇인지 뽑아낼 수 있고 수정도 가능하다.
-
- 아이디로 뽑아낸 객체.innerHTML
- 태그(<>)와 끝맺음 태그(</>) 사이에 있는 태그의 내용을 객체로 뽑아낼 수 있다.
(value로 설정되어있지 않은 내용 ( div같은..))
-
- 체크박스객체.checked
- 체크박스가 체크인지 아닌지 boolean 반환
-
- 폼객체.submit();
- 폼의 submit버튼을 누른 것과 같은 액션
-
- window.setInterval(함수명,1000);
- 특정 함수를 ms단위 초 인자 값 당 한 번씩 호출
( 주의) 할 점은 함수는 () 없이 함수명만 쓴다. )
=> setInterval()함수가 호출된 횟수를 반환 ( 인자로 있는 함수의 호출횟수가 아님 )
-
- window.clearInterval( setInterval()이 반환한 값 )
- setInterval() 의 작업을 멈춤
◆ Global속성 또는 Global함수
객체 지정 없이 전역으로 사용되는 속성이나 함수
- ▶ undefined
- 값이 없는 변수에 들어가는 값 ( null과 비슷)
a == undefined 로 비교가능 - ▶ NaN
- Not a Number 숫자가 아닌 값을 반환할 때 나오는 값
=> == NaN 으로 비교가 불가능하고 isNaN( a )으로 처리해야한다. - ▶ Infinity
- 무한 값을 의미 typeof 는 Number
- ▶ var e = encodeURI(“가나다”);
- utf-8로 변환
- ▶ var e = decodeURI(e);
- 다시 원래 문자로 재변환
- ▶ parseInt(n)
- n을 int형으로 변환
( 자바의 Integer.parseInt() 와 다른 함수, 스트링 형 두개를 더하거나 할 때 사용 ) - ▶ parseFloat(n)
- n을 float형으로 변환
=> 자바스크립트의 형변환은 parseInt, parseFloat 밖에없다.