JavaScript
자바 스크립트 개요
자바 스크립트
- 객체 기반의 언어이다.
- 웹의 동작을 구현할 수 있다.
자바 vs 자바스크립트
| 자바 | 자바스크립트 |
|---|---|
| 컴파일언어 | 인터프리터언어 |
| 타입 검사를 엄격하게 함 | 타입을 명시하지 않음 |
| 클래스 기반의 객체 지향 언어 | 프로토타입 기반의 객체 지향 언어 |
자바 스크립트 문법
- 대소문자 구별한다.
- 대소문자 정확히 구분해야 한다.
- 식별자는 영문자 , _ $ 만은 사용할 수 있다.
식별자 작성 방식
Camel Case 방식
식별자가 여러 단어로 이루어 질 경우에 첫 번째 단어는 모두 소문자로 작성하고 그 다음 단어부터는 첫 문자만 대문자로 작성하는 방식이다.
var firstVar = 10; // Camel Case 방식
Underscore Case 방식
식별자로 이루는 단어들을 소문자로만 작성하고, 그 단어들은 언더스코어로 연결하는 방식이다.
자바 스크립트 출력
여러 방법이 있다.
window.alert()메소드- HTML DOM 요소를 이용한
innerHTML프로퍼티 document.write()console.log()메소드
window.alert()
대화 상자를 띄워 사용자에게 데이터를 전달해줌
<script>
function alertDialogBox(){
alert("확인을 누를때까지 다른작업 할 수 없음");
}
</script>window 객체의 모든 메소드나 프로퍼티를 사용할 때는 window라는 접두사를 생략할 수 있다.
HTML DOM 요소를 이용한 intterHTML프로퍼티
실제로 가장 많이 사용하는 방법이다.
우선 doucument 객체의 getElementByID()나 getElementsByTagName() 등 메소드를 사용하여 HTML요소를 선택한다.
그리고서 innerHTML프로퍼티를 이용하면 선택된 HTML 요소의 내용(content)나 속성(attribute)값 등을 손쉽게 변경할 수 있습니다.
<script>
var str = doucument.getElementById("text");
str.innerHTML = "이 문장으로 바뀌었습니다."
</script>document.write() 메소드
웹 페이지가 로딩될 때 실행되면, 웹 페이지에서 가장 먼저 데이터를 출력한다. 따라서 이것은 대부분 테스트나 디버깅을 위해 사용된다.
<script>
document.write(4*5);
</script>하지만 웹페이지 모든 내용이 로딩 된 후에 이것이 실행된다면 웹 페이지 내에 먼저 로딩된 모든 데이터를 지우고 자신의 데이터를 출력하게 된다.
console.log() 메소드
웹 브라우저 콘솔을 통해 데이터를 출력해 준다.
디버깅 하는데 많은 도움을 줌
자바 스크립트 적용
내부 자바스크립트 코드
태그를 사용하여 HTML문서 안에 삽입 가능
외부 자바스크립트 파일
외부 파일로 생성하여 삽입할 수 있다.
.js 확장자를 사용하여 저장한다.
example.js
function printData(){
document.getElementById("date").innerHTML = Date();
}예제
<head>
<meta charset="UTF-8">
<title>JavaScript Apply</title>
<script src = "/examples/media/example.js"></script>
</head>기본 타입
기본
객체타입
var num = 10; // 숫자
var myName = "홍길동"; // 문자열
var str; // undefine숫자, 문자열 , boolean, symbol , typeof , null , undefined 등등
==(동등 연산자)
===(일치 연산자)
null == undefined; //true
null === undefined // false //why? 타입이 다르기 때문! 자바 스크립트 기본 타입은 object(객체)이다.
타입 변환
타입변환
유연한 언어라 같은 변수에도 다른 타입 값을 대입할 수 있다.
자동으로 타입변환 된다(묵시적 타입 변환)
Number("10"); // 숫자 10
String(true); // 문자열 "true"
Boolean(0); // 불리언 false
Object(3); // new Number(3)와 동일한 결과로 숫자 3
명시적으로 타입 변환도 가능
숫자 --> 문자열로 변환
- . toExponential() : 정수부분은 1자리 소수부분은 입력받은 수 만큼 e표기법을 사용하여 숫자를 문자열로 변환
- toFixed() : 소수 부분을 입력받은 수만큼 사용하여 숫자를 문자열로 변환
- toPrecision() : 입력받은 수만큼 유효 자릿수를 이용하여 숫자를 문자열로 변환
불리언 값을 문자열로 변환
불리언 값을 문자열로 변환하는 방법에는 String() 함수와 toString() 메소드를 사용하는 방법이 있습니다.
예제
String(true); *// 문자열 "true"*
false.toString(); *// 문자열 "false"*
'프로그래밍 언어 > JavaScript' 카테고리의 다른 글
| callback 함수 처리 예시 (0) | 2019.06.10 |
|---|---|
| javascript / html (0) | 2019.06.10 |
| Ajax (0) | 2019.02.27 |
| 04. 자바스크립트 객체 (0) | 2019.02.13 |
| 03 . 함수와 실행 컨텍스트(Javascript) (0) | 2019.02.13 |
