The <script> Tag
<head>, <body>작성 가능
생략 가능하나, 쓰기를 권장
var : 일반 변수 선언 할
let : 블럭 내의 변수
const : 상수 ( 값, 자료형을 유지하고 싶을 때 - 변경 불가)
문자열
" " , ' ' 둘 다 가능
문자열 결합 : +로 결합
주석 //, /* */ 사용
대, 소문자 구분 필요
대입연산자 : =
비교할 때 : ==
<p id="demo"></p>
<script>
var carName = "Volvo";
var carName;
document.getElementById("demo").innerHTML = carName;
변수 선언할 때 값을 넣지 않은 경우 기존 값("volve")이 나오고, 두번 째 변수에 값을 입력하면 덮어 씌워짐
문자열로 시작하면 문자열로 결합 됨. 결과 값 : 523
결과 값 :73
자바와 차이점
1/3 (정수/정수) : 자바 결과 값 0, 자바스크립트 결과 값: 0.3333.. (실수로 나옴)
a * 3
결과 값 : NaN (Not a Number) - a는 숫자가 아닌 문자이기 때문에
3/0
결과 값: 0으로 못 나눠서
/*비교연산자 ==, ===, !=, !==, >, >=, <, <=*/
var a = 7;
var a = '7';
console.log( a==b, a===b ) // true false
값만 비교할 때는 ==
자료형까지 비교할 때는 ===
/*논리연산자 &&, ||, ! */
console.log(a % 2 == 1 && a > 5) // true
/*삼항연산자 ? : */
console.log(a & 2 ==1? '홀수' : '짝수') //홀수
var c = plus(2);
console.log(c); //Nan
2만 매개변수에 입력이 되었고, b는 undefined 이므로 Nan이 나오게 됨.
var c = plus(2, 3, 4);
console.log(c); //5
//이름 없는 함수
var f1 = function(){
console.log('이름없는 함수')
}
f1();
var f2 = f1;
f2();
f1과 f2는 서로 다른 함수이다.
f4( function(){
console.log('콜백함수');
});
함수에 인자로 들어가는 함수를 callback function이라 함.
var f1 = function(){
var fv = 1; //f1함수영역에 변수선언언
console.log(fv); //1
}
f1();
console.log(fv, window.fv); //undefined var없이도 window객체의 fv를 자동으로 선언 가능
DOM
객체에 접근하는 법
<script>
var cup =document.querySelector("#cup");
cup.onclick = function(){
alert("이미지를 클릭했습니다");
}
</script>
<script>
var cup =document.querySelector("#cup");
cup.onclick = changePic;
function changePic(){
cup.src = "imanges/cup-2.png";
}
</script>
함수가 미리 정의 되어 있는 경우, onclick 다음에 함수이름만 넣어줘서 사용할 수 있음.
<script>
var cup =document.querySelector("#cup");
cup.onclick = function (){
cup.src = "imanges/cup-2.png";
}
</script>
함수가 들어있던 자리에 changePic이름을 빼고 위와같이 사용도 가능.
한 번만 사용할 경우 이름 붙이지 않고 이런식으로 사용 가능.
<body>
<div id="container">
<img src = "images/cup-1.png" id="cup">
</div>
<script>
var cup =document.querySelector("#cup");
cup.onclick = function (){
alert("현재 이미지 파일 경로는" + this.src)
}
</script>
이벤트가 발생한 대상에 접근 하고 싶을 때 this 예약어 사용
클릭 이벤트가 발생한 대상(이미지)가 됨.
이벤트 처리하기
addEventListener( ) : 이벤트 객체를 사용해 이벤트 처리기 연결
요소.addEventListener(이벤트, 함수, 캡처 여부) ;
1) 이벤트 : 이벤트 유형 지정 ( 단, click과 keypress처럼 on을 붙이지 않고 사용)
2) 함수 : 함수를 작성할 수 있고, 함수 이름을 넣어 사용도 가능. event객체를 인수로 받는다.
3) 캡처 여부 : 부모 이벤트-> 자식 이벤트 (캡처링) / 자식->부모 (버블링)
대부분은 버블링이고, 버블링인 경우 false사용.
<script>
var cover = document.getElementById("cover");
cover.addEventListener("mouseover", changePic, false);
cover.addEventListener("mouseout", originPic, false);
function changePic (){
cover.src = "images/easys-2.jpg";
}
function originPic(){
cover.src = "images/easys-1.jpg";
}
</script>
<script>
var cover = document.getElementById("cover");
cover.addEventListener("mouseover", changePic, false);
cover.addEventListener("mouseout", function(){
cover.src = "images/easys-1.jpg";
});
function changePic (){
cover.src = "images/easys-2.jpg";
}
</script>
한 번만 사용할 함수라면 이렇게 사용도 가능!
DOM에서 스타일 다루기
DOM에서 노드 추가, 삭제하기
1) 요소 노드를 추가하는 경우
2) 속성 노드를 추가하는 경우
