특징
- 인터프리트 언어: 컴파일 과정을 거치지않고 실행 가능
- dynamic typing (동적타이핑): 자료형 선언없이 변수 사용 가능
var tmp = 100;
tmp = "홍길동";- 구조적 프로그래밍 지원: C언어의 if else, while, for등의 제어 구조를 완벽 지원
- 객체 기반: 전적으로 객체지향, JS의 객체는 연관배열
- 함수형 프로그래밍 지원: js에서 함수는 일급객체. 즉 함수는 그 자체로 객체이다.
- 함수는 속성과 .call()과 같은 메서드를 가짐
- 프로토타입 기반: 상속을 위해 클래스 개념 대신에 프로토타입을 사용
용도
- 이벤트에 반응하는 동작 구현
- AJAX를 통하여 전체 페이지를 다시 로드하지 않고서도 서버로부터 새로운 페이지 콘텐츠를 받거나 데이터를 제출할 때 사용
- HTML 요소들의 크기나 색상들을 동적으로 변경 가능
- 상호 대화적 콘텐츠 구현 가능 (ex. 게임, 애니메이션)
- 사용자가 입력한 값들을 검증하는 작업
- 서버 다녀올 필요 없이 정규식 검사 가능
- 중복검사는 서버다녀와야함
위치
내부 자바스크립트
- head, body 양쪽에 배치 가능
외부 자바스크립트
- head, body 양쪽에 배치 가능
장점
- HTML과 코드를 분리
- HTML과 JS 유지보수에 용이하며 가독성이 높아짐
- 캐시된 JS파일로 인해 페이지 로드 속도가 빨라짐
인라인 자바스크립트
<body>
<button type="button" onclick="alert('반갑습니다.')">버튼을 누르세요!</button>
</body출력 및 문장
출력 방법
- innerHTML(): 화면에 표시되는 데이터 변경
- document.write(): 테스트 용도
- window.alert(): window 생략 가능, 경고 상자
- console.log(): 디버깅시 사용
- 자바 스크립트 문장(statement)들은 웹 브라우저에게 내리는 명령
- top-down: 위에서 밑으로 읽어내려옴
구문 및 주석
구문(Syntax): JS 구조, 문법
- Syntax 유형: 고정값(숫자, 문자), 변수값
- 문자: "" 나, ''로 감싸서 표현
- 변수: var 키워드를 사용하여 선언
- 식별자: 숫자로 시작할 수 없으며, 대소문자 구분함
주석
- // 단일 문장
- /* * / 다중 문장주석
변수
- variable: 데이터를 저장하는 상자
명명규칙
- 변수 이름은 문자로 시작가능 (숫자 안됨)
- $ ,＿로 시작할 수 있다
- 대소문자 구별
- 예약어는 변수명으로 사용 불가
자료형
- 수치형(Numbers): 정수나 실수
- 문자열(Strings): 문자가 연결된 것, ""나 ''로 표현
- 불린형(Booleans): t/f
- 배열(Arrays): [ ]
- 객체형(Object): 객체 { }
- typeof 연산자: 변수유형 찾을 수 있음
- Undefined: 선언은 되었으나 값이 정해지지 않은 상태
기타
- var 선언안해주면 전역변수로, var해주면 지역변수... 디버깅이 어려움...
연산자
비교연산자
- ==: 값이 값으면 true
- ===: 값이 같고 유형도 같으면 true
- !=: 값이 다르면 true
- !===: 값이 다르거나 유형이 다르면 true
조건연산자
- 삼항연산자:
maxValue = (x>y) ? x: y;
HTML요소에 접근하기
- 200921Ex2_HTMLelement.html
<body>
<h1 id="test">맨땅에 헤딩</h1>
<button onclick="test()">클릭비</button>
<script type="text/javascript">
function test() {
alert("메롱");
document.getElementById("test").style.color="red";
}
</script>
</body>객체형
- 객체: 사물의 속성과 동작을 묶어서 표현하는 기법
- 예: 자동차는 메이커, 모델, 색상, 마력과 같은 속성도 있고 출발하기, 정지하기 등의 동작도 가지고 있다.
var myCar = {model:"bmw", color:"red", hp:100};
document.write(myCar.model + "<br>");
document.write(myCar.color + "<br>");
document.write(myCar.hp + "<br>");배열
- 많은 값을 저장할 수 있는 공간이 필요할 때 배열을 사용
- 서로 관련된 데이터를 차례로 접근하여서 처리할 수 있다
1) 리터럴로 배열 생성
var fruits = ["apple", "banana", "peach"];
2) Array객체로 배열 생성
var fruits = new Array("apple","banana","orange");
예제
- 200921Ex5_Array.html
조건문
if
<script>
var msg = "";
var time = new Date().getHours();
if (time < 12) {
msg = "Good Morning!";
} else if (time < 18) {
msg = "Good Afternoon!";
} else {
msg = "Good evening!";
}
alert(msg);
</script>if-else
<script type="text/javascript">
var x, y;
var op;
var x = parseInt(prompt("첫번째 숫자", "0 이상의 정수"));
op = prompt("연산자", "+,-,*,/,%중 하나");
var y = parseInt(prompt("두번째 숫자", "0 이상의 정수"));
if (op == "+") {
document.write(x + " + " + y +" = " +(x+y));
} else if (op == "-"){
document.write(x + " - " + y +" = " +(x-y));
} else if (op == "*"){
document.write(x + " * " + y +" = " +(x*y));
} else if (op == "/"){
document.write(x + " / " + y +" = " +(x/y));
} else if(op == "%"){
document.write(x + " % " + y +" = " +(x%y));
} else{
document.write("정신차려 갓김치")
}
</script>switch
<script type="text/javascript">
var score = parseInt(prompt("점수를 입력하세요.", "0~100 사이의 정수"));
var grade = parseInt(score/10);
switch (grade) {
case 9: case 10:
document.write('A');
break;
case 8:
document.write('B');
break;
case 7:
document.write('C');
break;
case 6:
document.write('D');
break;
default:
document.write('F');
break;
}
</script>반복문
중첩 반복문
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
<script>
document.write("<h1>구구단표</h1>");
document.write("<table>");
for (var i = 2; i < 10; i++) {
document.write("<tr>");
document.write("<td>" + i + "</td>");
for (var j = 2; j < 10; j++) {
document.write("<td>" + i*j +"</td>");
}
document.write("</tr>");
}
document.write("</table>")
</script>
</head>for/in 반복문
- 객체 안의 속성들에 대하여 어쩌구
- for/in 반복문을 이용하면 ~을 실행할 수 있다.
var myCar = {brand: "JEEP", model:"Rubicon", color:"Orange", year: 2020};
var txt = "";
for(var x in myCar){ // for-each랑 비슷?
txt += myCar[x] + "-";
}
document.write(txt);while
do-while
break 문장
- 반복문 벗어나기 위해 사용
continue
- 현재 실행하고 있는 반복 과정의 나머지를 생략하고 다음 반복문을 시작하게 만든다
함수
- 입력을 받아서 특정 작업을 수행하여 결과를 반환하는 블랙박스
- 이름을 가지며 입력을 받아서 특정한 작업을 실행하고 결과를 반환
만드는 방법
1. 파라미터O, 반환값O
function 함수명(파라미터1, 파라미터2, ...){
return 반환값;
}2. 파라미터O, 반환값X
function 함수명(파라미터1, 파라미터2 ,...){
명령문;
}3. 파라미터X, 반환값O
function 함수명(){
return 반환값;
}4. 파라미터X, 반환값X
function 함수명(){
명령문;
}호출
- 함수는 호출에 의해서 실행
function showDialog(para1, para2){ // 매개변수
명령문1;
명령문2;
}
showDialog(arg1, arg2); // 인수- 인수(argument): 함수를 호출할때는 어떤값을 함수로 전달
- 데이터 타입 없음, 갯수제약없음
- 실 인수가 남으면 무시되고 모자라는 인수는 undefined가 됨
- 매개변수: 함수를 만들때 인수로 받을 변수 를 선언하는것
주의사항
- function을 괄호 없이 호출하면 function의 definition이 나옴
무명함수
- 함수를 만들어서 한번만 사용할때 이름을 주지않고 한번만 사용하는 경우
// 일반적인 경우
function showDialog(str) {
alert(str);
}
showDialog("안녕하세요.");
// 무명함수의 실행
(function (str) {
alert(str);
}
)("안녕하세요.");반환
- return 문장 사용하여 외부로 값 반환
- 반환된 값을 저장하지 않고 바로 수식에 사용해도 된다
window.onload = function() {
document.getElementByID("para1").innerHTML = sub(); // para1이 sub()의 반환값
}- 단순히 함수를 종료하고 싶은 경우에도 사용 가능
변수
지역변수
- 함수 안에서 선언된 변수
- 함수 안에서만 사용 가능
- 다른 함수에서도 똑같은 이름으로 선언이 가능함
- 함수가 종료되면 자동적으로 소멸
전역변수
- 함수 외부에서 선언된 변수
- 웹 페이지 상의 모든 스크립트와 모든 함수는 전역변수를 사용 할 수 있다
- 사용자가 웹페이지를 닫으면 소멸
- 선언되지 않은 변수에 값을 대입하면 그 변수는 자동적으로 전역변수가 됨
갈 길이 멀다