document.querySelector("result").value ➡ 문서에서 선택자를 사용해 id값이 "result"인 태그 선택하고, 값을 가져와 변수에 할당
function calc() {
var currentYear = 2022; // 선언 및 값 저장
var birthYear = prompt("태어난 연도를 입력하세요.","YYYY"); // 사용자 입력값 저장
var age;
age = currentYear - birthYear + 1;
document.querySelector("#result").innerHTML = "당신의 나이는 " + age + "세입니다.";
}
function showPrice() {
var originPrice = document.querySelector('#oPrice').value;
var rate = document.querySelector('#rate').value;
document.querySelector('#showResult').innerHTML = "상품의 원래 가격은 " + originPrice + "원이고, 할인율은 " + rate + "%입니다.";
}
자료형
자료형설명예시
number (숫자)
따옴표 없이 숫자
var average = 1;
string (문자열)
작은/큰 따옴표 묶어 문자열
var message = "one";
boolean (논리형)
참/거짓
age > 2 (False)
undefined
자료형 정의하지 않음
null
값이 유효하지 않음
array (배열)
한 변수에 여러 값 저장
var season = ["봄", "여름", "가을", 겨울"];
object (객체)
함수와 속성이 함께 포함
var name = { FirstName : "Soo", LastName : "Kim";}
📌 제어문
if문 : if(조건) { "조건=True" } else { "조건=False" }
조건 연산자 : (조건) ? "조건=True" : "조건=False"
var number = prompt("숫자 입력");
if (number < 0) { (number < 0) ? alert("0 이상의 수 입력") : document.write("입력한 숫자 : " + number);
aleart("0 이상의 수 입력");
}else{
document.write("입력한 숫자 : " + number);
}
switch문 : switch(변수) { case "값" : 실행; break; } ➡ 조건 3개 이상
var season = prompt("계절 선택 : 1-봄, 2-여름, 3-가을, 4-겨울");
switch(season) {
case "1" : document.write("계절은 <string>봄</string>입니다. </p>");
break;
...
default : alert("잘못 입력했습니다");
}
for문 : for(var i=시작값; i<종료값; i++) { 반복 실행 }
var sum = 0;
for (var i=1; i<6; i++) {
sum += i;
}
document.write("덧셈 결과" + sum);
while문, do~while문 : while(조건) { 반복 실행 } ➡ 특정 조건에 따라 반복
var i = 0
do {
document.write("반복 조건이 true이면 반복 <br>");
i += 1;
} while (i < 10);
📌 함수
함수 선언 : 어떤 명령을 처리해야 할지 미리 알려 주는 것
함수 실행 : 선언한 함수를 가져와 사용하는 것
function addNumber(a, b) {
var sum = a + b;
console.log(sum);
}
addNumber(10, 20)
return문
var num1 = parseInt(prompt("1번째 숫자 : "));
var num2 = parseInt(prompt("2번째 숫자 : "));
var result = addNumber(num1, num2);
alert("두 수를 더한 값은 " + result + "입니다");
function addNumber(a, b) {
var sum = a + b;
return sum;
}
익명 함수 : 함수 자체가 "식"으로, 익명 함수를 변수에 할당, 다른 함수의 매개변수로 사용 가능
즉시 실행 함수 : 함수를 정의하면서 실행하는 함수
var add = function(a, b) { // 익명함수 선언
return a + b;
}
var sum = add(10, 20); // 익명함수 실행
var result = (function(a, b) { // 즉시 실행 함수
return a + b;
}(10, 20));
console.log(result);
var now = new Date() // Date 객체의 인스턴스를 만들어 now 변수에 저장
now // ➡ Mon Dec 12 2022 11:50 GMT+0900
now.toLacaleString() //"2022. 12. 12. 오후 11:50:33"
객체 종류 (1) 내장 객체 : 미리 객체로 정의됨 ➡ Number, Boolean, Array, Math(3) 브라우저 객체 모델 (BOM) : 웹 브라우저의 주소 표시줄, 창 크기 등 객체로 다룸 ➡ Navigator 객체, History 객체, Location 객체, Screen 객체
리터럴 표기법 : 변수를 선언하면서 동시에 값 지정해주는 표기 방식 (개별적으로 객체 선언하고 사용)
생성자 함수 : 속성과 함수의 틀을 만들어 필요할때마다 틀을 복제한 인스턴스 생성 (객체 틀 생성)
(4) 사용자 정의 객체
(2) 문서 객체 모델 (DOM) : 웹 문서 안에 포함된 이미지, 링크, 텍스트 필드 등 객체 정의 ➡ Document 객체, Image 객체
// (1) 리터럴 표기법
var book = { // book 객체 선언한 후 속성과 함수 정의
title: "javascript",
price: 100,
info: function() { // info 함수 정의
alert(this.title + "가격은 " + this.price +"입니다");
}
};
book.info(); // book 객체의 info() 함수 실행
// (2) 생성자 함수
function book(title, price) {
this.title = title; // this.속성 이름
this.price = price; // this가 가리키는 것은 선언하고 있는 객체 자체
}
var html = new book("javascript", "100"); // 인스턴스 생성
document.getElementByld("heading").onclick = function() {
this.style.fontSize = "5em" // 제목을 누르면 글자 크기가 커짐
}
getElementsByClassName(): DOM 요소를 class 값으로 찾음
<p> 내용1 <span class="accent"> 중요 내용1 </span> 내용2 <span class="accent"> 중요 내용2 </span></p>
document.getElementsByClassName("accent")[0].style.textDecoration = "underline" // 첫번째 텍스트에 밑줄
getElementsByTagName(): DOM 요소를 태그 이름으로 찾음
document.getElementsByTagName("h1")[0].style.backgroundColor = "#eee" // h1 태그 첫 번째 요소 배경색 바꿈
querySelector(), querySelectorAll(): #id 값, .class값, 태그 이름 으로 DOM 요소 찾기
document.querySelector("#heading") // id 값
document.querySelector(".accent") // class 값
document.querySelector("h1") // 태그 이름
getAttribute() / setAttribute(): HTML 태그 속성을 가져오기 / 수정하기
document.querySelector("#prod-img > img").getAttribute("src") // 이미지 파일 경로 확인
document.querySelector("#prod-img > img").setAttribute("src", "images/coffee-blue.jpg") // 경로 수정
addEventListener() 함수 : 한 요소에 여러 이벤트가 발생했을 때 동시에 처리
텍스트 색상 바꾸기 document.querySelector("#id").style.color = "white" document.querySelector("#id").style.backgroundColor = "" // 배경색 지우기 document.querySelector("#id").style.borderRadius = "50%" // 테두리 둥글게 처리
웹 요소를 화면에 표시 document.querySelector("#id").style.display = "block" // 화면에 표시 document.querySelector("#id").style.display = "none" // 화면에서 숨기기
DOM에 새로운 요소 추가
createElement() : 새 요소 노드 만듦
createTextNode() : 텍스트 내용이 있을 경우 텍스트 노드 만듦
appendChild() : 텍스트 노드를 요소 노드에 자식 노드로 추가함
createAttribute() : 요소에 속성이 있을 경우 속성 노드를 만듦
setAttributeNode() : 속성 노드를 요소 노드에 연결함
appendChild() : 새로 만든 요소 노드를 부모 노드에 추가함
// <p class="accent"> new Text </p>
// 웹 문서에 텍스트 단락 추가 과정
var newP = document.createElement("p") // 요소 노드 만들기
var newText = document.createTextNode("new Text") // 텍스트 노드 만들기
newP.appendChild(newText) // 자식 노드로 추가하기
document.body.appendChild(newP) // body 태그 안에 p 태그 추가
var attr = document.createAttribute("class") // 속성 노드 만들기
attr.value = "accent"
newP.setAttributeNode(attr) // 속성 노드 연결하기
폼 요소에 접근 방법 (1) id/class 값 사용 : document.querySelector("#id").value (2) name 값 사용 : document.forms_name.input_name.value (3) 폼 배열 사용 : document.forms[0].elements[0].value
📂 브라우저 객체 모델 (BOM)
📌 BOM (Browser Object Model)
BOM 정의 : 자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화
브라우저 내장 객체
객체설명
Window
브라우저 창이 열릴 때마다 하나씩 만들어지는 객체 (최상위 객체)
Document
웹 문서에서 body 태그 만나면 만들어지는 객체 (HTML 문서 정보 가짐)
History
현재 창에서 사용자 방문 기록 저장
Location
현재 페이지에 대한 URL 정보
Navigator
현재 사용 중인 웹 브라우저 정보
Screen
현재 사용 중인 화면 정보 다룸
Window 객체 : 웹 브라우저 상태를 제어하는 객체 (➡ 객체.속성)
속성설명
document
브라우저 창에 표시된 웹 문서에 접근
frameElement
현재 창이 다른 요소 안에 포함되어 있으면, 그 요소 반환 (아니면 null 반환)
innerHeight
내용 영역의 높이
innerWidth
내용 영역의 너비
localStorage
웹 브라우저에서 데이터 저장하는 로컬 스토리지 반환
location
Window 객체의 위치/현재 URL
name
브라우저 창의 이름 가져오거나 수정
outerHeight
브라우저 창의 바깥 높이
outherWidth
브라우저 창의 바깥 너비
pageXOffset
스크롤했을 때 화면이 수평으로 이동하는 픽셀 수 (=scrollX)
pageYOffset
스크롤했을 때 화면이 수직으로 이동하는 픽셀 수 (=scrollY)
parent
현재 창이나 서브 프레임의 부모 프레임
screenX
브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서부터 떨어져 있는 거리
screenY
브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서부터 떨어져 있는 거리
sessionStorage
웹 브라우저에서 데이터를 저장하는 세션 스토리지 반환
함수설명
alert()
알림 창 표시
blur()
창에서 포커스 제거
close()
현재 열려 있는 창 닫기
confirm()
확인 창 표시 (확인, 취소)
focus()
현재 창에 포커스 부여
moveBy(가로,세로)
현재 창을 지정한 크기만큼 이동
moveTo(가로,세로)
현재 창을 지정한 좌표만큼 이동
open(링크)
새로운 창 열기
postMessage()
다른 창으로 메시지 전달
print()
현재 문서 인쇄
prompt()
프롬프트 창에 입력한 텍스트 반환
resizeBy(가로,세로)
지정한 크기만큼 현재 창 크기 조절
resizeTo(가로,세로)
동적으로 브라우저 창의 크기 조절
scroll()
문서에서 특정 위치로 스크롤함
scrollBy()
지정한 크기만큼씩 스크롤
scrollTo()
지정한 위치까지 스크롤
setCursor()
현재 창의 커서 변경
showModalDialog()
모달 창 표시
sizeToContent()
내용에 맞게 창 크기를 맞춤
stop()
로딩 중지
- Navigator 객체 : 웹 브라우저 관련 정보 저장 (웹 브라우저 버전, 어떤 플러그인 설치되어 있는지, 웹 브라우저 온/오프라인 상태)
속성설명
appCodeName
브라우저 이름(코드 이름) 문자열로 반환
appName
브라우저 공식 이름을 문자열 반환
appVersion
브라우저 버전 문자열 반환
battery
배터리 충전 상태 정보를 객체로 반환
connection
브라우저 장치의 네트워크 정보를 객체로 반환
cookieEnabled
쿠키 정보를 무시한다면 false, 아니면 true 반환
geolocation
모바일 기기를 사용한 위치 정보를 객체로 반환
maxTouchPoints
장치에서 동시에 터치 가능한 포인트가 몇 개인지 반환
platform
브라우저 플랫폼 정보를 문자열로 반환
userAgent
현재 브라우저 정보가 있는 사용자 에이전트 문자열 반환
✔ 렌더링 엔진
➡ 렌더링 엔진 : 브라우저에서 웹 문서를 화면에 표시하기 위해 웹 문서의 태그, 스타일 해석하는 프로그램 ➡ Navigator 객체는 렌더링 엔진의 이름을 보고 웹 브라우저 종류 구별 ➡ 자바스크립트 엔진 확인 : navigator.useragent ➡ 브라우저 - 렌더링 엔진 - 자바스크립트 엔진
