티스토리 뷰
자바스크립트 문법
자바스크립트 주석
- 한줄 주석: //
- 범위 주석: /* */
변수 선언
변수 종류: 멤버변수와 지역변수
변수에 대한 자료형을 선언하지 않음(자료형은 존재)
변수 명명 규칙
1. 영어 대/소문자, 숫자, _(언더스코어), $ 사용가능
2. 첫글자 숫자 사용 불가
3. 공백을 포함한 특수문자 사용불가
4. 이름에 의미있는 단어의 조합 권장
5. 예약어 사용불가
6. 두 단어 이상 결합시 낙타표기법 권장
7. 한글 사용가능
8. 생성자 함수의 이름을 항상 대문자로 시작
9. 변수, 인스턴스, 함수, 메소드는 항상 소문자로 시작
숫자(Number)
- 정수형 숫자와 부동소수점 숫자로 구분
- 내장객체로 Math 객체 제공, 기본 메소드 존재
- Math.abs() : 절대값, random() : 난수, round() : 반올림, floor() : 버림, ceil() : 올림
문자열(String)
" "로 묶여있는 리터럴 값, 내장객체 String이며 기본적인 메소드가 존재
toUpperCase(), toLowerCase(), length, indexOf(), lastIndexOf(), substring(), split(), ...
형 변환
숫자 -> 문자열
1. 숫자와 문자열을 + 연산하게 되면 문자열이 우선되어 숫자를 문자로 변환
2. 강제 형변환 : String() 생성자 함수를 이용
문자열 -> 숫자
숫자, 문자 + 이외에 사칙연산시 숫자가 우선되어 문자를 숫자로 변환
강제 형변환 함수 이용 : Number(), parseInt() 등
제어문
1. 조건문 : if, if ~ else, if ~ else if ~ else, switch
2. 반복문 : for, while, do~while, for in
3. 분기문 : continue, break
DOM(Document Object Model)
문서객체 : HTML에 있는 태그를 객체화하여 자바스크립트에서 다룰 수 있게 한 것, 모든 노드 객체에 접근할 수 있는 요소와 메소드를 제공함.
자바스크립트를 이용한 HTML태그 접근
자바스크립트를 이용하여 HTML태그를 동적으로 처리하기 위해서는 DOM객체의 메소드를 호출하여 접근해야 함.
메소드(명령어)
1. getElementById("아이디 값")
2. getElementsByName("이름값")
3. getElementsByTagName("태그명")
4. querySelector("선택자")
5. querySelectorAll("선택자")
Hi
DOM Object
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM(Document Object Model)</title>
<style>
#h1-tag{
color: violet;
}
</style>
</head>
<body>
<h1 id="h1-tag">DOM(Document Object Model)</h1>
<p>
문서객체 : HTML에 있는 태그를 객체화하여 자바스크립트에서
다룰 수 있게 한 것, 모든 노드 객체에 접근할 수 있는 요소와
메소드를 제공함.
</p>
<h2>자바스크립트를 이용한 HTML태그 접근</h2>
<p>
자바스크립트를 이용하여 HTML태그를 동적으로 처리하기
위해서는 DOM객체의 메소드를 호출하여 접근해야 함.
</p>
<h3>메소드(명령어)</h3>
<p>
1. getElementById("아이디 값") <br>
2. getElementsByName("이름값") <br>
3. getElementsByTagName("태그명") <br>
4. querySelector("선택자") <br>
5. querySelectorAll("선택자")
</p>
<p id="p1" name="pp">안녕하세요</p>
<p id="p2" name="pp">돔객체</p>
<p id="p3" name="pp">자바스크립트</p>
<script>
// #h1-tag{
// color: violet;
// }
// 자바스크립트를 이용한 돔프로그래밍
//(1) var h1Tag = document.getElementById("h1-tag");
// var inputColor = prompt("색깔을 입력해주세요");
// h1Tag.style.color = inputColor;
//(2) h1Tag.style.color = "hotpink";
//h1Tag.innerHTML = "Hello, Document Object Model";
//#1. getElementById, Id를 이용하는 것
// var p1Tag = document.getElementById("p1");
// p1Tag.innerHTML = "Hello";
// var p2Tag = document.getElementById("p2");
// p2Tag.innerHTML = "DOM Object";
// var p3Tag = document.getElementById("p3");
// p3Tag.innerHTML = "Java Script";
//#2. getElementsByName, Name을 이용하는 것(고전적 방법)
var pTags = document.getElementsByName("pp");
pTags[0].innerHTML = "Hello"; //배열 인덱스로 접근
pTags[1].innerHTML = "DOM Object";
pTags[2].innerHTML = "Java Script";
//현대적 방법
var p1Tag = document.querySelector("#p1");
p1Tag.innerHTML = "Hello";
var pTags = document.querySelectorAll("[name=pp]");
pTags[0].innerHTML = "Hi";
pTags[1].innerHTML = "DOM Object";
pTags[2].innerHTML = "javascript";
</script>
</body>
</html>
Event.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 이벤트</title>
</head>
<body>
<h1>이벤트</h1>
<p>
이벤트 : 웹 페이지에서 어떠한 행위(사용자의 행동)가
발생한 것을 이벤트라 함 <br>
이벤트 활용 : 이벤트 속성과 이벤트핸들러(함수)를 연동하여
이벤트 발생시 특정기능을 하도록 함.
</p>
<h3>이벤트 설정방법</h3>
<p>
1. 고전 이벤트 모델 <br>
2. 인라인 이벤트 모델 <br>
3. 표준 이벤트 모델 <br>
</p>
<h3>고전 이벤트 모델</h3>
<p>
1. 요소 객체가 가지고 있는 이벤트 속성에 이벤트핸들러를
연결하는 방법 <br>
2. 이벤트를 제거할 때는 속성값에 null값을 넣어주면 됨 <br>
</p>
<button id="btn1">고전 이벤트 모델</button>
<div id="div-1"></div>
<h3>인라인 이벤트 모델</h3>
<p>
요소 내부에 이벤트를 작성하는 방법 <br>
script 태그에 있는 함수를 호출하는 방식 <br>
</p>
<button onclick="inlineEvent();">인라인 이벤트 모델</button>
<!-- <br><br><br>
<span onclick="inlineEvent();">여기에도 바인딩</span> -->
<h3>표준 이벤트 모델</h3>
<p>
1. w3c에서 공식적으로 지정한 이벤트 <br>
2. 한번에 여러가지 이벤트 핸들러 설정 가능
</p>
<button id="sBtn1">표준 이벤트 모델</button>
<script>
var btnTag = document.querySelector("#btn1");
// console.log(btnTag); 확인용
btnTag.onclick = function (){;//익명함수(이름을 안붙이고): {코드를 품을 수 있다}
alert("고전 이벤트 동작");
};//btnTag가 클릭되었을 때 동작 - 연동
function inlineEvent(){
alert("인라인 이벤트 동작");
}
var sBtnTag = document.querySelector("#sBtn1");
sBtnTag.addEventListener("click", function(){
alert("표준 이벤트 동작");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>브라우저 객체 모델</title>
</head>
<body>
<h1>윈도우 객체</h1>
<p>window 객체는 자바스크립트의 최상위 객체이며 BOM, DOM으로 나뉜다.</p>
<P>브라우저 창에 대한 설정을 하는 객체</P>
<button onclick="callAlert();">alert 확인</button> <br><br>
<button onclick="callConfirm();">confirm 확인</button> <br><br>
<button onclick="callPrompt();">prompt 확인</button> <br><br>
<button onclick="callOpen();">open 확인</button> <br><br>
<button onclick="callClose();">close 확인</button> <br><br>
<button onclick="callTimeout();">setTimeout 확인</button> <br><br>
<button onclick="callInterval();">setInterval 확인</button> <br><br>
<button onclick="callClearInterval();">clearInterval 확인</button> <br><br>
<button onclick="startClock();">디지털 시계 On</button> <br><br>
<button onclick="stopClock();">디지털 시계 Off</button> <br><br>
<div id="clockArea"
style="background-color: #ccc; width:300px;height:100px;
font-size:30px;border:1px solid #222;color:#222;">
</div>
<br><br><br>
<hr>
<h3>navigator 객체</h3>
<p>
웹 페이지를 실행하고 있는 브라우저에 대한 정보를 가지고 있는 객체
</p>
<button onclick="checkNavigator();">naviagtor 객체 확인</button>
<h3>screen 객체</h3>
<p>
웹 브라우저 화면이 아닌 운영체제 화면의 속성을 가진 객체
</p>
<button onclick="checkScreen();">screen 객체 확인</button>
<h3>location 객체</h3>
<p>
브라우저 주소 표시줄과 관련된 객체(페이지 이동)
</p>
<button onclick="location.reload();">location 확인</button> <br>//reload=새로고침
<button onclick="checkHref();">href 페이지 이동</button> <br>
<button onclick="checkAssign();">assign 페이지 이동</button> <br>
<button onclick="checkReplace();">replace 페이지 이동</button> <br>
<h3>history 객체</h3>
<p>
현재 창에서 사용자의 방문 기록을 저장함. <br>
뒤로가기, 앞으로가기, 새로고침 가능
</p>
<button onclick="javascript:console.log(history);">history 객체 확인</button>
<br>
<button onclick="goBack();">뒤로가기 확인</button>
<script>
function goBack(){
//history.go(): 새로고침, go(-1):뒤로가기, go(1):앞으로가기
history.go(-1);
}
function checkReplace(){
//페이지 이동(전달값 이용)
//뒤로가기 불가능->보안에 이용
}
function checkAssign(){
//페이지 이동(전달값으로 이용)
}
function checkhref(){
//페이지 이동(속성값 이용)
//가장 많이 쓰임
}
function checkScreen(){
console.log(screen);
}
function checkNavigator(){
//책 p585부터 확인 가능
//웹 브라우저를 식별할 수 있는 정보
console.log(navigator.userAgent);
}
var myWindow = null;
var eInterval = null;
function startClock(){
var time = new Date();
var divTag = document.querySelector("#clockArea");
clockObj = setInterval(function(){
var time = new Date();
var timeDate = time.getHours() + " : "
+ time.getMinutes()+" : "+time.getSeconds();
divTag.innerHTML = timeDate;
}, 1000);
// console.log(time.getHours());
// console.log(time.getMinutes());
// console.log(time.getSeconds());
}
function stopClock(){
clearInterval(clockObj);
}
function callInterval(){//일정 시간마다 반복 동작
window.setInterval(function() {
console.log(1);
},1000);
}
function callClearInterval(){
//반복 동작 중지
clearInterval(eInterval);
}
function callTimeout(){//일정 시간 후 동작
setTimeout(function(){
myWindow.close();
}, 3000); //3초는 몇 ms? -> 3000ms = 3000*1/1000s=3s;
}
function callOpen(){
var left = (screen.width - 500)/2; //500,600은 열려는 창의 크기->정가운데
var top = (screen.height - 600)/2;
myWindow = window.open("./1.JS_Basic.html", "pop", "width=500, height=600, left=250, top=200");
}//var를 입력하면 지역변수가 되어 못찾는다, var없애면 전역변수가 됨
function callClose(){
myWindow.close();
}
function callAlert(){
window.alert("자바스크립트 재밌다.");//확인용
// 윈도우.은 생략 가능
}
function callConfirm(){
var result = confirm("자바스크립트 참 쉽다.");
console.log(result);//확인, 취소가능한 것으로 alert와 차이
}
function callPrompt(){
var result = window.prompt("제일 쉽고 재밌는 과목은?");
console.log(result);
}
</script>
</body>
</html>
배열
배열이란
자바스크립트에서는 자료형 지정이 없기 때문에 모든 자료형을 보관하는
변수의 모음을 배열로 처리함, 자바의 컬렉션(List(object))과 비슷함.
배열의 선언
배열의 선언시 크기를 정하지 않고 선언할 수도 있고, 크기를 정하고 선언할 수 있다.
배열의 초기화
선언된 배열에 값을 대입할 수 있으면 new 키워드와 [](JSON)을 이용할 수 있다.
Array 객체 함수(메소드)
Array도 하나의 객체이기 때문에 활용할 수 있는 메소드가 있음.
1. 배열명.indexOf("값") : 배열에서 요소가 위치한 인덱스 리턴
2. 배열명.concat(배열명2) : 두 개 또는 세 개의 배열을 결합함
3. 배열명.join() : 배열을 결합하고 문자열로 변환
- 배열명.toString() : 배열을 문자열로 변환
4. 배열명.reverse() : 배열의 순서를 뒤집음
5. 배열명.sort() : 배열을 정렬함
6. 배열명.push('값') : 배열의 맨 뒤에 요소 추가
7. 배열명.pop() : 배열의 맨 뒤에 요소 제거
8. 배열명.shift() : 배열의 첫번째 요소 제거
9. 배열명.unshift() : 배열의 앞에 새로운 요소 추가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 배열</title>
</head>
<body>
<h1>배열</h1>
<h3>배열이란</h3>
<p>
자바스크립트에서는 자료형 지정이 없기 때문에 모든 자료형을 보관하는 <br>
변수의 모음을 배열로 처리함, 자바의 컬렉션(List(object))과 비슷함.
</p>
<h3>배열의 선언</h3>
<p>
배열의 선언시 크기를 정하지 않고 선언할 수도 있고,
크기를 정하고 선언할 수 있다.
</p>
<h3>배열의 초기화</h3>
<p>
선언된 배열에 값을 대입할 수 있으면 new 키워드와 [](JSON)을 이용할 수 있다.
</p>
<h3>Array 객체 함수(메소드)</h3>
<p>
Array도 하나의 객체이기 때문에 활용할 수 있는 메소드가 있음. <br>
1. 배열명.indexOf("값") : 배열에서 요소가 위치한 인덱스 리턴 <br>
2. 배열명.concat(배열명2) : 두 개 또는 세 개의 배열을 결합함 <br>
3. 배열명.join() : 배열을 결합하고 문자열로 변환 <br>
- 배열명.toString() : 배열을 문자열로 변환 <br>
4. 배열명.reverse() : 배열의 순서를 뒤집음 <br>
5. 배열명.sort() : 배열을 정렬함 <br>
6. 배열명.push('값') : 배열의 맨 뒤에 요소 추가 <br>
7. 배열명.pop() : 배열의 맨 뒤에 요소 제거 <br>
8. 배열명.shift() : 배열의 첫번째 요소 제거 <br>
9. 배열명.unshift() : 배열의 앞에 새로운 요소 추가 <br>
</p>
<h5>indexOf 예제</h5>
<div>
<p>다음 중 좋아하는 과일을 작성하시오</p>
<p id="p1">바나나 / 딸기 / 복숭아 / 수박</p>
<input type="text" name="fruit" id="fruit">
<input type="button" value="결과" onclick="fruitIndexOf();">
<p id="result1"></p>
</div>
<h5>concat예제</h5>
<div>
<p>결과 버튼을 눌러서 console에서 확인하세요</p>
<input type="button" value="결과" onclick="fruitConcat();">
</div>
<h5>join예제</h5>
<div>
<p>결과 버튼을 눌러서 console에서 확인하세요</p>
<input type="button" value="결과" onclick="fruitJoin();">
</div>
<h5>reverse 예제</h5>
<div>
<p>결과 버튼을 눌러서 console에서 확인하세요</p>
<input type="button" value="결과" onclick="fruitReverse();">
</div>
<h5>sort 예제</h5>
<div>
<p>결과 버튼을 눌러서 console에서 확인하세요</p>
<input type="button" value="결과" onclick="fruitSort();">
</div>
<h5>push/pop 예제</h5>
<div>
<p>결과 버튼을 눌러서 console에서 확인하세요.</p>
<input type="button" value="결과" onclick="pushPop();">
</div>
<h5>shift/unshift 예제</h5>
<div>
<p>결과 버튼을 눌러서 console에서 확인하세요.</p>
<input type="button" value="결과" onclick="shiftEx();">
</div>
<script>
function shiftEx(){
// 큐자료구조를 구현하는데 사용됨
// unshift()로 추가하고 pop()으로 꺼내서 사용하도록 구현
// Meta, Amazon, Apple, Netflix, Google,...
var globals = ["Meta", "Amazon", "Apple", "Netflix", "Google"];
console.log(globals);
globals.unshift("X");
console.log(globals);
globals.unshift("MS");
console.log(globals);
console.log(globals.shift());
console.log(globals);
console.log(globals.shift());
console.log(globals);
}
function pushPop(){
//Stack 자료구조를 구현하는데 사용되는 method(김치냉장고에서 김치 빼는 것처럼)
//브라우저의 뒤로가기 기능을 구현하는데 사용될 수 있음
//네카라쿠배당토
var companies = ["네이버", "카카오뱅크", "라인", "쿠팡", "배달의민족"];
console.log(companies);
companies.push("당근");//뒤에 붙는다
companies.push("토스");
console.log(companies);
console.log(companies.pop());//빠져나온다
console.log(companies);
}
function fruitSort(){
var sortArrs = [1,7,4,5,3,2,8,6,10,9];
sortArrs.sort(sortASC);//숫자로 인식해서 정렬하는 것이 아님
sortArrs.sort(sortDESC);
console.log(sortArrs);
}
function sortASC(a,b){//비교 대상을 숫자로 인식하여 정렬하는 것이 아님
return a-b;
}
function sortDESC(a,b){
return b-a;
}
function fruitReverse(){
var nums = [1,2,3,4,5,6,7,8,9,10];
console.log(nums.reverse());
}
function fruitJoin(){
var fruitBag = ["딸기", "체리", "토마토", "멜론", "포도"];
console.log(fruitBag.join(","));
console.log(fruitBag.join("/"));
console.log(fruitBag.join(" "));
}
function fruitConcat(){
//오렌지, 바나나, 복숭아, 두리안, 한라봉
var fBasket = ["오렌지", "바나나", "복숭아", "두리안", "한라봉"];
//시금치, 상추, 당근, 오이, 호박
var vBasket = ["상추", "시금치", "당근", "오이", "호박"];
var conResult= fBasket.concat(vBasket);
console.log(conResult);
}
function fruitIndexOf(){
var fruits = new Array();
//배열 객체 표현법으로 빠르게!
fruits = ["바나나", "딸기", "복숭아", "수박"];
// fruits[0] = "바나나";
// fruits[1] = "딸기";
// fruits[2] = "복숭아";
// fruits[3] = "수박";
var inputTag = document.querySelector("#fruit");
var value = inputTag.value;
var index = fruits.indexOf(value);
var pTag = document.querySelector("#p1");
pTag.innerHTML = value + "는 "+index+"번째 인덱스에 있습니다.";
}
function basicArray(){
var arrs = new Array(3);
arrs[0] = 99;
arrs[1] = 98;
arrs[2] = 97;
console.log(arrs);
arrs[3] = 96;
console.log(arrs);
arrs = new Array(1,"Heollo","JS",4,5.2);//실수를 넣어도 들어감: collection과 같다
console.log(arrs);
arrs = [2024, 11, 15, 2025, 5, 2];
console.log(arrs);
}
</script>
</body>
</html>
JS_Function.js
function jsFunc1(){
var p1Tag = document.querySelector("#p1");
p1Tag.innerHTML = "jsFunc1() 함수 실행 완료";
}
var jsFunc2 = function(){//이름 없는 함수는 변수에 넣어서 써야 함->소괄호를 붙여서 실행
var p2Tag = document.querySelector("#p2");
p1Tag.innerHTML = "jsFunc2() 함수 실행 완료";
}
function resultJsFunc(){
jsFunc3(24,11,18);
jsFunc3(25,5,2);
}
function jsFunc3(num1, num2, num3){//전달인자와 매개변수와의 관계
var result = num1 + num2 + num3;
var p4Tag = document.querySelector("#p4");
p4Tag.innerHTML = result;
}
function resultJsFunc(){//jsFunc6를 호출해서, 버튼 누를때마다 랜덤한 수가 나타남
var p5Tag = document.querySelector("#p5");
p5Tag.innerHTML = jsFunc6();
}
function jsFunc6(){
return Math.floor(Math.random()*10+1);//해당 데이터를 호출해서 쓸 수 있게 한다
}
callFuncTenTimes(calleeFunc);//호출->1값 나타남
//콜백함수 여기서 실행
function callFuncTenTimes(otherFunc){
//전달값을 변하게 하기 위한 반복문
for(var i = 0; i < 10; i++)
//calleeFunc(i);
//calleeFunc(0)
//calleeFunc(1)
//...
otherFunc(i);
}//함수만 소괄호를 받는다
function calleeFunc(num){//매개변수로 함수를 전달:'콜백함수★'라 함
var p6Tag = document.querySelector("#p6");
p6Tag.innerHTML += num;
}
function jsReturnFunc(){
var inputTag = document.querySelector("#name");
var p7Tag = document.querySelector("#p7");
return function(){
p7Tag.innerHTML = inputTag.ariaValueMax;
}();
}