html5 언어로 마크업하며 만드는 웹페이지의 정적인 기능들을 확장하고 페이지를 조금 더 동적으로 만들기 위해 사용하는 프론트 개발언어
주로 html5에서 불가능한 사칙연산 및 관계연산 등을 실행할 때 사용하며, 기능적인 면이나 이벤트(클릭, 더블클릭 등)에 대한 동작을 처리하는 데 사용
브라우저 및 화면에 표시될 태그들을 대상으로 하는 객체들이 정의되어 있으며, 자바의 객체지향언어 형식의 프로그램이 작성
브라우저 상에서 일어날 수 있는 사용자 입력, 해당연산, 이벤트에 의한 출력의 기능을 구현 한다.
자바스크립트의 작성위치는 head 태그 내부, 그리고 body태그 내부
간단한 경고(or 안내) 메시지를 표시하기 (작은 팝업 띄우기)
window.alert("Hello JavaScript #1");
html 파일 내 body부분에 해당 내용을 출력하기, h1태그는 표시되지 않고 기능별로 동작하며 출력한다.
document.write("<h1>Hello JavaScript #1</h1>");
alert 명령은 자바스크립트 안에 내장된 window객체 안의 멤버 메서드 이다.
사용할 때 window.을 생략해서 사용할 수도 있고, 생략하지 않고 사용할 수도 있다.
자바스크립트에서는 화면에 표시되는 윈도우를 window라는 이름으로 정의한 객체로 다루게끔 환경객체를 내장하고 있다. 현재의 위치가 window 클래스 내부라는 뜻이기도 하다.
따라서 그 외부에 정의 되어 있는 document객체는 그 멤버메서드 사용시 반드시 클래스 이름과 멤버 메서드이름을 함께 써줘야 한다.
자바스크립트에서도 자바와 마찬가지로 문자 또는 숫자형의 자료가 존재한다.
또한 그들을 저장해두고 사용할 수 있게 변수도 존재한다. 아래는 문자형 자료의 설명이다.
Java와 달리 javascript의 문자 자료형은 작은 따옴표와 큰따옴표 모두 문자자료로 사용한다. (char와 String 구분이 없다.)
작은 따옴표로 묶어도 문자자료, 큰따옴표로 묶어도 문자자료로 인식, 다만 그 둘을 혼용하여 사용할 수는 없다.
("javascript' 잘못된 사용)
둘은 혼용하여 사용하는 경우는 문자열 자료안에 인용구문을 넣어야 할 때 혼용하여 사용한다.
('Hello "JavaScript"...' 바른 사용)
인용구문의 사용도 작은 따옴표와 큰 따옴표 구분은 없다
('Hello "JavaScript"...' 바른사용, "Hello 'JavaScript'..." 바른사용)
큰따옴표나 작은 따옴표로만 인용구문 표기를 하고 싶다면 이스케이크 문자 \"를 사용한다.
("Hello, \"Javascript\" ... ")
이스케이프 문자들 : \n
, \'
, \t
, \\
alert안에서는 태그 작동 X, <br>
대신 \n
을 사용해야 함
JavaScript의 숫자자료는 정수와 실수만 구분하고, 이외의 요소들을 구분없이 사용한다.
통틀어서 수치형자료(Number)라고 부르기도 한다.
자바스크립트의 변수 선언
모든 변수는 var로 선언명령으로 생성
변수의 자료형은 현재 저장되어 있는 자료형에 따라 바뀐다.
a변수에 10이라는 값을 저장해서 정수형 변수가 되어 있다가도,
이후에 123.123이라는 값을 a 변수에 대입하면 a변수는 실수형이 된다.
변수는 1개이지만 자료형을 바꿔가며 재활용이 가능하다
자바스크립트의 함수
(자바스크립트 메서드-멤버메서드가 아닌 일반 메서드)
function abc(){
document.write("<h2>자바스크립트의 일반적인 함수입니다.
자바처럼 호출합니다.</h2>")
}
abc();
var functionVariable = function(){
document.write("<h2>함수를 변수에 저장했어요.
그리고 변수 이름으로 호출합니다.</h2>")
};
자바스크립트의 함수는 이와 같이 function이라는 키워드와 매개변수가 들어가는 ()와 함수의 내용이 들어가는 {}로 구성되며, 현재 지정되지 않은 함수의 이름은 없는재로 "익명함수"라고 부른다.
따라서 위의 명령은 익명함수를 functionVariable 변수에 저장한 것이며, 이후 functionVariable이름으로 위 함수를 호출 가능
var value = 10;
value += 10; // value = value+10
document.write("<h2>" + value + "</h2>");
value -= "world";
document.write("<h2>" + value + "</h2>"); // NaN(Not Number)
+
연산자
: 숫자끼리 연산을 제외한 String과의 +연산은 모두 이어붙이기
덧셈을 제외한 문자와 숫자 간의 사칙연산
: 문자 -> 숫자 자동변환되어 산술연산이 실행
강제 자료형 변환
Boolean() 자료형 변환 (다른 자료형 -> boolean)
양변의 자료형은 틀리지만 자료형을 맞춰서 변환했을 때 변환된 값이 같음
=== : 양변이 자료형도 같고 값도 일치해야 true
!== : 양변의 자료형이나 값이 다를 때 true
자바의 메서드와 같은 뜻의 문법요소
반복되거나 단위로 구성될 명령을 하나의 이름으로 묶어놓고, 명령이 필요할 대 이름을 불러 실행하는 구조
보통 head태그 안의 스크립트영역에서 함수를 정의해놓고, body의 이벤트에 연결하여 실행시킴
: 버튼이 클릭되면 실행되는 자바스크립트의 함수의 정의
함수는 선언적 함수와 익명 함수가 있다.
선언적 함수는 생성 당시 부를 이름을 부여해서 만드는 함수
익명 함수는 이름을 지정하지 않은 상태로 만들어서, 함수자체를 변수에 저장하여 변수이름으로 사용하곤 한다.
선언적 함수이든 익명 함수이든 이들은 head 또는 body 안의 script태그 안에서 어디서든 호출이 가능하다.
익명함수
익명함수를 저장한 변수는 저장된 함수의 몸체를 대신하지만 변수에 괄호를 붙이면 함수가 실행되는 모드로 변경된다.
함수의 정의 영역 및 몸체를 변수에 저장하여 변수의 이름으로 호출하는 형태
변수는 일시적으로 하나의 함수만 저장할 수 있으며,
변수의 이름으로 함수를 호출할 시 현재 저장되어 있는 함수가 실행된다.
자바스크립트 함수의 전달인수와 매개변수는 자바와 비슷하지만
매개변수의 자료형을 표시하지 않고 변수의 이름만 명시하고 사용한다.
function add1( a, b ){
c = a + b;
document.write("<h2>" + a + "+" + b+ " = " + c + "</h2>");
}
add1( 40, 30 );
function에도 return값을 사용할 수 있다.
생성되어 있는 매개 변수보다 전달 인수의 개수가 많으면 해당 전달 인수는 무시된다. (넘쳐서 쓰지 않는 변수는 무시)
function add2( a, b ){
c = a + b;
return c;
}
var result = add2( 50, 60 );
document.write("<h2>50+60 = " + result + "</h2>");
// 매개변수의 사용상 특이점
function f(x){
return x*x;
}
result = f(5, 3);
// 위 호출에서 두 번째 전달 인수는 무시한다.
document.write("<h2>5*5 = " + result + "</h2>");
배열을 만들어 주는 Array() 함수의 다양한 사용(오버로딩)
Array() 함수는 기본적으로 매개변수에 아무 것도 입력하지 않게 정의 됨
// 빈 배열을 만듦
var array1 = Array();
// 매개 변수만큼의 크기를 가지는 배열을 만듦 (10개의 공간)
var array2 = Array(10);
// 매개변수를 배열로 만듦
var array3 = Array(25, 35, 45, 55);
document.write("<h2>" + array1 + "<br>" + array2 +
"<br>" + array3 + "</h2>");
자바의 int ... a와 같은 매개변수의 키워드
자바처럼 매개변수로 선언하지 않아도 내부에 존재하는 배열 객체라고 생각하면 된다.
전달되는 모든 전달인수를 argument가 배열로 받아서 관리
function test(name){
var output = 'Hello' + name + '...!';
return output;
}
위 함수 내의 output변수는 지역 변수 이므로, 함수를 벗어나면 없는 변수가 된다.
document.write('<h1>' + output + '</h1>');
➡️ 실행결과 에러 메시지 : output is not defined
지역변수는 자신을 감싸고 있는 중괄호를 벗어나는 순간 소멸
test 함수 안에 있는 output변수의 값을 활용하려면 return으로 받아서 사용
var s = test('홍길동');
document.write('<h1>' + s + '</h1>')
Closure
: 지역변수의 값을 살리고 활용하기 위해서, "리턴되는 함수의 리턴값"으로 지정
함수 내의 지역변수를 외부에서 활용하는 방법
거의 사용하지 않음
1. 익명함수의 재정의
var func = function(){ document.write('<h1>익명함수1</h1>'); }
func(); // 익명함수1
var func = function(){ document.write('<h1>익명함수2</h1>'); }
func(); // 익명함수2
2. 선언적 함수의 재정의
function move(){
document.write('<h1>move() 함수 1 호출</h1>');
}
move();
function move(){
document.write('<h1>move() 함수 2 호출</h1>');
}
move();
function move(){
document.write('<h1>move() 함수 3 호출</h1>');
}
move();
자바스크립트 최초 실행 시 내부의 실행 명령들의 내용을 읽기 전에 선언적 함수들을 먼저 읽어서 사용준비를 한다. 그 과정에 같은 이름의 함수가 있다면 나중에 정의된 함수가 그 이름의 함수로 결정된다.
따라서 위 코드의 세 번의 move()함수 호출 명령은 모두 'move() 함수3 호출' 내용을 출력한다.